add cluster item list to workspace landing page

Signed-off-by: Jim Ehrismann <jehrismann@mirantis.com>

src/renderer/components/+landing-page/workspace-cluster.store.ts

@@ -0,0 +1,35 @@
+import { WorkspaceId } from "../../../common/workspace-store";
+import { Cluster } from "../../../main/cluster";
+import { clusterStore } from "../../../common/cluster-store";
+import { ItemStore } from "../../item.store";
+
+export class ClusterItem {
+    cluster: Cluster;
+
+    getName() {
+        return this.cluster.name;
+    }
+
+    getId() {
+        return this.cluster.id
+    }
+}
+
+/** an ItemStore of the clusters belonging to a given workspace */
+export class WorkspaceClusterStore extends ItemStore<ClusterItem> {
+
+    workspaceId: WorkspaceId;
+
+    constructor(workspaceId: WorkspaceId) {
+        super();
+        this.workspaceId = workspaceId;
+    }
+
+    loadAll() {
+        return this.loadItems(() => clusterStore.getByWorkspaceId(this.workspaceId).map(cluster => {
+            let clusterItem = new ClusterItem();
+            clusterItem.cluster = cluster;
+            return clusterItem;
+        }));
+      }
+}

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

@@ -4,54 +4,51 @@ import { clusterStore } from "../../../common/cluster-store";
 import { Cluster } from "../../../main/cluster";
 import { observable, autorun } from "mobx";
 import { observer } from "mobx-react";
-import { Drawer, DrawerItem, DrawerTitle } from "../drawer";
+import { WizardLayout } from "../layout/wizard-layout";
+import { TabLayout } from "../layout/tab-layout";
+import { ItemListLayout, ItemListLayoutProps } from "../item-object-list/item-list-layout";
 import { autobind, stopPropagation } from "../../utils";
 import { MarkdownViewer } from "../markdown-viewer";
 import { Spinner } from "../spinner";
 import { Button } from "../button";
 import { Select, SelectOption } from "../select";
 import { Badge } from "../badge";
+import { ClusterItem, WorkspaceClusterStore } from "./workspace-cluster.store";
 
 interface Props {
   workspace: Workspace;
 }
 
+enum sortBy {
+    name = "name",
+}
+
 @observer
 export class WorkspaceOverview extends Component<Props> {
 
-  renderClusters() {
-    const { workspace } = this.props;
-    const clusters = clusterStore.getByWorkspaceId(workspace.id);
-    return <div>
-      {clusters.map(cluster => <div>{cluster.contextName}</div>)}
-    </div>
-  }
-
   render() {
     const { workspace } = this.props;
+    const workspaceClusterStore = new WorkspaceClusterStore(workspace.id);
 
     return (
-        <Drawer
-            className="WorkspaceDetails"
-            usePortal={true}
-            open={!!workspace}
-            title={"Details"}
-        >
-            <DrawerItem name={"Description"}>
-            {workspace.description}
-            </DrawerItem>
-            <DrawerItem name={"Id"}>
-            {workspace.id}
-            </DrawerItem>
-            <DrawerItem name={"Owner Ref"}>
-            {workspace.ownerRef}
-            </DrawerItem>
-            <DrawerItem name={"Enabled"} renderBoolean={true}>
-            {workspace.enabled}
-            </DrawerItem>
-            <DrawerTitle title={"Clusters"}/>
-            {this.renderClusters()}
-        </Drawer>
+        <TabLayout>
+          <ItemListLayout 
+            isClusterScoped
+            className="WorkspaceList" store={workspaceClusterStore}
+            sortingCallbacks={{
+              [sortBy.name]: (cluster: ClusterItem) => cluster.getName(),
+            }}
+            searchFilters={[]}
+            renderTableHeader={[
+              { title: "Name", className: "name flex-grow", sortBy: sortBy.name },
+              { title: "Id", className: "id" },
+            ]}
+            renderTableContents={(item: ClusterItem) => [
+              item.getName(),
+              item.getId(),
+            ]}
+          />
+        </TabLayout>
     );
   }
 }