gocrane · qmhu · Sep 29, 2022 · Sep 29, 2022 · Sep 29, 2022
diff --git a/pkg/web/src/modules/store.ts b/pkg/web/src/modules/store.ts
@@ -42,6 +42,7 @@ export const store = configureStore({
       recommendationApi.middleware,
       prometheusApi.middleware,
     );
+
     return middlewares;
   },
 });

diff --git a/pkg/web/src/pages/Recommend/IdleNode/components/SearchForm.tsx b/pkg/web/src/pages/Recommend/IdleNode/components/SearchForm.tsx
@@ -0,0 +1,48 @@
+import React, { memo } from 'react';
+import { Button, Col, Form, Input, Row, Select } from 'tdesign-react';
+import _ from 'lodash';
+import { useTranslation } from 'react-i18next';
+
+const { FormItem } = Form;
+
+export type SearchFormProps = {
+  recommendation: any;
+  setFilterParams: any;
+};
+
+const SearchForm: React.FC<SearchFormProps> = ({ recommendation, setFilterParams }) => {
+  const { t } = useTranslation();
+  const  any, allValues: any) => {
+    if (!allValues.name) delete allValues.name;
+    if (!allValues.namespace) delete allValues.namespace;
+    if (!allValues.workloadType) delete allValues.workloadType;
+    setFilterParams(allValues);
+  };
+
+  const  => setFilterParams({});
+
+  return (
+    <div className='list-common-table-query'>
+      <Form   labelWidth={80} layout={'inline'}>
+        <Row>
+          <Col>
+            <Row>
+              <Col>
+                <FormItem label={t('推荐名称')} name='name'>
+                  <Input placeholder={t('请输入推荐名称')} />
+                </FormItem>
+              </Col>
+            </Row>
+          </Col>
+          <Col>
+            <Button type='reset' variant='base' theme='default'>
+              {t('重置')}
+            </Button>
+          </Col>
+        </Row>
+      </Form>
+    </div>
+  );
+};
+
+export default memo(SearchForm);
diff --git a/pkg/web/src/pages/Recommend/IdleNode/index.module.less b/pkg/web/src/pages/Recommend/IdleNode/index.module.less
@@ -0,0 +1,12 @@
+.list-common-table-query {
+  margin-bottom: 30px;
+}
+
+.table-container {
+  margin-top: 30px;
+}
+&-btn {
+  margin-right: 10px;
+  color: #29a4fb;
+  cursor: pointer;
+}
diff --git a/pkg/web/src/pages/Recommend/IdleNode/index.tsx b/pkg/web/src/pages/Recommend/IdleNode/index.tsx
@@ -0,0 +1,232 @@
+import './index.module.less';
+
+import classnames from 'classnames';
+import { useCraneUrl } from 'hooks';
+import JsYaml from 'js-yaml';
+import React, { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+import { Button, Col, Dialog, Divider, MessagePlugin, Row, Space, Table, Tag } from 'tdesign-react';
+
+import {
+  RecommendationSimpleInfo,
+  RecommendationType,
+  useFetchRecommendationListQuery,
+} from '../../../services/recommendationApi';
+import CommonStyle from '../../../styles/common.module.less';
+import SearchForm from './components/SearchForm';
+
+const Editor = React.lazy(() => import('components/common/Editor'));
+
+const SelectTable = () => {
+  const { t } = useTranslation();
+  const [yamlDialogVisible, setYamlDialogVisible] = useState<boolean>(false);
+  const [currentSelection, setCurrentSelection] = useState<RecommendationSimpleInfo | null>(null);
+
+  const navigate = useNavigate();
+  const [selectedRowKeys, setSelectedRowKeys] = useState<(string | number)[]>([0, 1]);
+  const [visible, setVisible] = useState(false);
+  const [filterParams, setFilterParams] = useState({
+    namespace: undefined,
+    workloadType: undefined,
+    name: undefined,
+  });
+  const craneUrl: any = useCraneUrl();
+
+  const { data, isFetching, isError, isSuccess, error } = useFetchRecommendationListQuery(
+    {
+      craneUrl,
+          recommendationType: RecommendationType.IdleNode,
+    },
+    { skip: !craneUrl },
+  );
+  // const recommendation = data?.data?.items || [];
+
+  let recommendation: any[];
+  if (isSuccess) {
+    recommendation = data?.data?.items || [];
+  } else {
+    recommendation = [];
+    if (isError) MessagePlugin.error(`${(error as any).status} ${(error as any).error}`);
+  }
+
+  console.log(data);
+
+  const filterResult = recommendation
+    .filter((recommendation) => {
+      if (filterParams?.name) {
+        return new RegExp(`${filterParams.name}.*`).test(recommendation.name);
+      }
+      return true;
+    })
+    .filter((recommendation) => {
+      if (filterParams?.workloadType) return filterParams?.workloadType === recommendation.workloadType;
+      return true;
+    })
+    .filter((recommendation) => {
+      if (filterParams?.namespace) return filterParams?.namespace === recommendation?.namespace;
+      return true;
+    });
+
+  function onSelectChange(value: (string | number)[]) {
+    setSelectedRowKeys(value);
+  }
+
+  function rehandleClickOp(record: any) {
+    console.log(record);
+  }
+
+  function handleClickDelete(record: any) {
+    console.log(record);
+    setVisible(true);
+  }
+
+  function handleClose() {
+    setVisible(false);
+  }
+
+  const toYaml = (resource: any) => {
+    let yaml = null;
+    try {
+      yaml = JsYaml.dump(resource);
+    } catch (error) {
+      //
+    }
+    console.log(yaml);
+    return yaml;
+  };
+
+  return (
+    <>
+      <Row>
+        <Button  => navigate('/recommend/recommendationRule')}>{t('查看推荐规则')}</Button>
+      </Row>
+      <Divider></Divider>
+      <Row justify='start' style={{ marginBottom: '20px' }}>
+        <Col>
+          <SearchForm recommendation={recommendation} setFilterParams={setFilterParams} />
+        </Col>
+      </Row>
+      <Table
+        loading={isFetching || isError}
+        data={filterResult}
+        verticalAlign='middle'
+        columns={[
+          {
+            title: t('名称'),
+            colKey: 'metadata.name',
+            ellipsis: true,
+          },
+          {
+            title: t('节点名'),
+            colKey: 'spec.targetRef.name',
+          },
+          {
+            title: t('目标类型'),
+            ellipsis: true,
+            colKey: 'spec.targetRef',
+            cell({ row }) {
+              const { targetRef } = row.spec;
+              return (
+                <Space direction='vertical'>
+                  <Tag theme='success' variant='light'>
+                    {targetRef.kind}
+                  </Tag>
+                </Space>
+              );
+            },
+          },
+          {
+            title: t('创建时间'),
+            ellipsis: true,
+            colKey: 'metadata.creationTimestamp',
+            cell({ row }) {
+              const tmp = new Date(row.metadata.creationTimestamp);
+              return `${tmp.toLocaleDateString()} ${tmp.toLocaleTimeString()}`;
+            },
+          },
+          {
+            title: t('更新时间'),
+            ellipsis: true,
+            colKey: 'status.lastUpdateTime',
+            cell({ row }) {
+              const tmp = new Date(row.status.lastUpdateTime);
+              return `${tmp.toLocaleDateString()} ${tmp.toLocaleTimeString()}`;
+            },
+          },
+          {
+            align: 'left&
6D4E
#39;,
+            fixed: 'right',
+            width: 200,
+            colKey: 'op',
+            title: t('操作'),
+            cell(record) {
+              return (
+                <Button
+                  theme='primary'
+                  variant='text'
+                   => {
+                    setCurrentSelection(record.row as RecommendationSimpleInfo);
+                    setYamlDialogVisible(true);
+                  }}
+                >
+                  {t('查看YAML')}
+                </Button>
+              );
+            },
+          },
+        ]}
+        rowKey='index'
+        selectedRowKeys={selectedRowKeys}
+        hover
+        >
+        pagination={{
+          defaultCurrent: 1,
+          defaultPageSize: 10,
+          total: filterResult.length,
+          showJumper: true,
+          onChange(pageInfo) {
+            console.log(pageInfo, 'onChange pageInfo');
+          },
+          onCurrentChange(current, pageInfo) {
+            console.log(current, 'onCurrentChange current');
+            console.log(pageInfo, 'onCurrentChange pageInfo');
+          },
+          onPageSizeChange(size, pageInfo) {
+            console.log(size, 'onPageSizeChange size');
+            console.log(pageInfo, 'onPageSizeChange pageInfo');
+          },
+        }}
+      />
+      <Dialog header={t('确认删除当前所选推荐规则？')} visible={visible} >
+        <p>{t('推荐规则将从API Server中删除,且无法恢复')}</p>
+      </Dialog>
+      <Dialog
+        top='5vh'
+        width={850}
+        visible={yamlDialogVisible}
+         => {
+          setYamlDialogVisible(false);
+          setCurrentSelection(null);
+        }}
+        cancelBtn={null}
+         => {
+          setYamlDialogVisible(false);
+          setCurrentSelection(null);
+        }}
+      >
+        <React.Suspense fallback={'loading'}>
+          <Editor value={currentSelection ? toYaml(currentSelection) ?? '' : ''} />
+        </React.Suspense>
+      </Dialog>
+    </>
+  );
+};
+
+const selectPage: React.FC = () => (
+  <div className={classnames(CommonStyle.pageWithPadding, CommonStyle.pageWithColor)}>
+    <SelectTable />
+  </div>
+);
+
+export default memo(selectPage);
diff --git a/pkg/web/src/pages/Recommend/ResourcesRecommend/index.tsx b/pkg/web/src/pages/Recommend/ResourcesRecommend/index.tsx
@@ -151,8 +151,8 @@ export const SelectTable = () => {
                     <Space direction='vertical'>
                       {containers.map((o: any, i: number) => (
                         <Tag key={i} theme='primary' variant='light'>
-                          {o.name} / {o.resources.requests.cpu} /{' '}
-                          {Math.floor(parseFloat(o.resources.requests.memory) / 1048576)}Mi
+                          {o.name} / {o.resources.requests.cpu} /
+                          {transformK8sUnit(o.resources.requests.memory, K8SUNIT.Mi)}Mi
                         </Tag>
                       ))}
                     </Space>

diff --git a/pkg/web/src/router/modules/recommend.ts b/pkg/web/src/router/modules/recommend.ts
@@ -34,6 +34,13 @@ export const useRecommendRouteConfig = () => {
             title: t('副本数推荐'),
           },
         },
+        {
+          path: 'idleNode',
+          Component: lazy(() => import('pages/Recommend/IdleNode')),
+          meta: {
+            title: t('闭置节点'),
+          },
+        },
       ],
     },
   ];

diff --git a/pkg/web/src/services/recommendationApi.ts b/pkg/web/src/services/recommendationApi.ts
@@ -36,6 +36,7 @@ enum CompletionStrategyType {
 export enum RecommendationType {
   Replicas = 'Replicas',
   Resource = 'Resource',
+  IdleNode = 'IdleNode',
 }
 
 enum AdoptionType {
@@ -119,7 +120,7 @@ const URI = '/api/v1/recommendation';
 
 export const recommendationApi = createApi({
   reducerPath: 'recommendationApi',
-  tagTypes: ['recommendation'],
+  tagTypes: ['recommendation', 'idleNode'],
   baseQuery: fetchBaseQuery({
     cache: 'no-cache',
     baseUrl: ``,
-Original file line number
+Diff line change
@@ Expand Up / @@ -42,6 +42,7 @@ export const store = configureStore({ @@
           recommendationApi.middleware,
           prometheusApi.middleware,
         );
         return middlewares;
       },
     });
@@ Expand Down @@