From 394ccbde29874e81eb46b5c228fb1a093ba16a24 Mon Sep 17 00:00:00 2001 From: Sebastian Malton Date: Mon, 17 Aug 2020 15:33:51 -0400 Subject: [PATCH] Add mechanism for users to specify namespaces that are accessible to them. This is generally useful for when the user doesn't have permission to list the namespaces. - Add new component "EditableList" which provides a simple way to display a list of items that can be added too. - Add the ClusterAccessibleNamespaces to the GeneralClusterSettings Signed-off-by: Sebastian Malton --- src/common/cluster-store.ts | 7 ++- src/main/cluster.ts | 19 ++++--- .../cluster-accessible-namespaces.tsx | 37 ++++++++++++ .../components/+cluster-settings/general.tsx | 2 + .../editable-list/editable-list.scss | 12 ++++ .../editable-list/editable-list.tsx | 57 +++++++++++++++++++ .../components/editable-list/index.ts | 1 + 7 files changed, 123 insertions(+), 12 deletions(-) create mode 100644 src/renderer/components/+cluster-settings/components/cluster-accessible-namespaces.tsx create mode 100644 src/renderer/components/editable-list/editable-list.scss create mode 100644 src/renderer/components/editable-list/editable-list.tsx create mode 100644 src/renderer/components/editable-list/index.ts diff --git a/src/common/cluster-store.ts b/src/common/cluster-store.ts index 838e6cc119..7ea92b612a 100644 --- a/src/common/cluster-store.ts +++ b/src/common/cluster-store.ts @@ -39,6 +39,7 @@ export interface ClusterModel { preferences?: ClusterPreferences; metadata?: ClusterMetadata; ownerRef?: string; + accessibleNamespaces?: string[]; /** @deprecated */ kubeConfig?: string; // yaml @@ -179,8 +180,8 @@ export class ClusterStore extends BaseStore { } @action - addCluster(model: ClusterModel | Cluster ): Cluster { - appEventBus.emit({name: "cluster", action: "add"}) + addCluster(model: ClusterModel | Cluster): Cluster { + appEventBus.emit({ name: "cluster", action: "add" }) let cluster = model as Cluster; if (!(model instanceof Cluster)) { cluster = new Cluster(model) @@ -195,7 +196,7 @@ export class ClusterStore extends BaseStore { @action async removeById(clusterId: ClusterId) { - appEventBus.emit({name: "cluster", action: "remove"}) + appEventBus.emit({ name: "cluster", action: "remove" }) const cluster = this.getById(clusterId); if (cluster) { this.clusters.delete(clusterId); diff --git a/src/main/cluster.ts b/src/main/cluster.ts index 656ee67cdb..01e11a48df 100644 --- a/src/main/cluster.ts +++ b/src/main/cluster.ts @@ -80,13 +80,14 @@ export class Cluster implements ClusterModel, ClusterState { @observable metadata: ClusterMetadata = {}; @observable allowedNamespaces: string[] = []; @observable allowedResources: string[] = []; + @observable accessibleNamespaces?: string[]; @computed get available() { return this.accessible && !this.disconnected; } get version(): string { - return String(this.metadata?.version) || "" + return String(this.metadata?.version) || "" } constructor(model: ClusterModel) { @@ -149,7 +150,7 @@ export class Cluster implements ClusterModel, ClusterState { } @action - async activate(force = false ) { + async activate(force = false) { if (this.activated && !force) { return this.pushState(); } @@ -340,7 +341,7 @@ export class Cluster implements ClusterModel, ClusterState { for (const w of warnings) { if (w.involvedObject.kind === 'Pod') { try { - const pod = (await client.readNamespacedPod(w.involvedObject.name, w.involvedObject.namespace)).body; + const { body: pod } = await client.readNamespacedPod(w.involvedObject.name, w.involvedObject.namespace); logger.debug(`checking pod ${w.involvedObject.namespace}/${w.involvedObject.name}`) if (podHasIssues(pod)) { uniqEventSources.add(w.involvedObject.uid); @@ -351,11 +352,10 @@ export class Cluster implements ClusterModel, ClusterState { uniqEventSources.add(w.involvedObject.uid); } } - let nodeNotificationCount = 0; const nodes = (await client.listNode()).body.items; - nodes.map(n => { - nodeNotificationCount = nodeNotificationCount + getNodeWarningConditions(n).length - }); + const nodeNotificationCount = nodes + .map(getNodeWarningConditions) + .reduce((sum, conditions) => sum + conditions.length, 0); return uniqEventSources.size + nodeNotificationCount; } catch (error) { logger.error("Failed to fetch event count: " + JSON.stringify(error)) @@ -371,7 +371,8 @@ export class Cluster implements ClusterModel, ClusterState { workspace: this.workspace, preferences: this.preferences, metadata: this.metadata, - ownerRef: this.ownerRef + ownerRef: this.ownerRef, + accessibleNamespaces: this.accessibleNamespaces, }; return toJS(model, { recurseEverything: true @@ -442,7 +443,7 @@ export class Cluster implements ClusterModel, ClusterState { } catch (error) { const ctx = this.getProxyKubeconfig().getContextObject(this.contextName) if (ctx.namespace) return [ctx.namespace] - return [] + return this.accessibleNamespaces || []; } } diff --git a/src/renderer/components/+cluster-settings/components/cluster-accessible-namespaces.tsx b/src/renderer/components/+cluster-settings/components/cluster-accessible-namespaces.tsx new file mode 100644 index 0000000000..54f5f5ee59 --- /dev/null +++ b/src/renderer/components/+cluster-settings/components/cluster-accessible-namespaces.tsx @@ -0,0 +1,37 @@ +import React from "react"; +import { observer } from "mobx-react"; +import { Cluster } from "../../../../main/cluster"; +import { SubTitle } from "../../layout/sub-title"; +import { EditableList } from "../../editable-list"; +import { observable } from "mobx"; +import { _i18n } from "../../../i18n"; + +interface Props { + cluster: Cluster; +} + +@observer +export class ClusterAccessibleNamespaces extends React.Component { + @observable namespaces = new Set(this.props.cluster.accessibleNamespaces); + + render() { + return ( + <> + +

This setting is useful for manually specifying which namespaces you have access to. This is useful when you don't have permissions to list namespaces.

+ { + this.namespaces.add(newNamespace); + this.props.cluster.accessibleNamespaces = Array.from(this.namespaces); + }} + items={Array.from(this.namespaces)} + remove={({ oldItem: oldNamesapce }) => { + this.namespaces.delete(oldNamesapce); + this.props.cluster.accessibleNamespaces = Array.from(this.namespaces); + }} + /> + + ); + } +} \ No newline at end of file diff --git a/src/renderer/components/+cluster-settings/general.tsx b/src/renderer/components/+cluster-settings/general.tsx index 5fb6e9b81f..1d498bc94b 100644 --- a/src/renderer/components/+cluster-settings/general.tsx +++ b/src/renderer/components/+cluster-settings/general.tsx @@ -6,6 +6,7 @@ import { ClusterIconSetting } from "./components/cluster-icon-setting"; import { ClusterProxySetting } from "./components/cluster-proxy-setting"; import { ClusterPrometheusSetting } from "./components/cluster-prometheus-setting"; import { ClusterHomeDirSetting } from "./components/cluster-home-dir-setting"; +import { ClusterAccessibleNamespaces } from "./components/cluster-accessible-namespaces"; interface Props { cluster: Cluster; @@ -21,6 +22,7 @@ export class General extends React.Component { + ; } } \ No newline at end of file diff --git a/src/renderer/components/editable-list/editable-list.scss b/src/renderer/components/editable-list/editable-list.scss new file mode 100644 index 0000000000..9adcf489c0 --- /dev/null +++ b/src/renderer/components/editable-list/editable-list.scss @@ -0,0 +1,12 @@ +.EditableList { + .EditableListContents { + display: grid; + grid-template-columns: 1fr auto; + + .ValueRemove { + .Icon { + justify-content: unset; + } + } + } +} \ No newline at end of file diff --git a/src/renderer/components/editable-list/editable-list.tsx b/src/renderer/components/editable-list/editable-list.tsx new file mode 100644 index 0000000000..de537857e1 --- /dev/null +++ b/src/renderer/components/editable-list/editable-list.tsx @@ -0,0 +1,57 @@ +import "./editable-list.scss" + +import React from "React"; +import { Icon } from "../icon"; +import { Input } from "../input"; +import { observable } from "mobx"; +import { observer } from "mobx-react"; + +export interface Props { + items: T[], + add: (newItem: string) => void, + remove: (info: { oldItem: T, index: number }) => void, + placeholder?: string, + + // An optional prop used to convert T to a displayable string + // defaults to `String` + display?: (item: T) => string, +} + +@observer +export class EditableList extends React.Component> { + @observable currentNewItem = ""; + + render() { + const { items, add, remove, display = String, placeholder = "Add new item..." } = this.props; + + return ( +
+
+ { + if (val) { + add(val); + } + this.currentNewItem = ""; + }} + placeholder={placeholder} + onChange={val => this.currentNewItem = val} + /> +
+
+ { + items + .map((item, index) => [ + {display(item)}, +
+ remove(({ index, oldItem: item }))} /> +
+ ]) + .flat() + } +
+
+ ) + } +} \ No newline at end of file diff --git a/src/renderer/components/editable-list/index.ts b/src/renderer/components/editable-list/index.ts new file mode 100644 index 0000000000..3ca5ee970e --- /dev/null +++ b/src/renderer/components/editable-list/index.ts @@ -0,0 +1 @@ +export * from "./editable-list" \ No newline at end of file