79 |
81 | Odin's Eye
80 |
83 |
87 |
84 | {charts}
85 |
86 |
47 |
50 | {open ?
52 | );
53 | };
54 |
55 | //helper function to close dropdown if click is outside of the dropdown
56 | const useOutsideClick = (cb: Function) => {
57 | const ref = useRef- {nameSpaceArr}
![\"odin-eye-logo\"](\"http://localhost:7070/c5725aceae4c9e83888013d26e8c08fe.png\")
`
30 | );
31 | }),
32 | describe('Kubernetes page', () => {
33 | beforeAll(async () => {
34 | await page.click('#kubernetes');
35 | });
36 |
37 | it('expect onclick of kubernetes link on navbar to render the kubernetes dashboard', async () => {
38 | const kubernetesContainer = await page.$eval(
39 | '#kube-list-data',
40 | (el) => el.childElementCount
41 | );
42 | expect(kubernetesContainer).toBe(3);
43 | }),
44 | it('expect the dropdown div to contain a dropdown button element', async () => {
45 | const dropdownDiv = await page.evaluate(() => {
46 | return Array.from(document.querySelector('#dropdown').children)
47 | .length;
48 | });
49 | expect(dropdownDiv).toBe(1);
50 | }),
51 | it('expects kubernetes page to contain pods name div', async () => {
52 | await page.waitForSelector('#pod-name-header');
53 | const podName = await page.$eval(
54 | '#pod-name-header',
55 | (el) => el.innerText
56 | );
57 | expect(podName).toBe('Pod Names:');
58 | });
59 | });
60 | });
61 |
--------------------------------------------------------------------------------
/types.ts:
--------------------------------------------------------------------------------
1 | //request handle is a function that will be executed every time the server receives a particular request
2 | import { RequestHandler } from 'express';
3 | import { Request, Response, NextFunction } from 'express';
4 |
5 | export type req = Request;
6 | export type res = Response;
7 | export type next = NextFunction;
8 |
9 | //start time to be set 24 hour from now
10 | export const start = new Date(Date.now() - 86_400_000).toISOString();
11 | export const end = new Date(Date.now()).toISOString();
12 |
13 | //type aliases
14 | export type DashboardController = {
15 | getAllMetrics: RequestHandler;
16 | cpuUsageOverTotalCpu: RequestHandler;
17 | };
18 |
19 | export type KubernetesController = {
20 | namespaceNames: RequestHandler;
21 | podNames: RequestHandler;
22 | getNameSpaceMetrics: RequestHandler;
23 | getPodMetrics: RequestHandler;
24 | podsNotReadyNames?: RequestHandler;
25 | };
26 |
27 | export type MongoController = {
28 | mongoMetrics: RequestHandler;
29 | };
30 |
31 | export type DataController = {
32 | dataObjectBuilder: any;
33 | };
34 |
35 | export type graphDataObject = {
36 | [key: string] : {[key: string] : string}
37 | };
38 |
39 | export type State = {
40 | dark: boolean;
41 | namespaces: string[] | null;
42 | data: null | [];
43 | currentPage: string;
44 | currentNamespace: string;
45 | };
46 |
47 | export type ErrorType = {
48 | log: string;
49 | status: number;
50 | message: { err: string };
51 | };
52 |
53 | export type Data = [number, string];
54 |
55 | export type AllDataType = {
56 | data?: number[] | number | undefined;
57 | };
58 |
59 | export type MainDataType = {
60 | totalCpu: Data[];
61 | totalMem: Data[];
62 | totalTransmit: Data[];
63 | totalReceive: Data[];
64 | totalPods: number;
65 | notReadyPods: number;
66 | totalNamespaces: number;
67 | };
68 |
69 | export type MongoDataType = {
70 | opcounter: Data[];
71 | connections: Data[];
72 | queues: Data[];
73 | latency: Data[];
74 | uptime: Data[];
75 | memory: Data[];
76 | processes: Data[];
77 | };
78 |
79 | export type KubDataType = {
80 | cpu: Data[];
81 | memory: Data[];
82 | notReady: number;
83 | ready: Data[];
84 | reception: Data[];
85 | restarts: Data[];
86 | transmission: Data[];
87 | };
88 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 | 3 |
4 |
5 | 
6 |
7 |
8 |
11 | Monitoring Tool for Kubernetes and Containerized MongoDB 12 |
13 |
14 |
15 |
16 | ## Prerequisites
17 |
18 | 1) A Kuberenetes cluster set up with ports open
19 |
20 | 2) A Prometheus deployment - with ports properly forwarded: https://github.com/prometheus-community/helm-charts/tree/main/charts/kube-prometheus-stack
21 |
6 |
7 |
8 | Odin's Eye
9 | 10 |11 | Monitoring Tool for Kubernetes and Containerized MongoDB 12 |
a) ```helm install prometheus prometheus-community/kube-prometheus-stack``` 22 |
b) ```kubectl port-forward service/prometheus-kube-prometheus-prometheus 9090``` 23 | 24 | 3) MongoDB metrics exported to prometheus: 25 |
a) ```helm install exporter prometheus-community/prometheus-mongodb-exporter``` 26 | 27 | Refer to the help directory for a step-by-step walkthrough 28 | 29 | 30 | ## Installation 31 | 32 | 1. Clone this repository onto your local machine 33 | 34 | ```sh 35 | git clone https://github.com/oslabs-beta/OdinsEye.git 36 | ``` 37 | 38 | 2. Install dependencies 39 | 40 | ```sh 41 | npm install 42 | ``` 43 | 44 | 3. Start the application server 45 | 46 | ```sh 47 | npm run start 48 | ``` 49 | 50 | 4. Navigate to http://localhost:3000 51 | 52 | ## Technologies 53 | 54 | - [React](https://reactjs.org/) 55 | - [Redux](https://redux.js.org/) 56 | - [TypeScript](https://www.typescriptlang.org/) 57 | - [Chart.js](https://www.chartjs.org/) 58 | - [Kubernetes](https://kubernetes.io/) 59 | - [Docker](https://www.docker.com/) 60 | - [Node](https://nodejs.org/en/) 61 | - [Prometheus/PromQL](https://prometheus.io/) 62 | 63 | ## Authors 64 | - Peter Choi [@prismatism](https://github.com/prismatism) | [Linkedin](https://www.linkedin.com/in/peterchoi3000/) 65 | - Emily Chu [@emmychu](https://github.com/emmychu) | [Linkedin](https://www.linkedin.com/in/lin-chu-pharmd/) 66 | - Chris Hicks [@chrishicks430](https://github.com/chrishicks430) | [Linkedin](https://www.linkedin.com/in/chrishicks430/) 67 | - Wendy Zheng [@wzhengg99](https://github.com/wzhengg99) | [Linkedin](https://www.linkedin.com/in/wzheng208/) 68 | 69 | 70 | 71 | Show your support
72 | Give a ⭐️ if this project helped you! 73 | 74 | -------------------------------------------------------------------------------- /client/components/Navbar.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Link } from 'react-router-dom'; 3 | import { useDispatch, useSelector } from 'react-redux'; 4 | import { darkMode } from '../rootReducer'; 5 | import { State } from '../../types'; 6 | 7 | const NavBar = () => { 8 | //Dispatch action for toggling light/dark mode in global state 9 | const dispatch = useDispatch(); 10 | const dark = useSelector((state: State) => state.dark); 11 | 12 | let classInfo: string; 13 | 14 | dark ? (classInfo = 'open') : (classInfo = 'closed'); 15 | 16 | //helper function to toggle class name for theme on the root component 17 | function toggleTheme() { 18 | const main = document.getElementById('root'); 19 | //main component changes 20 | if (main) { 21 | dark ? (main.className = 'theme-dark') : (main.className = 'theme-light'); 22 | } 23 | //Used to grab the body and alter the theme for the body html element 24 | const body = Array.from(document.getElementsByTagName('body'))[0]; 25 | if (body) { 26 | dark 27 | ? body.setAttribute('data-theme', 'dark') 28 | : body.setAttribute('data-theme', 'light'); 29 | } 30 | } 31 | 32 | return ( 33 | 72 | ); 73 | }; 74 | 75 | export default NavBar; 76 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "odinseye", 3 | "version": "1.0.0", 4 | "description": "application to monitor kubernetes statefulset pods", 5 | "main": "webpack.config.js", 6 | "scripts": { 7 | "start": "NODE_ENV=production nodemon server/server.js", 8 | "build": "NODE_ENV=production webpack", 9 | "dev": "NODE_ENV=development webpack serve --open & tsc server/server.ts & nodemon server/server.js", 10 | "test": "NODE_ENV=test jest --watch" 11 | }, 12 | "author": "Chris, Emily, Peter, Wendy", 13 | "license": "ISC", 14 | "dependencies": { 15 | "@testing-library/react": "^13.4.0", 16 | "@testing-library/user-event": "^14.4.3", 17 | "axios": "^0.27.2", 18 | "babel-core": "^6.26.3", 19 | "babel-preset-env": "^1.7.0", 20 | "chart.js": "^3.9.1", 21 | "chartjs-adapter-luxon": "^1.3.0", 22 | "chartjs-plugin-streaming": "^2.0.0", 23 | "cookie-parser": "^1.4.6", 24 | "cors": "^2.8.5", 25 | "node": "^19.0.1", 26 | "nodemon": "^2.0.20", 27 | "prom-client": "^14.1.0", 28 | "react": "^18.2.0", 29 | "react-chartjs-2": "^4.3.1", 30 | "react-dom": "^18.2.0", 31 | "react-redux": "^8.0.5", 32 | "react-router-dom": "^6.4.3", 33 | "react-spinners": "^0.13.6", 34 | "regenerator-runtime": "^0.13.11", 35 | "sass": "^1.56.1" 36 | }, 37 | "devDependencies": { 38 | "@babel/core": "^7.20.2", 39 | "@babel/preset-env": "^7.20.2", 40 | "@babel/preset-react": "^7.18.6", 41 | "@kubernetes/client-node": "^0.17.1", 42 | "@reduxjs/toolkit": "^1.9.0", 43 | "@types/cors": "^2.8.12", 44 | "@types/express": "^4.17.14", 45 | "@types/jest": "^29.2.3", 46 | "@types/node": "^18.11.9", 47 | "@types/react": "^18.0.25", 48 | "@types/react-dom": "^18.0.8", 49 | "@typescript-eslint/eslint-plugin": "^5.45.0", 50 | "@typescript-eslint/parser": "^5.45.0", 51 | "babel-jest": "^29.3.1", 52 | "babel-loader": "^9.1.0", 53 | "css-loader": "^6.7.1", 54 | "eslint": "^8.28.0", 55 | "file-loader": "^6.2.0", 56 | "html-webpack-plugin": "^5.5.0", 57 | "identity-obj-proxy": "^3.0.0", 58 | "jest": "^29.3.1", 59 | "jest-puppeteer": "^6.1.1", 60 | "react-test-renderer": "^18.2.0", 61 | "sass-loader": "^13.1.0", 62 | "style-loader": "^3.3.1", 63 | "supertest": "^6.3.1", 64 | "ts-jest": "^29.0.3", 65 | "ts-loader": "^9.4.1", 66 | "typescript": "^4.9.3", 67 | "url-loader": "^4.1.1", 68 | "webpack": "^5.75.0", 69 | "webpack-cli": "^4.10.0", 70 | "webpack-dev-server": "^4.11.1" 71 | } 72 | } 73 | -------------------------------------------------------------------------------- /client/containers/mongoMain.tsx: -------------------------------------------------------------------------------- 1 | import NavBar from '../components/Navbar'; 2 | import axios from 'axios'; 3 | import LineChart from '../components/LineChart'; 4 | import React, { useState, useEffect } from 'react'; 5 | import { currentPage } from '../rootReducer'; 6 | import { useDispatch } from 'react-redux'; 7 | import { MongoDataType } from '../../types'; 8 | 9 | const MongoPage = () => { 10 | const dispatch = useDispatch(); 11 | 12 | useEffect(() => { 13 | dispatch(currentPage('mongo')); 14 | }, []); 15 | 16 | const initialData = { 17 | opcounter: [], 18 | connections: [], 19 | queues: [], 20 | latency: [], 21 | uptime: [], 22 | memory: [], 23 | processes: [], 24 | }; 25 | 26 | const [data, setData] = useState
65 |
73 | );
74 | }
75 |
76 | return (
77 |
78 |
88 | );
89 | };
90 |
91 | export default MongoPage;
92 |
--------------------------------------------------------------------------------
/__test__/kubernetes.test.js:
--------------------------------------------------------------------------------
1 | // import kubernetesRouter from "../dist/server/routes/kubernetes"
2 | // import express from "express"
3 | // import request from 'supertest';
4 |
5 | const request = require("supertest");
6 | const app = require('../server/server');
7 |
8 |
9 | describe('testing for kubernete pod metrics', function () {
10 | describe('/api/kubernetesMetrics', function(){
11 | it('/totalRestarts', async () =>{
12 | const res = await (request(app).get('/api/kubernetesMetrics/totalRestarts'))
13 | expect(res.header['content-type']).toBe('application/json; charset=utf-8');
14 | expect(res.statusCode).toBe(200);
15 | expect(typeof res).toBe('object');
16 | }),
17 | it('/namespaceNames', async () =>{
18 | const res = await (request(app).get('/api/kubernetesMetrics/namespaceNames'))
19 | expect(res.header['content-type']).toBe('application/json; charset=utf-8');
20 | expect(res.statusCode).toBe(200);
21 | expect(typeof res).toBe('object');
22 | }),
23 | it('/podNames', async () =>{
24 | const res = await (request(app).get('/api/kubernetesMetrics/podNames'))
25 | expect(res.header['content-type']).toBe('application/json; charset=utf-8');
26 | expect(res.statusCode).toBe(200);
27 | expect(typeof res).toBe('object');
28 | }),
29 | it('/podsNotReady', async () =>{
30 | const res = await (request(app).get('/api/kubernetesMetrics/podsNotReady'))
31 | expect(res.header['content-type']).toBe('application/json; charset=utf-8');
32 | expect(res.statusCode).toBe(200);
33 | expect(typeof res).toBe('object');
34 | }),
35 | it('/namespaceMetrics/:namespaceName', async () =>{
36 | const res = await (request(app).get('/api/kubernetesMetrics/namespaceMetrics/prometheus'))
37 | expect(res.header['content-type']).toBe('application/json; charset=utf-8');
38 | expect(res.statusCode).toBe(200);
39 | expect(typeof res).toBe('object');
40 | }),
41 | it('//podMetrics/:podName', async () =>{
42 | const res = await (request(app).get('/api/kubernetesMetrics//podMetrics/mongodb-0'))
43 | expect(res.header['content-type']).toBe('application/json; charset=utf-8');
44 | expect(res.statusCode).toBe(200);
45 | expect(typeof res).toBe('object');
46 | }),
47 | it('/podsNotReadyNames', async () =>{
48 | const res = await (request(app).get('/api/kubernetesMetrics/podsNotReadyNames'))
49 | expect(res.header['content-type']).toBe('application/json; charset=utf-8');
50 | expect(res.statusCode).toBe(200);
51 | expect(typeof res).toBe('object');
52 | })
53 | })
54 | });
--------------------------------------------------------------------------------
/client/components/PopUp.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState } from 'react';
2 | import LineChart from './LineChart';
3 | import axios from 'axios';
4 | const styles = require('../styles/popup.scss');
5 | import { Data } from '../../types';
6 |
7 | type PopupType = {
8 | podName: string | undefined;
9 | trigger: boolean;
10 | setTrigger: (arg: boolean) => void;
11 | };
12 |
13 | type PopUpDataType = {
14 | cpu: Data[];
15 | memory: Data[];
16 | ready: Data[];
17 | reception: Data[];
18 | restarts: Data[];
19 | transmission: Data[];
20 | };
21 |
22 | const Popup = ({ podName, trigger, setTrigger }: PopupType) => {
23 | const initialData = {
24 | cpu: [],
25 | memory: [],
26 | ready: [],
27 | reception: [],
28 | restarts: [],
29 | transmission: [],
30 | };
31 |
32 | const [data, setData] = useState
80 |
88 | );
89 | }
90 | return trigger ? (
91 |
92 |
102 | ) : (
103 |
104 | );
105 | };
106 |
107 | export default Popup;
108 |
--------------------------------------------------------------------------------
/coverage/lcov-report/block-navigation.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable */
2 | var jumpToCode = (function init() {
3 | // Classes of code we would like to highlight in the file view
4 | var missingCoverageClasses = ['.cbranch-no', '.cstat-no', '.fstat-no'];
5 |
6 | // Elements to highlight in the file listing view
7 | var fileListingElements = ['td.pct.low'];
8 |
9 | // We don't want to select elements that are direct descendants of another match
10 | var notSelector = ':not(' + missingCoverageClasses.join('):not(') + ') > '; // becomes `:not(a):not(b) > `
11 |
12 | // Selecter that finds elements on the page to which we can jump
13 | var selector =
14 | fileListingElements.join(', ') +
15 | ', ' +
16 | notSelector +
17 | missingCoverageClasses.join(', ' + notSelector); // becomes `:not(a):not(b) > a, :not(a):not(b) > b`
18 |
19 | // The NodeList of matching elements
20 | var missingCoverageElements = document.querySelectorAll(selector);
21 |
22 | var currentIndex;
23 |
24 | function toggleClass(index) {
25 | missingCoverageElements
26 | .item(currentIndex)
27 | .classList.remove('highlighted');
28 | missingCoverageElements.item(index).classList.add('highlighted');
29 | }
30 |
31 | function makeCurrent(index) {
32 | toggleClass(index);
33 | currentIndex = index;
34 | missingCoverageElements.item(index).scrollIntoView({
35 | behavior: 'smooth',
36 | block: 'center',
37 | inline: 'center'
38 | });
39 | }
40 |
41 | function goToPrevious() {
42 | var nextIndex = 0;
43 | if (typeof currentIndex !== 'number' || currentIndex === 0) {
44 | nextIndex = missingCoverageElements.length - 1;
45 | } else if (missingCoverageElements.length > 1) {
46 | nextIndex = currentIndex - 1;
47 | }
48 |
49 | makeCurrent(nextIndex);
50 | }
51 |
52 | function goToNext() {
53 | var nextIndex = 0;
54 |
55 | if (
56 | typeof currentIndex === 'number' &&
57 | currentIndex < missingCoverageElements.length - 1
58 | ) {
59 | nextIndex = currentIndex + 1;
60 | }
61 |
62 | makeCurrent(nextIndex);
63 | }
64 |
65 | return function jump(event) {
66 | if (
67 | document.getElementById('fileSearch') === document.activeElement &&
68 | document.activeElement != null
69 | ) {
70 | // if we're currently focused on the search input, we don't want to navigate
71 | return;
72 | }
73 |
74 | switch (event.which) {
75 | case 78: // n
76 | case 74: // j
77 | goToNext();
78 | break;
79 | case 66: // b
80 | case 75: // k
81 | case 80: // p
82 | goToPrevious();
83 | break;
84 | }
85 | };
86 | })();
87 | window.addEventListener('keydown', jumpToCode);
88 |
--------------------------------------------------------------------------------
/client/components/DonutChart.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from 'react';
2 | import { Doughnut } from 'react-chartjs-2';
3 | import { useSelector } from 'react-redux';
4 | import { State } from '../../types';
5 |
6 | import {
7 | Chart as ChartJS,
8 | ArcElement,
9 | Tooltip,
10 | Legend,
11 | ChartOptions,
12 | ChartData,
13 | } from 'chart.js';
14 | import { totalmem } from 'os';
15 |
16 | ChartJS.register(ArcElement, Tooltip, Legend);
17 |
18 | type DonutType = {
19 | data: number[] | number;
20 | label: string;
21 | };
22 |
23 | //display total number active and non active pods
24 | const DonutChart = ({ data }: DonutType) => {
25 | const dark = useSelector((state: State) => state.dark);
26 | let fontColor;
27 | dark ? (fontColor = '#363946') : (fontColor = 'rgba(136, 217, 230, 0.8)');
28 |
29 | const [chartData, setChartData] = useState
93 |
101 | {podName}
94 | 97 |
98 |
100 | {charts}
99 |
90 |
92 | );
93 | } else {
94 | return (
95 | Not Connected to Prometheus API
91 |
96 |
103 |
105 | );
106 | }
107 | };
108 |
109 | export default DonutChart;
110 |
--------------------------------------------------------------------------------
/server/controllers/dashboardController.ts:
--------------------------------------------------------------------------------
1 | import {
2 | DashboardController,
3 | graphDataObject,
4 | start,
5 | end,
6 | res,
7 | req,
8 | next,
9 | } from '../../types';
10 | import DataObjectBuilder from './dataObjectBuilder';
11 | import axios from 'axios';
12 | const k8s = require('@kubernetes/client-node');
13 | //prometheus client for node.js
14 | const client = require('prom-client');
15 |
16 | const kc = new k8s.KubeConfig();
17 | kc.loadFromDefault();
18 | //CoreV1Api: it allows access to core k8 resources such as services
19 | const k8sApi = kc.makeApiClient(k8s.CoreV1Api);
20 | //AppsV1Api: it allows access to app/v1 resources such as deployments and k8s
21 | const k8sApi1 = kc.makeApiClient(k8s.AppsV1Api);
22 | //NetworkV1Api: (ingress) - Ingress is a collection of rules that allow inbound connections to reach the endpoints defined by a backend. An Ingress can be configured to give services externally-reachable urls, load balance traffic, terminate SSL, offer name based virtual hosting etc.
23 | //https://docs.okd.io/latest/rest_api/network_apis/ingress-networking-k8s-io-v1.html
24 | const k8sApi3 = kc.makeApiClient(k8s.NetworkingV1Api);
25 | //to collect default metrics directly from prometheus client
26 | //https://github.com/siimon/prom-client
27 | client.collectDefaultMetrics();
28 |
29 | const dashboardController: DashboardController = {
30 | getAllMetrics: async (req, res, next) => {
31 | const queryObject: graphDataObject = {
32 | linegraph: {
33 | totalCpu: 'sum(rate(container_cpu_usage_seconds_total[10m]))*100',
34 | totalMem: 'sum(container_memory_usage_bytes)',
35 | totalTransmit: 'sum(rate(node_network_transmit_bytes_total[10m]))',
36 | totalReceive: 'sum(rate(node_network_receive_bytes_total[10m]))',
37 | },
38 | donutint: {
39 | totalPods: 'count(kube_pod_info)',
40 | notReadyPods: 'sum(kube_pod_status_ready{condition="false"})',
41 | totalNamespaces: 'count(kube_namespace_created)',
42 | },
43 | };
44 | try {
45 | req.app.locals.queries = queryObject;
46 | return next();
47 | } catch (err) {
48 | return next({
49 | log: `Error in dashboardController.getAllMetrics: ${err}`,
50 | status: 500,
51 | message: 'Error occured while retrieving dashboard all metrics data',
52 | });
53 | }
54 | },
55 |
56 | cpuUsageOverTotalCpu: async (req, res, next) => {
57 | const queryObject: graphDataObject = {
58 | cpubarchart: {
59 | cpu: 'sum(rate(container_cpu_usage_seconds_total[5m]))',
60 | core: 'sum(machine_cpu_cores)',
61 | percent:
62 | 'sum(rate(container_cpu_usage_seconds_total[5m]))/sum(machine_cpu_cores)*100',
63 | },
64 | };
65 | try {
66 | req.app.locals.queries = queryObject;
67 | return next();
68 | } catch (err) {
69 | return next({
70 | log: `Error in dashboardController.getTotalCpu: ${err}`,
71 | status: 500,
72 | message: 'Error occured while retrieving dashboard transmit data',
73 | });
74 | }
75 | },
76 | };
77 |
78 | export default dashboardController;
79 |
--------------------------------------------------------------------------------
/client/styles/popup.scss:
--------------------------------------------------------------------------------
1 | $nav: #1d1b1d;
2 | $PersianGreen: rgb(51, 153, 137);
3 | $PacificBlue: rgb(80, 178, 192);
4 | $OperaMauve: rgb(172, 128, 160);
5 | $background: rgb(31, 28, 30);
6 | $fontColor: rgba(136, 217, 230, 0.8);
7 | $font: 'Playfair Display', serif;
8 | $theme-map: null;
9 |
10 | $themes: (
11 | dark: (
12 | 'bg': $background,
13 | 'font': $fontColor,
14 | 'header': $PacificBlue,
15 | 'box-shadow': rgba(51, 153, 137, 0.3) 0px 1px 2px 0px,
16 | 'box-shadow2': rgba(51, 153, 137, 0.15) 0px 2px 6px 2px,
17 | 'drop-hover': rgb(151, 150, 150),
18 | 'header-back': $background,
19 | 'chart-back': transparent,
20 | 'chart-font': rgba(54, 133, 181, 1),
21 | 'nav-back': $nav,
22 | 'pod-good': $PersianGreen,
23 | 'graph-font': $PacificBlue,
24 | ),
25 | light: (
26 | 'bg': #c9c5ba,
27 | 'font': #5d536b,
28 | 'header': #696773,
29 | 'box-shadow': #c9c5ba,
30 | 'box-shadow2': #c9c5ba,
31 | 'drop-hover': #ceede0,
32 | 'header-back': #97b1a6,
33 | 'chart-back': #e5e0d4,
34 | 'chart-font': #363946,
35 | 'nav-back': #97b1a6,
36 | 'nav-font': #272838,
37 | 'pod-good': #97b1a6,
38 | 'graph-font': rgb(46, 45, 45),
39 | ),
40 | );
41 |
42 | @mixin themify($themes: $themes) {
43 | @each $theme, $map in $themes {
44 | .theme-#{$theme} & {
45 | $theme-map: () !global;
46 | @each $key, $submap in $map {
47 | $value: map-get(map-get($themes, $theme), '#{$key}');
48 | $theme-map: map-merge(
49 | $theme-map,
50 | (
51 | $key: $value,
52 | )
53 | ) !global;
54 | }
55 |
56 | @content;
57 | $theme-map: null !global;
58 | }
59 | }
60 | }
61 |
62 | @function themed($key) {
63 | @return map-get($theme-map, $key);
64 | }
65 |
66 | #popup {
67 | position: fixed;
68 | background: rgba(6, 24, 38, 0.7);
69 | top: 0;
70 | left: 0;
71 | width: 100%;
72 | height: 100vh;
73 | display: flex;
74 | justify-content: center;
75 | align-items: center;
76 | z-index: 1;
77 |
78 | #popup-inner {
79 | position: relative;
80 | display: flex;
81 | flex-direction: column;
82 | padding: 50px;
83 | opacity: 100%;
84 | height: calc(100% - 10vh);
85 | width: 90%;
86 | overflow: scroll;
87 | align-content: center;
88 | z-index: 1;
89 | @include themify($themes) {
90 | background-color: themed('nav-back');
91 | }
92 |
93 | h2 {
94 | position: relative;
95 | @include themify($themes) {
96 | color: themed('font');
97 | }
98 | font-weight: bold;
99 | font-size: 50px;
100 | align-self: center;
101 | }
102 | .data-container {
103 | grid-area: main;
104 | display: flex;
105 | flex-direction: column;
106 | }
107 | .close-btn {
108 | position: fixed;
109 | padding: 5px;
110 | right: 4%;
111 | top: 50px;
112 | background: transparent;
113 | @include themify($themes) {
114 | color: themed('font');
115 | }
116 | font-size: 20px;
117 | border-style: none;
118 | transform: translateX(-90%);
119 | &:hover {
120 | font-size: 30px;
121 | cursor: pointer;
122 | }
123 | }
124 | }
125 | }
126 |
--------------------------------------------------------------------------------
/dist/bundle.js.LICENSE.txt:
--------------------------------------------------------------------------------
1 | /*!
2 | * @kurkle/color v0.2.1
3 | * https://github.com/kurkle/color#readme
4 | * (c) 2022 Jukka Kurkela
5 | * Released under the MIT License
6 | */
7 |
8 | /*!
9 | * Chart.js v3.9.1
10 | * https://www.chartjs.org
11 | * (c) 2022 Chart.js Contributors
12 | * Released under the MIT License
13 | */
14 |
15 | /*!
16 | * chartjs-plugin-streaming v2.0.0
17 | * https://nagix.github.io/chartjs-plugin-streaming
18 | * (c) 2017-2021 Akihiko Kusanagi
19 | * Released under the MIT license
20 | */
21 |
22 | /**
23 | * @license React
24 | * react-dom.production.min.js
25 | *
26 | * Copyright (c) Facebook, Inc. and its affiliates.
27 | *
28 | * This source code is licensed under the MIT license found in the
29 | * LICENSE file in the root directory of this source tree.
30 | */
31 |
32 | /**
33 | * @license React
34 | * react-is.production.min.js
35 | *
36 | * Copyright (c) Facebook, Inc. and its affiliates.
37 | *
38 | * This source code is licensed under the MIT license found in the
39 | * LICENSE file in the root directory of this source tree.
40 | */
41 |
42 | /**
43 | * @license React
44 | * react.production.min.js
45 | *
46 | * Copyright (c) Facebook, Inc. and its affiliates.
47 | *
48 | * This source code is licensed under the MIT license found in the
49 | * LICENSE file in the root directory of this source tree.
50 | */
51 |
52 | /**
53 | * @license React
54 | * scheduler.production.min.js
55 | *
56 | * Copyright (c) Facebook, Inc. and its affiliates.
57 | *
58 | * This source code is licensed under the MIT license found in the
59 | * LICENSE file in the root directory of this source tree.
60 | */
61 |
62 | /**
63 | * @license React
64 | * use-sync-external-store-shim.production.min.js
65 | *
66 | * Copyright (c) Facebook, Inc. and its affiliates.
67 | *
68 | * This source code is licensed under the MIT license found in the
69 | * LICENSE file in the root directory of this source tree.
70 | */
71 |
72 | /**
73 | * @license React
74 | * use-sync-external-store-shim/with-selector.production.min.js
75 | *
76 | * Copyright (c) Facebook, Inc. and its affiliates.
77 | *
78 | * This source code is licensed under the MIT license found in the
79 | * LICENSE file in the root directory of this source tree.
80 | */
81 |
82 | /**
83 | * @remix-run/router v1.0.3
84 | *
85 | * Copyright (c) Remix Software Inc.
86 | *
87 | * This source code is licensed under the MIT license found in the
88 | * LICENSE.md file in the root directory of this source tree.
89 | *
90 | * @license MIT
91 | */
92 |
93 | /**
94 | * React Router DOM v6.4.3
95 | *
96 | * Copyright (c) Remix Software Inc.
97 | *
98 | * This source code is licensed under the MIT license found in the
99 | * LICENSE.md file in the root directory of this source tree.
100 | *
101 | * @license MIT
102 | */
103 |
104 | /**
105 | * React Router v6.4.3
106 | *
107 | * Copyright (c) Remix Software Inc.
108 | *
109 | * This source code is licensed under the MIT license found in the
110 | * LICENSE.md file in the root directory of this source tree.
111 | *
112 | * @license MIT
113 | */
114 |
115 | /** @license React v16.13.1
116 | * react-is.production.min.js
117 | *
118 | * Copyright (c) Facebook, Inc. and its affiliates.
119 | *
120 | * This source code is licensed under the MIT license found in the
121 | * LICENSE file in the root directory of this source tree.
122 | */
123 |
--------------------------------------------------------------------------------
/client/components/BarChart.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from 'react';
2 | import {
3 | Chart as ChartJS,
4 | CategoryScale,
5 | LinearScale,
6 | BarElement,
7 | Title,
8 | Tooltip,
9 | Legend,
10 | ChartOptions,
11 | ChartData,
12 | } from 'chart.js';
13 | import { Bar } from 'react-chartjs-2';
14 |
15 | ChartJS.register(
16 | CategoryScale,
17 | LinearScale,
18 | BarElement,
19 | Title,
20 | Tooltip,
21 | Legend
22 | );
23 |
24 | type BarType = {
25 | title: string;
26 | url: string;
27 | labels: string[];
28 | };
29 |
30 | const BarChart = ({ title, url, labels }: BarType) => {
31 | const [loadErr, setLoadErr] = useState
124 |
126 | );
127 | } else {
128 | return (
129 | Not Connected to Prometheus API
125 |
130 |
132 | );
133 | }
134 | };
135 |
136 | export default BarChart;
137 |
--------------------------------------------------------------------------------
/coverage/lcov-report/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
21 |
86 |
91 |
92 |
97 |
98 |
99 |
100 |
101 |
--------------------------------------------------------------------------------
/client/components/LiveChart.tsx:
--------------------------------------------------------------------------------
1 | import React, { useRef, useEffect, useState } from 'react';
2 | import { Line } from 'react-chartjs-2';
3 | import { State } from '../../types';
4 | import { useSelector } from 'react-redux';
5 | import 'chartjs-adapter-luxon';
6 | import ChartStreaming from 'chartjs-plugin-streaming';
7 | import { Filler } from 'chart.js';
8 |
9 | import {
10 | Chart as ChartJS,
11 | CategoryScale,
12 | LinearScale,
13 | PointElement,
14 | LineElement,
15 | Title,
16 | Tooltip,
17 | Legend,
18 | ChartOptions,
19 | ChartData,
20 | } from 'chart.js';
21 |
22 | ChartJS.register(
23 | CategoryScale,
24 | LinearScale,
25 | PointElement,
26 | LineElement,
27 | Title,
28 | Tooltip,
29 | Legend,
30 | Filler,
31 | ChartStreaming
32 | );
33 |
34 | type LineChartDataType = {
35 | label: string;
36 | path: string;
37 | title: string;
38 | type: string;
39 | };
40 |
41 | const LiveChart = ({ label, path, title, type }: LineChartDataType) => {
42 | const liveChart = useRef
22 |
64 |
65 | All files
23 |
24 |
25 |
54 |
26 | Unknown%
27 | Statements
28 | 0/0
29 |
30 |
31 |
32 |
33 | Unknown%
34 | Branches
35 | 0/0
36 |
37 |
38 |
39 |
40 | Unknown%
41 | Functions
42 | 0/0
43 |
44 |
45 |
46 |
47 | Unknown%
48 | Lines
49 | 0/0
50 |
51 |
52 |
53 | 55 | Press n or j to go to the next uncovered block, b, p or k for the previous block. 56 |
57 | 58 |
59 | Filter:
60 |
61 |
62 |
63 |
66 |
67 |
68 |
83 |
84 |
85 | | File | 70 |71 | | Statements | 72 |73 | | Branches | 74 |75 | | Functions | 76 |77 | | Lines | 78 |79 | |
|---|
154 |
156 | );
157 | } else {
158 | return Not Connected to Prometheus API
155 |
156 |
158 | );
159 | } else {
160 | //conditionally render either a line chart if data is present or
161 | //a separate div if no data is being sent back
162 | return (
163 | Not Connected to Prometheus API
157 |
164 |
173 | );
174 | }
175 | };
176 |
177 | export default LineChart;
178 |
--------------------------------------------------------------------------------
/coverage/lcov-report/routes/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
167 |
169 | ) : (
170 | ''
171 | )}
172 | No Data to Display
168 |
21 |
101 |
106 |
107 |
112 |
113 |
114 |
115 |
116 |
--------------------------------------------------------------------------------
/coverage/lcov-report/controllers/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
22 |
64 |
65 | All files routes
23 |
24 |
25 |
54 |
26 | 70.58%
27 | Statements
28 | 12/17
29 |
30 |
31 |
32 |
33 | 71.42%
34 | Branches
35 | 5/7
36 |
37 |
38 |
39 |
40 | 16.66%
41 | Functions
42 | 1/6
43 |
44 |
45 |
46 |
47 | 70.58%
48 | Lines
49 | 12/17
50 |
51 |
52 |
53 | 55 | Press n or j to go to the next uncovered block, b, p or k for the previous block. 56 |
57 | 58 |
59 | Filter:
60 |
61 |
62 |
63 |
66 |
67 |
68 |
98 |
99 |
100 | | File | 70 |71 | | Statements | 72 |73 | | Branches | 74 |75 | | Functions | 76 |77 | | Lines | 78 |79 | |
|---|---|---|---|---|---|---|---|---|---|
| kubernetes.js | 83 |
84 |
85 | |
86 | 70.58% | 87 |12/17 | 88 |71.42% | 89 |5/7 | 90 |16.66% | 91 |1/6 | 92 |70.58% | 93 |12/17 | 94 |
21 |
101 |
106 |
107 |
112 |
113 |
114 |
115 |
116 |
--------------------------------------------------------------------------------
/CODE_OF_CONDUCT.md:
--------------------------------------------------------------------------------
1 | # Contributor Covenant Code of Conduct
2 |
3 | ## Our Pledge
4 |
5 | We as members, contributors, and leaders pledge to make participation in our
6 | community a harassment-free experience for everyone, regardless of age, body
7 | size, visible or invisible disability, ethnicity, sex characteristics, gender
8 | identity and expression, level of experience, education, socio-economic status,
9 | nationality, personal appearance, race, religion, or sexual identity
10 | and orientation.
11 |
12 | We pledge to act and interact in ways that contribute to an open, welcoming,
13 | diverse, inclusive, and healthy community.
14 |
15 | ## Our Standards
16 |
17 | Examples of behavior that contributes to a positive environment for our
18 | community include:
19 |
20 | - Demonstrating empathy and kindness toward other people
21 | - Being respectful of differing opinions, viewpoints, and experiences
22 | - Giving and gracefully accepting constructive feedback
23 | - Accepting responsibility and apologizing to those affected by our mistakes,
24 | and learning from the experience
25 | - Focusing on what is best not just for us as individuals, but for the
26 | overall community
27 |
28 | Examples of unacceptable behavior include:
29 |
30 | - The use of sexualized language or imagery, and sexual attention or
31 | advances of any kind
32 | - Trolling, insulting or derogatory comments, and personal or political attacks
33 | - Public or private harassment
34 | - Publishing others' private information, such as a physical or email
35 | address, without their explicit permission
36 | - Other conduct which could reasonably be considered inappropriate in a
37 | professional setting
38 |
39 | ## Enforcement Responsibilities
40 |
41 | Community leaders are responsible for clarifying and enforcing our standards of
42 | acceptable behavior and will take appropriate and fair corrective action in
43 | response to any behavior that they deem inappropriate, threatening, offensive,
44 | or harmful.
45 |
46 | Community leaders have the right and responsibility to remove, edit, or reject
47 | comments, commits, code, wiki edits, issues, and other contributions that are
48 | not aligned to this Code of Conduct, and will communicate reasons for moderation
49 | decisions when appropriate.
50 |
51 | ## Scope
52 |
53 | This Code of Conduct applies within all community spaces, and also applies when
54 | an individual is officially representing the community in public spaces.
55 | Examples of representing our community include using an official e-mail address,
56 | posting via an official social media account, or acting as an appointed
57 | representative at an online or offline event.
58 |
59 | ## Enforcement
60 |
61 | Instances of abusive, harassing, or otherwise unacceptable behavior may be
62 | reported to the community leaders responsible for enforcement at
63 | peterchoi3000@gmail.com
64 | All complaints will be reviewed and investigated promptly and fairly.
65 |
66 | All community leaders are obligated to respect the privacy and security of the
67 | reporter of any incident.
68 |
69 | ## Enforcement Guidelines
70 |
71 | Community leaders will follow these Community Impact Guidelines in determining
72 | the consequences for any action they deem in violation of this Code of Conduct:
73 |
74 | ### 1. Correction
75 |
76 | **Community Impact**: Use of inappropriate language or other behavior deemed
77 | unprofessional or unwelcome in the community.
78 |
79 | **Consequence**: A private, written warning from community leaders, providing
80 | clarity around the nature of the violation and an explanation of why the
81 | behavior was inappropriate. A public apology may be requested.
82 |
83 | ### 2. Warning
84 |
85 | **Community Impact**: A violation through a single incident or series
86 | of actions.
87 |
88 | **Consequence**: A warning with consequences for continued behavior. No
89 | interaction with the people involved, including unsolicited interaction with
90 | those enforcing the Code of Conduct, for a specified period of time. This
91 | includes avoiding interactions in community spaces as well as external channels
92 | like social media. Violating these terms may lead to a temporary or
93 | permanent ban.
94 |
95 | ### 3. Temporary Ban
96 |
97 | **Community Impact**: A serious violation of community standards, including
98 | sustained inappropriate behavior.
99 |
100 | **Consequence**: A temporary ban from any sort of interaction or public
101 | communication with the community for a specified period of time. No public or
102 | private interaction with the people involved, including unsolicited interaction
103 | with those enforcing the Code of Conduct, is allowed during this period.
104 | Violating these terms may lead to a permanent ban.
105 |
106 | ### 4. Permanent Ban
107 |
108 | **Community Impact**: Demonstrating a pattern of violation of community
109 | standards, including sustained inappropriate behavior, harassment of an
110 | individual, or aggression toward or disparagement of classes of individuals.
111 |
112 | **Consequence**: A permanent ban from any sort of public interaction within
113 | the community.
114 |
115 | ## Attribution
116 |
117 | This Code of Conduct is adapted from the [Contributor Covenant][homepage],
118 | version 2.0, available at
119 | https://www.contributor-covenant.org/version/2/0/code_of_conduct.html.
120 |
121 | Community Impact Guidelines were inspired by [Mozilla's code of conduct
122 | enforcement ladder](https://github.com/mozilla/diversity).
123 |
124 | [homepage]: https://www.contributor-covenant.org
125 |
126 | For answers to common questions about this code of conduct, see the FAQ at
127 | https://www.contributor-covenant.org/faq. Translations are available at
128 | https://www.contributor-covenant.org/translations.
--------------------------------------------------------------------------------
/client/containers/mainpage.tsx:
--------------------------------------------------------------------------------
1 | const React = require('react');
2 | import NavBar from '../components/Navbar';
3 | import BarChart from '../components/BarChart';
4 | import LineChart from '../components/LineChart';
5 | import LiveChart from '../components/LiveChart';
6 | const styles = require('../styles/index.scss');
7 | const styles2 = require('../styles/colors.scss');
8 | import { useState, useEffect } from 'react';
9 | import { useDispatch, useSelector } from 'react-redux';
10 | import { State } from '../../types';
11 | import { addNamespaces } from '../getData';
12 | import { AppDispatch } from '../store';
13 | import { currentPage } from '../rootReducer';
14 | import { BounceLoader } from 'react-spinners';
15 | import axios from 'axios';
16 | import DonutChart from '../components/DonutChart';
17 | import { MainDataType } from '../../types';
18 |
19 | const MainPage = () => {
20 | const dispatch = useDispatch
22 |
64 |
65 | All files controllers
23 |
24 |
25 |
54 |
26 | 36.17%
27 | Statements
28 | 17/47
29 |
30 |
31 |
32 |
33 | 38.88%
34 | Branches
35 | 7/18
36 |
37 |
38 |
39 |
40 | 5.55%
41 | Functions
42 | 1/18
43 |
44 |
45 |
46 |
47 | 40.47%
48 | Lines
49 | 17/42
50 |
51 |
52 |
53 | 55 | Press n or j to go to the next uncovered block, b, p or k for the previous block. 56 |
57 | 58 |
59 | Filter:
60 |
61 |
62 |
63 |
66 |
67 |
68 |
98 |
99 |
100 | | File | 70 |71 | | Statements | 72 |73 | | Branches | 74 |75 | | Functions | 76 |77 | | Lines | 78 |79 | |
|---|---|---|---|---|---|---|---|---|---|
| kubernetesController.js | 83 |
84 |
85 | |
86 | 36.17% | 87 |17/47 | 88 |38.88% | 89 |7/18 | 90 |5.55% | 91 |1/18 | 92 |40.47% | 93 |17/42 | 94 |
98 |
106 | );
107 | }
108 |
109 | return (
110 |
111 |
174 | );
175 | };
176 |
177 | export default MainPage;
178 |
--------------------------------------------------------------------------------
/server/controllers/kubernetesController.ts:
--------------------------------------------------------------------------------
1 | import { KubernetesController, start, end, req, res, next } from '../../types';
2 | import { Request, Response, NextFunction } from 'express';
3 | import { graphDataObject } from '../../types';
4 | import DataObjectBuilder from './dataObjectBuilder';
5 | import axios from 'axios';
6 |
7 | const kubernetesController: KubernetesController = {
8 | namespaceNames: async (req: Request, res: Response, next: NextFunction) => {
9 | const namespaceQuery = 'sum+by+(namespace)+(kube_pod_info)';
10 | try {
11 | const response = await axios.get(
12 | `http://localhost:9090/api/v1/query_range?query=${namespaceQuery}&start=${start}&end=${end}&step=5m`
13 | );
14 | const array = await response.data.data.result;
15 | const namespaceArray: string[] = [];
16 | array.forEach((element: any) => {
17 | namespaceArray.push(element.metric.namespace);
18 | });
19 | res.locals.namespaceNames = namespaceArray;
20 | return next();
21 | } catch (err) {
22 | return next({
23 | log: `Error in kubernetesController.nameSpaceNames: ${err}`,
24 | status: 500,
25 | message: 'Error occured while retrieving namespace names data',
26 | });
27 | }
28 | },
29 |
30 | podNames: async (req, res, next) => {
31 | const namespace = req.query.namespace;
32 | const podNameQuery = `sum by (pod)(kube_pod_info{namespace="${namespace}"})`;
33 | try {
34 | const response = await axios.get(
35 | `http://localhost:9090/api/v1/query_range?query=${podNameQuery}&start=${start}&end=${end}&step=5m`
36 | );
37 | const array = response.data.data.result;
38 | const podNameArray: string[] = [];
39 | array.forEach((element: any) => {
40 | podNameArray.push(element.metric.pod);
41 | });
42 | res.locals.names = podNameArray;
43 | return next();
44 | } catch (err) {
45 | return next({
46 | log: `Error in kubernetesController.podNames: ${err}`,
47 | status: 500,
48 | message: 'Error occured while retrieving pod names',
49 | });
50 | }
51 | },
52 |
53 | podsNotReadyNames: async (req, res, next) => {
54 | const { namespace, podData } = req.query;
55 | if (Array.isArray(podData)) {
56 | const promises = podData.map(async (name) => {
57 | const readyQuery = `sum(kube_pod_status_ready{condition="false",namespace="${namespace}",pod="${name}"})`;
58 | try {
59 | const response = await axios.get(
60 | `http://localhost:9090/api/v1/query_range?query=${readyQuery}&start=${start}&end=${end}&step=5m`
61 | );
62 | if (!response) {
63 | return [undefined, name];
64 | }
65 | const status = response.data.data.result[0].values[0][1];
66 | if (parseInt(status) > 0) {
67 | return [status, name];
68 | }
69 | } catch (err) {
70 | return next({
71 | log: `Error in kubernetesController.podsNotReady: ${err}`,
72 | status: 500,
73 | message: 'Error occured while retrieving pods not ready data',
74 | });
75 | }
76 | });
77 | await Promise.all(promises).then((data) => {
78 | res.locals.status = data;
79 | });
80 | }
81 | return next();
82 | },
83 |
84 | getNameSpaceMetrics: async (req, res, next) => {
85 | const objectData: any = {};
86 | const { namespaceName } = req.params;
87 | const queryObject: graphDataObject = {
88 | linegraph: {
89 | restarts: `sum(changes(kube_pod_status_ready{condition="true", namespace = "${namespaceName}"}[5m]))`,
90 | ready: `sum(kube_pod_status_ready{condition="true", namespace = "${namespaceName}"})`,
91 | cpu: `sum(rate(container_cpu_usage_seconds_total{container="", namespace=~"${namespaceName}"}[10m]))`,
92 | memory: `sum(rate(container_memory_usage_bytes{container="", namespace=~"${namespaceName}"}[10m]))`,
93 | reception: `sum(rate(node_network_receive_bytes_total{namespace = "${namespaceName}"}[10m]))`,
94 | transmission: `sum(rate(node_network_transmit_bytes_total{namespace = "${namespaceName}"}[10m]))`,
95 | },
96 | donutint: {
97 | notReady: `sum(kube_pod_status_ready{condition="false", namespace = "${namespaceName}"})`,
98 | },
99 | };
100 | try {
101 | req.app.locals.queries = queryObject;
102 | return next();
103 | } catch (err) {
104 | return next({
105 | log: `Error in kuberenetesController.getMetrics: ${err}`,
106 | status: 500,
107 | message: 'Error occured while retrieving getMetrics data',
108 | });
109 | }
110 | },
111 |
112 | getPodMetrics: async (req, res, next) => {
113 | const { podName } = req.params;
114 | const queryObject: graphDataObject = {
115 | linegraph: {
116 | restarts: `sum(changes(kube_pod_status_ready{condition="true", pod = "${podName}"}[5m]))`,
117 | ready: `sum(kube_pod_status_ready{condition="false", pod = "${podName}"})`,
118 | cpu: `sum(rate(container_cpu_usage_seconds_total{container="", pod=~"${podName}"}[10m]))`,
119 | memory: `sum(rate(container_memory_usage_bytes{container="", pod=~"${podName}"}[10m]))`,
120 | reception: `sum(rate(node_network_receive_bytes_total{pod = "${podName}"}[10m]))`,
121 | transmission: `sum(rate(node_network_transmit_bytes_total{pod = "${podName}"}[10m]))`,
122 | },
123 | };
124 | try {
125 | req.app.locals.queries = queryObject;
126 | return next();
127 | } catch (err) {
128 | return next({
129 | log: `Error in kuberenetesController.getPodMetrics: ${err}`,
130 | status: 500,
131 | message: 'Error occured while retrieving getMetrics data',
132 | });
133 | }
134 | },
135 | };
136 |
137 | export default kubernetesController;
138 |
--------------------------------------------------------------------------------
/client/styles/colors.scss:
--------------------------------------------------------------------------------
1 | $nav: #1d1b1d;
2 | $PersianGreen: rgb(51, 153, 137);
3 | $PacificBlue: rgb(80, 178, 192);
4 | $OperaMauve: rgb(172, 128, 160);
5 | $background: rgb(31, 28, 30);
6 | $fontColor: rgba(136, 217, 230, 0.8);
7 | $font: 'Playfair Display', serif;
8 | $theme-map: null;
9 | $light-bg: #c9c5ba;
10 | $light-box: #e5e0d4;
11 |
12 | $themes: (
13 | dark: (
14 | 'bg': $background,
15 | 'scroll-back': $fontColor,
16 | 'scroll': lighten($background, 20%),
17 | 'font': $fontColor,
18 | 'header': $PacificBlue,
19 | 'box-shadow': rgba(51, 153, 137, 0.3) 0px 1px 2px 0px,
20 | 'box-shadow2': rgba(51, 153, 137, 0.15) 0px 2px 6px 2px,
21 | 'drop-hover': rgb(151, 150, 150),
22 | 'header-back': $background,
23 | 'chart-back': transparent,
24 | 'chart-font': rgba(54, 133, 181, 1),
25 | 'nav-back': $nav,
26 | 'pod-good': $PersianGreen,
27 | 'graph-font': $PacificBlue,
28 | 'pod-bad': rgb(187, 72, 103),
29 | ),
30 | light: (
31 | 'bg': $light-bg,
32 | 'scroll-back': $light-box,
33 | 'scroll': darken(#c9c5ba, 10%),
34 | 'font': #5d536b,
35 | 'header': #696773,
36 | 'box-shadow': $light-bg,
37 | 'box-shadow2': $light-bg,
38 | 'drop-hover': #ceede0,
39 | 'header-back': $light-box,
40 | 'chart-back': $light-box,
41 | 'chart-font': #363946,
42 | 'nav-back': #97b1a6,
43 | 'nav-font': #272838,
44 | 'pod-good': #97b1a6,
45 | 'pod-bad': rgb(146, 19, 19),
46 | 'graph-font': rgb(46, 45, 45),
47 | ),
48 | );
49 |
50 | @mixin themify($themes: $themes) {
51 | @each $theme, $map in $themes {
52 | .theme-#{$theme} & {
53 | $theme-map: () !global;
54 | @each $key, $submap in $map {
55 | $value: map-get(map-get($themes, $theme), '#{$key}');
56 | $theme-map: map-merge(
57 | $theme-map,
58 | (
59 | $key: $value,
60 | )
61 | ) !global;
62 | }
63 |
64 | @content;
65 | $theme-map: null !global;
66 | }
67 | }
68 | }
69 |
70 | @function themed($key) {
71 | @return map-get($theme-map, $key);
72 | }
73 |
74 | body[data-theme='dark'] {
75 | background: $background;
76 | }
77 |
78 | body[data-theme='light'] {
79 | background: #c9c5ba;
80 | }
81 |
82 | #main-container {
83 | @include themify($themes) {
84 | background-color: themed('bg');
85 | }
86 | .header {
87 | @include themify($themes) {
88 | background-color: themed('header-back');
89 | color: themed('header');
90 | box-shadow: themed('box-shadow'), themed('box-shadow2');
91 | }
92 | }
93 | }
94 |
95 | //navbar color themes
96 | #nav-bar {
97 | @include themify($themes) {
98 | background-color: themed('nav-back');
99 | box-shadow: rgba(51, 153, 137, 0.3) 0px 1px 2px 0px,
100 | rgba(51, 153, 137, 0.15) 0px 2px 6px 2px;
101 | .link {
102 | color: themed('font');
103 | &:hover {
104 | color: $OperaMauve;
105 | }
106 | }
107 | .current {
108 | background-color: lighten(themed('nav-back'), 10%);
109 | }
110 | }
111 |
112 | #eyepatch {
113 | @include themify($themes) {
114 | &:hover {
115 | background-color: themed('nav-back');
116 | box-shadow: 0 0 20px 20px themed('nav-back'),
117 | /* inner white */ /* middle magenta */ 0 0 100px 30px #0ff; /* outer cyan */
118 | }
119 | color: themed('font');
120 | }
121 | }
122 | }
123 |
124 | .data-container {
125 | .line {
126 | @include themify($themes) {
127 | box-shadow: themed('box-shadow'), themed('box-shadow2');
128 | background-color: themed('chart-back');
129 | }
130 | }
131 |
132 | .live {
133 | @include themify($themes) {
134 | box-shadow: themed('box-shadow'), themed('box-shadow2');
135 | background-color: themed('chart-back');
136 | }
137 | }
138 | .bar-chart {
139 | @include themify($themes) {
140 | background-color: themed('chart-back');
141 | }
142 | }
143 | #total-names {
144 | @include themify($themes) {
145 | color: themed('font');
146 | }
147 | }
148 | }
149 |
150 | //Main Page list data
151 | #list-data {
152 | @include themify($themes) {
153 | background-color: themed('header-back');
154 | color: themed('font');
155 | box-shadow: themed('box-shadow'), themed('box-shadow2');
156 | }
157 | #total-names {
158 | @include themify($themes) {
159 | color: themed('font');
160 | }
161 | }
162 |
163 | #names-num {
164 | @include themify($themes) {
165 | -webkit-text-stroke: 1px themed('chart-font');
166 | color: themed('chart-font');
167 | }
168 | }
169 | }
170 |
171 | //Kubernetes page list data
172 | #kube-list-data {
173 | @include themify($themes) {
174 | background-color: themed('header-back');
175 | color: themed('font');
176 | box-shadow: themed('box-shadow') themed('box-shadow2');
177 | }
178 | #pod-names {
179 | @include themify($themes) {
180 | .pod-list {
181 | color: themed('font');
182 | &:hover {
183 | color: $OperaMauve;
184 | font-size: 20px;
185 | }
186 | }
187 | .pod-list-bad {
188 | color: themed('pod-bad');
189 | &:hover {
190 | color: $OperaMauve;
191 | font-size: 20px;
192 | }
193 | }
194 | }
195 | }
196 | #dropdown {
197 | #dropdown-but {
198 | @include themify($themes) {
199 | color: themed('font');
200 | &:hover {
201 | background-color: themed('drop-hover');
202 | }
203 | }
204 | }
205 | .menu {
206 | @include themify($themes) {
207 | background-color: lighten(themed('header-back'), 10%);
208 | }
209 | }
210 | .menu > li {
211 | @include themify($themes) {
212 | background-color: transparent;
213 | color: themed('font');
214 | }
215 | }
216 |
217 | .menu > li:hover {
218 | color: #1d1b1d;
219 | @include themify($themes) {
220 | background-color: themed('drop-hover');
221 | }
222 | }
223 | }
224 | }
225 |
226 | //Scrollbar colors
227 | ::-webkit-scrollbar-track {
228 | @include themify($themes) {
229 | background: themed('scroll-back');
230 | }
231 | }
232 |
233 | ::-webkit-scrollbar-thumb {
234 | @include themify($themes) {
235 | background: themed('scroll');
236 | }
237 | }
238 |
--------------------------------------------------------------------------------
/server/controllers/dashboardController.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 | var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
3 | function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
4 | return new (P || (P = Promise))(function (resolve, reject) {
5 | function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
6 | function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
7 | function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
8 | step((generator = generator.apply(thisArg, _arguments || [])).next());
9 | });
10 | };
11 | var __generator = (this && this.__generator) || function (thisArg, body) {
12 | var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
13 | return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
14 | function verb(n) { return function (v) { return step([n, v]); }; }
15 | function step(op) {
16 | if (f) throw new TypeError("Generator is already executing.");
17 | while (g && (g = 0, op[0] && (_ = 0)), _) try {
18 | if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
19 | if (y = 0, t) op = [op[0] & 2, t.value];
20 | switch (op[0]) {
21 | case 0: case 1: t = op; break;
22 | case 4: _.label++; return { value: op[1], done: false };
23 | case 5: _.label++; y = op[1]; op = [0]; continue;
24 | case 7: op = _.ops.pop(); _.trys.pop(); continue;
25 | default:
26 | if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
27 | if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
28 | if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
29 | if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
30 | if (t[2]) _.ops.pop();
31 | _.trys.pop(); continue;
32 | }
33 | op = body.call(thisArg, _);
34 | } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
35 | if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
36 | }
37 | };
38 | exports.__esModule = true;
39 | var k8s = require('@kubernetes/client-node');
40 | //prometheus client for node.js
41 | var client = require('prom-client');
42 | var kc = new k8s.KubeConfig();
43 | kc.loadFromDefault();
44 | //CoreV1Api: it allows access to core k8 resources such as services
45 | var k8sApi = kc.makeApiClient(k8s.CoreV1Api);
46 | //AppsV1Api: it allows access to app/v1 resources such as deployments and k8s
47 | var k8sApi1 = kc.makeApiClient(k8s.AppsV1Api);
48 | //NetworkV1Api: (ingress) - Ingress is a collection of rules that allow inbound connections to reach the endpoints defined by a backend. An Ingress can be configured to give services externally-reachable urls, load balance traffic, terminate SSL, offer name based virtual hosting etc.
49 | //https://docs.okd.io/latest/rest_api/network_apis/ingress-networking-k8s-io-v1.html
50 | var k8sApi3 = kc.makeApiClient(k8s.NetworkingV1Api);
51 | //to collect default metrics directly from prometheus client
52 | //https://github.com/siimon/prom-client
53 | client.collectDefaultMetrics();
54 | var dashboardController = {
55 | getAllMetrics: function (req, res, next) { return __awaiter(void 0, void 0, void 0, function () {
56 | var queryObject;
57 | return __generator(this, function (_a) {
58 | queryObject = {
59 | linegraph: {
60 | totalCpu: 'sum(rate(container_cpu_usage_seconds_total[10m]))*100',
61 | totalMem: 'sum(container_memory_usage_bytes)',
62 | totalTransmit: 'sum(rate(node_network_transmit_bytes_total[10m]))',
63 | totalReceive: 'sum(rate(node_network_receive_bytes_total[10m]))'
64 | },
65 | donutint: {
66 | totalPods: 'count(kube_pod_info)',
67 | notReadyPods: 'sum(kube_pod_status_ready{condition="false"})',
68 | totalNamespaces: 'count(kube_namespace_created)'
69 | }
70 | };
71 | try {
72 | req.app.locals.queries = queryObject;
73 | return [2 /*return*/, next()];
74 | }
75 | catch (err) {
76 | return [2 /*return*/, next({
77 | log: "Error in dashboardController.getAllMetrics: ".concat(err),
78 | status: 500,
79 | message: 'Error occured while retrieving dashboard all metrics data'
80 | })];
81 | }
82 | return [2 /*return*/];
83 | });
84 | }); },
85 | cpuUsageOverTotalCpu: function (req, res, next) { return __awaiter(void 0, void 0, void 0, function () {
86 | var queryObject;
87 | return __generator(this, function (_a) {
88 | queryObject = {
89 | cpubarchart: {
90 | cpu: 'sum(rate(container_cpu_usage_seconds_total[5m]))',
91 | core: 'sum(machine_cpu_cores)',
92 | percent: 'sum(rate(container_cpu_usage_seconds_total[5m]))/sum(machine_cpu_cores)*100'
93 | }
94 | };
95 | try {
96 | req.app.locals.queries = queryObject;
97 | return [2 /*return*/, next()];
98 | }
99 | catch (err) {
100 | return [2 /*return*/, next({
101 | log: "Error in dashboardController.getTotalCpu: ".concat(err),
102 | status: 500,
103 | message: 'Error occured while retrieving dashboard transmit data'
104 | })];
105 | }
106 | return [2 /*return*/];
107 | });
108 | }); }
109 | };
110 | exports["default"] = dashboardController;
111 |
--------------------------------------------------------------------------------
/coverage/lcov-report/base.css:
--------------------------------------------------------------------------------
1 | body, html {
2 | margin:0; padding: 0;
3 | height: 100%;
4 | }
5 | body {
6 | font-family: Helvetica Neue, Helvetica, Arial;
7 | font-size: 14px;
8 | color:#333;
9 | }
10 | .small { font-size: 12px; }
11 | *, *:after, *:before {
12 | -webkit-box-sizing:border-box;
13 | -moz-box-sizing:border-box;
14 | box-sizing:border-box;
15 | }
16 | h1 { font-size: 20px; margin: 0;}
17 | h2 { font-size: 14px; }
18 | pre {
19 | font: 12px/1.4 Consolas, "Liberation Mono", Menlo, Courier, monospace;
20 | margin: 0;
21 | padding: 0;
22 | -moz-tab-size: 2;
23 | -o-tab-size: 2;
24 | tab-size: 2;
25 | }
26 | a { color:#0074D9; text-decoration:none; }
27 | a:hover { text-decoration:underline; }
28 | .strong { font-weight: bold; }
29 | .space-top1 { padding: 10px 0 0 0; }
30 | .pad2y { padding: 20px 0; }
31 | .pad1y { padding: 10px 0; }
32 | .pad2x { padding: 0 20px; }
33 | .pad2 { padding: 20px; }
34 | .pad1 { padding: 10px; }
35 | .space-left2 { padding-left:55px; }
36 | .space-right2 { padding-right:20px; }
37 | .center { text-align:center; }
38 | .clearfix { display:block; }
39 | .clearfix:after {
40 | content:'';
41 | display:block;
42 | height:0;
43 | clear:both;
44 | visibility:hidden;
45 | }
46 | .fl { float: left; }
47 | @media only screen and (max-width:640px) {
48 | .col3 { width:100%; max-width:100%; }
49 | .hide-mobile { display:none!important; }
50 | }
51 |
52 | .quiet {
53 | color: #7f7f7f;
54 | color: rgba(0,0,0,0.5);
55 | }
56 | .quiet a { opacity: 0.7; }
57 |
58 | .fraction {
59 | font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace;
60 | font-size: 10px;
61 | color: #555;
62 | background: #E8E8E8;
63 | padding: 4px 5px;
64 | border-radius: 3px;
65 | vertical-align: middle;
66 | }
67 |
68 | div.path a:link, div.path a:visited { color: #333; }
69 | table.coverage {
70 | border-collapse: collapse;
71 | margin: 10px 0 0 0;
72 | padding: 0;
73 | }
74 |
75 | table.coverage td {
76 | margin: 0;
77 | padding: 0;
78 | vertical-align: top;
79 | }
80 | table.coverage td.line-count {
81 | text-align: right;
82 | padding: 0 5px 0 20px;
83 | }
84 | table.coverage td.line-coverage {
85 | text-align: right;
86 | padding-right: 10px;
87 | min-width:20px;
88 | }
89 |
90 | table.coverage td span.cline-any {
91 | display: inline-block;
92 | padding: 0 5px;
93 | width: 100%;
94 | }
95 | .missing-if-branch {
96 | display: inline-block;
97 | margin-right: 5px;
98 | border-radius: 3px;
99 | position: relative;
100 | padding: 0 4px;
101 | background: #333;
102 | color: yellow;
103 | }
104 |
105 | .skip-if-branch {
106 | display: none;
107 | margin-right: 10px;
108 | position: relative;
109 | padding: 0 4px;
110 | background: #ccc;
111 | color: white;
112 | }
113 | .missing-if-branch .typ, .skip-if-branch .typ {
114 | color: inherit !important;
115 | }
116 | .coverage-summary {
117 | border-collapse: collapse;
118 | width: 100%;
119 | }
120 | .coverage-summary tr { border-bottom: 1px solid #bbb; }
121 | .keyline-all { border: 1px solid #ddd; }
122 | .coverage-summary td, .coverage-summary th { padding: 10px; }
123 | .coverage-summary tbody { border: 1px solid #bbb; }
124 | .coverage-summary td { border-right: 1px solid #bbb; }
125 | .coverage-summary td:last-child { border-right: none; }
126 | .coverage-summary th {
127 | text-align: left;
128 | font-weight: normal;
129 | white-space: nowrap;
130 | }
131 | .coverage-summary th.file { border-right: none !important; }
132 | .coverage-summary th.pct { }
133 | .coverage-summary th.pic,
134 | .coverage-summary th.abs,
135 | .coverage-summary td.pct,
136 | .coverage-summary td.abs { text-align: right; }
137 | .coverage-summary td.file { white-space: nowrap; }
138 | .coverage-summary td.pic { min-width: 120px !important; }
139 | .coverage-summary tfoot td { }
140 |
141 | .coverage-summary .sorter {
142 | height: 10px;
143 | width: 7px;
144 | display: inline-block;
145 | margin-left: 0.5em;
146 | background: url(sort-arrow-sprite.png) no-repeat scroll 0 0 transparent;
147 | }
148 | .coverage-summary .sorted .sorter {
149 | background-position: 0 -20px;
150 | }
151 | .coverage-summary .sorted-desc .sorter {
152 | background-position: 0 -10px;
153 | }
154 | .status-line { height: 10px; }
155 | /* yellow */
156 | .cbranch-no { background: yellow !important; color: #111; }
157 | /* dark red */
158 | .red.solid, .status-line.low, .low .cover-fill { background:#C21F39 }
159 | .low .chart { border:1px solid #C21F39 }
160 | .highlighted,
161 | .highlighted .cstat-no, .highlighted .fstat-no, .highlighted .cbranch-no{
162 | background: #C21F39 !important;
163 | }
164 | /* medium red */
165 | .cstat-no, .fstat-no, .cbranch-no, .cbranch-no { background:#F6C6CE }
166 | /* light red */
167 | .low, .cline-no { background:#FCE1E5 }
168 | /* light green */
169 | .high, .cline-yes { background:rgb(230,245,208) }
170 | /* medium green */
171 | .cstat-yes { background:rgb(161,215,106) }
172 | /* dark green */
173 | .status-line.high, .high .cover-fill { background:rgb(77,146,33) }
174 | .high .chart { border:1px solid rgb(77,146,33) }
175 | /* dark yellow (gold) */
176 | .status-line.medium, .medium .cover-fill { background: #f9cd0b; }
177 | .medium .chart { border:1px solid #f9cd0b; }
178 | /* light yellow */
179 | .medium { background: #fff4c2; }
180 |
181 | .cstat-skip { background: #ddd; color: #111; }
182 | .fstat-skip { background: #ddd; color: #111 !important; }
183 | .cbranch-skip { background: #ddd !important; color: #111; }
184 |
185 | span.cline-neutral { background: #eaeaea; }
186 |
187 | .coverage-summary td.empty {
188 | opacity: .5;
189 | padding-top: 4px;
190 | padding-bottom: 4px;
191 | line-height: 1;
192 | color: #888;
193 | }
194 |
195 | .cover-fill, .cover-empty {
196 | display:inline-block;
197 | height: 12px;
198 | }
199 | .chart {
200 | line-height: 0;
201 | }
202 | .cover-empty {
203 | background: white;
204 | }
205 | .cover-full {
206 | border-right: none !important;
207 | }
208 | pre.prettyprint {
209 | border: none !important;
210 | padding: 0 !important;
211 | margin: 0 !important;
212 | }
213 | .com { color: #999 !important; }
214 | .ignore-none { color: #999; font-weight: normal; }
215 |
216 | .wrapper {
217 | min-height: 100%;
218 | height: auto !important;
219 | height: 100%;
220 | margin: 0 auto -48px;
221 | }
222 | .footer, .push {
223 | height: 48px;
224 | }
225 |
--------------------------------------------------------------------------------
/client/styles/index.scss:
--------------------------------------------------------------------------------
1 | $border: #353636;
2 | $font: 'Playfair Display', serif;
3 |
4 | * {
5 | margin: 0;
6 | }
7 |
8 | #main-container {
9 | display: grid;
10 | grid-template-areas:
11 | 'head head'
12 | 'navb main'
13 | 'navb main';
14 | grid-template-columns: 300px 1fr;
15 | margin-top: 170px;
16 |
17 | font-family: $font;
18 | .header {
19 | font-size: 30px;
20 | text-align: center;
21 | grid-area: head;
22 | max-height: 160px;
23 | padding: 25px 0 25px 0;
24 | width: 100%;
25 | position: fixed;
26 | border: 1px solid $border;
27 | z-index: 1;
28 | top: 0px;
29 | }
30 | }
31 |
32 | //navbar styling
33 | #nav-bar {
34 | min-width: 300px;
35 | align-items: center;
36 | top: 201px;
37 | grid-area: navb;
38 | display: flex;
39 | flex-direction: column;
40 | position: fixed;
41 | margin: -70px 0 0 0px;
42 | height: 100%;
43 | padding-top: 20px;
44 | border: 1px solid $border;
45 | .link-div {
46 | display: flex;
47 | width: 300px;
48 | justify-content: center;
49 | }
50 | .link {
51 | padding: 5px;
52 | align-self: center;
53 | }
54 |
55 | #eyepatch {
56 | position: fixed;
57 | height: 50px;
58 | width: 50px;
59 | border-style: none;
60 | display: flex;
61 | position: relative;
62 | margin-top: 60px;
63 | &:hover {
64 | width: 50px;
65 | height: 50px;
66 | border-radius: 50%;
67 | cursor: pointer;
68 | }
69 | bottom: 3%;
70 | }
71 |
72 | #logo {
73 | display: flex;
74 | width: 200px;
75 | height: 200px;
76 | justify-content: center;
77 | align-items: center;
78 | padding-bottom: 20px;
79 | }
80 | }
81 |
82 | .data-container {
83 | grid-area: main;
84 | display: flex;
85 | flex-direction: column;
86 | height: 100%;
87 |
88 | #mongo-h1 {
89 | font-size: 100px;
90 | top: 200px;
91 | margin-left: 50px;
92 | align-self: center;
93 | }
94 |
95 | #mongo-charts {
96 | margin-top: -50px;
97 | }
98 |
99 | .charts {
100 | display: flex;
101 | flex-direction: column;
102 | justify-content: space-around;
103 | align-items: center;
104 | margin: 0px 25px 5px 25px;
105 | }
106 |
107 | .line-graph {
108 | display: grid;
109 | grid-template-columns: repeat(auto-fill, minmax(600px, 0.9fr));
110 | padding: 20px;
111 | padding-left: 40px;
112 | }
113 |
114 | .line {
115 | margin: 30px 20px 20px 0;
116 | border: 1px solid $border;
117 | padding: 5px;
118 | }
119 |
120 | #kube-main-dash {
121 | display: flex;
122 | flex-direction: column;
123 | }
124 | }
125 |
126 | //List data for main page
127 | #list-data {
128 | display: flex;
129 | flex-direction: row;
130 | justify-content: space-evenly;
131 | border: 1px solid $border;
132 | margin: 0px 24px 0 24px;
133 | height: 344px;
134 |
135 | #total-pods {
136 | padding-top: 15px;
137 | padding-right: 10px;
138 | align-self: center;
139 | }
140 |
141 | #total-names {
142 | display: flex;
143 | flex-direction: column;
144 | justify-content: start;
145 | align-items: center;
146 | font-size: 12.5px;
147 | font-family: Helvetica;
148 | font-weight: bolder;
149 | width: 200px;
150 | height: 200px;
151 | padding-top: 60px;
152 | }
153 |
154 | #names-num {
155 | display: flex;
156 | align-items: center;
157 | justify-content: center;
158 | font-size: 210px;
159 | }
160 |
161 | .bar-chart {
162 | display: flex;
163 | align-items: center;
164 | height: 200px;
165 | align-self: center;
166 | border: none;
167 | box-shadow: none;
168 | padding-right: 20px;
169 | }
170 | }
171 |
172 | //Kubernetes list data
173 | #kube-list-data {
174 | display: flex;
175 | flex-direction: row;
176 | justify-content: space-evenly;
177 | border: 1px solid $border;
178 | margin: 0 24px 0 24px;
179 | padding: 5px 5px 5px 5px;
180 | padding-bottom: 29px;
181 |
182 | .pod-list:hover {
183 | cursor: pointer;
184 | }
185 |
186 | #pod-names {
187 | width: 600px;
188 | max-width: 600px;
189 | border: 1px solid cl;
190 | margin-left: 60px;
191 | padding: 5px 0 0 20px;
192 | overflow-y: auto;
193 |
194 | h2 {
195 | border-bottom: 1px solid $border;
196 | font-weight: bold;
197 | padding-bottom: 5px;
198 | }
199 | div {
200 | padding: 5px;
201 | }
202 | }
203 |
204 | #kube-total-pods {
205 | margin-left: -100px;
206 | }
207 |
208 | #dropdown {
209 | padding-top: 20px;
210 | padding-bottom: 20px;
211 | padding-left: 10px;
212 | min-width: 300px;
213 | width: 400px;
214 | max-width: 400px;
215 | margin-left: 10px;
216 |
217 | #dropdown-but {
218 | font-size: 20px;
219 | font-family: $font;
220 | left: 10px;
221 | background-color: transparent;
222 | border: 1px solid $border;
223 | padding: 5px 15px;
224 | &:hover {
225 | cursor: pointer;
226 | }
227 | }
228 | .menu {
229 | position: absolute;
230 | list-style-type: none;
231 | margin: 5px 0;
232 | padding: 0;
233 | border: 1px solid grey;
234 | width: 150px;
235 | }
236 |
237 | .menu > li {
238 | margin: 0;
239 | }
240 |
241 | .menu > li > button {
242 | width: 100%;
243 | height: 100%;
244 | text-align: left;
245 | background: none;
246 | color: inherit;
247 | border: none;
248 | padding: 5px;
249 | margin: 0;
250 | font: inherit;
251 | cursor: pointer;
252 | }
253 | }
254 | }
255 |
256 | //Display for No Data
257 | .line-chart-container {
258 | display: grid;
259 | position: relative;
260 |
261 | .missing-data {
262 | display: flex;
263 | height: 100%;
264 | width: 100%;
265 | background: rgba(255, 255, 255, 0.4);
266 | justify-content: center;
267 | align-items: center;
268 | color: #1b013f;
269 | position: absolute;
270 | }
271 | }
272 |
273 | //Display for Error
274 | #error {
275 | display: flex;
276 | justify-content: center;
277 | align-items: center;
278 | margin-top: 160px;
279 | margin-bottom: 160px;
280 | }
281 |
282 | //Scrollbar styling
283 | ::-webkit-scrollbar {
284 | height: 10px;
285 | width: 10px;
286 | }
287 |
288 | ::-webkit-scrollbar-track {
289 | background: $border;
290 | }
291 |
292 | ::-webkit-scrollbar-thumb {
293 | background: #6c887c;
294 | }
295 |
--------------------------------------------------------------------------------
/coverage/lcov-report/sorter.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable */
2 | var addSorting = (function() {
3 | 'use strict';
4 | var cols,
5 | currentSort = {
6 | index: 0,
7 | desc: false
8 | };
9 |
10 | // returns the summary table element
11 | function getTable() {
12 | return document.querySelector('.coverage-summary');
13 | }
14 | // returns the thead element of the summary table
15 | function getTableHeader() {
16 | return getTable().querySelector('thead tr');
17 | }
18 | // returns the tbody element of the summary table
19 | function getTableBody() {
20 | return getTable().querySelector('tbody');
21 | }
22 | // returns the th element for nth column
23 | function getNthColumn(n) {
24 | return getTableHeader().querySelectorAll('th')[n];
25 | }
26 |
27 | function onFilterInput() {
28 | const searchValue = document.getElementById('fileSearch').value;
29 | const rows = document.getElementsByTagName('tbody')[0].children;
30 | for (let i = 0; i < rows.length; i++) {
31 | const row = rows[i];
32 | if (
33 | row.textContent
34 | .toLowerCase()
35 | .includes(searchValue.toLowerCase())
36 | ) {
37 | row.style.display = '';
38 | } else {
39 | row.style.display = 'none';
40 | }
41 | }
42 | }
43 |
44 | // loads the search box
45 | function addSearchBox() {
46 | var template = document.getElementById('filterTemplate');
47 | var templateClone = template.content.cloneNode(true);
48 | templateClone.getElementById('fileSearch').oninput = onFilterInput;
49 | template.parentElement.appendChild(templateClone);
50 | }
51 |
52 | // loads all columns
53 | function loadColumns() {
54 | var colNodes = getTableHeader().querySelectorAll('th'),
55 | colNode,
56 | cols = [],
57 | col,
58 | i;
59 |
60 | for (i = 0; i < colNodes.length; i += 1) {
61 | colNode = colNodes[i];
62 | col = {
63 | key: colNode.getAttribute('data-col'),
64 | sortable: !colNode.getAttribute('data-nosort'),
65 | type: colNode.getAttribute('data-type') || 'string'
66 | };
67 | cols.push(col);
68 | if (col.sortable) {
69 | col.defaultDescSort = col.type === 'number';
70 | colNode.innerHTML =
71 | colNode.innerHTML + '';
72 | }
73 | }
74 | return cols;
75 | }
76 | // attaches a data attribute to every tr element with an object
77 | // of data values keyed by column name
78 | function loadRowData(tableRow) {
79 | var tableCols = tableRow.querySelectorAll('td'),
80 | colNode,
81 | col,
82 | data = {},
83 | i,
84 | val;
85 | for (i = 0; i < tableCols.length; i += 1) {
86 | colNode = tableCols[i];
87 | col = cols[i];
88 | val = colNode.getAttribute('data-value');
89 | if (col.type === 'number') {
90 | val = Number(val);
91 | }
92 | data[col.key] = val;
93 | }
94 | return data;
95 | }
96 | // loads all row data
97 | function loadData() {
98 | var rows = getTableBody().querySelectorAll('tr'),
99 | i;
100 |
101 | for (i = 0; i < rows.length; i += 1) {
102 | rows[i].data = loadRowData(rows[i]);
103 | }
104 | }
105 | // sorts the table using the data for the ith column
106 | function sortByIndex(index, desc) {
107 | var key = cols[index].key,
108 | sorter = function(a, b) {
109 | a = a.data[key];
110 | b = b.data[key];
111 | return a < b ? -1 : a > b ? 1 : 0;
112 | },
113 | finalSorter = sorter,
114 | tableBody = document.querySelector('.coverage-summary tbody'),
115 | rowNodes = tableBody.querySelectorAll('tr'),
116 | rows = [],
117 | i;
118 |
119 | if (desc) {
120 | finalSorter = function(a, b) {
121 | return -1 * sorter(a, b);
122 | };
123 | }
124 |
125 | for (i = 0; i < rowNodes.length; i += 1) {
126 | rows.push(rowNodes[i]);
127 | tableBody.removeChild(rowNodes[i]);
128 | }
129 |
130 | rows.sort(finalSorter);
131 |
132 | for (i = 0; i < rows.length; i += 1) {
133 | tableBody.appendChild(rows[i]);
134 | }
135 | }
136 | // removes sort indicators for current column being sorted
137 | function removeSortIndicators() {
138 | var col = getNthColumn(currentSort.index),
139 | cls = col.className;
140 |
141 | cls = cls.replace(/ sorted$/, '').replace(/ sorted-desc$/, '');
142 | col.className = cls;
143 | }
144 | // adds sort indicators for current column being sorted
145 | function addSortIndicators() {
146 | getNthColumn(currentSort.index).className += currentSort.desc
147 | ? ' sorted-desc'
148 | : ' sorted';
149 | }
150 | // adds event listeners for all sorter widgets
151 | function enableUI() {
152 | var i,
153 | el,
154 | ithSorter = function ithSorter(i) {
155 | var col = cols[i];
156 |
157 | return function() {
158 | var desc = col.defaultDescSort;
159 |
160 | if (currentSort.index === i) {
161 | desc = !currentSort.desc;
162 | }
163 | sortByIndex(i, desc);
164 | removeSortIndicators();
165 | currentSort.index = i;
166 | currentSort.desc = desc;
167 | addSortIndicators();
168 | };
169 | };
170 | for (i = 0; i < cols.length; i += 1) {
171 | if (cols[i].sortable) {
172 | // add the click event handler on the th so users
173 | // dont have to click on those tiny arrows
174 | el = getNthColumn(i).querySelector('.sorter').parentElement;
175 | if (el.addEventListener) {
176 | el.addEventListener('click', ithSorter(i));
177 | } else {
178 | el.attachEvent('onclick', ithSorter(i));
179 | }
180 | }
181 | }
182 | }
183 | // adds sorting functionality to the UI
184 | return function() {
185 | if (!getTable()) {
186 | return;
187 | }
188 | cols = loadColumns();
189 | loadData();
190 | addSearchBox();
191 | addSortIndicators();
192 | enableUI();
193 | };
194 | })();
195 |
196 | window.addEventListener('load', addSorting);
197 |
--------------------------------------------------------------------------------
/client/containers/kubMain.tsx:
--------------------------------------------------------------------------------
1 | import NavBar from '../components/Navbar';
2 | import axios from 'axios';
3 | import React, { useState, useEffect } from 'react';
4 | import DropDown from '../components/Dropdown';
5 | import LineChart from '../components/LineChart';
6 | import Popup from '../components/PopUp';
7 | import DonutChart from '../components/DonutChart';
8 | import { useSelector, useDispatch } from 'react-redux';
9 | import { State } from '../../types';
10 | import { currentPage, saveNamespace } from '../rootReducer';
11 | import PodName from '../components/PodName';
12 | import { KubDataType } from '../../types';
13 |
14 | type KubType = {
15 | namespaces: string[] | null;
16 | };
17 |
18 | const KubPage = ({ namespaces }: KubType) => {
19 | const dispatch = useDispatch();
20 |
21 | //dark mode toggling
22 | const dark = useSelector((state: State) => state.dark);
23 | let theme: string;
24 | dark ? (theme = 'lightMode') : (theme = 'darkMode');
25 |
26 | //state of the current namespace
27 | const currName = useSelector((state: State) => state.currentNamespace);
28 |
29 | //page represents current namespace being displayed
30 | const [page, setCurrentPage] = useState
112 |
114 | Odin's Eye
113 |
116 |
173 |
117 | {loaded && !firstLoad ? (
118 |
151 |
131 | Total Namespaces
132 |
134 | )}
135 | {nameLength}
133 |
136 |
142 |
143 |
150 |
144 |
149 |
152 |
172 |
153 |
161 |
162 |
170 | {charts}
171 |
142 |
143 |
144 | ));
145 | }
146 |
147 | //Creates line chart array from line chart data object
148 | const lineObject: { [key: string]: any[] } = {
149 | totalCpu: [data.cpu, 'Cpu Usage', 'Percent', 'Total CPU % Usage'],
150 | totalMem: [
151 | data.memory,
152 | 'Mem Usage',
153 | 'Kilobytes',
154 | 'Total Memory Usage (kB)',
155 | ],
156 | totalRec: [
157 | data.reception,
158 | 'Byte Usage',
159 | 'Kilobytes',
160 | 'Netword Received (kB)',
161 | ],
162 | totalTrans: [
163 | data.transmission,
164 | 'Byte Usage',
165 | 'Kilobytes',
166 | 'Network Transmitted (kB)',
167 | ],
168 | restart: [data.restarts, 'Restarts', 'Restarts', 'Pod Restarts'],
169 | };
170 |
171 | const charts: JSX.Element[] = [];
172 |
173 | for (let info in lineObject) {
174 | charts.push(
175 |
176 |
184 | );
185 | }
186 | return (
187 |
188 |
218 | );
219 | };
220 |
221 | export default KubPage;
222 |
--------------------------------------------------------------------------------
/coverage/lcov-report/routes/kubernetes.js.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
189 |
191 | Odin's Eye
190 |
198 |
217 |
199 | {dropdown}
200 |
215 |
201 |
210 |
211 |
214 | Pod Names:
212 | {podsArray} 213 |{charts}
216 |
21 |
66 |
139 |
140 |
141 |
142 |
147 |
148 |
153 |
154 |
155 |
156 |
157 |
--------------------------------------------------------------------------------
/server/controllers/dataObjectBuilder.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 | var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
3 | function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
4 | return new (P || (P = Promise))(function (resolve, reject) {
5 | function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
6 | function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
7 | function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
8 | step((generator = generator.apply(thisArg, _arguments || [])).next());
9 | });
10 | };
11 | var __generator = (this && this.__generator) || function (thisArg, body) {
12 | var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
13 | return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
14 | function verb(n) { return function (v) { return step([n, v]); }; }
15 | function step(op) {
16 | if (f) throw new TypeError("Generator is already executing.");
17 | while (g && (g = 0, op[0] && (_ = 0)), _) try {
18 | if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
19 | if (y = 0, t) op = [op[0] & 2, t.value];
20 | switch (op[0]) {
21 | case 0: case 1: t = op; break;
22 | case 4: _.label++; return { value: op[1], done: false };
23 | case 5: _.label++; y = op[1]; op = [0]; continue;
24 | case 7: op = _.ops.pop(); _.trys.pop(); continue;
25 | default:
26 | if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
27 | if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
28 | if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
29 | if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
30 | if (t[2]) _.ops.pop();
31 | _.trys.pop(); continue;
32 | }
33 | op = body.call(thisArg, _);
34 | } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
35 | if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
36 | }
37 | };
38 | exports.__esModule = true;
39 | var axios_1 = require("axios");
40 | var types_1 = require("../../types");
41 | var dataController = {
42 | dataObjectBuilder: function (res, req, next) { return __awaiter(void 0, void 0, void 0, function () {
43 | var objectData, obj, _a, _b, _c, _i, key, _d, _e, _f, _g, query, response, _h, _j, _k, _l, query, response, data, _m, _o, _p, _q, query, response, err_1;
44 | return __generator(this, function (_r) {
45 | switch (_r.label) {
46 | case 0:
47 | objectData = {};
48 | obj = req.app.locals.queries;
49 | _r.label = 1;
50 | case 1:
51 | _r.trys.push([1, 16, , 17]);
52 | _a = obj;
53 | _b = [];
54 | for (_c in _a)
55 | _b.push(_c);
56 | _i = 0;
57 | _r.label = 2;
58 | case 2:
59 | if (!(_i < _b.length)) return [3 /*break*/, 15];
60 | _c = _b[_i];
61 | if (!(_c in _a)) return [3 /*break*/, 14];
62 | key = _c;
63 | if (!(key === 'linegraph')) return [3 /*break*/, 6];
64 | _d = obj[key];
65 | _e = [];
66 | for (_f in _d)
67 | _e.push(_f);
68 | _g = 0;
69 | _r.label = 3;
70 | case 3:
71 | if (!(_g < _e.length)) return [3 /*break*/, 6];
72 | _f = _e[_g];
73 | if (!(_f in _d)) return [3 /*break*/, 5];
74 | query = _f;
75 | return [4 /*yield*/, axios_1["default"].get("http://localhost:9090/api/v1/query_range?query=".concat(obj[key][query], "&start=").concat(types_1.start, "&end=").concat(types_1.end, "&step=5m"))];
76 | case 4:
77 | response = _r.sent();
78 | if (response.data.data.result.length === 0) {
79 | objectData[query] = [];
80 | }
81 | else {
82 | objectData[query] = [response.data.data.result[0].values];
83 | }
84 | _r.label = 5;
85 | case 5:
86 | _g++;
87 | return [3 /*break*/, 3];
88 | case 6:
89 | if (!(key === 'donutint')) return [3 /*break*/, 10];
90 | _h = obj[key];
91 | _j = [];
92 | for (_k in _h)
93 | _j.push(_k);
94 | _l = 0;
95 | _r.label = 7;
96 | case 7:
97 | if (!(_l < _j.length)) return [3 /*break*/, 10];
98 | _k = _j[_l];
99 | if (!(_k in _h)) return [3 /*break*/, 9];
100 | query = _k;
101 | return [4 /*yield*/, axios_1["default"].get("http://localhost:9090/api/v1/query_range?query=".concat(obj[key][query], "&start=").concat(types_1.start, "&end=").concat(types_1.end, "&step=5m"))];
102 | case 8:
103 | response = _r.sent();
104 | data = parseInt(response.data.data.result[0].values[0][1]);
105 | objectData[query] = [data];
106 | _r.label = 9;
107 | case 9:
108 | _l++;
109 | return [3 /*break*/, 7];
110 | case 10:
111 | if (!(key === 'cpubarchart')) return [3 /*break*/, 14];
112 | _m = obj[key];
113 | _o = [];
114 | for (_p in _m)
115 | _o.push(_p);
116 | _q = 0;
117 | _r.label = 11;
118 | case 11:
119 | if (!(_q < _o.length)) return [3 /*break*/, 14];
120 | _p = _o[_q];
121 | if (!(_p in _m)) return [3 /*break*/, 13];
122 | query = _p;
123 | return [4 /*yield*/, axios_1["default"].get("http://localhost:9090/api/v1/query_range?query=".concat(obj[key][query], "&start=").concat(types_1.start, "&end=").concat(types_1.end, "&step=5m"))];
124 | case 12:
125 | response = _r.sent();
126 | objectData[query] = [response.data.data.result[0].values[1][1]];
127 | _r.label = 13;
128 | case 13:
129 | _q++;
130 | return [3 /*break*/, 11];
131 | case 14:
132 | _i++;
133 | return [3 /*break*/, 2];
134 | case 15:
135 | req.app.locals.data = objectData;
136 | return [2 /*return*/, next()];
137 | case 16:
138 | err_1 = _r.sent();
139 | return [2 /*return*/, next({
140 | log: "Error in dataController.dataObjectBuilder: ".concat(err_1),
141 | status: 500,
142 | message: 'Error occured while creating data object'
143 | })];
144 | case 17: return [2 /*return*/];
145 | }
146 | });
147 | }); }
148 | };
149 | exports["default"] = dataController;
150 |
--------------------------------------------------------------------------------
/server/server.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 | var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
3 | function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
4 | return new (P || (P = Promise))(function (resolve, reject) {
5 | function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
6 | function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
7 | function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
8 | step((generator = generator.apply(thisArg, _arguments || [])).next());
9 | });
10 | };
11 | var __generator = (this && this.__generator) || function (thisArg, body) {
12 | var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
13 | return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
14 | function verb(n) { return function (v) { return step([n, v]); }; }
15 | function step(op) {
16 | if (f) throw new TypeError("Generator is already executing.");
17 | while (g && (g = 0, op[0] && (_ = 0)), _) try {
18 | if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
19 | if (y = 0, t) op = [op[0] & 2, t.value];
20 | switch (op[0]) {
21 | case 0: case 1: t = op; break;
22 | case 4: _.label++; return { value: op[1], done: false };
23 | case 5: _.label++; y = op[1]; op = [0]; continue;
24 | case 7: op = _.ops.pop(); _.trys.pop(); continue;
25 | default:
26 | if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
27 | if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
28 | if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
29 | if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
30 | if (t[2]) _.ops.pop();
31 | _.trys.pop(); continue;
32 | }
33 | op = body.call(thisArg, _);
34 | } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
35 | if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
36 | }
37 | };
38 | exports.__esModule = true;
39 | var path = require('path');
40 | var express = require('express');
41 | var cookieParser = require('cookie-parser');
42 | var dashboard_1 = require("./routes/dashboard");
43 | var kubernetes_1 = require("./routes/kubernetes");
44 | var mongo_1 = require("./routes/mongo");
45 | var axios_1 = require("axios");
46 | var cors = require('cors');
47 | var app = express();
48 | var PORT = 3000;
49 | app.use(cookieParser());
50 | app.use(cors());
51 | app.use(express.json());
52 | app.use(express.urlencoded({ extended: true }));
53 | app.use(function (req, res, next) {
54 | var cookie = req.cookies.cookieName;
55 | if (cookie == undefined) {
56 | var randomNum = Math.random().toString();
57 | randomNum = randomNum.substring(2, randomNum.length);
58 | res.cookie('cookieName', randomNum, { maxAge: 90000, httpOnly: true });
59 | }
60 | return next();
61 | });
62 | if (process.env.NODE_ENV) {
63 | app.use('/', express.static(path.join(__dirname, '../dist')));
64 | }
65 | app.use('/kubernetes', function (req, res) {
66 | express.static(path.join(__dirname, '../client/index.html'));
67 | });
68 | app.use('/mongo', function (req, res) {
69 | express.static(path.join(__dirname, '../client/index.html'));
70 | });
71 | app.use('/api/dashboard', dashboard_1["default"]);
72 | app.use('/api/kubernetesMetrics', kubernetes_1["default"]);
73 | app.use('/api/mongodb', mongo_1["default"]);
74 | app.get('/dashboard', function (req, res) {
75 | return res.status(200).send('hi');
76 | });
77 | //network received/transmitted
78 | app.use('/live/received', function (req, res) { return __awaiter(void 0, void 0, void 0, function () {
79 | var headers, timer;
80 | return __generator(this, function (_a) {
81 | headers = {
82 | 'Content-Type': 'text/event-stream',
83 | Connection: 'keep-alive',
84 | 'Cache-Control': 'no-cache'
85 | };
86 | res.writeHead(200, headers);
87 | timer = setInterval(function () { return __awaiter(void 0, void 0, void 0, function () {
88 | var start, end, response, data, newData;
89 | return __generator(this, function (_a) {
90 | switch (_a.label) {
91 | case 0:
92 | start = new Date(Date.now() - 10000).toISOString();
93 | end = new Date(Date.now() - 5000).toISOString();
94 | return [4 /*yield*/, axios_1["default"].get("http://localhost:9090/api/v1/query_range?query=sum(rate(node_network_receive_bytes_total[10m]))&start=".concat(start, "&end=").concat(end, "&step=10m"))];
95 | case 1:
96 | response = _a.sent();
97 | data = response.data.data.result[0].values[0];
98 | newData = "data: ".concat(JSON.stringify(data), "\n\n");
99 | res.write(newData);
100 | return [2 /*return*/];
101 | }
102 | });
103 | }); }, 1500);
104 | res.on('close', function () {
105 | res.end();
106 | clearInterval(timer);
107 | console.log('Connection closed');
108 | });
109 | return [2 /*return*/];
110 | });
111 | }); });
112 | app.use('/live/transmit', function (req, res) { return __awaiter(void 0, void 0, void 0, function () {
113 | var headers, timer;
114 | return __generator(this, function (_a) {
115 | headers = {
116 | 'Content-Type': 'text/event-stream',
117 | Connection: 'keep-alive',
118 | 'Cache-Control': 'no-cache'
119 | };
120 | res.writeHead(200, headers);
121 | timer = setInterval(function () { return __awaiter(void 0, void 0, void 0, function () {
122 | var start, end, response, data, newData;
123 | return __generator(this, function (_a) {
124 | switch (_a.label) {
125 | case 0:
126 | start = new Date(Date.now() - 10000).toISOString();
127 | end = new Date(Date.now() - 5000).toISOString();
128 | return [4 /*yield*/, axios_1["default"].get("http://localhost:9090/api/v1/query_range?query=sum(rate(node_network_transmit_bytes_total[10m]))&start=".concat(start, "&end=").concat(end, "&step=5m"))];
129 | case 1:
130 | response = _a.sent();
131 | data = response.data.data.result[0].values[0];
132 | newData = "data: ".concat(JSON.stringify(data), "\n\n");
133 | res.write(newData);
134 | return [2 /*return*/];
135 | }
136 | });
137 | }); }, 1500);
138 | res.on('close', function () {
139 | res.end();
140 | clearInterval(timer);
141 | console.log('Connection closed');
142 | });
143 | return [2 /*return*/];
144 | });
145 | }); });
146 | //redirect to page 404 when endpoint does not exist
147 | app.use('*', function (req, res) {
148 | return res.status(404).send('404 Page Not Found');
149 | });
150 | //global error handling
151 | app.use(function (err, req, res, next) {
152 | var defaultErr = {
153 | log: 'Express error handler caught unknown middleware error',
154 | status: 500,
155 | message: { err: 'An error occurred' }
156 | };
157 | var errorObj = Object.assign({}, defaultErr, err);
158 | console.log(errorObj.log);
159 | return res.status(errorObj.status).json(errorObj.message);
160 | });
161 | //start app on port
162 | app.listen(PORT, function () {
163 | console.log("Server listening on port: ".concat(PORT, "..."));
164 | });
165 | setTimeout;
166 | module.exports = app;
167 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | /* Visit https://aka.ms/tsconfig to read more about this file */
4 |
5 | /* Projects */
6 | // "incremental": true, /* Save .tsbuildinfo files to allow for incremental compilation of projects. */
7 | // "composite": true, /* Enable constraints that allow a TypeScript project to be used with project references. */
8 | // "tsBuildInfoFile": "./.tsbuildinfo", /* Specify the path to .tsbuildinfo incremental compilation file. */
9 | // "disableSourceOfProjectReferenceRedirect": true, /* Disable preferring source files instead of declaration files when referencing composite projects. */
10 | // "disableSolutionSearching": true, /* Opt a project out of multi-project reference checking when editing. */
11 | // "disableReferencedProjectLoad": true, /* Reduce the number of projects loaded automatically by TypeScript. */
12 |
13 | /* Language and Environment */
14 | "target": "es2016" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
15 | // "lib": [], /* Specify a set of bundled library declaration files that describe the target runtime environment. */
16 | "jsx": "react" /* Specify what JSX code is generated. */,
17 | // "experimentalDecorators": true, /* Enable experimental support for TC39 stage 2 draft decorators. */
18 | // "emitDecoratorMetadata": true, /* Emit design-type metadata for decorated declarations in source files. */
19 | // "jsxFactory": "", /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */
20 | // "jsxFragmentFactory": "", /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
21 | // "jsxImportSource": "", /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */
22 | // "reactNamespace": "", /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */
23 | // "noLib": true, /* Disable including any library files, including the default lib.d.ts. */
24 | // "useDefineForClassFields": true, /* Emit ECMAScript-standard-compliant class fields. */
25 | // "moduleDetection": "auto", /* Control what method is used to detect module-format JS files. */
26 |
27 | /* Modules */
28 | "module": "commonjs" /* Specify what module code is generated. */,
29 | // "rootDir": "./dist/" /* Specify the root folder within your source files. */,
30 | "moduleResolution": "node" /* Specify how TypeScript looks up a file from a given module specifier. */,
31 | // "baseUrl": "./", /* Specify the base directory to resolve non-relative module names. */
32 | // "paths": {}, /* Specify a set of entries that re-map imports to additional lookup locations. */
33 | // "rootDirs": [], /* Allow multiple folders to be treated as one when resolving modules. */
34 | // "typeRoots": [], /* Specify multiple folders that act like './node_modules/@types'. */
35 | // "types": [], /* Specify type package names to be included without being referenced in a source file. */
36 | // "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */
37 | // "moduleSuffixes": [], /* List of file name suffixes to search when resolving a module. */
38 | // "resolveJsonModule": true, /* Enable importing .json files. */
39 | // "noResolve": true, /* Disallow 'import's, 'require's or '
22 |
64 |
65 | All files / routes kubernetes.js
23 |
24 |
25 |
54 |
26 | 70.58%
27 | Statements
28 | 12/17
29 |
30 |
31 |
32 |
33 | 71.42%
34 | Branches
35 | 5/7
36 |
37 |
38 |
39 |
40 | 16.66%
41 | Functions
42 | 1/6
43 |
44 |
45 |
46 |
47 | 70.58%
48 | Lines
49 | 12/17
50 |
51 |
52 |
53 | 55 | Press n or j to go to the next uncovered block, b, p or k for the previous block. 56 |
57 | 58 |
59 | Filter:
60 |
61 |
62 |
63 | | 1 67 | 2 68 | 3 69 | 4 70 | 5 71 | 6 72 | 7 73 | 8 74 | 9 75 | 10 76 | 11 77 | 12 78 | 13 79 | 14 80 | 15 81 | 16 82 | 17 83 | 18 84 | 19 85 | 20 86 | 21 87 | 22 88 | 23 89 | 24 90 | 25 | 91 | 1x 92 | 1x 93 | 94 | 1x 95 | 1x 96 | 1x 97 | 1x 98 | 1x 99 | 100 | 101 | 1x 102 | 103 | 104 | 1x 105 | 106 | 107 | 1x 108 | 109 | 110 | 1x 111 | 112 | 113 | 1x 114 | | "use strict"; 115 | var __importDefault = (this && this.__importDefault) || function (mod) { 116 | return (mod && mod.__esModule) ? mod : { "default": mod }; 117 | }; 118 | Object.defineProperty(exports, "__esModule", { value: true }); 119 | const express = require('express'); 120 | const kubernetesController_1 = __importDefault(require("../controllers/kubernetesController")); 121 | const kubernetesRouter = express.Router(); 122 | kubernetesRouter.get('/totalMem', kubernetesController_1.default.totalMem, (req, res) => { 123 | return res.status(200).send('hi'); 124 | }); 125 | kubernetesRouter.get('/totalCpu', kubernetesController_1.default.totalCpu, (req, res) => { 126 | return res.status(200).json(res.locals.cpu.data); 127 | }); 128 | kubernetesRouter.get('/totalTransmit', kubernetesController_1.default.totalTransmit, (req, res) => { 129 | return res.status(200).send('hi'); 130 | }); 131 | kubernetesRouter.get('/totalReceive', kubernetesController_1.default.totalReceive, (req, res) => { 132 | return res.status(200).send('hi'); 133 | }); 134 | kubernetesRouter.get('/totalPods', kubernetesController_1.default.totalPods, (req, res) => { 135 | return res.status(200).send('hi'); 136 | }); 137 | exports.default = kubernetesRouter; 138 | |