/__mocks__/fileMock.js"
23 | }
24 | },
25 | "author": "",
26 | "license": "ISC",
27 | "dependencies": {
28 | "@apollo/client": "^3.4.10",
29 | "apollo-datasource-rest": "^3.2.0",
30 | "apollo-server-core": "^3.3.0",
31 | "apollo-server-express": "^3.3.0",
32 | "axios": "^0.21.1",
33 | "camelcase-keys": "^7.0.0",
34 | "express": "^4.17.1",
35 | "graphiql": "^1.4.2",
36 | "graphql": "^15.5.2",
37 | "graphql-tag": "^2.12.5",
38 | "jest-fetch-mock": "^3.0.3",
39 | "mdbreact": "^5.1.0",
40 | "node-fetch": "^2.6.1",
41 | "pg-promise": "^10.11.0",
42 | "prop-types": "^15.7.2",
43 | "react": "^17.0.2",
44 | "react-dom": "^17.0.2",
45 | "react-redux": "^7.2.4",
46 | "react-router": "^5.2.0",
47 | "react-router-dom": "^5.2.0",
48 | "react-table": "^7.7.0",
49 | "recharts": "^2.1.0",
50 | "redux": "^4.1.0",
51 | "redux-devtools-extension": "^2.13.9",
52 | "redux-thunk": "^2.3.0"
53 | },
54 | "devDependencies": {
55 | "@babel/core": "^7.14.8",
56 | "@babel/plugin-proposal-class-properties": "^7.14.5",
57 | "@babel/plugin-transform-async-to-generator": "^7.14.5",
58 | "@babel/plugin-transform-runtime": "^7.15.0",
59 | "@babel/preset-env": "^7.14.8",
60 | "@babel/preset-react": "^7.14.5",
61 | "@testing-library/dom": "^8.2.0",
62 | "@testing-library/jest-dom": "^5.14.1",
63 | "@testing-library/react": "^12.0.0",
64 | "@testing-library/user-event": "^13.2.1",
65 | "babel-core": "^6.26.3",
66 | "babel-loader": "^8.2.2",
67 | "babel-preset-env": "^1.7.0",
68 | "css-loader": "^6.2.0",
69 | "file-loader": "^6.2.0",
70 | "jest": "^27.1.1",
71 | "msw": "^0.35.0",
72 | "nodemon": "^2.0.12",
73 | "react-hot-loader": "^4.13.0",
74 | "sockjs": "^0.3.21",
75 | "style-loader": "^3.2.1",
76 | "supertest": "^6.1.6",
77 | "webpack": "^5.47.0",
78 | "webpack-cli": "^4.7.2",
79 | "webpack-dev-server": "^3.11.2"
80 | }
81 | }
82 |
--------------------------------------------------------------------------------
/dashboard/client/components/Memory.jsx:
--------------------------------------------------------------------------------
1 | /*
2 | * *****************************************************************************
3 | * @description Component that renders Node memory usage
4 | * *****************************************************************************
5 | */
6 |
7 |
8 | import React, { useState, useEffect } from 'react';
9 | import {
10 | BarChart,
11 | Bar,
12 | Cell,
13 | XAxis,
14 | YAxis,
15 | CartesianGrid,
16 | Tooltip,
17 | Legend,
18 | ResponsiveContainer,
19 | } from 'recharts';
20 | import MemoryTooltip from './MemoryTooltip';
21 | import colors from '../assets/colors';
22 |
23 |
24 | const Memory = ({ nodeMemory, nodeNums }) => {
25 | const resultArr = [];
26 | const [result, setResult] = useState([]);
27 | const [render, setRender] = useState(false);
28 | if (nodeMemory.data) {
29 | const nodes = nodeMemory.data.result;
30 | nodes.forEach((node, i) => {
31 | // match length of instance to length of ip addresses in reference node list
32 | const len = nodeNums[0].length;
33 | const internal_ip = node.metric.instance.slice(0, len);
34 | // find position of node in reference list
35 | const position = nodeNums.findIndex((ip) => ip === internal_ip);
36 | const dataPoint = {};
37 |
38 |
39 | // builds a datapoint that has the correct node # & the % memory used data
40 | dataPoint.node = 'node' + (position + 1);
41 | dataPoint.ip = internal_ip;
42 | dataPoint.percentageMemoryUsed = (parseFloat(node.value[1])*100).toFixed(2);
43 | resultArr[position] = dataPoint;
44 | });
45 | //prevents recharts.js from causing infinite loop of re-renderes
46 | if (render === false) {
47 | setResult(resultArr);
48 | setRender(true);
49 | }
50 | }
51 |
52 | return (
53 |
54 |
Memory Usage
55 |
56 |
67 | {
70 | return `${tick}%`;
71 | }}
72 | />
73 |
74 |
75 | {resultArr.map((entry, index) => (
76 | |
77 | ))}
78 |
79 |
80 |
81 |
55 |
Pod Memory Usage
56 |
57 |
68 |
72 |
74 |
75 |
70 |
CPU Usage
71 |
72 |
83 | {
90 | return `${tick}%`;
91 | }}
92 | />
93 |
94 |
100 |
101 | );
102 | };
103 |
104 | export default CPU;
105 |
--------------------------------------------------------------------------------
/dashboard/client/components/PodCPU.jsx:
--------------------------------------------------------------------------------
1 | /*
2 | * *****************************************************************************
3 | * @description Component that renders Pod CPU usage chart
4 | * *****************************************************************************
5 | */
6 |
7 | import React, { useState } from 'react';
8 | import {
9 | LineChart,
10 | Line,
11 | XAxis,
12 | YAxis,
13 | CartesianGrid,
14 | Tooltip,
15 | Legend,
16 | ResponsiveContainer,
17 | } from 'recharts';
18 | import PodCpuToolTip from './PodCpuToolTip';
19 | import colors from '../assets/colors';
20 |
21 | const PodCPU = ({ clickedArray, timeWindow, step }) => {
22 | const [results, setResults] = useState([]);
23 | const [render, setRender] = useState(false);
24 | const [clickedLength, setClickedLength] = useState(0);
25 | const [timeWindowChange, setTimeWindowChange] = useState(timeWindow);
26 | const [stepChange, setStepChange] = useState(step);
27 | const lines = [];
28 | const resultArray = [];
29 |
30 | // clickedArray is the user selected list of pods, passed down from Pod Container
31 |
32 | if (clickedLength !== clickedArray.length) { // use clickedLength to trigger re-render when new clicked array is received
33 | if (clickedArray.length === 0) setClickedLength(0);
34 | setRender(false);
35 | }
36 |
37 | if (clickedArray.length > 0) {
38 | // create datapoint objects for each point in time series with values for first pod in clicked array
39 | clickedArray[0].cpuValues.forEach((x, i) => {
40 | const dataPoint = {};
41 | let time = new Date(x[0] * 1000);
42 | dataPoint.time = time.toLocaleString();
43 |
44 | // add values for other pods
45 | for (let j = 0; j < clickedArray.length; j++) {
46 | dataPoint[clickedArray[j].name] = +(
47 | parseFloat(clickedArray[j].cpuValues[i][1]) * 100
48 | ).toFixed(2);
49 | }
50 | resultArray.push(dataPoint); // results array contains datapoint objects
51 | });
52 |
53 | if (render === false) {
54 | setResults(resultArray);
55 | setClickedLength(clickedArray.length);
56 | setRender(true);
57 | }
58 |
59 | for (let i = 0; i < clickedArray.length; i++) {
60 | lines.push(
61 |
74 |
CPU Usage
75 |
76 |
86 | {
95 | return `${tick}%`;
96 | }}
97 | />
98 |
102 |
103 | );
104 | };
105 |
106 | export default PodCPU;
107 |
--------------------------------------------------------------------------------
/dashboard/client/components/PodMemorySeriesComponent.jsx:
--------------------------------------------------------------------------------
1 | /*
2 | * *****************************************************************************
3 | * @description Linechart component to render time-series data of memory usage of selected pods
4 | * *****************************************************************************
5 | */
6 |
7 | import React, { useState } from 'react';
8 | import {
9 | LineChart,
10 | Line,
11 | XAxis,
12 | YAxis,
13 | CartesianGrid,
14 | Tooltip,
15 | Legend,
16 | ResponsiveContainer,
17 | } from 'recharts';
18 | import PodMemorySeriesTooltip from './PodMemorySeriesTooltip';
19 | import colors from '../assets/colors';
20 |
21 | const PodMemorySeriesComponent = ({ clickedArray }) => {
22 | const [results, setResults] = useState([]); // data to pass to chart component
23 | const [render, setRender] = useState(false); // render to track recharts animation without constant re-rendering
24 | const [clickedLength, setClickedLength] = useState(0);
25 | const lines = [];
26 | const resultArray = [];
27 |
28 | if (clickedLength !== clickedArray.length) { // if the length of the clickedarray changes allow re-render with new clickedarray
29 | if (clickedArray.length === 0) setClickedLength(0);
30 | setRender(false);
31 | }
32 |
33 |
34 |
35 | if (clickedArray.length > 0) {
36 | clickedArray[0].memorySeriesValues.forEach((x, i) => {
37 | const dataPoint = {}; // create datapoint object for each time/memory value of the first pod in clickedarray
38 | let time = new Date(x[0] * 1000);
39 | dataPoint.time = time.toLocaleString();
40 |
41 | for (let j = 0; j < clickedArray.length; j++) { // add values for other pods in the clickedarray
42 | dataPoint[clickedArray[j].name] = +(
43 | parseFloat(clickedArray[j].memorySeriesValues[i][1]) / 1000000
44 | ).toFixed(4);
45 | }
46 | resultArray.push(dataPoint); // push each datapoint to the resultarray
47 | });
48 |
49 | if (render === false) {
50 | setResults(resultArray); // set results with resultarray
51 | setClickedLength(clickedArray.length); // update clickedlength state to current clickedarray length
52 | setRender(true);
53 | }
54 |
55 | for (let i = 0; i < clickedArray.length; i++) {
56 | lines.push(
57 |
70 |
Memory Usage
71 |
72 |
82 | {
91 | return `${tick}MB`;
92 | }}
93 | />
94 |
98 |
99 | );
100 | };
101 |
102 | export default PodMemorySeriesComponent;
103 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Periscope
2 |
3 |
4 |
6 |
7 | Periscope Dashboard
8 |
9 |
10 |
11 | []()
12 |
13 |
14 |
15 | ---
16 |
17 | Periscope is the dashboard solution for monitoring and tracking your Kubernetes pods & nodes.
18 | Visit us at getperiscopedashboard.com
22 |
23 |
24 |
25 | ## 📝 Table of Contents
26 | - [About](#about)
27 | - [Built Using](#built_using)
28 | - [Demo](#demo)
29 | - [Getting Started](#getting_started)
30 | - [Prerequisites](#prerequisites)
31 | - [Authors](#authors)
32 | - [Coming Soon](#coming_soon)
33 |
34 | ## 🧐 About Periscope is the dashboard solution for monitoring and tracking your Kubernetes pods & nodes.
36 |
37 | Periscope integrates with a Prometheus server and then displays the core metrics that any engineer needs to understand the state and health of their cluster.
38 | Engineers can see CPU, disk usage and memory usage across their cluster.
39 |
40 | The dashboard makes it easy to see troubling trends thereby providing developers with the information needed to make changes.
41 |
42 | ### ⛏️ Built Using
125 |
126 |
128 |
129 |
131 |
132 |
134 |
135 |
137 |
96 |
Disk Usage
97 |
109 |
110 | {
117 | return `${tick}%`;
118 | }}
119 | />
120 |
121 |
127 |
128 | );
129 | };
130 |
131 | export default DiskUsage;
132 |
--------------------------------------------------------------------------------
/dashboard/client/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
3 | Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
4 | background-color: #121212;
5 | color: gray;
6 | margin: 0px;
7 | }
8 |
9 | button {
10 | background-color: #0e4f8c;
11 | border: none;
12 | border-radius: 5px;
13 | color: whitesmoke;
14 | padding: 5px 10px;
15 | margin: 5px;
16 | font-weight: bold;
17 | }
18 |
19 | h2 {
20 | text-align: center;
21 | }
22 |
23 | .landing {
24 | display: flex;
25 | flex-direction: column;
26 | justify-content: center;
27 | align-items: center;
28 | height: 100vh;
29 | }
30 |
31 | .header {
32 | display: flex;
33 | justify-content: space-between;
34 | align-items: center;
35 | height: 30px;
36 | margin: 0px;
37 | padding: 10px;
38 | }
39 |
40 | .main-container {
41 | display: flex;
42 | justify-content: center;
43 | flex-wrap: wrap;
44 | }
45 |
46 | .components {
47 | border-color: #1f1b24;
48 | margin: 3px;
49 | border-radius: 10px;
50 | background-color: #1f1b24;
51 | text-align: center;
52 | }
53 |
54 | .dropdowns {
55 | display: flex;
56 | justify-content: flex-end;
57 | margin-bottom: 5px;
58 | margin-right: 30px;
59 | }
60 |
61 | .dropdowns button {
62 | background-color: #ff8505;
63 | border-radius: 0px;
64 | margin-bottom: 0px;
65 | }
66 |
67 | .dropdown-menu {
68 | /* border-radius: 0px 0px 5px 5px; */
69 | background-color: gray;
70 | opacity: 0.9;
71 | position: absolute;
72 | z-index: 2;
73 | margin: 0px 5px 5px;
74 | }
75 |
76 | .dropdown-item {
77 | font-weight: bold;
78 | text-decoration: none;
79 | color: black;
80 | }
81 |
82 | .dropdown-div {
83 | padding: 5px;
84 | color: black;
85 | font-weight: bold;
86 | }
87 |
88 | .dropdown-div:hover {
89 | background-color: whitesmoke;
90 | }
91 | .dropdown-div:active {
92 | color: #ff8505;
93 | }
94 |
95 | #timeMenu {
96 | width: 95.33px;
97 | }
98 |
99 | #stepMenu {
100 | width: 48.89px;
101 | }
102 |
103 | #podInfo {
104 | display: flex;
105 | flex-direction: column;
106 | justify-content: center;
107 | }
108 |
109 | .pod-info-rows {
110 | display: flex;
111 | flex-direction: column;
112 | justify-content: center;
113 | width: 750px;
114 | }
115 |
116 | .pod-container {
117 | display: flex;
118 | justify-content: center;
119 | flex-wrap: wrap;
120 | margin-top: 40px;
121 | }
122 |
123 | .chart-container {
124 | padding-bottom: 20px;
125 | }
126 | .table {
127 | display: flex;
128 | justify-content: center;
129 | padding-bottom: 20px;
130 | }
131 |
132 | td {
133 | margin: 0;
134 | padding-bottom: 10px;
135 | padding-left: 4px;
136 | padding-right: 4px;
137 | padding-top: 10px;
138 | /* border-bottom: 0.5px solid rgb(100, 100, 117, 0.5); */
139 | }
140 |
141 | tr:nth-of-type(odd) {
142 | background-color: #25212c;
143 | }
144 | tr > th {
145 | background-color: #1f1b24;
146 | padding-bottom: 10px;
147 | }
148 | .table-row {
149 | cursor: pointer;
150 | }
151 | .table-row:hover {
152 | color: #0e4f8c;
153 | }
154 |
155 | .column1 {
156 | width: 300px;
157 | text-overflow: scroll;
158 | overflow: hidden;
159 | }
160 | .column3 {
161 | width: 300px;
162 | text-overflow: scroll;
163 | overflow: hidden;
164 | }
165 |
166 | .table {
167 | margin: 0px 15px;
168 | }
169 | .pod-table td {
170 | padding: 5px;
171 | font-size: 12px;
172 | }
173 | .pod-table th {
174 | font-size: 12px;
175 | padding: 5px;
176 | }
177 |
178 | .recharts-wrapper {
179 | margin: 0 auto;
180 | }
181 |
182 | #CPU {
183 | width: 750px;
184 | }
185 |
186 | #disk-usage {
187 | width: 750px;
188 | }
189 |
190 | #clusterInfo {
191 | width: 500px;
192 | }
193 | #memory {
194 | width: 500px;
195 | }
196 | #logo {
197 | width: 75px;
198 | margin-right: -35px;
199 | margin-left: -5px;
200 | }
201 |
202 | #podMemory {
203 | padding-right: 25px;
204 | }
205 | #podCpu {
206 | padding-right: 25px;
207 | }
208 |
209 | #loading {
210 | display: block;
211 | margin-top: 100px;
212 | margin-left: auto;
213 | margin-right: auto;
214 | width: 50%;
215 | }
216 |
217 | @media screen and (max-width: 1280px) {
218 | .main-container {
219 | flex-direction: column;
220 | align-items: center;
221 | }
222 | #clusterInfo {
223 | width: 750px;
224 | order: 2;
225 | }
226 | #memory {
227 | width: 750px;
228 | order: 1;
229 | }
230 | #podInfo {
231 | order: 0;
232 | }
233 | #podCpu {
234 | width: 750px;
235 | order: 1;
236 | }
237 | #podMemory {
238 | width: 750px;
239 | order: 2;
240 | }
241 | #podMemoryBars {
242 | order: 3;
243 | }
244 |
245 |
246 |
247 | }
248 |
--------------------------------------------------------------------------------
/dashboard/client/components/PodInfoRows.jsx:
--------------------------------------------------------------------------------
1 | /*
2 | * *****************************************************************************
3 | * @description Information and selection of individual pods to be displayed in PodInfoTable;
4 | functions to select time and step range for time-series queries
5 | * *****************************************************************************
6 | */
7 |
8 |
9 | import React, { useState } from 'react';
10 | import PodInfoTableSetup from './PodInfoTableSetup.jsx';
11 |
12 | const PodInfoRows = ({
13 | clickedArray,
14 | setClickedArray,
15 | podNums,
16 | setStep,
17 | setTimeWindow,
18 | }) => {
19 | const [isTimeOpen, setIsTimeOpen] = useState(false); // state for time range dropdown
20 | const [isStepOpen, setIsStepOpen] = useState(false); // state for step range dropdown
21 |
22 | // on click function to select pods to add to clickedArray in podContainer
23 | const newClick = (arg) => {
24 | let found = false;
25 | const newClickedArray = clickedArray.slice(); // copy of current clickedArray to update
26 | for (let i = 0; i < newClickedArray.length; i++) {
27 | if (newClickedArray[i].podName === arg) { // if selected pod is already in clickedArray, remove it
28 | newClickedArray.splice(i, 1);
29 | setClickedArray(newClickedArray);
30 | found = true;
31 | break;
32 | }
33 | }
34 | if (!found) { // if selected pod is not in clickedArray, add it
35 | newClickedArray.push(podNums[arg]);
36 | setClickedArray(newClickedArray);
37 | }
38 | };
39 |
40 | // changes all colors of pods back to gray (unselects) once the time-range or time-step is changed
41 | function changeColorsBack() {
42 | const rows = document.querySelectorAll('.table-row');
43 | for (const row of rows) {
44 | if (row.style.color === 'orange') row.style.color = "gray";
45 | }
46 | }
47 |
48 | //time range variables for time range selection
49 | const oneHour = 3600;
50 | const sixHours = 21600;
51 | const twelveHours = 43200;
52 | const oneDay = 86400;
53 | const threeDays = 259200;
54 |
55 | const times = [oneHour, sixHours, twelveHours, oneDay, threeDays];
56 | const timeStrs = ['1hr', '6hrs', '12hrs', '1day', '3days'];
57 | const timeButtons = [];
58 | times.forEach((time, i) => {
59 | //create dropwdown items to select time range
60 | timeButtons.push(
61 | {
65 | setTimeWindow(time);
66 | setClickedArray([]);
67 | setIsTimeOpen(false);
68 | changeColorsBack();
69 | }}>
70 | {timeStrs[i]}
71 |
72 | );
73 | });
74 |
75 | const steps = ['5m', '15m', '30m', '1h']; // step range variables in array
76 | const stepButtons = [];
77 | steps.forEach((step, i) => {
78 | // create dropdown items to select step range
79 | stepButtons.push(
80 | {
84 | setStep(step);
85 | setClickedArray([]);
86 | setIsStepOpen(false);
87 | changeColorsBack();
88 | }}>
89 | {step}
90 |
91 | );
92 | });
93 |
94 | // functions to toggle time and step dropdowns
95 | const toggleStep = () => {
96 | if (isTimeOpen) setIsTimeOpen(false);
97 | isStepOpen ? setIsStepOpen(false) : setIsStepOpen(true);
98 | };
99 |
100 | const toggleTime = () => {
101 | if (isStepOpen) setIsStepOpen(false);
102 | isTimeOpen ? setIsTimeOpen(false) : setIsTimeOpen(true);
103 | };
104 |
105 |
106 |
107 | return (
108 |
109 |
110 |
111 | toggleTime()}>
112 | Time Range
113 |
114 | {isTimeOpen && (
115 |
118 | )}
119 |
120 |
121 | toggleStep()}>
122 | Step
123 |
124 | {isStepOpen && (
125 |
128 | )}
129 |
130 |
131 | {
134 | setClickedArray([]);
135 | changeColorsBack();
136 | }}>
137 | Unselect All
138 |
139 |
140 |
141 |
148 |
133 |
136 |
139 |
142 |
145 |
5 | 
61 | 
62 | 
63 |
64 |
65 | ## 🏁 Getting Started
66 | Start by forking and cloning this repo.
67 |
68 | ### Prerequisites
69 | - Install the [kubectl](https://kubernetes.io/docs/tasks/tools) command line tools.
70 | - Host your Kubernetes cluster on a service like [GKE](https://cloud.google.com/kubernetes-engine) or [EKS](https://aws.amazon.com/eks/) or use [MiniKube](https://minikube.sigs.k8s.io/docs/start).
71 | - Install [the Prometheus server](https://prometheus-operator.dev/docs/prologue/quick-start/) in order to generate your metrics
72 | - Save your Prometheus server on the default namespace
73 | - Then build and run the dashboard!
74 |
75 | ## ✍️ Authors
76 | - Adda Kridler: [Github](https://github.com/addakridler) | [LinkedIn](https://www.linkedin.com/in/adda-kridler-23028887/)
77 | - Junie Hou: [Github](https://github.com/selilac) | [LinkedIn](https://www.linkedin.com/in/juniehou/)
78 | - Ronke Oyekunle: [Github](https://github.com/ronke11) | [LinkedIn](https://www.linkedin.com/in/royekunle)
79 | - Shawn Convery: [Github](https://github.com/smconvery) | [LinkedIn](https://www.linkedin.com/in/shawn-convery-459b79167/)
80 |
81 | ## 🎉 Coming Soon!
82 | - Set email / slack alerts for major changes in metrics
83 | - Ability to enter your own PromQL query
84 | - Log History
85 |
--------------------------------------------------------------------------------
/dashboard/client/container/NodeContainer.jsx:
--------------------------------------------------------------------------------
1 | /*
2 | * *****************************************************************************
3 | * @description Node dashboard page container
4 | * *****************************************************************************
5 | */
6 |
7 | import React, { useState, useEffect } from 'react';
8 | import Memory from '../components/Memory.jsx';
9 | import CPU from '../components/CPU.jsx';
10 | import ClusterInfo from '../components/ClusterInfo.jsx';
11 | import DiskUsage from '../components/DiskUsage.jsx';
12 | import loading from '../assets/loading.gif';
13 |
14 | const mainContainerGraphQL = () => {
15 | const [cpu, setCPU] = useState({});
16 | const [totalDisk, setTotalDisk] = useState({});
17 | const [freeDisk, setFreeDisk] = useState({});
18 | const [nodeMemory, setNodeMemory] = useState({});
19 | const [clusterInfo, setClusterInfo] = useState({});
20 | const [isLoading, setIsLoading] = useState(true);
21 | const [nodeNums, setNodeNums] = useState([]);
22 | const [called, setCalled] = useState(false);
23 |
24 | const sixHours = 21600;
25 | const endTime = Math.floor(Date.now() / 1000);;
26 | const startTime = endTime - sixHours;
27 |
28 |
29 | const step = '5m';
30 |
31 | //graphQL query
32 | const query = `{
33 | getFreeDiskSpace(startTime: "${startTime}", endTime: "${endTime}", step: "${step}") {
34 | data {
35 | result {
36 | metric {
37 | instance
38 | }
39 | values
40 | }
41 | }
42 | }
43 | getNodeCpu(startTime: "${startTime}", endTime: "${endTime}", step: "${step}") {
44 | data {
45 | result {
46 | metric {
47 | instance
48 | }
49 | values
50 | }
51 | }
52 | }
53 | getClusterInfo {
54 | data {
55 | result {
56 | metric {
57 | internal_ip
58 | node
59 | }
60 | value
61 | }
62 | }
63 | }
64 | getNodeMemory {
65 | data {
66 | result {
67 | metric {
68 | instance
69 | }
70 | value
71 | }
72 | }
73 | }
74 | getTotalDiskSpace {
75 | data {
76 | result {
77 | metric {
78 | instance
79 | }
80 | value
81 | }
82 | }
83 | }
84 | }`;
85 |
86 | //fetch request based on graphQL query
87 | useEffect(() => {
88 | fetch('/graphql', {
89 | method: 'POST',
90 | headers: {
91 | 'Content-Type': 'application/json',
92 | },
93 | body: JSON.stringify({
94 | query,
95 | }),
96 | })
97 | .then((res) => res.json())
98 | .then((res) => {
99 | const data = res.data;
100 | setCPU(data.getNodeCpu);
101 | setTotalDisk(data.getTotalDiskSpace);
102 | setFreeDisk(data.getFreeDiskSpace);
103 | setNodeMemory(data.getNodeMemory);
104 | setClusterInfo(data.getClusterInfo);
105 | setIsLoading(false);
106 | });
107 | }, []);
108 |
109 | // if data is loaded and data states are set, but called state is false
110 | if (!isLoading && !called) {
111 | const result = [];
112 | for (let i = 1; i <= clusterInfo.data.result.length; i++) {
113 | // create nodes 1 through x based on internal Ip addresses
114 | result.push(clusterInfo.data.result[i - 1].metric.internal_ip);
115 | }
116 | setNodeNums(result);
117 | setCalled(true);
118 | }
119 |
120 | //displays a loading gif if data pull isn't complete yet
121 | return isLoading ? (
122 |