feat: Experiment and Overview Page Improvement

chaosmeta-platform-frontend/src/components/Select/KubernetesNamespaceSelect/index.tsx

@@ -0,0 +1,75 @@
+import { queryNamespaceList } from '@/services/chaosmeta/KubernetesController';
+import { useRequest } from '@umijs/max';
+import { Select, Spin, message } from 'antd';
+import { useEffect, useState } from 'react';
+
+interface IProps {
+  value?: string;
+  onChange?: (value?: string) => void;
+  /**回显时可传入list */
+  list?: any[];
+  mode?: 'multiple' | 'tags';
+  placeholder?: string;
+  style?: any;
+}
+
+const KubernetesNamespaceSelect = (props: IProps) => {
+  const { value, onChange, list, mode, placeholder = '请选择', style } = props;
+  const [namespaceList, setNamespaceList] = useState<string[]>([]);
+  const { Option } = Select;
+
+  useEffect(() => {
+    if (list && list?.length > 0) {
+      setNamespaceList(list);
+    }
+  }, [list]);
+
+  const getUser = useRequest(queryNamespaceList, {
+    manual: true,
+    formatResult: (res: any) => res,
+    debounceInterval: 300,
+    onSuccess: (res) => {
+      if (res?.success) {
+        setNamespaceList(res?.data?.list || []);
+      } else {
+        message.error(res?.message);
+      }
+    },
+  });
+
+  // 输入有值时进行搜索
+  // const handleUserSearch = (val: string) => {
+  //   if (val) {
+  //     getUser?.run({ identifier: val });
+  //   }
+  // };
+
+  useEffect(() => {
+    getUser?.run({ page: 1, page_size: 500 });
+  }, []);
+
+  return (
+    <Select
+      mode={mode}
+      value={value}
+      showSearch
+      // onSearch={(val) => handleUserSearch(val)}
+      allowClear
+      notFoundContent={getUser?.loading ? <Spin size="small" /> : null}
+      filterOption={false}
+      onChange={onChange}
+      placeholder={placeholder}
+      style={style}
+    >
+      {namespaceList?.map((item: any) => {
+        return (
+          <Option value={item?.metadata?.name} key={item?.metadata?.name}>
+            {item?.metadata?.name}
+          </Option>
+        );
+      })}
+    </Select>
+  );
+};
+
+export default KubernetesNamespaceSelect;

chaosmeta-platform-frontend/src/components/Select/KubernetesPodSelect/index.tsx

@@ -0,0 +1,75 @@
+import { queryNamespaceList, queryPodLIst } from '@/services/chaosmeta/KubernetesController';
+import { useRequest } from '@umijs/max';
+import { Select, Spin, message } from 'antd';
+import { useEffect, useState } from 'react';
+
+interface IProps {
+  value?: string;
+  onChange?: (value?: string) => void;
+  /**回显时可传入list */
+  list?: any[];
+  mode?: 'multiple' | 'tags';
+  placeholder?: string;
+  style?: any;
+}
+
+const KubernetesPodSelect = (props: IProps) => {
+  const { value, onChange, list, mode, placeholder = '请选择', style } = props;
+  const [namespaceList, setNamespaceList] = useState<string[]>([]);
+  const { Option } = Select;
+
+  useEffect(() => {
+    if (list && list?.length > 0) {
+      setNamespaceList(list);
+    }
+  }, [list]);
+
+  const getUser = useRequest(queryPodLIst, {
+    manual: true,
+    formatResult: (res: any) => res,
+    debounceInterval: 300,
+    onSuccess: (res) => {
+      if (res?.success) {
+        setNamespaceList(res?.data?.list || []);
+      } else {
+        message.error(res?.message);
+      }
+    },
+  });
+
+  // 输入有值时进行搜索
+  // const handleUserSearch = (val: string) => {
+  //   if (val) {
+  //     getUser?.run({ identifier: val });
+  //   }
+  // };
+
+  useEffect(() => {
+    getUser?.run({ page: 1, page_size: 500 });
+  }, []);
+
+  return (
+    <Select
+      mode={mode}
+      value={value}
+      showSearch
+      // onSearch={(val) => handleUserSearch(val)}
+      allowClear
+      notFoundContent={getUser?.loading ? <Spin size="small" /> : null}
+      filterOption={false}
+      onChange={onChange}
+      placeholder={placeholder}
+      style={style}
+    >
+      {namespaceList?.map((item: any) => {
+        return (
+          <Option value={item?.metadata?.name} key={item?.metadata?.name}>
+            {item?.metadata?.name}
+          </Option>
+        );
+      })}
+    </Select>
+  );
+};
+
+export default KubernetesPodSelect;

chaosmeta-platform-frontend/src/components/SpaceDropdown/index.tsx

@@ -47,7 +47,6 @@ export default () => {
    */
   const handleUpdateSpaceId = (id: string, name: string) => {
     if (id) {
-      console.log(history.location.pathname, '---');
       if (parentRoute.includes(history.location.pathname)) {
         history.push({
           pathname: history.location.pathname,

chaosmeta-platform-frontend/src/constants/index.ts

@@ -1,5 +1,9 @@
 export const DEFAULT_NAME = 'Umi Max';
 
+// KubernetesController使用
+// -1: 开发环境，0：生产环境
+export const envType = 0;
+
 export const tagColors = [
   {
     color: '#EDEEEF',
@@ -89,32 +93,32 @@ export const experimentResultStatus = [
     value: 'Pending',
     label: '等待中',
     color: 'blue',
-    type: 'info'
+    type: 'info',
   },
   {
     value: 'Running',
     label: '运行中',
     color: 'blue',
-    type: 'info'
+    type: 'info',
   },
   {
     value: 'Succeeded',
     label: '成功',
     color: 'green',
-    type: 'success'
+    type: 'success',
   },
 
   {
     value: 'Failed',
     label: '失败',
     color: 'red',
-    type: 'error'
+    type: 'error',
   },
   {
     value: 'error',
     label: '错误',
     color: 'red',
-    type: 'error'
+    type: 'error',
   },
 ];
 
@@ -141,3 +145,11 @@ export const experimentStatus = [
     color: 'blue',
   },
 ];
+
+// 节点类型
+export const nodeTypeMap: any = {
+  fault: '故障节点',
+  measure: '度量引擎',
+  flow: '流量注入',
+  wait: '等待时长',
+};