Merge pull request oslabs-beta#84 from oslabs-beta/adam/codeCleaning

Adam/code cleaning

kr8sserver/server.js

@@ -1,5 +1,4 @@
 const express = require('express');
-const path = require('path');
 const k8sController = require('./controllers/k8sController.js')
 
 
@@ -11,7 +10,10 @@ app.use(express.json());
 app.use(express.urlencoded({ extended: true }));
 
 
-//Routes handling requests for k8s cluster info
+/*
+  Routes handling requests for k8s cluster info from Prometheus
+  Middleware will retrieve requested information from Prometheus
+*/
 
 app.get('/api/namespaceList', 
 k8sController.getPodList,

main.js

@@ -1,6 +1,5 @@
 'use strict'
 
-// Import parts of electron to use
 const { app, BrowserWindow } = require('electron')
 const path = require('path')
 const url = require('url')
@@ -12,10 +11,12 @@ let mainWindow;
 
 // Keep a reference for dev mode
 let dev = false
+
+
 const kubeCommand = 'kubectl create namespace monitoring';
 const kubeCommand2 = 'kubectl apply -f manifests'
 
-// Run node command
+// Run node command to create monitoring namespace for metric scraping
 exec(kubeCommand, (error, stdout, stderr) => {
   if (error) {
     console.error(`error: ${error.message}`);
@@ -30,7 +31,7 @@ exec(kubeCommand, (error, stdout, stderr) => {
   console.log(`stdout:\n${stdout}`);
 });
 
-// Run node command
+// Run node command to apply all yaml files in manifests
 exec(kubeCommand2, (error, stdout, stderr) => {
   if (error) {
     console.error(`error: ${error.message}`);

src/APIcalls.js

@@ -3,11 +3,11 @@ const path = require("path");
 const fs = require("fs");
 const process = require("process");
 
-const grafanaDashboard = fs.readFileSync(
-  path.join(process.cwd(), "/grafana-kr8s-dashboard.json")
-);
 const apiCalls = {};
 
+/*
+  Retrieve data from Prometheus instance for running pods
+*/
 apiCalls.fetchPods = async () => {
   try {
     let response = await fetch("http://localhost:31000/api/podList");
@@ -18,6 +18,9 @@ apiCalls.fetchPods = async () => {
   }
 };
 
+/*
+  Retrieve data from Prometheus instance for running nodes
+*/
 apiCalls.fetchNodes = async () => {
   try {
     let response = await fetch("http://localhost:31000/api/nodeList");
@@ -28,6 +31,12 @@ apiCalls.fetchNodes = async () => {
   }
 };
 
+/*
+Generate a valid API key for the user
+
+The API Key will be required to make subsequent
+requests to grafana for the user
+*/
 apiCalls.createAPIkey = async () => {
   try {
     let respObj;
@@ -44,16 +53,27 @@ apiCalls.createAPIkey = async () => {
         secondsToLive: 86400,
       }),
     })
-      .then((res) => res.json())
-      .then((data) => {
-        respObj = data;
-      });
+    .then((res) => res.json())
+    .then((data) => {
+      respObj = data;
+    });
     return respObj.key;
   } catch {
     console.log("Error occured creating API key");
   }
 };
 
+/*
+This imports the Kr8s custom dashboard into the user's Grafana
+
+The dashboard needs to be imported to grafana for the iframes
+to be available to the user
+
+A valid APIKey is required Grafana to accept the request
+*/
+const grafanaDashboard = fs.readFileSync(
+  path.join(process.cwd(), "/grafana-kr8s-dashboard.json")
+);
 apiCalls.grafanaDashboardPostRequest = async (APIKey) => {
   try {
     let response = await fetch("http://localhost:32000/api/dashboards/db", {

src/components/Banner.jsx

@@ -1,8 +1,14 @@
 import React from 'react';
 import style from '../assets/css/Banner.module.css';
 
+/*
+  Banner will receive items to display in props as an array of objects
+  Expected format: [{header: 'string', value: integer}]
+
+  Banner will display dynamically based on the number of items received
+*/
 export default function Banner(props) {
-  // Map over props.items
+
   const items = props.items.map(item => {
     return (
       <div className={style.items} key={item.header}>

src/components/ClusterConnect.jsx

@@ -1,21 +1,31 @@
 import React from "react";
 import { Link } from "react-router-dom";
 import apiCalls from "../APIcalls.js";
-
 import styles from "../assets/css/ClusterConnect.module.css";
 import logo from "../assets/css/imgs/kr8s-connect.svg";
 
+// 
+
 export default function ClusterConnect(props) {
+
+  /*
+    Build links to user clusters
+
+    Each link will create a Grafana api key for the user
+    and import the Kr8s Grafana dashboard before then 
+    calling getClusterInfo, which will redirect the user to
+    their cluster dashboard and begin scraping data from Prometheus
+  */
   let clusters = props.clusters.map((cluster) => {
     return (
       <Link
         className={styles.clusterLink}
         key={cluster}
         to="/dash"
         onClick={async () => {
-          props.getClusterInfo();
           const APIkey = await apiCalls.createAPIkey();
           await apiCalls.grafanaDashboardPostRequest(APIkey);
+          props.getClusterInfo();
         }}
       >
         <p className={styles.clusterContainer}>{cluster}</p>

src/components/Header.jsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import style from '../assets/css/Header.module.css';
 
+// Header component is not currently used by Kr8s
+
 export default function Header(props) {
 
   return (

src/components/LineGraph.jsx

@@ -1,7 +1,8 @@
 import React from "react";
-
 import style from "../assets/css/LineGraph.module.css";
 
+// LineGraph component is not currently used by Kr8s
+
 export default function LineGraph(props) {
   return (
     <div className={style.lineGraphContainer}>

src/components/NodeView.jsx

@@ -1,9 +1,8 @@
 import React from "react";
-
-import LineGraph from "../components/LineGraph.jsx";
-
 import styles from "../assets/css/NodeView.module.css";
 
+// NodeView is currently disabled by Kr8s
+
 export default function NodeView(props) {
   const { node, memoryPressure, diskPressure, pidPressure, ready } =
     props.location.state.info;

src/components/Speedometer.jsx

@@ -1,7 +1,8 @@
 import React from "react";
-
 import style from "../assets/css/Speedometer.module.css";
 
+// Speedometer component is not currently used by Kr8s
+
 export default function Speedometer(props) {
   return (
     <div className={style.speedometerContainer}>

src/components/Tile.jsx

@@ -1,8 +1,11 @@
 import React from 'react';
 import style from '../assets/css/Tile.module.css';
 
+// Tile Component is not currently used by Kr8s
+
 export default function Tile(props) {
 
+
   return (
     <div className={style.tileContainer}>
       <h3 className={style.tileHeader}> {props.tileHeader} </h3>

src/containers/App.jsx

@@ -19,30 +19,37 @@ export default function App() {
   const [pods, setPods] = useState([]);
   const [nodes, setNodes] = useState([]);
   const [numContainers, setNumContainers] = useState(0);
-
-  // Accepts a path variable to connect to the given cluster
-  function getClusterInfo(path) {
+  const [scrapeInterval, setScrapeInterval] = useState(15000);
+
+  /*
+    Function passed to ClusterConnect
+    Invoked when user selects Cluster for connection
+    Begins scraping from Prometheus
+  */
+  function getClusterInfo() {
     // Set connected to true to display the sidebar
     useConnected(true);
-    // TODO: Retrieve information necessary for the selected cluster
+
     useClusterName("Local Cluster");
+
+    // Begin interval to scrape data from Prometheus
+    // Interval for scraping is determined by scrapeInterval Hook
     setInterval(() => {
       apiCalls.fetchNodes().then((data) => {
         setNodes(data.items);
-        console.log("Node data: ", data);
       });
 
       apiCalls.fetchPods().then((data) => {
         setPods(data.items);
-
+        
         // Retrieve number of containers by iterating over pods
         let containerCount = 0;
         for(const pod of data.items) {
           containerCount += pod.spec.containers.length;
         }
         setNumContainers(containerCount);
       });
-    }, 15000);
+    }, scrapeInterval);
   }
 
   return (

src/containers/Dashboard.jsx

@@ -1,7 +1,5 @@
 import React from "react";
-
 import Banner from "../components/Banner.jsx";
-
 import style from "../assets/css/Dashboard.module.css";
 
 export default function Dashboard(props) {

src/containers/Nodes.jsx

@@ -8,6 +8,15 @@ import style from "../assets/css/Nodes.module.css";
 export default function Nodes(props) {
   const [myNode, setMyNode] = useState({});
 
+  /*
+    ****    Currently rerouting to NodeView is disabled     ****
+    **** To enable update reroute prop value passed to List component to '/NodeView' ****
+    This function is passed down to the list component
+
+    It is invoked onClick and is used to set the specific pod to display for a user
+    when they are rerouted to the NodeView component, which displays information on
+    a single Pod    
+  */
   function setCurrentNode(nodeName) {
     for (let i = 0; i < nodesValues.length; i++) {
       if (nodesValues[i].node === nodeName) {
@@ -17,6 +26,10 @@ export default function Nodes(props) {
     }
   }
 
+  /*
+    Parse through passed in Nodes data from props
+    This will organize the information to be displayed in the components below
+  */
   const nodesValues = [],
     nodesHeaders = [
       { id: "node", label: "Node", minWidth: 100, align: "center" },

src/containers/Pods.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 
 import Banner from "../components/Banner.jsx";
 import List from "../components/List.jsx";
@@ -8,6 +8,13 @@ import styles from "../assets/css/Pods.module.css";
 export default function Pods(props) {
   const [myPod, setMyPod] = useState({});
 
+  /*
+    This function is passed down to the list component
+
+    It is invoked onClick and is used to set the specific pod to display for a user
+    when they are rerouted to the PodView component, which displays information on
+    a single Pod    
+  */
   function setCurrentPod(podName) {
     for (let i = 0; i < podsValues.length; i++) {
       if (podsValues[i].pod === podName) {
@@ -17,6 +24,12 @@ export default function Pods(props) {
     }
   }
 
+
+
+  /*
+    Parse through passed in Pods data from props
+    This will organize the information to be displayed in the components below
+  */
   let runningPods = 0,
     pendingPods = 0,
     failedPods = 0,
@@ -68,6 +81,9 @@ export default function Pods(props) {
     podsValues.push(podValues);
   });
 
+
+
+
   return (
     <div>
       <div className={styles.podsContainer}>

src/index.html

@@ -14,7 +14,5 @@
 
   <div id="root"></div>
 
-  <!-- Scripts and other files from electron here... -->
-  <!-- <script src="./renderer.js"></script> -->
 </body>
 </html>

src/setupTests.js

@@ -1,5 +1,4 @@
 import { configure } from "enzyme";
-// import Adapter from 'enzyme-adapter-react-16';
 import Adapter from "@wojtekmaj/enzyme-adapter-react-17";
 
 configure({ adapter: new Adapter() });