103 | {mainComponent}
104 |
105 |
106 |
107 |
108 |
109 |
42 |
54 | )
55 | }
56 |
57 | export default ClusterEditor;
58 |
59 | // cluster obj {
60 | // dashboards: Object
61 | // apiServer: {dashboardUIDKey: "", grafanaLinkDText: ""}
62 | // kubePrometheus: {dashboardUIDKey: "", grafanaLinkDText: ""}
63 | // kubeStateMetric: {dashboardUIDKey: "", grafanaLinkDText: ""}
64 | // nodeExporter: {dashboardUIDKey: "", grafanaLinkDText: ""}
65 | // url: ""
66 | // userId: ""
67 | // }
--------------------------------------------------------------------------------
/client/src/components/ClustersView.tsx:
--------------------------------------------------------------------------------
1 | import React, { useRef, useState, useEffect, ReactHTMLElement } from 'react'
2 | import { Cluster } from '../../../types'
3 | import { v4 as uuidv4 } from 'uuid';
4 | import '../stylesheets/ClustersView.scss'
5 | import { useDrag, useDrop } from 'react-dnd'
6 |
7 | interface ClusterProps {
8 | userId: string
9 | cluster: ArrayCluster Editor
43 |
44 |
52 |
53 | Add Cluster
45 | setClusterEditorName(e.target.value)}> 46 | setClusterEditorUrl(e.target.value)}> 47 |
48 |
49 |
50 |
51 |
60 |
70 |
71 |
72 | )
73 | }
74 |
75 | export default ClusterView;
76 |
77 | // button component
78 | interface ButtonProps {
79 | clusterContent: Cluster
80 | buttons: Array
61 |
66 | Cluster Name
62 |
63 | {currCluster.clusterName}
64 |
65 |
67 | {buttons}
68 |
69 |
115 |
116 | {isDragging}
117 |
118 |
119 | )
120 | }
121 |
--------------------------------------------------------------------------------
/client/src/components/Dashboard.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState } from 'react';
2 | import '../stylesheets/Dashboard.scss'
3 | import {Cluster} from '../../../types'
4 | import Panel from './Panel'
5 | import allMetrics, { grafanaIFrameGenerator } from '../../../metrics'
6 | import ApiServer from './dashboard/ApiServer'
7 | import KubePrometheus from './dashboard/KubePrometheus'
8 | import KubeStateMetrics from './dashboard/KubeStateMetrics'
9 | import NodeExporter from './dashboard/NodeExporter'
10 |
11 | interface DashboardProps {
12 | userId: string;
13 | cluster: Array
84 |
94 |
95 | )
96 | }
97 |
98 | export default Dashboard;
--------------------------------------------------------------------------------
/client/src/components/Home.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { useSpring, animated } from 'react-spring';
3 | import ClusterEditor from './ClusterEditor';
4 | import '../stylesheets/Home.scss'
5 | import { Cluster } from '../../../types';
6 |
7 | interface HomeProps {
8 | userId: string;
9 | cluster: Array{toggleDashboard === "dash"? "": toggleDashboard} Dashboard
85 | { 86 | toggleDashboard === 'apiServer' ?
25 | setShowClusterEditor(true) }
31 | id="cluster-btn"
32 | className="fa-thin fa-plus fa-fade fa-xl"
33 | style={buttonAnimation}
34 | >+ }
35 | {showClusterEditor &&
37 |
38 | );
39 | };
40 |
41 | export default Home;
--------------------------------------------------------------------------------
/client/src/components/LoginPage.tsx:
--------------------------------------------------------------------------------
1 | import React, {useEffect, useState} from 'react';
2 | import { useNavigate } from 'react-router-dom';
3 | import '../stylesheets/LoginPage.scss'
4 |
5 | interface LoginPageProps {
6 | userId: string;
7 | setUserId: React.DispatchAdd Cluster
26 | 27 | 28 | 29 | 30 | {!showClusterEditor &&
60 |
]
91 | }
92 | else {
93 | logInOrSignUp = [
94 |
61 | Welcome!
62 |
83 |
89 |
90 |
63 | 
64 | setUsername(e.target.value)}
69 | />
70 |
71 |
64 | setUsername(e.target.value)}
69 | />
70 |
72 | 
73 | setPassword(e.target.value)}
78 | />
79 |
80 |
81 |
82 |
73 | setPassword(e.target.value)}
78 | />
79 |
95 | setUsername(e.target.value)}
100 | />
101 | setPassword(e.target.value)}
106 | />
107 |
108 |
109 | ]
110 | }
111 |
112 | // useEffect(()=>{
113 | // //make fetch req to front end, look for session cookie,
114 | // //if cookie matches active session, redirect to mainpage
115 | // fetch('api/auth/checkSession')
116 | // .then((data)=> data.json() )
117 | // .then((data)=>{
118 | // console.log("uedata", data)
119 | // if (data){
120 | // navigate('/mainPage')
121 | // }
122 | // })
123 | // },[])
124 |
125 | return(
126 |
127 | {/*
131 |
132 | )
133 | }
134 |
135 | export default LoginPage
--------------------------------------------------------------------------------
/client/src/components/Logo.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from 'react'
2 | import '../stylesheets/LoginPage.scss'
3 | import LoginPage from './LoginPage';
4 |
5 | interface MainPageProps {
6 | userId: string;
7 | setUserId: React.DispatchArgometrics
*/}
128 | {logInOrSignUp}
129 | {/* Log in with Google */}
130 |
23 | 
28 |
}
29 | {isLogin &&
28 |
100 |
101 |
102 |
110 | )
111 | }
112 |
113 | export default MainPage;
114 |
--------------------------------------------------------------------------------
/client/src/components/NavBar.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect } from 'react';
2 | import { useSpring, animated } from 'react-spring';
3 | import { config } from '@react-spring/web';
4 | import { v4 as uuidv4 } from 'uuid';
5 | import '../stylesheets/NavBar.scss'
6 | interface NavBarProps {
7 | className: string;
8 | toggleDashboard: string;
9 | setToggleDashboard: React.Dispatch
27 |
34 | {isDragging}
35 |
36 |
37 | )
38 | }
39 |
40 | export default Panel;
--------------------------------------------------------------------------------
/client/src/components/dashboard/ApiServer.tsx:
--------------------------------------------------------------------------------
1 | import React, { ReactComponentElement, useEffect, useState, FC } from 'react';
2 | import { Cluster } from '../../../../types'
3 | import { v4 as uuidv4 } from 'uuid';
4 | import allMetrics, { grafanaIFrameGenerator } from '../../../../metrics';
5 | import Panel from '../Panel';
6 | import { useDrop } from 'react-dnd';
7 |
8 | interface ApiServerProps {
9 | currCluster: Cluster;
10 | apiDashboard: React.ReactElement[]
11 | setApiDashboard: (arg: any) => void
12 | updateDashboard: (item: number, hoverIndex: number, name: string) => void
13 | }
14 |
15 |
16 | const ApiServer = ({currCluster, apiDashboard, setApiDashboard, updateDashboard}: ApiServerProps) => {
17 | const searchBy: string = 'apiServer'
18 | // console.log('currCluster', currCluster)
19 |
20 | const [ { isOver }, dropRef ] = useDrop({
21 | accept: 'index',
22 | drop: (item: any, monitor) => {
23 | const { i, grafanaPanelUrl } = item
24 | const hoverIndex = apiDashboard.findIndex((i) => i === monitor.getItem().index)
25 | updateDashboard(i, hoverIndex, searchBy)
26 | },
27 | collect: (monitor) => ({
28 | isOver: monitor.isOver()
29 | })
30 | })
31 |
32 |
33 |
34 | useEffect(() => {
35 | const newDashboard: React.ReactElement[] = []
36 | let i = 0
37 | // iterate over metrics by specific dashboard component
38 | for (const metric in allMetrics[searchBy]) {
39 | // generate url
40 | const url: string = grafanaIFrameGenerator(currCluster, metric, searchBy)
41 | // console.log('url', url)
42 | // add Panel component
43 | newDashboard.push(
52 | {apiDashboard}
53 |
54 |
55 | )
56 | }
57 |
58 |
59 | export default ApiServer
--------------------------------------------------------------------------------
/client/src/components/dashboard/KubePrometheus.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState } from 'react';
2 | import { Cluster } from '../../../../types'
3 | import { v4 as uuidv4 } from 'uuid';
4 | import allMetrics, { grafanaIFrameGenerator } from '../../../../metrics';
5 | import Panel from '../Panel';
6 | import { useDrop } from 'react-dnd';
7 |
8 | interface KubePrometheusProps {
9 | currCluster: Cluster;
10 | kubePromDashboard: React.ReactElement[]
11 | setKubePromDashboard: (arg: any) => void
12 | updateDashboard: (item: number, hoverIndex: number, name: string) => void
13 | }
14 |
15 | const KubePrometheus = ({currCluster, kubePromDashboard, setKubePromDashboard, updateDashboard}: KubePrometheusProps) => {
16 |
17 | const searchBy: string = 'kubePrometheus'
18 |
19 | const [ { isOver }, dropRef ] = useDrop({
20 | accept: 'index',
21 | drop: (item: any, monitor) => {
22 | const { i, grafanaPanelUrl } = item
23 | const hoverIndex = kubePromDashboard.findIndex((i) => i === monitor.getItem().index)
24 | updateDashboard(i, hoverIndex, searchBy)
25 | },
26 | collect: (monitor) => ({
27 | isOver: monitor.isOver()
28 | })
29 | })
30 |
31 | useEffect(() => {
32 | const newDashboard: React.ReactElement[] = []
33 | let i = 0
34 | // iterate over metrics by specific dashboard component
35 | for (const metric in allMetrics[searchBy]) {
36 | // generate url
37 | const url: string = grafanaIFrameGenerator(currCluster, metric, searchBy)
38 | // console.log('url', url)
39 | // add Panel component
40 | newDashboard.push(
49 | {kubePromDashboard}
50 |
51 |
52 | )
53 | }
54 |
55 |
56 | export default KubePrometheus
--------------------------------------------------------------------------------
/client/src/components/dashboard/KubeStateMetrics.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState } from 'react';
2 | import { Cluster } from '../../../../types'
3 | import { v4 as uuidv4 } from 'uuid';
4 | import allMetrics, { grafanaIFrameGenerator } from '../../../../metrics';
5 | import Panel from '../Panel';
6 | import { useDrop } from 'react-dnd';
7 |
8 | interface KubeStateMetricsProps {
9 | currCluster: Cluster;
10 | kubeStateDashboard: React.ReactElement[]
11 | setKubeStateDashboard: (arg: any) => void
12 | updateDashboard: (item: number, hoverIndex: number, name: string) => void
13 | }
14 |
15 |
16 | const KubeStateMetrics = ({currCluster, kubeStateDashboard, setKubeStateDashboard, updateDashboard}: KubeStateMetricsProps) => {
17 |
18 | const searchBy: string = 'kubeStateMetrics'
19 |
20 | const [ { isOver }, dropRef ] = useDrop({
21 | accept: 'index',
22 | drop: (item: any, monitor) => {
23 | const { i, grafanaPanelUrl } = item
24 | const hoverIndex = kubeStateDashboard.findIndex((i) => i === monitor.getItem().index)
25 | updateDashboard(i, hoverIndex, searchBy)
26 | },
27 | collect: (monitor) => ({
28 | isOver: monitor.isOver()
29 | })
30 | })
31 |
32 | useEffect(() => {
33 | const newDashboard: React.ReactElement[] = []
34 | // iterate over metrics by specific dashboard component
35 | for (const metric in allMetrics[searchBy]) {
36 | let i = 0
37 | // generate url
38 | const url: string = grafanaIFrameGenerator(currCluster, metric, searchBy)
39 | // console.log('url', url)
40 | // add Panel component
41 | newDashboard.push(
50 | {kubeStateDashboard}
51 |
52 |
53 | )
54 | }
55 |
56 |
57 | export default KubeStateMetrics
--------------------------------------------------------------------------------
/client/src/components/dashboard/NodeExporter.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState } from 'react';
2 | import { Cluster } from '../../../../types'
3 | import { v4 as uuidv4 } from 'uuid';
4 | import allMetrics, { grafanaIFrameGenerator } from '../../../../metrics';
5 | import Panel from '../Panel';
6 | import { useDrop } from 'react-dnd';
7 |
8 | interface NodeExporterProps {
9 | currCluster: Cluster;
10 | nodeDashboard: React.ReactElement[]
11 | setNodeDashboard: (arg: any) => void
12 | updateDashboard: (item: number, hoverIndex: number, name: string) => void
13 | }
14 |
15 |
16 | const NodeExporter = ({currCluster, nodeDashboard, setNodeDashboard, updateDashboard}: NodeExporterProps) => {
17 |
18 | const searchBy: string = 'nodeExporter'
19 |
20 | const [ { isOver }, dropRef ] = useDrop({
21 | accept: 'index',
22 | drop: (item: any, monitor) => {
23 | const { i, grafanaPanelUrl } = item
24 | const hoverIndex = nodeDashboard.findIndex((i) => i === monitor.getItem().index)
25 | updateDashboard(i, hoverIndex, searchBy)
26 | },
27 | collect: (monitor) => ({
28 | isOver: monitor.isOver()
29 | })
30 | })
31 |
32 | useEffect(() => {
33 | const newDashboard: React.ReactElement[] = []
34 | let i = 0
35 | // iterate over metrics by specific dashboard component
36 | for (const metric in allMetrics[searchBy]) {
37 | // generate url
38 | const url: string = grafanaIFrameGenerator(currCluster, metric, searchBy)
39 | // console.log('url', url)
40 | // add Panel component
41 | newDashboard.push(
50 | {nodeDashboard}
51 |
52 |
53 | )
54 | }
55 |
56 |
57 | export default NodeExporter
--------------------------------------------------------------------------------
/client/src/index.d.ts:
--------------------------------------------------------------------------------
1 | declare module '*.gif'
2 | declare module '*.png'
3 | declare module '*.svg'
--------------------------------------------------------------------------------
/client/src/stylesheets/ClusterEditor.scss:
--------------------------------------------------------------------------------
1 | .clusterEditorContainer {
2 | color: #778DA9;
3 | border:1px solid #778DA9;
4 | padding: 6vw;
5 | border-radius: 0.5rem;
6 | margin-bottom: 12vw;
7 | }
8 |
9 | .ClusterContainer {
10 | display: flex;
11 | flex-direction: column;
12 | align-items: center;
13 | input {
14 | border: none;
15 | margin-bottom: 0.5rem;
16 | font-size: 14px;
17 | padding: 0.7rem;
18 | width: 120%;
19 | border-radius: 5px;
20 | box-shadow: 0px 0px 4px rgba(255, 255, 255, 1);
21 | }
22 | input:focus {
23 | outline: none;
24 | }
25 | }
26 |
27 | .buttonContainer {
28 | button {
29 | margin-right: 6px;
30 | margin-top: 8px;
31 | border: none;
32 | padding: 0.4rem 0.7rem;
33 | border-radius: 4px;
34 | cursor: pointer;
35 | background-color: white;
36 | transition: background-color 0.3s;
37 | box-shadow: 0px 0px 4px rgba(255, 255, 255, 1);
38 | }
39 | button:hover {
40 | background-color: rgb(210, 210, 210);
41 | }
42 | }
43 |
44 |
--------------------------------------------------------------------------------
/client/src/stylesheets/ClustersView.scss:
--------------------------------------------------------------------------------
1 |
2 | .cluster-buttons {
3 | display: flex;
4 | height: 140px;
5 | width: 140px;
6 | margin: 2vh;
7 | box-shadow: 0px 0px 10px gray;
8 | border: none;
9 | border-radius: 0.5vw;
10 | color: #0f0c0dd0;
11 | justify-content: center;
12 | align-items: center;
13 | font-size: .8vw;
14 | white-space: normal;
15 | padding: .2vw;
16 |
17 | // position: relative;
18 | color:#E0E1DD;
19 | font-weight: 500;
20 | text-decoration: none;
21 | text-transform: uppercase;
22 | padding: 0px 80px;
23 | text-align: center;
24 | clip-path: polygon(20% 0, 80% 0, 100% 50%, 80% 100%, 20% 100%, 0 50%);
25 | background-color: #0f0c0dd0;
26 | background-image: radial-gradient(200% 70% at center 20%, rgba(48,44,45,1) -30%, rgba(50,46,47,1) 120%, rgba(22,18,19,0.3) 50%, rgba(22,18,19,1) 150%);
27 | background-repeat: no-repeat;
28 | transition: background-position-y ease-in-out 250ms;
29 | z-index: 1;
30 | }
31 |
32 | .cluster-buttons:active{
33 | background-color: #4c7caf;
34 | transform: translateY(4px);
35 | }
36 |
37 | .cluster-buttons:hover {
38 | background-position-y: -150px;
39 |
40 | // background-image: radial-gradient(200% 70% at center -40%, rgba(48,44,45,0.75) -30%, rgba(50,46,47,0.75) 49%, rgba(22,18,19,0.75) 50%, rgba(22,18,19,0.75) 150%);
41 |
42 | }
43 |
44 | #cluster-name-container {
45 | display: flex;
46 | flex-direction: column;
47 | align-items: center;
48 | background-color: #778DA9;
49 | height: 100vh;
50 | font-size: .6vw;
51 | width: 10vw;
52 | max-width: 10vw;
53 | padding-left: 2rem;
54 | padding-right: 2rem;
55 | overflow-y: scroll;
56 | overflow-x: hidden;
57 | position: relative;
58 | }
59 | #currCluster-name-container {
60 | align-items: left;
61 | justify-content: left;
62 | // background-color: #6b8f71;
63 | // color: #b9f5d8;
64 | font-size: 1.6vw;
65 | padding-bottom: 1rem;
66 | }
67 | #cluster-container {
68 | display: flex;
69 | flex-direction: column;
70 | justify-content: space-between;
71 | margin-top: 10px;
72 | }
73 |
74 | #cluster-name {
75 | position: sticky;
76 | top: 0;
77 | // background-color: lightgrey;
78 | background-color: #0f0c0dd0;
79 | // color: black;
80 | color: #E0E1DD;
81 | width: 200%;
82 | text-align: center;
83 | z-index: 100;
84 | }
85 |
86 | #cluster-name h2 {
87 | font-size: 1.5vw;
88 | }
89 |
90 | // background-color: #d9fff5;
91 | // box-shadow: 0px 0px 10px gray;
92 | // border: none;
93 | // border-radius: 0.5vw;
94 | // color: #1d1e18;
95 | // justify-content: right;
96 | // align-items: center;
97 | // overflow: hidden;
98 | // font-size: .5vw;
99 | // }
100 | // <>
101 | //
102 | //
107 | // Cluster Name
103 | //
104 | // {currCluster.clusterName}
105 | //
106 | //
108 | // {buttons}
109 | //
110 | //
--------------------------------------------------------------------------------
/client/src/stylesheets/Dashboard.scss:
--------------------------------------------------------------------------------
1 | #dashboard-container{
2 | background-color: #0f0c0dd0;
3 | display: flex;
4 | flex-direction: column;
5 | justify-content: center;
6 | align-items: center;
7 | height: 93%;
8 | padding: 2vw;
9 | }
10 | .dashboard-container {
11 | display: grid;
12 | grid-template-columns: repeat(2, 1fr);
13 | gap: 3em;
14 | width: 100%;
15 | overflow-y: scroll;
16 | overflow-x: hidden;
17 | height: 100%;
18 |
19 | }
20 |
21 | .panel {
22 | border: 1px solid #778DA9;
23 | }
24 |
25 | ::-webkit-scrollbar {
26 | width: 10px;
27 | }
28 |
29 | ::-webkit-scrollbar-track {
30 | background-color: rgba(0, 0, 0, 0.2);
31 | border-radius: 10px;
32 | }
33 |
34 | ::-webkit-scrollbar-thumb {
35 | box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
36 | border-radius: 10px;
37 | }
--------------------------------------------------------------------------------
/client/src/stylesheets/Home.scss:
--------------------------------------------------------------------------------
1 | #homepage {
2 | background-color: #2c3d5ed0;
3 | display: flex;
4 | flex-direction: column;
5 | justify-content: center;
6 | align-items: center;
7 | height: 100vh;
8 |
9 | .wave {
10 | position: absolute;
11 | bottom: 0;
12 | left: 0;
13 | width: 100%;
14 | height: 20vh;
15 | background: url(https://i.imgur.com/DLD3N2t.png);
16 | background-size: 100vw 20vh;
17 | }
18 | .wave1 {
19 | animation: animate 20s linear infinite;
20 | z-index: 15;
21 | opacity: 0.9;
22 | animation-delay: 0s;
23 | bottom: 0;
24 | }
25 | .wave2 {
26 | animation: animate2 15s linear infinite;
27 | z-index: 10;
28 | opacity: 0.7;
29 | animation-delay: -5s;
30 | bottom: 10px;
31 | }
32 | .wave3 {
33 | animation: animate 10s linear infinite;
34 | z-index: 5;
35 | opacity: 0.4;
36 | animation-delay: -2s;
37 | bottom: 15px;
38 | }
39 | .wave4 {
40 | animation: animate2 5s linear infinite;
41 | z-index: 1;
42 | opacity: 0.5;
43 | animation-delay: -5s;
44 | bottom: 10px;
45 | }
46 | @keyframes animate {
47 | 0% {
48 | background-position-x: 0;
49 | }
50 | 100% {
51 | background-position-x: 100vw;
52 | }
53 | }
54 | @keyframes animate2 {
55 | 0% {
56 | background-position-x: 0;
57 | }
58 | 100% {
59 | background-position-x: -100vw;
60 | }
61 | }
62 | }
63 |
64 | #cluster-btn:hover {
65 | background-color: #24a93a;
66 | cursor: pointer;
67 | }
68 | #cluster-btn {
69 | display: flex;
70 | align-items: center;
71 | justify-content: center;
72 | font-size: 15vw;
73 | padding: 13vw 9vw;
74 | border: none;
75 | outline: none;
76 | color: rgb(255, 255, 255);
77 | // background: #f1e3e3;
78 | cursor: pointer;
79 | position: relative;
80 | z-index: 0;
81 | border-radius: 1vw;
82 | user-select: none;
83 | -webkit-user-select: none;
84 | touch-action: manipulation;
85 | margin-bottom: 8vw;
86 | }
87 |
88 | #cluster-btn:before {
89 | content: "";
90 | background: linear-gradient(
91 | 45deg,
92 | #06e0f8,
93 | #0b91c7b0,
94 | #071087,
95 | #002bff,
96 | #7a00ff,
97 | #ff00c8,
98 |
99 | );
100 | position: absolute;
101 | top: -2px;
102 | left: -2px;
103 | background-size: 400%;
104 | z-index: -1;
105 | filter: blur(5px);
106 | -webkit-filter: blur(5px);
107 | width: calc(100% + 4px);
108 | height: calc(100% + 4px);
109 | animation: glowing-button-85 60s linear infinite;
110 | transition: opacity 10s ease-in-out;
111 | border-radius: 10px;
112 | }
113 |
114 | @keyframes glowing-button-85 {
115 | 0% {
116 | background-position: 0 0;
117 | }
118 | 50% {
119 | background-position: 400% 0;
120 | }
121 | 100% {
122 | background-position: 0 0;
123 | }
124 | }
125 |
126 | #cluster-btn:after {
127 | z-index: -1;
128 | content: "";
129 | position: absolute;
130 | width: 100%;
131 | height: 100%;
132 | background: #222;
133 | left: 0;
134 | top: 0;
135 | border-radius: 10px;
136 | }
137 |
138 |
139 | h1{
140 | color: #E0E1DD
141 | }
142 |
--------------------------------------------------------------------------------
/client/src/stylesheets/LoginPage.scss:
--------------------------------------------------------------------------------
1 | body {
2 | background-color: #1B263B;
3 | margin: 0;
4 | }
5 | // whole login container
6 | #login-container {
7 | display: flex;
8 | flex-direction: column;
9 | align-items: center;
10 | justify-content: center;
11 | height: 100vh;
12 | width: 100vw;
13 | background-color: #1B263B;
14 | color: rgb(227, 222, 222);
15 | a {
16 | color: rgb(166, 63, 63);
17 | text-decoration: none;
18 | };
19 | a:hover{
20 | text-decoration: underline;
21 | };
22 | -webkit-animation: fade 2s ease-in;
23 | animation: fade 2s ease-in;
24 | }
25 | #argometrics{
26 | font-size: 50px;
27 | margin: 30px;
28 | }
29 |
30 | // login table
31 | #logInOrSignUp {
32 | // all buttons
33 | button {
34 | margin: 10px;
35 | cursor: pointer;
36 | }
37 | display: flex;
38 | flex-direction: column;
39 | align-items: center;
40 | justify-content: space-around;
41 |
42 | width: 25rem;
43 | height: 45rem;
44 | background-color: whitesmoke;
45 | border: none;
46 | border-radius: 10px;
47 | box-shadow: 0px 0px 20px rgba(255, 255, 255, 0.5);
48 | // google button
49 | #google-btn {
50 | background-color: white;
51 | padding: 0.65rem;
52 | border: 1px solid rgba(0, 0, 0, 0.2);
53 | transition: background-color 0.3s;
54 | #google-fields {
55 | display: flex;
56 | align-items: center;
57 | img {
58 | margin-right: 10px;
59 | width: 15%;
60 | }
61 | a {
62 | color: rgba(0, 0, 0, 0.7);
63 | }
64 | }
65 | }
66 | #google-btn:hover {
67 | background-color: rgba(215, 215, 215, 0.8);
68 | }
69 | // sign up button
70 | #register-btn {
71 | border: none;
72 | background-color: whitesmoke;
73 | color: rgba(0, 0, 0, 0.5);
74 | }
75 | #register-btn:hover {
76 | color: rgba(255, 0, 0, 0.7);
77 | }
78 | }
79 |
80 | // includes welcome, user, pass, login, forgot-pass
81 | #login-fields {
82 | display: flex;
83 | flex-direction: column;
84 | align-items: center;
85 | justify-content: center;
86 | width: 100%;
87 | position: relative;
88 | a {
89 | font-size: 12px;
90 | }
91 | span {
92 | font-size: 25px;
93 | // color: #778DA9;
94 | color: #1B263B;
95 | // color: black;
96 | margin-bottom: 25px;
97 | font-family: 'Roboto Condensed', sans-serif;
98 | }
99 | // login button
100 | button {
101 | color: white;
102 | font-size: 13px;
103 | margin-top: 50px;
104 | width: 65%;
105 | border: none;
106 | padding: 0.85rem;
107 | border-radius: 20px;
108 | background-image: linear-gradient(to left, #d16ba5, #c777b9, #ba83ca, #aa8fd8, #9a9ae1, #8aa7ec, #79b3f4, #69bff8, #52cffe, #41dfff, #46eefa, #5ffbf1);
109 | transition: box-shadow 0.3s;
110 | }
111 | button:hover {
112 | box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
113 | }
114 | // input forms
115 | #input-form {
116 | display: flex;
117 | align-items: center;
118 | justify-content: center;
119 | width: 75%;
120 | border-bottom: 1px solid rgba(0, 0, 0, 0.15);
121 | input {
122 | font-size: 14px;
123 | margin: 10px;
124 | border: none;
125 | // border: 1px solid red;
126 | width: 80%;
127 | padding: 0.5rem;
128 | border-radius: 10px;
129 | background-color: whitesmoke;
130 | }
131 | input:focus {
132 | outline: none;
133 | }
134 | }
135 | }
136 |
137 | // logo landing page
138 | #logo-page {
139 | display: flex;
140 | justify-content: center;
141 | align-items: center;
142 | border: none;
143 | width: 70%;
144 | height: 70%;
145 | position: absolute;
146 | top: 50%;
147 | left: 50%;
148 | transform: translate(-50%, -50%);
149 | background-color: #1b263b;
150 | cursor: pointer;
151 | }
152 | #logo-image {
153 | width: 60%;
154 | }
155 |
156 |
157 | @-webkit-keyframes fade {
158 | 0% {
159 | opacity: 0;
160 | // visibility: hidden;
161 | }
162 | 25% {
163 | opacity: 0.25;
164 | }
165 | 50% {
166 | opacity: 0.50;
167 | }
168 | 75% {
169 | opacity: 0.75;
170 | }
171 | 100% {
172 | opacity: 1;
173 | }
174 | }
175 |
176 | @keyframes fade {
177 | 0% {
178 | opacity: 0;
179 | }
180 | 25% {
181 | opacity: 0.25;
182 | }
183 | 50% {
184 | opacity: 0.50;
185 | }
186 | 75% {
187 | opacity: 0.75;
188 | }
189 | 100% {
190 | opacity: 1;
191 | }
192 | }
193 |
194 |
--------------------------------------------------------------------------------
/client/src/stylesheets/MainPage.scss:
--------------------------------------------------------------------------------
1 | * {
2 | // border: 1px solid red;
3 | font-family: 'Roboto Mono', monospace;
4 | }
5 |
6 | #main-page-container{
7 | display: flex;
8 | width: 100%;
9 | // border: .05rem solid black;
10 | // max-height: 100vh;
11 | height: 100vh;
12 |
13 | }
14 |
15 | #main-container {
16 | flex-direction: row;
17 | flex-grow: 1;
18 | background-color: #38393c;
19 | max-height: 100vh;
20 | position: relative;
21 | }
22 |
23 | .active {
24 | background-color: #778DA9;
25 | border: none;
26 | box-shadow: 0px 0px 10px gray;
27 | overflow: hidden;
28 | height: 6vw;
29 | width: 6vw;
30 | font-size: 1vw;
31 | border-radius: .5vw;
32 | margin: 1vw;
33 | font-size: .8vw;
34 | }
35 |
36 | #logout {
37 | margin-top: 5vh;
38 | margin-right: 5vh;
39 | height:30px;
40 | width: 90px;
41 | border: none;
42 | background-color: #778DA9;
43 | border-radius: .5vh;
44 | position: absolute;
45 | top: 0;
46 | right: 0;
47 | cursor: pointer;
48 | }
49 |
50 | #logout:hover {
51 | background-color: #a5a5a5;
52 | }
53 |
54 | #logout-container {
55 | background-color: #1d1e18;
56 | }
57 |
58 |
59 |
60 |
--------------------------------------------------------------------------------
/client/src/stylesheets/NavBar.scss:
--------------------------------------------------------------------------------
1 | #button-container {
2 | height: 100vh;
3 | background-color: #0D1B2A;
4 | align-items: center;
5 | display: flex;
6 | flex-direction: column;
7 | width: 12vw;
8 | min-width: 10vw;
9 | border-right: .05rem solid black;
10 | border-left: .05rem solid black;
11 | justify-content: space-around;
12 | overflow: auto;
13 |
14 | button:hover {
15 | cursor: pointer;
16 | }
17 |
18 | }
19 |
20 | #homeButton {
21 | border: none;
22 | box-shadow: 0px 0px 10px gray;
23 | overflow: hidden;
24 | min-height: 4vw;
25 | min-width: 4vw;
26 | margin: 1vw;
27 | height: 8vw;
28 | width: 8vw;
29 | font-size: 1vw;
30 | border-radius: .5vw;
31 | // transform: translateY(200px);
32 | }
33 |
34 | #dash {
35 | border: none;
36 | box-shadow: 0px 0px 10px gray;
37 | overflow: hidden;
38 | min-height: 4vw;
39 | min-width: 4vw;
40 | margin: 1vw;
41 | height: 8vw;
42 | width: 8vw;
43 | font-size: 1vw;
44 | border-radius: .5vw;
45 | }
46 |
47 | .dash-buttons {
48 | padding: .1vw;
49 | border: none;
50 | box-shadow: 0px 0px 10px gray;
51 | overflow: hidden;
52 | height: 6vw;
53 | width: 6vw;
54 | font-size: 1vw;
55 | border-radius: .5vw;
56 | margin: 1vw;
57 | font-size: .8vw;
58 | }
59 |
60 | .nav-bar {
61 | display: flex;
62 | overflow-y: scroll;
63 | }
--------------------------------------------------------------------------------
/dashboardJson/apiServer.json:
--------------------------------------------------------------------------------
1 | {
2 | "annotations": {
3 | "list": [
4 | {
5 | "builtIn": 1,
6 | "datasource": {
7 | "type": "datasource",
8 | "uid": "grafana"
9 | },
10 | "enable": true,
11 | "hide": true,
12 | "iconColor": "rgba(0, 211, 255, 1)",
13 | "name": "Annotations & Alerts",
14 | "type": "dashboard"
15 | }
16 | ]
17 | },
18 | "description": "Latency and cache hit graphs for Kubernetes apiserver. Useful for observing performance of Amazon EKS clusters.",
19 | "editable": true,
20 | "fiscalYearStartMonth": 0,
21 | "gnetId": 12006,
22 | "graphTooltip": 0,
23 | "id": 33,
24 | "links": [],
25 | "liveNow": false,
26 | "panels": [
27 | {
28 | "aliasColors": {},
29 | "bars": false,
30 | "dashLength": 10,
31 | "dashes": false,
32 | "datasource": {
33 | "uid": "$datasource"
34 | },
35 | "fieldConfig": {
36 | "defaults": {
37 | "links": []
38 | },
39 | "overrides": []
40 | },
41 | "fill": 1,
42 | "fillGradient": 0,
43 | "gridPos": {
44 | "h": 8,
45 | "w": 12,
46 | "x": 0,
47 | "y": 0
48 | },
49 | "hiddenSeries": false,
50 | "id": 8,
51 | "legend": {
52 | "avg": false,
53 | "current": false,
54 | "max": false,
55 | "min": false,
56 | "show": true,
57 | "total": false,
58 | "values": false
59 | },
60 | "lines": true,
61 | "linewidth": 1,
62 | "nullPointMode": "null",
63 | "options": {
64 | "alertThreshold": true
65 | },
66 | "percentage": false,
67 | "pluginVersion": "9.5.1",
68 | "pointradius": 2,
69 | "points": false,
70 | "renderer": "flot",
71 | "seriesOverrides": [],
72 | "spaceLength": 10,
73 | "stack": true,
74 | "steppedLine": false,
75 | "targets": [
76 | {
77 | "datasource": {
78 | "uid": "$datasource"
79 | },
80 | "expr": "sum(rate(apiserver_request_total[5m])) by (verb)",
81 | "legendFormat": "{{verb}}",
82 | "refId": "A"
83 | }
84 | ],
85 | "thresholds": [],
86 | "timeRegions": [],
87 | "title": "apiserver request rate",
88 | "tooltip": {
89 | "shared": true,
90 | "sort": 0,
91 | "value_type": "individual"
92 | },
93 | "type": "graph",
94 | "xaxis": {
95 | "mode": "time",
96 | "show": true,
97 | "values": []
98 | },
99 | "yaxes": [
100 | {
101 | "format": "short",
102 | "label": "req/s",
103 | "logBase": 1,
104 | "min": "0",
105 | "show": true
106 | },
107 | {
108 | "format": "short",
109 | "logBase": 1,
110 | "show": true
111 | }
112 | ],
113 | "yaxis": {
114 | "align": false
115 | }
116 | },
117 | {
118 | "aliasColors": {},
119 | "bars": false,
120 | "dashLength": 10,
121 | "dashes": false,
122 | "datasource": {
123 | "uid": "$datasource"
124 | },
125 | "fieldConfig": {
126 | "defaults": {
127 | "links": []
128 | },
129 | "overrides": []
130 | },
131 | "fill": 1,
132 | "fillGradient": 0,
133 | "gridPos": {
134 | "h": 8,
135 | "w": 12,
136 | "x": 12,
137 | "y": 0
138 | },
139 | "hiddenSeries": false,
140 | "id": 10,
141 | "legend": {
142 | "avg": false,
143 | "current": false,
144 | "max": false,
145 | "min": false,
146 | "show": true,
147 | "total": false,
148 | "values": false
149 | },
150 | "lines": true,
151 | "linewidth": 1,
152 | "nullPointMode": "null",
153 | "options": {
154 | "alertThreshold": true
155 | },
156 | "percentage": false,
157 | "pluginVersion": "9.5.1",
158 | "pointradius": 2,
159 | "points": false,
160 | "renderer": "flot",
161 | "seriesOverrides": [],
162 | "spaceLength": 10,
163 | "stack": false,
164 | "steppedLine": false,
165 | "targets": [
166 | {
167 | "datasource": {
168 | "uid": "$datasource"
169 | },
170 | "expr": "histogram_quantile(0.95, sum(rate(workqueue_queue_duration_seconds_bucket[5m])) by (le))",
171 | "legendFormat": "p95",
172 | "refId": "A"
173 | },
174 | {
175 | "datasource": {
176 | "uid": "$datasource"
177 | },
178 | "expr": "histogram_quantile(0.90, sum(rate(workqueue_queue_duration_seconds_bucket[5m])) by (le))",
179 | "legendFormat": "p90",
180 | "refId": "B"
181 | },
182 | {
183 | "datasource": {
184 | "uid": "$datasource"
185 | },
186 | "expr": "histogram_quantile(0.5, sum(rate(workqueue_queue_duration_seconds_bucket[5m])) by (le))",
187 | "legendFormat": "p50",
188 | "refId": "C"
189 | }
190 | ],
191 | "thresholds": [],
192 | "timeRegions": [],
193 | "title": "workqueue service time",
194 | "tooltip": {
195 | "shared": true,
196 | "sort": 0,
197 | "value_type": "individual"
198 | },
199 | "type": "graph",
200 | "xaxis": {
201 | "mode": "time",
202 | "show": true,
203 | "values": []
204 | },
205 | "yaxes": [
206 | {
207 | "format": "s",
208 | "label": "service time",
209 | "logBase": 1,
210 | "show": true
211 | },
212 | {
213 | "format": "short",
214 | "logBase": 1,
215 | "show": true
216 | }
217 | ],
218 | "yaxis": {
219 | "align": false
220 | }
221 | },
222 | {
223 | "aliasColors": {},
224 | "bars": false,
225 | "dashLength": 10,
226 | "dashes": false,
227 | "datasource": {
228 | "uid": "$datasource"
229 | },
230 | "description": "95th percentile request latency for Kubernetes apiserver component",
231 | "fieldConfig": {
232 | "defaults": {
233 | "links": []
234 | },
235 | "overrides": []
236 | },
237 | "fill": 1,
238 | "fillGradient": 0,
239 | "gridPos": {
240 | "h": 9,
241 | "w": 12,
242 | "x": 0,
243 | "y": 8
244 | },
245 | "hiddenSeries": false,
246 | "id": 2,
247 | "legend": {
248 | "avg": false,
249 | "current": false,
250 | "max": false,
251 | "min": false,
252 | "show": true,
253 | "total": false,
254 | "values": false
255 | },
256 | "lines": true,
257 | "linewidth": 1,
258 | "nullPointMode": "null",
259 | "options": {
260 | "alertThreshold": true
261 | },
262 | "percentage": false,
263 | "pluginVersion": "9.5.1",
264 | "pointradius": 2,
265 | "points": false,
266 | "renderer": "flot",
267 | "seriesOverrides": [],
268 | "spaceLength": 10,
269 | "stack": false,
270 | "steppedLine": false,
271 | "targets": [
272 | {
273 | "datasource": {
274 | "uid": "$datasource"
275 | },
276 | "expr": "histogram_quantile(0.95, sum(rate(apiserver_request_duration_seconds_bucket{verb!~\"CONNECT|WATCH\"}[5m])) by (le))",
277 | "legendFormat": "p95",
278 | "refId": "A"
279 | },
280 | {
281 | "datasource": {
282 | "uid": "$datasource"
283 | },
284 | "expr": "histogram_quantile(0.90, sum(rate(apiserver_request_duration_seconds_bucket{verb!~\"CONNECT|WATCH\"}[5m])) by (le))",
285 | "legendFormat": "p90",
286 | "refId": "B"
287 | },
288 | {
289 | "datasource": {
290 | "uid": "$datasource"
291 | },
292 | "expr": "histogram_quantile(0.5, sum(rate(apiserver_request_duration_seconds_bucket{verb!~\"CONNECT|WATCH\"}[5m])) by (le))",
293 | "legendFormat": "p50 ",
294 | "refId": "C"
295 | }
296 | ],
297 | "thresholds": [],
298 | "timeRegions": [],
299 | "title": "apiserver request latency",
300 | "tooltip": {
301 | "shared": true,
302 | "sort": 0,
303 | "value_type": "individual"
304 | },
305 | "type": "graph",
306 | "xaxis": {
307 | "mode": "time",
308 | "show": true,
309 | "values": []
310 | },
311 | "yaxes": [
312 | {
313 | "format": "s",
314 | "label": "latency",
315 | "logBase": 1,
316 | "show": true
317 | },
318 | {
319 | "format": "short",
320 | "logBase": 1,
321 | "show": true
322 | }
323 | ],
324 | "yaxis": {
325 | "align": false
326 | }
327 | },
328 | {
329 | "aliasColors": {},
330 | "bars": false,
331 | "dashLength": 10,
332 | "dashes": false,
333 | "datasource": {
334 | "uid": "$datasource"
335 | },
336 | "fieldConfig": {
337 | "defaults": {
338 | "links": []
339 | },
340 | "overrides": []
341 | },
342 | "fill": 1,
343 | "fillGradient": 0,
344 | "gridPos": {
345 | "h": 8,
346 | "w": 12,
347 | "x": 12,
348 | "y": 8
349 | },
350 | "hiddenSeries": false,
351 | "id": 12,
352 | "legend": {
353 | "avg": false,
354 | "current": false,
355 | "max": false,
356 | "min": false,
357 | "show": true,
358 | "total": false,
359 | "values": false
360 | },
361 | "lines": true,
362 | "linewidth": 1,
363 | "nullPointMode": "null",
364 | "options": {
365 | "alertThreshold": true
366 | },
367 | "percentage": false,
368 | "pluginVersion": "9.5.1",
369 | "pointradius": 2,
370 | "points": false,
371 | "renderer": "flot",
372 | "seriesOverrides": [],
373 | "spaceLength": 10,
374 | "stack": false,
375 | "steppedLine": false,
376 | "targets": [
377 | {
378 | "datasource": {
379 | "uid": "$datasource"
380 | },
381 | "expr": "histogram_quantile(0.95, sum(rate(workqueue_work_duration_seconds_bucket[5m])) by (le))",
382 | "legendFormat": "p95",
383 | "refId": "A"
384 | },
385 | {
386 | "datasource": {
387 | "uid": "$datasource"
388 | },
389 | "expr": "histogram_quantile(0.9, sum(rate(workqueue_work_duration_seconds_bucket[5m])) by (le))",
390 | "legendFormat": "p90",
391 | "refId": "B"
392 | },
393 | {
394 | "datasource": {
395 | "uid": "$datasource"
396 | },
397 | "expr": "histogram_quantile(0.5, sum(rate(workqueue_work_duration_seconds_bucket[5m])) by (le))",
398 | "legendFormat": "p50",
399 | "refId": "C"
400 | }
401 | ],
402 | "thresholds": [],
403 | "timeRegions": [],
404 | "title": "workqueue processing time",
405 | "tooltip": {
406 | "shared": true,
407 | "sort": 0,
408 | "value_type": "individual"
409 | },
410 | "type": "graph",
411 | "xaxis": {
412 | "mode": "time",
413 | "show": true,
414 | "values": []
415 | },
416 | "yaxes": [
417 | {
418 | "format": "s",
419 | "label": "processing time",
420 | "logBase": 1,
421 | "show": true
422 | },
423 | {
424 | "format": "short",
425 | "logBase": 1,
426 | "show": true
427 | }
428 | ],
429 | "yaxis": {
430 | "align": false
431 | }
432 | },
433 | {
434 | "aliasColors": {},
435 | "bars": false,
436 | "dashLength": 10,
437 | "dashes": false,
438 | "datasource": {
439 | "uid": "$datasource"
440 | },
441 | "fieldConfig": {
442 | "defaults": {
443 | "links": []
444 | },
445 | "overrides": []
446 | },
447 | "fill": 1,
448 | "fillGradient": 0,
449 | "gridPos": {
450 | "h": 8,
451 | "w": 12,
452 | "x": 12,
453 | "y": 16
454 | },
455 | "hiddenSeries": false,
456 | "id": 6,
457 | "interval": "",
458 | "legend": {
459 | "avg": false,
460 | "current": false,
461 | "max": false,
462 | "min": false,
463 | "show": true,
464 | "total": false,
465 | "values": false
466 | },
467 | "lines": true,
468 | "linewidth": 1,
469 | "nullPointMode": "null",
470 | "options": {
471 | "alertThreshold": true
472 | },
473 | "percentage": false,
474 | "pluginVersion": "9.5.1",
475 | "pointradius": 2,
476 | "points": false,
477 | "renderer": "flot",
478 | "seriesOverrides": [],
479 | "spaceLength": 10,
480 | "stack": false,
481 | "steppedLine": false,
482 | "targets": [
483 | {
484 | "datasource": {
485 | "uid": "$datasource"
486 | },
487 | "expr": "sum(rate(etcd_helper_cache_hit_total[5m]))/sum((rate(etcd_helper_cache_hit_total[5m])+rate(etcd_helper_cache_miss_total[5m])))",
488 | "legendFormat": "ratio",
489 | "refId": "A"
490 | }
491 | ],
492 | "thresholds": [],
493 | "timeRegions": [],
494 | "title": "etcd helper cache hit ratio",
495 | "tooltip": {
496 | "shared": true,
497 | "sort": 0,
498 | "value_type": "individual"
499 | },
500 | "type": "graph",
501 | "xaxis": {
502 | "mode": "time",
503 | "show": true,
504 | "values": []
505 | },
506 | "yaxes": [
507 | {
508 | "format": "percentunit",
509 | "label": "",
510 | "logBase": 1,
511 | "min": "0",
512 | "show": true
513 | },
514 | {
515 | "format": "short",
516 | "logBase": 1,
517 | "show": true
518 | }
519 | ],
520 | "yaxis": {
521 | "align": false
522 | }
523 | },
524 | {
525 | "aliasColors": {},
526 | "bars": false,
527 | "dashLength": 10,
528 | "dashes": false,
529 | "datasource": {
530 | "uid": "$datasource"
531 | },
532 | "description": "etcd request latency (p95)",
533 | "fill": 1,
534 | "fillGradient": 0,
535 | "gridPos": {
536 | "h": 8,
537 | "w": 12,
538 | "x": 0,
539 | "y": 17
540 | },
541 | "hiddenSeries": false,
542 | "id": 4,
543 | "legend": {
544 | "avg": false,
545 | "current": false,
546 | "max": false,
547 | "min": false,
548 | "show": true,
549 | "total": false,
550 | "values": false
551 | },
552 | "lines": true,
553 | "linewidth": 1,
554 | "nullPointMode": "null",
555 | "options": {
556 | "dataLinks": []
557 | },
558 | "percentage": false,
559 | "pointradius": 2,
560 | "points": false,
561 | "renderer": "flot",
562 | "seriesOverrides": [],
563 | "spaceLength": 10,
564 | "stack": false,
565 | "steppedLine": false,
566 | "targets": [
567 | {
568 | "datasource": {
569 | "uid": "$datasource"
570 | },
571 | "expr": "histogram_quantile(0.95, sum(rate(etcd_request_duration_seconds_bucket[5m])) by (le))",
572 | "legendFormat": "p95",
573 | "refId": "A"
574 | },
575 | {
576 | "datasource": {
577 | "uid": "$datasource"
578 | },
579 | "expr": "histogram_quantile(0.90, sum(rate(etcd_request_duration_seconds_bucket[5m])) by (le))",
580 | "legendFormat": "p90",
581 | "refId": "B"
582 | },
583 | {
584 | "datasource": {
585 | "uid": "$datasource"
586 | },
587 | "expr": "histogram_quantile(0.5, sum(rate(etcd_request_duration_seconds_bucket[5m])) by (le))",
588 | "legendFormat": "p50",
589 | "refId": "C"
590 | }
591 | ],
592 | "thresholds": [],
593 | "timeRegions": [],
594 | "title": "etcd request latency",
595 | "tooltip": {
596 | "shared": true,
597 | "sort": 0,
598 | "value_type": "individual"
599 | },
600 | "type": "graph",
601 | "xaxis": {
602 | "mode": "time",
603 | "show": true,
604 | "values": []
605 | },
606 | "yaxes": [
607 | {
608 | "format": "s",
609 | "label": "latency",
610 | "logBase": 1,
611 | "show": true
612 | },
613 | {
614 | "format": "short",
615 | "logBase": 1,
616 | "show": true
617 | }
618 | ],
619 | "yaxis": {
620 | "align": false
621 | }
622 | }
623 | ],
624 | "refresh": "",
625 | "schemaVersion": 38,
626 | "style": "dark",
627 | "tags": [],
628 | "templating": {
629 | "list": [
630 | {
631 | "current": {
632 | "selected": false,
633 | "text": "Prometheus",
634 | "value": "Prometheus"
635 | },
636 | "hide": 0,
637 | "includeAll": false,
638 | "label": "Data source",
639 | "multi": false,
640 | "name": "datasource",
641 | "options": [],
642 | "query": "prometheus",
643 | "refresh": 1,
644 | "regex": "",
645 | "skipUrlSync": false,
646 | "type": "datasource"
647 | }
648 | ]
649 | },
650 | "time": {
651 | "from": "now-1h",
652 | "to": "now"
653 | },
654 | "timepicker": {
655 | "refresh_intervals": [
656 | "5s",
657 | "10s",
658 | "30s",
659 | "1m",
660 | "5m",
661 | "15m",
662 | "30m",
663 | "1h",
664 | "2h",
665 | "1d"
666 | ]
667 | },
668 | "timezone": "",
669 | "title": "apiServer",
670 | "uid": "R6abPf9Zz",
671 | "version": 5,
672 | "weekStart": ""
673 | }
--------------------------------------------------------------------------------
/dist/4604ba421e4dc08f9e948022c6934730.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oslabs-beta/Argometrics/9ebb88c4ea3fb32095aa4033a5c9553873e4a7f2/dist/4604ba421e4dc08f9e948022c6934730.gif
--------------------------------------------------------------------------------
/dist/bundle.js.LICENSE.txt:
--------------------------------------------------------------------------------
1 | /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */
2 |
3 | /**
4 | * @license React
5 | * react-dom.production.min.js
6 | *
7 | * Copyright (c) Facebook, Inc. and its affiliates.
8 | *
9 | * This source code is licensed under the MIT license found in the
10 | * LICENSE file in the root directory of this source tree.
11 | */
12 |
13 | /**
14 | * @license React
15 | * react-jsx-runtime.production.min.js
16 | *
17 | * Copyright (c) Facebook, Inc. and its affiliates.
18 | *
19 | * This source code is licensed under the MIT license found in the
20 | * LICENSE file in the root directory of this source tree.
21 | */
22 |
23 | /**
24 | * @license React
25 | * react.production.min.js
26 | *
27 | * Copyright (c) Facebook, Inc. and its affiliates.
28 | *
29 | * This source code is licensed under the MIT license found in the
30 | * LICENSE file in the root directory of this source tree.
31 | */
32 |
33 | /**
34 | * @license React
35 | * scheduler.production.min.js
36 | *
37 | * Copyright (c) Facebook, Inc. and its affiliates.
38 | *
39 | * This source code is licensed under the MIT license found in the
40 | * LICENSE file in the root directory of this source tree.
41 | */
42 |
43 | /**
44 | * @remix-run/router v1.6.1
45 | *
46 | * Copyright (c) Remix Software Inc.
47 | *
48 | * This source code is licensed under the MIT license found in the
49 | * LICENSE.md file in the root directory of this source tree.
50 | *
51 | * @license MIT
52 | */
53 |
54 | /**
55 | * React Router DOM v6.11.1
56 | *
57 | * Copyright (c) Remix Software Inc.
58 | *
59 | * This source code is licensed under the MIT license found in the
60 | * LICENSE.md file in the root directory of this source tree.
61 | *
62 | * @license MIT
63 | */
64 |
65 | /**
66 | * React Router v6.11.1
67 | *
68 | * Copyright (c) Remix Software Inc.
69 | *
70 | * This source code is licensed under the MIT license found in the
71 | * LICENSE.md file in the root directory of this source tree.
72 | *
73 | * @license MIT
74 | */
75 |
--------------------------------------------------------------------------------
/dist/e8db7fd442129943dd99.gif:
--------------------------------------------------------------------------------
1 | export default __webpack_public_path__ + "4604ba421e4dc08f9e948022c6934730.gif";
--------------------------------------------------------------------------------
/dist/index.html:
--------------------------------------------------------------------------------
1 |