🌱 Vendor webui dependencies (#619)

* 🌱 Vendor webui dependencies Signed-off-by: Mauro Morales <[email protected]> * Remove GA caching Signed-off-by: Mauro Morales <[email protected]> * The deps need to be there before the compilation of the agent Signed-off-by: Mauro Morales <[email protected]> * Remove unnecesary tag Signed-off-by: Mauro Morales <[email protected]> * Do not build webui-deps Signed-off-by: Mauro Morales <[email protected]> Signed-off-by: Mauro Morales <[email protected]>
kairos-io · Jan 10, 2023 · 286efcf · 286efcf
1 parent 912ba6d
commit 286efcf
Show file tree

Hide file tree

Showing 10 changed files with 451 additions and 32 deletions.
diff --git a/Earthfile b/Earthfile
@@ -106,6 +106,7 @@ version:
 
 build-kairos-agent:
     FROM +go-deps
+    COPY +webui-deps/node_modules ./internal/webui/public/node_modules
     DO +BUILD_GOLANG --BIN=kairos-agent --SRC=agent --CGO_ENABLED=$CGO_ENABLED
 
 build:
@@ -230,7 +231,6 @@ docker:
 
     # Copy kairos binaries
     COPY +build-kairos-agent/kairos-agent /usr/bin/kairos-agent
-
     # Enable services
     IF [ -f /sbin/openrc ]
      RUN mkdir -p /etc/runlevels/default && \
@@ -630,3 +630,10 @@ examples-bundle-config:
     RUN echo "    targets:" >> tests/assets/live-overlay.yaml
     RUN echo "    - container://${BUNDLE_IMAGE}" >> tests/assets/live-overlay.yaml
     SAVE ARTIFACT tests/assets/live-overlay.yaml AS LOCAL bundles-config.yaml
+
+webui-deps:
+    FROM node:18-alpine
+    COPY . .
+    WORKDIR ./internal/webui/public
+    RUN npm install
+    SAVE ARTIFACT node_modules /node_modules AS LOCAL internal/webui/public/node_modules
diff --git a/internal/webui/public/README.md b/internal/webui/public/README.md
@@ -0,0 +1,6 @@
+# Web UI
+
+## Dependencies
+
+All dependencies are defined in the package.json and package-lock.json files.
+You can use `npm` to install or upgrade any packages.
diff --git a/internal/webui/public/favicon.ico b/internal/webui/public/favicon.ico
diff --git a/internal/webui/public/index.html b/internal/webui/public/index.html
@@ -6,24 +6,25 @@
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
   <!-- Bootstrap CSS -->
-  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
+  <link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css" crossorigin="anonymous">
 
   <!-- Font awesome -->
-  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" integrity="sha384-vp86vTRFVJgpjF9jiIGPEEqYqlDwgyBgEF109VFjmqGmIY/Y4HV4d3Gp2irVfcrp" crossorigin="anonymous">
+  <link rel="stylesheet" href="/node_modules/@fortawesome/fontawesome-free/css/all.css" crossorigin="anonymous">
 
   <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'>
+  <link rel="shortcut icon" href="/favicon.ico">
 
   <!-- CodeMirror -->
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.57.0/codemirror.min.css">
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.57.0/codemirror.min.js"></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.57.0/mode/yaml/yaml.min.js"></script>
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.57.0/theme/material.min.css">
+  <link rel="stylesheet" href="/node_modules/codemirror/lib/codemirror.css">
+  <script src="/node_modules/codemirror/lib/codemirror.js"></script>
+  <script src="/node_modules/codemirror/mode/yaml/yaml.js"></script>
+  <link rel="stylesheet" href="/node_modules/codemirror/theme/material.css">
 
   <!-- Add the yaml-js library -->
-  <script type="text/javascript" src="/js/yaml.min.js"></script>
+  <script type="text/javascript" src="/node_modules/yamljs/dist/yaml.min.js"></script>
 
   <!-- Alpine.js -->
-  <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
+  <script defer src="/node_modules/alpinejs/dist/cdn.min.js"></script>
   <style>
     .navbar {
       background-color: #ee5007;
@@ -111,12 +112,11 @@ <h1>Welcome to the Installer!</h1>
       </form>
     </div>
 
-    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
   <!-- Optional JavaScript -->
   <!-- jQuery first, then Popper.js, then Bootstrap JS -->
-  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
-  <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
-  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
+  <script src="/node_modules/jquery/dist/jquery.slim.min.js" crossorigin="anonymous"></script>
+  <script src="/node_modules/popper.js/dist/umd/popper.min.js" crossorigin="anonymous"></script>
+  <script src="/node_modules/bootstrap/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
 
   <footer class="bg-light py-3 mt-5 d-flex justify-content-center">
     <div class="container mx-auto">

diff --git a/internal/webui/public/js/xterm-theme.js b/internal/webui/public/js/xterm-theme.js
diff --git a/internal/webui/public/js/yaml.min.js b/internal/webui/public/js/yaml.min.js
diff --git a/internal/webui/public/message.html b/internal/webui/public/message.html
@@ -6,14 +6,14 @@
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
   <!-- Bootstrap CSS -->
-  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
+  <link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css" crossorigin="anonymous">
 
   <!-- Font awesome -->
-  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" integrity="sha384-vp86vTRFVJgpjF9jiIGPEEqYqlDwgyBgEF109VFjmqGmIY/Y4HV4d3Gp2irVfcrp" crossorigin="anonymous">
+  <link rel="stylesheet" href="/node_modules/@fortawesome/fontawesome-free/css/all.css" crossorigin="anonymous">
 
   <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'>
 
-  <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
+  <script defer src="/node_modules/alpinejs/dist/cdn.min.js"></script>
   <style>
     .navbar {
       background-color: #ee5007;
@@ -45,12 +45,11 @@ <h1> Installation failed   </h1>
       <button x-on:click="window.location='index.html'" class="btn btn-primary">Go Back</button>
     </div>
 
-    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
   <!-- Optional JavaScript -->
   <!-- jQuery first, then Popper.js, then Bootstrap JS -->
-  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
-  <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
-  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
+  <script src="/node_modules/jquery/dist/jquery.slim.min.js" crossorigin="anonymous"></script>
+  <script src="/node_modules/popper.js/dist/umd/popper.min.js" crossorigin="anonymous"></script>
+  <script src="/node_modules/bootstrap/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
 
   <footer class="bg-light py-3 mt-5 d-flex justify-content-center">
     <div class="container mx-auto">