diff --git a/src/common/__tests__/user-store.test.ts b/src/common/__tests__/user-store.test.ts index b74941a790..a2bdd097f7 100644 --- a/src/common/__tests__/user-store.test.ts +++ b/src/common/__tests__/user-store.test.ts @@ -45,6 +45,19 @@ describe("user store tests", () => { expect(us.seenContexts.has("bar")).toBe(true); }); + it("allows adding and listing hidden metrics", () => { + const us = UserStore.getInstance(); + + us.hiddenMetrics.add("foo"); + expect(us.hiddenMetrics.size).toBe(1); + + us.hiddenMetrics.add("foo"); + us.hiddenMetrics.add("bar"); + expect(us.hiddenMetrics.size).toBe(2); + expect(us.hiddenMetrics.has("foo")).toBe(true); + expect(us.hiddenMetrics.has("bar")).toBe(true); + }); + it("allows setting and getting preferences", () => { const us = UserStore.getInstance(); diff --git a/src/common/user-store.ts b/src/common/user-store.ts index b0294d9e5a..836404f832 100644 --- a/src/common/user-store.ts +++ b/src/common/user-store.ts @@ -10,12 +10,14 @@ import { kubeConfigDefaultPath, loadConfig } from "./kube-helpers"; import { appEventBus } from "./event-bus"; import logger from "../main/logger"; import path from "path"; +import { ResourceType } from "../renderer/components/+preferences/select-metrics-dialog"; export interface UserStoreModel { kubeConfigPath: string; lastSeenAppVersion: string; seenContexts: string[]; preferences: UserPreferences; + hiddenMetrics: string[]; } export interface UserPreferences { @@ -28,7 +30,8 @@ export interface UserPreferences { downloadBinariesPath?: string; kubectlBinariesPath?: string; openAtLogin?: boolean; - hiddenTableColumns?: Record + hiddenTableColumns?: Record; + hideMetrics?: boolean; } export class UserStore extends BaseStore { @@ -47,6 +50,7 @@ export class UserStore extends BaseStore { @observable kubeConfigPath = kubeConfigDefaultPath; // used in add-cluster page for providing context @observable seenContexts = observable.set(); @observable newContexts = observable.set(); + @observable hiddenMetrics = observable.set(); @observable preferences: UserPreferences = { allowTelemetry: true, @@ -56,6 +60,7 @@ export class UserStore extends BaseStore { downloadKubectlBinaries: true, // Download kubectl binaries matching cluster version openAtLogin: false, hiddenTableColumns: {}, + hideMetrics: false, }; protected async handleOnLoad() { @@ -84,6 +89,10 @@ export class UserStore extends BaseStore { return semver.gt(getAppVersion(), this.lastSeenAppVersion); } + isMetricHidden(resource: ResourceType) { + return this.preferences.hideMetrics || this.hiddenMetrics.has(resource); + } + @action setHiddenTableColumns(tableId: string, names: Set | string[]) { this.preferences.hiddenTableColumns[tableId] = Array.from(names); @@ -145,7 +154,7 @@ export class UserStore extends BaseStore { @action protected async fromStore(data: Partial = {}) { - const { lastSeenAppVersion, seenContexts = [], preferences, kubeConfigPath } = data; + const { lastSeenAppVersion, seenContexts = [], preferences, kubeConfigPath, hiddenMetrics = [] } = data; if (lastSeenAppVersion) { this.lastSeenAppVersion = lastSeenAppVersion; @@ -155,6 +164,7 @@ export class UserStore extends BaseStore { this.kubeConfigPath = kubeConfigPath; } this.seenContexts.replace(seenContexts); + this.hiddenMetrics.replace(hiddenMetrics); Object.assign(this.preferences, preferences); } @@ -164,6 +174,7 @@ export class UserStore extends BaseStore { lastSeenAppVersion: this.lastSeenAppVersion, seenContexts: Array.from(this.seenContexts), preferences: this.preferences, + hiddenMetrics: Array.from(this.hiddenMetrics), }; return toJS(model, { diff --git a/src/renderer/components/+cluster/cluster-issues.scss b/src/renderer/components/+cluster/cluster-issues.scss index 8886fa40e3..154807d110 100644 --- a/src/renderer/components/+cluster/cluster-issues.scss +++ b/src/renderer/components/+cluster/cluster-issues.scss @@ -53,3 +53,7 @@ } } } + +.OnlyClusterIssues { + grid-row: row1-start / row2-end; +} diff --git a/src/renderer/components/+cluster/cluster-overview.scss b/src/renderer/components/+cluster/cluster-overview.scss index c0534f4fff..cc695ef7ba 100644 --- a/src/renderer/components/+cluster/cluster-overview.scss +++ b/src/renderer/components/+cluster/cluster-overview.scss @@ -7,7 +7,9 @@ display: grid; grid-gap: $gridGap; grid-template-columns: repeat(auto-fit, minmax(500px, 1fr)); - grid-template-rows: 1fr 1fr; + grid-template-rows: + [row1-start] 1fr + [row2-start] 1fr; @include media(">1600px") { grid-template-columns: 1fr 1fr; @@ -21,4 +23,4 @@ padding-top: 0; } } -} \ No newline at end of file +} diff --git a/src/renderer/components/+cluster/cluster-overview.tsx b/src/renderer/components/+cluster/cluster-overview.tsx index bc587671dc..4153ba6581 100644 --- a/src/renderer/components/+cluster/cluster-overview.tsx +++ b/src/renderer/components/+cluster/cluster-overview.tsx @@ -13,6 +13,8 @@ import { ClusterIssues } from "./cluster-issues"; import { ClusterMetrics } from "./cluster-metrics"; import { clusterOverviewStore } from "./cluster-overview.store"; import { ClusterPieCharts } from "./cluster-pie-charts"; +import { userStore } from "../../../common/user-store"; +import { ResourceType } from "../+preferences/select-metrics-dialog"; @observer export class ClusterOverview extends React.Component { @@ -37,19 +39,40 @@ export class ClusterOverview extends React.Component { this.metricPoller.stop(); } + renderMetrics(isMetricsHidden: boolean) { + if (isMetricsHidden) { + return null; + } + + return ( + <> + + + + ); + } + + renderClusterOverview(isLoaded: boolean, isMetricsHidden: boolean) { + if (!isLoaded) { + return ; + } + + return ( + <> + {this.renderMetrics(isMetricsHidden)} + + + ); + } + render() { const isLoaded = nodesStore.isLoaded && podsStore.isLoaded; + const isMetricsHidden = userStore.isMetricHidden(ResourceType.Cluster); return (
- {!isLoaded ? : ( - <> - - - - - )} + {this.renderClusterOverview(isLoaded, isMetricsHidden)}
); diff --git a/src/renderer/components/+network-ingresses/ingress-details.tsx b/src/renderer/components/+network-ingresses/ingress-details.tsx index a80a794713..ade7737f0a 100644 --- a/src/renderer/components/+network-ingresses/ingress-details.tsx +++ b/src/renderer/components/+network-ingresses/ingress-details.tsx @@ -4,7 +4,7 @@ import React from "react"; import { disposeOnUnmount, observer } from "mobx-react"; import { reaction } from "mobx"; import { DrawerItem, DrawerTitle } from "../drawer"; -import { Ingress, ILoadBalancerIngress } from "../../api/endpoints"; +import { ILoadBalancerIngress, Ingress } from "../../api/endpoints"; import { Table, TableCell, TableHead, TableRow } from "../table"; import { KubeEventDetails } from "../+events/kube-event-details"; import { ingressStore } from "./ingress.store"; @@ -14,6 +14,8 @@ import { IngressCharts } from "./ingress-charts"; import { KubeObjectMeta } from "../kube-object/kube-object-meta"; import { kubeObjectDetailRegistry } from "../../api/kube-object-detail-registry"; import { getBackendServiceNamePort } from "../../api/endpoints/ingress.api"; +import { userStore } from "../../../common/user-store"; +import { ResourceType } from "../+preferences/select-metrics-dialog"; interface Props extends KubeObjectDetailsProps { } @@ -106,17 +108,20 @@ export class IngressDetails extends React.Component { "Network", "Duration", ]; + const isMetricHidden = userStore.isMetricHidden(ResourceType.Ingress); const { serviceName, servicePort } = ingress.getServiceNamePort(); return (
- ingressStore.loadMetrics(ingress)} - tabs={metricTabs} object={ingress} params={{ metrics }} - > - - + {!isMetricHidden && ( + ingressStore.loadMetrics(ingress)} + tabs={metricTabs} object={ingress} params={{ metrics }} + > + + + )} {ingress.getPorts()} diff --git a/src/renderer/components/+nodes/node-details.tsx b/src/renderer/components/+nodes/node-details.tsx index 810837d59d..b727a1a227 100644 --- a/src/renderer/components/+nodes/node-details.tsx +++ b/src/renderer/components/+nodes/node-details.tsx @@ -17,6 +17,8 @@ import { PodDetailsList } from "../+workloads-pods/pod-details-list"; import { KubeObjectMeta } from "../kube-object/kube-object-meta"; import { KubeEventDetails } from "../+events/kube-event-details"; import { kubeObjectDetailRegistry } from "../../api/kube-object-detail-registry"; +import { userStore } from "../../../common/user-store"; +import { ResourceType } from "../+preferences/select-metrics-dialog"; interface Props extends KubeObjectDetailsProps { } @@ -52,10 +54,11 @@ export class NodeDetails extends React.Component { "Disk", "Pods", ]; + const isMetricHidden = userStore.isMetricHidden(ResourceType.Node); return (
- {podsStore.isLoaded && ( + {!isMetricHidden && podsStore.isLoaded && ( nodesStore.loadMetrics(node.getName())} tabs={metricTabs} object={node} params={{ metrics }} diff --git a/src/renderer/components/+preferences/preferences.tsx b/src/renderer/components/+preferences/preferences.tsx index 56e881d9f5..a5b39a8b26 100644 --- a/src/renderer/components/+preferences/preferences.tsx +++ b/src/renderer/components/+preferences/preferences.tsx @@ -18,6 +18,7 @@ import { KubectlBinaries } from "./kubectl-binaries"; import { appPreferenceRegistry } from "../../../extensions/registries/app-preference-registry"; import { PageLayout } from "../layout/page-layout"; import { AddHelmRepoDialog } from "./add-helm-repo-dialog"; +import { SelectMetricsDialog } from "./select-metrics-dialog"; @observer export class Preferences extends React.Component { @@ -151,7 +152,7 @@ export class Preferences extends React.Component { onClick={AddHelmRepoDialog.open} />
- this.loadHelmRepos()}/> + this.loadHelmRepos()}/>
{Array.from(this.helmAddedRepos).map(([name, repo]) => { const tooltipId = `message-${name}`; @@ -191,6 +192,16 @@ export class Preferences extends React.Component { Does not affect cluster communications! +

Metrics availability

+
+
+
{appPreferenceRegistry.getItems().map(({ title, components: { Hint, Input } }, index) => { return ( diff --git a/src/renderer/components/+preferences/select-metrics-dialog.scss b/src/renderer/components/+preferences/select-metrics-dialog.scss new file mode 100644 index 0000000000..cbbb3aa16d --- /dev/null +++ b/src/renderer/components/+preferences/select-metrics-dialog.scss @@ -0,0 +1,10 @@ +.SelectMetricsDialog { + .Select { + &__placeholder { + width: 100%; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + } + } +} diff --git a/src/renderer/components/+preferences/select-metrics-dialog.tsx b/src/renderer/components/+preferences/select-metrics-dialog.tsx new file mode 100644 index 0000000000..62744fe86f --- /dev/null +++ b/src/renderer/components/+preferences/select-metrics-dialog.tsx @@ -0,0 +1,120 @@ +import "./select-metrics-dialog.scss"; + +import React from "react"; +import { observer } from "mobx-react"; +import { observable } from "mobx"; +import { Dialog, DialogProps } from "../dialog/dialog"; +import { Checkbox } from "../checkbox/checkbox"; +import { Wizard, WizardStep } from "../wizard/wizard"; +import { userStore } from "../../../common/user-store"; +import { Select, SelectOption } from "../select/select"; +import { Icon } from "../icon/icon"; +import { components, PlaceholderProps } from "react-select"; + +interface Props extends Partial { +} + +export enum ResourceType { + Cluster = "Cluster", + Node = "Node", + Pod = "Pod", + Deployment = "Deployment", + StatefulSet = "StatefulSet", + Container = "Container", + Ingress = "Ingress", + VolumeClaim = "VolumeClaim", + ReplicaSet = "ReplicaSet", + DaemonSet = "DaemonSet", +} + +const Placeholder = observer((props: PlaceholderProps) => { + const getPlaceholder = (): React.ReactNode => { + if (userStore.hiddenMetrics.size >= 1) { + return <>Metrics: {Array.from(userStore.hiddenMetrics).join(", ")}; + } + else { + return <>Select metrics...; + } + }; + + return ( + + {getPlaceholder()} + + ); +}); + +@observer +export class SelectMetricsDialog extends React.Component { + + @observable static isOpen = false; + + static open() { + SelectMetricsDialog.isOpen = true; + } + + static close() { + SelectMetricsDialog.isOpen = false; + } + + onChange(values: ResourceType[]) { + values.map(value => { + if (userStore.hiddenMetrics.has(value)) { + userStore.hiddenMetrics.delete(value); + } else { + userStore.hiddenMetrics.add(value); + } + }); + } + + reset = () => { + userStore.hiddenMetrics.clear(); + userStore.preferences.hideMetrics = false; + }; + + render() { + const { ...dialogProps } = this.props; + const header =
Select metrics to hide
; + + return ( + + + +
+