fix(bug#742): fix all eslint line error & warn

.github/workflows/lint.yml

@@ -0,0 +1,17 @@
+name: Lint
+
+on: pull_request
+
+jobs:
+  eslint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: mrdivyansh/eslint-action@v1.0.7
+        # GITHUB_TOKEN in forked repositories is read-only
+        # https://help.github.com/en/actions/reference/events-that-trigger-workflows#pull-request-event-pull_request
+        if: ${{ github.event_name == 'push' || github.event.pull_request.head.repo.full_name == github.repository }}
+        with:
+          repo-token: ${{secrets.GITHUB_TOKEN}}
+          eslint-rc: /pkg/web/.eslintrc.js
+          execute-on-files: /pkg/web/src

pkg/web/.eslintrc.js

@@ -8,7 +8,7 @@ module.exports = {
     'plugin:@typescript-eslint/recommended',
     // 'plugin:i18next/recommended',
   ],
-  plugins: ['eslint-plugin-prettier'],
+  plugins: ['eslint-plugin-prettier', 'unused-imports'],
   parser: '@typescript-eslint/parser',
   env: {
     jest: true,
@@ -28,6 +28,16 @@ module.exports = {
         allowForLoopAfterthoughts: true,
       },
     ],
+    'no-unused-vars': 0,
+    '@typescript-eslint/no-unused-vars': 0,
+    'unused-imports/no-unused-imports': 'error',
+    'unused-imports/no-unused-vars': [
+      'warn',
+      { vars: 'all', varsIgnorePattern: '^_', args: 'after-used', argsIgnorePattern: '^_' },
+    ],
+    'prefer-destructuring': 0,
+    'array-callback-return': 0,
+    'no-useless-escape': 0,
     'react/display-name': 'off',
     // jsx 单引号
     'jsx-quotes': [2, 'prefer-single'],

pkg/web/package.json

@@ -40,6 +40,7 @@
     "eslint-plugin-import": "^2.25.4",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-react": "^7.28.0",
+    "eslint-plugin-unused-imports": "^2.0.0",
     "husky": "^7.0.4",
     "i18next-scanner": "^3.1.0",
     "less": "^4.1.2",

pkg/web/src/components/BoardChart/index.tsx

@@ -226,7 +226,6 @@ function getPercentageChange(oldNumber: any, newNumber: any) {
 
 const BoardChart = ({
   title,
-  prefix,
   countPrefix,
   desc,
   Icon,

pkg/web/src/components/PieChart/index.tsx

@@ -1,5 +1,5 @@
 import { useCraneUrl } from '../../hooks';
-import { Card, CardProps, DateRangePicker, MessagePlugin, Popup } from 'tdesign-react';
+import { Card, DateRangePicker, MessagePlugin, Popup } from 'tdesign-react';
 import React, { useState } from 'react';
 import ReactEcharts from 'echarts-for-react';
 import dayjs from 'dayjs';
@@ -24,6 +24,7 @@ const fetchPieData = (craneUrl: string, title: string, timeDateRangePicker: stri
   const start = dayjs(timeDateRangePicker[0]).valueOf();
   const end = dayjs(timeDateRangePicker[1]).valueOf();
   const minutesDuration = Math.round((end - start) / 1000 / 60);
+  // eslint-disable-next-line no-param-reassign
   query = query.replaceAll('{DURATION}', minutesDuration.toString());
   const { data, isError } = useRangePrometheusQuery({ craneUrl, start, end, step, query });
   if (isError) MessagePlugin.error(`[${title}] Check Your Network Or Query Params !!!`);

pkg/web/src/components/SeriesLineChart/index.tsx

@@ -116,17 +116,7 @@ const buildLineChartOption = (lineStyle: LineStyle | undefined, linesData: ISeri
   };
 };
 
-const SeriesLineChart = ({
-  title,
-  subTitle,
-  datePicker,
-  timeRange,
-  step,
-  xAxis,
-  lines,
-  lineStyle,
-  tips,
-}: ISeriesLineChart) => {
+const SeriesLineChart = ({ title, subTitle, datePicker, timeRange, step, lines, lineStyle }: ISeriesLineChart) => {
   const { t } = useTranslation();
   const craneUrl: any = useCraneUrl();
 

pkg/web/src/components/common/Editor.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useRef } from 'react';
 
 import 'monaco-editor/esm/vs/basic-languages/dockerfile/dockerfile.contribution';
 import 'monaco-editor/esm/vs/basic-languages/yaml/yaml.contribution';

pkg/web/src/hooks/useDynamicChart.ts

@@ -7,7 +7,7 @@ import lodashSet from 'lodash/set';
 import lodashMap from 'lodash/map';
 import { ETheme } from '../types';
 
-export type TChartColorKey = keyof typeof CHART_COLORS[ETheme.light];
+export type TChartColorKey = keyof (typeof CHART_COLORS)[ETheme.light];
 /**
  * 根据当前主题色返回动态的图表颜色列表
  * @param options 图表的固定配置

pkg/web/src/hooks/useGrafanaQueyStr.ts

@@ -6,14 +6,14 @@ import React from 'react';
 import { useIsNeedSelectNamespace } from './useIsNeedSelectNamespace';
 import { useSelector } from './useSelector';
 
-export const useGrafanaQueryStr = ({ panelId, selectedDashboard }: { panelId: string, selectedDashboard: any }) => {
+export const useGrafanaQueryStr = ({ panelId, selectedDashboard }: { panelId: string; selectedDashboard: any }) => {
   const customRange = useSelector((state) => state.insight.customRange);
   const selectedNamespace = useSelector((state) => state.insight.selectedNamespace);
   const discount = useSelector((state) => state.insight.discount);
   const selectedWorkload = useSelector((state) => state.insight.selectedWorkload);
   const selectedWorkloadType = useSelector((state) => state.insight.selectedWorkloadType);
 
-  const isNeedSelectNamespace = useIsNeedSelectNamespace({selectedDashboard});
+  const isNeedSelectNamespace = useIsNeedSelectNamespace({ selectedDashboard });
 
   const [from, to] = React.useMemo(
     () => [dayjs(customRange.start).toDate().getTime(), dayjs(customRange.end).toDate().getTime()],

pkg/web/src/hooks/useIsNeedSelectNamespace.ts

@@ -1,14 +1,12 @@
-import { useSelector } from './useSelector';
 import { grafanaApi } from 'services/grafanaApi';
 
-export const useIsNeedSelectNamespace = ({ selectedDashboard }: { selectedDashboard?: any } = {})=> {
-
+export const useIsNeedSelectNamespace = ({ selectedDashboard }: { selectedDashboard?: any } = {}) => {
   const dashboardDetail = grafanaApi.useFetchDashboardDetailQuery(
     { dashboardUid: selectedDashboard?.uid },
     { skip: !selectedDashboard?.uid },
   );
 
   return (dashboardDetail?.data?.dashboard?.templating?.list ?? []).find(
-    (item: { name: string }) => (item.name === 'namespace' || item.name === 'Namespace'),
+    (item: { name: string }) => item.name === 'namespace' || item.name === 'Namespace',
   );
 };

pkg/web/src/layouts/components/Header/HeaderIcon.tsx

@@ -4,14 +4,12 @@ import { toggleSetting } from 'modules/global';
 import { useAppDispatch } from 'modules/store';
 import React, { memo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useNavigate } from 'react-router-dom';
 import { HelpCircleIcon, Icon, LogoGithubIcon, SettingIcon } from 'tdesign-icons-react';
 import { Button, Col, Dropdown, Popup, Row } from 'tdesign-react';
 
 export default memo(() => {
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
-  const navigate = useNavigate();
 
   const gotoWiki = () => {
     window.open('https://gocrane.io/docs');

pkg/web/src/layouts/components/Header/index.tsx

@@ -11,11 +11,6 @@ import { useLocation, useNavigate } from 'react-router-dom';
 import { ViewListIcon } from 'tdesign-icons-react';
 import { Button, Col, Layout, MessagePlugin, Row, Select } from 'tdesign-react';
 import { useFetchClusterListQuery } from '../../../services/clusterApi';
-import { recommendationRuleApi } from '../../../services/recommendationRuleApi';
-import { recommendationApi } from '../../../services/recommendationApi';
-import { prometheusApi } from '../../../services/prometheusApi';
-import { namespaceApi } from '../../../services/namespaceApi';
-import { grafanaApi } from '../../../services/grafanaApi';
 
 const { Header } = Layout;
 

pkg/web/src/modules/insightSlice.ts

@@ -17,10 +17,9 @@ export interface InsightState {
 
   discount: number;
 
-  selectedWorkloadType?: string| null;
-
-  selectedWorkload?: string| null;
+  selectedWorkloadType?: string | null;
 
+  selectedWorkload?: string | null;
 }
 
 export const initialInsightState: InsightState = {

pkg/web/src/pages/Cost/CarbonInsight/components/CarbonChart.tsx

@@ -12,7 +12,7 @@ const CarbonChart = () => {
     subTitle: t('(瓦特/小时)'),
     datePicker: true,
     step: '1h',
-    xAxis: {type: 'time'},
+    xAxis: { type: 'time' },
     lines: [
       {
         name: t('energy consumption'),

pkg/web/src/pages/Cost/ClusterOverview/ClusterOverviewPanel.tsx

@@ -1,9 +1,9 @@
 import { OverviewSearchPanel } from './OverviewSearchPanel';
 import { PanelWrapper } from './PanelWrapper';
-import {useCraneUrl, useSelector} from 'hooks';
+import { useCraneUrl } from 'hooks';
 import React, { memo } from 'react';
 import { useTranslation } from 'react-i18next';
-import {useFetchDashboardDetailQuery, useFetchDashboardListQuery} from 'services/grafanaApi';
+import { useFetchDashboardDetailQuery, useFetchDashboardListQuery } from 'services/grafanaApi';
 import { Row } from 'tdesign-react';
 
 export default memo(() => {

pkg/web/src/pages/Cost/ClusterOverview/OverviewSearchPanel.tsx

@@ -1,32 +1,28 @@
-import {QueryWindow, useQueryWindowOptions} from '../../../models';
+import { QueryWindow, useQueryWindowOptions } from '../../../models';
 import CommonStyle from '../../../styles/common.module.less';
 import classnames from 'classnames';
-import {Card} from 'components/common/Card';
-import {useSelector} from 'hooks';
-import {insightAction} from 'modules/insightSlice';
+import { Card } from 'components/common/Card';
+import { useSelector } from 'hooks';
+import { insightAction } from 'modules/insightSlice';
 import React from 'react';
-import {useTranslation} from 'react-i18next';
-import {useDispatch} from 'react-redux';
-import {DatePicker, DateValue, InputNumber, Radio, RadioValue} from 'tdesign-react';
-import {rangeMap} from 'utils/rangeMap';
-
-const ALL_NAMESPACE_VALUE = "ALL";
+import { useTranslation } from 'react-i18next';
+import { useDispatch } from 'react-redux';
+import { DatePicker, DateValue, InputNumber, Radio, RadioValue } from 'tdesign-react';
+import { rangeMap } from 'utils/rangeMap';
 
 export const OverviewSearchPanel = React.memo(() => {
   const dispatch = useDispatch();
-  const {t} = useTranslation();
+  const { t } = useTranslation();
 
   const customRange = useSelector((state) => state.insight.customRange);
   const window = useSelector((state) => state.insight.window);
-  const clusterId = useSelector((state) => state.insight.selectedClusterId);
   const discount = useSelector((state) => state.insight.discount);
 
   const queryWindowOptions = useQueryWindowOptions();
 
-
   return (
     <div className={classnames(CommonStyle.pageWithPadding, CommonStyle.pageWithColor)}>
-      <Card style={{display: 'flex', flexDirection: 'row', flexWrap: 'wrap'}}>
+      <Card style={{ display: 'flex', flexDirection: 'row', flexWrap: 'wrap' }}>
         <div
           style={{
             display: 'flex',
@@ -37,15 +33,15 @@ export const OverviewSearchPanel = React.memo(() => {
             marginBottom: 5,
           }}
         >
-          <div style={{marginRight: '0.5rem', width: '70px'}}>{t('时间范围')}</div>
-          <div style={{marginRight: '0.5rem'}}>
+          <div style={{ marginRight: '0.5rem', width: '70px' }}>{t('时间范围')}</div>
+          <div style={{ marginRight: '0.5rem' }}>
             <Radio.Group
               value={window}
               onChange={(value: RadioValue) => {
                 dispatch(insightAction.window(value as QueryWindow));
                 const [start, end] = rangeMap[value as QueryWindow];
                 dispatch(
-                  insightAction.customRange({start: start.toDate().toISOString(), end: end.toDate().toISOString()}),
+                  insightAction.customRange({ start: start.toDate().toISOString(), end: end.toDate().toISOString() }),
                 );
               }}
             >
@@ -58,7 +54,7 @@ export const OverviewSearchPanel = React.memo(() => {
           </div>
           <DatePicker
             mode='date'
-            style={{marginRight: '0.5rem'}}
+            style={{ marginRight: '0.5rem' }}
             value={customRange?.start}
             onChange={(start: DateValue) => {
               dispatch(insightAction.window(null as any));
@@ -72,7 +68,7 @@ export const OverviewSearchPanel = React.memo(() => {
           />
           <DatePicker
             mode='date'
-            style={{marginRight: '0.5rem'}}
+            style={{ marginRight: '0.5rem' }}
             value={customRange?.end ?? null}
             onChange={(end: any) => {
               dispatch(insightAction.window(null as any));
@@ -95,7 +91,7 @@ export const OverviewSearchPanel = React.memo(() => {
             marginBottom: 5,
           }}
         >
-          <div style={{marginRight: '1rem', width: '70px'}}>{t('Discount')}</div>
+          <div style={{ marginRight: '1rem', width: '70px' }}>{t('Discount')}</div>
           <InputNumber
             min={0}
             theme='column'

pkg/web/src/pages/Cost/ClusterOverview/PanelWrapper.tsx

@@ -1,30 +1,30 @@
-import {Card} from 'components/common/Card';
-import {useCraneUrl, useGrafanaQueryStr, useIsNeedSelectNamespace, useIsValidPanel, useSelector} from 'hooks';
+import { Card } from 'components/common/Card';
+import { useCraneUrl, useGrafanaQueryStr, useIsNeedSelectNamespace, useIsValidPanel, useSelector } from 'hooks';
 import React from 'react';
-import {Col} from 'tdesign-react';
+import { Col } from 'tdesign-react';
 
 export interface PanelWrapperProps {
   panel: any;
   selectedDashboard: any;
 }
 
-export const PanelWrapper = React.memo(({panel, selectedDashboard}: PanelWrapperProps) => {
+export const PanelWrapper = React.memo(({ panel, selectedDashboard }: PanelWrapperProps) => {
   const baselineHeight = useSelector((state) => state.config.chartBaselineHeight);
   const defaultHeight = useSelector((state) => state.config.chartDefaultHeight);
   const selectedNamespace = useSelector((state) => state.insight.selectedNamespace);
 
   // if it is using current cluster, use crane url from env
   const craneUrl = useCraneUrl();
-  const isValidPanel = useIsValidPanel({panel});
-  const isNeedSelectNamespace = useIsNeedSelectNamespace({selectedDashboard});
-  const queryStr = useGrafanaQueryStr({panelId: panel.id, selectedDashboard});
-  
+  const isValidPanel = useIsValidPanel({ panel });
+  const isNeedSelectNamespace = useIsNeedSelectNamespace({ selectedDashboard });
+  const queryStr = useGrafanaQueryStr({ panelId: panel.id, selectedDashboard });
+
   const span = panel?.gridPos?.w > 0 && panel?.gridPos?.w <= 24 ? Math.floor(panel.gridPos.w / 2) : 6;
   const minHeight = panel?.gridPos?.h ? Math.max(panel.gridPos.h * baselineHeight, defaultHeight) : defaultHeight;
 
   return (isNeedSelectNamespace && !selectedNamespace) || !isValidPanel ? null : (
     <Col key={panel.id} span={span}>
-      <Card style={{marginBottom: '0.5rem', marginTop: '0.5rem', height: minHeight}}>
+      <Card style={{ marginBottom: '0.5rem', marginTop: '0.5rem', height: minHeight }}>
         <iframe
           frameBorder='0'
           height='100%'

pkg/web/src/pages/Cost/CostsByDimension/CostsByDimensionPanel.tsx

@@ -1,9 +1,9 @@
 import { CostsByDimensionSearchPanel } from './CostsByDimensionSearchPanel';
 import { PanelWrapper } from './PanelWrapper';
-import {useCraneUrl, useSelector} from 'hooks';
+import { useCraneUrl } from 'hooks';
 import React, { memo } from 'react';
 import { useTranslation } from 'react-i18next';
-import {useFetchDashboardDetailQuery, useFetchDashboardListQuery} from 'services/grafanaApi';
+import { useFetchDashboardDetailQuery, useFetchDashboardListQuery } from 'services/grafanaApi';
 import { Row } from 'tdesign-react';
 
 export default memo(() => {