Merge pull request #8 from m1666/master

feat(tcpdump & profile): 增加环境检查，优化下载模块
gotomicro · Jan 31, 2023 · 2e94370 · 2e94370
2 parents 221fbc3 + 04c306f
commit 2e94370
Show file tree

Hide file tree

Showing 106 changed files with 926 additions and 587 deletions.
diff --git a/ui/package.json b/ui/package.json
@@ -80,10 +80,9 @@
     "@ant-design/pro-components": "2.3.52",
     "@monaco-editor/react": "^4.4.6",
     "@types/js-yaml": "^4.0.5",
-    "@types/styled-components": "^5.1.26",
     "@umijs/route-utils": "^4.0.1",
     "ahooks": "^3.7.2",
-    "antd": "^5.1.5",
+    "antd": "^5.1.6",
     "classnames": "^2.3.0",
     "copy-to-clipboard": "^3.3.2",
     "dayjs": "^1.11.7",
@@ -107,6 +106,7 @@
   "devDependencies": {
     "@ant-design/pro-cli": "^3.0.1",
     "@playwright/test": "^1.17.0",
+    "@types/styled-components": "^5.1.26",
     "@types/classnames": "^2.3.1",
     "@types/express": "^4.17.0",
     "@types/history": "^4.7.0",
@@ -117,7 +117,7 @@
     "@types/react-dom": "^18.0.10",
     "@types/react-helmet": "^6.1.6",
     "@umijs/fabric": "^3.0.0",
-    "@umijs/max": "^4.0.46",
+    "@umijs/max": "^4.0.47",
     "@umijs/openapi": "^1.8.1",
     "cross-env": "^7.0.0",
     "cross-port-killer": "^1.3.0",

diff --git a/ui/src/app.tsx b/ui/src/app.tsx
@@ -1,12 +1,12 @@
 import Footer from '@/components/Footer';
+import { handleElectronMessage, RequestBaseUrl } from '@/utils/electronRenderUtil';
 import type { Settings as LayoutSettings } from '@ant-design/pro-components';
+import { loader } from '@monaco-editor/react';
 import type { RunTimeLayoutConfig } from '@umijs/max';
 import { history } from '@umijs/max';
-import defaultSettings from '../config/defaultSettings';
-import type { RequestConfig } from 'umi';
-import { handleElectronMessage, RequestBaseUrl } from '@/utils/electronRenderUtil';
 import { notification } from 'antd';
-import { loader } from '@monaco-editor/react';
+import type { RequestConfig } from 'umi';
+import defaultSettings from '../config/defaultSettings';
 
 // 初始化 monaco
 loader

diff --git a/ui/src/components/BackToTopButton/index.tsx b/ui/src/components/BackToTopButton/index.tsx
@@ -1,5 +1,5 @@
-import React, { useCallback } from 'react';
 import { FloatButton } from 'antd';
+import React, { useCallback } from 'react';
 
 const BackToTopButton: React.FC = () => {
   const handleScrollTarget = useCallback(() => document.getElementById('main') || window, []);

diff --git a/ui/src/components/ClusterSettingButton/index.tsx b/ui/src/components/ClusterSettingButton/index.tsx
@@ -1,6 +1,6 @@
-import React from 'react';
 import { StyledClusterSettingButton } from '@/components/ClusterSettingButton/styles/index.styled';
 import { SettingOutlined } from '@ant-design/icons';
+import React from 'react';
 
 const CLUSTER_SETTING_HASH = '#/manage/cluster';
 const ClusterSettingButton: React.FC = () => {

diff --git a/ui/src/components/ClusterSettingButton/styles/index.styled.ts b/ui/src/components/ClusterSettingButton/styles/index.styled.ts
@@ -1,5 +1,5 @@
-import styled from 'styled-components';
 import { FloatButton } from 'antd';
+import styled from 'styled-components';
 
 export const StyledClusterSettingButton = styled(FloatButton)`
   top: 30px;

diff --git a/ui/src/components/ContainerSelectCard/index.tsx b/ui/src/components/ContainerSelectCard/index.tsx
@@ -1,7 +1,7 @@
 import ContentCard from '@/components/ContentCard';
 import { Select } from 'antd';
-import React from 'react';
 import type { DefaultOptionType } from 'rc-select/lib/Select';
+import React from 'react';
 
 interface ContainerSelectCardProps {
   value?: string;

diff --git a/ui/src/components/ContentCard/index.tsx b/ui/src/components/ContentCard/index.tsx
@@ -1,11 +1,11 @@
-import type { ReactNode } from 'react';
-import React from 'react';
 import {
   StyledContentCard,
   StyledContentCardBody,
   StyledContentCardTitle,
   StyledContentCardTitleContext,
 } from '@/components/ContentCard/styles/index.styled';
+import type { ReactNode } from 'react';
+import React from 'react';
 
 interface ContentCardProps {
   id?: string;

diff --git a/ui/src/components/CustomPageWrapper/index.tsx b/ui/src/components/CustomPageWrapper/index.tsx
@@ -1,6 +1,6 @@
-import type { ReactNode } from 'react';
 import { Card } from 'antd';
 import type { CardProps } from 'antd/lib/card/Card';
+import type { ReactNode } from 'react';
 
 interface CustomPageWrapperProps extends CardProps {
   children?: ReactNode;

diff --git a/ui/src/components/Loading/index.tsx b/ui/src/components/Loading/index.tsx
@@ -1,6 +1,6 @@
-import React from 'react';
 import { StyledLoading } from '@/components/Loading/styles/index.styled';
 import { Spin } from 'antd';
+import React from 'react';
 
 interface LoadingProps {
   loading?: boolean;

diff --git a/ui/src/components/PageHeader/index.tsx b/ui/src/components/PageHeader/index.tsx
@@ -5,12 +5,12 @@ import {
   StyledPageHeaderTitle,
   StyledPageHeaderTitleContext,
 } from '@/components/PageHeader/styles/index.styled';
-import React, { useCallback, useMemo } from 'react';
-import { RollbackOutlined } from '@ant-design/icons';
 import { useTools } from '@/hooks/useTools';
+import { ToolsMapArr } from '@/pages/ToolsMap/configs/configs';
 import { k8zStorageKeys, localStorageManage } from '@/utils/storageUtil';
 import { useLocation } from '@@/exports';
-import { ToolsMapArr } from '@/pages/ToolsMap/configs/configs';
+import { RollbackOutlined } from '@ant-design/icons';
+import React, { useCallback, useMemo } from 'react';
 
 export interface PageHeaderProps {
   showBackHome?: boolean;

diff --git a/ui/src/components/PageHeader/styles/index.styled.ts b/ui/src/components/PageHeader/styles/index.styled.ts
@@ -1,5 +1,5 @@
-import styled from 'styled-components';
 import { Button } from 'antd';
+import styled from 'styled-components';
 
 export const StyledPageHeader = styled.div`
   position: relative;

diff --git a/ui/src/components/PodSelectCard/index.tsx b/ui/src/components/PodSelectCard/index.tsx
@@ -1,11 +1,11 @@
+import ContentCard from '@/components/ContentCard';
 import {
   StyledPodSelectCardPods,
   StyledPodSelectCardSelect,
 } from '@/components/PodSelectCard/styles/index.styled';
-import { Select, Tag } from 'antd';
-import { useModel } from '@umijs/max';
-import ContentCard from '@/components/ContentCard';
 import { usePodSelect } from '@/hooks/usePodSelect';
+import { useModel } from '@umijs/max';
+import { Select, Tag } from 'antd';
 import { useMemo } from 'react';
 import { useLocation } from 'umi';
 

diff --git a/ui/src/components/ToolCardEmpty/index.tsx b/ui/src/components/ToolCardEmpty/index.tsx
@@ -1,8 +1,8 @@
-import React from 'react';
-import { Empty } from 'antd';
+import ContentCard from '@/components/ContentCard';
 import { StyledCardPodEmpty } from '@/components/ToolCardEmpty/styles/index.styled';
 import { k8zStorageKeys, localStorageManage } from '@/utils/storageUtil';
-import ContentCard from '@/components/ContentCard';
+import { Empty } from 'antd';
+import React from 'react';
 
 interface ToolCardEmptyProps {
   tip: string;

diff --git a/ui/src/components/ToolsMenuButton/index.tsx b/ui/src/components/ToolsMenuButton/index.tsx
@@ -1,10 +1,10 @@
-import React, { useMemo } from 'react';
-import { FloatButton } from 'antd';
-import { ToolsMapArr } from '@/pages/ToolsMap/configs/configs';
-import { StyledToolsMenuButton } from '@/components/ToolsMenuButton/styles/index.styled';
-import { useLocation } from 'umi';
 import IconFont from '@/components/IconFont';
+import { StyledToolsMenuButton } from '@/components/ToolsMenuButton/styles/index.styled';
 import { useTools } from '@/hooks/useTools';
+import { ToolsMapArr } from '@/pages/ToolsMap/configs/configs';
+import { FloatButton } from 'antd';
+import React, { useMemo } from 'react';
+import { useLocation } from 'umi';
 
 const ToolsMenuButton: React.FC = () => {
   const locationPathname = useLocation().pathname;

diff --git a/ui/src/components/ToolsMenuButton/styles/index.styled.ts b/ui/src/components/ToolsMenuButton/styles/index.styled.ts
@@ -1,5 +1,5 @@
-import styled from 'styled-components';
 import { FloatButton } from 'antd';
+import styled from 'styled-components';
 
 export const StyledToolsMenuButton = styled(FloatButton.Group)`
   left: 38px;

diff --git a/ui/src/hooks/useContainer.ts b/ui/src/hooks/useContainer.ts
@@ -1,6 +1,6 @@
 import type { Pod } from '@/services/pods';
-import { useState, useMemo, useEffect } from 'react';
 import lodash from 'lodash';
+import { useEffect, useMemo, useState } from 'react';
 
 export const MIN_CONTAINERS_LEN = 1;
 export const FIST_CONTAINER_INDEX = 0;

diff --git a/ui/src/hooks/usePodSelect.ts b/ui/src/hooks/usePodSelect.ts
@@ -1,17 +1,17 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { SHOW_ALL_POD_PATHNAME_ARR, SHOW_CONFIGMAP_PATHNAME_ARR } from '@/components/PodSelectCard';
 import type { Clusters } from '@/services/cluster';
 import { getClusterList } from '@/services/cluster';
-import { k8zStorageKeys, localStorageManage } from '@/utils/storageUtil';
-import { message } from 'antd';
-import type { Namespace } from '@/services/namespace';
-import { getNamespaceList } from '@/services/namespace';
-import { SHOW_ALL_POD_PATHNAME_ARR, SHOW_CONFIGMAP_PATHNAME_ARR } from '@/components/PodSelectCard';
 import type { ConfigMapInfo } from '@/services/configmap';
 import { getConfigmaps } from '@/services/configmap';
+import type { Namespace } from '@/services/namespace';
+import { getNamespaceList } from '@/services/namespace';
 import type { Pod } from '@/services/pods';
 import { getPodListInNamespace } from '@/services/pods';
 import { checkJsonStrUtils } from '@/utils/checkJsonUtils';
+import { k8zStorageKeys, localStorageManage } from '@/utils/storageUtil';
+import { message } from 'antd';
 import { omit } from 'lodash';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useLocation } from 'umi';
 
 interface PodSelectProps {
@@ -98,7 +98,7 @@ export const usePodSelect = ({
       .finally(() => setLoadingCluster(false));
   }, []);
 
-  const getNamespaces = useCallback((cluster, isFocus?: boolean) => {
+  const getNamespaces = useCallback((cluster: string, isFocus?: boolean) => {
     setLoadingNamespace(true);
     getNamespaceList({ cluster })
       .then((res) => {
@@ -119,7 +119,7 @@ export const usePodSelect = ({
   }, []);
 
   const getPodsOrConfigmap = useCallback(
-    (cluster, namespace, isFocus?: boolean) => {
+    (cluster: string, namespace: string, isFocus?: boolean) => {
       const allowNotReady = SHOW_ALL_POD_PATHNAME_ARR.includes(currentLocation?.pathname);
       const getList = isConfigMap ? getConfigmaps : getPodListInNamespace;
       const params = isConfigMap

diff --git a/ui/src/hooks/useTerminal.ts b/ui/src/hooks/useTerminal.ts
@@ -1,13 +1,13 @@
-import { useCallback, useRef } from 'react';
-import lodash from 'lodash';
 import type { OptionsPodInfo } from '@/services/pods';
+import lodash from 'lodash';
+import { useCallback, useRef } from 'react';
 import { Terminal } from 'xterm';
 import { FitAddon } from 'xterm-addon-fit';
 // @ts-ignore
 // AdventureTime,Dracula
-import { OneHalfLight } from 'xterm-theme';
-import { getWSHost } from '@/utils/common';
 import { DEFAULT_WAIT } from '@/configs/default';
+import { getWSHost } from '@/utils/common';
+import { OneHalfLight } from 'xterm-theme';
 
 interface TerminalProps {
   api: string;

diff --git a/ui/src/layouts/index.tsx b/ui/src/layouts/index.tsx
@@ -1,11 +1,11 @@
-import React from 'react';
-import { StyledBody, StyledMain } from '@/layouts/styles/index.styled';
-import PageHeader from '@/components/PageHeader';
 import BackToTopButton from '@/components/BackToTopButton';
 import ClusterSettingButton from '@/components/ClusterSettingButton';
-import { ConfigProvider } from 'antd';
+import PageHeader from '@/components/PageHeader';
 import ToolsMenuButton from '@/components/ToolsMenuButton';
+import { StyledBody, StyledMain } from '@/layouts/styles/index.styled';
 import { ToolsMapArr } from '@/pages/ToolsMap/configs/configs';
+import { ConfigProvider } from 'antd';
+import React from 'react';
 import { Outlet, useLocation } from 'umi';
 
 const BasicLayout: React.FC = () => {

diff --git a/ui/src/main/createProtocol.ts b/ui/src/main/createProtocol.ts
@@ -1,6 +1,6 @@
 import { protocol } from 'electron';
-import { URL } from 'url';
 import * as path from 'path';
+import { URL } from 'url';
 
 export default (scheme: string) => {
   protocol.registerFileProtocol(scheme, (request, respond) => {

diff --git a/ui/src/main/index.ts b/ui/src/main/index.ts
@@ -1,13 +1,13 @@
-import { app, BrowserWindow, protocol } from 'electron';
+import { app, BrowserWindow, ipcMain, protocol, shell } from 'electron';
 import * as path from 'path';
 import createProtocol from './createProtocol';
+import { Platforms } from './enums';
+import { initWindow } from './init/init';
 import { serverProcess } from './server';
+import { downloadFile } from './utils/downloadFileUtil';
 import { fixPathUtil } from './utils/fixPathUtil';
 import { initLog } from './utils/loggerUtil';
 import { initWindowMenu } from './utils/menuUtil';
-import { downloadFile } from './utils/downloadFileUtil';
-import { initWindow } from './init/init';
-import { Platforms } from './enums';
 
 initLog();
 fixPathUtil();
@@ -43,6 +43,9 @@ function createWindow() {
     createProtocol('k8z');
     mainWindow.loadURL('k8z://./index.html/').catch(console.error);
   }
+  ipcMain.on('openBrowser', async (evt, { url }) => {
+    shell.openExternal(url).catch(console.error);
+  });
   downloadFile(mainWindow).catch(console.error);
 }
 

diff --git a/ui/src/main/server.ts b/ui/src/main/server.ts
@@ -1,12 +1,12 @@
 import type { ChildProcess } from 'child_process';
 import { exec } from 'child_process';
-import portfinder from 'portfinder';
 import { app, dialog } from 'electron';
+import fs from 'fs-extra';
 import * as net from 'net';
 import path from 'path';
-import { getLogPath } from './utils/loggerUtil';
-import fs from 'fs-extra';
+import portfinder from 'portfinder';
 import { Platforms } from './enums';
+import { getLogPath } from './utils/loggerUtil';
 import { toNumber } from 'lodash';
 
 export let serverProcess: ChildProcess;

diff --git a/ui/src/main/utils/downloadFileUtil.ts b/ui/src/main/utils/downloadFileUtil.ts
@@ -1,7 +1,7 @@
 import type { BrowserWindow } from 'electron';
 import { app, dialog, ipcMain } from 'electron';
-import path from 'path';
 import { pathExistsSync } from 'fs-extra';
+import path from 'path';
 
 export const openFileDialog = async (mainWindow: BrowserWindow) => {
   const defaultPath = app.getPath('downloads');
@@ -17,14 +17,14 @@ export const openFileDialog = async (mainWindow: BrowserWindow) => {
 };
 
 export async function downloadFile(mainWindow: BrowserWindow) {
-  let selectPath = '';
-  ipcMain.on('download', async (evt, args) => {
+  let selectPath = app.getPath('downloads');
+  ipcMain.on('download', async (evt, { downloadUrl }) => {
     // 打开系统弹窗 选择文件下载位置]
     openFileDialog(mainWindow)
       .then((res) => {
         if (res) {
           selectPath = res;
-          mainWindow.webContents.downloadURL(args.downloadUrl);
+          mainWindow.webContents.downloadURL(downloadUrl);
         }
       })
       .catch(console.error);
@@ -43,24 +43,31 @@ export async function downloadFile(mainWindow: BrowserWindow) {
         ext,
         name: `${name}(${fileNum})`,
       });
-      savePath = `${selectPath}/${newFileName}`;
+      savePath = path.join(selectPath, newFileName);
     }
 
+    console.log('savePath: ', savePath);
+
     item.setSavePath(savePath);
-    app.badgeCount = 1;
+    app.badgeCount = app.badgeCount + 1;
     item.on('updated', (event, state) => {
       if (state === 'interrupted') {
         console.log('Download is interrupted but can be resumed');
       } else if (state === 'progressing') {
         if (item.isPaused()) {
           console.log('Download is paused');
         } else {
-          console.log(`Received bytes: ${item.getReceivedBytes()}`);
+          const progress = item.getReceivedBytes() / item.getTotalBytes();
+          mainWindow.setProgressBar(progress);
+          console.log(
+            `Received bytes: ${item.getReceivedBytes()},Total Bytes: ${item.getTotalBytes()}`,
+          );
         }
       }
     });
     item.once('done', (event, state) => {
-      app.badgeCount = 0;
+      app.badgeCount = app.badgeCount - 1;
+      mainWindow.setProgressBar(-1);
       if (state === 'completed') {
         console.log('Download successfully');
         dialog.showMessageBox(mainWindow, {

diff --git a/ui/src/main/utils/fixPathUtil.ts b/ui/src/main/utils/fixPathUtil.ts
@@ -1,7 +1,7 @@
-import { userInfo } from 'os';
 import { execSync } from 'child_process';
-import stripAnsi from 'strip-ansi';
 import lodash from 'lodash';
+import { userInfo } from 'os';
+import stripAnsi from 'strip-ansi';
 import { Platforms } from '../enums';
 
 export const ENV_PATH_KEY = 'PATH';

diff --git a/ui/src/models/pod.ts b/ui/src/models/pod.ts
@@ -1,7 +1,7 @@
+import type { ConfigMapInfo } from '@/services/configmap';
 import type { Pod } from '@/services/pods';
 import { k8zStorageKeys, localStorageManage, removeLocalStorageManage } from '@/utils/storageUtil';
 import { useCallback, useState } from 'react';
-import type { ConfigMapInfo } from '@/services/configmap';
 
 export default () => {
   const [cluster, setCluster] = useState<string>();