feat(dashboard): adding a dedicated dashboard

Signed-off-by: kairav mittal <kairavmittal@gmail.com>

Author: aclfe

build/charts/antrea-ui/templates/clusterrole.yaml

@@ -18,6 +18,13 @@ rules:
     verbs:
       - list
       - get
+  - apiGroups:
+      - stats.antrea.io
+    resources:
+      - nodelatencystats
+    verbs:
+      - list
+      - get
   - apiGroups:
       - crd.antrea.io
     resources:

client/web/antrea-ui/src/api/nodelatency.tsx

@@ -0,0 +1,48 @@
+/**
+ * Copyright 2026 Antrea 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 api from './axios';
+import { handleError } from './common';
+
+export interface TargetIPLatencyStats {
+    targetIP: string
+    lastSendTime?: string
+    lastRecvTime?: string
+    lastMeasuredRTTNanoseconds?: number
+}
+
+export interface PeerNodeLatencyStats {
+    nodeName: string
+    targetIPLatencyStats?: TargetIPLatencyStats[]
+}
+
+export interface NodeLatencyStats {
+    metadata: {
+        name: string
+    }
+    peerNodeLatencyStats?: PeerNodeLatencyStats[]
+}
+
+export const nodeLatencyStatsAPI = {
+    fetchAll: async (): Promise<NodeLatencyStats[]> => {
+        return api.get<{ items: NodeLatencyStats[] }>(
+            `k8s/apis/stats.antrea.io/v1alpha1/nodelatencystats`,
+        ).then((response) => response.data.items).catch((error) => {
+            console.error("Unable to fetch Node Latency Stats");
+            handleError(error);
+        });
+    },
+};

client/web/antrea-ui/src/components/nav.tsx

@@ -24,13 +24,15 @@ import {
     dashboardIcon, dashboardIconName,
     bugIcon, bugIconName,
     eyeIcon, eyeIconName,
+    nodesIcon, nodesIconName,
  } from '@cds/core/icon';
 
 ClarityIcons.addIcons(
     cogIcon,
     dashboardIcon,
     bugIcon,
     eyeIcon,
+    nodesIcon,
 );
 
 export default function NavTab() {
@@ -57,6 +59,12 @@ export default function NavTab() {
                     Flow Visibility
                 </Link>
             </CdsNavigationItem>
+            <CdsNavigationItem>
+                <Link to="/nodelatency">
+                    <CdsIcon shape={nodesIconName} solid size="sm"></CdsIcon>
+                    Node Latency
+                </Link>
+            </CdsNavigationItem>
             <CdsNavigationItem>
                 <Link to="/settings">
                     <CdsIcon shape={cogIconName} solid size="sm"></CdsIcon>

client/web/antrea-ui/src/components/nodelatency-detail.tsx

@@ -0,0 +1,144 @@
+/**
+ * Copyright 2026 Antrea 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 { CdsCard } from '@cds/react/card';
+import { CdsButton } from '@cds/react/button';
+import { CdsDivider } from '@cds/react/divider';
+import { NodeLink, NodeLatencyModel, nodeLinksFor } from '../routes/nodelatency-util';
+
+function fmtRtt(link: NodeLink): string {
+    return link.down || link.rttMs === undefined ? 'N/A' : link.rttMs.toFixed(3);
+}
+
+function latestRecv(link: NodeLink): string {
+    const times = link.targets.map(t => t.lastRecvTime).filter((t): t is string => !!t).sort();
+    const t = times.length ? times[times.length - 1] : undefined;
+    return t ? new Date(t).toLocaleString() : 'None';
+}
+
+function targetIPs(link: NodeLink): string {
+    return link.targets.map(t => t.targetIP).join(', ') || 'None';
+}
+
+function LinkTable(props: { title: string, peerHeader: string, links: NodeLink[], peerOf: (l: NodeLink) => string }) {
+    return (
+        <div cds-layout="vertical gap:sm">
+            <div cds-text="section">{props.title}</div>
+            {props.links.length === 0 ? (
+                <p cds-text="secondary">No {props.title.toLowerCase()}.</p>
+            ) : (
+                <table cds-table="border:all" cds-text="center body">
+                    <thead>
+                        <tr>
+                            <th>{props.peerHeader}</th>
+                            <th>Status</th>
+                            <th>Latency (ms)</th>
+                            <th>Target IP</th>
+                            <th>Last Recv</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {props.links.map((link, idx) => (
+                            <tr key={idx}>
+                                <td>{props.peerOf(link)}</td>
+                                <td style={link.down ? { color: '#e12200' } : undefined}>{link.down ? 'Down' : 'Up'}</td>
+                                <td>{fmtRtt(link)}</td>
+                                <td>{targetIPs(link)}</td>
+                                <td>{latestRecv(link)}</td>
+                            </tr>
+                        ))}
+                    </tbody>
+                </table>
+            )}
+        </div>
+    );
+}
+
+export function NodeDetailPanel(props: { model: NodeLatencyModel, node: string, onClose: () => void }) {
+    const { egress, ingress } = nodeLinksFor(props.model.links, props.node);
+    const health = props.model.health.get(props.node);
+
+    return (
+        <CdsCard>
+            <div cds-layout="vertical gap:md">
+                <div cds-layout="horizontal align:vertical-center gap:md">
+                    <div cds-text="section" cds-layout="align:left">Node: {props.node}</div>
+                    <CdsButton type="button" action="outline" size="sm" onClick={props.onClose}>Clear</CdsButton>
+                </div>
+                {health && (
+                    <p cds-text="secondary">
+                        Egress: {health.egressTotal - health.egressDown}/{health.egressTotal} up
+                        {' '}&middot;{' '}
+                        Ingress: {health.ingressTotal - health.ingressDown}/{health.ingressTotal} up
+                    </p>
+                )}
+                <CdsDivider cds-card-remove-margin></CdsDivider>
+                <LinkTable
+                    title="Egress Links"
+                    peerHeader="Target Node"
+                    links={egress}
+                    peerOf={l => l.targetNode}
+                />
+                <LinkTable
+                    title="Ingress Links"
+                    peerHeader="Source Node"
+                    links={ingress}
+                    peerOf={l => l.sourceNode}
+                />
+            </div>
+        </CdsCard>
+    );
+}
+
+export function ProblemNodesPanel(props: { model: NodeLatencyModel, onSelect: (node: string) => void }) {
+    const problems = props.model.problemNodes;
+    if (problems.length === 0) return null;
+
+    return (
+        <CdsCard>
+            <div cds-layout="vertical gap:md">
+                <div cds-text="section" style={{ color: '#e12200' }}>
+                    Problem Nodes ({problems.length})
+                </div>
+                <CdsDivider cds-card-remove-margin></CdsDivider>
+                <table cds-table="border:all" cds-text="center body">
+                    <thead>
+                        <tr>
+                            <th>Node</th>
+                            <th>Egress Down</th>
+                            <th>Ingress Down</th>
+                            <th></th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {problems.map(h => (
+                            <tr key={h.node}>
+                                <td>{h.node}</td>
+                                <td>{h.egressDown}/{h.egressTotal}</td>
+                                <td>{h.ingressDown}/{h.ingressTotal}</td>
+                                <td>
+                                    <CdsButton type="button" action="flat" size="sm" onClick={() => props.onSelect(h.node)}>
+                                        Inspect
+                                    </CdsButton>
+                                </td>
+                            </tr>
+                        ))}
+                    </tbody>
+                </table>
+            </div>
+        </CdsCard>
+    );
+}

client/web/antrea-ui/src/components/nodelatency-stats.tsx

@@ -0,0 +1,54 @@
+/**
+ * Copyright 2026 Antrea 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 { CdsCard } from '@cds/react/card';
+import { CdsDivider } from '@cds/react/divider';
+import { AggregatedStats } from '../routes/nodelatency-util';
+
+function fmt(v: number): string {
+    return isNaN(v) ? 'N/A' : v.toFixed(2);
+}
+
+export default function NodeLatencyStatsSummary(props: { agg: AggregatedStats }) {
+    const a = props.agg;
+    const items: { label: string, value: string, alert?: boolean }[] = [
+        { label: 'Nodes', value: a.nodeCount.toString() },
+        { label: 'Measured Links', value: a.measuredCount.toString() },
+        { label: 'Down Links', value: a.downCount.toString(), alert: a.downCount > 0 },
+        { label: 'Mean (ms)', value: fmt(a.meanMs) },
+        { label: 'Median (ms)', value: fmt(a.medianMs) },
+        { label: 'P90 (ms)', value: fmt(a.p90Ms) },
+        { label: 'Max (ms)', value: fmt(a.maxMs) },
+    ];
+    return (
+        <CdsCard>
+            <div cds-layout="vertical gap:md">
+                <div cds-text="section" cds-layout="p-y:sm">Summary</div>
+                <CdsDivider cds-card-remove-margin></CdsDivider>
+                <div cds-layout="horizontal gap:xl wrap:wrap p-y:sm">
+                    {items.map(item => (
+                        <div key={item.label} cds-layout="vertical gap:xs">
+                            <div cds-text="caption" style={{ opacity: 0.7 }}>{item.label}</div>
+                            <div cds-text="heading" style={item.alert ? { color: '#e12200' } : undefined}>
+                                {item.value}
+                            </div>
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </CdsCard>
+    );
+}

client/web/antrea-ui/src/index.tsx

@@ -24,6 +24,7 @@ import Summary from './routes/summary';
 import Traceflow from './routes/traceflow';
 import TraceflowResult from './routes/traceflowresult';
 import FlowVisibility from './routes/flowvisibility';
+import NodeLatency from './routes/nodelatency';
 import Settings from './routes/settings';
 import reportWebVitals from './reportWebVitals';
 
@@ -55,6 +56,10 @@ const router = createBrowserRouter([
                 path: "flows",
                 element: <FlowVisibility />,
             },
+            {
+                path: "nodelatency",
+                element: <NodeLatency />,
+            },
             {
                 path: "settings",
                 element: <Settings />,