+ { image ? 
: null }
+
+ {title}
+ { description ?{description}
: null}
+ { extra ? {extra}
: null }
+
+
+ );
+};
+
+const HeaderAvatar = (props: Props) => {
+ const {
+ name = 'Admin',
+ } = props;
+ const [, userDispatcher] = store.useModel('user');
+
+ const loginOut = async () => {
+ await logout();
+ const pathname = history?.location?.pathname;
+ history?.push({
+ pathname: '/login',
+ search: pathname ? `redirect=${pathname}` : '',
+ });
+ };
+ function onMenuItemClick(key: string) {
+ if (key === 'logout') {
+ userDispatcher.updateCurrentUser({});
+ loginOut();
+ }
+ }
+
+ return (
+
+
+
+
+ {name}
+ {mail} +
+ {name}
+
+ );
+};
+
+export default HeaderAvatar;
diff --git a/webui/src/components/Logo/index.module.css b/webui/src/components/Logo/index.module.css
new file mode 100644
index 00000000..12596a22
--- /dev/null
+++ b/webui/src/components/Logo/index.module.css
@@ -0,0 +1,19 @@
+.logo {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: var(--color-text1-1, #ccc);
+ font-weight: bold;
+ font-size: 14px;
+ line-height: 22px;
+}
+
+.logo:visited, .logo:link {
+ color: var(--color-text1-1, #ccc);
+ text-decoration: none;
+}
+
+.logo img {
+ height: 24px;
+ margin-right: 10px;
+}
diff --git a/webui/src/components/Logo/index.tsx b/webui/src/components/Logo/index.tsx
new file mode 100644
index 00000000..b6b59c4c
--- /dev/null
+++ b/webui/src/components/Logo/index.tsx
@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { Link } from 'ice';
+import styles from './index.module.css';
+
+export interface ILogoProps {
+ image?: string;
+ text?: string;
+ url?: string;
+ imageStyle?: React.CSSProperties;
+ textStyle?: React.CSSProperties;
+}
+
+export default function Logo({ image, text, url, imageStyle, textStyle }: ILogoProps) {
+ return (
+
+ {image && }
+ {text}
+
+ );
+}
diff --git a/webui/src/components/PageHeader/index.module.css b/webui/src/components/PageHeader/index.module.css
new file mode 100644
index 00000000..e55b2f14
--- /dev/null
+++ b/webui/src/components/PageHeader/index.module.css
@@ -0,0 +1,23 @@
+.pageHeader {
+ margin-top: calc(0px - var(--shell-dark-content-paddingTop, 20px));
+ margin-right: calc(0px - var(--shell-dark-content-paddingLeft, 20px));
+ margin-bottom: calc(var(--shell-dark-content-paddingLeft, 20px));
+ margin-left: calc(0px - var(--shell-dark-content-paddingLeft, 20px));
+ padding: var(--shell-dark-content-paddingTop, 20px) var(--shell-dark-content-paddingLeft, 20px);
+ background-color: var(--color-white, #fff);
+}
+
+.title {
+ display: block;
+ color: var(--color-text1-4, #333);
+ font-weight: var(--font-weight-3, bold);
+ font-size: var(--font-size-title, 20px);
+ line-height: 1.5;
+}
+
+.description {
+ display: block;
+ color: var(--color-text1-3, #666);
+ font-size: var(--font-size-body-2, 14px);
+ line-height: 1.5;
+}
diff --git a/webui/src/components/PageHeader/index.tsx b/webui/src/components/PageHeader/index.tsx
new file mode 100644
index 00000000..90271791
--- /dev/null
+++ b/webui/src/components/PageHeader/index.tsx
@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { Breadcrumb, Box, Typography, Icon } from '@alifd/next';
+import styles from './index.module.css';
+
+export interface PageHeaderProps {
+ breadcrumbs?: Array<{ name: string; path?: string }>;
+ title?: string;
+ description?: string;
+}
+
+const PageHeader: React.FCFailed {record.capture_results.map(item => item.message).join(",")}
+ }
+ };
+ return (
+
+ i!=null))}
+ >
+
+
+ );
+};
+
+export default CaptureHistory;
diff --git a/webui/src/pages/capture/index.tsx b/webui/src/pages/capture/index.tsx
new file mode 100644
index 00000000..40f4687a
--- /dev/null
+++ b/webui/src/pages/capture/index.tsx
@@ -0,0 +1,78 @@
+import { Card, Button, Table, Message } from "@alifd/next"
+import PageHeader from "@/components/PageHeader"
+import CaptureForm from "@/pages/capture/components/captureForm";
+import CaptureResult from "@/pages/capture/components/captureResult";
+import { CaptureTask } from "@/services/capture";
+import captureService from "@/services/capture"
+import { useEffect, useState } from "react";
+import { getErrorMessage } from "@/utils";
+
+const submitCapture = (props, callback) => {
+ const task: CaptureTask = {
+ capture_list: props.capture_list,
+ capture_host_ns: props.capture_node,
+ capture_duration_seconds: props.duration,
+ filter: props.filter
+ }
+
+ captureService.createCapture(task)
+ .then(res => {
+ Message.success('Capture task submitted.')
+ callback()
+ })
+ .catch(err => {
+ Message.error(`Error when submitting capture task: ${getErrorMessage(err)}`)
+ })
+}
+
+export default function Capture() {
+ const [captureList, setCaptureList] = useState([])
+ const [abortController, setAbortController] = useState
+
+
+ submitCapture(props, refreshCaptureList)} />
+
+
+
+
+
+
+
+ )
+}
diff --git a/webui/src/pages/config/components/AddDialog/index.module.css b/webui/src/pages/config/components/AddDialog/index.module.css
new file mode 100644
index 00000000..e4f64dd8
--- /dev/null
+++ b/webui/src/pages/config/components/AddDialog/index.module.css
@@ -0,0 +1,9 @@
+.box {
+ display: flex;
+ align-items: center;
+ margin-bottom: 20px;
+
+ span {
+ margin-right: 10px;
+ }
+}
diff --git a/webui/src/pages/config/components/AddDialog/index.tsx b/webui/src/pages/config/components/AddDialog/index.tsx
new file mode 100644
index 00000000..a3263c29
--- /dev/null
+++ b/webui/src/pages/config/components/AddDialog/index.tsx
@@ -0,0 +1,108 @@
+import { Dialog, Select, Box, Input, Message } from "@alifd/next"
+import { useState } from "react"
+import styles from "./index.module.css"
+import _ from "lodash"
+
+export interface SelectableItem {
+ name: string
+ args: any
+}
+
+export interface Selection {
+ name: string
+ args: any
+}
+
+interface AddDialogProps {
+ visible: boolean
+ items: SelectableItem[]
+ autoComplete?: boolean
+ type: string
+ onOk: (type: string, selection: Selection) => void
+ onCancel: () => void
+}
+
+interface LokiArgsProps {
+ onChange: (args: any) => void
+}
+
+const LokiArgs: React.FC
+
+ Address
+
+
+
+ )
+}
+
+
+const AddDialog: React.FC
+
+
+ )
+ }
+
+ const deleteItem = (type: string, index: number) => {
+ // we do not need a deep copy here
+ const newConfig = { ...exporterConfig } as ExporterConfig
+ switch (type) {
+ case METRIC_PROBE:
+ newConfig.metrics?.probes?.splice(index, 1);
+ break;
+ case EVENT_PROBE:
+ newConfig.event?.probes?.splice(index, 1);
+ break;
+ case EVENT_SINK:
+ newConfig.event?.sinks?.splice(index, 1);
+ break;
+ default:
+ console.log(`unknown item type ${type}!`);
+ break;
+ }
+ setExporterConfig(newConfig);
+ setConfigChanged(true);
+ }
+
+ const [selectableItems, setSelectableItems] = useState
+
+
+ _.isEmpty(v) ? '-' : JSON.stringify(v)} />
+ generateActions(METRIC_PROBE, i)} />
+
+
+
+
+ _.isEmpty(v) ? '-' : JSON.stringify(v)} />
+ generateActions(EVENT_PROBE, i)} />
+
+
+
+
+ _.isEmpty(v) ? '-' : JSON.stringify(v)} />
+ generateActions(EVENT_SINK, i)} />
+
+
+
+
+
+
+ setDialogVisible(false)}
+ />
+
+ );
+}
diff --git a/webui/src/pages/config/types.json b/webui/src/pages/config/types.json
new file mode 100644
index 00000000..d5fbd41c
--- /dev/null
+++ b/webui/src/pages/config/types.json
@@ -0,0 +1,104 @@
+{
+ "metric_probe": [
+ {
+ "name": "virtcmdLatency"
+ },
+ {
+ "name": "flow"
+ },
+ {
+ "name": "tcp"
+ },
+ {
+ "name": "socketlatency"
+ },
+ {
+ "name": "sock"
+ },
+ {
+ "name": "tcpsummary"
+ },
+ {
+ "name": "kernellatency"
+ },
+ {
+ "name": "netiftxlat"
+ },
+ {
+ "name": "conntrack"
+ },
+ {
+ "name": "ipvs"
+ },
+ {
+ "name": "ip"
+ },
+ {
+ "name": "io"
+ },
+ {
+ "name": "tcpext"
+ },
+ {
+ "name": "udp"
+ },
+ {
+ "name": "info"
+ },
+ {
+ "name": "qdisc"
+ },
+ {
+ "name": "fd"
+ },
+ {
+ "name": "packetloss"
+ },
+ {
+ "name": "netdev"
+ },
+ {
+ "name": "softnet"
+ },
+ {
+ "name": "netsoftirq"
+ }
+ ],
+ "event_probe": [
+ {
+ "name": "conntrack"
+ },
+ {
+ "name": "biolatency"
+ },
+ {
+ "name": "kernellatency"
+ },
+ {
+ "name": "packetloss"
+ },
+ {
+ "name": "socketlatency"
+ },
+ {
+ "name": "netiftxlat"
+ },
+ {
+ "name": "netsoftirq"
+ },
+ {
+ "name": "tcpreset"
+ },
+ {
+ "name": "virtcmdLatency"
+ }
+ ],
+ "event_sink": [
+ {
+ "name": "stderr"
+ },
+ {
+ "name": "loki"
+ }
+ ]
+}
diff --git a/webui/src/pages/diagnosis/components/DiagnosisForm/index.tsx b/webui/src/pages/diagnosis/components/DiagnosisForm/index.tsx
new file mode 100644
index 00000000..8a722312
--- /dev/null
+++ b/webui/src/pages/diagnosis/components/DiagnosisForm/index.tsx
@@ -0,0 +1,47 @@
+import { Form, Input, NumberPicker, Select } from '@alifd/next';
+
+interface DiagnosisFormProps {
+ onSubmit: (data: DiagnosisFormData) => void;
+}
+
+interface DiagnosisFormData {
+ [key: string]: any;
+}
+
+const ipRegex = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/;
+
+const DiagnosisForm: React.FunctionComponent
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+export default DiagnosisHistory;
diff --git a/webui/src/pages/diagnosis/index.tsx b/webui/src/pages/diagnosis/index.tsx
new file mode 100644
index 00000000..0b456a9f
--- /dev/null
+++ b/webui/src/pages/diagnosis/index.tsx
@@ -0,0 +1,121 @@
+import { Card, Button, Message, Icon, Dialog } from "@alifd/next"
+import DiagnosisForm from "./components/DiagnosisForm"
+import PageHeader from "@/components/PageHeader"
+import DiagnosisHistory from "./components/DiagnosisHistory"
+import { useEffect, useState } from 'react'
+import { DiagnosisResult, DiagnosisTask } from "@/services/diagnosis"
+import { Link } from "@ice/runtime"
+import diagnosisService from '@/services/diagnosis'
+import { getErrorMessage } from "@/utils"
+
+
+const makeAction = (d: DiagnosisResult, showMessageDialog: (message: string) => void): JSX.Element | null => {
+ switch (d.status) {
+ case "success":
+ return (
+
+ {d.message ? : null }
+ )
+ case "failed":
+ return d.message ? : null
+ default:
+ return null;
+ }
+}
+
+const toTableData = (data: DiagnosisResult[], showMessageDialog: (message: string) => void) => {
+ if (!data) return [];
+ return data.map(d => {
+ const task_config = JSON.parse(d.task_config) as DiagnosisTask;
+ return {
+ id: d.task_id,
+ time: d.start_time,
+ src: task_config.source,
+ dst: task_config.destination.address,
+ port: task_config.destination.port,
+ protocol: task_config.protocol,
+ status: d.status === 'running' ?
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/webui/src/pages/diagnosis/result/$id.tsx b/webui/src/pages/diagnosis/result/$id.tsx
new file mode 100644
index 00000000..a6959f2c
--- /dev/null
+++ b/webui/src/pages/diagnosis/result/$id.tsx
@@ -0,0 +1,59 @@
+import { useParams } from "ice";
+import { Card, Message } from "@alifd/next";
+import DiagnosisGraph from "./components/DiagnosisGraph";
+import PageHeader from "@/components/PageHeader";
+import ResultDialog from "./components/ResultDialog";
+import { useEffect, useState } from "react";
+import { ResultDialogData } from "./components/ResultDialog";
+import diagnosisService from "@/services/diagnosis";
+
+export default function Result() {
+ const params = useParams()
+ const [visible, setVisible] = useState(false)
+ const [dialogData, setDialogData] = useState
+
+
+
+
+
+ setVisible(false)}/>
+
+ )
+}
diff --git a/webui/src/pages/diagnosis/result/components/DiagnosisGraph/index.tsx b/webui/src/pages/diagnosis/result/components/DiagnosisGraph/index.tsx
new file mode 100644
index 00000000..021603fb
--- /dev/null
+++ b/webui/src/pages/diagnosis/result/components/DiagnosisGraph/index.tsx
@@ -0,0 +1,195 @@
+import { Graph, GraphData } from "@antv/g6";
+import { useEffect, useRef } from "react";
+import registerDiagnosisNode from "./node";
+
+const suspicionColors = {
+ 0: '#30BD61',
+ 1: '#FFB369',
+ 2: '#F76D76',
+ 3: '#F76D76'
+}
+
+const nodeTypeIcon = {
+ 'pod': '/img/pod.svg',
+ 'node': '/img/node.svg',
+}
+
+interface DiagnosisResultProps {
+ data?: DiagnosisResultData;
+ onClick?: (type: "node" | "edge", id: string) => void
+};
+
+const wrapLine = (text: string, wrapCount: number): string => {
+ if (text.length < wrapCount) return text;
+ return text.substring(0, wrapCount) + '\n' + wrapLine(text.substring(wrapCount), wrapCount)
+}
+
+const maxSuspicionLevel = (sus: Suspicion[]): SuspicionLevel => {
+ return Math.max(...sus.map(i => i.level))
+}
+
+const toGraphData = (data: DiagnosisResultData): GraphData => {
+ let graphData: GraphData = {}
+
+ if (data.nodes) {
+ graphData.nodes = data.nodes.map(node => {
+ const nodeData = {
+ color: node.suspicions && node.suspicions.length > 0 ?
+ suspicionColors[maxSuspicionLevel(node.suspicions)] : suspicionColors[0],
+ count: node.suspicions?.length || 0,
+ img: nodeTypeIcon[node.type] || '/img/default.svg',
+ }
+ return {
+ id: node.id,
+ label: wrapLine(node.id, 17),
+ nodeData: nodeData,
+ }
+ })
+ }
+
+ if (data.links) {
+ graphData.edges = data.links.map(link => {
+ return {
+ id: link.id,
+ source: link.source,
+ target: link.destination,
+ label: link.type
+ }
+ })
+ }
+
+ return graphData
+}
+
+const bindEvent = (graph: Graph, onClick: ((type: "node" | "edge", id: string) => void) | undefined) => {
+ graph.on('node:mouseenter', (e) => {
+ const nodeItem = e.item;
+ graph.setItemState(nodeItem!, 'hover', true);
+ });
+
+ graph.on('node:mouseleave', (e) => {
+ const nodeItem = e.item;
+ graph.setItemState(nodeItem!, 'hover', false);
+ });
+
+ graph.on('edge:mouseenter', (e) => {
+ const edgeItem = e.item;
+ graph.setItemState(edgeItem!, 'hover', true);
+ });
+
+ graph.on('edge:mouseleave', (e) => {
+ const edgeItem = e.item;
+ graph.setItemState(edgeItem!, 'hover', false);
+ });
+
+ if (onClick) {
+ graph.on('node:click', (e) => {
+ const nodeItem = e.item
+ onClick('node', e.item?._cfg?.id!);
+ })
+
+ graph.on('edge:click', (e) => {
+ const nodeItem = e.item
+ onClick('edge', e.item?._cfg?.id!);
+ })
+ }
+}
+
+const DiagnosisGraph: React.FC
+
+ );
+};
+
+export default DiagnosisGraph;
diff --git a/webui/src/pages/diagnosis/result/components/DiagnosisGraph/node.ts b/webui/src/pages/diagnosis/result/components/DiagnosisGraph/node.ts
new file mode 100644
index 00000000..cbacad4e
--- /dev/null
+++ b/webui/src/pages/diagnosis/result/components/DiagnosisGraph/node.ts
@@ -0,0 +1,66 @@
+import G6, { IGroup, ModelConfig, NodeConfig } from "@antv/g6";
+
+export default function registerDiagnosisNode() {
+ G6.registerNode("diagnosis-node", {
+ afterDraw(cfg, group, rst) {
+ console.log(rst)
+ const size = this.getSize(cfg);
+ const r = size[0] / 2;
+
+ const style = (cfg!.labelCfg && cfg!.labelCfg.style) || {};
+ style.text = cfg!.label;
+ const t = group!.getChildren().find(i => i.cfg.className == 'node-label')
+ if (t) {
+ t.attrs = {
+ ...t.attrs,
+ textBaseline: 'top',
+ }
+ }
+
+ const s = 0.8*r;
+ const img = group!.addShape('image', {
+ attrs: {
+ cursor: 'pointer',
+ img: cfg.nodeData.img,
+ x: -s/2,
+ y: -s-(r-s)/2,
+ height: s,
+ width: s,
+ },
+ name: 'node-type-img'
+ });
+
+ const si = 0.3*r;
+ const indr = group!.addShape("rect", {
+ attrs: {
+ cursor: 'pointer',
+ height: si,
+ width: si,
+ x: -si/2,
+ // y: t?.getBBox().height + 2,
+ y: t?.attrs.fontSize * 2 + 5,
+ radius: 4,
+ text: '1',
+ fill: cfg.nodeData.color,
+ },
+ name: 'indicator-rect'
+ });
+
+ const indt = group!.addShape("text", {
+ attrs: {
+ cursor: 'pointer',
+ y: indr.attrs.y + 0.5*si,
+ fontSize: 0.7*si,
+ fontWeight: 'bold',
+ text: cfg.nodeData.count.toString(),
+ fill: 'white',
+ textBaseline: 'middle',
+ textAlign: 'center'
+ },
+ name: 'indicator-text'
+ });
+
+ },
+ update: undefined,
+ }, 'circle')
+};
diff --git a/webui/src/pages/diagnosis/result/components/ResultDialog/index.module.css b/webui/src/pages/diagnosis/result/components/ResultDialog/index.module.css
new file mode 100644
index 00000000..3245c21c
--- /dev/null
+++ b/webui/src/pages/diagnosis/result/components/ResultDialog/index.module.css
@@ -0,0 +1,23 @@
+.attributeItem {
+ font-size: 13px;
+ color: black;
+}
+
+.attributeTitle {
+ font-size: 13px;
+ color: rgb(102, 102, 102);
+}
+
+.attributeSuspicionItem {
+ font-size: 14px;
+ color: black;
+}
+
+.suspicionIcon {
+ padding: 2px 4px;
+ margin-right: 5px;
+ user-select: none;
+ color: white;
+ border-radius: 5px;
+ text-align: center;
+}
diff --git a/webui/src/pages/diagnosis/result/components/ResultDialog/index.tsx b/webui/src/pages/diagnosis/result/components/ResultDialog/index.tsx
new file mode 100644
index 00000000..1e5422aa
--- /dev/null
+++ b/webui/src/pages/diagnosis/result/components/ResultDialog/index.tsx
@@ -0,0 +1,118 @@
+import { Dialog, Divider, List } from "@alifd/next";
+import styles from "./index.module.css";
+import { Grid } from "@alifd/next";
+
+export interface ResultDialogData {
+ type: string
+ data: DiagnosisCluster | DiagnosisNode | DiagnosisLink
+}
+
+
+interface ResultDialogProps {
+ visible: boolean;
+ onClose: () => void
+ data?: ResultDialogData
+}
+
+const levelToString = (level: SuspicionLevel) => {
+ switch (level) {
+ case 0:
+ return "INFO";
+ case 1:
+ return "WARNING";
+ case 2:
+ return "CRITICAL"
+ case 3:
+ return "FATAL";
+ default:
+ return "UNKNOWN";
+ }
+}
+
+const suspicionColors = {
+ 0: '#30BD61',
+ 1: '#FFB369',
+ 2: '#F76D76',
+ 3: '#F76D76'
+}
+
+const makeAttributes = (data?: ResultDialogData): string[][] => {
+ if (!data) return [];
+ switch (data.type) {
+ case "node":
+ const n = data.data as DiagnosisNode;
+ return [
+ ['Node ID', n.id],
+ ['Type', n.type]
+ ]
+ case "edge":
+ const e = data.data as DiagnosisLink;
+ return [
+ ['Edge ID', e.id],
+ ['Type', e.type],
+ ["Action", e.action],
+ ["Output Interface (Sender Node)", e.source_attributes.if],
+ ["Input Interface (Receiver Node)", e.destination_attributes.if],
+ ["Packet Source", e.packet.source],
+ ["Packet Destination", e.packet.destination],
+ ["Packet Destination Port", e.packet.dport],
+ ["Packet Protocol", e.packet.protocol]
+ ]
+ default:
+ return [];
+ }
+};
+
+const makeAttributeItem = (i: string[], idx: number) => {
+ return
+
+ {levelToString(i.level)}
+
+ {i.message}
+
+
+
+ );
+};
+
+export default LoginBlock;
diff --git a/webui/src/pages/login/index.module.css b/webui/src/pages/login/index.module.css
new file mode 100644
index 00000000..a64869aa
--- /dev/null
+++ b/webui/src/pages/login/index.module.css
@@ -0,0 +1,12 @@
+.container {
+ display: flex;
+ align-items: center;
+ height: 100vh;
+ background-image: url('https://img.alicdn.com/tfs/TB1L.owp1H2gK0jSZJnXXaT1FXa-2880-1770.png');
+ background-repeat: no-repeat;
+ background-size: cover;
+}
+
+.content {
+ width: 100%;
+}
diff --git a/webui/src/pages/login/index.tsx b/webui/src/pages/login/index.tsx
new file mode 100644
index 00000000..9619efd7
--- /dev/null
+++ b/webui/src/pages/login/index.tsx
@@ -0,0 +1,28 @@
+import { ResponsiveGrid } from '@alifd/next';
+import { definePageConfig } from 'ice';
+import LoginBlock from './components/LoginBlock';
+import styles from './index.module.css';
+
+const { Cell } = ResponsiveGrid;
+
+const Login: React.FC = () => {
+ return (
+
+
+
+
+ );
+};
+
+export const pageConfig = definePageConfig(() => {
+ return {
+ title: 'Login',
+ };
+});
+
+export default Login;
diff --git a/webui/src/pages/monitoring/dashboard/index.tsx b/webui/src/pages/monitoring/dashboard/index.tsx
new file mode 100644
index 00000000..23b9d44c
--- /dev/null
+++ b/webui/src/pages/monitoring/dashboard/index.tsx
@@ -0,0 +1,52 @@
+import PageHeader from '@/components/PageHeader';
+import WebFrameCard from '@/components/WebFrameCard';
+import { useEffect, useState } from 'react';
+import Exception from '@/components/Exception';
+import { Loading, Message } from '@alifd/next';
+import store from '@/store'
+
+export default function Dashboard() {
+ const [loading, setLoading] = useState(true)
+
+ const [dashboardConfig, dashboardConfigDispatcher] = store.useModel('dashboard');
+ const effectsState = store.useModelEffectsState('dashboard');
+
+ useEffect(() => {
+ dashboardConfigDispatcher.fetchDashboardConfig()
+ .then(() => {
+ if(effectsState.fetchDashboardConfig.error) {
+ Message.error(`Error when fetching dashboard config: ${effectsState.fetchDashboardConfig.error.response.data.error}`)
+ }
+ })
+ .finally(() => {
+ setLoading(false)
+ })
+ }, [])
+
+ const onSubmit = async ({ url }) => {
+ return await dashboardConfigDispatcher.updateDashboardConfig({ 'metrics_url': url })
+ .then(() => {
+ if(effectsState.updateDashboardConfig.error) {
+ Message.error(`Error when submitting dashboard config: ${effectsState.updateDashboardConfig.error.response.data.error}`)
+ }
+ })
+ }
+
+ return (
+
+
+
+ |
+
+
+
+
+
+ )}
+
+ );
+}
diff --git a/webui/src/pages/monitoring/events/components/EventList/index.module.css b/webui/src/pages/monitoring/events/components/EventList/index.module.css
new file mode 100644
index 00000000..3626a9d2
--- /dev/null
+++ b/webui/src/pages/monitoring/events/components/EventList/index.module.css
@@ -0,0 +1,32 @@
+.eventItem {
+ background-color: rgb(235, 245, 255);
+ font-size: 15px;
+ display: flex;
+ align-items: center;
+ height: 4em;
+ margin-bottom: 10px;
+}
+
+.eventInfo {
+ margin-right: 20px;
+}
+
+.eventMessage {
+}
+
+.eventType {
+ color: orangered;
+}
+
+.tag {
+ margin-right: 10px;
+}
+
+.bar {
+ height: 100%;
+ width: 3px;
+ margin-right: 10px;
+ background-color: #0070cc;
+}
+
+
diff --git a/webui/src/pages/monitoring/events/components/EventList/index.tsx b/webui/src/pages/monitoring/events/components/EventList/index.tsx
new file mode 100644
index 00000000..be74f423
--- /dev/null
+++ b/webui/src/pages/monitoring/events/components/EventList/index.tsx
@@ -0,0 +1,35 @@
+import { EventData } from "@/services/event";
+import { List, Tag } from "@alifd/next";
+import styles from './index.module.css'
+
+interface EventListProps {
+ data: EventData[]
+};
+
+const renderListItem = (ev: EventData, i: number): JSX.Element => {
+ // convert nanosecond timestamp to date
+ const date = new Date(ev.timestamp / 1000000);
+ return (
+
+
+ ) : (
+
+
+
+ )
+};
+
+const EventList: React.FC
+
+ {date.toISOString()}
+ {ev.type}
+
+
+
+ {ev.labels.map(i => {`${i.name}: ${i.value}`} )}
+
+ {ev.msg}
+
+
);
+};
+
+export default EventList;
diff --git a/webui/src/pages/monitoring/events/index.module.css b/webui/src/pages/monitoring/events/index.module.css
new file mode 100644
index 00000000..3f3efb85
--- /dev/null
+++ b/webui/src/pages/monitoring/events/index.module.css
@@ -0,0 +1,22 @@
+.title:first-child {
+ margin-left: 0;
+}
+
+.title {
+ margin-right: 10px;
+ margin-left: 20px;
+}
+
+.box {
+ display: flex;
+ align-items: center;
+ margin: 20px 0;
+}
+
+.btn {
+ margin: 0 5px;
+}
+
+.select {
+ min-width: 200px;
+}
diff --git a/webui/src/pages/monitoring/events/index.tsx b/webui/src/pages/monitoring/events/index.tsx
new file mode 100644
index 00000000..399277c6
--- /dev/null
+++ b/webui/src/pages/monitoring/events/index.tsx
@@ -0,0 +1,151 @@
+import PageHeader from '@/components/PageHeader';
+import { Dayjs } from 'dayjs'
+import { useEffect, useState, useMemo } from 'react';
+import { Card, Box, DatePicker2, Button, Select, Icon, Message, Loading } from '@alifd/next';
+import { EventData } from '@/services/event';
+import eventService from '@/services/event';
+import k8sService from '@/services/k8s';
+import { NodeInfo, PodInfo } from '@/services/k8s';
+import { getErrorMessage } from '@/utils';
+import EventList from './components/EventList';
+import styles from './index.module.css'
+import { useRequest } from '@ice/plugin-request/hooks';
+
+export default function Events() {
+ const [eventData, setEventData] = useState
+
+
+
+ Time Range
+ setTimeRange(v)} />
+
+
+ Event Type
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/webui/src/pages/monitoring/flow/components/FlowGraph/index.tsx b/webui/src/pages/monitoring/flow/components/FlowGraph/index.tsx
new file mode 100644
index 00000000..36a5a6f3
--- /dev/null
+++ b/webui/src/pages/monitoring/flow/components/FlowGraph/index.tsx
@@ -0,0 +1,174 @@
+import { useRef, useEffect } from "react"
+import { Graph } from "@antv/g6"
+import { Layout } from "@antv/g6"
+
+interface GraphData {
+ combos: string[],
+ nodes: any[],
+ edges: any[]
+ clusterCount: number,
+}
+
+interface FlowGraphProps {
+ data: any
+}
+
+const removeDuplicateEdge = (edges: any[]): any[] => {
+ const result: any[] = [];
+ const map: any = {};
+ edges.forEach((edge: any) => {
+ const key = `${edge.source}-${edge.target}`
+ const reverseKey = `${edge.target}-${edge.source}`
+ if (!map[key] && !map[reverseKey]) {
+ result.push(edge)
+ map[key] = true
+ }
+ });
+ return result;
+}
+
+const getComboName = (n: any): string => {
+ switch (n.type) {
+ case 'pod':
+ return n.namespace
+ case 'node':
+ return '
+ `Total：${total}`}
+ style={{ marginTop: 16, textAlign: 'right' }}
+ onChange={onPageChange}
+ />
+
+ );
+};
+
+export default FlowTable;
diff --git a/webui/src/pages/monitoring/flow/index.module.css b/webui/src/pages/monitoring/flow/index.module.css
new file mode 100644
index 00000000..bc4840c1
--- /dev/null
+++ b/webui/src/pages/monitoring/flow/index.module.css
@@ -0,0 +1,10 @@
+
+.contentBox {
+ margin-bottom: 10px;
+}
+
+.optionLabel {
+ display: flex;
+ align-items: center;
+ margin-right: 10px;
+}
diff --git a/webui/src/pages/monitoring/flow/index.tsx b/webui/src/pages/monitoring/flow/index.tsx
new file mode 100644
index 00000000..aa345384
--- /dev/null
+++ b/webui/src/pages/monitoring/flow/index.tsx
@@ -0,0 +1,151 @@
+import PageHeader from '@/components/PageHeader';
+import FlowGraph from './components/FlowGraph'
+import FlowTable from './components/FlowTable'
+import { useEffect, useMemo, useState } from 'react';
+import { Card, Select, Radio, Switch, Box, Message, Button, Icon, Loading, DatePicker2 } from '@alifd/next';
+import styles from './index.module.css';
+import flowService, { FlowData } from '@/services/flow'
+import { getErrorMessage } from '@/utils';
+import { Dayjs } from 'dayjs';
+import * as dayjs from 'dayjs';
+
+const getNamespaces = (data: any) => {
+ return data.nodes.map((node: any) => {
+ return node.namespace || 'default'
+ }).filter((item, index, arr) => {
+ return arr.indexOf(item) === index
+ })
+}
+
+const filterFlowData = (data: FlowData, namespaces: string[], nodes: string[], showExternal: boolean) => {
+ const filteredNode = data.nodes.filter((node: any) => {
+ return !namespaces || node.type != 'pod' || namespaces.includes(node.namespace)
+ })
+ .filter((node: any) => {
+ return !node.length || node.type == 'external' || nodes.includes(node.nodeName)
+ })
+ .filter((node: any) => {
+ return showExternal || node.type !== 'external'
+ });
+
+ const nodeMap = {};
+ filteredNode.forEach(i => {
+ nodeMap[i.id] = true
+ });
+
+ const filteredEdge = data.edges.filter((edge: any) => {
+ return nodeMap[edge.src] && nodeMap[edge.dst]
+ });
+
+ filteredNode.sort((a, b) => {
+ return a.id.localeCompare(b.id)
+ })
+
+ filteredEdge.sort((a, b) => {
+ return a.id.localeCompare(b.id)
+ })
+
+ return {
+ nodes: filteredNode,
+ edges: filteredEdge,
+ }
+}
+
+export default function FlowDashboard() {
+ const [data, setData] = useState({ nodes: [], edges: [] });
+ const [selectedNamespaces, setSelectedNamespaces] = useState
+
+
+
+ Time
+ setTime(v)} />
+
+
+ Namespaces
+
+
+
+ Show External Endpoints
+
+ Graph
+ Table
+
+
+
+
+
+
+ {viewMode === 'graph' &&
+
+
+
+ );
+}
diff --git a/webui/src/pages/pingmesh/index.tsx b/webui/src/pages/pingmesh/index.tsx
new file mode 100644
index 00000000..50e10734
--- /dev/null
+++ b/webui/src/pages/pingmesh/index.tsx
@@ -0,0 +1,36 @@
+import {Card, Message} from "@alifd/next"
+import PageHeader from "@/components/PageHeader"
+import {useState} from "react";
+import PingForm from "@/pages/pingmesh/pingForm";
+import PingGraph from "@/pages/pingmesh/pingGraph";
+import pingMeshService from "@/services/pingmesh";
+import {getErrorMessage} from "@/utils";
+
+export default function Capture() {
+ const [latency, setLatency] = useState()
+
+ return (
+
+
+
+ {
+ pingMeshService.pingMeshLatency(values).then(res => {
+ setLatency(res)
+ }).catch(err => {
+ Message.error(`error get ping mesh result：${getErrorMessage(err)}`)
+ })
+ }}/>
+
+
+
+
+ {latency && }
+
+
+
+ )
+}
diff --git a/webui/src/pages/pingmesh/pingForm/index.module.css b/webui/src/pages/pingmesh/pingForm/index.module.css
new file mode 100644
index 00000000..d65d270c
--- /dev/null
+++ b/webui/src/pages/pingmesh/pingForm/index.module.css
@@ -0,0 +1,8 @@
+.btn {
+ margin-left: 5px;
+}
+.custom {
+ border: 1px dashed;
+ padding: 4px;
+ display: inline-block;
+}
diff --git a/webui/src/pages/pingmesh/pingForm/index.tsx b/webui/src/pages/pingmesh/pingForm/index.tsx
new file mode 100644
index 00000000..029a8cd1
--- /dev/null
+++ b/webui/src/pages/pingmesh/pingForm/index.tsx
@@ -0,0 +1,72 @@
+import { Form, Button, Message } from '@alifd/next';
+import { useState } from "react";
+import styles from "./index.module.css"
+import SelectorDialog from "./selectorDialog.tsx"
+import { PingMeshArgs } from "@/services/pingmesh";
+
+interface PingFormProps {
+ onSubmit: (data: PingMeshArgs) => void;
+}
+
+const PingForm: React.FunctionComponent
+
+ )
+}
+
+export default PingGraph;
diff --git a/webui/src/services/capture.ts b/webui/src/services/capture.ts
new file mode 100644
index 00000000..7d8a3ca5
--- /dev/null
+++ b/webui/src/services/capture.ts
@@ -0,0 +1,32 @@
+import { request } from 'ice'
+
+export interface CaptureTask {
+ task_type: string
+ name: string
+ namespace: string
+}
+
+export interface CaptureResult {
+ task_id: number,
+ spec: CaptureTask,
+ status: string,
+ result: string,
+ message: string
+}
+
+export default {
+ async createCapture(task: CaptureTask): Promise
+ {
+ node.fx = node.x;
+ node.fy = node.y;
+ }}
+ nodeLabel={(node) => node.name}
+ nodeCanvasObjectMode={() => 'after'}
+ nodeCanvasObject={(node, ctx, globalScale) => {
+ const label = node.name;
+ const fontSize = 12 / globalScale;
+ ctx.font = `${fontSize}px Sans-Serif`;
+ ctx.textAlign = 'center';
+ ctx.textBaseline = 'middle';
+ ctx.fillStyle = 'black'; //node.color;
+ ctx.fillText(label, node.x, node.y + 6);
+ }}
+ linkCanvasObjectMode={() => 'after'}
+ linkLabel={(link) => `${link.source.name}->${link.target.name} max/avg/min ${link.latency_max}/${link.latency_avg}/${link.latency_min} ms`}
+ linkColor={(link) => {
+ return link.latency_avg > 1 ? (link.latency_avg > 100 ? 'red' : 'orange') : 'green'
+ }}
+ linkCanvasObject={(link, ctx) => {
+ const MAX_FONT_SIZE = 4;
+ const LABEL_NODE_MARGIN = 6 * 1.5;
+ const start = link.source;
+ const end = link.target;
+ // ignore unbound links
+ if (typeof start !== 'object' || typeof end !== 'object') return;
+ // calculate label positioning
+ function getQuadraticXY(t, sx, sy, cp1x, cp1y, ex, ey) {
+ return {
+ x: (1 - t) * (1 - t) * sx + 2 * (1 - t) * t * cp1x + t * t * ex,
+ y: (1 - t) * (1 - t) * sy + 2 * (1 - t) * t * cp1y + t * t * ey,
+ };
+ }
+ let textPos = Object.assign({},...['x', 'y'].map(c => ({
+ [c]: start[c] + (end[c] - start[c]) / 2 // calc middle point
+ })));
+ if (+link.curvature > 0) {
+ textPos = getQuadraticXY(
+ 0.5,
+ start.x,
+ start.y,
+ link.__controlPoints[0],
+ link.__controlPoints[1],
+ end.x,
+ end.y
+ );
+ }
+
+ const relLink = { x: end.x - start.x, y: end.y - start.y };
+ const maxTextLength = Math.sqrt(Math.pow(relLink.x, 2) + Math.pow(relLink.y, 2)) - LABEL_NODE_MARGIN * 2;
+ let textAngle = Math.atan2(relLink.y, relLink.x);
+ // maintain label vertical orientation for legibility
+ if (textAngle > Math.PI / 2) textAngle = -(Math.PI - textAngle);
+ if (textAngle < -Math.PI / 2) textAngle = -(-Math.PI - textAngle);
+ const label = `${link.latency_avg}ms`;
+ // estimate fontSize to fit in link length
+ ctx.font = '1px Sans-Serif';
+ const fontSize = Math.min(MAX_FONT_SIZE, maxTextLength / ctx.measureText(label).width);
+ ctx.font = `${fontSize}px Sans-Serif`;
+ const textWidth = ctx.measureText(label).width;
+ const bckgDimensions = [textWidth, fontSize].map(n => n + fontSize * 0.2); // some padding
+ // draw text label (with background rect)
+ ctx.save();
+ ctx.translate(textPos.x, textPos.y);
+ ctx.rotate(textAngle);
+ ctx.fillStyle = 'rgba(255, 255, 255, 0.8)';
+ ctx.fillRect(- bckgDimensions[0] / 2, - bckgDimensions[1] / 2, ...bckgDimensions);
+ ctx.textAlign = 'center';
+ ctx.textBaseline = 'middle';
+ ctx.fillStyle = 'darkgrey';
+ ctx.setLineDash([5, 5]);
+ ctx.fillText(label, 0, 0);
+ ctx.restore();
+ }}
+ />
+
+
+
+ --- latency > 100ms or failed
+ --- 1ms < latency < 100ms
+ --- latency < 1ms
+