Merge pull request #3 from xingqiwu55555/main

Frontend code refactoring

frontend/jest.config.js

@@ -10,12 +10,12 @@ module.exports = {
 	coverageDirectory: "coverage",
 	collectCoverageFrom: [
 		"./src/**/*.ts",
-		"!./src/shared/__types__/*",
-		"!./src/shared/clients/*",
+		"!./src/models/*",
+		"!./src/clients/*",
 		"!**/*.d.ts",
-		"!./src/shared/constants/*",
-		"!./src/shared/hooks/*",
-		"!./src/App/globalStyle.ts",
+		"!./src/constants/*",
+		"!./src/hooks/*",
+		"!./src/globalStyle.ts",
 	],
 	coverageReporters: ["html", "text", "cobertura"],
 	coverageThreshold: {

frontend/package.json

@@ -13,7 +13,7 @@
 		"test": "cross-env NODE_ENV=test jest --passWithNoTests",
 		"lint": "tsc && eslint --fix '**/*.{js,jsx,ts,tsx}'",
 		"lint:style": "stylelint --fix '**/*.{css,less}'",
-		"icons": "npx @svgr/cli --out-dir=./src/shared/assets/icons --typescript src/shared/assets/source/*.svg"
+		"icons": "npx @svgr/cli --out-dir=./src/assets/icons --typescript src/assets/source/*.svg"
 	},
 	"husky": {
 		"hooks": {

frontend/scripts/constants.js

@@ -1,10 +1,10 @@
 const path = require("path");
 
-const ENTRY_PATH = path.resolve(__dirname, "../src/App/App.tsx");
+const ENTRY_PATH = path.resolve(__dirname, "../src/App.tsx");
 const OUTPUT_PATH = path.resolve(__dirname, "../dist");
 
 const PUBLIC_HTML_PATH = path.resolve(__dirname, "../public/index.html");
-const FAVICON_PATH = path.resolve(__dirname, "../src/shared/assets/source/favicon.svg");
+const FAVICON_PATH = path.resolve(__dirname, "../src/assets/source/favicon.svg");
 
 const isDev = process.env.NODE_ENV === "dev";
 const isTest = process.env.NODE_ENV === "test";

frontend/src/App/App.tsx → frontend/src/App.tsx

@@ -1,13 +1,13 @@
 import React, { FC, useEffect } from "react";
 import ReactDom from "react-dom";
-import { Routes } from "../Routes";
+import { Routes } from "./routes/Routes";
 import { BrowserRouter as Router } from "react-router-dom";
-import Header from "../shared/components/Header";
-import { useRequest } from "../shared/hooks/useRequest";
+import Header from "./components/Header";
+import { useRequest } from "./hooks/useRequest";
 import { Global } from "@emotion/react";
-import { getProjectsUsingGet } from "../shared/clients/projectApis";
-import { setResponsive } from "../shared/utils/responsive/responsive";
-import "../shared/assets/fonts/fonts.less";
+import { getProjectsUsingGet } from "./clients/projectApis";
+import { setResponsive } from "./utils/responsive/responsive";
+import "./assets/fonts/fonts.less";
 import { globalStyles } from "./globalStyle";
 
 setResponsive();

frontend/src/shared/clients/metricsApis.ts → frontend/src/clients/metricsApis.ts

@@ -1,17 +1,10 @@
 import { createRequest } from "./createRequest";
-import { MetricsLevel } from "../__types__/enum";
+import { MetricsInfo, MetricsUnit } from "../models/metrics";
 
-export const getFourKeyMetricsUsingPost = createRequest<
-	{
-		metricsQuery: MetricsQueryRequest;
-	},
-	FourKeyMetrics
->(({ metricsQuery }) => ({
-	method: "POST",
-	url: `/api/pipeline/metrics`,
-	data: metricsQuery,
-	headers: { "Content-Type": "application/json" },
-}));
+interface PipelineStageRequest {
+	pipelineId: string;
+	stage: string;
+}
 
 export interface MetricsQueryRequest {
 	pipelineStages: PipelineStageRequest[];
@@ -20,36 +13,22 @@ export interface MetricsQueryRequest {
 	endTime: number;
 }
 
-export interface PipelineStageRequest {
-	pipelineId: string;
-	stage: string;
-}
-
-export enum MetricsUnit {
-	FORTNIGHTLY = "Fortnightly",
-	MONTHLY = "Monthly",
-}
-
 export interface FourKeyMetrics {
 	changeFailureRate: MetricsInfo;
 	deploymentFrequency: MetricsInfo;
 	leadTimeForChange: MetricsInfo;
 	meanTimeToRestore: MetricsInfo;
 }
 
-export interface MetricsInfo {
-	details: Metrics[];
-	summary: MetricsSummary;
-}
+export const getFourKeyMetricsUsingPost = createRequest<
+	{
+		metricsQuery: MetricsQueryRequest;
+	},
+	FourKeyMetrics
+	>(({ metricsQuery }) => ({
+	method: "POST",
+	url: `/api/pipeline/metrics`,
+	data: metricsQuery,
+	headers: { "Content-Type": "application/json" },
+}));
 
-export interface Metrics {
-	value: number | "NaN" | undefined;
-	endTimestamp: number;
-	startTimestamp: number;
-}
-export interface MetricsSummary extends Metrics {
-	level: MetricsLevel;
-}
-export interface ValidMetric extends Metrics {
-	value: number;
-}

frontend/src/shared/clients/pipelineApis.ts → frontend/src/clients/pipelineApis.ts

@@ -1,4 +1,5 @@
 import { createRequest } from "./createRequest";
+import { PipelineTool } from "../models/pipeline";
 
 export const createPipelineUsingPost = createRequest<{
 	projectId: string;
@@ -75,8 +76,3 @@ export type Pipeline = JenkinsPipeline | BambooPipeline;
 export type PipelineVerification =
 	| Omit<JenkinsPipeline, "id" | "name">
 	| Omit<BambooPipeline, "id" | "name">;
-
-export enum PipelineTool {
-	BAMBOO = "BAMBOO",
-	JENKINS = "JENKINS",
-}

frontend/src/shared/components/LineChart.tsx → frontend/src/components/LineChart.tsx

@@ -13,7 +13,7 @@ import { css } from "@emotion/react";
 import { find, throttle } from "lodash";
 import { AxisDomain } from "recharts/types/util/types";
 import { durationFormatter } from "../utils/timeFormats/timeFormats";
-import { Metrics } from "../clients/metricsApis";
+import { Metrics } from "../models/metrics";
 
 export interface CustomizeTickProps {
 	x?: number;

frontend/src/shared/components/PipelineSetup/PipelineSetup.tsx → frontend/src/components/PipelineSetup/PipelineSetup.tsx

@@ -2,14 +2,14 @@ import {
 	BambooPipeline,
 	JenkinsPipeline,
 	Pipeline,
-	PipelineTool,
 	verifyPipelineUsingPost,
 } from "../../clients/pipelineApis";
 import React, { FC, useState } from "react";
 import { Alert, Button, Col, Divider, Form, Input, Row, Select, Typography } from "antd";
 import { css } from "@emotion/react";
-import { VerifyStatus } from "../../__types__/base";
 import { PIPELINE_CONFIG, PIPELINE_TYPE_NOTE } from "../../utils/pipelineConfig/pipelineConfig";
+import { VerifyStatus } from "../../models/common";
+import { PipelineTool } from "../../models/pipeline";
 
 const { Option } = Select;
 const { Text } = Typography;

frontend/src/shared/constants/tooltips.ts → frontend/src/constants/tooltips.ts

@@ -1,4 +1,4 @@
-import { PipelineTool } from "../clients/pipelineApis";
+import { PipelineTool } from "../models/pipeline";
 
 export const TOOLTIP_MAPPING = {
 	[PipelineTool.JENKINS]: {

frontend/src/App/globalStyle.ts → frontend/src/globalStyle.ts

@@ -1,4 +1,4 @@
-import { BG_GRAY_DARK } from "../shared/constants/styles";
+import { BG_GRAY_DARK } from "./constants/styles";
 
 export const globalStyles = {
 	".metric-info-overlay div.ant-tooltip-inner": {

frontend/src/shared/hooks/usePipelineSetting.ts → frontend/src/hooks/usePipelineSetting.ts

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { PipelineSettingStatus } from "../../dashboard/components/PipelineSetting";
+import { PipelineSettingStatus } from "../pages/dashboard/components/PipelineSetting";
 import { useRequest } from "./useRequest";
 import { deletePipelineUsingDelete, Pipeline } from "../clients/pipelineApis";
 import { getProjectDetailsUsingGet, Project } from "../clients/projectApis";

frontend/src/shared/__types__/base.ts → frontend/src/models/common.ts

@@ -8,6 +8,4 @@ export enum ConfigStep {
 	CREATE_PROJECT,
 	CONFIG_PIPELINE,
 	CONFIG_SUCCESS,
-}
-
-export type MetricType = "df" | "lt" | "mttr" | "cfr";
+}

frontend/src/models/metrics.ts

@@ -0,0 +1,40 @@
+export enum MetricsType {
+	DEPLOYMENT_FREQUENCY = "Deployment Frequency",
+	LEAD_TIME_FOR_CHANGE = "Lead Time for Change",
+	MEAN_TIME_TO_RESTORE = "Mean Time To Restore",
+	CHANGE_FAILURE_RATE = "Change Failure Rate",
+}
+
+export enum MetricsLevel {
+	ELITE = "ELITE",
+	HIGH = "HIGH",
+	INVALID = "INVALID",
+	LOW = "LOW",
+	MEDIUM = "MEDIUM",
+}
+
+export enum MetricsUnit {
+	FORTNIGHTLY = "Fortnightly",
+	MONTHLY = "Monthly",
+}
+
+export type MetricType = "df" | "lt" | "mttr" | "cfr";
+
+export interface Metrics {
+	value: number | "NaN" | undefined;
+	endTimestamp: number;
+	startTimestamp: number;
+}
+
+export interface MetricsSummary extends Metrics {
+	level: MetricsLevel;
+}
+
+export interface ValidMetric extends Metrics {
+	value: number;
+}
+
+export interface MetricsInfo {
+	details: Metrics[];
+	summary: MetricsSummary;
+}

frontend/src/models/pipeline.ts

@@ -0,0 +1,4 @@
+export enum PipelineTool {
+	BAMBOO = "BAMBOO",
+	JENKINS = "JENKINS",
+}

frontend/src/config/PageConfig.tsx → frontend/src/pages/config/PageConfig.tsx

@@ -1,10 +1,10 @@
 import React, { useState } from "react";
 import { Layout, Steps, Typography } from "antd";
-import { ConfigStep } from "../shared/__types__/base";
 import ConfigSuccess from "./components/ConfigSuccess";
 import ProjectNameSetup from "./components/ProjectNameSetup";
-import PipelineSetup, { FormValues } from "../shared/components/PipelineSetup/PipelineSetup";
-import { BaseProject, createProjectUsingPost } from "../shared/clients/projectApis";
+import PipelineSetup, { FormValues } from "../../components/PipelineSetup/PipelineSetup";
+import { BaseProject, createProjectUsingPost } from "../../clients/projectApis";
+import { ConfigStep } from "../../models/common";
 
 const { Paragraph } = Typography;
 const { Step } = Steps;

frontend/src/config/components/ConfigSuccess.tsx → frontend/src/pages/config/components/ConfigSuccess.tsx

@@ -1,17 +1,17 @@
 import { Button, Modal, Result, Spin } from "antd";
 import React, { FC, useEffect } from "react";
 import { CheckCircleFilled } from "@ant-design/icons";
-import ProjectConfig from "../../shared/components/ProjectConfig";
+import ProjectConfig from "../../../components/ProjectConfig";
 import { PipelineSettingStatus } from "../../dashboard/components/PipelineSetting";
-import { useModalVisible } from "../../shared/hooks/useModalVisible";
-import { usePipelineSetting } from "../../shared/hooks/usePipelineSetting";
-import { GREEN_LIGHT } from "../../shared/constants/styles";
+import { useModalVisible } from "../../../hooks/useModalVisible";
+import { usePipelineSetting } from "../../../hooks/usePipelineSetting";
+import { GREEN_LIGHT } from "../../../constants/styles";
 import {
 	createPipelineUsingPost,
 	Pipeline,
 	updatePipelineUsingPut,
-} from "../../shared/clients/pipelineApis";
-import PipelineSetup, { FormValues } from "../../shared/components/PipelineSetup/PipelineSetup";
+} from "../../../clients/pipelineApis";
+import PipelineSetup, { FormValues } from "../../../components/PipelineSetup/PipelineSetup";
 
 const ConfigSuccess: FC<{ projectId: string }> = ({ projectId }) => {
 	const { visible, handleToggleVisible } = useModalVisible();

frontend/src/config/components/ProjectNameSetup.tsx → frontend/src/pages/config/components/ProjectNameSetup.tsx

@@ -1,7 +1,7 @@
 import React, { FC } from "react";
 import { Button, Col, Divider, Form, Input, Row, Typography } from "antd";
 import { css } from "@emotion/react";
-import { BaseProject } from "../../shared/clients/projectApis";
+import { BaseProject } from "../../../clients/projectApis";
 
 const { Text } = Typography;
 

frontend/src/dashboard/PageDashboard.tsx → frontend/src/pages/dashboard/PageDashboard.tsx

@@ -1,21 +1,16 @@
 import React, { useState } from "react";
 import { Col, Row } from "antd";
 import { css } from "@emotion/react";
-import { useQuery } from "../shared/hooks/useQuery";
-import { getDurationTimestamps } from "../shared/utils/timeFormats/timeFormats";
+import { useQuery } from "../../hooks/useQuery";
+import { getDurationTimestamps } from "../../utils/timeFormats/timeFormats";
 import { MetricsCard } from "./components/MetricsCard";
-import { DashboardTopPanel, FormValues } from "./components/DashboardTopPanel/DashboardTopPanel";
-import { BACKGROUND_COLOR } from "../shared/constants/styles";
+import { DashboardTopPanel, FormValues } from "./components/DashboardTopPanel";
+import { BACKGROUND_COLOR } from "../../constants/styles";
 import { MetricTooltip } from "./components/MetricTooltip";
-import { calcMaxValueWithRatio } from "../shared/utils/calcMaxValueWithRatio/calcMaxValueWithRatio";
-import { cleanMetricsInfo } from "../shared/utils/metricsDataUtils/metricsDataUtils";
-import {
-	FourKeyMetrics,
-	getFourKeyMetricsUsingPost,
-	MetricsInfo,
-	MetricsUnit,
-} from "../shared/clients/metricsApis";
-import { MetricsLevel } from "../shared/__types__/enum";
+import { calcMaxValueWithRatio } from "../../utils/calcMaxValueWithRatio/calcMaxValueWithRatio";
+import { cleanMetricsInfo } from "../../utils/metricsDataUtils/metricsDataUtils";
+import { FourKeyMetrics, getFourKeyMetricsUsingPost } from "../../clients/metricsApis";
+import { MetricsInfo, MetricsLevel, MetricsUnit } from "../../models/metrics";
 
 const metricsContainerStyles = css({
 	padding: "37px 35px",

frontend/src/dashboard/components/DashboardTopPanel/DashboardTopPanel.tsx → frontend/src/pages/dashboard/components/DashboardTopPanel.tsx

@@ -1,31 +1,32 @@
-import { EditableText } from "../../../shared/components/EditableText";
+import { EditableText } from "../../../components/EditableText";
 import { Button, Col, DatePicker, Form, Row, Select, Typography } from "antd";
 import { FullscreenOutlined, SyncOutlined } from "@ant-design/icons";
-import PipelineSetting from "../PipelineSetting";
+import PipelineSetting from "./PipelineSetting";
 import React, { FC, KeyboardEvent, useEffect, useState } from "react";
 import { css } from "@emotion/react";
-import { PRIMARY_COLOR, SECONDARY_COLOR } from "../../../shared/constants/styles";
-import { useRequest } from "../../../shared/hooks/useRequest";
+import { PRIMARY_COLOR, SECONDARY_COLOR } from "../../../constants/styles";
+import { useRequest } from "../../../hooks/useRequest";
 import moment from "moment";
-import { dateFormatYYYYMMDD } from "../../../shared/constants/date-format";
-import { MultipleCascadeSelect } from "../../../shared/components/MultipleCascadeSelect";
+import { dateFormatYYYYMMDD } from "../../../constants/date-format";
+import { MultipleCascadeSelect } from "../../../components/MultipleCascadeSelect";
 import { isEmpty, isEqual } from "lodash";
 import {
 	formatLastUpdateTime,
 	getDurationTimestamps,
-} from "../../../shared/utils/timeFormats/timeFormats";
-import { usePrevious } from "../../../shared/hooks/usePrevious";
-import HintIcon from "../../../shared/components/HintIcon";
-import { FourKeyMetrics, MetricsUnit } from "../../../shared/clients/metricsApis";
-import { getPipelineStagesUsingGet, PipelineStages } from "../../../shared/clients/pipelineApis";
+} from "../../../utils/timeFormats/timeFormats";
+import { usePrevious } from "../../../hooks/usePrevious";
+import HintIcon from "../../../components/HintIcon";
+import { FourKeyMetrics} from "../../../clients/metricsApis";
+import { getPipelineStagesUsingGet, PipelineStages } from "../../../clients/pipelineApis";
 import {
 	getLastSynchronizationUsingGet,
 	getProjectDetailsUsingGet,
 	updateBuildsUsingPost,
 	updateProjectNameUsingPut,
-} from "../../../shared/clients/projectApis";
-import FullscreenDashboard from "../../../fullscreen/components/FullscreenDashboard";
-import { mapMetricsList, mapPipelines } from "./dataProcess/fullScreenDataProcess";
+} from "../../../clients/projectApis";
+import FullscreenDashboard from "./Fullscreen/components/FullscreenDashboard";
+import { mapMetricsList, mapPipelines } from "../utils/fullScreenDataProcess";
+import { MetricsUnit } from "../../../models/metrics";
 
 const { Text } = Typography;
 const { RangePicker } = DatePicker;

frontend/src/fullscreen/Fullscreen.tsx → frontend/src/pages/dashboard/components/Fullscreen/Fullscreen.tsx

@@ -1,8 +1,7 @@
 import React, { useState, KeyboardEvent } from "react";
 import { FullscreenMetricsCardOptions } from "./components/FullscreenMetricsCard";
-import { MetricsLevel, MetricsType } from "../shared/__types__/enum";
 import FullscreenDashboard from "./components/FullscreenDashboard";
-import { Metrics } from "../shared/clients/metricsApis";
+import { Metrics, MetricsLevel, MetricsType } from "../../../../models/metrics";
 
 const FullScreen = () => {
 	const [isFullscreenVisible, setIsPopoverVisible] = useState(false);

frontend/src/fullscreen/components/FullscreenDashboard.tsx → frontend/src/pages/dashboard/components/Fullscreen/components/FullscreenDashboard.tsx

@@ -1,13 +1,13 @@
 import FullscreenMetricsCard, { FullscreenMetricsCardOptions } from "./FullscreenMetricsCard";
 import React from "react";
-import Word from "../../shared/components/Word/Word";
+import Word from "../../../../../components/Word/Word";
 import moment from "moment";
-import { dateFormatYYYYMMDD } from "../../shared/constants/date-format";
+import { dateFormatYYYYMMDD } from "../../../../../constants/date-format";
 import { SwapRightOutlined } from "@ant-design/icons";
 import PipelineList from "./PipelineList";
 import MetricsLegend from "./MetricsLegend";
-import { GRAY_1, GRAY_9 } from "../../shared/constants/styles";
-import Logo from "../../shared/components/Logo/Logo";
+import { GRAY_1, GRAY_9 } from "../../../../../constants/styles";
+import Logo from "../../../../../components/Logo/Logo";
 import { Modal } from "antd";
 
 interface FullscreenDashboardProps {