Add dashboard layout and styles; implement external content loading

EliasDeHondt · Dec 10, 2024 · 1e2145d · 1e2145d
1 parent ee090bc
commit 1e2145d
Show file tree

Hide file tree

Showing 6 changed files with 238 additions and 14 deletions.
diff --git a/app/css/dashboard.css b/app/css/dashboard.css
@@ -9,9 +9,70 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    justify-content: center;
     height: 100vh;
     margin: 0;
     user-select: none;
     padding: 0 10px;
+}
+
+.dashboard-top-boxes {
+    display: flex;
+    justify-content: space-around;
+    width: 100%;
+    margin: 20px 0px;
+    top: 20px;
+}
+
+.dashboard-top-boxes-marginleft {
+    margin-left: 20px;
+}
+
+.dashboard-box {
+    background-color: var(--quaternary);
+    color: var(--text);
+    border-radius: 15px;
+    width: 300px;
+    height: 200px;
+    display: flex;
+    font-weight: bold;
+    font-size: 1rem;
+    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
+}
+
+.dashboard-box-header {
+    color: var(--text);
+    font-size: 1.2rem;
+    font-weight: 700;
+}
+
+.dashboard-box-header h2 {
+    margin: 10px;
+    padding: 0;
+}
+
+.dashboard-box-tree {
+    background-color: var(--tertiary);
+    color: var(--text);
+    border-radius: 15px;
+    width: 100%;
+    height: 290%;
+    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
+}
+
+
+.link {
+    stroke: var(--ascent);
+    stroke-width: 2px;
+}
+
+.node {
+    fill: var(--primary);
+    stroke: var(--text);
+    stroke-width: 1.5px;
+    cursor: pointer;
+}
+
+text {
+    fill: var(--text);
+    pointer-events: none;
 }
diff --git a/app/css/global.css b/app/css/global.css
@@ -10,6 +10,7 @@
     --primary: #004b7a;
     --secondary: #3c3154;
     --tertiary: #262b2e;
+    --quaternary: #1f2326;
     --accent: #5f4270;
 }
 
@@ -19,6 +20,7 @@
     --primary: #85d0ff;
     --secondary: #b6abce;
     --tertiary: #e8eff3;
+    --quaternary: #dedfed;
     --accent: #ac8fbd;
 }
 /* Global Styles */

diff --git a/app/js/dashboard.js b/app/js/dashboard.js
@@ -0,0 +1,141 @@
+/**********************************/
+/* @since 01/01/2025              */
+/* @author K10s Open Source Team  */
+/**********************************/
+
+// Load external content
+document.addEventListener('DOMContentLoaded', function() {
+    loadExternalContent("navigation-bar", "/app/includes/navigation-bar.html");
+    loadExternalContent("context-menu", "/app/includes/context-menu.html");
+});
+
+//Temp
+// Set up the data
+const nodes = [
+    // Clusters
+    { id: "Cluster01", group: "cluster" },
+
+    // Pools
+    { id: "Pool01", group: "pool", cluster: "Cluster01" },
+    { id: "Pool02", group: "pool", cluster: "Cluster01" },
+
+    // Nodes
+    { id: "Node01", group: "node", pool: "Pool01" },
+    { id: "Node02", group: "node", pool: "Pool01" },
+    { id: "Node03", group: "node", pool: "Pool02" },
+    { id: "Node04", group: "node", pool: "Pool02" },
+
+    // Services
+    { id: "Service01", group: "service", node: "Node01" },
+    { id: "Service02", group: "service", node: "Node01" },
+    { id: "Service03", group: "service", node: "Node02" },
+    { id: "Service04", group: "service", node: "Node03" },
+    { id: "Service05", group: "service", node: "Node04" },
+
+    // Containers
+    { id: "Container01", group: "container", service: "Service01" },
+    { id: "Container02", group: "container", service: "Service01" },
+    { id: "Container03", group: "container", service: "Service02" },
+    { id: "Container04", group: "container", service: "Service03" },
+    { id: "Container05", group: "container", service: "Service04" },
+    { id: "Container06", group: "container", service: "Service05" }
+
+];
+
+const links = [
+    { source: "Cluster01", target: "Pool01" },
+    { source: "Cluster01", target: "Pool02" },
+    { source: "Pool01", target: "Node01" },
+    { source: "Pool01", target: "Node02" },
+    { source: "Pool02", target: "Node03" },
+    { source: "Pool02", target: "Node04" },
+    { source: "Node01", target: "Service01" },
+    { source: "Node01", target: "Service02" },
+    { source: "Node02", target: "Service03" },
+    { source: "Node03", target: "Service04" },
+    { source: "Node04", target: "Service05" },
+    { source: "Service01", target: "Container01" },
+    { source: "Service01", target: "Container02" },
+    { source: "Service02", target: "Container03" },
+    { source: "Service03", target: "Container04" },
+    { source: "Service04", target: "Container05" },
+    { source: "Service05", target: "Container06" }
+];
+
+// Set up dimensions
+const width = 1000;
+const height = 1000;
+
+// Create the SVG canvas
+const svg = d3.select("body")
+    .append("svg")
+    .attr("width", width)
+    .attr("height", height);
+
+// Create a simulation with forces
+const simulation = d3.forceSimulation(nodes)
+    .force("link", d3.forceLink(links).id(d => d.id).distance(100))
+    .force("charge", d3.forceManyBody().strength(-300))
+    .force("center", d3.forceCenter(width / 2, height / 2));
+
+// Add links (lines)
+const link = svg.append("g")
+    .attr("stroke", "#ac8fbd")
+    .selectAll("line")
+    .data(links)
+    .join("line")
+    .attr("class", "link");
+
+// Add nodes (circles)
+const node = svg.append("g")
+    .selectAll("circle")
+    .data(nodes)
+    .join("circle")
+    .attr("class", "node")
+    .attr("r", 10)
+    .call(drag(simulation));
+
+// Add labels to the nodes
+const labels = svg.append("g")
+    .selectAll("text")
+    .data(nodes)
+    .join("text")
+    .attr("text-anchor", "middle")
+    .attr("dy", 4)
+    .text(d => d.id);
+
+// Update positions on each tick
+simulation.on("tick", () => {
+link
+    .attr("x1", d => d.source.x)
+    .attr("y1", d => d.source.y)
+    .attr("x2", d => d.target.x)
+    .attr("y2", d => d.target.y);
+
+node
+    .attr("cx", d => d.x)
+    .attr("cy", d => d.y);
+
+labels
+    .attr("x", d => d.x)
+    .attr("y", d => d.y);
+});
+
+// Drag behavior
+function drag(simulation) {
+return d3.drag()
+    .on("start", event => {
+    if (!event.active) simulation.alphaTarget(0.3).restart();
+    event.subject.fx = event.subject.x;
+    event.subject.fy = event.subject.y;
+    })
+    .on("drag", event => {
+    event.subject.fx = event.x;
+    event.subject.fy = event.y;
+    })
+    .on("end", event => {
+    if (!event.active) simulation.alphaTarget(0);
+    event.subject.fx = null;
+    event.subject.fy = null;
+    });
+}
diff --git a/app/js/login.js b/app/js/login.js
@@ -3,6 +3,11 @@
 /* @author K10s Open Source Team  */
 /**********************************/
 
+// Load external content
+document.addEventListener('DOMContentLoaded', function() {
+    loadExternalContent("context-menu", "/app/includes/context-menu.html");
+});
+
 // Background animations for login page.
 document.querySelectorAll('g').forEach(function(cube, index) {
     var currentTranslateY = parseFloat(cube.getAttribute('transform').split('(')[1].split(')')[0].split(',')[1]) || 0;

diff --git a/app/pages/dashboard.html b/app/pages/dashboard.html
@@ -30,21 +30,41 @@
         <!--Header-->
         <!--Main-->
         <main>
-
+            <div class="dashboard-top-boxes">
+                <div class="dashboard-box">
+                    <div class="dashboard-box-header">
+                        <h2>Title</h2>
+                    </div>
+                </div>
+                <div class="dashboard-box dashboard-top-boxes-marginleft">
+                    <div class="dashboard-box-header">
+                        <h2>Title</h2>
+                    </div>
+                </div>
+                <div class="dashboard-box dashboard-top-boxes-marginleft">
+                    <div class="dashboard-box-header">
+                        <h2>Title</h2>
+                    </div>
+                </div>
+                <div class="dashboard-box dashboard-top-boxes-marginleft">
+                    <div class="dashboard-box-header">
+                        <h2>Title</h2>
+                    </div>
+                </div>
+            </div>
+            <div class="dashboard-box-tree">
+                <div id="dashboard-chart"></div>
+            </div>
         </main>
         <!--Main-->
         <!--Context Menu-->
         <div class="context-menu" id="context-menu"></div>
         <!--Context Menu-->
         <!--JS-->
         <script src='https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js'></script>
+        <script src="https://d3js.org/d3.v7.min.js"></script>
         <script src="/app/js/main.js"></script>
-        <script>
-            document.addEventListener('DOMContentLoaded', function() {
-                loadExternalContent("navigation-bar", "/app/includes/navigation-bar.html");
-                loadExternalContent("context-menu", "/app/includes/context-menu.html");
-            });
-        </script>
+        <script src="/app/js/dashboard.js"></script>
         <!--JS-->
     </body>
 </html>
diff --git a/app/pages/login.html b/app/pages/login.html
@@ -133,13 +133,8 @@
         <!--Context Menu-->
         <!--JS-->
         <script src='https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js'></script>
-        <script src="/app/js/login.js"></script>
         <script src="/app/js/main.js"></script>
-        <script>
-            document.addEventListener('DOMContentLoaded', function() {
-                loadExternalContent("context-menu", "/app/includes/context-menu.html");
-            });
-        </script>
+        <script src="/app/js/login.js"></script>
         <!--JS-->
     </body>
 </html>