├── .gitignore ├── .dockerignore ├── client ├── assets │ ├── logo.png │ └── kubermetrics.png ├── components │ ├── Services │ │ ├── ServicesList.styles.css │ │ ├── Service.styles.css │ │ ├── ServicesList.js │ │ └── Service.js │ ├── Pods │ │ ├── PodsList.style.css │ │ ├── Pod.style.css │ │ ├── Pod.js │ │ └── PodsList.js │ ├── Deployments │ │ ├── DeploymentList.style.css │ │ ├── Deployment.style.css │ │ ├── DeploymentList.js │ │ └── Deployment.js │ ├── Node │ │ ├── currentNode.style.css │ │ └── CurrentNode.js │ ├── Header │ │ ├── Header.style.css │ │ └── Header.js │ ├── PrometheusMonitoring │ │ └── PrometheusAlerts.js │ ├── GrafanaMonitoring │ │ ├── ClusterDashboard.js │ │ └── PodDashboard.js │ ├── sidebar │ │ ├── SidebarData.js │ │ ├── Sidebar.js │ │ └── Sidebar.css │ ├── NavRoutes │ │ └── index.js │ └── mui-elements.js ├── pages │ ├── metrics │ │ └── index.js │ ├── alerts │ │ └── index.js │ └── home │ │ └── index.js ├── store.js ├── constants │ └── actionTypes.js ├── reducers │ ├── servicesListReducer.js │ ├── podsListReducer.js │ ├── ingressListReducer.js │ ├── deploymentListReducer.js │ ├── index.js │ ├── nodesListReducer.js │ └── namespaceListReducer.js ├── src │ ├── index.js │ └── App.jsx ├── styles.css ├── Dialog │ ├── IngressDialog.js │ ├── ServiceDialog.js │ ├── DeploymentDialog.js │ ├── PodsDialog.js │ └── NodeDialog.js └── actions │ └── actions.js ├── Dockerfile ├── skaffold.yaml ├── manifests ├── service.yaml ├── prometheus-service.yaml ├── grafana-datasource-config.yaml ├── clusterRole.yaml ├── kubermetrics-depl.yaml ├── prometheus-deployment.yaml ├── grafana-deployment.yaml ├── prometheus-ingress.yaml ├── config-map.yaml └── dashboards │ └── home.json ├── index.html ├── webpack.config.js ├── package.json ├── server ├── server.js └── controllers │ └── k8Controller.js └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules -------------------------------------------------------------------------------- /.dockerignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | build -------------------------------------------------------------------------------- /client/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oslabs-beta/kubermetrics/HEAD/client/assets/logo.png -------------------------------------------------------------------------------- /client/assets/kubermetrics.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oslabs-beta/kubermetrics/HEAD/client/assets/kubermetrics.png -------------------------------------------------------------------------------- /Dockerfile: -------------------------------------------------------------------------------- 1 | FROM node:latest 2 | 3 | ENV CI=true 4 | 5 | WORKDIR /app 6 | COPY package.json ./ 7 | 8 | RUN npm install 9 | COPY ./ ./ 10 | 11 | CMD ["npm", "run", "dev"] -------------------------------------------------------------------------------- /skaffold.yaml: -------------------------------------------------------------------------------- 1 | apiVersion: skaffold/v2beta22 2 | kind: Config 3 | metadata: 4 | name: kubermetrics 5 | build: 6 | artifacts: 7 | - image: arajput96/kubermetrics 8 | docker: 9 | dockerfile: Dockerfile 10 | deploy: 11 | kubectl: 12 | manifests: 13 | - manifests/kubermetrics-depl.yaml 14 | -------------------------------------------------------------------------------- /manifests/service.yaml: -------------------------------------------------------------------------------- 1 | apiVersion: v1 2 | kind: Service 3 | metadata: 4 | name: grafana 5 | namespace: monitoring 6 | annotations: 7 | prometheus.io/scrape: 'true' 8 | prometheus.io/port: '3000' 9 | spec: 10 | selector: 11 | app: grafana 12 | type: NodePort 13 | ports: 14 | - port: 3000 15 | targetPort: 3000 16 | nodePort: 32000 -------------------------------------------------------------------------------- /manifests/prometheus-service.yaml: -------------------------------------------------------------------------------- 1 | apiVersion: v1 2 | kind: Service 3 | metadata: 4 | name: prometheus-service 5 | namespace: monitoring 6 | annotations: 7 | prometheus.io/scrape: 'true' 8 | prometheus.io/port: '9090' 9 | 10 | spec: 11 | selector: 12 | app: prometheus-server 13 | type: NodePort 14 | ports: 15 | - port: 8080 16 | targetPort: 9090 17 | nodePort: 30000 18 | -------------------------------------------------------------------------------- /client/components/Services/ServicesList.styles.css: -------------------------------------------------------------------------------- 1 | .servicesList { 2 | background-color: #222426; 3 | margin: 10px; 4 | margin-left: 15px; 5 | width: auto; 6 | height: 330px; 7 | border-radius: 10px; 8 | /* max-width: 1500px; */ 9 | /* min-width: 1500px; */ 10 | border: 1px solid rgb(19, 19, 19); 11 | 12 | display: flex; 13 | flex-direction: column; 14 | -webkit-box-shadow: 5px 5px 15px 5px rgba(0,0,0,0.67); 15 | box-shadow: 5px 5px 15px 5px rgba(0,0,0,0.67); 16 | } -------------------------------------------------------------------------------- /client/components/Pods/PodsList.style.css: -------------------------------------------------------------------------------- 1 | .podsList { 2 | /* width: 75vw; */ 3 | background-color: #222426; 4 | margin: 10px; 5 | margin-left: 15px; 6 | margin-top: 15px; 7 | margin-bottom: 10px; 8 | width: auto; 9 | height: 330px; 10 | border-radius: 10px; 11 | border: 1px solid rgb(19, 19, 19); 12 | 13 | 14 | display: flex; 15 | flex-direction: column; 16 | -webkit-box-shadow: 5px 5px 15px 5px rgba(0,0,0,0.67); 17 | box-shadow: 5px 5px 15px 5px rgba(0,0,0,0.67); 18 | } -------------------------------------------------------------------------------- /client/components/Deployments/DeploymentList.style.css: -------------------------------------------------------------------------------- 1 | .deploymentList { 2 | /* width: 75vw; */ 3 | background-color: #222426; 4 | margin: 10px; 5 | margin-left: 15px; 6 | width: auto; 7 | height: 330px; 8 | border-radius: 10px; 9 | max-width: 1300px; 10 | min-width: 1300px; 11 | border: 1px solid rgb(19, 19, 19); 12 | 13 | 14 | display: flex; 15 | flex-direction: column; 16 | -webkit-box-shadow: 5px 5px 15px 5px rgba(0,0,0,0.67); 17 | box-shadow: 5px 5px 15px 5px rgba(0,0,0,0.67); 18 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Kubermetrics 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /client/components/Services/Service.styles.css: -------------------------------------------------------------------------------- 1 | .serviceContainer { 2 | display: flex; 3 | flex-direction: column; 4 | justify-content: center; 5 | align-items: center; 6 | filter: drop-shadow(-1px 6px 3px rgba(0, 0, 0, 0.5)); 7 | width: 300px; 8 | 9 | } 10 | .serviceContainer:hover { 11 | 12 | filter: drop-shadow(0px 3px 3px rgba(135, 88, 237, 0.276)); 13 | 14 | } 15 | 16 | 17 | p { 18 | margin: 2px; 19 | text-align: center; 20 | text-shadow: 2px 2px 4px #000000; 21 | } 22 | .serviceLabel { 23 | font-size: 18px; 24 | margin-top: 5px; 25 | } -------------------------------------------------------------------------------- /client/pages/metrics/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * ************************************ 3 | * 4 | * @module index.js 5 | * @author team Kubermetrics 6 | * @date 7 | * @description Metrics Page Element for React Router 8 | * 9 | * ************************************ 10 | */ 11 | import React from 'react'; 12 | import ClusterDashboard from '../../components/GrafanaMonitoring/ClusterDashboard'; 13 | 14 | 15 | const MetricsPage = (props) => { 16 | return ( 17 |
18 | 19 |
20 | ) 21 | } 22 | 23 | export default MetricsPage -------------------------------------------------------------------------------- /client/pages/alerts/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * ************************************ 3 | * 4 | * @module index.js 5 | * @author team Kubermetrics 6 | * @date 7 | * @description Alerts Page for React Router 8 | * 9 | * ************************************ 10 | */ 11 | 12 | import React from 'react'; 13 | import PrometheusAlerts from '../../components/PrometheusMonitoring/PrometheusAlerts'; 14 | 15 | 16 | 17 | const AlertsPage = (props) => { 18 | return ( 19 |
20 | 21 |
22 | ) 23 | }; 24 | 25 | 26 | 27 | 28 | export default AlertsPage; -------------------------------------------------------------------------------- /manifests/grafana-datasource-config.yaml: -------------------------------------------------------------------------------- 1 | apiVersion: v1 2 | kind: ConfigMap 3 | metadata: 4 | name: grafana-datasources 5 | namespace: monitoring 6 | data: 7 | prometheus.yaml: |- 8 | { 9 | "apiVersion": 1, 10 | "datasources": [ 11 | { 12 | "access":"proxy", 13 | "editable": true, 14 | "name": "prometheus", 15 | "orgId": 1, 16 | "type": "prometheus", 17 | "url": "http://prometheus-service.monitoring.svc:8080", 18 | "version": 1 19 | } 20 | ] 21 | } -------------------------------------------------------------------------------- /client/store.js: -------------------------------------------------------------------------------- 1 | /** 2 | * ************************************ 3 | * 4 | * @module store.js 5 | * @author Team Kubermetrics 6 | * @date 7 | * @description Redux 'single source of truth' 8 | * 9 | * ************************************ 10 | */ 11 | 12 | import { createStore } from 'redux'; 13 | import { composeWithDevTools } from 'redux-devtools-extension'; 14 | import reducers from './reducers/index'; 15 | 16 | // we are adding composeWithDevTools here to get easy access to the Redux dev tools 17 | const store = createStore( 18 | reducers, 19 | composeWithDevTools() 20 | ); 21 | 22 | export default store; -------------------------------------------------------------------------------- /client/components/Node/currentNode.style.css: -------------------------------------------------------------------------------- 1 | .currentNode { 2 | /* width: 75vw; */ 3 | color: white; 4 | background-color: #222426; 5 | margin: 10px; 6 | margin-left: 15px; 7 | width: 600px; 8 | height: 330px; 9 | border-radius: 10px; 10 | border: 1px solid rgb(19, 19, 19); 11 | 12 | 13 | 14 | display: flex; 15 | flex-direction: column; 16 | align-items: left; 17 | overflow: scroll; 18 | -webkit-box-shadow: 5px 5px 15px 5px rgba(0,0,0,0.67); 19 | box-shadow: 5px 5px 15px 5px rgba(0,0,0,0.67); 20 | } 21 | 22 | .nodeListing { 23 | font-size: 20px; 24 | font-family: 'Roboto', sans-serif; 25 | } 26 | 27 | -------------------------------------------------------------------------------- /client/constants/actionTypes.js: -------------------------------------------------------------------------------- 1 | /** 2 | * ************************************ 3 | * 4 | * @module actionTypes.js 5 | * @author team Kubermetrics 6 | * @date 7 | * @description Action Type Constants 8 | * 9 | * ************************************ 10 | */ 11 | 12 | export const GET_PODS = 'GET_PODS'; 13 | export const GET_INGRESS = 'GET_INGRESS'; 14 | export const GET_NODES = 'GET_NODES'; 15 | export const GET_DEPLOYMENTS = 'GET_DEPLOYMENTS'; 16 | export const CHANGE_NODE = 'CHANGE_NODE' 17 | export const GET_SERVICES = 'GET_SERVICES'; 18 | export const GET_NAMESPACELIST = 'GET_NAMESPACELIST'; 19 | export const CHANGE_NAMESPACE = 'CHANGE_NAMESPACE'; 20 | -------------------------------------------------------------------------------- /client/components/Header/Header.style.css: -------------------------------------------------------------------------------- 1 | .header { 2 | /* width: 75vw; */ 3 | background-color: #343840; 4 | margin: 10px; 5 | margin-left: 15px; 6 | margin-top: 20px; 7 | width: auto; 8 | height: 80px; 9 | border-radius: 10px; 10 | color: white; 11 | border: 1px solid rgb(19, 19, 19); 12 | 13 | display: flex; 14 | justify-content: left; 15 | align-items: center; 16 | flex-direction: row; 17 | overflow: scroll; 18 | -webkit-box-shadow: 5px 5px 15px 5px rgba(0,0,0,0.67); 19 | box-shadow: 5px 5px 15px 5px rgba(0,0,0,0.67); 20 | } 21 | 22 | .menuItem { 23 | color: white; 24 | } 25 | .MuiInputBase-input { 26 | color: white; 27 | } -------------------------------------------------------------------------------- /client/reducers/servicesListReducer.js: -------------------------------------------------------------------------------- 1 | 2 | /** 3 | * ************************************ 4 | * 5 | * @module servicesListReducer 6 | * @author team Kubermetrics 7 | * @date 8 | * @description reducer for service list 9 | * 10 | * ************************************ 11 | */ 12 | import * as types from '../constants/actionTypes'; 13 | 14 | 15 | const initialState = { 16 | services: [] 17 | } 18 | 19 | const servicesListReducer = (state = initialState, action) => { 20 | switch(action.type) { 21 | case types.GET_SERVICES: 22 | return {...state, services: action.payload} 23 | 24 | default: 25 | return state; 26 | } 27 | } 28 | 29 | export default servicesListReducer; -------------------------------------------------------------------------------- /client/components/Deployments/Deployment.style.css: -------------------------------------------------------------------------------- 1 | .podContainer { 2 | display: flex; 3 | flex-direction: column; 4 | justify-content: center; 5 | align-items: center; 6 | filter: drop-shadow(-1px 6px 3px rgba(0, 0, 0, 0.5)); 7 | width: 300px; 8 | 9 | } 10 | .podContainer:hover { 11 | 12 | filter: 13 | drop-shadow(5px 0px 0px rgb(143, 92, 254)) 14 | drop-shadow(-5px 0px 0px rgb(143, 92, 254)) 15 | drop-shadow(0px -5px 0px rgb(143, 92, 254)) 16 | drop-shadow(0px 5px 0px rgb(143, 92, 254)) 17 | 18 | } 19 | 20 | 21 | p { 22 | margin: 2px; 23 | text-align: center; 24 | text-shadow: 2px 2px 4px #000000; 25 | } 26 | .podLabel { 27 | font-size: 18px; 28 | margin-top: 5px; 29 | } 30 | -------------------------------------------------------------------------------- /client/reducers/podsListReducer.js: -------------------------------------------------------------------------------- 1 | /** 2 | * ************************************ 3 | * 4 | * @module podsListReducer 5 | * @author team Kubermetrics 6 | * @date 7 | * @description reducer for pods list 8 | * 9 | * ************************************ 10 | */ 11 | 12 | import * as types from '../constants/actionTypes'; 13 | 14 | const initialState = { 15 | pods: [] 16 | }; 17 | 18 | const podsListReducer = (state = initialState, action) => { 19 | 20 | const { type, payload } = action; 21 | 22 | switch (type) { 23 | case types.GET_PODS: 24 | return { ...state, pods: action.payload } 25 | 26 | default: 27 | return state; 28 | 29 | } 30 | } 31 | 32 | export default podsListReducer; -------------------------------------------------------------------------------- /client/src/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * ************************************ 3 | * 4 | * @module index.jsx 5 | * @author team Kubermetrics 6 | * @date 7 | * @description Entry Point to Front End 8 | * 9 | * ************************************ 10 | */ 11 | import '@babel/polyfill'; 12 | import { Provider } from 'react-redux'; 13 | import React from 'react'; 14 | import ReactDOM from 'react-dom'; 15 | import App from './App.jsx' 16 | import store from '../store' 17 | import { BrowserRouter } from 'react-router-dom'; 18 | 19 | 20 | 21 | ReactDOM.render( 22 | 23 | 24 | 25 | 26 | , 27 | document.getElementById('root') 28 | ); 29 | -------------------------------------------------------------------------------- /client/reducers/ingressListReducer.js: -------------------------------------------------------------------------------- 1 | /** 2 | * ************************************ 3 | * 4 | * @module ingressList 5 | * @author team Kubermetrics 6 | * @date 7 | * @description reducer for pods list 8 | * 9 | * ************************************ 10 | */ 11 | 12 | import * as types from '../constants/actionTypes'; 13 | 14 | const initialState = { 15 | ingresses: [], 16 | }; 17 | 18 | const ingressListReducer = (state = initialState, action) => { 19 | 20 | const { type, payload } = action; 21 | 22 | switch (type) { 23 | case types.GET_INGRESS: 24 | return { ...state, ingresses: action.payload } 25 | default: 26 | return state; 27 | 28 | } 29 | } 30 | 31 | export default ingressListReducer; -------------------------------------------------------------------------------- /client/components/PrometheusMonitoring/PrometheusAlerts.js: -------------------------------------------------------------------------------- 1 | /** 2 | * ************************************ 3 | * 4 | * @module PrometheusAlerts.js 5 | * @author team Kubermetrics 6 | * @date 7 | * @description React Component prometheus iframe 8 | * 9 | * ************************************ 10 | */ 11 | import React from 'react' 12 | 13 | 14 | class PrometheusAlerts extends React.Component { 15 | render() { 16 | //suppose user is received from props 17 | const { user } = this.props 18 | return ( 19 | 20 |