From 290c57b166eb8a01c12abc0cc17ba2f86b01e258 Mon Sep 17 00:00:00 2001 From: Arthur Tu Date: Sun, 21 Mar 2021 14:50:47 -0700 Subject: [PATCH 1/3] make protobuff the default method and move it as an env var in backend --- client/src/app.tsx | 9 ++++++++ client/src/services/api.ts | 5 +++++ client/src/utils/localStorageHelpers.ts | 26 ++++++++++++++++++++++ client/src/utils/protoHelpers.ts | 29 ++++++++++--------------- server/index.js | 8 +++++++ 5 files changed, 59 insertions(+), 18 deletions(-) create mode 100644 client/src/utils/localStorageHelpers.ts diff --git a/client/src/app.tsx b/client/src/app.tsx index d4f62b6..1e315ca 100755 --- a/client/src/app.tsx +++ b/client/src/app.tsx @@ -4,9 +4,11 @@ import {Notifier} from './components/notifier'; import Error from './components/error'; import {initRouter} from './router'; import log from './utils/log'; +import {setContext, Context} from './utils/localStorageHelpers'; import Button from './components/button'; import LogoSvg from './art/k8dashSvg'; import HamburgerSvg from './art/hamburgerSvg'; +import api from './services/api'; type State = { content?: ReactNode; @@ -27,6 +29,7 @@ class App extends Component<{}, State> { this.setState({content, contentDate: Date.now(), hasError: false}); window.scrollTo(0, 0); }); + this.setContext(); } componentDidCatch(err: Error, info: any) { // eslint-disable-line class-methods-use-this @@ -34,6 +37,12 @@ class App extends Component<{}, State> { this.setState({hasError: true}); } + setContext() { + api.context().then((context: Context) => { + setContext(context); + }); + } + render() { const {content, contentDate, hasError, menuToggled} = this.state || {}; diff --git a/client/src/services/api.ts b/client/src/services/api.ts index 90eb33d..dc01017 100644 --- a/client/src/services/api.ts +++ b/client/src/services/api.ts @@ -46,6 +46,7 @@ const apis = { exec, metrics: metricsFactory(), oidc: oidcFactory(), + context, clusterRole, namespace: namespaceService, @@ -187,4 +188,8 @@ function logs(namespace: string, name: string, container: string, tailLines: num } } +function context() { + return request('/context'); +} + export default apis; diff --git a/client/src/utils/localStorageHelpers.ts b/client/src/utils/localStorageHelpers.ts new file mode 100644 index 0000000..0d0492a --- /dev/null +++ b/client/src/utils/localStorageHelpers.ts @@ -0,0 +1,26 @@ +const CONTEXT = 'context'; + +export type Context = { + protoEnabled?: boolean; + promethusEnabled?: boolean; +} + +export function getContextItem(item: string) { + return getItem(CONTEXT)[item]; +} + +export function setContext(context: Context) { + setItem(CONTEXT, { + protoEnabled: true, + promethusEnabled: false, + ...context, + }); +} + +export function setItem(item: string, object: Object) { + localStorage.setItem(item, JSON.stringify(object)); +} + +export function getItem(item: string) { + return JSON.parse(localStorage.getItem(item) || ''); +} diff --git a/client/src/utils/protoHelpers.ts b/client/src/utils/protoHelpers.ts index 5a2eda2..949b114 100644 --- a/client/src/utils/protoHelpers.ts +++ b/client/src/utils/protoHelpers.ts @@ -1,4 +1,5 @@ import {k8s} from '../proto/proto'; +import {getContextItem} from './localStorageHelpers'; const {Unknown} = k8s.io.apimachinery.pkg.runtime; const {NodeMetrics} = k8s.io.metrics.pkg.apis.metrics.v1beta1; @@ -18,36 +19,36 @@ export const kindMap: { | typeof EventList | typeof NodeList | typeof PodList, - path: string + paths: string[] } } = { NodeMetrics: { proto: NodeMetrics, - path: '/apis/metrics.k8s.io/v1beta1/node', + paths: ['/apis/metrics.k8s.io/v1beta1/node'], }, NodeMetricsList: { proto: NodeMetricsList, - path: '/apis/metrics.k8s.io/v1beta1/nodes', + paths: ['/apis/metrics.k8s.io/v1beta1/nodes'], }, PodMetrics: { proto: PodMetrics, - path: '/apis/metrics.k8s.io/v1beta1/pod', + paths: ['/apis/metrics.k8s.io/v1beta1/pod'], }, PodMetricsList: { proto: PodMetricsList, - path: '/apis/metrics.k8s.io/v1beta1/pods', + paths: ['/apis/metrics.k8s.io/v1beta1/pods'], }, EventList: { proto: EventList, - path: 'api/v1/events', + paths: ['api/v1/events'], }, NodeList: { proto: NodeList, - path: 'api/v1/nodes', + paths: ['api/v1/nodes'], }, PodList: { proto: PodList, - path: 'api/v1/pods', + paths: ['api/v1/pods', 'v1beta1/namespaces/kube-system/pods', 'v1/namespaces/kube-system/pods'], }, }; @@ -68,22 +69,14 @@ export function protoParser(raw: Uint8Array) { } export function isProtoEnabled(): boolean { - return window.localStorage.getItem('protoEnabled') === 'true'; + return getContextItem('protoEnabled'); } export function isProtoEligible(url: string) { for (const value of Object.values(kindMap)) { - if (url.includes(value.path)) { + if (value.paths.some(path => url.includes(path))) { return true; } } return false; } - -export function enableProto(): void { - window.localStorage.setItem('protoEnabled', 'true'); -} - -export function disableProto(): void { - window.localStorage.setItem('protoEnabled', 'false'); -} diff --git a/server/index.js b/server/index.js index a7c6734..5b8a4ba 100644 --- a/server/index.js +++ b/server/index.js @@ -14,6 +14,7 @@ const OIDC_SECRET = process.env.OIDC_SECRET; const OIDC_URL = process.env.OIDC_URL; const OIDC_SCOPES = process.env.OIDC_SCOPES || 'openid email'; const OIDC_METADATA = JSON.parse(process.env.OIDC_METADATA || '{}'); +const USE_PROTO = process.env.USE_PROTO !== 'false' || true; const clientMetadata = Object.assign({client_id: OIDC_CLIENT_ID, client_secret: OIDC_SECRET}, OIDC_METADATA); console.log('OIDC_URL: ', OIDC_URL || 'None'); @@ -50,6 +51,7 @@ if (NODE_ENV !== 'production') app.use(cors()); app.use('/', preAuth, express.static('public')); app.get('/oidc', getOidc); app.post('/oidc', postOidc); +app.get('/context', getContext); app.use('/*', createProxyMiddleware(proxySettings)); app.use(handleErrors); @@ -57,6 +59,12 @@ const port = process.env.SERVER_PORT || 4654; http.createServer(app).listen(port); console.log(`Server started. Listening on port ${port}`); +function getContext(req, res) { + res.json({ + "protoEnabled": USE_PROTO, + }) +} + function preAuth(req, res, next) { const auth = req.header('Authorization'); From 4ae7740304d51e6d001b8b619fd4b7538cbfa963 Mon Sep 17 00:00:00 2001 From: Arthur Tu Date: Sun, 6 Jun 2021 21:51:06 -0700 Subject: [PATCH 2/3] remove proto storage logic --- client/src/app.tsx | 8 -------- client/src/services/api.ts | 5 ----- client/src/services/apiProxy.ts | 4 ++-- client/src/utils/localStorageHelpers.ts | 26 ------------------------- client/src/utils/protoHelpers.ts | 5 ----- server/index.js | 8 -------- 6 files changed, 2 insertions(+), 54 deletions(-) delete mode 100644 client/src/utils/localStorageHelpers.ts diff --git a/client/src/app.tsx b/client/src/app.tsx index 1e315ca..152172d 100755 --- a/client/src/app.tsx +++ b/client/src/app.tsx @@ -4,7 +4,6 @@ import {Notifier} from './components/notifier'; import Error from './components/error'; import {initRouter} from './router'; import log from './utils/log'; -import {setContext, Context} from './utils/localStorageHelpers'; import Button from './components/button'; import LogoSvg from './art/k8dashSvg'; import HamburgerSvg from './art/hamburgerSvg'; @@ -29,7 +28,6 @@ class App extends Component<{}, State> { this.setState({content, contentDate: Date.now(), hasError: false}); window.scrollTo(0, 0); }); - this.setContext(); } componentDidCatch(err: Error, info: any) { // eslint-disable-line class-methods-use-this @@ -37,12 +35,6 @@ class App extends Component<{}, State> { this.setState({hasError: true}); } - setContext() { - api.context().then((context: Context) => { - setContext(context); - }); - } - render() { const {content, contentDate, hasError, menuToggled} = this.state || {}; diff --git a/client/src/services/api.ts b/client/src/services/api.ts index dc01017..90eb33d 100644 --- a/client/src/services/api.ts +++ b/client/src/services/api.ts @@ -46,7 +46,6 @@ const apis = { exec, metrics: metricsFactory(), oidc: oidcFactory(), - context, clusterRole, namespace: namespaceService, @@ -188,8 +187,4 @@ function logs(namespace: string, name: string, container: string, tailLines: num } } -function context() { - return request('/context'); -} - export default apis; diff --git a/client/src/services/apiProxy.ts b/client/src/services/apiProxy.ts index d144c03..82ba7fc 100644 --- a/client/src/services/apiProxy.ts +++ b/client/src/services/apiProxy.ts @@ -2,7 +2,7 @@ import _ from 'lodash'; import {getToken, logout} from './auth'; import log from '../utils/log'; import {ApiItem} from '../utils/types'; -import {isProtoEligible, isProtoEnabled, protoParser} from '../utils/protoHelpers'; +import {isProtoEligible, protoParser} from '../utils/protoHelpers'; type StreamCallback = (data: T) => void; type ErrorCallback = (err: Error) => void; @@ -62,7 +62,7 @@ async function requestInner(path: string, params?: any, autoLogoutOnAuthError = } export async function request(path: string, params?: any, autoLogoutOnAuthError = true) { - if (isProtoEligible(path) && isProtoEnabled()) { + if (isProtoEligible(path)) { return requestProto(path, params, autoLogoutOnAuthError); } return requestJson(path, params, autoLogoutOnAuthError); diff --git a/client/src/utils/localStorageHelpers.ts b/client/src/utils/localStorageHelpers.ts deleted file mode 100644 index 0d0492a..0000000 --- a/client/src/utils/localStorageHelpers.ts +++ /dev/null @@ -1,26 +0,0 @@ -const CONTEXT = 'context'; - -export type Context = { - protoEnabled?: boolean; - promethusEnabled?: boolean; -} - -export function getContextItem(item: string) { - return getItem(CONTEXT)[item]; -} - -export function setContext(context: Context) { - setItem(CONTEXT, { - protoEnabled: true, - promethusEnabled: false, - ...context, - }); -} - -export function setItem(item: string, object: Object) { - localStorage.setItem(item, JSON.stringify(object)); -} - -export function getItem(item: string) { - return JSON.parse(localStorage.getItem(item) || ''); -} diff --git a/client/src/utils/protoHelpers.ts b/client/src/utils/protoHelpers.ts index 949b114..3618c86 100644 --- a/client/src/utils/protoHelpers.ts +++ b/client/src/utils/protoHelpers.ts @@ -1,5 +1,4 @@ import {k8s} from '../proto/proto'; -import {getContextItem} from './localStorageHelpers'; const {Unknown} = k8s.io.apimachinery.pkg.runtime; const {NodeMetrics} = k8s.io.metrics.pkg.apis.metrics.v1beta1; @@ -68,10 +67,6 @@ export function protoParser(raw: Uint8Array) { return {}; } -export function isProtoEnabled(): boolean { - return getContextItem('protoEnabled'); -} - export function isProtoEligible(url: string) { for (const value of Object.values(kindMap)) { if (value.paths.some(path => url.includes(path))) { diff --git a/server/index.js b/server/index.js index 5b8a4ba..a7c6734 100644 --- a/server/index.js +++ b/server/index.js @@ -14,7 +14,6 @@ const OIDC_SECRET = process.env.OIDC_SECRET; const OIDC_URL = process.env.OIDC_URL; const OIDC_SCOPES = process.env.OIDC_SCOPES || 'openid email'; const OIDC_METADATA = JSON.parse(process.env.OIDC_METADATA || '{}'); -const USE_PROTO = process.env.USE_PROTO !== 'false' || true; const clientMetadata = Object.assign({client_id: OIDC_CLIENT_ID, client_secret: OIDC_SECRET}, OIDC_METADATA); console.log('OIDC_URL: ', OIDC_URL || 'None'); @@ -51,7 +50,6 @@ if (NODE_ENV !== 'production') app.use(cors()); app.use('/', preAuth, express.static('public')); app.get('/oidc', getOidc); app.post('/oidc', postOidc); -app.get('/context', getContext); app.use('/*', createProxyMiddleware(proxySettings)); app.use(handleErrors); @@ -59,12 +57,6 @@ const port = process.env.SERVER_PORT || 4654; http.createServer(app).listen(port); console.log(`Server started. Listening on port ${port}`); -function getContext(req, res) { - res.json({ - "protoEnabled": USE_PROTO, - }) -} - function preAuth(req, res, next) { const auth = req.header('Authorization'); From 6ec5e85d0314c3066998d747c08469d1245e28e2 Mon Sep 17 00:00:00 2001 From: Arthur Tu Date: Sun, 6 Jun 2021 21:52:37 -0700 Subject: [PATCH 3/3] remove unused import --- client/src/app.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/client/src/app.tsx b/client/src/app.tsx index 152172d..d4f62b6 100755 --- a/client/src/app.tsx +++ b/client/src/app.tsx @@ -7,7 +7,6 @@ import log from './utils/log'; import Button from './components/button'; import LogoSvg from './art/k8dashSvg'; import HamburgerSvg from './art/hamburgerSvg'; -import api from './services/api'; type State = { content?: ReactNode;