mirror of
https://github.com/lensapp/lens.git
synced 2025-05-20 05:10:56 +00:00
Basic workspace overview (#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 (#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>
This commit is contained in:
17 files changed
+357
-129
No files matched your search
@@ -27,14 +27,16 @@
|
||||
}
|
||||
}
|
||||
|
||||
> .add-cluster {
|
||||
> .WorkspaceMenu {
|
||||
position: relative;
|
||||
margin-bottom: $margin;
|
||||
|
||||
.Icon {
|
||||
margin-bottom: $margin * 1.5;
|
||||
border-radius: $radius;
|
||||
padding: $padding / 3;
|
||||
color: $addClusterIconColor;
|
||||
background: #ffffff66;
|
||||
color: #ffffff66;
|
||||
background: unset;
|
||||
cursor: pointer;
|
||||
|
||||
&.active {
|
||||
@@ -43,28 +45,10 @@
|
||||
|
||||
&:hover {
|
||||
box-shadow: none;
|
||||
background: #ffffff;
|
||||
color: #ffffff;
|
||||
background-color: unset;
|
||||
}
|
||||
}
|
||||
|
||||
.Badge {
|
||||
$boxSize: 17px;
|
||||
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
transform: translateX(-50%) translateY(50%);
|
||||
font-size: $font-size-small;
|
||||
line-height: $boxSize;
|
||||
min-width: $boxSize;
|
||||
min-height: $boxSize;
|
||||
text-align: center;
|
||||
color: white;
|
||||
background: $colorSuccess;
|
||||
font-weight: normal;
|
||||
border-radius: $radius;
|
||||
padding: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
> .extensions {
|
||||
|
||||
@@ -6,26 +6,24 @@ import { requestMain } from "../../../common/ipc";
|
||||
import type { Cluster } from "../../../main/cluster";
|
||||
import { DragDropContext, Draggable, DraggableProvided, Droppable, DroppableProvided, DropResult } from "react-beautiful-dnd";
|
||||
import { observer } from "mobx-react";
|
||||
import { userStore } from "../../../common/user-store";
|
||||
import { ClusterId, clusterStore } from "../../../common/cluster-store";
|
||||
import { workspaceStore } from "../../../common/workspace-store";
|
||||
import { ClusterIcon } from "../cluster-icon";
|
||||
import { Icon } from "../icon";
|
||||
import { autobind, cssNames, IClassName } from "../../utils";
|
||||
import { Badge } from "../badge";
|
||||
import { isActiveRoute, navigate } from "../../navigation";
|
||||
import { addClusterURL } from "../+add-cluster";
|
||||
import { clusterSettingsURL } from "../+cluster-settings";
|
||||
import { landingURL } from "../+landing-page";
|
||||
import { Tooltip } from "../tooltip";
|
||||
import { ConfirmDialog } from "../confirm-dialog";
|
||||
import { clusterViewURL } from "./cluster-view.route";
|
||||
import { getExtensionPageUrl, globalPageMenuRegistry, globalPageRegistry } from "../../../extensions/registries";
|
||||
import { clusterDisconnectHandler } from "../../../common/cluster-ipc";
|
||||
import { commandRegistry } from "../../../extensions/registries/command-registry";
|
||||
import { CommandOverlay } from "../command-palette/command-container";
|
||||
import { computed } from "mobx";
|
||||
import { computed, observable } from "mobx";
|
||||
import { Select } from "../select";
|
||||
import { Menu, MenuItem } from "../menu";
|
||||
|
||||
interface Props {
|
||||
className?: IClassName;
|
||||
@@ -33,14 +31,12 @@ interface Props {
|
||||
|
||||
@observer
|
||||
export class ClustersMenu extends React.Component<Props> {
|
||||
@observable workspaceMenuVisible = false;
|
||||
|
||||
showCluster = (clusterId: ClusterId) => {
|
||||
navigate(clusterViewURL({ params: { clusterId } }));
|
||||
};
|
||||
|
||||
addCluster = () => {
|
||||
navigate(addClusterURL());
|
||||
};
|
||||
|
||||
showContextMenu = (cluster: Cluster) => {
|
||||
const { Menu, MenuItem } = remote;
|
||||
const menu = new Menu();
|
||||
@@ -111,7 +107,6 @@ export class ClustersMenu extends React.Component<Props> {
|
||||
|
||||
render() {
|
||||
const { className } = this.props;
|
||||
const { newContexts } = userStore;
|
||||
const workspace = workspaceStore.getById(workspaceStore.currentWorkspaceId);
|
||||
const clusters = clusterStore.getByWorkspaceId(workspace.id).filter(cluster => cluster.enabled);
|
||||
const activeClusterId = clusterStore.activeCluster;
|
||||
@@ -149,14 +144,25 @@ export class ClustersMenu extends React.Component<Props> {
|
||||
</Droppable>
|
||||
</DragDropContext>
|
||||
</div>
|
||||
<div className="add-cluster">
|
||||
<Tooltip targetId="add-cluster-icon">
|
||||
Add Cluster
|
||||
</Tooltip>
|
||||
<Icon big material="add" id="add-cluster-icon" disabled={workspace.isManaged} onClick={this.addCluster}/>
|
||||
{newContexts.size > 0 && (
|
||||
<Badge className="counter" label={newContexts.size} tooltip="new"/>
|
||||
)}
|
||||
|
||||
<div className="WorkspaceMenu">
|
||||
<Icon big material="menu" id="workspace-menu-icon" data-test-id="workspace-menu" />
|
||||
<Menu
|
||||
usePortal
|
||||
htmlFor="workspace-menu-icon"
|
||||
className="WorkspaceMenu"
|
||||
isOpen={this.workspaceMenuVisible}
|
||||
open={() => this.workspaceMenuVisible = true}
|
||||
close={() => this.workspaceMenuVisible = false}
|
||||
toggleEvent="click"
|
||||
>
|
||||
<MenuItem onClick={() => navigate(addClusterURL())} data-test-id="add-cluster-menu-item">
|
||||
<Icon small material="add" /> Add Cluster
|
||||
</MenuItem>
|
||||
<MenuItem onClick={() => navigate(landingURL())} data-test-id="workspace-overview-menu-item">
|
||||
<Icon small material="dashboard" /> Workspace Overview
|
||||
</MenuItem>
|
||||
</Menu>
|
||||
</div>
|
||||
<div className="extensions">
|
||||
{globalPageMenuRegistry.getItems().map(({ title, target, components: { Icon } }) => {
|
||||
|
||||
Reference in new issue
Block a user