From e8e79955ad56aafb530c85e1e5818d0f60ed7aca Mon Sep 17 00:00:00 2001 From: Jari Kolehmainen Date: Tue, 9 Mar 2021 12:10:40 +0200 Subject: [PATCH] tweak landing page Signed-off-by: Jari Kolehmainen --- .../+landing-page/landing-page.scss | 63 +------------------ .../components/+landing-page/landing-page.tsx | 52 ++++++--------- .../+landing-page/workspace-cluster.store.ts | 25 +++++--- .../+landing-page/workspace-overview.scss | 6 +- .../+landing-page/workspace-overview.tsx | 15 +++-- 5 files changed, 54 insertions(+), 107 deletions(-) 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={{