diff --git a/src/common/cluster-store.ts b/src/common/cluster-store.ts index 6bf932f0f4..7ae402eefe 100644 --- a/src/common/cluster-store.ts +++ b/src/common/cluster-store.ts @@ -15,6 +15,7 @@ import { handleRequest, requestMain, subscribeToBroadcast, unsubscribeAllFromBro import _ from "lodash"; import move from "array-move"; import type { WorkspaceId } from "./workspace-store"; +import { ResourceType } from "../renderer/components/+cluster-settings/components/cluster-metrics-setting"; export interface ClusterIconUpload { clusterId: string; @@ -34,7 +35,7 @@ export type ClusterPrometheusMetadata = { export interface ClusterStoreModel { activeCluster?: ClusterId; // last opened cluster - clusters?: ClusterModel[] + clusters?: ClusterModel[]; } export type ClusterId = string; @@ -70,12 +71,13 @@ export interface ClusterModel { kubeConfig?: string; // yaml } -export interface ClusterPreferences extends ClusterPrometheusPreferences{ +export interface ClusterPreferences extends ClusterPrometheusPreferences { terminalCWD?: string; clusterName?: string; iconOrder?: number; icon?: string; httpsProxy?: string; + hiddenMetrics?: string[]; } export interface ClusterPrometheusPreferences { @@ -211,6 +213,10 @@ export class ClusterStore extends BaseStore { return this.activeCluster === id; } + isMetricHidden(resource: ResourceType) { + return Boolean(this.active?.preferences.hiddenMetrics?.includes(resource)); + } + @action setActive(id: ClusterId) { const clusterId = this.clusters.has(id) ? id : null; diff --git a/src/common/user-store.ts b/src/common/user-store.ts index 66ab628453..97ba08f3cc 100644 --- a/src/common/user-store.ts +++ b/src/common/user-store.ts @@ -29,7 +29,7 @@ export interface UserPreferences { downloadBinariesPath?: string; kubectlBinariesPath?: string; openAtLogin?: boolean; - hiddenTableColumns?: Record + hiddenTableColumns?: Record; } export class UserStore extends BaseStore { diff --git a/src/renderer/components/+cluster-settings/components/cluster-metrics-setting.scss b/src/renderer/components/+cluster-settings/components/cluster-metrics-setting.scss new file mode 100644 index 0000000000..eede36623e --- /dev/null +++ b/src/renderer/components/+cluster-settings/components/cluster-metrics-setting.scss @@ -0,0 +1,12 @@ +.MetricsSelect { + $spacing: $padding; + --flex-gap: #{$spacing}; + + .Badge { + margin-top: $spacing; + } + + .Button { + margin-top: $spacing; + } +} diff --git a/src/renderer/components/+cluster-settings/components/cluster-metrics-setting.tsx b/src/renderer/components/+cluster-settings/components/cluster-metrics-setting.tsx new file mode 100644 index 0000000000..bc51ddf061 --- /dev/null +++ b/src/renderer/components/+cluster-settings/components/cluster-metrics-setting.tsx @@ -0,0 +1,118 @@ +import "./cluster-metrics-setting.scss"; + +import React from "react"; +import { disposeOnUnmount, observer } from "mobx-react"; +import { Select, SelectOption } from "../../select/select"; +import { Icon } from "../../icon/icon"; +import { Button } from "../../button/button"; +import { SubTitle } from "../../layout/sub-title"; +import { Cluster } from "../../../../main/cluster"; +import { observable, reaction } from "mobx"; + +interface Props { + cluster: Cluster; +} + +export enum ResourceType { + Cluster = "Cluster", + Node = "Node", + Pod = "Pod", + Deployment = "Deployment", + StatefulSet = "StatefulSet", + Container = "Container", + Ingress = "Ingress", + VolumeClaim = "VolumeClaim", + ReplicaSet = "ReplicaSet", + DaemonSet = "DaemonSet", +} + +@observer +export class ClusterMetricsSetting extends React.Component { + @observable hiddenMetrics = observable.set(); + + componentDidMount() { + this.hiddenMetrics = observable.set(this.props.cluster.preferences.hiddenMetrics ?? []); + + disposeOnUnmount(this, [ + reaction(() => this.props.cluster.preferences.hiddenMetrics, () => { + this.hiddenMetrics = observable.set(this.props.cluster.preferences.hiddenMetrics ?? []); + }), + ]); + } + + save = () => { + this.props.cluster.preferences.hiddenMetrics = Array.from(this.hiddenMetrics); + }; + + onChangeSelect = (values: SelectOption[]) => { + for (const { value } of values) { + if (this.hiddenMetrics.has(value)) { + this.hiddenMetrics.delete(value); + } else { + this.hiddenMetrics.add(value); + } + } + this.save(); + }; + + onChangeButton = () => { + Object.keys(ResourceType).map(value => + this.hiddenMetrics.add(value) + ); + this.save(); + }; + + reset = () => { + this.hiddenMetrics.clear(); + this.save(); + }; + + formatOptionLabel = ({ value: resource }: SelectOption) => ( +
+ {resource} + {this.hiddenMetrics.has(resource) && } +
+ ); + + renderMetricsSelect() { + + return ( + <> +