diff --git a/src/renderer/components/+landing-page/landing-page.scss b/src/renderer/components/+landing-page/landing-page.scss
index 265b901069..ea1eb664ef 100644
--- a/src/renderer/components/+landing-page/landing-page.scss
+++ b/src/renderer/components/+landing-page/landing-page.scss
@@ -1,69 +1,10 @@
-.LandingPage {
- width: 100%;
- height: 100%;
- text-align: center;
- z-index: 0;
-
- &::after {
- content: "";
- background: url(../../components/icon/crane.svg) no-repeat;
- background-position: 0 35%;
- background-size: 85%;
- background-clip: content-box;
- opacity: .75;
- top: 0;
- left: 0;
- bottom: 0;
- right: 0;
- position: absolute;
- z-index: -1;
-
- .theme-light & {
- opacity: 0.2;
- }
- }
-
- .startup-hint {
- $bgc: $mainBackground;
- $arrowSize: 10px;
-
- position: absolute;
- left: 0;
- top: 25px;
- margin: $padding;
- padding: $padding * 2;
- width: 320px;
- background: $bgc;
- color: $textColorAccent;
- filter: drop-shadow(0 0px 2px #ffffff33);
-
- &:before {
- content: "";
- position: absolute;
- width: 0;
- height: 0;
- border-top: $arrowSize solid transparent;
- border-bottom: $arrowSize solid transparent;
- border-right: $arrowSize solid $bgc;
- right: 100%;
- }
-
- .theme-light & {
- filter: drop-shadow(0 0px 2px #777);
- background: white;
-
- &:before {
- border-right-color: white;
- }
- }
- }
-}
-
.PageLayout.LandingOverview {
--width: 100%;
--height: 100%;
text-align: center;
+
+
.content-wrapper {
.content {
diff --git a/src/renderer/components/+landing-page/landing-page.tsx b/src/renderer/components/+landing-page/landing-page.tsx
index ea222ff43c..7baa91336a 100644
--- a/src/renderer/components/+landing-page/landing-page.tsx
+++ b/src/renderer/components/+landing-page/landing-page.tsx
@@ -1,11 +1,13 @@
import "./landing-page.scss";
import React from "react";
-import { observable } from "mobx";
+import { computed, observable } from "mobx";
import { observer } from "mobx-react";
import { clusterStore } from "../../../common/cluster-store";
import { Workspace, workspaceStore } from "../../../common/workspace-store";
import { WorkspaceOverview } from "./workspace-overview";
import { PageLayout } from "../layout/page-layout";
+import { Notifications } from "../notifications";
+import { Icon } from "../icon";
@observer
export class LandingPage extends React.Component {
@@ -15,42 +17,28 @@ export class LandingPage extends React.Component {
return workspaceStore.currentWorkspace;
}
- renderStartupHint() {
- return (
-
this.showHint = false}>
-
This is the quick launch menu.
-
- Associate clusters and choose the ones you want to access via quick launch menu by clicking the + button.
-
-
- );
+ @computed
+ get clusters() {
+ return clusterStore.getByWorkspaceId(this.workspace.id);
+ }
+
+ componentDidMount() {
+ const noClustersInScope = !this.clusters.length;
+ const showStartupHint = this.showHint;
+
+ if (showStartupHint && noClustersInScope) {
+ Notifications.info(<>Welcome!Get started by associating one or more clusters to Lens
>, {
+ timeout: 30_000
+ });
+ }
}
render() {
- const clusters = clusterStore.getByWorkspaceId(this.workspace.id);
- const noClustersInScope = !clusters.length;
- const showStartupHint = this.showHint && noClustersInScope;
-
- const header = Workspace: {this.workspace.name}
;
-
- if (this.workspace.name === "default" && noClustersInScope) {
- return (
-
- {showStartupHint && this.renderStartupHint()}
-
-
- Welcome!
-
-
- Get started by associating one or more clusters to Lens.
-
-
-
- );
- }
+ const showBackButton = this.clusters.length > 0;
+ const header = <> Workspace: {this.workspace.name}
>;
return (
-
+
);
diff --git a/src/renderer/components/+landing-page/workspace-cluster.store.ts b/src/renderer/components/+landing-page/workspace-cluster.store.ts
index 35b4f64880..1117528a99 100644
--- a/src/renderer/components/+landing-page/workspace-cluster.store.ts
+++ b/src/renderer/components/+landing-page/workspace-cluster.store.ts
@@ -6,23 +6,35 @@ import { autobind } from "../../utils";
export class ClusterItem implements ItemObject {
constructor(public cluster: Cluster) {}
-
+
get name() {
return this.cluster.name;
}
+ get distribution() {
+ return (this.cluster.metadata["distribution"] || "unknown").toString();
+ }
+
+ get version() {
+ return this.cluster.version;
+ }
+
+ get connectionStatus() {
+ return this.cluster.online ? "connected" : "disconnected";
+ }
+
getName() {
return this.name;
}
-
+
get id() {
return this.cluster.id;
}
-
+
get clusterId() {
return this.cluster.id;
}
-
+
getId() {
return this.id;
}
@@ -44,6 +56,7 @@ export class WorkspaceClusterStore extends ItemStore {
() => (
clusterStore
.getByWorkspaceId(this.workspaceId)
+ .filter(cluster => cluster.enabled)
.map(cluster => new ClusterItem(cluster))
)
);
@@ -56,8 +69,4 @@ export class WorkspaceClusterStore extends ItemStore {
return super.removeItem(clusterItem, () => clusterStore.removeById(clusterId));
}
}
-
- async removeSelectedItems() {
- return Promise.all(this.selectedItems.map(this.remove));
- }
}
diff --git a/src/renderer/components/+landing-page/workspace-overview.scss b/src/renderer/components/+landing-page/workspace-overview.scss
index d7b70f8c3a..fa156bf74f 100644
--- a/src/renderer/components/+landing-page/workspace-overview.scss
+++ b/src/renderer/components/+landing-page/workspace-overview.scss
@@ -13,7 +13,7 @@
padding: 0;
}
- &.online {
+ &.connected {
color: var(--colorSuccess);
}
}
@@ -22,6 +22,10 @@
flex: 0.1;
}
+ .TableCell.distribution {
+ flex: 0.2;
+ }
+
.TableCell.version {
flex: 0.2;
}
diff --git a/src/renderer/components/+landing-page/workspace-overview.tsx b/src/renderer/components/+landing-page/workspace-overview.tsx
index 6f785fe314..c095abb31b 100644
--- a/src/renderer/components/+landing-page/workspace-overview.tsx
+++ b/src/renderer/components/+landing-page/workspace-overview.tsx
@@ -17,8 +17,9 @@ interface Props {
enum sortBy {
name = "name",
- contextName = "contextName",
+ distribution = "distribution",
version = "version",
+ online = "online"
}
@observer
@@ -44,17 +45,21 @@ export class WorkspaceOverview extends Component {
store={workspaceClusterStore}
sortingCallbacks={{
[sortBy.name]: (item: ClusterItem) => item.name,
- [sortBy.version]: (item: ClusterItem) => item.cluster.version,
+ [sortBy.distribution]: (item: ClusterItem) => item.distribution,
+ [sortBy.version]: (item: ClusterItem) => item.version,
+ [sortBy.online]: (item: ClusterItem) => item.connectionStatus,
}}
renderTableHeader={[
{ title: "Name", className: "name", sortBy: sortBy.name },
+ { title: "Distribution", className: "distribution", sortBy: sortBy.distribution },
{ title: "Version", className: "version", sortBy: sortBy.version },
- { title: "Status", className: "status" },
+ { title: "Status", className: "status", sortBy: sortBy.online },
]}
renderTableContents={(item: ClusterItem) => [
item.name,
- item.cluster.version,
- { title: item.cluster.online ? "online" : "offline", className: kebabCase(item.cluster.online ? "online" : "offline") }
+ item.distribution,
+ item.version,
+ { title: item.connectionStatus, className: kebabCase(item.connectionStatus) }
]}
onDetails={this.showCluster}
addRemoveButtons={{