forked from lensapp/lens
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Basic workspace overview (lensapp#2047)
* basic workspace overview Signed-off-by: Jim Ehrismann <jehrismann@mirantis.com> * css tweaks for landing page as a PageLayout Signed-off-by: Jim Ehrismann <jehrismann@mirantis.com> * address review comments Signed-off-by: Jim Ehrismann <jehrismann@mirantis.com> * more review comment addressing, added overview to workspace command palette Signed-off-by: Jim Ehrismann <jehrismann@mirantis.com> * added back the landing page startup hint Signed-off-by: Jim Ehrismann <jehrismann@mirantis.com> * refactoring as per review comments Signed-off-by: Jim Ehrismann <jehrismann@mirantis.com> * added original landing page back only for default workspace with no clusters Signed-off-by: Jim Ehrismann <jehrismann@mirantis.com> * Workspace overview layout tweaks (lensapp#2302) * tweaks workspace overview layout Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com> * cluster settings on top Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com> * header logo for add cluster page Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com> * tweak landing page Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com> * combine left menu icons Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com> * always show bottom status bar Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com> * tweak Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com> * integration test fixes Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com> * change cluster menu Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com> * first attempt to fix integration test Signed-off-by: Jim Ehrismann <jehrismann@mirantis.com> * lint Signed-off-by: Jim Ehrismann <jehrismann@mirantis.com> * get selectors right for integration test Signed-off-by: Jim Ehrismann <jehrismann@miranits.com> Co-authored-by: Jim Ehrismann <jehrismann@mirantis.com> Co-authored-by: Jim Ehrismann <jehrismann@miranits.com> * address review comments, and rebased to master Signed-off-by: Jim Ehrismann <jehrismann@mirantis.com> Co-authored-by: Jari Kolehmainen <jari.kolehmainen@gmail.com> Co-authored-by: Jim Ehrismann <jehrismann@miranits.com>
- Loading branch information
1 parent
2e8f94b
commit 713ec8c
Showing
17 changed files
with
355 additions
and
127 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,60 +1,15 @@ | ||
.LandingPage { | ||
width: 100%; | ||
height: 100%; | ||
.PageLayout.LandingOverview { | ||
--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; | ||
.content-wrapper { | ||
|
||
&:before { | ||
border-right-color: white; | ||
} | ||
.content { | ||
margin: unset; | ||
max-width: unset; | ||
} | ||
} | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,40 +1,47 @@ | ||
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 { workspaceStore } from "../../../common/workspace-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 { | ||
@observable showHint = true; | ||
|
||
get workspace(): Workspace { | ||
return workspaceStore.currentWorkspace; | ||
} | ||
|
||
@computed | ||
get clusters() { | ||
return clusterStore.getByWorkspaceId(this.workspace.id); | ||
} | ||
|
||
componentDidMount() { | ||
const noClustersInScope = !this.clusters.length; | ||
const showStartupHint = this.showHint; | ||
|
||
if (showStartupHint && noClustersInScope) { | ||
Notifications.info(<><b>Welcome!</b><p>Get started by associating one or more clusters to Lens</p></>, { | ||
timeout: 30_000, | ||
id: "landing-welcome" | ||
}); | ||
} | ||
} | ||
|
||
render() { | ||
const clusters = clusterStore.getByWorkspaceId(workspaceStore.currentWorkspaceId); | ||
const noClustersInScope = !clusters.length; | ||
const showStartupHint = this.showHint && noClustersInScope; | ||
const showBackButton = this.clusters.length > 0; | ||
const header = <><Icon svg="logo-lens" big /> <h2>{this.workspace.name}</h2></>; | ||
|
||
return ( | ||
<div className="LandingPage flex"> | ||
{showStartupHint && ( | ||
<div className="startup-hint flex column gaps" onMouseEnter={() => this.showHint = false}> | ||
<p>This is the quick launch menu.</p> | ||
<p> | ||
Associate clusters and choose the ones you want to access via quick launch menu by clicking the + button. | ||
</p> | ||
</div> | ||
)} | ||
{noClustersInScope && ( | ||
<div className="no-clusters flex column gaps box center"> | ||
<h1> | ||
Welcome! | ||
</h1> | ||
<p> | ||
Get started by associating one or more clusters to Lens. | ||
</p> | ||
</div> | ||
)} | ||
</div> | ||
<PageLayout className="LandingOverview flex" header={header} provideBackButtonNavigation={showBackButton} showOnTop={true}> | ||
<WorkspaceOverview workspace={this.workspace}/> | ||
</PageLayout> | ||
); | ||
} | ||
} |
74 changes: 74 additions & 0 deletions
74
src/renderer/components/+landing-page/workspace-cluster-menu.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,74 @@ | ||
import React from "react"; | ||
import { ClusterItem, WorkspaceClusterStore } from "./workspace-cluster.store"; | ||
import { autobind, cssNames } from "../../utils"; | ||
import { MenuActions, MenuActionsProps } from "../menu/menu-actions"; | ||
import { MenuItem } from "../menu"; | ||
import { Icon } from "../icon"; | ||
import { Workspace } from "../../../common/workspace-store"; | ||
import { clusterSettingsURL } from "../+cluster-settings"; | ||
import { navigate } from "../../navigation"; | ||
|
||
interface Props extends MenuActionsProps { | ||
clusterItem: ClusterItem; | ||
workspace: Workspace; | ||
workspaceClusterStore: WorkspaceClusterStore; | ||
} | ||
|
||
export class WorkspaceClusterMenu extends React.Component<Props> { | ||
|
||
@autobind() | ||
remove() { | ||
const { clusterItem, workspaceClusterStore } = this.props; | ||
|
||
return workspaceClusterStore.remove(clusterItem); | ||
} | ||
|
||
@autobind() | ||
gotoSettings() { | ||
const { clusterItem } = this.props; | ||
|
||
navigate(clusterSettingsURL({ | ||
params: { | ||
clusterId: clusterItem.id | ||
} | ||
})); | ||
} | ||
|
||
@autobind() | ||
renderRemoveMessage() { | ||
const { clusterItem, workspace } = this.props; | ||
|
||
return ( | ||
<p>Remove cluster <b>{clusterItem.name}</b> from workspace <b>{workspace.name}</b>?</p> | ||
); | ||
} | ||
|
||
|
||
renderContent() { | ||
const { toolbar } = this.props; | ||
|
||
return ( | ||
<> | ||
<MenuItem onClick={this.gotoSettings}> | ||
<Icon material="settings" interactive={toolbar} title="Settings"/> | ||
<span className="title">Settings</span> | ||
</MenuItem> | ||
</> | ||
); | ||
} | ||
|
||
render() { | ||
const { clusterItem: { cluster: { isManaged } }, className, ...menuProps } = this.props; | ||
|
||
return ( | ||
<MenuActions | ||
{...menuProps} | ||
className={cssNames("WorkspaceClusterMenu", className)} | ||
removeAction={isManaged ? null : this.remove} | ||
removeConfirmationMessage={this.renderRemoveMessage} | ||
> | ||
{this.renderContent()} | ||
</MenuActions> | ||
); | ||
} | ||
} |
72 changes: 72 additions & 0 deletions
72
src/renderer/components/+landing-page/workspace-cluster.store.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,72 @@ | ||
import { WorkspaceId } from "../../../common/workspace-store"; | ||
import { Cluster } from "../../../main/cluster"; | ||
import { clusterStore } from "../../../common/cluster-store"; | ||
import { ItemObject, ItemStore } from "../../item.store"; | ||
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?.toString() ?? "unknown"; | ||
} | ||
|
||
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; | ||
} | ||
} | ||
|
||
/** an ItemStore of the clusters belonging to a given workspace */ | ||
@autobind() | ||
export class WorkspaceClusterStore extends ItemStore<ClusterItem> { | ||
|
||
workspaceId: WorkspaceId; | ||
|
||
constructor(workspaceId: WorkspaceId) { | ||
super(); | ||
this.workspaceId = workspaceId; | ||
} | ||
|
||
loadAll() { | ||
return this.loadItems( | ||
() => ( | ||
clusterStore | ||
.getByWorkspaceId(this.workspaceId) | ||
.filter(cluster => cluster.enabled) | ||
.map(cluster => new ClusterItem(cluster)) | ||
) | ||
); | ||
} | ||
|
||
async remove(clusterItem: ClusterItem) { | ||
const { cluster: { isManaged, id: clusterId }} = clusterItem; | ||
|
||
if (!isManaged) { | ||
return super.removeItem(clusterItem, () => clusterStore.removeById(clusterId)); | ||
} | ||
} | ||
} |
32 changes: 32 additions & 0 deletions
32
src/renderer/components/+landing-page/workspace-overview.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,32 @@ | ||
.WorkspaceOverview { | ||
max-height: 50%; | ||
.Table { | ||
padding-bottom: 60px; | ||
} | ||
.TableCell { | ||
display: flex; | ||
align-items: left; | ||
|
||
&.cluster-icon { | ||
align-items: center; | ||
flex-grow: 0.2; | ||
padding: 0; | ||
} | ||
|
||
&.connected { | ||
color: var(--colorSuccess); | ||
} | ||
} | ||
|
||
.TableCell.status { | ||
flex: 0.1; | ||
} | ||
|
||
.TableCell.distribution { | ||
flex: 0.2; | ||
} | ||
|
||
.TableCell.version { | ||
flex: 0.2; | ||
} | ||
} |
Oops, something went wrong.