Merge pull request #55 from hlt1997/main

Optimization of space and permissions
traas-stack · Aug 30, 2023 · c5c389e · c5c389e
2 parents 3d6c630 + d5f8f3c
commit c5c389e
Show file tree

Hide file tree

Showing 30 changed files with 395 additions and 268 deletions.
diff --git a/chaosmeta-platform-frontend/Dockerfile b/chaosmeta-platform-frontend/Dockerfile
@@ -0,0 +1,13 @@
+# 设置 Node.js 版本
+FROM node:16-alpine
+
+# 设置工作目录
+WORKDIR /app
+
+# 将 package.json 和 package-lock.json 复制到工作目录中
+COPY . .
+
+RUN yarn install
+
+# 设置容器启动时的命令
+CMD ["yarn", "start"]
diff --git a/chaosmeta-platform-frontend/config/router.ts b/chaosmeta-platform-frontend/config/router.ts
@@ -1,7 +1,7 @@
 export default [
   {
     path: '/',
-    redirect: '/space/overview',
+    redirect: '/login',
   },
   { path: '/*', component: '@/pages/404' },
   {

diff --git a/chaosmeta-platform-frontend/src/app.tsx b/chaosmeta-platform-frontend/src/app.tsx
@@ -96,36 +96,10 @@ export const layout = () => {
     },
     siderWidth: 208,
     layout: 'mix',
-    // breakpoint: false,
     splitMenus: true,
-    // collapsedButtonRender: (porps) => {
-    //   return null;
-    // },
-    // collapsed: false,
     rightContentRender: () => {
       return <UserRightArea />;
     },
-    // headerRender: (layoutProps: any) => {
-    //   const { title, logo } = layoutProps;
-    //   return (
-    //     <div
-    //       style={{
-    //         display: 'flex',
-    //         justifyContent: 'space-between',
-    //         padding: '0 16px',
-    //       }}
-    //     >
-    //       <div>
-    //         {title}
-    //         <img src={logo} />
-    //       </div>
-    //       <div>
-    //         <img src={initialState?.avatar} />
-    //         {initialState?.name}
-    //       </div>
-    //     </div>
-    //   );
-    // },
     menuExtraRender: (props: any) => {
       if (props?.matchMenuKeys[0] === '/setting') {
         return null;

diff --git a/chaosmeta-platform-frontend/src/components/AddSpaceDrawer/index.tsx b/chaosmeta-platform-frontend/src/components/AddSpaceDrawer/index.tsx
@@ -49,7 +49,12 @@ const AddSpaceDrawer: React.FC<IProps> = (props) => {
         // 更新空间信息
         handleUpdateSpaceId(res?.data?.id);
         setOpen(false);
-        history.push('/space/setting');
+        history.push({
+          pathname: '/space/setting',
+          query: {
+            spaceId: res?.data?.id,
+          },
+        });
       }
     },
   });
@@ -58,9 +63,6 @@ const AddSpaceDrawer: React.FC<IProps> = (props) => {
    * 创建空间
    */
   const handleCreate = () => {
-    // setCurSpace()
-    // handleUpdateSpaceId('20', 'ceshi')
-    // return
     form.validateFields().then((values) => {
       create?.run(values);
     });

diff --git a/chaosmeta-platform-frontend/src/components/Select/KubernetesNamespaceSelect/index.tsx b/chaosmeta-platform-frontend/src/components/Select/KubernetesNamespaceSelect/index.tsx
@@ -24,7 +24,7 @@ const KubernetesNamespaceSelect = (props: IProps) => {
     }
   }, [list]);
 
-  const getUser = useRequest(queryNamespaceList, {
+  const getNamespaceList = useRequest(queryNamespaceList, {
     manual: true,
     formatResult: (res: any) => res,
     debounceInterval: 300,
@@ -37,15 +37,8 @@ const KubernetesNamespaceSelect = (props: IProps) => {
     },
   });
 
-  // 输入有值时进行搜索
-  // const handleUserSearch = (val: string) => {
-  //   if (val) {
-  //     getUser?.run({ identifier: val });
-  //   }
-  // };
-
   useEffect(() => {
-    getUser?.run({ page: 1, page_size: 500 });
+    getNamespaceList?.run({ page: 1, page_size: 500 });
   }, []);
 
   return (
@@ -55,7 +48,7 @@ const KubernetesNamespaceSelect = (props: IProps) => {
       showSearch
       // onSearch={(val) => handleUserSearch(val)}
       allowClear
-      notFoundContent={getUser?.loading ? <Spin size="small" /> : null}
+      notFoundContent={getNamespaceList?.loading ? <Spin size="small" /> : null}
       filterOption={false}
       onChange={onChange}
       placeholder={placeholder}

diff --git a/chaosmeta-platform-frontend/src/components/Select/KubernetesPodSelect/index.tsx b/chaosmeta-platform-frontend/src/components/Select/KubernetesPodSelect/index.tsx
@@ -1,6 +1,6 @@
-import { queryNamespaceList, queryPodLIst } from '@/services/chaosmeta/KubernetesController';
+import { queryPodLIst } from '@/services/chaosmeta/KubernetesController';
 import { useRequest } from '@umijs/max';
-import { Select, Spin, message } from 'antd';
+import { Empty, Select, Spin, message } from 'antd';
 import { useEffect, useState } from 'react';
 
 interface IProps {
@@ -11,10 +11,21 @@ interface IProps {
   mode?: 'multiple' | 'tags';
   placeholder?: string;
   style?: any;
+  form?: any;
+  kubernetesNamespace?: any;
 }
 
 const KubernetesPodSelect = (props: IProps) => {
-  const { value, onChange, list, mode, placeholder = '请选择', style } = props;
+  const {
+    value,
+    onChange,
+    list,
+    mode,
+    placeholder = '请选择',
+    style,
+    form,
+    kubernetesNamespace,
+  } = props;
   const [namespaceList, setNamespaceList] = useState<string[]>([]);
   const { Option } = Select;
 
@@ -24,7 +35,7 @@ const KubernetesPodSelect = (props: IProps) => {
     }
   }, [list]);
 
-  const getUser = useRequest(queryPodLIst, {
+  const getPodList = useRequest(queryPodLIst, {
     manual: true,
     formatResult: (res: any) => res,
     debounceInterval: 300,
@@ -37,29 +48,40 @@ const KubernetesPodSelect = (props: IProps) => {
     },
   });
 
-  // 输入有值时进行搜索
-  // const handleUserSearch = (val: string) => {
-  //   if (val) {
-  //     getUser?.run({ identifier: val });
-  //   }
-  // };
-
   useEffect(() => {
-    getUser?.run({ page: 1, page_size: 500 });
-  }, []);
+    // 此项的展示是要依赖namespace的值进行检索，所以当namespace值改变时需要清空列表项和值
+    setNamespaceList([]);
+    form.setFieldValue(['exec_range', 'target_name'], undefined);
+  }, [kubernetesNamespace]);
 
   return (
     <Select
       mode={mode}
       value={value}
-      showSearch
+      // showSearch
       // onSearch={(val) => handleUserSearch(val)}
       allowClear
-      notFoundContent={getUser?.loading ? <Spin size="small" /> : null}
+      notFoundContent={
+        getPodList?.loading ? (
+          <Spin size="small" />
+        ) : (
+          <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
+        )
+      }
       filterOption={false}
       onChange={onChange}
       placeholder={placeholder}
       style={style}
+      onFocus={() => {
+        // 依赖的namespace有值时才进行检索
+        if (kubernetesNamespace) {
+          getPodList?.run({
+            page: 1,
+            page_size: 500,
+            namespace: kubernetesNamespace,
+          });
+        }
+      }}
     >
       {namespaceList?.map((item: any) => {
         return (

diff --git a/chaosmeta-platform-frontend/src/components/SpaceDropdown/index.tsx b/chaosmeta-platform-frontend/src/components/SpaceDropdown/index.tsx
@@ -1,19 +1,18 @@
 import {
-  getSpaceUserList,
-  getUserSpaceList,
-} from '@/services/chaosmeta/UserController';
+  queryClassSpaceList,
+  querySpaceUserPermission,
+} from '@/services/chaosmeta/SpaceController';
 import { DownOutlined, PlusOutlined, SearchOutlined } from '@ant-design/icons';
 import { history, useModel, useRequest } from '@umijs/max';
-import { Dropdown, Empty, Input } from 'antd';
+import { Dropdown, Empty, Input, Spin } from 'antd';
 import React, { useEffect, useState } from 'react';
 import AddSpaceDrawer from '../AddSpaceDrawer';
 import { SpaceContent, SpaceMenu } from './style';
 
 export default () => {
   const [addSpaceOpen, setAddSpaceOpen] = useState<boolean>(false);
   const [spaceList, setSpaceList] = useState<any>([]);
-  const { userInfo, setSpacePermission, curSpace, setCurSpace } =
-    useModel('global');
+  const { setSpacePermission, curSpace, setCurSpace } = useModel('global');
 
   // 一级路由，切换空间时页面在以下路由时，不需要跳转，刷新页面接口即可，其他页面需要跳转回空间概览
   const parentRoute = [
@@ -26,17 +25,12 @@ export default () => {
   /**
    * 根据成员名称和空间id获取成员空间内权限信息
    */
-  const getUserSpaceAuth = useRequest(getSpaceUserList, {
+  const getUserSpaceAuth = useRequest(querySpaceUserPermission, {
     manual: true,
     formatResult: (res) => res,
     onSuccess: (res) => {
       if (res.code === 200) {
-        // 存储用户空间权限
-        const curUserName = userInfo?.name || localStorage.getItem('userName');
-        const curUserInfo = res?.data?.users?.filter(
-          (item: { name: string }) => item.name === curUserName,
-        )[0];
-        setSpacePermission(curUserInfo?.permission);
+        setSpacePermission(res?.data);
       }
     },
   });
@@ -68,23 +62,24 @@ export default () => {
       sessionStorage.setItem('spaceName', name);
     }
   };
+
   /**
    * 获取空间列表 -- 当前用户有查看权限的空间只读和读写
    */
-  const getSpaceList = useRequest(getUserSpaceList, {
+  const getSpaceList = useRequest(queryClassSpaceList, {
     manual: true,
     formatResult: (res) => res,
     debounceInterval: 300,
     onSuccess: (res) => {
-      if (res?.data) {
+      if (res?.code === 200) {
         const namespaceList = res.data?.namespaces?.map(
-          (item: { name: string; id: string }) => {
+          (item: { namespaceInfo: any }) => {
             // side侧边菜单的展开/收起会影响这里，暂时用icon代替，todo
             return {
-              icon: item.name,
-              key: item.id,
-              id: item.id.toString(),
-              name: item.name,
+              icon: item?.namespaceInfo?.name,
+              key: item?.namespaceInfo?.id,
+              id: item?.namespaceInfo?.id?.toString(),
+              name: item?.namespaceInfo?.name,
             };
           },
         );
@@ -101,7 +96,11 @@ export default () => {
 
   useEffect(() => {
     // 获取空间列表
-    getSpaceList?.run({ page: 1, page_size: 10 });
+    getSpaceList?.run({ page: 1, page_size: 10, namespaceClass: 'relevant' });
+  }, []);
+
+  useEffect(() => {
+    // getSpaceList?.run({ page: 1, page_size: 10, namespaceClass: 'relevant' });
     // 地址栏中存在空间id，需要将空间列表选项更新，并保存当前id
     if (history.location.query.spaceId) {
       setCurSpace([history.location.query.spaceId as string]);
@@ -111,7 +110,6 @@ export default () => {
       );
       getUserSpaceAuth?.run({
         id: history.location.query.spaceId as string,
-        name: userInfo?.name || localStorage.getItem('userName'),
       });
     }
   }, [history.location.query.spaceId]);
@@ -128,22 +126,25 @@ export default () => {
           },
           selectedKeys: curSpace,
         }}
-        overlayStyle={{ width: 'max-content', maxHeight: '400px' }}
+        overlayStyle={{ width: 'max-content', maxHeight: '300px' }}
         dropdownRender={(menu) => {
           return (
             <SpaceMenu>
-              <div>
+              <div className="search">
                 <Input
                   placeholder="请输入关键词"
                   onChange={(event) => {
                     const value = event?.target?.value;
-                    getSpaceList?.run({ name: value });
+                    getSpaceList?.run({
+                      name: value,
+                      namespaceClass: 'relevant',
+                    });
                   }}
                   suffix={
                     <SearchOutlined
                       style={{ cursor: 'pointer' }}
                       onClick={() => {
-                        getSpaceList?.run();
+                        getSpaceList?.run({ namespaceClass: 'relevant' });
                       }}
                     />
                   }
@@ -158,11 +159,16 @@ export default () => {
                   <PlusOutlined /> 新建空间
                 </a>
               </div>
-              {menu ? (
-                React.cloneElement(menu as React.ReactElement)
-              ) : (
-                <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
-              )}
+              <Spin spinning={getSpaceList?.loading}>
+                <div style={{ maxHeight: '200px', overflowY: 'auto' }}>
+                  {menu ? (
+                    React.cloneElement(menu as React.ReactElement)
+                  ) : (
+                    <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
+                  )}
+                </div>
+              </Spin>
+
               <div className="more">
                 <span>
                   没有相关空间？查看{' '}

diff --git a/chaosmeta-platform-frontend/src/components/SpaceDropdown/style.ts b/chaosmeta-platform-frontend/src/components/SpaceDropdown/style.ts
@@ -5,7 +5,7 @@ export const SpaceMenu = styled.div`
   border-radius: 6px;
   background-color: #fff;
   padding: 8px 0;
-  div:first-child {
+  .search {
     /* width: 180px; */
     padding: 0 16px;
   }
@@ -26,6 +26,9 @@ export const SpaceMenu = styled.div`
       color: rgba(0, 10, 26, 0.47);
     }
   }
+  .ant-spin-container {
+    padding: 0;
+  }
 `;
 
 export const SpaceContent = styled.div`

diff --git a/chaosmeta-platform-frontend/src/constants/index.ts b/chaosmeta-platform-frontend/src/constants/index.ts
@@ -41,7 +41,7 @@ export const tagColors = [
 export const arrangeNodeTypeColors: any = {
   fault: '#F5E2CC',
   measure: '#C6F8E0',
-  pressure: '#FFD5D5',
+  flow: '#FFD5D5',
   other: '#D4E3F1',
 };