+
+
+
+
+
+
+ );
+};
+
+export default memo(LayoutPage);
diff --git a/ui/src/components/Layout/style.module.less b/ui/src/components/Layout/style.module.less
new file mode 100644
index 00000000..9f61abbd
--- /dev/null
+++ b/ui/src/components/Layout/style.module.less
@@ -0,0 +1,16 @@
+.top-container {
+ display: flex;
+ background: #fff;
+ padding: 0 20px;
+ .logo {
+ margin-right: 10px;
+ }
+}
+
+.container {
+ margin: 10px;
+ padding: 20px;
+ background: #fff;
+ min-height: calc(100vh - 84px);
+ overflow: auto;
+}
diff --git a/ui/src/components/Tabs/index.tsx b/ui/src/components/Tabs/index.tsx
index b1c1d515..95c60df7 100644
--- a/ui/src/components/Tabs/index.tsx
+++ b/ui/src/components/Tabs/index.tsx
@@ -1,22 +1,6 @@
-/*
- * Copyright The Karbour Authors.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import React from "react";
+import React, { memo } from "react";
import classNames from "classnames";
-import styles from "./style.module.scss";
+import styles from "./style.module.less";
type Props = {
current: string;
@@ -46,4 +30,4 @@ const KarbourTabs = ({ current, list, onChange }: Props) => {
);
};
-export default KarbourTabs;
+export default memo(KarbourTabs);
diff --git a/ui/src/components/Tabs/style.module.less b/ui/src/components/Tabs/style.module.less
new file mode 100644
index 00000000..00fdf9ec
--- /dev/null
+++ b/ui/src/components/Tabs/style.module.less
@@ -0,0 +1,14 @@
+.tab-container {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ .normal {
+ margin: 20px;
+ padding: 5px 0px;
+ cursor: pointer;
+ }
+ .active {
+ font-weight: bold;
+ border-bottom: 2px solid #a305e1;
+ }
+}
\ No newline at end of file
diff --git a/ui/src/components/Tabs/style.module.scss b/ui/src/components/Tabs/style.module.scss
deleted file mode 100644
index cb7ce7b7..00000000
--- a/ui/src/components/Tabs/style.module.scss
+++ /dev/null
@@ -1,28 +0,0 @@
-// Copyright The Karbour Authors.
-//
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-
-.tab-container {
- display: flex;
- justify-content: center;
- align-items: center;
- .normal {
- margin: 20px;
- padding: 5px 0px;
- cursor: pointer;
- }
- .active {
- font-weight: bold;
- border-bottom: 2px solid #a305e1;
- }
-}
\ No newline at end of file
diff --git a/ui/src/components/TopHeader/index.tsx b/ui/src/components/TopHeader/index.tsx
index 4a04c25d..72db5e09 100644
--- a/ui/src/components/TopHeader/index.tsx
+++ b/ui/src/components/TopHeader/index.tsx
@@ -1,32 +1,17 @@
-/*
- * Copyright The Karbour Authors.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
import {
SearchOutlined,
MacCommandOutlined,
ApartmentOutlined,
- HeatMapOutlined
+ HeatMapOutlined,
} from "@ant-design/icons";
-import { Layout, Menu} from "antd";
+import { Layout, Menu } from "antd";
+import { memo } from "react";
import { useNavigate, useLocation } from "react-router-dom";
-import styles from "./style.module.scss";
+import styles from "./style.module.less";
const { Header } = Layout;
-export default function TopHeader() {
+const TopHeader = () => {
const navigate = useNavigate();
const location = useLocation();
@@ -48,24 +33,29 @@ export default function TopHeader() {
},
];
- function handleCkick({ key }: {key: string}) {
+ function handleCkick({ key }: { key: string }) {
navigate(key);
}
- const selectedKeys = (!location.pathname || location.pathname === '/') ? '/search' : location.pathname;
+ const selectedKeys =
+ !location.pathname || location.pathname === "/"
+ ? "/search"
+ : location.pathname;
return (
-
+
-
+
);
-}
+};
+
+export default memo(TopHeader);
diff --git a/ui/src/components/TopHeader/style.module.less b/ui/src/components/TopHeader/style.module.less
new file mode 100644
index 00000000..98fce9ac
--- /dev/null
+++ b/ui/src/components/TopHeader/style.module.less
@@ -0,0 +1,8 @@
+.top-container {
+ display: flex;
+ background: #fff;
+ padding: 0 20px;
+ .logo {
+ margin-right: 10px;
+ }
+}
diff --git a/ui/src/components/TopHeader/style.module.scss b/ui/src/components/TopHeader/style.module.scss
deleted file mode 100644
index a7b82fa5..00000000
--- a/ui/src/components/TopHeader/style.module.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-// Copyright The Karbour Authors.
-//
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-
-.top-container {
- display: flex;
- background: #fff;
- padding: 0 20px;
- .logo {
- margin-right: 10px;
- }
-}
diff --git a/ui/src/components/insight/Issue/index.tsx b/ui/src/components/insight/Issue/index.tsx
index b18153cc..15a66902 100644
--- a/ui/src/components/insight/Issue/index.tsx
+++ b/ui/src/components/insight/Issue/index.tsx
@@ -1,27 +1,15 @@
-/*
- * Copyright The Karbour Authors.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
import { Table, Tag, Input, Button, Tooltip, Badge } from "antd";
import { useState } from "react";
-import styles from "./styles.module.scss";
+import styles from "./styles.module.less";
+
+const SOLUTION = "SOLUTION";
type IProps = {
data: any[];
handleSearch: (val: string) => void;
};
+type TYPE_LEVEL = "low" | "medium" | "high"
+type TYPE_LABEL = "CVE" | "CIS" | "KUBEAUDIT";
const EnhancerTable = (props: IProps) => {
const [searchValue, setSearchValue] = useState("");
@@ -37,17 +25,17 @@ const EnhancerTable = (props: IProps) => {
dataIndex: "severity",
key: "severity",
defaultSortOrder: "descend",
- sorter: (a: any, b: any) => a.severity.length - b.severity.length,
+ sorter: (a: any, b: any) => a.severity?.length - b.severity?.length,
render: (text: string) => {
const levelMap = {
low: "#3b5999",
medium: "#F4A460",
high: "#cd201f",
};
- let color = levelMap[text.toLowerCase() as "low" | "medium" | "high"];
+ let color = levelMap[text?.toLowerCase() as TYPE_LEVEL];
return (
- {text.toUpperCase()}
+ {text?.toUpperCase()}
);
},
@@ -57,7 +45,7 @@ const EnhancerTable = (props: IProps) => {
dataIndex: "labels",
key: "labels",
render: (text: string) => {
- const levelMap = {
+ const labelMap = {
CVE: "#2db7f5",
CIS: "#87d068",
KUBEAUDIT: "#108ee9",
@@ -65,16 +53,16 @@ const EnhancerTable = (props: IProps) => {
const list = text?.split(",");
return list?.map((item, index) => {
let color =
- levelMap[item.toUpperCase() as "CVE" | "CIS" | "KUBEAUDIT"];
- if (item.toUpperCase() === "SOLUTION") {
+ labelMap[item?.toUpperCase() as TYPE_LABEL];
+ if (item?.toUpperCase() === SOLUTION) {
return (
- {item.toUpperCase()}
+ {item?.toUpperCase()}
);
@@ -85,7 +73,7 @@ const EnhancerTable = (props: IProps) => {
key={`${item}_${index}`}
style={{ fontSize: 12 }}
>
- {item.toUpperCase()}
+ {item?.toUpperCase() || ''}
);
});
diff --git a/ui/src/components/insight/Issue/styles.module.less b/ui/src/components/insight/Issue/styles.module.less
new file mode 100644
index 00000000..8349e357
--- /dev/null
+++ b/ui/src/components/insight/Issue/styles.module.less
@@ -0,0 +1,29 @@
+.enhancer {
+ padding: 10px;
+ height: 400px;
+ .search {
+ display: flex;
+ align-items: center;
+ margin: 10px 0;
+ .stat {
+ display: flex;
+ align-items: center;
+ font-size: 16px;
+ margin-left: 20px;
+ .item {
+ margin: 0 5px;
+ .label {
+ margin-right: 10px;
+ display: inline-block;
+ }
+ .value {
+ font-weight: bold;
+ display: inline-block;
+ }
+ }
+ .item:nth-child(1) {
+ margin-left: 10px;
+ }
+ }
+ }
+}
diff --git a/ui/src/components/insight/Issue/styles.module.scss b/ui/src/components/insight/Issue/styles.module.scss
deleted file mode 100644
index fb753f23..00000000
--- a/ui/src/components/insight/Issue/styles.module.scss
+++ /dev/null
@@ -1,43 +0,0 @@
-// Copyright The Karbour Authors.
-//
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-
-.enhancer {
- padding: 10px;
- height: 400px;
- .search {
- display: flex;
- align-items: center;
- margin: 10px 0;
- .stat {
- display: flex;
- align-items: center;
- font-size: 16px;
- margin-left: 20px;
- .item {
- margin: 0 5px;
- .label {
- margin-right: 10px;
- display: inline-block;
- }
- .value {
- font-weight: bold;
- display: inline-block;
- }
- }
- .item:nth-child(1) {
- margin-left: 10px;
- }
- }
- }
-}
diff --git a/ui/src/components/insight/Overview/Card/index.tsx b/ui/src/components/insight/Overview/Card/index.tsx
index de60fc21..7e45a95f 100644
--- a/ui/src/components/insight/Overview/Card/index.tsx
+++ b/ui/src/components/insight/Overview/Card/index.tsx
@@ -1,28 +1,16 @@
-/*
- * Copyright The Karbour Authors.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import styles from "./styles.module.scss";
+import styles from "./styles.module.less";
type IProps = {
- data: any
-}
+ data: any;
+};
+
+const Card = ({ data }: IProps) => {
+ return (
+
+
{data?.desc}
+
{data?.title}
+
+ );
+};
-export default function Card({ data }: IProps) {
- return
-
{data?.desc}
-
{data?.title}
-
-}
+export default Card;
diff --git a/ui/src/components/insight/Overview/Card/styles.module.scss b/ui/src/components/insight/Overview/Card/styles.module.scss
index 702dadad..5becd2ec 100644
--- a/ui/src/components/insight/Overview/Card/styles.module.scss
+++ b/ui/src/components/insight/Overview/Card/styles.module.scss
@@ -1,17 +1,3 @@
-// Copyright The Karbour Authors.
-//
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-
.card {
display: flex;
// flex-direction: column;
diff --git a/ui/src/components/insight/Overview/index.tsx b/ui/src/components/insight/Overview/index.tsx
index 3f470c65..7e71363c 100644
--- a/ui/src/components/insight/Overview/index.tsx
+++ b/ui/src/components/insight/Overview/index.tsx
@@ -1,21 +1,5 @@
-/*
- * Copyright The Karbour Authors.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
import { Descriptions } from "antd";
-import styles from "./styles.module.scss";
+import styles from "./styles.module.less";
import { FileTextTwoTone } from "@ant-design/icons";
type IProps = {
@@ -29,7 +13,7 @@ type IProps = {
const Overview = ({ data, handleClick }: IProps) => {
return (
-
+
{/*
{data?.title}
*/}
diff --git a/ui/src/components/insight/Overview/styles.module.less b/ui/src/components/insight/Overview/styles.module.less
new file mode 100644
index 00000000..c725e231
--- /dev/null
+++ b/ui/src/components/insight/Overview/styles.module.less
@@ -0,0 +1,30 @@
+.overview {
+ padding: 20px;
+ height: 420px;
+ position: relative;
+
+ .yaml-btn {
+ position: absolute;
+ right: 20px;
+ bottom: 20px;
+ cursor: pointer;
+ img {
+ width: 20px;
+ height: 20px;
+ }
+ }
+ .title {
+ font-size: 18px;
+ font-weight: bold;
+ }
+ .content {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ margin: 20px 0;
+ }
+}
+
+.content {
+ font-size: 18px;
+}
diff --git a/ui/src/components/insight/Overview/styles.module.scss b/ui/src/components/insight/Overview/styles.module.scss
deleted file mode 100644
index b21e3ffe..00000000
--- a/ui/src/components/insight/Overview/styles.module.scss
+++ /dev/null
@@ -1,44 +0,0 @@
-// Copyright The Karbour Authors.
-//
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-
-.overview {
- padding: 20px;
- height: 420px;
- position: relative;
-
- .yaml-btn {
- position: absolute;
- right: 20px;
- bottom: 20px;
- cursor: pointer;
- img {
- width: 20px;
- height: 20px;
- }
- }
- .title {
- font-size: 18px;
- font-weight: bold;
- }
- .content {
- display: flex;
- flex-wrap: wrap;
- align-items: center;
- margin: 20px 0;
- }
-}
-
-.content {
- font-size: 18px;
-}
diff --git a/ui/src/components/insight/Relationship/index.tsx b/ui/src/components/insight/Relationship/index.tsx
index f215b422..636a4ded 100644
--- a/ui/src/components/insight/Relationship/index.tsx
+++ b/ui/src/components/insight/Relationship/index.tsx
@@ -1,27 +1,11 @@
-/*
- * Copyright The Karbour Authors.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
import { useEffect } from "react";
import { Space } from "antd";
-import kubernetes from "../../../assets/kubernetes.png";
import G6 from "@antv/g6";
+import kubernetes from "../../../assets/kubernetes.png";
-import styles from "./styles.module.scss";
+import styles from "./styles.module.less";
-export default function Relationship() {
+const Relationship = () => {
function draw() {
const data = {
nodes: [
@@ -272,4 +256,6 @@ export default function Relationship() {
);
-}
+};
+
+export default Relationship;
diff --git a/ui/src/components/insight/Relationship/styles.module.scss b/ui/src/components/insight/Relationship/styles.module.less
similarity index 54%
rename from ui/src/components/insight/Relationship/styles.module.scss
rename to ui/src/components/insight/Relationship/styles.module.less
index 76c485f2..8715640f 100644
--- a/ui/src/components/insight/Relationship/styles.module.scss
+++ b/ui/src/components/insight/Relationship/styles.module.less
@@ -1,17 +1,3 @@
-// Copyright The Karbour Authors.
-//
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-
.relationship {
position: relative;
.title {
diff --git a/ui/src/components/insight/Score/index.tsx b/ui/src/components/insight/Score/index.tsx
index 9acaa2e4..cca21cac 100644
--- a/ui/src/components/insight/Score/index.tsx
+++ b/ui/src/components/insight/Score/index.tsx
@@ -1,27 +1,10 @@
-/*
- * Copyright The Karbour Authors.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import type { FC } from "react";
import { useEffect } from "react";
import { Chart } from "@antv/g2";
-import styles from "./styles.module.scss";
+import styles from "./styles.module.less";
-const PiePercent: FC = () => {
+const PiePercent = () => {
const renderChart = () => {
const tempNode = document.getElementById("containerPie");
diff --git a/ui/src/components/insight/Score/styles.module.less b/ui/src/components/insight/Score/styles.module.less
new file mode 100644
index 00000000..d1c69a69
--- /dev/null
+++ b/ui/src/components/insight/Score/styles.module.less
@@ -0,0 +1,10 @@
+.score {
+ padding: 10px 0;
+ height: 400px;
+
+ .desc {
+ padding: 10px 20px;
+ color: #a8a8a8;
+ text-align: center;
+ }
+}
diff --git a/ui/src/components/insight/Score/styles.module.scss b/ui/src/components/insight/Score/styles.module.scss
deleted file mode 100644
index add3a86b..00000000
--- a/ui/src/components/insight/Score/styles.module.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-// Copyright The Karbour Authors.
-//
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-
-.score {
- padding: 10px 0;
- height: 400px;
-
- .desc {
- padding: 10px 20px;
- color: #a8a8a8;
- text-align: center;
- }
-}
diff --git a/ui/src/components/insight/Stat/Progress.tsx b/ui/src/components/insight/Stat/Progress.tsx
index 91fae598..619ec94c 100644
--- a/ui/src/components/insight/Stat/Progress.tsx
+++ b/ui/src/components/insight/Stat/Progress.tsx
@@ -1,23 +1,7 @@
-/*
- * Copyright The Karbour Authors.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { useEffect } from "react";
+import { useEffect, memo } from "react";
import { Chart } from "@antv/g2";
-export default function Progress() {
+const Progress = () => {
const renderChart = () => {
const tempNode = document.getElementById("statPie");
const child = tempNode?.lastElementChild;
@@ -99,7 +83,8 @@ export default function Progress() {
renderChart();
}, []);
return (
-
-
+
);
-}
+};
+
+export default memo(Progress);
diff --git a/ui/src/components/insight/Stat/index.tsx b/ui/src/components/insight/Stat/index.tsx
index 980a669e..b80b9c90 100644
--- a/ui/src/components/insight/Stat/index.tsx
+++ b/ui/src/components/insight/Stat/index.tsx
@@ -1,25 +1,11 @@
-/*
- * Copyright The Karbour Authors.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import type { FC } from "react";
+import { memo } from "react";
import Progress from "./Progress";
import { InfoCircleOutlined } from "@ant-design/icons";
-import styles from "./styles.module.scss";
+import styles from "./styles.module.less";
+
+type Iprops = {};
-const Stat: FC = () => {
+const Stat = ({}: Iprops) => {
return (
@@ -49,4 +35,4 @@ const Stat: FC = () => {
);
};
-export default Stat;
+export default memo(Stat);
diff --git a/ui/src/components/insight/Stat/styles.module.less b/ui/src/components/insight/Stat/styles.module.less
new file mode 100644
index 00000000..7a8f9677
--- /dev/null
+++ b/ui/src/components/insight/Stat/styles.module.less
@@ -0,0 +1,36 @@
+.stat {
+ padding: 10px 0;
+ height: 400px;
+ display: flex;
+ justify-content: space-around;
+ align-items: center;
+
+ .item {
+ padding: 10px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+
+ .top,
+ .bottom {
+ font-size: 18px;
+ margin-bottom: 20px;
+ font-weight: bold;
+ }
+
+ .top {
+ position: relative;
+
+ .top-icon {
+ position: absolute;
+ right: -16px;
+ top: -8px;
+ }
+ }
+
+ .bottom {
+ font-size: 36px;
+ }}
+
+}
\ No newline at end of file
diff --git a/ui/src/components/insight/Stat/styles.module.scss b/ui/src/components/insight/Stat/styles.module.scss
deleted file mode 100644
index d9c82a1b..00000000
--- a/ui/src/components/insight/Stat/styles.module.scss
+++ /dev/null
@@ -1,50 +0,0 @@
-// Copyright The Karbour Authors.
-//
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-
-.stat {
- padding: 10px 0;
- height: 400px;
- display: flex;
- justify-content: space-around;
- align-items: center;
-
- .item {
- padding: 10px;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
-
- .top,
- .bottom {
- font-size: 18px;
- margin-bottom: 20px;
- font-weight: bold;
- }
-
- .top {
- position: relative;
-
- .top-icon {
- position: absolute;
- right: -16px;
- top: -8px;
- }
- }
-
- .bottom {
- font-size: 36px;
- }}
-
-}
\ No newline at end of file
diff --git a/ui/src/components/insight/YamlDrawer/index.tsx b/ui/src/components/insight/YamlDrawer/index.tsx
index a90ca342..382c1a29 100644
--- a/ui/src/components/insight/YamlDrawer/index.tsx
+++ b/ui/src/components/insight/YamlDrawer/index.tsx
@@ -1,40 +1,32 @@
-/*
- * Copyright The Karbour Authors.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
import { Drawer } from "antd";
import { default as AnsiUp } from "ansi_up";
-import styles from "./styles.module.scss";
+import styles from "./styles.module.less";
type IProps = {
open: boolean;
onClose: () => void;
data: string;
-}
+};
-export default function YamlDrawer({ open, onClose, data }: IProps) {
+const YamlDrawer = ({ open, onClose, data }: IProps) => {
const ansi_up = new AnsiUp();
- const info = ansi_up.ansi_to_html(
- data?.trim()
- )
- return
-
-
-}
+ const info = ansi_up.ansi_to_html(data?.trim());
+ return (
+
+
+
+ );
+};
+
+export default YamlDrawer;
diff --git a/ui/src/components/insight/YamlDrawer/styles.module.less b/ui/src/components/insight/YamlDrawer/styles.module.less
new file mode 100644
index 00000000..ba050072
--- /dev/null
+++ b/ui/src/components/insight/YamlDrawer/styles.module.less
@@ -0,0 +1,9 @@
+.yaml {
+ padding: 10px;
+ overflow-y: auto;
+ color: #fff;
+ font: 1.1em Inconsolata, monospace;
+ white-space: pre-wrap;
+ word-break: break-all;
+ background-color: #000;
+}
\ No newline at end of file
diff --git a/ui/src/components/insight/YamlDrawer/styles.module.scss b/ui/src/components/insight/YamlDrawer/styles.module.scss
deleted file mode 100644
index 768e410e..00000000
--- a/ui/src/components/insight/YamlDrawer/styles.module.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-// Copyright The Karbour Authors.
-//
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-
-.yaml {
- padding: 10px;
- overflow-y: auto;
- color: #fff;
- font: 1.1em Inconsolata, monospace;
- white-space: pre-wrap;
- word-break: break-all;
- background-color: #000;
-}
\ No newline at end of file
diff --git a/ui/src/index.css b/ui/src/index.css
index b5e08b3f..ec2585e8 100644
--- a/ui/src/index.css
+++ b/ui/src/index.css
@@ -1,19 +1,3 @@
-/*
- * Copyright The Karbour Authors.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
diff --git a/ui/src/index.tsx b/ui/src/index.tsx
index a4ec2764..7cbf3902 100644
--- a/ui/src/index.tsx
+++ b/ui/src/index.tsx
@@ -1,32 +1,27 @@
-/*
- * Copyright The Karbour Authors.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import React from "react";
import ReactDOM from "react-dom/client";
-import "./index.css";
-import App from "./App";
-// import reportWebVitals from "./reportWebVitals";
+import { ConfigProvider } from "antd";
+import dayjs from "dayjs";
+import "dayjs/locale/zh-cn";
+import zhCN from "antd/locale/zh_CN";
+import { BrowserRouter } from "react-router-dom";
+import Index from "./views/Index";
import "./utils/request";
+import "./index.css";
+
+dayjs.locale("zh-cn");
+
+function App() {
+ return (
+
+
+
+
+
+ );
+}
+
const root = ReactDOM.createRoot(
document.getElementById("root") as HTMLElement
);
root.render();
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-// reportWebVitals();
diff --git a/ui/src/react-app-env.d.ts b/ui/src/react-app-env.d.ts
index e564e9df..179dce64 100644
--- a/ui/src/react-app-env.d.ts
+++ b/ui/src/react-app-env.d.ts
@@ -1,17 +1,8 @@
-/*
- * Copyright The Karbour Authors.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-///
+declare module '*.less' {
+ const resource: {[key: string]: string};
+ export = resource;
+}
+declare module "*.png";
+declare module "*.svg";
+declare module "*.jpeg";
+declare module "*.jpg";
diff --git a/ui/src/reportWebVitals.ts b/ui/src/reportWebVitals.ts
deleted file mode 100644
index 4cd0a60d..00000000
--- a/ui/src/reportWebVitals.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-/*
- * Copyright The Karbour Authors.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { ReportHandler } from 'web-vitals';
-
-const reportWebVitals = (onPerfEntry?: ReportHandler) => {
- if (onPerfEntry && onPerfEntry instanceof Function) {
- import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
- getCLS(onPerfEntry);
- getFID(onPerfEntry);
- getFCP(onPerfEntry);
- getLCP(onPerfEntry);
- getTTFB(onPerfEntry);
- });
- }
-};
-
-export default reportWebVitals;
diff --git a/ui/src/router/index.tsx b/ui/src/router/index.tsx
new file mode 100644
index 00000000..3055938e
--- /dev/null
+++ b/ui/src/router/index.tsx
@@ -0,0 +1,113 @@
+import { lazy, ReactNode, Suspense } from "react";
+import { Navigate } from "react-router-dom";
+import {
+ SearchOutlined,
+ MacCommandOutlined,
+ ApartmentOutlined,
+} from "@ant-design/icons";
+import { Spin } from "antd";
+import Layout from "../components/Layout";
+
+const Search = lazy(() => import("../views/search/Search"));
+const Result = lazy(() => import("../views/result/Result"));
+const Cluster = lazy(() => import("../views/cluster/Cluster"));
+const ClusterDetail = lazy(
+ () => import("../views/cluster-detail/ClusterDetail")
+);
+const Insight = lazy(() => import("../views/insight/Insight"));
+const Detail = lazy(() => import("../views/detail/Detail"));
+const NotFound = lazy(() => import("../views/notfound/NotFound"));
+const InsightGrid = lazy(() => import("../views/insightGrid/InsightGrid"));
+
+const lazyLoad = (children: ReactNode): ReactNode => {
+ return }>{children};
+};
+
+export interface RouteObject {
+ key?: string;
+ path: string;
+ title?: string;
+ icon?: React.ReactNode;
+ element: React.ReactNode;
+ children?: RouteObject[];
+ istopmenu?: boolean;
+}
+
+const router: RouteObject[] = [
+ {
+ path: "/",
+ element: ,
+ children: [
+ {
+ key: "/search",
+ path: "/search",
+ title: "search",
+ element: lazyLoad(),
+ icon: ,
+ istopmenu: true,
+ },
+ {
+ key: "/result",
+ path: "/result",
+ title: "",
+ element: lazyLoad(),
+ // icon: ,
+ istopmenu: false,
+ },
+ {
+ key: "/detail",
+ path: "/detail",
+ title: "",
+ element: lazyLoad(),
+ // icon: ,
+ istopmenu: false,
+ },
+ {
+ key: "/insight",
+ path: "/insight",
+ title: "Insight",
+ element: lazyLoad(),
+ icon: ,
+ istopmenu: true,
+ },
+ {
+ key: "/cluster",
+ path: "/cluster",
+ title: "Cluster",
+ element: lazyLoad(),
+ icon: ,
+ istopmenu: true,
+ },
+ {
+ key: "/clusterDetail",
+ path: "/clusterDetail",
+ title: "",
+ element: lazyLoad(),
+ // icon: ,
+ istopmenu: false,
+ },
+ {
+ key: "/insightGrid",
+ path: "/insightGrid",
+ title: "",
+ element: lazyLoad(),
+ // icon: ,
+ istopmenu: false,
+ },
+ {
+ path: "/",
+ title: "",
+ element: ,
+ istopmenu: false,
+ },
+ {
+ path: "*",
+ title: "",
+ element: ,
+ istopmenu: false,
+ },
+ ],
+ },
+];
+
+export default router;
diff --git a/ui/src/setupTests.ts b/ui/src/setupTests.ts
index c1ad2b99..8f2609b7 100644
--- a/ui/src/setupTests.ts
+++ b/ui/src/setupTests.ts
@@ -1,19 +1,3 @@
-/*
- * Copyright The Karbour Authors.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
// jest-dom adds custom jest matchers for asserting on DOM nodes.
// allows you to do things like:
// expect(element).toHaveTextContent(/react/i)
diff --git a/ui/src/utils/constants.ts b/ui/src/utils/constants.ts
index d8319760..4b666bca 100644
--- a/ui/src/utils/constants.ts
+++ b/ui/src/utils/constants.ts
@@ -1,19 +1,3 @@
-/*
- * Copyright The Karbour Authors.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
export const basicSyntaxColumns = [
[
{
@@ -71,3 +55,61 @@ export const basicSyntaxColumns = [
// },
],
]
+
+const relationshipModule = {
+ key: "relationship",
+ config: {
+ w: 18,
+ h: 4,
+ x: 0,
+ y: 0
+ }
+}
+
+const statInfoModule = {
+ key: "statInfo",
+ config: {
+ w: 18,
+ h: 4,
+ x: 0,
+ y: 0
+ }
+}
+
+const initModuleGrid = [
+ {
+ key: "overview",
+ config: {
+ w: 6,
+ h: 4,
+ x: 18,
+ y: 0
+ }
+ },
+ {
+ key: "issue",
+ config: {
+ w: 18,
+ h: 4,
+ x: 0,
+ y: 4
+ }
+ },
+ {
+ key: "score",
+ config: {
+ w: 6,
+ h: 4,
+ x: 18,
+ y: 4
+ }
+ },
+]
+
+const insightModuleGrid = [relationshipModule, ...initModuleGrid]
+const clusterModuleGrid = [statInfoModule, ...initModuleGrid]
+
+export {
+ insightModuleGrid,
+ clusterModuleGrid
+}
\ No newline at end of file
diff --git a/ui/src/utils/mock.ts b/ui/src/utils/mock.ts
index 73c86f2c..9641ad7a 100644
--- a/ui/src/utils/mock.ts
+++ b/ui/src/utils/mock.ts
@@ -1,19 +1,3 @@
-/*
- * Copyright The Karbour Authors.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
export const yamlStr = `apiVersion: v1
kind: Pod
metadata:
diff --git a/ui/src/utils/request.ts b/ui/src/utils/request.ts
index bec42323..08056ec7 100644
--- a/ui/src/utils/request.ts
+++ b/ui/src/utils/request.ts
@@ -1,22 +1,8 @@
-/*
- * Copyright The Karbour Authors.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
import axios from 'axios'
import { message } from 'antd';
+axios.defaults.baseURL = "https://localhost:7443";
+
axios.interceptors.request.use((config) => {
return config;
}, (error) => {
@@ -28,6 +14,11 @@ axios.interceptors.response.use((response) => {
return response?.data;
}
}, (error) => {
- message.error(error?.response?.data?.message || "请求失败，请重试");
- return Promise.reject(error);
+ try {
+ message.error(error?.response?.data?.message || "请求失败，请重试");
+ // return Promise.reject(error);
+ throw new Error(error)
+ } catch (error) {
+ console.log(error, "====error====")
+ }
});
diff --git a/ui/src/views/Index/index.tsx b/ui/src/views/Index/index.tsx
index 56e62cff..944f07cd 100644
--- a/ui/src/views/Index/index.tsx
+++ b/ui/src/views/Index/index.tsx
@@ -1,54 +1,9 @@
-/*
- * Copyright The Karbour Authors.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
+import { useRoutes } from "react-router-dom";
+import router from "../../router";
-import { BrowserRouter, Route, Routes } from "react-router-dom";
-import { Layout } from "antd";
-import TopHeader from "../../components/TopHeader";
-import Search from "../search/Search";
-import Insight from "../insight/Insight";
-import Cluster from "../cluster/Cluster";
-import Result from "../result/Result";
-import Detail from "../detail/Detail";
-import ClusterDetail from "../cluster-detail/ClusterDetail";
-import NotFound from "../notfound/NotFound";
-
-import styles from "./styles.module.scss";
-
-const { Content } = Layout;
-
-const SandBox = () => {
- return (
-
-
-
-
-
- } />
- } />
- } />
- } />
- } />
- } />
- } />
- } />
-
-
-
-
- );
-}
-export default SandBox
+const Index = () => {
+ const element = useRoutes(router);
+ return <>{element};
+};
+export default Index;
diff --git a/ui/src/views/Index/styles.module.less b/ui/src/views/Index/styles.module.less
new file mode 100644
index 00000000..9c16e7aa
--- /dev/null
+++ b/ui/src/views/Index/styles.module.less
@@ -0,0 +1,10 @@
+
+
+.container {
+ margin: 20px;
+ padding: 20px;
+ background: #fff;
+ height: calc(100vh - 104px);
+ overflow: auto;
+}
+
diff --git a/ui/src/views/Index/styles.module.scss b/ui/src/views/Index/styles.module.scss
deleted file mode 100644
index b8886c34..00000000
--- a/ui/src/views/Index/styles.module.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-// Copyright The Karbour Authors.
-//
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-
-
-
-.container {
- margin: 20px;
- padding: 20px;
- background: #fff;
- height: calc(100vh - 104px);
- overflow: auto;
-}
-
diff --git a/ui/src/views/cluster-detail/ClusterDetail.tsx b/ui/src/views/cluster-detail/ClusterDetail.tsx
index 48ce01d6..7f8d4df6 100644
--- a/ui/src/views/cluster-detail/ClusterDetail.tsx
+++ b/ui/src/views/cluster-detail/ClusterDetail.tsx
@@ -1,19 +1,3 @@
-/*
- * Copyright The Karbour Authors.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
import { useEffect, memo, useState } from "react";
import { useLocation } from "react-router-dom";
import { Breadcrumb } from "antd";
@@ -25,7 +9,7 @@ import Stat from "../../components/insight/Stat";
import YamlDrawer from "../../components/insight/YamlDrawer";
import { yamlStr } from "../../utils/mock";
-import styles from "./styles.module.scss";
+import styles from "./styles.module.less";
const issueDataMock = [
{
diff --git a/ui/src/views/insight/styles.module.scss b/ui/src/views/cluster-detail/styles.module.less
similarity index 60%
rename from ui/src/views/insight/styles.module.scss
rename to ui/src/views/cluster-detail/styles.module.less
index cb488107..606ef007 100644
--- a/ui/src/views/insight/styles.module.scss
+++ b/ui/src/views/cluster-detail/styles.module.less
@@ -1,17 +1,3 @@
-// Copyright The Karbour Authors.
-//
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-
.container {
height: 100%;
@@ -62,6 +48,7 @@
}
}
}
+
.bottom {
padding-bottom: 20px;
}
diff --git a/ui/src/views/cluster/Cluster.tsx b/ui/src/views/cluster/Cluster.tsx
index 51f4b876..f07d6cfe 100644
--- a/ui/src/views/cluster/Cluster.tsx
+++ b/ui/src/views/cluster/Cluster.tsx
@@ -1,32 +1,38 @@
-/*
- * Copyright The Karbour Authors.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
import { useState } from "react";
-import { Pagination, Badge, Tooltip, Empty } from "antd";
+import {
+ Pagination,
+ Badge,
+ Tooltip,
+ Empty,
+ Button,
+ Drawer,
+ Input,
+ Space,
+ message,
+ Form,
+} from "antd";
import axios from "axios";
import { useNavigate } from "react-router-dom";
-import styles from "./styles.module.scss";
+import styles from "./styles.module.less";
+
+const layout = {
+ labelCol: { span: 4 },
+ wrapperCol: { span: 20 },
+};
+
+const Cluster = () => {
+ const [form] = Form.useForm();
-export default function Cluster() {
const navigate = useNavigate();
const [pageData, setPageData] = useState([]);
const [searchParams, setSearchParams] = useState({
pageSize: 10,
page: 1,
});
+
+ const [visible, setVisible] = useState(false);
+ const [yamlValue, setYamlValue] = useState(undefined);
+
async function getPageData() {
const data = await axios(`/apis/cluster.karbour.com/v1beta1/clusters`, {
method: "GET",
@@ -55,7 +61,7 @@ export default function Cluster() {
}
const handleClick = (item) => {
- console.log(item, "===item===")
+ console.log(item, "===item===");
let queryStr = "";
if (item?.metadata?.managedFields?.[0]?.apiVersion) {
queryStr = `${item?.metadata?.managedFields?.[0]?.apiVersion},${item.metadata?.name}`;
@@ -65,14 +71,45 @@ export default function Cluster() {
navigate(`/cluster-detail?query=${queryStr}`);
};
+ const join = () => {
+ setVisible(true);
+ };
+
+ function onClose() {
+ setVisible(false);
+ }
+
+ function handleSubmit() {
+ form
+ .validateFields()
+ .then((values) => {
+ console.log(values, "=====sada====");
+ message.success("添加成功");
+ form.resetFields();
+ setVisible(false);
+ })
+ .catch((info) => {
+ console.log("Validate Failed:", info);
+ });
+ }
+
return (
);
-}
+};
+
+export default Cluster;
diff --git a/ui/src/views/cluster/styles.module.scss b/ui/src/views/cluster/styles.module.less
similarity index 72%
rename from ui/src/views/cluster/styles.module.scss
rename to ui/src/views/cluster/styles.module.less
index 4a76b995..cc0b62c8 100644
--- a/ui/src/views/cluster/styles.module.scss
+++ b/ui/src/views/cluster/styles.module.less
@@ -1,20 +1,9 @@
-// Copyright The Karbour Authors.
-//
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-
.container {
background: #fff;
height: 100%;
+ .action-container {
+ padding-bottom: 10px;
+ }
.content {
display: flex;
flex-wrap: wrap;
@@ -83,4 +72,4 @@
width: 100%;
text-align: right;
}
-}
+}
\ No newline at end of file
diff --git a/ui/src/views/detail/Detail.tsx b/ui/src/views/detail/Detail.tsx
index 8602ea8c..4fceeb3d 100644
--- a/ui/src/views/detail/Detail.tsx
+++ b/ui/src/views/detail/Detail.tsx
@@ -1,28 +1,11 @@
-/*
- * Copyright The Karbour Authors.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
import { useState, useEffect } from "react";
import { Tag } from "antd";
import axios from "axios";
import { useLocation } from "react-router-dom";
import queryString from "query-string";
-import styles from "./styles.module.scss";
-
+import styles from "./styles.module.less";
-export default function Detail() {
+const Detail = () => {
const location = useLocation();
// const [pageData, setPageData] = useState();
const urlSearchParams = queryString.parse(location.search);
@@ -94,7 +77,9 @@ export default function Detail() {
+ );
+};
+
+export default Insight;
diff --git a/ui/src/views/cluster-detail/styles.module.scss b/ui/src/views/insightGrid/styles.module.less
similarity index 52%
rename from ui/src/views/cluster-detail/styles.module.scss
rename to ui/src/views/insightGrid/styles.module.less
index 69212020..227ba069 100644
--- a/ui/src/views/cluster-detail/styles.module.scss
+++ b/ui/src/views/insightGrid/styles.module.less
@@ -1,33 +1,43 @@
-// Copyright The Karbour Authors.
-//
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-
.container {
height: 100%;
+ width: 100%;
.bread {
margin-bottom: 30px;
+ display: flex;
+ justify-content: space-between;
+
+ .editBtn {
+ cursor: pointer;
+ }
+ }
+
+ .item {
+ border: 1px solid #f1f1f1;
+ border-radius: 6px;
+ position: relative;
+
+ .title {
+ position: absolute;
+ height: 20px;
+ top: -10px;
+ left: 20px;
+ background: #fff;
+ padding: 0 10px;
+ font-weight: bold;
+ font-size: 18px;
+ }
}
.top,
.bottom {
display: flex;
- margin-bottom: 20px;
+ margin-bottom: 10px;
.left {
flex: 1;
- margin-right: 20px;
- border: 1px solid #d8d8d8;
+ margin-right: 10px;
+ border: 1px solid #f1f1f1;
border-radius: 4px;
position: relative;
@@ -46,7 +56,7 @@
.right {
width: 350px;
height: 100%;
- border: 1px solid #d8d8d8;
+ border: 1px solid #f1f1f1;
border-radius: 4px;
position: relative;
@@ -66,4 +76,4 @@
.bottom {
padding-bottom: 20px;
}
-}
\ No newline at end of file
+}
diff --git a/ui/src/views/notfound/NotFound.tsx b/ui/src/views/notfound/NotFound.tsx
index b0f6c92e..93986054 100644
--- a/ui/src/views/notfound/NotFound.tsx
+++ b/ui/src/views/notfound/NotFound.tsx
@@ -1,25 +1,10 @@
-/*
- * Copyright The Karbour Authors.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
import { Button, Result } from "antd";
-
-import styles from "./styles.module.scss";
import { useNavigate } from "react-router-dom";
-export default function Insight() {
+import styles from "./styles.module.less";
+
+
+const NotFound = () => {
const navigate = useNavigate();
function goBack() {
navigate("/search");
@@ -30,7 +15,7 @@ export default function Insight() {
返回首页
@@ -39,4 +24,6 @@ export default function Insight() {
/>
);
-}
+};
+
+export default NotFound;
diff --git a/ui/src/views/notfound/styles.module.less b/ui/src/views/notfound/styles.module.less
new file mode 100644
index 00000000..42aafa54
--- /dev/null
+++ b/ui/src/views/notfound/styles.module.less
@@ -0,0 +1,7 @@
+.container {
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-size: 24px;
+}
diff --git a/ui/src/views/notfound/styles.module.scss b/ui/src/views/notfound/styles.module.scss
deleted file mode 100644
index 6b1c8126..00000000
--- a/ui/src/views/notfound/styles.module.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-// Copyright The Karbour Authors.
-//
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-
-.container {
- height: 100%;
- display: flex;
- justify-content: center;
- align-items: center;
-}
\ No newline at end of file
diff --git a/ui/src/views/result/Result.tsx b/ui/src/views/result/Result.tsx
index 410eb45c..eedad03f 100644
--- a/ui/src/views/result/Result.tsx
+++ b/ui/src/views/result/Result.tsx
@@ -1,26 +1,14 @@
-/*
- * Copyright The Karbour Authors.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
import { useState, useEffect } from "react";
-import { Input, Select, Space, Pagination, Empty } from "antd";
+import { Input, Select, Pagination, Empty } from "antd";
import axios from "axios";
import { useLocation, useNavigate } from "react-router-dom";
-import { CaretRightOutlined, RadarChartOutlined } from "@ant-design/icons";
+import {
+ CaretRightOutlined,
+ RadarChartOutlined,
+ SearchOutlined,
+} from "@ant-design/icons";
import queryString from "query-string";
-import styles from "./styles.module.scss";
+import styles from "./styles.module.less";
const { Search } = Input;
@@ -44,13 +32,14 @@ const options = [
// { label: "Search query examples", value: "examples" },
// ];
-export default function Result() {
+const Result = () => {
const location = useLocation();
const navigate = useNavigate();
// const [showPanel, setShowPanel] = useState(false);
const [pageData, setPageData] = useState();
const urlSearchParams = queryString.parse(location.search);
const [searchValue, setSearchValue] = useState(urlSearchParams?.query || "");
+ const [searchType, setSearchType] = useState(urlSearchParams?.patternType === 'SQL' ? "SQL" : "filter");
// const [currentTab, setCurrentTab] = useState(tabsList?.[0].value);
@@ -72,13 +61,14 @@ export default function Result() {
}
async function getPageData() {
- const data = await axios(`/apis/search.karbour.com/v1beta1/uniresources`, {
+ const data = await axios("/apis/search.karbour.com/v1beta1/uniresources", {
method: "GET",
headers: {
"Content-Type": "application/json",
},
params: {
- query: encodeURI(searchValue as any),
+ query: searchValue, // encodeURIComponent(searchValue as any),
+ ...(searchType === 'SQL' ? { patternType: "sql", } : {})
},
});
setPageData(data || {});
@@ -146,12 +136,22 @@ export default function Result() {
navigate(`/insight?query=${queryStr}`);
};
- console.log(pageData, "===pageData===")
+ console.log(pageData, "===pageData===");
+
+ const selectBefore = (
+
+ );
return (
);
-}
+};
+
+export default Result;
diff --git a/ui/src/views/result/styles.module.scss b/ui/src/views/result/styles.module.less
similarity index 72%
rename from ui/src/views/result/styles.module.scss
rename to ui/src/views/result/styles.module.less
index 7c9297f0..a78677f4 100644
--- a/ui/src/views/result/styles.module.scss
+++ b/ui/src/views/result/styles.module.less
@@ -1,17 +1,3 @@
-// Copyright The Karbour Authors.
-//
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-
.container {
background: #fff;
height: 100%;
diff --git a/ui/src/views/search/Search.tsx b/ui/src/views/search/Search.tsx
index 90a158ee..a3188c4f 100644
--- a/ui/src/views/search/Search.tsx
+++ b/ui/src/views/search/Search.tsx
@@ -21,7 +21,7 @@ import { HeatMapOutlined } from "@ant-design/icons";
import { basicSyntaxColumns } from "../../utils/constants";
import KarbourTabs from "../../components/Tabs/index";
-import styles from "./styles.module.scss";
+import styles from "./styles.module.less";
const { Search } = Input;
@@ -145,7 +145,12 @@ const SearchPage = () => {
}
const handleSearch = (val: string) => {
- navigate(`/result?query=${val}`);
+ if (searchType === 'SQL') {
+ navigate(`/result?query=${val}&patternType=SQL`);
+ } else {
+ navigate(`/result?query=${val}`);
+ }
+
};
const handleInputChange = (event: any) => {
@@ -184,3 +189,4 @@ const SearchPage = () => {
};
export default SearchPage;
+
diff --git a/ui/src/views/search/styles.module.scss b/ui/src/views/search/styles.module.less
similarity index 80%
rename from ui/src/views/search/styles.module.scss
rename to ui/src/views/search/styles.module.less
index 3e71a2e1..747bcd31 100644
--- a/ui/src/views/search/styles.module.scss
+++ b/ui/src/views/search/styles.module.less
@@ -1,17 +1,3 @@
-// Copyright The Karbour Authors.
-//
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-
.search {
padding-top: 100px;
display: flex;