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

added cluster icons to workspace overview

Browse Source 
Signed-off-by: Jim Ehrismann <jehrismann@mirantis.com>
This commit is contained in:
Jim Ehrismann 2021-01-20 19:09:18 -05:00
parent fb7b1b47ae
commit 6e0ca52bf7
2 changed files with 45 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/renderer/components/+landing-page/workspace-cluster-icon.scss Normal file
View File

@ -0,0 +1,10 @@
.WorkspaceClusterIcon {
--size: 37px;
position: relative;
border-radius: $radius;
padding: $radius;
user-select: none;
cursor: pointer;
}

53
src/renderer/components/+landing-page/workspace-overview.tsx
View File

@ -1,3 +1,5 @@
import "./workspace-cluster-icon.scss";
import React, { Component } from "react"; import React, { Component } from "react";
import { Workspace } from "../../../common/workspace-store"; import { Workspace } from "../../../common/workspace-store";
import { clusterStore } from "../../../common/cluster-store"; import { clusterStore } from "../../../common/cluster-store";
@ -13,6 +15,7 @@ import { Spinner } from "../spinner";
import { Button } from "../button"; import { Button } from "../button";
import { Select, SelectOption } from "../select"; import { Select, SelectOption } from "../select";
import { Badge } from "../badge"; import { Badge } from "../badge";
import { Hashicon } from "@emeraldpay/hashicon-react";
import { ClusterItem, WorkspaceClusterStore } from "./workspace-cluster.store"; import { ClusterItem, WorkspaceClusterStore } from "./workspace-cluster.store";
interface Props { interface Props {
@ -26,29 +29,43 @@ enum sortBy {
@observer @observer
export class WorkspaceOverview extends Component<Props> { export class WorkspaceOverview extends Component<Props> {
getIcon(clusterItem: ClusterItem) {
const { cluster } = clusterItem;
const { name } = cluster;
const { preferences, id: clusterId } = cluster;
const { icon } = preferences;
return (
<div className="WorkspaceClusterIcon flex inline" >
{icon && <img src={icon} alt={name}/>}
{!icon && <Hashicon value={clusterId} />}
</div>
)
}
render() { render() {
const { workspace } = this.props; const { workspace } = this.props;
const workspaceClusterStore = new WorkspaceClusterStore(workspace.id); const workspaceClusterStore = new WorkspaceClusterStore(workspace.id);
return ( return (
<TabLayout> <ItemListLayout
<ItemListLayout isClusterScoped
isClusterScoped className="WorkspaceList" store={workspaceClusterStore}
className="WorkspaceList" store={workspaceClusterStore} sortingCallbacks={{
sortingCallbacks={{ [sortBy.name]: (cluster: ClusterItem) => cluster.getName(),
[sortBy.name]: (cluster: ClusterItem) => cluster.getName(), }}
}} searchFilters={[]}
searchFilters={[]} renderTableHeader={[
renderTableHeader={[ { title: "Icon" },
{ title: "Name", className: "name flex-grow", sortBy: sortBy.name }, { title: "Name", className: "name flex-grow", sortBy: sortBy.name },
{ title: "Id", className: "id" }, { title: "Id", className: "id" },
]} ]}
renderTableContents={(item: ClusterItem) => [ renderTableContents={(item: ClusterItem) => [
item.getName(), this.getIcon(item),
item.getId(), item.getName(),
]} item.getId(),
/> ]}
</TabLayout> />
); );
} }
} }