hendrik/lens
1
0
Fork 0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00
Code Issues Projects Releases Wiki Activity

Improve how extensions can manage cluster/workspace stores (#1176)

Browse Source 
Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>
This commit is contained in:
Jari Kolehmainen 2020-10-30 09:45:09 +02:00 committed by GitHub
parent e4c56512e7
commit 4a6553967d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 256 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/common/__tests__/cluster-store.test.ts
View File

@ -64,13 +64,13 @@ describe("empty config", () => {
it("sets active cluster", () => {
clusterStore.setActive("foo");
expect(clusterStore.activeCluster.id).toBe("foo");
expect(clusterStore.active.id).toBe("foo");
})
})
describe("with prod and dev clusters added", () => {
beforeEach(() => {
clusterStore.addCluster(
clusterStore.addClusters(
new Cluster({
id: "prod",
contextName: "prod",

42
src/common/__tests__/workspace-store.test.ts
View File

@ -10,7 +10,7 @@ jest.mock("electron", () => {
}
})
import { WorkspaceStore } from "../workspace-store"
import { Workspace, WorkspaceStore } from "../workspace-store"
describe("workspace store tests", () => {
describe("for an empty config", () => {
@ -35,16 +35,16 @@ describe("workspace store tests", () => {
it("cannot remove the default workspace", () => {
const ws = WorkspaceStore.getInstance<WorkspaceStore>();
expect(() => ws.removeWorkspace(WorkspaceStore.defaultId)).toThrowError("Cannot remove");
expect(() => ws.removeWorkspaceById(WorkspaceStore.defaultId)).toThrowError("Cannot remove");
})
it("can update default workspace name", () => {
const ws = WorkspaceStore.getInstance<WorkspaceStore>();
ws.saveWorkspace({
ws.addWorkspace(new Workspace({
id: WorkspaceStore.defaultId,
name: "foobar",
});
}));
expect(ws.currentWorkspace.name).toBe("foobar");
})
@ -52,10 +52,10 @@ describe("workspace store tests", () => {
it("can add workspaces", () => {
const ws = WorkspaceStore.getInstance<WorkspaceStore>();
ws.saveWorkspace({
ws.addWorkspace(new Workspace({
id: "123",
name: "foobar",
});
}));
expect(ws.getById("123").name).toBe("foobar");
})
@ -69,10 +69,10 @@ describe("workspace store tests", () => {
it("can set a existent workspace to be active", () => {
const ws = WorkspaceStore.getInstance<WorkspaceStore>();
ws.saveWorkspace({
ws.addWorkspace(new Workspace({
id: "abc",
name: "foobar",
});
}));
expect(() => ws.setActive("abc")).not.toThrowError();
})
@ -80,15 +80,15 @@ describe("workspace store tests", () => {
it("can remove a workspace", () => {
const ws = WorkspaceStore.getInstance<WorkspaceStore>();
ws.saveWorkspace({
ws.addWorkspace(new Workspace({
id: "123",
name: "foobar",
});
ws.saveWorkspace({
}));
ws.addWorkspace(new Workspace({
id: "1234",
name: "foobar 1",
});
ws.removeWorkspace("123");
}));
ws.removeWorkspaceById("123");
expect(ws.workspaces.size).toBe(2);
})
@ -96,10 +96,10 @@ describe("workspace store tests", () => {
it("cannot create workspace with existent name", () => {
const ws = WorkspaceStore.getInstance<WorkspaceStore>();
ws.saveWorkspace({
ws.addWorkspace(new Workspace({
id: "someid",
name: "default",
});
}));
expect(ws.workspacesList.length).toBe(1); // default workspace only
})
@ -107,10 +107,10 @@ describe("workspace store tests", () => {
it("cannot create workspace with empty name", () => {
const ws = WorkspaceStore.getInstance<WorkspaceStore>();
ws.saveWorkspace({
ws.addWorkspace(new Workspace({
id: "random",
name: "",
});
}));
expect(ws.workspacesList.length).toBe(1); // default workspace only
})
@ -118,10 +118,10 @@ describe("workspace store tests", () => {
it("cannot create workspace with ' ' name", () => {
const ws = WorkspaceStore.getInstance<WorkspaceStore>();
ws.saveWorkspace({
ws.addWorkspace(new Workspace({
id: "random",
name: " ",
});
}));
expect(ws.workspacesList.length).toBe(1); // default workspace only
})
@ -129,10 +129,10 @@ describe("workspace store tests", () => {
it("trim workspace name", () => {
const ws = WorkspaceStore.getInstance<WorkspaceStore>();
ws.saveWorkspace({
ws.addWorkspace(new Workspace({
id: "random",
name: "default ",
});
}));
expect(ws.workspacesList.length).toBe(1); // default workspace only
})

83
src/common/cluster-store.ts
View File

@ -33,11 +33,12 @@ export type ClusterId = string;
export interface ClusterModel {
id: ClusterId;
kubeConfigPath: string;
workspace?: WorkspaceId;
contextName?: string;
preferences?: ClusterPreferences;
metadata?: ClusterMetadata;
kubeConfigPath: string;
ownerRef?: string;
/** @deprecated */
kubeConfig?: string; // yaml
@ -72,25 +73,34 @@ export class ClusterStore extends BaseStore<ClusterStoreModel> {
return filePath;
}
@observable activeCluster: ClusterId;
@observable removedClusters = observable.map<ClusterId, Cluster>();
@observable clusters = observable.map<ClusterId, Cluster>();
private constructor() {
super({
configName: "lens-cluster-store",
accessPropertiesByDotNotation: false, // To make dots safe in cluster context names
migrations: migrations,
});
this.pushStateToViewsPeriodically()
}
@observable activeClusterId: ClusterId;
@observable removedClusters = observable.map<ClusterId, Cluster>();
@observable clusters = observable.map<ClusterId, Cluster>();
protected pushStateToViewsPeriodically() {
if (!ipcRenderer) {
// This is a bit of a hack, we need to do this because we might loose messages that are sent before a view is ready
setInterval(() => {
this.pushState()
}, 5000)
}
}
registerIpcListener() {
logger.info(`[CLUSTER-STORE] start to listen (${webFrame.routingId})`)
ipcRenderer.on("cluster:state", (event, model: ClusterState) => {
this.applyWithoutSync(() => {
logger.silly(`[CLUSTER-STORE]: received push-state at ${location.host} (${webFrame.routingId})`, model);
this.getById(model.id)?.updateModel(model);
})
ipcRenderer.on("cluster:state", (event, clusterId: string, state: ClusterState) => {
logger.silly(`[CLUSTER-STORE]: received push-state at ${location.host} (${webFrame.routingId})`, clusterId, state);
this.getById(clusterId)?.setState(state)
})
}
@ -99,21 +109,35 @@ export class ClusterStore extends BaseStore<ClusterStoreModel> {
ipcRenderer.removeAllListeners("cluster:state")
}
@computed get activeCluster(): Cluster | null {
return this.getById(this.activeClusterId);
pushState() {
this.clusters.forEach((c) => {
c.pushState()
})
}
get activeClusterId() {
return this.activeCluster
}
@computed get clustersList(): Cluster[] {
return Array.from(this.clusters.values());
}
@computed get enabledClustersList(): Cluster[] {
return this.clustersList.filter((c) => c.enabled)
}
@computed get active(): Cluster | null {
return this.getById(this.activeCluster);
}
isActive(id: ClusterId) {
return this.activeClusterId === id;
return this.activeCluster === id;
}
@action
setActive(id: ClusterId) {
this.activeClusterId = this.clusters.has(id) ? id : null;
this.activeCluster = this.clusters.has(id) ? id : null;
}
@action
@ -145,12 +169,28 @@ export class ClusterStore extends BaseStore<ClusterStoreModel> {
}
@action
addCluster(...models: ClusterModel[]) {
addClusters(...models: ClusterModel[]): Cluster[] {
const clusters: Cluster[] = []
models.forEach(model => {
appEventBus.emit({name: "cluster", action: "add"})
const cluster = new Cluster(model);
this.clusters.set(model.id, cluster);
clusters.push(this.addCluster(model))
})
return clusters
}
@action
addCluster(model: ClusterModel | Cluster ): Cluster {
appEventBus.emit({name: "cluster", action: "add"})
let cluster = model as Cluster;
if (!(model instanceof Cluster)) {
cluster = new Cluster(model)
}
this.clusters.set(model.id, cluster);
return cluster
}
async removeCluster(model: ClusterModel) {
await this.removeById(model.id)
}
@action
@ -159,7 +199,7 @@ export class ClusterStore extends BaseStore<ClusterStoreModel> {
const cluster = this.getById(clusterId);
if (cluster) {
this.clusters.delete(clusterId);
if (this.activeClusterId === clusterId) {
if (this.activeCluster === clusterId) {
this.setActive(null);
}
// remove only custom kubeconfigs (pasted as text)
@ -189,6 +229,9 @@ export class ClusterStore extends BaseStore<ClusterStoreModel> {
cluster.updateModel(clusterModel);
} else {
cluster = new Cluster(clusterModel);
if (!cluster.isManaged) {
cluster.enabled = true
}
}
newClusters.set(clusterModel.id, cluster);
}
@ -200,14 +243,14 @@ export class ClusterStore extends BaseStore<ClusterStoreModel> {
}
});
this.activeClusterId = newClusters.has(activeCluster) ? activeCluster : null;
this.activeCluster = newClusters.has(activeCluster) ? activeCluster : null;
this.clusters.replace(newClusters);
this.removedClusters.replace(removedClusters);
}
toJSON(): ClusterStoreModel {
return toJS({
activeCluster: this.activeClusterId,
activeCluster: this.activeCluster,
clusters: this.clustersList.map(cluster => cluster.toJSON()),
}, {
recurseEverything: true

115
src/common/workspace-store.ts
View File

@ -1,19 +1,77 @@
import { action, computed, observable, toJS } from "mobx";
import { ipcRenderer } from "electron";
import { action, computed, observable, toJS, reaction } from "mobx";
import { BaseStore } from "./base-store";
import { clusterStore } from "./cluster-store"
import { appEventBus } from "./event-bus";
import { broadcastIpc } from "../common/ipc";
import logger from "../main/logger";
export type WorkspaceId = string;
export interface WorkspaceStoreModel {
currentWorkspace?: WorkspaceId;
workspaces: Workspace[]
workspaces: WorkspaceModel[]
}
export interface Workspace {
export interface WorkspaceModel {
id: WorkspaceId;
name: string;
description?: string;
ownerRef?: string;
}
export interface WorkspaceState {
enabled: boolean;
}
export class Workspace implements WorkspaceModel, WorkspaceState {
@observable id: WorkspaceId
@observable name: string
@observable description?: string
@observable ownerRef?: string
@observable enabled: boolean
constructor(data: WorkspaceModel) {
Object.assign(this, data)
if (!ipcRenderer) {
reaction(() => this.getState(), () => {
this.pushState()
})
}
}
get isManaged(): boolean {
return !!this.ownerRef
}
getState(): WorkspaceState {
return {
enabled: this.enabled
}
}
pushState(state = this.getState()) {
logger.silly("[WORKSPACE] pushing state", {...state, id: this.id})
broadcastIpc({
channel: "workspace:state",
args: [this.id, toJS(state)],
});
}
@action
setState(state: WorkspaceState) {
Object.assign(this, state)
}
toJSON(): WorkspaceModel {
return toJS({
id: this.id,
name: this.name,
description: this.description,
ownerRef: this.ownerRef
})
}
}
export class WorkspaceStore extends BaseStore<WorkspaceStoreModel> {
@ -23,15 +81,33 @@ export class WorkspaceStore extends BaseStore<WorkspaceStoreModel> {
super({
configName: "lens-workspace-store",
});
if (!ipcRenderer) {
setInterval(() => {
this.pushState()
}, 5000)
}
}
registerIpcListener() {
logger.info("[WORKSPACE-STORE] starting to listen state events")
ipcRenderer.on("workspace:state", (event, workspaceId: string, state: WorkspaceState) => {
this.getById(workspaceId)?.setState(state)
})
}
unregisterIpcListener() {
super.unregisterIpcListener()
ipcRenderer.removeAllListeners("workspace:state")
}
@observable currentWorkspaceId = WorkspaceStore.defaultId;
@observable workspaces = observable.map<WorkspaceId, Workspace>({
[WorkspaceStore.defaultId]: {
[WorkspaceStore.defaultId]: new Workspace({
id: WorkspaceStore.defaultId,
name: "default"
}
})
});
@computed get currentWorkspace(): Workspace {
@ -42,6 +118,16 @@ export class WorkspaceStore extends BaseStore<WorkspaceStoreModel> {
return Array.from(this.workspaces.values());
}
@computed get enabledWorkspacesList() {
return this.workspacesList.filter((w) => w.enabled);
}
pushState() {
this.workspaces.forEach((w) => {
w.pushState()
})
}
isDefault(id: WorkspaceId) {
return id === WorkspaceStore.defaultId;
}
@ -61,11 +147,11 @@ export class WorkspaceStore extends BaseStore<WorkspaceStoreModel> {
throw new Error(`workspace ${id} doesn't exist`);
}
this.currentWorkspaceId = id;
clusterStore.activeClusterId = null; // fixme: handle previously selected cluster from current workspace
clusterStore.activeCluster = null; // fixme: handle previously selected cluster from current workspace
}
@action
saveWorkspace(workspace: Workspace) {
addWorkspace(workspace: Workspace) {
const { id, name } = workspace;
const existingWorkspace = this.getById(id);
if (!name.trim() || this.getByName(name.trim())) {
@ -82,7 +168,12 @@ export class WorkspaceStore extends BaseStore<WorkspaceStoreModel> {
}
@action
removeWorkspace(id: WorkspaceId) {
removeWorkspace(workspace: Workspace) {
this.removeWorkspaceById(workspace.id)
}
@action
removeWorkspaceById(id: WorkspaceId) {
const workspace = this.getById(id);
if (!workspace) return;
if (this.isDefault(id)) {
@ -103,7 +194,11 @@ export class WorkspaceStore extends BaseStore<WorkspaceStoreModel> {
}
if (workspaces.length) {
this.workspaces.clear();
workspaces.forEach(workspace => {
workspaces.forEach(ws => {
const workspace = new Workspace(ws)
if (!workspace.isManaged) {
workspace.enabled = true
}
this.workspaces.set(workspace.id, workspace)
})
}
@ -112,7 +207,7 @@ export class WorkspaceStore extends BaseStore<WorkspaceStoreModel> {
toJSON(): WorkspaceStoreModel {
return toJS({
currentWorkspace: this.currentWorkspaceId,
workspaces: this.workspacesList,
workspaces: this.workspacesList.map((w) => w.toJSON()),
}, {
recurseEverything: true
})

4
src/extensions/core-api/stores.ts
View File

@ -1,4 +1,4 @@
export { ExtensionStore } from "../extension-store"
export { clusterStore, ClusterModel } from "../../common/cluster-store"
export { workspaceStore} from "../../common/workspace-store"
export type { Cluster } from "../../main/cluster"
export { Cluster } from "../../main/cluster"
export { workspaceStore, Workspace, WorkspaceModel } from "../../common/workspace-store"

2
src/main/cluster-manager.ts
View File

@ -10,7 +10,7 @@ export class ClusterManager {
constructor(public readonly port: number) {
// auto-init clusters
autorun(() => {
clusterStore.clusters.forEach(cluster => {
clusterStore.enabledClustersList.forEach(cluster => {
if (!cluster.initialized) {
logger.info(`[CLUSTER-MANAGER]: init cluster`, cluster.getMeta());
cluster.init(port);

44
src/main/cluster.ts
View File

@ -1,3 +1,4 @@
import { ipcMain } from "electron"
import type { ClusterId, ClusterMetadata, ClusterModel, ClusterPreferences } from "../common/cluster-store"
import type { IMetricsReqParams } from "../renderer/api/endpoints/metrics.api";
import type { WorkspaceId } from "../common/workspace-store";
@ -33,7 +34,7 @@ export type ClusterRefreshOptions = {
refreshMetadata?: boolean
}
export interface ClusterState extends ClusterModel {
export interface ClusterState {
initialized: boolean;
apiUrl: string;
online: boolean;
@ -47,11 +48,12 @@ export interface ClusterState extends ClusterModel {
allowedResources: string[]
}
export class Cluster implements ClusterModel {
export class Cluster implements ClusterModel, ClusterState {
public id: ClusterId;
public frameId: number;
public kubeCtl: Kubectl
public contextHandler: ContextHandler;
public ownerRef: string;
protected kubeconfigManager: KubeconfigManager;
protected eventDisposers: Function[] = [];
protected activated = false;
@ -65,6 +67,7 @@ export class Cluster implements ClusterModel {
@observable kubeConfigPath: string;
@observable apiUrl: string; // cluster server url
@observable kubeProxyUrl: string; // lens-proxy to kube-api url
@observable enabled = false;
@observable online = false;
@observable accessible = false;
@observable ready = false;
@ -81,6 +84,7 @@ export class Cluster implements ClusterModel {
@computed get available() {
return this.accessible && !this.disconnected;
}
get version(): string {
return String(this.metadata?.version) || ""
}
@ -93,6 +97,10 @@ export class Cluster implements ClusterModel {
}
}
get isManaged(): boolean {
return !!this.ownerRef
}
@action
updateModel(model: ClusterModel) {
Object.assign(this, model);
@ -123,13 +131,15 @@ export class Cluster implements ClusterModel {
const refreshTimer = setInterval(() => !this.disconnected && this.refresh(), 30000); // every 30s
const refreshMetadataTimer = setInterval(() => !this.disconnected && this.refreshMetadata(), 900000); // every 15 minutes
this.eventDisposers.push(
reaction(this.getState, this.pushState),
() => {
clearInterval(refreshTimer);
clearInterval(refreshMetadataTimer);
},
);
if (ipcMain) {
this.eventDisposers.push(
reaction(() => this.getState(), () => this.pushState()),
() => {
clearInterval(refreshTimer);
clearInterval(refreshMetadataTimer);
},
);
}
}
protected unbindEvents() {
@ -361,6 +371,7 @@ export class Cluster implements ClusterModel {
workspace: this.workspace,
preferences: this.preferences,
metadata: this.metadata,
ownerRef: this.ownerRef
};
return toJS(model, {
recurseEverything: true
@ -368,9 +379,8 @@ export class Cluster implements ClusterModel {
}
// serializable cluster-state used for sync btw main <-> renderer
getState = (): ClusterState => {
getState(): ClusterState {
const state: ClusterState = {
...this.toJSON(),
initialized: this.initialized,
apiUrl: this.apiUrl,
online: this.online,
@ -388,14 +398,18 @@ export class Cluster implements ClusterModel {
})
}
pushState = (state = this.getState()): ClusterState => {
@action
setState(state: ClusterState) {
Object.assign(this, state)
}
pushState(state = this.getState()) {
logger.silly(`[CLUSTER]: push-state`, state);
broadcastIpc({
channel: "cluster:state",
frameId: this.frameId,
args: [state],
});
return state;
args: [this.id, state],
})
}
// get cluster system meta, e.g. use in "logger"

2
src/main/tray.ts
View File

@ -80,7 +80,7 @@ export function createTrayMenu(windowManager: WindowManager): Menu {
},
{
label: "Clusters",
submenu: workspaceStore.workspacesList
submenu: workspaceStore.enabledWorkspacesList
.filter(workspace => clusterStore.getByWorkspaceId(workspace.id).length > 0) // hide empty workspaces
.map(workspace => {
const clusters = clusterStore.getByWorkspaceId(workspace.id);

1
src/renderer/bootstrap.tsx
View File

@ -40,6 +40,7 @@ export async function bootstrap(App: AppComponent) {
// Register additional store listeners
clusterStore.registerIpcListener();
workspaceStore.registerIpcListener();
// init app's dependencies if any
if (App.init) {

2
src/renderer/components/+add-cluster/add-cluster.tsx
View File

@ -163,7 +163,7 @@ export class AddCluster extends React.Component {
})
runInAction(() => {
clusterStore.addCluster(...newClusters);
clusterStore.addClusters(...newClusters);
if (newClusters.length === 1) {
const clusterId = newClusters[0].id;
clusterStore.setActive(clusterId);

2
src/renderer/components/+cluster-settings/components/cluster-workspace-setting.tsx
View File

@ -26,7 +26,7 @@ export class ClusterWorkspaceSetting extends React.Component<Props> {
<Select
value={this.props.cluster.workspace}
onChange={({value}) => this.props.cluster.workspace = value}
options={workspaceStore.workspacesList.map(w =>
options={workspaceStore.enabledWorkspacesList.map(w =>
({value: w.id, label: w.name})
)}
/>

3
src/renderer/components/+cluster-settings/components/remove-cluster-button.tsx
View File

@ -28,8 +28,9 @@ export class RemoveClusterButton extends React.Component<Props> {
}
render() {
const { cluster } = this.props;
return (
<Button accent onClick={this.confirmRemoveCluster} className="button-area">
<Button accent onClick={this.confirmRemoveCluster} className="button-area" disabled={cluster.isManaged}>
Remove Cluster
</Button>
);

4
src/renderer/components/+workspaces/workspace-menu.tsx
View File

@ -19,7 +19,7 @@ export class WorkspaceMenu extends React.Component<Props> {
render() {
const { className, ...menuProps } = this.props;
const { workspacesList, currentWorkspace } = workspaceStore;
const { enabledWorkspacesList, currentWorkspace } = workspaceStore;
return (
<Menu
{...menuProps}
@ -32,7 +32,7 @@ export class WorkspaceMenu extends React.Component<Props> {
<Link className="workspaces-title" to={workspacesURL()}>
<Trans>Workspaces</Trans>
</Link>
{workspacesList.map(({ id: workspaceId, name, description }) => {
{enabledWorkspacesList.map(({ id: workspaceId, name, description }) => {
return (
<MenuItem
key={workspaceId}

21
src/renderer/components/+workspaces/workspaces.tsx
View File

@ -19,8 +19,12 @@ export class Workspaces extends React.Component {
@observable editingWorkspaces = observable.map<WorkspaceId, Workspace>();
@computed get workspaces(): Workspace[] {
const currentWorkspaces: Map<WorkspaceId, Workspace> = new Map()
workspaceStore.enabledWorkspacesList.forEach((w) => {
currentWorkspaces.set(w.id, w)
})
const allWorkspaces = new Map([
...workspaceStore.workspaces,
...currentWorkspaces,
...this.editingWorkspaces,
]);
return Array.from(allWorkspaces.values());
@ -42,7 +46,7 @@ export class Workspaces extends React.Component {
saveWorkspace = (id: WorkspaceId) => {
const draft = toJS(this.editingWorkspaces.get(id));
const workspace = workspaceStore.saveWorkspace(draft);
const workspace = workspaceStore.addWorkspace(draft);
if (workspace) {
this.clearEditing(id);
}
@ -50,11 +54,11 @@ export class Workspaces extends React.Component {
addWorkspace = () => {
const workspaceId = uuid();
this.editingWorkspaces.set(workspaceId, {
this.editingWorkspaces.set(workspaceId, new Workspace({
id: workspaceId,
name: "",
description: "",
})
description: ""
}))
}
editWorkspace = (id: WorkspaceId) => {
@ -76,7 +80,7 @@ export class Workspaces extends React.Component {
},
ok: () => {
this.clearEditing(id);
workspaceStore.removeWorkspace(id);
workspaceStore.removeWorkspace(workspace);
},
message: (
<div className="confirm flex column gaps">
@ -107,11 +111,12 @@ export class Workspaces extends React.Component {
<Trans>Workspaces</Trans>
</h2>
<div className="items flex column gaps">
{this.workspaces.map(({ id: workspaceId, name, description }) => {
{this.workspaces.map(({ id: workspaceId, name, description, ownerRef }) => {
const isActive = workspaceStore.currentWorkspaceId === workspaceId;
const isDefault = workspaceStore.isDefault(workspaceId);
const isEditing = this.editingWorkspaces.has(workspaceId);
const editingWorkspace = this.editingWorkspaces.get(workspaceId);
const managed = !!ownerRef
const className = cssNames("workspace flex gaps", {
active: isActive,
editing: isEditing,
@ -130,7 +135,7 @@ export class Workspaces extends React.Component {
{isActive && <span> <Trans>(current)</Trans></span>}
</span>
<span className="description">{description}</span>
{!isDefault && (
{!isDefault && !managed && (
<Fragment>
<Icon
material="edit"

14
src/renderer/components/cluster-manager/clusters-menu.tsx
View File

@ -101,9 +101,11 @@ export class ClustersMenu extends React.Component<Props> {
}
render() {
const { className } = this.props;
const { newContexts } = userStore;
const clusters = clusterStore.getByWorkspaceId(workspaceStore.currentWorkspaceId);
const { className } = this.props
const { newContexts } = userStore
const workspace = workspaceStore.getById(workspaceStore.currentWorkspaceId)
const clusters = clusterStore.getByWorkspaceId(workspace.id)
const activeClusterId = clusterStore.activeCluster
return (
<div className={cssNames("ClustersMenu flex column", className)}>
<div className="clusters flex column gaps">
@ -112,7 +114,7 @@ export class ClustersMenu extends React.Component<Props> {
{({ innerRef, droppableProps, placeholder }: DroppableProvided) => (
<div ref={innerRef} {...droppableProps}>
{clusters.map((cluster, index) => {
const isActive = cluster.id === clusterStore.activeClusterId;
const isActive = cluster.id === activeClusterId;
return (
<Draggable draggableId={cluster.id} index={index} key={cluster.id}>
{({ draggableProps, dragHandleProps, innerRef }: DraggableProvided) => (
@ -136,11 +138,11 @@ export class ClustersMenu extends React.Component<Props> {
</Droppable>
</DragDropContext>
</div>
<div className="add-cluster" onClick={this.addCluster}>
<div className="add-cluster" >
<Tooltip targetId="add-cluster-icon">
<Trans>Add Cluster</Trans>
</Tooltip>
<Icon big material="add" id="add-cluster-icon"/>
<Icon big material="add" id="add-cluster-icon" disabled={workspace.isManaged} onClick={this.addCluster}/>
{newContexts.size > 0 && (
<Badge className="counter" label={newContexts.size} tooltip={<Trans>new</Trans>}/>
)}