Merge pull request #160 from swaroopar/feature/knip

add knip check

Author: swaroopar

.github/workflows/xpanse.yml

@@ -17,11 +17,15 @@ jobs:
         steps:
             - name: Checkout
               uses: actions/checkout@v3
-            - name: Install EsLint
+            - name: Install all required NPM packages
               working-directory: ./
-              run: npm install [email protected]
+              run: npm install
             - name: Run EsLint
               working-directory: ./
               run: npx eslint . --ext .js,.jsx,.ts,.tsx --config package.json --max-warnings=0
+            - name: Run knip
+              working-directory: ./
+              run: npx knip
             - name: Run unit tests
+              working-directory: ./
               run: npm run test

package-lock.json

@@ -8,13 +8,14 @@
         "@axa-fr/react-oidc": "^6.24.1",
         "@tanstack/react-query": "^4.29.25",
         "antd": "^5.7.0",
+        "echarts": "5.4.3",
         "echarts-for-react": "^3.0.2",
-        "moment": "^2.29.4",
+        "rc-menu": "~9.10.0",
+        "rc-tabs": "12.9.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-router-dom": "^6.14.1",
         "react-timer-hook": "^3.0.7",
-        "web-vitals": "^2.1.4",
         "yaml": "^2.2.2"
     },
     "scripts": {
@@ -37,20 +38,25 @@
         ],
         "plugins": [
             "react",
-            "@typescript-eslint"
+            "@typescript-eslint",
+            "@tanstack/query",
+            "require-explicit-generics"
         ],
         "rules": {
             "react/jsx-uses-react": "error",
             "react/jsx-uses-vars": "error",
             "no-undef": "off",
-            "@typescript-eslint/no-inferrable-types": "off"
+            "@typescript-eslint/no-inferrable-types": "off",
+            "@tanstack/query/exhaustive-deps": "error",
+            "@tanstack/query/prefer-query-object-syntax": "error"
         },
         "ignorePatterns": [
             "src/xpanse-api/**",
             "/public/OidcServiceWorker.js",
             "/public/inject.js",
             "build",
-            "node_modules"
+            "node_modules",
+            "/public/OidcTrustedDomains.js"
         ],
         "root": true,
         "parser": "@typescript-eslint/parser",
@@ -75,7 +81,6 @@
         "@tanstack/eslint-plugin-query": "^4.29.25",
         "@testing-library/jest-dom": "^5.16.5",
         "@testing-library/react": "^13.4.0",
-        "@testing-library/user-event": "^13.5.0",
         "@types/jest": "^27.5.2",
         "@types/node": "^16.18.12",
         "@types/react": "^18.2.0",
@@ -84,14 +89,15 @@
         "@typescript-eslint/parser": "^5.59.2",
         "env-cmd": "^10.1.0",
         "eslint": "^8.45.0",
-        "eslint-config-prettier": "^8.8.0",
+        "eslint-config-prettier": "^9.0.0",
+        "eslint-config-react-app": "7.0.1",
         "eslint-plugin-prettier": "^5.0.0",
         "eslint-plugin-react": "^7.32.2",
         "eslint-plugin-require-explicit-generics": "^0.4.2",
-        "fork-ts-checker-webpack-plugin": "^6.5.3",
         "jest": "^29.6.1",
         "jest-environment-jsdom": "^29.6.1",
         "openapi-typescript-codegen": "^0.25.0",
+        "knip": "^2.19.3",
         "prettier": "3.0.0",
         "react-scripts": "5.0.1",
         "ts-jest": "^29.1.1",
@@ -101,5 +107,20 @@
         "react-scripts": {
             "typescript": "^5"
         }
+    },
+    "knip": {
+        "ignore": [
+            "src/xpanse-api/**",
+            "public/OidcServiceWorker.js",
+            "public/inject.js",
+            "src/config/index.d.ts",
+            "src/react-app-env.d.ts",
+            "public/OidcTrustedDomains.js"
+        ],
+        "ignoreDependencies": [
+            "eslint-config-prettier",
+            "@babel/plugin-proposal-private-property-in-object",
+            "openapi-typescript-codegen"
+        ]
     }
 }

package.json

@@ -1,20 +1,4 @@
-import { Region, UserAvailableServiceVo } from '../../../../xpanse-api/generated';
-
-export interface CategoryOclParam {
-    name: string;
-    versions: VersionOclParam[];
-}
-
-export interface VersionOclParam {
-    version: string;
-    cloudProvider: ProviderOclParam[];
-}
-
-export interface ProviderOclParam {
-    name: UserAvailableServiceVo.csp;
-    regions: Region[];
-    details: UserAvailableServiceVo[];
-}
+import { UserAvailableServiceVo } from '../../../../xpanse-api/generated';
 
 export const getServiceMapper = (
     userAvailableServiceList: UserAvailableServiceVo[]

src/components/content/catalog/services/catalogProps.ts

@@ -4,7 +4,7 @@
  */
 
 import { Select } from 'antd';
-import { useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { chartsPerRowCountList, chartsPerRowWithTwo } from './metricProps';
 
 export const MetricChartsPerRow = ({
@@ -15,7 +15,7 @@ export const MetricChartsPerRow = ({
     isLoading: boolean;
     optionLength: number;
     getMetricChartsPerRow: (currentMetricChartsPerRow: string) => void;
-}): JSX.Element => {
+}): React.JSX.Element => {
     const [chartsPerRow, setChartsPerRow] = useState<string>(chartsPerRowWithTwo);
     const [chartsPerRowOptions, setChartsPerRowOptions] = useState<{ value: string; label: string }[]>([]);
     const handleChangeChartsPerRow = (value: string) => {

src/components/content/monitor/MetricChartsPerRow.tsx

@@ -3,7 +3,6 @@
  * SPDX-FileCopyrightText: Huawei Inc.
  */
 
-import 'echarts/lib/chart/bar';
 import '../../../styles/monitor.css';
 import { MonitorOutlined } from '@ant-design/icons';
 import { Button, Col, Empty, Form, Input, Row, Select } from 'antd';

src/components/content/monitor/Monitor.tsx

@@ -21,15 +21,14 @@ import {
 import React, { useEffect, useRef, useState } from 'react';
 import { MonitorMetricsType } from './MonitorMetricsType';
 import { ApiError, Metric, MonitorService, Response } from '../../../xpanse-api/generated';
-import * as echarts from 'echarts/core';
 import {
     fetchMonitorMetricDataTimeInterval,
     fetchOnlyLastKnownMonitorMetricDataTimeInterval,
     monitorMetricQueueSize,
 } from '../../utils/constants';
-import moment from 'moment';
 import { MetricOptionDataByChartsPerRow } from './MetricOptionDataByChartsPerRow';
 import { useQuery } from '@tanstack/react-query';
+import { EChartsCoreOption } from 'echarts';
 
 export const MonitorChart = ({
     serviceId,
@@ -54,7 +53,7 @@ export const MonitorChart = ({
     ) => void;
     getIsLoading: (isLoading: boolean) => void;
     getOptionLength: (optionLength: number) => void;
-}): JSX.Element => {
+}): React.JSX.Element => {
     const [activeMonitorMetricType, setActiveMonitorMetricType] = useState<string>(
         Metric.monitorResourceType.CPU.valueOf()
     );
@@ -68,7 +67,7 @@ export const MonitorChart = ({
     const [monitorMetricsQueue, setMonitorMetricsQueue] = useState<MetricQueueParams[]>([]);
 
     const [chartsTitle, setChartsTitle] = useState<{ Id: string; metricTitle: string; metricSubTitle: string }[]>([]);
-    const [options, setOptions] = useState<echarts.EChartsCoreOption[]>([]);
+    const [options, setOptions] = useState<EChartsCoreOption[]>([]);
 
     const tipMessageInfo = useRef<string>('');
     const tipDescriptionInfo = useRef<string[]>([]);
@@ -96,7 +95,9 @@ export const MonitorChart = ({
     const onlyLastKnownMetricQueryFn = () =>
         MonitorService.getMetrics(serviceId, undefined, undefined, undefined, undefined, undefined, true);
 
-    const onlyLastKnownMetricQuery = useQuery(onlyLastKnownMetricQueryKey, onlyLastKnownMetricQueryFn, {
+    const onlyLastKnownMetricQuery = useQuery({
+        queryKey: onlyLastKnownMetricQueryKey,
+        queryFn: onlyLastKnownMetricQueryFn,
         refetchInterval: isRefreshOnlyLastKnownMetric ? fetchOnlyLastKnownMonitorMetricDataTimeInterval : false,
         refetchIntervalInBackground: isRefreshOnlyLastKnownMetric,
         refetchOnWindowFocus: false,
@@ -117,7 +118,9 @@ export const MonitorChart = ({
             false
         );
 
-    const monitorMetricQuery = useQuery(monitorMetricQueryKey, monitorMetricQueryFn, {
+    const monitorMetricQuery = useQuery({
+        queryKey: monitorMetricQueryKey,
+        queryFn: monitorMetricQueryFn,
         refetchInterval: isRefreshMonitorMetric ? fetchMonitorMetricDataTimeInterval : false,
         refetchIntervalInBackground: isRefreshMonitorMetric,
         refetchOnWindowFocus: false,
@@ -294,7 +297,7 @@ export const MonitorChart = ({
 
         const currentMetricProps: Map<string, MetricProps[]> = getCurrentMetricProps(metricProps);
         const currentChartsTitle: { Id: string; metricTitle: string; metricSubTitle: string }[] = [];
-        const currentOptions: echarts.EChartsCoreOption[] = [];
+        const currentOptions: EChartsCoreOption[] = [];
 
         currentMetricProps.forEach((metricProps, vmId) => {
             currentChartsTitle.push({
@@ -308,7 +311,7 @@ export const MonitorChart = ({
                     ),
                 metricSubTitle: metricProps[0].vmName,
             });
-            const option: echarts.EChartsCoreOption = {
+            const option: EChartsCoreOption = {
                 tooltip: {
                     trigger: 'axis',
                     position: function (pt: number[]) {
@@ -320,11 +323,6 @@ export const MonitorChart = ({
                             show: true,
                         },
                     },
-                    valueFormatter: function (params: number) {
-                        return `${params} ${
-                            metricProps[0].unit === Metric.unit.PERCENTAGE ? '%' : metricProps[0].unit.valueOf()
-                        }`;
-                    },
                 },
                 xAxis: {
                     type: 'time',
@@ -333,11 +331,6 @@ export const MonitorChart = ({
                         show: true,
                         fontSize: 10,
                         rotate: 40,
-                        formatter: function (value: Date) {
-                            const date = moment(value).format('YYYY-MM-DD');
-                            const time = moment(value).format('HH:mm:ss');
-                            return date + '\n' + time;
-                        },
                     },
                     axisTick: {
                         show: true,

src/components/content/monitor/MonitorChart.tsx

@@ -18,7 +18,7 @@ export interface MetricProps {
     timeStamp: number;
 }
 
-export interface MetricRequestParams {
+interface MetricRequestParams {
     from: number;
 
     to: number;
@@ -33,12 +33,12 @@ export interface MetricQueueParams {
 export const chartsPerRowCountList: string[] = ['2', '3', '4', '6', '8', '12'];
 export const chartsPerRowWithTwo: string = '2';
 export const lastMinuteRadioButtonKeyId: number = 1;
-export const lastHourRadioButtonKeyId: number = 2;
-export const threeHoursRadioButtonKeyId: number = 3;
-export const twelveHoursRadioButtonKeyId: number = 4;
-export const twentyFourHoursRadioButtonKeyId: number = 5;
-export const sevenDaysRadioButtonKeyId: number = 6;
-export const thirtyDaysRadioButtonKeyId: number = 7;
+const lastHourRadioButtonKeyId: number = 2;
+const threeHoursRadioButtonKeyId: number = 3;
+const twelveHoursRadioButtonKeyId: number = 4;
+const twentyFourHoursRadioButtonKeyId: number = 5;
+const sevenDaysRadioButtonKeyId: number = 6;
+const thirtyDaysRadioButtonKeyId: number = 7;
 
 export const timePeriodList: string[] = [
     'Last minute',

src/components/content/monitor/metricProps.ts

@@ -113,7 +113,7 @@ function CreateService(): React.JSX.Element {
     const [loadingError, setLoadingError] = useState<JSX.Element | undefined>(undefined);
 
     const availableServicesQuery = useQuery({
-        queryKey: ['listAvailableServices', categoryName, serviceName],
+        queryKey: ['listAvailableServices', categoryName, serviceName, selectCsp],
         queryFn: () =>
             ServiceCatalogService.listAvailableServices(
                 categoryName as UserAvailableServiceVo.category,

src/components/content/order/create/CreateService.tsx

@@ -206,7 +206,7 @@ function OrderSubmit(props: OrderSubmitProps): JSX.Element {
     );
 }
 
-export function OrderSubmitPage(): JSX.Element {
+function OrderSubmitPage(): JSX.Element {
     // eslint-disable-next-line @typescript-eslint/no-unsafe-argument,@typescript-eslint/no-unsafe-member-access
     return OrderSubmit(useLocation().state.props);
 }

src/components/content/order/create/OrderSubmit.tsx

@@ -4,7 +4,6 @@
  */
 
 import { ChangeEvent } from 'react';
-import { CheckboxChangeEvent } from 'antd/lib/checkbox';
 import {
     Billing,
     CreateRequest,
@@ -18,13 +17,8 @@ import { OrderSubmitProps } from '../create/OrderSubmit';
 
 export type TextInputEventHandler = (event: ChangeEvent<HTMLInputElement>) => void;
 export type NumberInputEventHandler = (value: number | string | null) => void;
-export type CheckBoxOnChangeHandler = (e: CheckboxChangeEvent) => void;
 export type SwitchOnChangeHandler = (checked: boolean) => void;
-export type ParamOnChangeHandler =
-    | TextInputEventHandler
-    | NumberInputEventHandler
-    | CheckBoxOnChangeHandler
-    | SwitchOnChangeHandler;
+export type ParamOnChangeHandler = TextInputEventHandler | NumberInputEventHandler | SwitchOnChangeHandler;
 
 export interface DeployParam {
     name: string;

src/components/content/order/formElements/CheckBox.tsx

@@ -5,7 +5,6 @@ import AWSLogo from '../../../../img/Aws_Logo.png';
 import OpenStackLogo from '../../../../img/OpenStack_Logo.png';
 import GoogleLogo from '../../../../img/Google_Logo.png';
 import FlexibleEngineLogo from '../../../../img/FlexibleEngine_Logo.png';
-import XpanseLogo from '../../../../img/Eclipse_Xpanse_Logo.png';
 import ScsLogo from '../../../../img/scs.png';
 
 export { HuaWeiLogo };
@@ -15,5 +14,4 @@ export { AWSLogo };
 export { OpenStackLogo };
 export { GoogleLogo };
 export { FlexibleEngineLogo };
-export { XpanseLogo };
 export { ScsLogo };