fixed grafana dashboards for docker

Author: eishakaushal

app/charts/GrafanaEventChart.tsx

@@ -12,7 +12,7 @@ interface EventChartProps {
 //     width: number;
 // }
 
-type TimeFrame = '5m' | '15m' | '1h' | '2h' | '1d' | '2d' | '3d';
+type TimeFrame = '5m' | '15m' | '30m' | '1h' | '2h' | '1d' | '2d';
 
 
 
@@ -84,11 +84,12 @@ const GrafanaEventChart: React.FC<EventChartProps> = React.memo(props => {
                 <select name="graphType" id="graphType" onChange={(e) => setTimeFrame(e.target.value as TimeFrame)}>
                     <option value={'5m'}>5 minutes</option>
                     <option value={'15m'}>15 minutes</option>
+                    <option value={'30m'}>30 minutes</option>
                     <option value={'1h'}>1 hour</option>
                     <option value={'2h'}>2 hours</option>
                     <option value={'1d'}>1 day</option>
                     <option value={'2d'}>2 days</option>
-                    <option value={'3d'}>3 days</option>
+
                 </select>
             </div>
             {/* create chart using grafana iframe tag*/}

app/containers/EventContainer.tsx

@@ -161,7 +161,8 @@ const EventContainer: React.FC<EventContainerProps> = React.memo(props => {
 
     <div>
       {/* <div id="grafana" onClick={() => { setIsGrafana(!isGrafana) }}>Grafana</div> */}
-      {service.includes('kafkametrics') || service.includes('kubernetesmetrics') || service.includes('books') || service.includes('customers') || service.includes('frontend') || service.includes('orders')? currChunk : []}
+      <button>Inspect</button>
+      {service.includes('kafkametrics') || service.includes('kubernetesmetrics') ? currChunk : []}
       {eventChartsArr.length > chunkSize && (
         <>
           <Button id="prevCharts" onClick={prevChunk} variant="contained" color="primary" disabled={currIndex <= chunkSize}>

app/containers/GraphsContainer.tsx

@@ -23,6 +23,8 @@ import lightAndDark from '../components/Styling';
 import DockerHealthContainer from './DockerHealthContainer';
 
 import '../stylesheets/GraphsContainer.scss';
+import { Link } from 'react-router-dom';
+import Inspect from './Inspect';
 
 interface Params {
   app: any;
@@ -45,6 +47,7 @@ const GraphsContainer: React.FC = React.memo(props => {
   const [chart, setChart] = useState<string>('all');
   const [prevRoute, setPrevRoute] = useState<string>('');
   const { mode } = useContext(DashboardContext.DashboardContext);
+  let [inspect, setInspect] = useState<boolean>(false);
 
   useEffect(() => {
     const serviceArray = service.split(' ');
@@ -202,8 +205,21 @@ const GraphsContainer: React.FC = React.memo(props => {
         >
           Modify Metrics
         </button>
+        {/* <Link className="sidebar-link" to="/Inspect" id="Inspect" >
+          <SettingsIcon
+              style={{
+                WebkitBoxSizing: 'content-box',
+                boxShadow: 'none',
+                width: '35px',
+                height: '35px',
+              }}
+            />
+          &emsp;Inspect
+        </Link> */}
+        <button onClick={() => { setInspect(!inspect) }}>Inspect</button>
       </nav>
       <Header app={app} service={service} live={live} setLive={setLive} />
+      {inspect && <Inspect />}
       <div className="graphs-container">
         {chart === 'communications' ? (
           <div className="graphs">

app/containers/Inspect.jsx

@@ -0,0 +1,130 @@
+import React, { useEffect } from 'react';
+import * as d3 from 'd3'; // Import D3 libraries here
+import ForceGraph3D from '3d-force-graph'; // Import 3d-force-graph library here
+import dat from 'dat.gui'; // Import dat.gui library here
+import '../stylesheets/Inspect.scss';
+import { CSS2DRenderer, CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer.js';
+
+
+
+// currently, Insepect only works statically, but it should be possible to make it dynamic. To do so, we need to make get kubernetes resources information from the backend, and then pass it to the graph.
+// It will be great if future iteration group can make it dynamic.
+
+const Inspect = () => {
+    useEffect(() => {
+        // controls
+        const controls = { 'DAG Orientation': 'td' };
+        const gui = new dat.GUI();
+        gui.add(controls, 'DAG Orientation', ['td', 'bu', 'lr', 'rl', 'zout', 'zin', 'radialout', 'radialin', null])
+            .onChange(orientation => graph && graph.dagMode(orientation));
+
+        // graph config
+        const NODE_REL_SIZE = 7;
+        const graph = ForceGraph3D({
+            extraRenderers: [new CSS2DRenderer()]
+        })
+            .width(1000)
+            .height(500)
+            .dagMode('td')
+            .dagLevelDistance(100)
+            .backgroundColor('#101020')
+            .linkColor(() => 'rgba(255,255,255,0.2)')
+            .nodeRelSize(NODE_REL_SIZE)
+            .nodeId('path')
+            .nodeVal('size')
+            .nodeLabel('path')
+            .nodeAutoColorBy('module')
+            .nodeOpacity(0.9)
+            .nodeLabel('path')
+            .linkDirectionalParticles(2)
+            .linkDirectionalParticleWidth(1)
+            .linkDirectionalParticleSpeed(0.006)
+            .linkWidth(5)
+            .d3Force('collision', d3.forceCollide(node => Math.cbrt(node.size) * NODE_REL_SIZE))
+            .d3VelocityDecay(0.3);
+
+        // Decrease repel intensity
+        graph.d3Force('charge').strength(-500);
+
+
+
+        fetch('http://localhost:1111/api/kuberData')
+            .then(r => r.text())
+            .then(d3.csvParse)
+            .then(data => {
+                console.log(data)
+                const nodes = [], links = [];
+                data.forEach(({ size, path }) => {
+                    const levels = path.split('/'),
+                        level = levels.length - 1,
+                        module = level > 0 ? levels[1] : null,
+                        leaf = levels.pop(),
+                        parent = levels.join('/');
+
+                    const node = {
+                        path,
+                        leaf,
+                        module,
+                        size: +size || 20,
+                        level
+                    };
+
+                    nodes.push(node);
+
+                    if (parent) {
+                        links.push({ source: parent, target: path, targetNode: node });
+                    }
+                });
+
+
+                graph(document.getElementById('graph'))
+                    .graphData({ nodes, links })
+                    .onNodeDragEnd(node => {
+                        node.fx = node.x;
+                        node.fy = node.y;
+                        node.fz = node.z;
+                    })
+                    .onNodeClick(node => {
+                        // Aim at node from outside it
+                        const distance = 40;
+                        const distRatio = 1 + distance / Math.hypot(node.x, node.y, node.z);
+
+                        const newPos = node.x || node.y || node.z
+                            ? { x: node.x * distRatio, y: node.y * distRatio, z: node.z * distRatio }
+                            : { x: 0, y: 0, z: distance }; // special case if node is in (0,0,0)
+
+                        graph.cameraPosition(
+                            newPos, // new position
+                            node, // lookAt ({ x, y, z })
+                            3000  // ms transition duration
+                        );
+
+                        // Show label
+                        const nodeEl = document.createElement('div');
+                        nodeEl.innerHTML = node.path;
+                        nodeEl.style.color = node.color;
+                        nodeEl.className = 'node-label';
+                        return new CSS2DObject(nodeEl);
+                    })
+                    .nodeThreeObject((node) => {
+                        const nodeEl = document.createElement('div');
+                        nodeEl.textContent = node.path.split('/').pop().replace(/:.*/, '');
+                        nodeEl.style.color = node.color;
+                        nodeEl.className = 'node-label';
+                        return new CSS2DObject(nodeEl);
+                    })
+                    .nodeThreeObjectExtend(true);
+
+
+            });
+    }, []);
+
+
+    return <div id="Infrastructure">
+        <h2>Infrastructure</h2>
+        <div id="graph" />;
+    </div>
+    // <div id="graph" />;
+};
+
+export default Inspect;

app/containers/Resource.html

@@ -0,0 +1,19 @@
+h2 {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+#graph {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.node-label {
+    font-size: 12px;
+    padding: 1px 4px;
+    border-radius: 4px;
+    background-color: rgba(0, 0, 0, 0.5);
+    user-select: none;
+}

app/stylesheets/Inspect.scss

@@ -0,0 +1,13 @@
+size,path
+,default
+,default/service-backend
+,default/service-backend/pod
+,default/service-frontend
+,default/service-frontend/pod1
+,default/service-frontend/pod2
+,default/service-grafana
+,default/service-grafana/pod
+,default/service-kubernetes
+,default/service-kubernetes/pod
+,default/service-prometheus
+,default/service-prometheus/pod

chronos_npm_package/server/data.csv

@@ -0,0 +1,35 @@
+const { Parser } = require('@json2csv/plainjs');
+const fs = require('fs');
+const { convertArrayToCSV } = require('convert-array-to-csv');
+const converter = require('convert-array-to-csv');
+
+const fileControllers = {};
+
+fileControllers.saveCSV = (req, res, next) => {
+    console.log('saveCSV endpoint hit');
+    const data = res.locals.data;
+
+    try {
+        // const parser = new Parser();
+        // const csv = parser.parse(data);
+        const csv = convertArrayToCSV(data);
+        console.log(csv);
+
+        fs.writeFile('./output.csv', csv, (err) => {
+            if (err) {
+                console.log('error: ', err);
+                return res.status(500).send('Error');
+            }
+            console.log('data saved');
+            next();
+
+        })
+    } catch (err) {
+        console.log('error: ', err);
+        return next(err);
+    };
+}
+
+
+
+module.exports = fileControllers;