feat: Add workspace in tree extension (kubesphere#748)

* feat: Add workspaces in tree plugin Signed-off-by: Bunny <[email protected]> * feat: Add workspace base layout Signed-off-by: Bunny <[email protected]> * feat: Add list layout Signed-off-by: Bunny <[email protected]> * feat: Add devops ks config in globals Signed-off-by: Bunny <[email protected]> --------- Signed-off-by: Bunny <[email protected]> Co-authored-by: Bunny <[email protected]>
Leioy · Feb 2, 2023 · 0a31edb · 0a31edb
1 parent a8f6436
commit 0a31edb
Show file tree

Hide file tree

Showing 12 changed files with 195 additions and 6 deletions.
diff --git a/packages/access/src/containers/Workspaces/index.tsx b/packages/access/src/containers/Workspaces/index.tsx
@@ -167,11 +167,7 @@ export default function Workspaces(): JSX.Element {
       render: (value, row) => {
         return (
           <Field
-            value={
-              <Link to={`/workspace/${value}`} replace={true}>
-                {getDisplayName(row)}
-              </Link>
-            }
+            value={<Link to={`/workspaces/${value}`}>{getDisplayName(row)}</Link>}
             avatar={<Enterprise size={40} />}
             label={<FieldLable>{row.description || '-'}</FieldLable>}
           />

diff --git a/packages/bootstrap/cli/webpack.js b/packages/bootstrap/cli/webpack.js
@@ -17,6 +17,7 @@ const alias = {
   '@ks-console/access': resolve('packages/access/src'),
   '@ks-console/appstore': resolve('packages/appstore/src'),
   '@ks-console/projects': resolve('packages/projects/src'),
+  '@ks-console/workspaces': resolve('packages/workspaces/src'),
 };
 
 function devServer(setAlias) {

diff --git a/packages/bootstrap/entry/extensions.ts b/packages/bootstrap/entry/extensions.ts
@@ -3,7 +3,8 @@ import consoleApp from '@ks-console/console';
 import access from '@ks-console/access';
 import platform from '@ks-console/platform';
 import projects from '@ks-console/projects';
+import workspaces from '@ks-console/workspaces';
 
-const extensions: any[] = [clusters, consoleApp, access, platform, projects];
+const extensions: any[] = [clusters, consoleApp, access, platform, projects, workspaces];
 
 export default extensions;
diff --git a/packages/bootstrap/package.json b/packages/bootstrap/package.json
@@ -20,6 +20,7 @@
     "@ks-console/locales": "4.0.0-alpha.2",
     "@ks-console/platform": "4.0.0-alpha.11",
     "@ks-console/projects": "4.0.0-alpha.11",
+    "@ks-console/workspaces": "4.0.0-alpha.11",
     "mustache": "^4.2.0"
   },
   "devDependencies": {

diff --git a/packages/workspaces/README.md b/packages/workspaces/README.md
@@ -0,0 +1,5 @@
+# `workspaces`
+
+> TODO: description
+
+## Usage
diff --git a/packages/workspaces/package.json b/packages/workspaces/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "@ks-console/workspaces",
+  "description": "",
+  "version": "4.0.0-alpha.11",
+  "homepage": "",
+  "main": "cjs/index.js",
+  "module": "esm/index.js",
+  "types": "lib/src/index.d.ts",
+  "files": [
+    "cjs",
+    "esm",
+    "lib"
+  ],
+  "dependencies": {
+    "@ks-console/shared": "4.0.0-alpha.11"
+  }
+}
diff --git a/packages/workspaces/src/containers/Base/BaseLayout/index.tsx b/packages/workspaces/src/containers/Base/BaseLayout/index.tsx
@@ -0,0 +1,53 @@
+import React, { useEffect, useMemo } from 'react';
+import { get, set } from 'lodash';
+import { useStore } from '@kubed/stook';
+import { useQueries } from 'react-query';
+import { Loading } from '@kubed/components';
+import { Outlet, useParams } from 'react-router-dom';
+import { apis, workspaceStore } from '@ks-console/shared';
+
+const { fetchDetail, useClusters } = workspaceStore;
+
+function BaseLayout(): JSX.Element {
+  const { workspace } = useParams();
+  const [, setWorkspaceDetail] = useStore('workspaceDetail');
+  const clusterDetail = useClusters({ workspace });
+  const [workspaceResult, ruleResult] = useQueries([
+    {
+      queryKey: ['workspaces', workspace],
+      queryFn: () => fetchDetail({ workspace }),
+      enabled: !!workspace,
+      onSuccess: (data: any) => setWorkspaceDetail(data),
+    },
+    {
+      queryKey: ['workspace', 'authRule', workspace],
+      queryFn: () => apis.fetchRules({ workspace, name: globals.user.username }),
+      enabled: !!workspace,
+      keepPreviousData: true,
+    },
+  ]);
+  const isInitializing = useMemo<boolean>(
+    () => workspaceResult.isLoading || ruleResult.isLoading,
+    [workspaceResult.isLoading, ruleResult.isLoading],
+  );
+
+  useEffect(() => {
+    if (!ruleResult.isSuccess) {
+      return;
+    }
+
+    set(
+      globals.ksConfig,
+      'devops',
+      clusterDetail.some((cluster: any) => get(cluster, 'configz.devops')),
+    );
+  }, [ruleResult.isSuccess, clusterDetail]);
+
+  if (isInitializing) {
+    return <Loading className="page-loading" />;
+  }
+
+  return <Outlet />;
+}
+
+export default BaseLayout;
diff --git a/packages/workspaces/src/containers/Base/ListLayout/index.tsx b/packages/workspaces/src/containers/Base/ListLayout/index.tsx
@@ -0,0 +1,57 @@
+import React, { useEffect } from 'react';
+import styled from 'styled-components';
+import { Cluster } from '@kubed/icons';
+import { Outlet, useLocation, useParams } from 'react-router-dom';
+import { NavMenu, NavTitle, useGlobalStore } from '@ks-console/shared';
+
+import { getWorkspaceNavs } from '../../../utils';
+
+const PageSide = styled.div`
+  position: fixed;
+  top: 88px;
+  padding: 0 20px 40px;
+  width: 260px;
+  z-index: 99;
+`;
+
+const PageMain = styled.div`
+  margin-left: 240px;
+  padding: 20px;
+  overflow-y: auto;
+  overflow-x: hidden;
+`;
+
+const navKey = 'WORKSPACE_NAV';
+
+function ListLayout(): JSX.Element {
+  const location = useLocation();
+  const { workspace: workspaceName = '' } = useParams();
+  const { getNav, setNav } = useGlobalStore();
+  let navs = getNav(`${navKey}-${workspaceName}`);
+
+  useEffect(() => {
+    if (!navs) {
+      navs = getWorkspaceNavs(workspaceName);
+      setNav(`${navKey}-${workspaceName}`, navs);
+    }
+  }, []);
+
+  return (
+    <>
+      <PageSide>
+        <NavTitle
+          icon={<Cluster variant="light" size={40} />}
+          title={workspaceName}
+          subtitle={t('WORKSPACE')}
+          style={{ marginBottom: '20px' }}
+        />
+        <NavMenu navs={navs} prefix={`/workspaces/${workspaceName}`} pathname={location.pathname} />
+      </PageSide>
+      <PageMain>
+        <Outlet />
+      </PageMain>
+    </>
+  );
+}
+
+export default ListLayout;
diff --git a/packages/workspaces/src/containers/Base/index.ts b/packages/workspaces/src/containers/Base/index.ts
@@ -0,0 +1,2 @@
+export { default as BaseLayout } from './BaseLayout';
+export { default as ListLayout } from './ListLayout';
diff --git a/packages/workspaces/src/index.ts b/packages/workspaces/src/index.ts
@@ -0,0 +1,7 @@
+import routes from './routes';
+
+const pluginConfig = {
+  routes,
+};
+
+export default pluginConfig;
diff --git a/packages/workspaces/src/routes/index.tsx b/packages/workspaces/src/routes/index.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import { Navigate } from 'react-router-dom';
+
+import { BaseLayout, ListLayout } from '../containers/Base';
+
+const PATH = '/workspaces/:workspace';
+
+export default [
+  {
+    path: PATH,
+    element: <BaseLayout />,
+    children: [
+      {
+        element: <ListLayout />,
+        children: [
+          {
+            index: true,
+            element: <Navigate to="overview" replace />,
+          },
+          {
+            path: 'overview',
+            element: <>Workspace OverView</>,
+          },
+        ],
+      },
+    ],
+  },
+];
diff --git a/packages/workspaces/src/utils.ts b/packages/workspaces/src/utils.ts
@@ -0,0 +1,21 @@
+import { cloneDeep, get, isEmpty } from 'lodash';
+import { checkNavItem, hasPermission } from '@ks-console/shared';
+
+export function getWorkspaceNavs(workspace?: string) {
+  if (!get(globals.user, `workspaceRules[${workspace}]`)) {
+    return [];
+  }
+
+  const navs: string[] = [];
+  const workspaceNavs = cloneDeep(globals.config.workspaceNavs);
+  const filteredItems = workspaceNavs.children.filter((item: any) => {
+    item.workspace = workspace;
+    return checkNavItem(item, params => hasPermission({ ...params, workspace }));
+  });
+
+  if (!isEmpty(filteredItems)) {
+    navs.push({ ...workspaceNavs, children: filteredItems });
+  }
+
+  return navs;
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export { default as BaseLayout } from './BaseLayout';
		export { default as ListLayout } from './ListLayout';