135 | {data && isSuccess && (
136 |
145 | );
146 | };
147 |
148 | export default Graph;
--------------------------------------------------------------------------------
/client/components/Graph/GraphNetwork.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from 'react';
2 | import { createPortal } from 'react-dom';
3 | import { ResponsiveNetworkCanvas } from '@nivo/network';
4 | import { useTheme, Snackbar, Alert } from '@mui/material';
5 | import {
6 | TransformWrapper,
7 | TransformComponent,
8 | ReactZoomPanPinchContentRef,
9 | } from 'react-zoom-pan-pinch';
10 |
11 | import styles from './styles.module.css';
12 | export const Controls: React.FC
19 |
26 |
33 |
40 |
47 |
48 | );
49 | declare module '@nivo/network' {
50 | interface InputNode {
51 | id: string;
52 | label: string;
53 | size: number;
54 | color: string;
55 | height: number;
56 | type: string;
57 | }
58 | interface InputLink {
59 | source: string;
60 | target: string;
61 | distance: number;
62 | }
63 | }
64 |
65 | const GraphResponsiveNetwork = ({
66 | data,
67 | lengthOfData,
68 | draggableContainer,
69 | }: any) => {
70 | const muiTheme = useTheme();
71 | const containerRef = draggableContainer;
72 | const [open, setOpen] = useState(false);
73 |
74 | // Calculate the height dynamically based on the length of data
75 | const calculatedHeight = lengthOfData * 10;
76 | const calculatedWidth = lengthOfData * 10;
77 |
78 | useEffect(() => {
79 | // Scroll to the center of the container after rendering
80 | if (containerRef.current) {
81 | const containerHeight = containerRef.current.clientHeight;
82 | const scrollOffset = (calculatedHeight - containerHeight) / 2;
83 | containerRef.current.scrollTop = scrollOffset;
84 |
85 | const containerWidth = containerRef.current.clientWidth;
86 | const scrollOffsetWidth = (calculatedHeight - containerWidth) / 2;
87 | containerRef.current.scrollLeft = scrollOffsetWidth;
88 | }
89 | }, [calculatedHeight]);
90 |
91 | return (
92 |
115 | e.distance}
119 | centeringStrength={1}
120 | repulsivity={100}
121 | nodeSize={(n) => n.size}
122 | activeNodeSize={(n) => n.size * 2}
123 | nodeColor={(e) => e.color}
124 | nodeBorderWidth={5}
125 | nodeBorderColor={{
126 | from: 'color',
127 | modifiers: [['darker', 0.8]],
128 | }}
129 | distanceMin={20}
130 | linkThickness={(n) => 2 + 2 * n.target.data.height}
131 | pixelRatio={2}
132 | linkColor={
133 | (n) =>
134 | n.source.data.type === 'namespace'
135 | ? '#9AFF99' // pastel green
136 | : n.source.data.type === 'service'
137 | ? '#99C2FF' // pastel blue
138 | : n.source.data.type === 'pod'
139 | ? '#FFD699' // pastel orange
140 | : n.source.data.type === 'container'
141 | ? '#99FFFF' // pastel cyan
142 | : muiTheme.palette.mode === 'dark'
143 | ? '#EEEEEE' // light gray
144 | : '#CCCCCC' // pastel gray
145 | }
146 | motionConfig="wobbly"
147 | nodeTooltip={(e) => (
148 | setOpen(false)}
189 | autoHideDuration={5000}
190 | >
191 |
196 | Copied to clipboard!
197 |
198 | ,
199 | document.body,
200 | )}
201 |
202 |
166 | ID: {e.node.data.label || e.node.id}
167 | Type: {e.node.data.type.toUpperCase()}
168 | 173 | CLICK TO COPY ID 174 | 175 |
176 | )}
177 | onClick={(n) => {
178 | console.log(n);
179 | navigator.clipboard.writeText(
180 | n.id || n.data.id || n.data.label || '',
181 | );
182 | setOpen(true);
183 | }}
184 | />
185 | {createPortal(
186 | 167 | Type: {e.node.data.type.toUpperCase()}
168 | 173 | CLICK TO COPY ID 174 | 175 |
171 |
224 | )}
225 |
314 | {point.serieId}: {point.data.yFormatted}
315 |
316 | )}
317 | enableArea={false} // Disabled for performance, enable if it adds value
318 | useMesh={true} // Improve interaction performance
319 | legends={[
320 | // Optional: add legends to improve readability
321 | {
322 | anchor: 'bottom-right',
323 | direction: 'column',
324 | justify: false,
325 | translateX: 120,
326 | translateY: 0,
327 | itemsSpacing: 2,
328 | itemDirection: 'left-to-right',
329 | itemWidth: 80,
330 | itemHeight: 20,
331 | itemOpacity: 0.75,
332 | symbolSize: 12,
333 | symbolShape: 'circle',
334 | symbolBorderColor: 'rgba(0, 0, 0, .5)',
335 | effects: [
336 | {
337 | on: 'hover',
338 | style: {
339 | itemBackground: 'rgba(0, 0, 0, .03)',
340 | itemOpacity: 1,
341 | },
342 | },
343 | ],
344 | },
345 | ]}
346 | /> */
347 |
--------------------------------------------------------------------------------
/client/components/LineChart/index.ts:
--------------------------------------------------------------------------------
1 | // export {LineChart} from './LineChart';
--------------------------------------------------------------------------------
/client/components/LineChart/linechart.scss:
--------------------------------------------------------------------------------
1 | @import '../../variables.scss';
2 |
3 | .page {
4 | @include flex-horizontal;
5 | color: white;
6 | min-height: 30vh;
7 | min-width: 25vw;
8 | border-radius: 20px;
9 | &.dark {
10 | border: 1px solid $light-border;
11 | }
12 | &.light {
13 | border: 1px solid $dark-border;
14 | }
15 | h1 {
16 | color: white;
17 | }
18 | }
19 |
--------------------------------------------------------------------------------
/client/components/List-View/List-View.tsx:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oslabs-beta/faros-scope/aefb07ebb5b579eec7b12c22e1d3908723d4557c/client/components/List-View/List-View.tsx
--------------------------------------------------------------------------------
/client/components/List-View/ListView.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { useTheme } from '@mui/material'
3 | import Box from '@mui/material/Box';
4 | import Table from '@mui/material/Table';
5 | import TableBody from '@mui/material/TableBody';
6 | import TableCell from '@mui/material/TableCell';
7 | import TableContainer from '@mui/material/TableContainer';
8 | import TableFooter from '@mui/material/TableFooter';
9 | import TablePagination from '@mui/material/TablePagination';
10 | import TableRow from '@mui/material/TableRow';
11 | import TableHead from '@mui/material/TableHead';
12 | import IconButton from '@mui/material/IconButton';
13 | import FirstPageIcon from '@mui/icons-material/FirstPage';
14 | import KeyboardArrowLeft from '@mui/icons-material/KeyboardArrowLeft';
15 | import KeyboardArrowRight from '@mui/icons-material/KeyboardArrowRight';
16 | import LastPageIcon from '@mui/icons-material/LastPage';
17 |
18 | interface Column {
19 | id: 'name' | 'CPU Usage (%)' | 'CPU Usage' | 'Mem Usage' | 'Mem Usage (%)';
20 | label: string;
21 | minWidth?: number;
22 | align?: 'right';
23 | format?: (value: number) => string;
24 | }
25 |
26 | const columns: readonly Column[] = [
27 | { id: 'name', label: 'Name', minWidth: 170 },
28 | {
29 | id: 'CPU Usage (%)',
30 | label: 'CPU Usage (%)',
31 | align: 'right',
32 | minWidth: 100,
33 | },
34 | {
35 | id: 'CPU Usage',
36 | label: 'CPU Usage',
37 | minWidth: 170,
38 | align: 'right',
39 | format: (value: number) => value.toLocaleString('en-US'),
40 | },
41 | {
42 | id: 'Mem Usage (%)',
43 | label: 'Mem Usage (%)',
44 | minWidth: 170,
45 | align: 'right',
46 | format: (value: number) => value.toFixed(2),
47 | },
48 | {
49 | id: 'Mem Usage',
50 | label: 'Mem Usage',
51 | minWidth: 170,
52 | align: 'right',
53 | format: (value: number) => value.toLocaleString('en-US'),
54 | },
55 | ];
56 | interface TablePaginationActionsProps {
57 | count: number;
58 | page: number;
59 | rowsPerPage: number;
60 | onPageChange: (
61 | event: React.MouseEvent
176 | {dataObj ? (
177 |
178 |
182 |
255 |
256 | ) : (
257 |
260 | );
261 | };
262 |
263 | export default ListView;
--------------------------------------------------------------------------------
/client/components/List-View/ListViewTable.tsx:
--------------------------------------------------------------------------------
1 | import Box from '@mui/material/Box';
2 | import { DataGrid, GridColDef } from '@mui/x-data-grid';
3 | import { ListViewHeader } from '../ListViewHeader';
4 | import Paper from '@mui/material/Paper';
5 |
6 | // Types
7 | type MetricsItem = {
8 | name: string;
9 | cpuUsage: number;
10 | cpuUsagePct: number;
11 | memUsage: number;
12 | memUsagePct: number;
13 | type: string;
14 | id?: number;
15 | };
16 |
17 | type ListViewProps = {
18 | metricsObject: MetricsItem[];
19 | };
20 |
21 | const columns: GridColDef[] = [
22 | { field: 'id', headerName: 'ID', width: 90 },
23 | {
24 | field: 'name',
25 | headerName: 'Name',
26 | width: 160,
27 | editable: true,
28 | },
29 | {
30 | field: 'cpuUsage',
31 | headerName: 'Cpu Usage',
32 | width: 130,
33 | editable: true,
34 | },
35 | {
36 | field: 'cpuUsagePct',
37 | headerName: 'CPU Usage (%)',
38 | type: 'number',
39 | width: 130,
40 | editable: true,
41 | valueGetter: (params) => {
42 | return params.value.toFixed(2);
43 | },
44 | },
45 | {
46 | field: 'memUsage',
47 | headerName: 'memUsage',
48 | type: 'number',
49 | width: 130,
50 | editable: true,
51 | },
52 | {
53 | field: 'memUsagePct',
54 | headerName: 'Mem Usage (%)',
55 | type: 'number',
56 | width: 130,
57 | editable: true,
58 | valueGetter: (params) => {
59 | return params.value.toFixed(2);
60 | },
61 | },
62 | ];
63 |
64 | export const ListViewTable = ({ metricsObject }: ListViewProps) => {
65 | const metricsData = metricsObject;
66 |
67 | if (metricsData) {
68 | metricsData.map((elm, idx) => {
69 | return (elm.id = idx);
70 | });
71 | }
72 |
73 |
74 | if (!metricsData) return Loading...
258 | )} 259 |Loading...
; 75 | 76 | return ( 77 |Loading...
; 43 | 44 | return ( 45 |
19 |
45 | );
46 | };
47 |
--------------------------------------------------------------------------------
/client/components/SwitchButton/index.ts:
--------------------------------------------------------------------------------
1 | export { SwitchButton } from './SwitchButton';
2 |
--------------------------------------------------------------------------------
/client/components/ThemeContainer/ThemeContainer.tsx:
--------------------------------------------------------------------------------
1 | import { ReactNode } from 'react';
2 | import { useTheme } from '@mui/material';
3 |
4 | /**
5 | * A basic container that uses the current theme for styling, and wraps its children in a centered div
6 | * @param children
7 | * @returns ReactNode
8 | */
9 |
10 | export const ThemeContainer = ({
11 | children,
12 | IDOverride,
13 | style,
14 | }: {
15 | children: ReactNode;
16 | IDOverride?: string;
17 | style?: any;
18 | }) => {
19 | const muiTheme = useTheme();
20 | return (
21 |
20 |
31 |
32 |
43 |
44 |
26 | {children}
27 |
28 | );
29 | };
30 |
--------------------------------------------------------------------------------
/client/components/ThemeContainer/index.ts:
--------------------------------------------------------------------------------
1 | export { ThemeContainer } from './ThemeContainer';
2 |
--------------------------------------------------------------------------------
/client/components/index.ts:
--------------------------------------------------------------------------------
1 | export { ThemeContainer } from "./ThemeContainer";
2 | export { SwitchButton } from "./SwitchButton";
3 | export { Header } from "./Header";
4 | export { FlexBetween } from "./FlexBetween";
5 | export { StatBox } from "./StatBox";
6 | export { CollapsiblePanel } from "./CollapsiblePanel";
7 | export { Graph } from "./Graph";
8 | export { AppContent } from "./AppContent";
9 | export { DataGridWithHeader } from "./DataGridWithHeader";
10 | export { NavBar } from "./NavBar";
--------------------------------------------------------------------------------
/client/css/ColoredText.scss:
--------------------------------------------------------------------------------
1 | @import 'variables.scss';
2 | @import 'base.scss';
--------------------------------------------------------------------------------
/client/css/Landing.scss:
--------------------------------------------------------------------------------
1 | @import 'variables';
2 | @import 'base';
3 |
4 | .landingMain {
5 | position: relative;
6 | display: grid;
7 | margin: 0;
8 | padding: 0;
9 | width: 100%;
10 | height: 100%;
11 | background-size: 2.2em 2.2em;
12 | background-image:
13 | // horizontal lines
14 | linear-gradient(rgba($graph-blue, 1) 0.1em, transparent 0.2em),
15 | // vertical lines
16 | linear-gradient(90deg, rgba($graph-blue, 1) 0.1em, transparent 0.2em),
17 | // horizontal glow bottom side
18 | linear-gradient(rgba($graph-blue, 0.5) 0.1em, transparent 0.5em),
19 | // horizontal glow top side
20 | linear-gradient(360deg, rgba($graph-blue, 0.5) 0.1em, transparent 0.5em),
21 | // vertical glow left side
22 | linear-gradient(270deg, rgba($graph-blue, 0.5) 0.1em, transparent 0.5em),
23 | // vertical glow right side
24 | linear-gradient(90deg, rgba($graph-blue, 0.5) 0.1em, transparent 0.5em);
25 | background-repeat: repeat;
26 | animation: move-gradient-landing 25s linear infinite;
27 | text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
28 | }
29 |
30 | .landingContent {
31 | @include flex-vertical;
32 | position: relative;
33 | width: 100%;
34 | height: 100%;
35 | }
36 |
37 | .landingNav {
38 | position: absolute;
39 | top: 2em;
40 | left: 0;
41 | right: 0;
42 | margin: auto;
43 | width: 45%;
44 | padding: 1em;
45 | height: 5.5em;
46 | display: flex;
47 | justify-content: space-between;
48 | align-items: center;
49 | z-index: 1;
50 | background-color: $base-blue;
51 | border-radius: 8px;
52 | border: 1px solid white;
53 | box-shadow: $pronounced-shadow;
54 | transition: all 0.5s ease-in-out;
55 | animation: opacity 1s ease-in-out;
56 | animation-fill-mode: backwards;
57 | animation-delay: 0.5s;
58 | &:hover {
59 | box-shadow: 15px 15px 1px 0 rgb(0, 0, 0);
60 | scale: 1.05;
61 | }
62 | }
63 |
64 | .landingBody {
65 | display: flex;
66 | flex-direction: column;
67 | justify-content: center;
68 | align-items: center;
69 | text-align: center;
70 | border-radius: 5px;
71 | padding: 2em;
72 | width: 100%;
73 | height: 100%;
74 | }
75 |
76 | .landingBodyContent {
77 | @include flex-vertical;
78 | background-image: linear-gradient(
79 | 25deg,
80 | rgba(0, 0, 0, 0.05),
81 | rgba(0, 0, 0, 0)
82 | );
83 | backdrop-filter: blur(4px);
84 | color: white;
85 | position: relative;
86 | border: 1px solid rgb(255, 255, 255);
87 | border-radius: 5px;
88 | box-shadow: $pronounced-shadow;
89 | width: 100%;
90 | height: 100%;
91 | }
92 |
93 | .break-full-width {
94 | position: absolute;
95 | top: 15em;
96 | width: 100%;
97 | height: 0;
98 | border-top: 1px solid white;
99 | margin: 1em 0;
100 | }
101 |
102 | .landingButton {
103 | position: relative;
104 | display: flex;
105 | justify-content: center;
106 | align-items: center;
107 | width: 10em;
108 | height: 3em;
109 | padding: 0.5em;
110 | border-radius: 5px;
111 | border: 1px solid white;
112 | background-color: lighten($base-blue, 15%);
113 | color: white;
114 | font-size: 1.2em;
115 | font-weight: bold;
116 | transition: all 0.5s ease-in-out;
117 | text-decoration: none;
118 | animation: opacity 1s ease-in-out;
119 | animation-fill-mode: backwards;
120 | animation-delay: 0.5s;
121 | box-shadow: $pronounced-shadow;
122 | text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
123 | &:hover {
124 | background-color: $accent-blue;
125 | box-shadow: 10px 10px 1px 0 rgb(0, 0, 0);
126 | scale: 1.05;
127 | cursor: pointer;
128 | }
129 | }
130 |
131 | .landingHeader {
132 | background-color: rgba(15, 15, 15, 0.5);
133 | border-radius: 5px;
134 | padding: 0.5em;
135 | border: 1px solid rgba(255, 255, 255, 0.55);
136 | box-shadow: $pronounced-shadow;
137 | transition: all 0.5s ease-in-out;
138 | margin: 2em;
139 | &:hover {
140 | scale: 1.05;
141 | box-shadow: 15px 15px 1px 0 rgb(0, 0, 0);
142 | }
143 | }
144 |
145 | @keyframes move-gradient-landing {
146 | 0% {
147 | background-position: 5% 5%;
148 | }
149 | 100% {
150 | background-position: 100% 100%;
151 | }
152 | }
153 |
--------------------------------------------------------------------------------
/client/css/NodeModal.scss:
--------------------------------------------------------------------------------
1 | @import 'Variables';
2 | @import 'Base';
3 |
4 | $border-width: 25px;
5 | $border-height: 25px;
6 |
7 | .nodeModalOverlay {
8 | position: absolute;
9 | display: flex;
10 | justify-content: center;
11 | align-items: center;
12 | top: 0;
13 | left: 0;
14 | width: 100%;
15 | height: 100%;
16 | background-color: rgba(0, 0, 0, 0.5);
17 | z-index: 999;
18 | pointer-events: all;
19 | animation-fill-mode: forwards;
20 | animation-duration: 1s;
21 | }
22 |
23 | .nodeClickableOverlay {
24 | position: absolute;
25 | width: 100%;
26 | height: 100%;
27 | border-radius: 0;
28 | pointer-events: all;
29 | animation-fill-mode: forwards;
30 | }
31 |
32 | #nodeModalThemedContainer {
33 | border-radius: 8px;
34 | }
35 |
36 | .nodeModalContainer {
37 | position: relative;
38 | height: 100%;
39 | width: 100%;
40 | }
41 |
42 | .nodeModalPodsViewOuter {
43 | position: relative;
44 | width: 100%;
45 | height: 100%;
46 | border-radius: 2px;
47 | animation: expand-window 1.5s ease-in-out;
48 | box-shadow: -20px -20px 1px 0px black;
49 | overflow: visible;
50 | &.dark {
51 | border: 25px solid #2d2f30;
52 | }
53 | &.light {
54 | border: 25px solid #cfd8dc;
55 | }
56 | }
57 |
58 | .CloseModalAnimation {
59 | animation: close-window 1.5s ease-in-out;
60 | }
61 |
62 | .nodeModalPodsViewInner {
63 | position: relative;
64 | width: 100%;
65 | height: 100%;
66 | border-radius: 8px;
67 | &.dark {
68 | box-shadow: 0px 0px 15px 1px rgb(255, 255, 255);
69 | }
70 | &.light {
71 | box-shadow: 0px 0px 8px 1px rgb(0, 0, 0);
72 | }
73 | }
74 |
75 | .close {
76 | position: absolute;
77 | right: -23px;
78 | top: -23.5px;
79 | width: fit-content;
80 | height: fit-content;
81 | }
82 |
83 | .closeButton {
84 | display: grid;
85 | align-items: center;
86 | justify-items: center;
87 | border-radius: 50%;
88 | width: 25px;
89 | height: 25px;
90 | background-color: red;
91 | border: none;
92 | pointer-events: all;
93 | color: white;
94 | }
95 |
96 | .closeButton:hover {
97 | width: $border-width;
98 | height: $border-width;
99 | background-color: #eb4034;
100 | border: none;
101 | }
102 |
103 | // maybe scale the window instead of width and height
104 | @keyframes expand-window {
105 | 0% {
106 | width: 0%;
107 | height: 0%;
108 | opacity: 0;
109 | box-shadow: 0px 0px 0px 0px black;
110 | }
111 |
112 | 50% {
113 | opacity: 0.75;
114 | }
115 |
116 | 100% {
117 | opacity: 1;
118 | width: 100%;
119 | height: 100%;
120 | box-shadow: -20px -20px 1px 0px black;
121 | }
122 | }
123 |
124 | @keyframes close-window {
125 | 0% {
126 | width: 100%;
127 | height: 100%;
128 | box-shadow: -15px -15px 1px 0px black;
129 | }
130 |
131 | 50% {
132 | opacity: 0.75;
133 | }
134 |
135 | 100% {
136 | opacity: 0;
137 | width: 15%;
138 | height: 10%;
139 | }
140 | }
141 |
--------------------------------------------------------------------------------
/client/css/NotifDisplay.scss:
--------------------------------------------------------------------------------
1 | @import 'Variables.scss';
2 | @import 'Base.scss';
3 |
4 | .notificationContainer {
5 | display: flex;
6 | flex-direction: column-reverse;
7 | align-items: center;
8 | position: absolute;
9 | padding: 1em;
10 | top: 2ch;
11 | left: 6ch;
12 | gap: 1em;
13 | background-color: $background-color-dark;
14 | background-image: linear-gradient(
15 | #1a1a1a,
16 | rgba(255, 255, 255, 0.165) 0em,
17 | transparent 8em
18 | );
19 | border: 1px solid $diamond-blue;
20 | box-shadow: 0px 0px 5px 1.5px #000000;
21 | border-radius: 8px;
22 | min-width: 15em;
23 | max-width: 25em;
24 | min-height: fit-content;
25 | max-height: 15em;
26 | z-index: 30;
27 | overflow: scroll;
28 | }
29 |
30 | .notificationMessage {
31 | display: flex;
32 | flex-direction: row;
33 | align-items: center;
34 | justify-content: center;
35 | position: relative;
36 | min-width: 18em;
37 | min-height: 3em;
38 | gap: 2em;
39 | z-index: 31;
40 | background-color: black;
41 | border: 1px solid $diamond-blue;
42 | border-radius: 8px;
43 | color: white;
44 | }
45 |
46 | .notificationTitle{
47 | align-self: center;
48 | color: white;
49 | text-shadow: 0px 0px 5px #000000;
50 | }
51 |
52 | .logText{
53 | color: $base-orange;
54 | }
--------------------------------------------------------------------------------
/client/css/Pod.scss:
--------------------------------------------------------------------------------
1 | @import 'Variables';
2 | @import 'Base';
3 | @mixin podContainer {
4 | color: rgb(255, 255, 255);
5 | text-shadow: 2px 2px 1px rgba(20, 20, 20, 0.5);
6 | border-bottom: 1px solid rgb(255, 255, 255);
7 | }
8 |
9 | .podsView {
10 | position: relative;
11 | width: 100%;
12 | height: 100%;
13 | border-radius: 8px;
14 | animation-fill-mode: forwards;
15 | animation-duration: 1s;
16 | background-image: radial-gradient(rgba($graph-blue, 1) 2px, transparent 3px),
17 | radial-gradient(rgba($graph-blue, 0.5) 15%, transparent 60%);
18 | background-size: 1em 1em;
19 | padding: 1rem;
20 | &.light {
21 | background-image: radial-gradient(
22 | rgba($graph-blue, 1) 2px,
23 | transparent 3px
24 | );
25 | }
26 | }
27 |
28 | .podsViewInner {
29 | display: flex;
30 | flex-direction: column;
31 | position: relative;
32 | width: 100%;
33 | height: 100%;
34 | animation: opacity 1s ease-in-out;
35 | animation-fill-mode: backwards;
36 | animation-delay: 1.5s;
37 | opacity: 1;
38 | backdrop-filter: blur(5px);
39 | border-radius: 8px;
40 | overflow: auto;
41 | padding: 1.5rem 0;
42 | &.dark {
43 | background-color: rgba(0, 0, 0, 0.03);
44 | border: 1px solid rgb(255, 255, 255);
45 | box-shadow: 0px 0px 15px 0px $diamond-blue;
46 | }
47 | &.light {
48 | background-color: rgba(255, 255, 255, 0);
49 | border: 1px solid rgb(255, 255, 255);
50 | box-shadow: none;
51 | }
52 | }
53 |
54 | .containerBuckets {
55 | @include podContainer;
56 | display: flex;
57 | flex-direction: column;
58 | width: 100%;
59 | height: fit-content;
60 | border: none;
61 | box-shadow: 0px 4px 7.5px -3px rgba(20, 20, 20, 0.5);
62 | }
63 |
64 | .containerBucketOuter {
65 | padding: 0.5rem;
66 | overflow-x: auto;
67 | border-top: none;
68 | border-bottom: 1px solid rgb(255, 255, 255);
69 | }
70 |
71 | .containerImage {
72 | white-space: nowrap;
73 | }
74 |
75 | .containersLabel {
76 | font-size: 1.4em;
77 | font-weight: 200;
78 | }
79 |
80 | .containerBox {
81 | // padding: .7em;
82 | width: 100%;
83 | height: fit-content;
84 | border: 0.4em solid rgba(255, 255, 255, 0.162);
85 | border-radius: 2px;
86 | margin-bottom: 1em;
87 | word-break: break-all;
88 | .containerTitle {
89 | padding-bottom: 1.6em;
90 | margin-bottom: 1em;
91 | font-size: 1.5em;
92 | }
93 | .infoDiv {
94 | margin-top: 0.5em;
95 | }
96 | .imageBox {
97 | height: 4em;
98 | overflow: auto;
99 | }
100 | }
101 |
102 | .podContainer {
103 | display: flex;
104 | flex-direction: column;
105 | position: relative;
106 | width: min-content;
107 | height: min-content;
108 | transition: all 0.5s ease-in-out;
109 | background: $healthyGradient;
110 | background-size: 400% 400%;
111 | animation: expand-card-deck 1s ease-in-out, wave 2s ease-in-out,
112 | move-gradient 4s ease-in-out infinite;
113 |
114 | background-repeat: repeat;
115 | animation-fill-mode: backwards;
116 | border-radius: 10px;
117 | margin: 0.5rem;
118 | background-color: rgba(31, 31, 31, 0.55);
119 | &.healthyPod {
120 | background: $healthyGradient;
121 | background-size: 400% 400%;
122 | animation: expand-card-deck 1s ease-in-out, wave 2s ease-in-out,
123 | move-gradient 4s ease-in-out infinite;
124 |
125 | background-repeat: repeat;
126 | animation-fill-mode: backwards;
127 | }
128 |
129 | &.warningPod {
130 | background: $warningGradient;
131 | background-size: 400% 400%;
132 | animation: expand-card-deck 1s ease-in-out, wave 2s ease-in-out,
133 | move-gradient 4s ease-in-out infinite;
134 |
135 | background-repeat: repeat;
136 | animation-fill-mode: backwards;
137 | }
138 |
139 | &.unhealthyPod {
140 | background: $unhealthyGradient;
141 | background-size: 400% 400%;
142 | animation: expand-card-deck 1s ease-in-out, wave 2s ease-in-out,
143 | move-gradient 4s ease-in-out infinite;
144 |
145 | background-repeat: repeat;
146 | animation-fill-mode: backwards;
147 | }
148 | }
149 |
150 | .podsContainer {
151 | text-align: center;
152 | width: fit-content;
153 | height: fit-content;
154 | border: none;
155 | padding: 0 1.5rem;
156 | hr {
157 | height: 100%;
158 | width: 100%;
159 | }
160 | }
161 |
162 | .pod {
163 | display: flex;
164 | flex-direction: column;
165 | position: relative;
166 | width: 18rem;
167 | height: 20rem;
168 | margin: 0.5rem;
169 | gap: 0.1em;
170 | border: 1.5px solid rgb(255, 255, 255);
171 | border-radius: 4px;
172 | background-color: $background-color-dark;
173 | background-image: linear-gradient(#1f1f1f, #ffffff14);
174 | transition: all 0.5s ease-in-out;
175 | overflow: auto;
176 | &:hover {
177 | transform: scale(1.1);
178 | z-index: 999;
179 | }
180 | }
181 |
182 | .podName {
183 | display: flex;
184 | align-items: center;
185 | overflow-x: auto;
186 | overflow-y: hidden;
187 | flex-shrink: 0;
188 | width: 100%;
189 | height: fit-content;
190 | padding: 0.5rem;
191 | font-size: 1.5rem;
192 | font-weight: 600;
193 | box-shadow: 0px 1px 7.5px 0px rgba(20, 20, 20, 0.5);
194 | text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.5);
195 | white-space: nowrap;
196 | border-bottom: 1px solid rgb(255, 255, 255);
197 | }
198 |
199 | .podMetrics {
200 | @include podContainer;
201 | width: 100%;
202 | height: fit-content;
203 | padding: 0.5rem;
204 | font-size: 1rem;
205 | font-weight: 600;
206 | color: rgb(255, 255, 255);
207 | border-bottom: 1px solid rgb(255, 255, 255);
208 | box-shadow: 0px 4px 7.5px -3px rgba(20, 20, 20, 0.5);
209 | }
210 |
211 | .podRow {
212 | display: flex;
213 | width: fit-content;
214 | height: fit-content;
215 | // margin: 0 1.5rem;
216 | }
217 |
218 | .podsViewPolkaOverlay {
219 | position: absolute;
220 | width: 100%;
221 | height: 100%;
222 | // background-image: radial-gradient(rgba($graph-blue, 0.5) 15%, transparent 60%);
223 | background-size: 1em 1em;
224 | border-radius: 0;
225 | }
226 |
227 | .podsViewOverlay {
228 | position: absolute;
229 | width: 100%;
230 | height: 100%;
231 | background-color: rgba(0, 0, 0, 0.5);
232 | z-index: 1;
233 | border-radius: 0;
234 | pointer-events: all;
235 | }
236 |
237 | @keyframes wave {
238 | 0% {
239 | transform: translateY(0);
240 | }
241 |
242 | 50% {
243 | transform: translateY(1rem);
244 | }
245 |
246 | 100% {
247 | transform: translateY(0);
248 | }
249 | }
250 |
251 | @keyframes expand-card-deck {
252 | 0% {
253 | margin: -9.5rem;
254 | }
255 |
256 | 100% {
257 | margin: 0.5rem;
258 | }
259 | }
260 |
261 | @keyframes move-gradient {
262 | 0% {
263 | background-position: 0% 50%;
264 | }
265 | 50% {
266 | background-position: 100% 50%;
267 | }
268 | 100% {
269 | background-position: 0% 50%;
270 | }
271 | }
272 |
273 | // @import 'Variables';
274 | // @import 'Base';
275 | // @mixin podContainer {
276 | // color: rgb(255, 255, 255);
277 | // text-shadow: 2px 2px 1px rgba(20, 20, 20, 0.5);
278 | // border-bottom: 1px solid rgb(255, 255, 255);
279 | // }
280 |
281 | // .podsView {
282 | // position: relative;
283 | // width: 100%;
284 | // height: 100%;
285 | // border-radius: 0;
286 | // animation-fill-mode: forwards;
287 | // animation-duration: 1s;
288 | // background-image: radial-gradient(rgba($graph-blue, 1) 2px, transparent 3px),
289 | // radial-gradient(rgba($graph-blue, 0.5) 15%, transparent 60%);
290 | // background-size: 1em 1em;
291 | // padding: 1rem;
292 | // &.light {
293 | // background-image: radial-gradient(
294 | // rgba($graph-blue, 1) 2px,
295 | // transparent 3px
296 | // );
297 | // }
298 | // }
299 |
300 | // .podsViewInner {
301 | // position: relative;
302 | // width: 100%;
303 | // height: 100%;
304 | // animation: opacity 1s ease-in-out;
305 | // animation-fill-mode: backwards;
306 | // animation-delay: 1.5s;
307 | // opacity: 1;
308 | // backdrop-filter: blur(5px);
309 | // border-radius: 8px;
310 | // overflow: auto;
311 | // padding: 1.5rem 0;
312 | // &.dark {
313 | // background-color: rgba(0, 0, 0, 0.03);
314 | // border: 1px solid rgb(255, 255, 255);
315 | // box-shadow: 0px 0px 15px 0px $diamond-blue;
316 | // }
317 | // &.light {
318 | // background-color: rgba(255, 255, 255, 0);
319 | // border: 1px solid rgb(255, 255, 255);
320 | // box-shadow: none;
321 | // }
322 | // }
323 |
324 | // .containerBuckets {
325 | // @include podContainer;
326 | // display: flex;
327 | // flex-direction: column;
328 | // width: 100%;
329 | // height: fit-content;
330 | // border: none;
331 | // box-shadow: 0px 4px 7.5px -3px rgba(20, 20, 20, 0.5);
332 | // }
333 |
334 | // .containerBucketOuter {
335 | // padding: 0.5rem;
336 | // overflow-x: auto;
337 | // border-top: none;
338 | // border-bottom: 1px solid rgb(255, 255, 255);
339 | // }
340 |
341 | // .containerImage {
342 | // white-space: nowrap;
343 | // }
344 |
345 | // .podContainer {
346 | // position: relative;
347 | // width: min-content;
348 | // height: min-content;
349 | // transition: all 0.5s ease-in-out;
350 | // background-image: linear-gradient(
351 | // 45deg,
352 | // lighten($base-red, 20%),
353 | // $base-orange
354 | // );
355 | // // animation: expand-card-deck 1s ease-in-out, wave 1s ease-in-out,
356 | // // move-gradient 1.5s ease-in-out infinite;
357 | // background-size: 600% 600%;
358 | // animation-fill-mode: backwards;
359 | // border-radius: 10px;
360 | // margin: 0.5rem;
361 | // background-color: rgba(31, 31, 31, 0.55);
362 | // }
363 |
364 | // .podsContainer {
365 | // width: fit-content;
366 | // height: fit-content;
367 | // border: none;
368 | // padding: 0 1.5rem;
369 | // }
370 |
371 | // .pod {
372 | // display: flex;
373 | // flex-direction: column;
374 | // position: relative;
375 | // width: 18rem;
376 | // height: 20rem;
377 | // margin: 0.5rem;
378 | // border: 1.5px solid rgb(255, 255, 255);
379 | // border-radius: 4px;
380 | // background-color: $base-yellow;
381 | // transition: all 0.5s ease-in-out;
382 | // overflow: auto;
383 | // &:hover {
384 | // transform: scale(1.1);
385 | // z-index: 999;
386 | // }
387 | // }
388 |
389 | // .podName {
390 | // display: flex;
391 | // align-items: center;
392 | // overflow-x: auto;
393 | // overflow-y: hidden;
394 | // flex-shrink: 0;
395 | // width: 100%;
396 | // height: fit-content;
397 | // padding: 0.5rem;
398 | // font-size: 1.5rem;
399 | // font-weight: 600;
400 | // box-shadow: 0px 1px 7.5px 0px rgba(20, 20, 20, 0.5);
401 | // text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.5);
402 | // white-space: nowrap;
403 | // border-bottom: 1px solid rgb(255, 255, 255);
404 | // }
405 |
406 | // .podMetrics {
407 | // @include podContainer;
408 | // width: 100%;
409 | // height: fit-content;
410 | // padding: 0.5rem;
411 | // font-size: 1rem;
412 | // font-weight: 600;
413 | // color: rgb(255, 255, 255);
414 | // border-bottom: 1px solid rgb(255, 255, 255);
415 | // box-shadow: 0px 4px 7.5px -3px rgba(20, 20, 20, 0.5);
416 | // }
417 |
418 | // .podRow {
419 | // display: flex;
420 | // width: fit-content;
421 | // height: fit-content;
422 | // // margin: 0 1.5rem;
423 | // }
424 |
425 | // .podsViewPolkaOverlay {
426 | // position: absolute;
427 | // width: 100%;
428 | // height: 100%;
429 | // // background-image: radial-gradient(rgba($graph-blue, 0.5) 15%, transparent 60%);
430 | // background-size: 1em 1em;
431 | // border-radius: 0;
432 | // }
433 |
434 | // .podsViewOverlay {
435 | // position: absolute;
436 | // width: 100%;
437 | // height: 100%;
438 | // background-color: rgba(0, 0, 0, 0.5);
439 | // z-index: 1;
440 | // border-radius: 0;
441 | // pointer-events: all;
442 | // }
443 |
444 | // @keyframes wave {
445 | // 0% {
446 | // transform: translateY(0);
447 | // }
448 |
449 | // 50% {
450 | // transform: translateY(-1rem);
451 | // }
452 |
453 | // 100% {
454 | // transform: translateY(0);
455 | // }
456 | // }
457 |
458 | // @keyframes expand-card-deck {
459 | // 0% {
460 | // margin: -9.5rem;
461 | // }
462 |
463 | // 100% {
464 | // margin: 0.5rem;
465 | // }
466 | // }
467 |
468 | // @keyframes move-gradient {
469 | // 0% {
470 | // background-position: 0% 50%;
471 | // }
472 | // 50% {
473 | // background-position: 100% 50%;
474 | // }
475 | // 100% {
476 | // background-position: 0% 50%;
477 | // }
478 | // }
479 |
--------------------------------------------------------------------------------
/client/css/Reactdnd.scss:
--------------------------------------------------------------------------------
1 | @import 'base';
2 | @import 'variables';
3 |
4 | .navPositions {
5 | position: absolute;
6 | width: 100vw;
7 | height: 100vh;
8 | z-index: 100;
9 | pointer-events: none;
10 | }
11 |
12 | .outerDroppable {
13 | @include flex-horizontal;
14 | position: relative;
15 | pointer-events: all;
16 | // height: fit-content;
17 | width: 100%;
18 | border-radius: 8px;
19 | transition: all 0.2s ease-in-out;
20 | pointer-events: none;
21 | }
22 |
23 | #topNavPosition {
24 | @include flex-horizontal;
25 | position: relative;
26 | width: 100%;
27 | top: 0;
28 | }
29 |
30 | #bottomNavPosition {
31 | @include flex-horizontal;
32 | position: relative;
33 | width: 100%;
34 | bottom: 0;
35 | }
36 |
37 | #leftNavPosition {
38 | @include flex-horizontal;
39 | position: relative;
40 | height: 100%;
41 | width: 50px;
42 | top: 0;
43 | }
44 |
45 | #rightNavPosition {
46 | @include flex-horizontal;
47 | position: relative;
48 | height: 100%;
49 | width: 50px;
50 | top: 0;
51 | }
52 |
53 | .styleTop {
54 | position: absolute;
55 | display: flex;
56 | left: 0%;
57 | top: 1.5rem;
58 | height: 50px;
59 | width: 100%;
60 | }
61 |
62 | .styleLeft {
63 | position: absolute;
64 | display: flex;
65 | left: 5%;
66 | top: 0%;
67 | height: 100%;
68 | width: 50px;
69 | .outerDroppable {
70 | height: 100%;
71 | }
72 | }
73 |
74 | .styleBottom {
75 | position: absolute;
76 | display: flex;
77 | left: 0%;
78 | bottom: 1.5rem;
79 | height: 50px;
80 | width: 100%;
81 | }
82 |
83 | .styleRight {
84 | position: absolute;
85 | display: flex;
86 | right: 5%;
87 | top: 0%;
88 | height: 100%;
89 | width: 50px;
90 | .outerDroppable {
91 | height: 100%;
92 | }
93 | }
94 |
95 | .draggableContainer {
96 | pointer-events: all;
97 | }
98 |
99 | .outlineTop {
100 | position: absolute;
101 | background-color: $base-yellow;
102 | margin-left: auto;
103 | margin-right: auto;
104 | left: 0;
105 | right: 0;
106 | text-align: center;
107 | height: 4.5em;
108 | width: 27em;
109 | border-radius: 8px;
110 | transition: all 0.2s ease-in-out;
111 | }
112 |
113 | .outlineLeft {
114 | position: absolute;
115 | background-color: $base-yellow;
116 | position: absolute;
117 | top: 50%;
118 | transform: translateY(-50%);
119 | height: 18em;
120 | width: 7.5em;
121 | border-radius: 8px;
122 | transition: all 0.2s ease-in-out;
123 | }
124 |
125 | .outlineBottom {
126 | position: absolute;
127 | background-color: $base-yellow;
128 | margin-left: auto;
129 | margin-right: auto;
130 | left: 0;
131 | right: 0;
132 | text-align: center;
133 | height: 4.5em;
134 | width: 27em;
135 | border-radius: 8px;
136 | transition: all 0.2s ease-in-out;
137 | }
138 |
139 | .outlineRight {
140 | position: absolute;
141 | background-color: $base-yellow;
142 | top: 50%;
143 | transform: translateY(-50%);
144 | height: 18em;
145 | width: 7.5em;
146 | border-radius: 8px;
147 | transition: all 0.2s ease-in-out;
148 | }
149 |
150 | .dragButton {
151 | background-color: transparent;
152 | border: none;
153 | }
154 |
--------------------------------------------------------------------------------
/client/css/base.scss:
--------------------------------------------------------------------------------
1 | @import './Variables.scss';
2 |
3 | @mixin flex-horizontal {
4 | display: flex;
5 | flex-direction: row;
6 | align-items: center;
7 | justify-content: center;
8 | }
9 |
10 | @mixin flex-vertical {
11 | display: flex;
12 | flex-direction: column;
13 | align-items: center;
14 | justify-content: center;
15 | }
16 |
17 | @mixin flex-center {
18 | display: flex;
19 | justify-content: center;
20 | align-items: center;
21 | }
22 |
23 | @mixin grid-base {
24 | display: grid;
25 | grid-template-columns: repeat(12, 1fr);
26 | grid-gap: 1rem;
27 | }
28 |
29 | .outerContainer {
30 | position: relative;
31 | height: 100%;
32 | width: 100%;
33 | background-color: #222222;
34 | color: #ededed;
35 | font-family: 'Roboto', sans-serif;
36 | font-size: 1.2rem;
37 | }
38 |
39 | .innerContainer {
40 | position: relative;
41 | height: 100%;
42 | width: 100%;
43 | }
44 |
45 | .dark {
46 | background-color: $background-color-dark;
47 | }
48 |
49 | .light {
50 | background-color: $background-color-light;
51 | }
52 |
53 | .textShadowLight {
54 | text-shadow: 2px 2px 2px black;
55 | }
56 |
57 | .textShadowLighter {
58 | text-shadow: 1px 1px 1px black;
59 | }
60 |
61 | .Opacity-In {
62 | animation: opacity 1s ease-in-out;
63 | animation-fill-mode: forwards;
64 | }
65 |
66 | .Opacity-Out {
67 | animation: opacity-reverse 2s ease-in-out;
68 | animation-fill-mode: backwards;
69 | }
70 |
71 | @keyframes hover-up-down {
72 | 0% {
73 | transform: translateY(0px);
74 | }
75 | 50% {
76 | transform: translateY(-3px);
77 | }
78 | 100% {
79 | transform: translateY(0px);
80 | }
81 | }
82 |
83 | @keyframes opacity {
84 | 0% {
85 | opacity: 0;
86 | }
87 | 100% {
88 | opacity: 1;
89 | }
90 | }
91 |
92 | @keyframes opacity-reverse {
93 | 0% {
94 | opacity: 1;
95 | }
96 | 100% {
97 | opacity: 0;
98 | }
99 | }
100 |
101 | @keyframes hover-up-down-3D {
102 | 0% {
103 | transform: translateY(0px);
104 | }
105 | 50% {
106 | transform: translateY(-3.5px);
107 | }
108 | 100% {
109 | transform: translateY(0px);
110 | }
111 | }
112 |
113 | @keyframes navLinkBlueShadow {
114 | 0% {
115 | box-shadow: 0 0 0px #287aff;
116 | }
117 | 50% {
118 | box-shadow: 0 0 8px #287aff;
119 | text-shadow: 0px 0px 10px #287aff;
120 | }
121 | 100% {
122 | box-shadow: 0 0 0px #287aff;
123 | }
124 | }
125 |
126 | @keyframes scale-up-down {
127 | 0% {
128 | transform: scale(1);
129 | }
130 | 50% {
131 | transform: scale(0.8);
132 | }
133 | 100% {
134 | transform: scale(1);
135 | }
136 | }
137 |
138 | .Main {
139 | @include flex-vertical;
140 | height: 100%;
141 | width: 100%;
142 | overflow: hidden;
143 | position: relative;
144 | }
145 |
146 | $inline-blue: #24b0df;
147 | $inline-red: #db3523;
148 | $inline-orange: #f4a227;
149 |
150 | .inlineOrangeText {
151 | color: $inline-orange;
152 | text-shadow: 2px 2px 2px black;
153 | display: inline;
154 | }
155 |
156 | .inlineBlueText {
157 | color: $inline-blue;
158 | text-shadow: 2px 2px 2px black;
159 | display: inline;
160 | }
161 |
162 | .inlineRedText {
163 | color: $inline-red;
164 | text-shadow: 2px 2px 2px black;
165 | display: inline;
166 | }
167 |
--------------------------------------------------------------------------------
/client/css/graph.scss:
--------------------------------------------------------------------------------
1 | @import './Base.scss';
2 | @import './Variables.scss';
3 |
4 | .draggableContainer {
5 | position: relative;
6 | width: 100vw;
7 | height: 100vh;
8 | overflow: hidden;
9 | border-radius: 0px;
10 | transition: all 0.5s ease-in-out;
11 | // resolution of the background image
12 | background-size: 2.2em 2.2em;
13 | // facilitates the movement of the background image when the user drags the graph
14 | background-attachment: local;
15 | // animation: grid-glow-flicker 1s ease-in-out infinite;
16 | background-image:
17 | // horizontal lines
18 | linear-gradient(rgba($graph-blue, 1) 0.1em, transparent 0.2em),
19 | // vertical lines
20 | linear-gradient(90deg, rgba($graph-blue, 1) 0.1em, transparent 0.2em),
21 | // horizontal glow bottom side
22 | linear-gradient(rgba($graph-blue, 0.5) 0.1em, transparent 0.5em),
23 | // horizontal glow top side
24 | linear-gradient(360deg, rgba($graph-blue, 0.5) 0.1em, transparent 0.5em),
25 | // vertical glow left side
26 | linear-gradient(270deg, rgba($graph-blue, 0.5) 0.1em, transparent 0.5em),
27 | // vertical glow right side
28 | linear-gradient(90deg, rgba($graph-blue, 0.5) 0.1em, transparent 0.5em);
29 | &.light {
30 | background-image:
31 | // horizontal lines
32 | linear-gradient(rgba($graph-blue, 1) 0.1em, transparent 0.2em),
33 | // vertical lines
34 | linear-gradient(90deg, rgba($graph-blue, 1) 0.1em, transparent 0.2em);
35 | }
36 | }
37 |
38 | .graph {
39 | position: relative;
40 | width: fit-content;
41 | height: fit-content;
42 | transition: all 0.5s ease-in-out;
43 | backdrop-filter: blur(8px);
44 | border-radius: 8px;
45 | animation: opacity 1s ease-in-out;
46 | padding: 1rem;
47 | &.dark {
48 | background-color: rgba(0, 0, 0, 0.03);
49 | border: 1px solid rgb(255, 255, 255);
50 | box-shadow: $pronounced-shadow;
51 | }
52 |
53 | &.light {
54 | background-color: rgba(255, 255, 255, 0);
55 | border: 1px solid rgb(0, 0, 0);
56 | box-shadow: $pronounced-shadow;
57 | }
58 |
59 | &:hover {
60 | box-shadow: 15px 15px 1px 0 rgb(0, 0, 0);
61 | scale: 1.05;
62 | }
63 | }
64 |
65 | .row {
66 | perspective: 1000px;
67 | }
68 |
69 | .draggableInner {
70 | transform-origin: center center;
71 | position: relative;
72 | height: fit-content;
73 | width: fit-content;
74 | transition: all 0.5s ease-in-out;
75 | scale: 1;
76 | }
77 |
78 | .draggableContent {
79 | @include flex-vertical;
80 | position: relative;
81 | min-height: 100vh;
82 | transition: all 0.5s ease-in-out;
83 | transform-origin: 0% 0%;
84 | overflow: hidden;
85 | scale: 1;
86 | }
87 |
88 | @keyframes grid-glow-flicker {
89 | 0% {
90 | opacity: 1;
91 | }
92 | 50% {
93 | opacity: 0.5;
94 | }
95 | 100% {
96 | opacity: 1;
97 | }
98 | }
99 |
--------------------------------------------------------------------------------
/client/css/home.scss:
--------------------------------------------------------------------------------
1 | @import './Base.scss';
2 |
3 | @mixin outerView {
4 | @include flex-vertical;
5 | background: transparent;
6 | background-size: 3em 3em;
7 | border: 1.5px solid #000000;
8 | box-shadow: 0px 1px 10px 0px #000000;
9 | border-radius: 8px;
10 | height: 80%;
11 | width: 80%;
12 | }
13 |
14 | .outerViewdark {
15 | @include outerView;
16 | background-image: linear-gradient(
17 | rgba(255, 255, 255, 0.7) 0.1em,
18 | transparent 0.1em
19 | ),
20 | linear-gradient(90deg, rgba(255, 255, 255, 0.7) 0.1em, transparent 0.1em);
21 | }
22 |
23 | .outerViewlight {
24 | @include outerView;
25 | background-image: linear-gradient(rgba(0, 0, 0, 0.7) 0.1em, transparent 0.1em),
26 | linear-gradient(90deg, rgba(0, 0, 0, 0.7) 0.1em, transparent 0.1em);
27 | }
28 |
--------------------------------------------------------------------------------
/client/css/index.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Baumans&display=swap');
2 |
3 | * {
4 | box-sizing: border-box;
5 | transition: background-color 0.3s ease-in-out;
6 | font-family: 'Baumans';
7 | scrollbar-width: thin;
8 | scrollbar-color: rgba(255, 255, 255) rgba(0, 0, 0, 0.5);
9 | }
10 |
11 | body {
12 | position: relative;
13 | }
14 |
15 | html,
16 | body {
17 | height: 100%;
18 | width: 100%;
19 | margin: 0;
20 | padding: 0;
21 | /* overflow: hidden; */
22 | }
23 |
24 | #root {
25 | height: 100%;
26 | width: 100%;
27 | margin: 0;
28 | padding: 0;
29 | /* overflow: hidden; */
30 | }
31 |
32 | a {
33 | text-decoration: none;
34 | width: fit-content;
35 | height: fit-content;
36 | color: inherit;
37 | }
38 |
--------------------------------------------------------------------------------
/client/css/navbar.scss:
--------------------------------------------------------------------------------
1 | @import './Base.scss';
2 |
3 | .navDragButton {
4 | max-width: 40px;
5 | max-height: 40px;
6 | }
7 |
8 | #navDragImg {
9 | max-width: 40px;
10 | max-height: 40px;
11 | margin: 0.2rem;
12 | transition: all 0.2s ease-in-out;
13 | border-radius: 5px;
14 | &:hover {
15 | animation: hover-up-down-3D 1s infinite ease-in-out;
16 | transform: translateY(-2px);
17 | box-shadow: 0 0 15px #287aff;
18 | background-color: #16428961;
19 | cursor: grab;
20 | }
21 | }
22 |
23 | .navContainer {
24 | overflow: visible;
25 | position: relative;
26 | top: 0%;
27 | z-index: 1;
28 | border: 1px solid rgb(255, 255, 255);
29 | box-shadow: 5px 5px #000000;
30 | border-radius: 8px;
31 | transition: all 0.2s ease-in-out;
32 | width: fit-content;
33 | height: fit-content;
34 | &:hover {
35 | #navDragContainer {
36 | opacity: 0.5;
37 | &:hover {
38 | opacity: 1;
39 | background-color: #0000005d;
40 | }
41 | }
42 | }
43 | }
44 |
45 | .navContainer.vertical {
46 | overflow: visible;
47 | position: relative;
48 | top: 0%;
49 | z-index: 1;
50 | border: 1px solid rgb(255, 255, 255);
51 | box-shadow: 5px 5px #000000;
52 | border-radius: 8px;
53 | transition: all 0.2s ease-in-out;
54 | &:hover {
55 | #navDragContainer {
56 | opacity: 0.5;
57 | &:hover {
58 | opacity: 1;
59 | background-color: #0000005d;
60 | }
61 | }
62 | }
63 | }
64 |
65 | .navDragContainer {
66 | @include flex-horizontal;
67 | position: absolute;
68 | border-radius: 8px;
69 | transition: all 0.2s ease-in-out;
70 | pointer-events: all;
71 | z-index: 1000;
72 | &.vertical {
73 | @include flex-vertical;
74 | position: absolute;
75 | opacity: 1;
76 | border-radius: 8px;
77 | transition: all 0.2s ease-in-out;
78 | pointer-events: all;
79 | }
80 | }
81 |
82 | .navContainer:hover {
83 | box-shadow: 0px 1px 15px 0px #9d2719;
84 | transform: translateY(-2px);
85 | box-shadow: 10px 10px #000000;
86 | }
87 |
88 | .NavBar {
89 | @include flex-horizontal;
90 | height: 4rem;
91 | width: fit-content;
92 | background-color: #154084;
93 | border-radius: 8px;
94 | color: #ededed;
95 | font-family: 'Roboto', sans-serif;
96 | font-size: 1.2rem;
97 | overflow: visible;
98 | padding: 1rem 1rem;
99 | position: relative;
100 | pointer-events: visible;
101 | opacity: 1;
102 | transition: all 0.2s ease-in-out;
103 | box-shadow: 0px 0px 5px 1.5px #277aff;
104 | }
105 |
106 | .NavBar.vertical {
107 | @include flex-vertical;
108 | height: fit-content;
109 | width: min-content;
110 | background-color: #154084;
111 | border-radius: 8px;
112 | color: #ededed;
113 | font-family: 'Roboto', sans-serif;
114 | font-size: 1.2rem;
115 | position: relative;
116 | pointer-events: visible;
117 | opacity: 1;
118 | transition: all 0.2s ease-in-out;
119 | .nav-right {
120 | @include flex-vertical;
121 | }
122 | }
123 |
124 | #App-Name-Header {
125 | text-shadow: 0px 0px 5px #000000;
126 | font-family: 'Baumans';
127 | font-size: 1.5rem;
128 | margin: 0;
129 | }
130 |
131 | #App-Name-Header:hover {
132 | text-shadow: 0px 0px 5px #287aff;
133 | font-family: 'Baumans';
134 | font-size: 1.5rem;
135 | margin: 0;
136 | }
137 |
138 | .nav-right {
139 | @include flex-horizontal;
140 | margin-left: auto;
141 | }
142 |
143 | .navLink {
144 | color: #ededed;
145 | text-decoration: none;
146 | margin: 0.5rem;
147 | cursor: pointer;
148 | text-shadow: 0px 0px 5px #000000;
149 | transition: all 0.2s ease-in-out;
150 | border-radius: 8px;
151 | padding: 0.5rem;
152 | font-size: 1.25rem;
153 | &.btn {
154 | background-color: transparent;
155 | border: transparent;
156 | }
157 | }
158 |
159 | .navLink:hover {
160 | animation: hover-up-down-3D 1s infinite ease-in-out,
161 | navLinkBlueShadow 1s infinite ease-in-out;
162 | align-items: center;
163 | color: #ededed;
164 | text-decoration: none;
165 | margin-left: 1rem;
166 | cursor: pointer;
167 | text-shadow: 0px 0px 5px #287aff;
168 | transform: translateY(-2px);
169 | box-shadow: 0 0 15px #287aff;
170 | background-color: #16428961;
171 | }
172 |
173 | .nav-right {
174 | @include flex-horizontal;
175 | margin-left: auto;
176 | padding: 0;
177 | }
178 |
--------------------------------------------------------------------------------
/client/css/node.scss:
--------------------------------------------------------------------------------
1 | @import 'Variables.scss';
2 | @import 'Base.scss';
3 |
4 | @keyframes expand {
5 | 0% {
6 | transform: scale(1);
7 | }
8 |
9 | 50% {
10 | transform: scale(1.1);
11 | }
12 |
13 | 100% {
14 | transform: scale(1);
15 | }
16 | }
17 |
18 | @keyframes shake-left-right {
19 | 0% {
20 | transform: translateX(0px);
21 | }
22 |
23 | 50% {
24 | transform: translateX(5px);
25 | }
26 |
27 | 100% {
28 | transform: translateX(0px);
29 | }
30 | }
31 |
32 | @keyframes hover-up-down-node {
33 | 0% {
34 | transform: translateY(0px);
35 | }
36 |
37 | 50% {
38 | transform: translateY(4px);
39 | }
40 |
41 | 100% {
42 | transform: translateY(0px);
43 | }
44 | }
45 |
46 | .Node {
47 | @include flex-vertical;
48 | // background-color: $background-color-dark;
49 | background-color: $background-color-dark;
50 | background-image: linear-gradient(
51 | #1a1a1a,
52 | rgba(255, 255, 255, 0.165) 0em,
53 | transparent 8em
54 | );
55 | // background-image: linear-gradient(45, $base-yellow, $base-orange);
56 | clip-path: polygon(
57 | 51% 2%,
58 | 89% 21%,
59 | 99% 60%,
60 | 75% 99%,
61 | 26% 99%,
62 | 1% 60%,
63 | 11% 21%
64 | );
65 | scale: 0.95;
66 | }
67 |
68 | .borderNode {
69 | position: relative;
70 | background-color: black;
71 | border-radius: 20px;
72 | clip-path: polygon(
73 | 51% 2%,
74 | 89% 21%,
75 | 99% 60%,
76 | 75% 99%,
77 | 26% 99%,
78 | 1% 60%,
79 | 11% 21%
80 | );
81 | transition: all 0.2s ease-in-out;
82 | }
83 |
84 | .nodeOverlay {
85 | position: absolute;
86 | width: 100%;
87 | height: 100%;
88 | box-shadow: 0px 0px 10px 1px rgb(255, 255, 255);
89 | border-radius: 8px;
90 | background-image: linear-gradient(
91 | rgba(255, 255, 255, 0.165) 0em,
92 | transparent 8em
93 | );
94 | transition: all 0.2s ease-in-out;
95 | pointer-events: none;
96 | }
97 |
98 | #podIcon {
99 | transition: all 0.2s ease-in-out;
100 | border: 1px solid $base-orange;
101 | border-radius: 8px;
102 | background-color: #00000040;
103 | &:hover {
104 | cursor: pointer;
105 | border-radius: 50%;
106 | animation: hover-up-down-3D 1s infinite ease-in-out,
107 | podIconOrangeShadow 1s infinite ease-in-out;
108 | }
109 |
110 | &:active {
111 | cursor: pointer;
112 | border-radius: 50%;
113 | animation: podIconOrangeShadow 1s infinite ease-in-out,
114 | scale-up-down 1s infinite ease-in-out;
115 | }
116 | }
117 |
118 | .row {
119 | display: flex;
120 | width: 100%;
121 | height: fit-content;
122 | }
123 |
124 | .item {
125 | height: 100px;
126 | flex-shrink: 0;
127 | flex-grow: 1;
128 | flex-basis: 50%;
129 | width: 100px;
130 | font-size: 5rem;
131 | }
132 |
133 | .row:nth-child(odd) {
134 | background-color: rgba(255, 0, 0, 0);
135 | }
136 |
137 | .row:nth-child(even) {
138 | background-color: rgba(0, 0, 255, 0);
139 | flex-direction: row-reverse;
140 | justify-content: flex-start;
141 | }
142 |
143 | .nodeContainer {
144 | position: relative;
145 | display: grid;
146 | grid-template-columns: 1fr;
147 | grid-gap: 1rem;
148 | }
149 |
150 | .nodeContent {
151 | display: flex;
152 | position: relative;
153 | flex-direction: column;
154 | justify-content: center;
155 | height: fit-content;
156 | width: 10rem;
157 | color: white;
158 | text-shadow: 2px 2px 4px #000000;
159 | text-align: center;
160 | div {
161 | height: fit-content;
162 | overflow-x: auto;
163 | white-space: nowrap;
164 | margin: 0.2em 0em;
165 | }
166 |
167 | *:hover {
168 | cursor: text;
169 | }
170 | }
171 |
172 | .nodeContainer:has(.nodeName:hover) .tooltip-text {
173 | visibility: visible;
174 | white-space: nowrap;
175 | top: 0%;
176 | right: 0%;
177 | z-index: 100;
178 | }
179 |
180 | .nodeName {
181 | position: relative;
182 | max-height: min-content;
183 | padding: 0.3rem;
184 | }
185 |
186 | .podCount {
187 | max-width: fit-content;
188 | margin: auto;
189 | }
190 |
191 | .tooltip-text {
192 | position: absolute;
193 | left: -50%;
194 | right: 0%;
195 | margin: auto;
196 | padding: 0.6em;
197 | width: fit-content;
198 | visibility: hidden;
199 | opacity: 0.9;
200 | scale: 0.8;
201 | &.dark {
202 | border: 3px solid white;
203 | color: white;
204 | }
205 | &.light {
206 | border: 3px solid black;
207 | color: black;
208 | }
209 | }
210 |
211 | @keyframes podIconOrangeShadow {
212 | 0% {
213 | box-shadow: 0 0 0px $base-orange;
214 | }
215 | 50% {
216 | box-shadow: 0 0 8px $base-orange;
217 | text-shadow: 0px 0px 10px $base-orange;
218 | }
219 | 100% {
220 | box-shadow: 0 0 0px $base-orange;
221 | }
222 | }
223 |
--------------------------------------------------------------------------------
/client/css/settings.scss:
--------------------------------------------------------------------------------
1 | @import './Base.scss';
2 |
3 |
--------------------------------------------------------------------------------
/client/css/switchbutton.scss:
--------------------------------------------------------------------------------
1 | .switchContainer {
2 | position: relative;
3 | margin: 0em 0.5em;
4 | }
5 |
6 | .switchButton {
7 | position: relative;
8 | display: flex;
9 | align-items: center;
10 | justify-content: center;
11 | width: 3.5em;
12 | height: 1.5em;
13 | }
14 |
15 | .check-box {
16 | position: relative;
17 | display: flex;
18 | align-items: center;
19 | justify-content: center;
20 | }
21 |
22 | .switchBar[type='checkbox'] {
23 | position: relative;
24 | appearance: none;
25 | width: 100%;
26 | height: 100%;
27 | background: #e4e4e4;
28 | border-radius: 50px;
29 | box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
30 | cursor: pointer;
31 | transition: 0.4s;
32 | }
33 |
34 | .slider {
35 | position: absolute;
36 | width: 2.3em;
37 | height: 2.3em;
38 | top: -0.4em;
39 | left: -0.5em;
40 | background: #ffffff00;
41 | border-radius: 50%;
42 | // box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
43 | transition: 0.4s ease-in-out;
44 | pointer-events: none;
45 | }
46 |
47 | .switchBar[type='checkbox']:checked {
48 | background: #1f1f1f;
49 | }
50 |
51 | .switchBar[type='checkbox']:checked + .slider {
52 | left: 50%;
53 | transform: scale3d(-1.2, 1, 1);
54 | width: 2em;
55 | height: 2.2em;
56 | top: -0.4em;
57 | }
58 |
59 | .themeIcon {
60 | position: absolute;
61 | width: 100%;
62 | height: 100%;
63 | transition: 0.2s ease-in-out;
64 | pointer-events: none;
65 | }
66 |
--------------------------------------------------------------------------------
/client/css/variables.scss:
--------------------------------------------------------------------------------
1 | $background-color-dark: #222222;
2 | $background-color-light: #d0d0d0;
3 | $base-blue: #154084;
4 | $base-red: #9d2719;
5 | $base-yellow: #d7b418;
6 | $base-orange: #f4a227;
7 | $accent-blue: #188fff;
8 | $accent-red: #ff4d4d;
9 | $accent-yellow: #f5d300;
10 | $accent-orange: #f4a227;
11 | $dark-text: #ededed;
12 | $light-text: #222222;
13 | $graph-blue: #188fff;
14 | $graph-yellow: #f5d300;
15 | $diamond-blue: rgb(200, 230, 255);
16 | $unhealthy-pod: #ad4a39;
17 | $healthy-pod: #42a62b;
18 | $warning-pod: #e8c529;
19 | $pronounced-shadow: 8px 8px 1px 0 rgb(0, 0, 0);
20 | $healthyGradient: linear-gradient(-45deg, #52caee, #3c53e7, #23a6d5, #23d5ab);
21 | $unhealthyGradient: linear-gradient(-45deg, #e65252, #e73c3c, #d52323, #ab2323);
22 | $warningGradient: linear-gradient(-45deg, #e6e652, #e7e73c, #d5d523, #abab23);
23 |
--------------------------------------------------------------------------------
/client/index.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Baumans&display=swap');
2 |
3 | * {
4 | box-sizing: border-box;
5 | transition: background-color 0.3s ease-in-out;
6 | font-family: 'Baumans';
7 | }
8 |
9 | *::-webkit-scrollbar {
10 | width: 12px;
11 | height: 12px;
12 | }
13 |
14 | ::-webkit-scrollbar:hover {
15 | cursor: pointer;
16 | }
17 |
18 | *::-webkit-scrollbar-track {
19 | background-color: transparent;
20 | border: transparent;
21 | }
22 |
23 |
24 | *::-webkit-scrollbar-thumb {
25 | background-color: #888;
26 | border-radius: 6px;
27 | width: 8px;
28 | height: 60px;
29 | cursor: pointer !important;
30 | }
31 |
32 | *::-webkit-scrollbar-thumb:hover {
33 | background-color: #555;
34 | cursor: pointer;
35 | }
36 |
37 |
38 | *::-webkit-scrollbar-corner {
39 | display: none;
40 | }
41 |
42 | body {
43 | position: relative;
44 | }
45 |
46 | html,
47 | body {
48 | height: 100%;
49 | width: 100%;
50 | margin: 0;
51 | padding: 0;
52 | }
53 |
54 | #root {
55 | height: 100%;
56 | width: 100%;
57 | margin: 0;
58 | padding: 0;
59 | }
60 |
61 | .main-wrapper {
62 | height: 100%;
63 | }
64 |
65 | a {
66 | text-decoration: none;
67 | width: fit-content;
68 | height: fit-content;
69 | color: inherit;
70 | }
71 |
--------------------------------------------------------------------------------
/client/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
13 |
25 |
27 |
28 | );
29 | };
30 |
31 | export default DefaultLayout;
32 |
--------------------------------------------------------------------------------
/client/layout/index.ts:
--------------------------------------------------------------------------------
1 | import DefaultLayout from './DefaultLayout';
2 |
3 | export { DefaultLayout };
--------------------------------------------------------------------------------
/client/pages/ListViewPage/ListViewPage.scss:
--------------------------------------------------------------------------------
1 | .list-view {
2 | display: flex;
3 | flex-direction: column;
4 | gap: 2em;
5 | padding: 4rem;
6 | overflow: visible;
7 | text-align: center;
8 | }
9 |
--------------------------------------------------------------------------------
/client/pages/ListViewPage/ListViewPage.tsx:
--------------------------------------------------------------------------------
1 | import { useSelector } from 'react-redux';
2 | import { RootState } from '../../../types/types';
3 | import { formatMetricsMap } from '../../util/formatters/formatMetricsMap';
4 | // import { ListViewTable } from '../../components/List-View/ListViewTable';
5 | import './ListViewPage.scss';
6 | import { Box } from '@mui/material';
7 | import { formatContainerUsage } from '../../util/formatters/formatContainerUsage';
8 | import {
9 | useGetClusterMetricsMapQuery,
10 | useGetContainerUsageQuery,
11 | useGetClusterInfoQuery,
12 | } from '../../services/api';
13 | import { lazy } from 'react';
14 | import { GridColDef } from '@mui/x-data-grid';
15 |
16 | const DataGridWithHeader = lazy(
17 | () => import('../../components/DataGridWithHeader/DataGridWithHeader')
18 | );
19 |
20 | // Columns for Container Usage by NameSpace
21 | const columns: GridColDef[] = [
22 | { field: 'id', headerName: 'ID', width: 100 },
23 | {
24 | field: 'name',
25 | headerName: 'Name',
26 | headerAlign: 'left',
27 | align: 'left',
28 | // width: 160,
29 | flex: 1,
30 | editable: true,
31 | },
32 | {
33 | field: 'CPU',
34 | headerName: 'CPU (num cores)',
35 | headerAlign: 'center',
36 | align: 'center',
37 | flex: 1,
38 | editable: true,
39 | valueGetter: (params) => {
40 | return params.value.toFixed(5);
41 | },
42 | },
43 | {
44 | field: 'MEM',
45 | headerName: 'MEM (bytes)',
46 | headerAlign: 'center',
47 | align: 'center',
48 | type: 'number',
49 | // width: 130,
50 | flex: 1,
51 | editable: true,
52 | // valueGetter: (params) => {
53 | // return params.value.toFixed(2);
54 | // },
55 | },
56 | ];
57 |
58 | // Columns for ListView
59 | const columnsListView: GridColDef[] = [
60 | { field: 'id', headerName: 'ID', flex: 1 },
61 | {
62 | field: 'name',
63 | headerName: 'Name',
64 | flex: 1,
65 | editable: true,
66 | },
67 | {
68 | field: 'cpuUsage',
69 | headerName: 'CPU Usage',
70 | headerAlign: 'center',
71 | align: 'center',
72 | flex: 1,
73 | editable: true,
74 | },
75 | {
76 | field: 'cpuUsagePct',
77 | headerName: 'CPU Usage (%)',
78 | headerAlign: 'center',
79 | align: 'center',
80 | type: 'number',
81 | flex: 1,
82 | editable: true,
83 | valueGetter: (params) => {
84 | return params.value.toFixed(2);
85 | },
86 | },
87 | {
88 | field: 'memUsage',
89 | headerName: 'MEM Usage (bytes)',
90 | headerAlign: 'center',
91 | align: 'center',
92 | type: 'number',
93 | flex: 1,
94 | editable: true,
95 | },
96 | {
97 | field: 'memUsagePct',
98 | headerName: 'MEM Usage (%)',
99 | headerAlign: 'center',
100 | align: 'center',
101 | type: 'number',
102 | flex: 1,
103 | editable: true,
104 | valueGetter: (params) => {
105 | return params.value.toFixed(2);
106 | },
107 | },
108 | ];
109 |
110 | // Columns for List Container and Nodes Metrics
111 | const columnsListViewUtil: GridColDef[] = [
112 | { field: 'id', headerName: 'ID', flex: 1 },
113 | {
114 | field: 'name',
115 | headerName: 'Name',
116 | headerAlign: 'left',
117 | align: 'left',
118 | flex: 1,
119 | editable: true,
120 | },
121 | {
122 | field: 'cpuUsage',
123 | headerName: 'CPU Usage (bytes)',
124 | headerAlign: 'center',
125 | align: 'center',
126 | flex: 1,
127 | editable: true,
128 | },
129 | {
130 | field: 'cpuUtilPct',
131 | headerName: 'CPU Usage (%)',
132 | headerAlign: 'center',
133 | align: 'center',
134 | type: 'number',
135 | flex: 1,
136 | editable: true,
137 | valueGetter: (params) => {
138 | return params.value.toFixed(2);
139 | },
140 | },
141 | {
142 | field: 'memUsage',
143 | headerName: 'MEM Usage',
144 | headerAlign: 'center',
145 | align: 'center',
146 | type: 'number',
147 | flex: 1,
148 | editable: true,
149 | },
150 | {
151 | field: 'memUtilPct',
152 | headerName: 'MEM Usage (%)',
153 | headerAlign: 'center',
154 | align: 'center',
155 | type: 'number',
156 | flex: 1,
157 | editable: true,
158 | valueGetter: (params) => {
159 | return params.value.toFixed(2);
160 | },
161 | },
162 | ];
163 |
164 | const ListViewPage = () => {
165 | let cUsageData;
166 | let metricsState = useSelector((state: RootState) => state?.metricsMap);
167 | console.log('Metrics State ===>', metricsState?.metricsMap);
168 | const { data } = useGetContainerUsageQuery(undefined, {});
169 | useGetClusterMetricsMapQuery(undefined, { pollingInterval: 5000 });
170 | const { data: _clusterInfo } = useGetClusterInfoQuery(undefined, {});
171 |
172 | if (data) {
173 | cUsageData = formatContainerUsage(data);
174 | }
175 |
176 | if (metricsState) {
177 | metricsState = formatMetricsMap(metricsState);
178 | }
179 |
180 | const capitalizeFirstLetter = (s: string) => {
181 | return s.charAt(0).toUpperCase() + s.slice(1);
182 | };
183 |
184 | if (
185 | !data ||
186 | !metricsState.pod ||
187 | !metricsState.container ||
188 | !metricsState.node
189 | )
190 | return;
191 |
192 | return (
193 |
194 |
195 |
243 |
244 | );
245 | };
246 |
247 | export default ListViewPage;
248 |
--------------------------------------------------------------------------------
/client/pages/NodeView/NodeView.tsx:
--------------------------------------------------------------------------------
1 | import { lazy, Suspense } from "react";
2 | // ! Review React docs regarding ErrorBoundary
3 | // TODO: Add error boundary
4 | // import { ErrorBoundary } from "react-error-boundary";
5 | import { Box, useTheme } from "@mui/material";
6 | import CircularProgress from "@mui/material/CircularProgress";
7 | import { GridColDef } from "@mui/x-data-grid";
8 |
9 | // Use lazy to defer loading component’s code until it is rendered for the first time.
10 | const LineChart = lazy(() => import("../../components/LineChart/LineChart"));
11 | const DataGridWithHeader = lazy(
12 | () => import("../../components/DataGridWithHeader/DataGridWithHeader")
13 | );
14 |
15 | import { useGetNodeViewQuery } from "../../services/api";
16 |
17 | import {
18 | CollapsiblePanel,
19 | // FlexBetween,
20 | // Header,
21 | StatBox,
22 | } from "../../components";
23 |
24 | const columns: GridColDef[] = [
25 | {
26 | field: "nodeName",
27 | headerName: "metadata.system.node_name",
28 | headerAlign: "left",
29 | flex: 1,
30 | align: "left",
31 | },
32 | {
33 | field: "metricValue",
34 | headerName: "Latest Value",
35 | headerAlign: "center",
36 | width: 150,
37 | // flex: 1,
38 | align: "right",
39 | },
40 | ];
41 |
42 | const NodeView = () => {
43 | const theme = useTheme();
44 | const { data, isLoading } = useGetNodeViewQuery(undefined, {});
45 | console.log(data);
46 | let podsFormattedData = [];
47 | let containersFormattedData = [];
48 |
49 | if (data) {
50 | podsFormattedData = data.kube_pod_count_per_node.map(
51 | (item: any, index: number) => ({
52 | id: index,
53 | metricName: item.metricName,
54 | nodeName: item.labels.node,
55 | metricValue: item.metricValue,
56 | })
57 | );
58 |
59 | containersFormattedData = data.kube_container_count_per_node.map(
60 | (item: any, index: number) => ({
61 | id: index,
62 | nodeName: item.labels.node,
63 | metricValue: item.metricValue,
64 | })
65 | );
66 | }
67 |
68 | return (
69 |