soo-rnd
/
infra-report
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add Istio card to SummaryCards
CI/CD / build-and-push (push) Successful in 1m29s Details

This commit is contained in:
Cloud User 2026-03-16 13:24:53 +09:00
parent 82635e0335
commit a76af584cb
2 changed files with 17 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/app/page.tsx
View File

@ -121,6 +121,7 @@ export default function Home() {
memory={data.metrics.memory}
disk={data.metrics.disk}
ingress={data.metrics.ingress}
istio={data.metrics.istio}
/>
</ErrorBoundary>

22
src/components/report/SummaryCards.tsx
View File

@ -8,6 +8,7 @@ interface SummaryCardsProps {
memory: MetricInstance[];
disk: MetricInstance[];
ingress: NetworkMetrics;
istio: NetworkMetrics;
}
interface CardData {
@ -26,13 +27,15 @@ function getClusterStats(instances: MetricInstance[]): { avg: number; max: numbe
return { avg, max, min };
}
export default function SummaryCards({ cpu, memory, disk, ingress }: SummaryCardsProps) {
export default function SummaryCards({ cpu, memory, disk, ingress, istio }: SummaryCardsProps) {
const cpuStats = getClusterStats(cpu);
const memStats = getClusterStats(memory);
const diskStats = getClusterStats(disk);
const netRxAvg = ingress.receive.reduce((sum, i) => sum + i.stats.avg, 0);
const netTxAvg = ingress.transmit.reduce((sum, i) => sum + i.stats.avg, 0);
const ingressRxAvg = ingress.receive.reduce((sum, i) => sum + i.stats.avg, 0);
const ingressTxAvg = ingress.transmit.reduce((sum, i) => sum + i.stats.avg, 0);
const istioRxAvg = istio.receive.reduce((sum, i) => sum + i.stats.avg, 0);
const istioTxAvg = istio.transmit.reduce((sum, i) => sum + i.stats.avg, 0);
const cards: CardData[] = [
{
@ -58,15 +61,22 @@ export default function SummaryCards({ cpu, memory, disk, ingress }: SummaryCard
},
{
label: 'Ingress',
avg: `RX ${formatBytesPerSec(netRxAvg)}`,
max: `TX ${formatBytesPerSec(netTxAvg)}`,
avg: `RX ${formatBytesPerSec(ingressRxAvg)}`,
max: `TX ${formatBytesPerSec(ingressTxAvg)}`,
min: '',
color: 'border-blue-500',
},
{
label: 'Istio',
avg: `RX ${formatBytesPerSec(istioRxAvg)}`,
max: `TX ${formatBytesPerSec(istioTxAvg)}`,
min: '',
color: 'border-purple-500',
},
];
return (
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
<div className="grid grid-cols-2 lg:grid-cols-5 gap-4">
{cards.map((card) => (
<div key={card.label} className={`bg-white rounded-lg shadow p-4 border-l-4 ${card.color}`}>
<h3 className="text-sm font-medium text-gray-500">{card.label}</h3>