Imitate nodejs docker command from openshift

Dockerfile

@@ -1,16 +1,24 @@
-FROM node:lts
+FROM nodejs:16-ubi8
-RUN mkdir -p /home/node/app/node_modules && chown -R node:node /home/node/app
+USER root
-RUN mkdir -p /home/node/app/.npm && chown -R node:node /home/node/app/.npm
+COPY upload/src /tmp/src
-RUN mkdir -p /home/node/.npm && chown -R node:node /home/node/.npm
+ENV OPENSHIFT_BUILD_NAME="wg-frontend-selfdeploy" OPENSHIFT_BUILD_NAMESPACE="ma-lab-facility" OPENSHIFT_BUILD_SOURCE="https://git.nnag.me/infidel/ocp-wg-frontend.git" NPM_RUN="start"
-RUN mkdir -p /.npm && chown -R node:node /.npm
+RUN chown -R 1001:0 /tmp/src
-RUN chown -R 1000650000:0 "/.npm"
+USER 1001
-RUN chown -R 1000650000:0 "/home/node/.npm"
+RUN /usr/libexec/s2i/assemble
-RUN chown -R 1000650000:0 "/home/node/app/.npm"
+CMD /usr/libexec/s2i/run
-WORKDIR /home/node/app
-COPY --chown=node:node . .
-RUN npm config set cache /home/node/app/.npm/
-RUN npm install
-EXPOSE 5000
-USER node
-CMD ["npm", "run", "dev"]
 
+#############################################
+# RUN mkdir -p /home/node/app/node_modules && chown -R node:node /home/node/app
+# RUN mkdir -p /home/node/app/.npm && chown -R node:node /home/node/app/.npm
+# RUN mkdir -p /home/node/.npm && chown -R node:node /home/node/.npm
+# RUN mkdir -p /.npm && chown -R node:node /.npm
+# RUN chown -R 1000650000:0 "/.npm"
+# RUN chown -R 1000:1000 "/home/node/.npm"
+# RUN chown -R 1000650000:0 "/home/node/app/.npm"
+# WORKDIR /home/node/app
+# COPY --chown=node:node . .
+# RUN npm config set cache /home/node/app/.npm/
+# RUN npm install
+# EXPOSE 5000
+# USER node
+# CMD ["npm", "run", "dev"]

package.json

@@ -31,7 +31,11 @@
     "@tailwindcss/forms": "0.2.1",
     "axios": "^1.1.3",
     "chart.js": "2.9.4",
+    "chartjs": "^0.3.24",
+    "d3": "^7.7.0",
+    "graphology": "^0.25.1",
     "papaparse": "^5.3.2",
+    "sigma": "^2.4.0",
     "sirv-cli": "1.0.11",
     "svelte-routing": "1.5.0",
     "tailwindcss": "^2.2.19"

rollup.config.js

@@ -156,6 +156,7 @@ export default {
     svelte({
       // enable run-time checks when not in production
       dev: !production,
+      // emitCss: true,
       // we'll extract any component CSS out into
       // a separate file - better for performance
       css: (css) => {

src/components/Sidebar/Sidebar.svelte

@@ -150,6 +150,19 @@
           </a>
         </li>
 
+        <li class="items-center">
+          <a
+            use:link
+            href="/admin/wgNetGraph"
+            class="text-xs uppercase py-3 font-bold block {location.href.indexOf('/admin/tables') !== -1 ? 'text-red-500 hover:text-red-600':'text-blueGray-700 hover:text-blueGray-500'}"
+          >
+            <i
+              class="fas fa-table mr-2 text-sm {location.href.indexOf('/admin/tables') !== -1 ? 'opacity-75' : 'text-blueGray-300'}"
+            ></i>
+            WireGuard Net Graph
+          </a>
+        </li>
+
         <li class="items-center">
           <a
             use:link

src/components/Utils/D3NetProcessor.js

@@ -0,0 +1,55 @@
+// set the dimensions and margins of the graph
+const margin = {top: 10, right: 30, bottom: 30, left: 40},
+  width = 400 - margin.left - margin.right,
+  height = 400 - margin.top - margin.bottom;
+
+// append the svg object to the body of the page
+const svg = d3.select("#my_dataviz")
+.append("svg")
+  .attr("width", width + margin.left + margin.right)
+  .attr("height", height + margin.top + margin.bottom)
+.append("g")
+  .attr("transform",
+        `translate(${margin.left}, ${margin.top})`);
+
+d3.json("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/data_network.json").then( function( data) {
+
+  // Initialize the links
+  const link = svg
+    .selectAll("line")
+    .data(data.links)
+    .join("line")
+      .style("stroke", "#aaa")
+
+  // Initialize the nodes
+  const node = svg
+    .selectAll("circle")
+    .data(data.nodes)
+    .join("circle")
+      .attr("r", 20)
+      .style("fill", "#69b3a2")
+
+  // Let's list the force we wanna apply on the network
+  const simulation = d3.forceSimulation(data.nodes)                 // Force algorithm is applied to data.nodes
+      .force("link", d3.forceLink()                               // This force provides links between nodes
+            .id(function(d) { return d.id; })                     // This provide  the id of a node
+            .links(data.links)                                    // and this the list of links
+      )
+      .force("charge", d3.forceManyBody().strength(-400))         // This adds repulsion between nodes. Play with the -400 for the repulsion strength
+      .force("center", d3.forceCenter(width / 2, height / 2))     // This force attracts nodes to the center of the svg area
+      .on("end", ticked);
+
+  // This function is run at each iteration of the force algorithm, updating the nodes position.
+  function ticked() {
+    link
+        .attr("x1", function(d) { return d.source.x; })
+        .attr("y1", function(d) { return d.source.y; })
+        .attr("x2", function(d) { return d.target.x; })
+        .attr("y2", function(d) { return d.target.y; });
+
+    node
+         .attr("cx", function (d) { return d.x+6; })
+         .attr("cy", function(d) { return d.y-6; });
+  }
+
+});

src/layouts/Admin.svelte

@@ -16,6 +16,7 @@
   import wgProfiles from "views/admin/wgProfiles.svelte";
   import wgBlast from "views/admin/wgBlast.svelte";
   import wgCRUD from "views/admin/wgCRUD.svelte";
+  import wgNetGraph from "views/admin/wgNetGraph.svelte";
   import Maps from "views/admin/Maps.svelte";
 
   export let location;
@@ -36,6 +37,7 @@
           <Route path="wgLogs" component="{wgLogs}" />
           <Route path="wgProfiles" component="{wgProfiles}" />
           <Route path="wgCRUD" component="{wgCRUD}" />
+          <Route path="wgNetGraph" component="{wgNetGraph}" />
           <Route path="wgBlast" component="{wgBlast}" />
           <Route path="maps" component="{Maps}" />
         </Router>

src/views/admin/wgNetGraph.svelte

@@ -0,0 +1,10 @@
+<script>
+  // core components
+  import CardWGNetGraph from "components/Cards/CardWGNetGraph.svelte";
+  let wgProfileFetch = [];
+
+</script>
+
+<div class="flex flex-wrap mt-4 mb-8">
+      <CardWGNetGraph />
+</div>