feat(console): change create vm network mode to virtio (#1920)

* feat(console): change network bridge model to virtio * feat(console): support query vm by vm name * fix(console): fix useFetch polling can't clear * fix(console): fix log tabel type not right
tkestack · May 12, 2022 · 6a9eb7b · 6a9eb7b
1 parent c5aee4b
commit 6a9eb7b
Show file tree

Hide file tree

Showing 8 changed files with 84 additions and 36 deletions.
diff --git a/...nsole/src/modules/cluster/components/resource/virtual-machine/pages/list/action-panel.tsx b/...nsole/src/modules/cluster/components/resource/virtual-machine/pages/list/action-panel.tsx
@@ -5,7 +5,7 @@ import { namespaceListState, namespaceSelectionState, clusterIdState } from '../
 import { router } from '@src/modules/cluster/router';
 import { VmMonitorDialog } from '../../components';
 
-export const VMListActionPanel = ({ route, reFetch, vmList }) => {
+export const VMListActionPanel = ({ route, reFetch, vmList, onQueryChange }) => {
   const namespaceListLoadable = useRecoilValueLoadable(namespaceListState);
   const [namespaceSelection, setNamespaceSelection] = useRecoilState(namespaceSelectionState);
 
@@ -49,6 +49,23 @@ export const VMListActionPanel = ({ route, reFetch, vmList }) => {
               onChange={value => setNamespaceSelection(value)}
             />
 
+            <TagSearchBox
+              tips=""
+              style={{ width: 300 }}
+              attributes={[
+                {
+                  type: 'input',
+                  key: 'name',
+                  name: '虚拟机名称'
+                }
+              ]}
+              onChange={tags => {
+                const name = tags?.find(item => item?.attr?.key === 'name')?.values?.[0]?.name ?? '';
+
+                onQueryChange(name);
+              }}
+            />
+
             <Button icon="refresh" onClick={reFetch} />
           </>
         }

diff --git a/web/console/src/modules/cluster/components/resource/virtual-machine/pages/list/index.tsx b/web/console/src/modules/cluster/components/resource/virtual-machine/pages/list/index.tsx
@@ -3,7 +3,7 @@ import { Table, Button, TableColumn, Text, Pagination, Dropdown, List } from 'te
 import { VMListActionPanel } from './action-panel';
 import { useFetch } from '@src/modules/common/hooks';
 import * as dayjs from 'dayjs';
-import { useSetRecoilState, useRecoilValueLoadable, useRecoilState, useRecoilValue } from 'recoil';
+import { useSetRecoilState, useRecoilState, useRecoilValue } from 'recoil';
 import { clusterIdState, namespaceSelectionState, vmSelectionState } from '../../store/base';
 import { virtualMachineAPI } from '@src/webApi';
 import { router } from '@src/modules/cluster/router';
@@ -18,6 +18,8 @@ export const VMListPanel = ({ route }) => {
   const namespace = useRecoilValue(namespaceSelectionState);
   const setVMSelection = useSetRecoilState(vmSelectionState);
 
+  const [query, setQuery] = useState('');
+
   const columns: TableColumn[] = [
     {
       key: 'name',
@@ -131,7 +133,7 @@ export const VMListPanel = ({ route }) => {
     async ({ paging, continueToken }) => {
       const { items, newContinueToken, restCount } = await virtualMachineAPI.fetchVMListWithVMI(
         { clusterId, namespace },
-        { limit: paging?.pageSize, continueToken }
+        { limit: paging?.pageSize, continueToken, query }
       );
       return {
         data:
@@ -153,19 +155,20 @@ export const VMListPanel = ({ route }) => {
         totalCount: (paging.pageIndex - 1) * paging.pageSize + items.length + restCount
       };
     },
-    [clusterId, namespace],
+    [clusterId, namespace, query],
     {
       mode: 'continue',
       defaultPageSize,
       fetchAble: !!(clusterId && namespace),
       polling: true,
-      pollingDelay: 30 * 1000
+      pollingDelay: 30 * 1000,
+      needClearData: false
     }
   );
 
   return (
     <>
-      <VMListActionPanel route={route} reFetch={reFetch} vmList={vmList ?? []} />
+      <VMListActionPanel route={route} reFetch={reFetch} vmList={vmList ?? []} onQueryChange={setQuery} />
       <Table
         columns={columns}
         records={vmList ?? []}

diff --git a/web/console/src/modules/common/hooks/useFetch.ts b/web/console/src/modules/common/hooks/useFetch.ts
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 
 interface IPaging {
   pageIndex: number;
@@ -27,11 +27,12 @@ interface IUseFetchOptions<T> {
   fetchAble?: boolean;
   polling?: boolean;
   pollingDelay?: number;
+  needClearData?: boolean;
 }
 
 type IUseFetchQuery<T> = (params?: IQueryParams) => Promise<IQueryResponse<T>>;
 
-type IStatus = 'idle' | 'loading' | 'success' | 'error';
+type IStatus = 'idle' | 'loading' | 'success' | 'error' | 'loading-polling';
 
 export function useFetch<T>(
   query: IUseFetchQuery<T>,
@@ -46,7 +47,8 @@ export function useFetch<T>(
     defaultPageSize = 20,
     fetchAble = true,
     polling = false,
-    pollingDelay = 5000
+    pollingDelay = 5000,
+    needClearData = true
   } = options ?? {};
 
   const [data, _setData] = useState<T>(null);
@@ -64,21 +66,21 @@ export function useFetch<T>(
   }
 
   // 定时相关
-  const [timer, setTimer] = useState(null);
+  const timer = useRef(null);
   useEffect(() => {
-    clearInterval(timer);
+    clearInterval(timer.current);
 
     const _timer = setInterval(() => {
       if (!polling) return;
 
-      if (status === 'loading') return;
+      if (status === 'loading' || status === 'loading-polling') return;
 
-      reFetch();
+      fetchData(true);
     }, pollingDelay);
 
-    setTimer(_timer);
+    timer.current = _timer;
 
-    return () => clearInterval(timer);
+    return () => clearInterval(timer.current);
   }, [polling, status, pollingDelay]);
 
   // 普通翻页相关的
@@ -110,11 +112,13 @@ export function useFetch<T>(
     setPageIndex(pre => pre - 1);
   }
 
-  async function fetchData() {
-    setData(null);
+  async function fetchData(isPolling = false) {
+    if (needClearData) {
+      setData(null);
+    }
 
     try {
-      setStatus('loading');
+      setStatus(isPolling ? 'loading-polling' : 'loading');
       const paging = { pageIndex, pageSize };
 
       switch (mode) {
@@ -198,4 +202,5 @@ export function useFetch<T>(
 /* TODO:
 - 边界条件
 - 无限分页
+- 轮训的时候不想出现loading，但是其他时候需要 - done
  */
diff --git a/web/console/src/modules/logStash/actions/logActions.ts b/web/console/src/modules/logStash/actions/logActions.ts
@@ -31,6 +31,7 @@ import { editLogStashActions } from './editLogStashActions';
 import { podActions } from './podActions';
 import { resourceActions } from './resourceActions';
 import { Base64 } from 'js-base64';
+import { HOST_LOG_INPUT_PATH_PREFIX } from '../constants/Config';
 
 type GetState = () => RootState;
 
@@ -252,13 +253,12 @@ export const restActions = {
 
           let inputPath = inputOption?.path ?? '';
 
-          const containerPrefix = '/run/containerd/io.containerd.runtime.v2.task/k8s.io/*/rootfs';
-          const nodeInputPathType = inputPath.includes(containerPrefix) ? 'container' : 'host';
+          const nodeInputPathType = inputPath.includes(HOST_LOG_INPUT_PATH_PREFIX) ? 'container' : 'host';
 
           dispatch(editLogStashActions.setNodeLogPathType(nodeInputPathType));
 
           if (nodeInputPathType === 'container') {
-            inputPath = inputPath.replace(containerPrefix, '');
+            inputPath = inputPath.replace(HOST_LOG_INPUT_PATH_PREFIX, '');
           }
 
           dispatch(editLogStashActions.inputNodeLogPath(inputPath));

diff --git a/web/console/src/modules/logStash/components/EditLogStashPanel.tsx b/web/console/src/modules/logStash/components/EditLogStashPanel.tsx
@@ -48,6 +48,7 @@ import { EditOriginNodePanel } from './EditOriginNodePanel';
 import { isCanCreateLogStash } from './LogStashActionPanel';
 import { RootProps } from './LogStashApp';
 import { Base64 } from 'js-base64';
+import { HOST_LOG_INPUT_PATH_PREFIX } from '../constants/Config';
 
 /** 日志采集类型的提示 */
 const logModeTip = {
@@ -459,10 +460,7 @@ export class EditLogStashPanel extends React.Component<RootProps, any> {
         const hostLogInput: HostLogInput = {
           host_log_input: {
             labels,
-            path:
-              nodeLogPathType === 'container'
-                ? `/run/containerd/io.containerd.runtime.v2.task/k8s.io/*/rootfs${nodeLogPath}`
-                : nodeLogPath
+            path: nodeLogPathType === 'container' ? `${HOST_LOG_INPUT_PATH_PREFIX}${nodeLogPath}` : nodeLogPath
           },
           type: 'host-log'
         };

diff --git a/web/console/src/modules/logStash/components/LogStashTablePanel.tsx b/web/console/src/modules/logStash/components/LogStashTablePanel.tsx
@@ -34,6 +34,7 @@ import { Log } from '../models';
 import { router } from '../router';
 import { isCanCreateLogStash } from './LogStashActionPanel';
 import { RootProps } from './LogStashApp';
+import { HOST_LOG_INPUT_PATH_PREFIX } from '../constants/Config';
 
 const mapDispatchToProps = dispatch =>
   Object.assign({}, bindActionCreators({ actions: allActions }, dispatch), {
@@ -92,7 +93,14 @@ export class LogStashTablePanel extends React.Component<RootProps, any> {
         key: 'logType',
         header: t('类型'),
         width: '15%',
-        render: x => <Text overflow>{logModeMap[x.spec.input.type]}</Text>
+        render: x => {
+          let type = x?.spec?.input?.type;
+          if (x?.spec?.input?.host_log_input?.path?.includes(HOST_LOG_INPUT_PATH_PREFIX)) {
+            type = 'pod-log';
+          }
+
+          return <Text overflow>{logModeMap?.[type] ?? '-'}</Text>;
+        }
       },
       {
         key: 'Namespace',
@@ -108,9 +116,14 @@ export class LogStashTablePanel extends React.Component<RootProps, any> {
       }
     ];
 
-    let { canCreate, tip } = isCanCreateLogStash(clusterSelection[0], logList.data.records, isDaemonsetNormal, isOpenLogStash);
+    const { canCreate, tip } = isCanCreateLogStash(
+      clusterSelection[0],
+      logList.data.records,
+      isDaemonsetNormal,
+      isOpenLogStash
+    );
 
-    let emptyTips: JSX.Element = (
+    const emptyTips: JSX.Element = (
       <React.Fragment>
         <Trans>
           <Text verticalAlign="middle">{t('您选择的该集群的日志采集规则列表为空，您可以')}</Text>
@@ -144,7 +157,7 @@ export class LogStashTablePanel extends React.Component<RootProps, any> {
     let { actions, isOpenLogStash, route, clusterSelection } = this.props,
       urlParams = router.resolve(route);
 
-    if (clusterSelection && clusterSelection[0] && clusterSelection[0].spec.logAgentName || isOpenLogStash) {
+    if ((clusterSelection && clusterSelection[0] && clusterSelection[0].spec.logAgentName) || isOpenLogStash) {
       router.navigate(Object.assign({}, urlParams, { mode: 'create' }), route.queries);
     } else {
       actions.workflow.authorizeOpenLog.start();
@@ -153,7 +166,7 @@ export class LogStashTablePanel extends React.Component<RootProps, any> {
 
   /** 获取当前的Daemonset的状态 */
   private _getDaemonsetStatus() {
-    let { isDaemonsetNormal } = this.props;
+    const { isDaemonsetNormal } = this.props;
     let content: JSX.Element;
 
     content = (
@@ -177,7 +190,7 @@ export class LogStashTablePanel extends React.Component<RootProps, any> {
   private _renderOperationCell(logStash: Log) {
     let { actions, route, clusterVersion, clusterSelection } = this.props,
       urlParams = router.resolve(route);
-    let logAgentName = clusterSelection && clusterSelection[0] && clusterSelection[0].spec.logAgentName || '';
+    const logAgentName = (clusterSelection && clusterSelection[0] && clusterSelection[0].spec.logAgentName) || '';
 
     // 编辑日志采集器规则的按钮
     const renderEditButton = () => {
@@ -207,7 +220,7 @@ export class LogStashTablePanel extends React.Component<RootProps, any> {
         <LinkButton
           key={logStash.id + 'delete'}
           onClick={() => {
-            let resource: CreateResource = {
+            const resource: CreateResource = {
               id: uuid(),
               namespace: logStash.metadata.namespace,
               clusterId: route.queries['clusterId'],
@@ -223,7 +236,7 @@ export class LogStashTablePanel extends React.Component<RootProps, any> {
       );
     };
 
-    let btns = [];
+    const btns = [];
     btns.push(renderEditButton());
     btns.push(renderDeleteButton());
 

diff --git a/web/console/src/modules/logStash/constants/Config.ts b/web/console/src/modules/logStash/constants/Config.ts
@@ -177,3 +177,5 @@ export const ResourceListMapForPodLog = [
     value: 'cronjob'
   }
 ];
+
+export const HOST_LOG_INPUT_PATH_PREFIX = '/run/containerd/io.containerd.runtime.v2.task/k8s.io/*/rootfs';
diff --git a/web/console/src/webApi/virtual-machine.ts b/web/console/src/webApi/virtual-machine.ts
@@ -82,8 +82,18 @@ export async function fetchVMIList({ clusterId, namespace }) {
   );
 }
 
-export async function fetchVMListWithVMI({ clusterId, namespace }, { limit, continueToken }) {
-  const { items, metadata } = await fetchVMList({ clusterId, namespace }, { limit, continueToken });
+export async function fetchVMListWithVMI({ clusterId, namespace }, { limit, continueToken, query }) {
+  let items, metadata;
+
+  if (query) {
+    const vm = await fetchVM({ clusterId, namespace, name: query });
+    items = vm ? [vm] : [];
+  } else {
+    const rsp = await fetchVMList({ clusterId, namespace }, { limit, continueToken });
+
+    items = rsp?.items ?? [];
+    metadata = rsp?.metadata;
+  }
 
   return {
     items: await Promise.all(
@@ -155,7 +165,7 @@ export function createVM({
 
               interfaces: [
                 {
-                  model: 'e1000',
+                  model: 'virtio',
                   name: 'default',
                   bridge: {}
                 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -177,3 +177,5 @@ export const ResourceListMapForPodLog = [ @@
         value: 'cronjob'
       }
     ];
+    export const HOST_LOG_INPUT_PATH_PREFIX = '/run/containerd/io.containerd.runtime.v2.task/k8s.io/*/rootfs';