Skip to content

Commit eb32b0a

Browse files
authoredJun 14, 2025
Merge pull request #74 from oslabs-beta/dev
Dev
2 parents a8b8211 + 65ae4bf commit eb32b0a

File tree

7 files changed

+59
-11
lines changed

7 files changed

+59
-11
lines changed
 

‎client/src/components/Bytes.tsx

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ import {
2626
SelectValue,
2727
} from '@/components/ui/select';
2828
import { useFetchMetrics } from '../hooks/hookMetric';
29+
import { useCluster } from '@/contexts/ClusterContext';
2930

3031
// Add proper type definitions
3132
interface Point {
@@ -73,23 +74,28 @@ const chartConfig: ChartConfig = {
7374
const Bytes: React.FC = () => {
7475
const [range, setRange] = React.useState<Range>('1d');
7576
const now = React.useMemo(() => new Date(), []);
77+
const { selectedCluster } = useCluster();
7678

77-
// Fetch metrics
79+
// Fetch metrics with cluster filtering
7880
const { data: readData, loading: readLoading } = useFetchMetrics(
7981
'compute.googleapis.com/instance/disk/read_bytes_count',
8082
rangeToMinutes[range],
83+
selectedCluster,
8184
);
8285
const { data: writeData, loading: writeLoading } = useFetchMetrics(
8386
'compute.googleapis.com/instance/disk/write_bytes_count',
8487
rangeToMinutes[range],
88+
selectedCluster,
8589
);
8690
const { data: receivedData, loading: receivedLoading } = useFetchMetrics(
8791
'compute.googleapis.com/instance/network/received_bytes_count',
8892
rangeToMinutes[range],
93+
selectedCluster,
8994
);
9095
const { data: sentData, loading: sentLoading } = useFetchMetrics(
9196
'compute.googleapis.com/instance/network/sent_bytes_count',
9297
rangeToMinutes[range],
98+
selectedCluster,
9399
);
94100

95101
// Combine and transform data

‎client/src/components/EnhancedInfoCard.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,10 +55,12 @@ const GKEClusterCard: React.FC = () => {
5555
const { data: cpuData, loading: cpuLoading } = useFetchMetrics(
5656
cpuMetric,
5757
duration,
58+
cluster,
5859
);
5960
const { data: memData, loading: memLoading } = useFetchMetrics(
6061
memMetric,
6162
duration,
63+
cluster,
6264
);
6365

6466
const [cpu, setCpu] = useState('...');

‎client/src/components/EnhancedRecentUsage.tsx

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
1414
import { ChartConfig, ChartContainer } from '@/components/ui/chart';
1515
import { useFetchMetrics } from '../hooks/hookMetric';
1616
import { motion } from 'motion/react';
17+
import { useCluster } from '@/contexts/ClusterContext';
1718

1819
const metricConfigs = [
1920
{
@@ -222,11 +223,14 @@ const EnhancedOriginalMetricCard = ({
222223
};
223224

224225
const ResourceUsageRadialCharts: React.FC = () => {
226+
const { selectedCluster } = useCluster();
227+
225228
// Fetch metrics using the custom hook for each metric (24 hours = 1440 minutes)
226-
const cpuMetrics = useFetchMetrics(metricConfigs[0].metricType, 1440);
227-
const memoryMetrics = useFetchMetrics(metricConfigs[1].metricType, 1440);
228-
const requestMetrics = useFetchMetrics(metricConfigs[2].metricType, 1440);
229-
const limitMetrics = useFetchMetrics(metricConfigs[3].metricType, 1440);
229+
// Now passing the selected cluster to make metrics cluster-specific
230+
const cpuMetrics = useFetchMetrics(metricConfigs[0].metricType, 1440, selectedCluster);
231+
const memoryMetrics = useFetchMetrics(metricConfigs[1].metricType, 1440, selectedCluster);
232+
const requestMetrics = useFetchMetrics(metricConfigs[2].metricType, 1440, selectedCluster);
233+
const limitMetrics = useFetchMetrics(metricConfigs[3].metricType, 1440, selectedCluster);
230234

231235
// Process metrics data
232236
const metricsData = metricConfigs.map((config, index) => {

‎client/src/components/Utilization.tsx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import {
2121
SelectValue,
2222
} from '@/components/ui/select';
2323
import { useFetchMetrics } from '../hooks/hookMetric';
24+
import { useCluster } from '@/contexts/ClusterContext';
2425

2526
type Range = '1d' | '7d' | '14d';
2627

@@ -44,16 +45,19 @@ const chartConfig: ChartConfig = {
4445
const CpuMemoryUtilization: React.FC = () => {
4546
const [range, setRange] = React.useState<Range>('1d');
4647
const now = React.useMemo(() => new Date(), []);
48+
const { selectedCluster } = useCluster();
4749

48-
// Fetch both metrics
50+
// Fetch both metrics with cluster filtering
4951
const { data: memoryData, loading: memoryLoading } = useFetchMetrics(
5052
'kubernetes.io/container/memory/limit_utilization',
5153
rangeToMinutes[range],
54+
selectedCluster,
5255
);
5356
const { data: utilizationData, loading: utilizationLoading } =
5457
useFetchMetrics(
5558
'compute.googleapis.com/instance/cpu/utilization',
5659
rangeToMinutes[range],
60+
selectedCluster,
5761
);
5862

5963
// Combine and transform data

‎client/src/hooks/hookMetric.tsx

Lines changed: 20 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,16 @@ export interface TimeSeries {
1818
points?: MetricPoint[];
1919
}
2020

21-
export const useFetchMetrics = (metricType: string, duration: number) => {
21+
interface ClusterInfo {
22+
name: string;
23+
location: string;
24+
}
25+
26+
export const useFetchMetrics = (
27+
metricType: string,
28+
duration: number,
29+
cluster?: ClusterInfo | null
30+
) => {
2231
const [data, setData] = useState<TimeSeries[]>([]);
2332
const [loading, setLoading] = useState(false);
2433
const [error, setError] = useState<string | null>(null);
@@ -28,8 +37,16 @@ export const useFetchMetrics = (metricType: string, duration: number) => {
2837
setLoading(true);
2938
try {
3039
const baseUrl = import.meta.env.VITE_API_URL || '';
40+
const params: any = { metricType, duration };
41+
42+
// Add cluster parameters if cluster is provided
43+
if (cluster) {
44+
params.clusterName = cluster.name;
45+
params.clusterLocation = cluster.location;
46+
}
47+
3148
const res = await axios.get<TimeSeries[]>(`${baseUrl}/api/metrics`, {
32-
params: { metricType, duration },
49+
params,
3350
});
3451
setData(res.data);
3552
} catch (err) {
@@ -40,7 +57,7 @@ export const useFetchMetrics = (metricType: string, duration: number) => {
4057
};
4158

4259
if (metricType) fetchData();
43-
}, [metricType, duration]);
60+
}, [metricType, duration, cluster?.name, cluster?.location]);
4461

4562
return { data, loading, error };
4663
};

‎server/src/routes/index.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,12 +15,14 @@ const router = express.Router();
1515
// * ATTACH EACH SUB-ROUTER UNDER ITS OWN PATH
1616
// ------------------------------------------------------------------------------------------------
1717
router.get('/metrics', async (req, res) => {
18-
const { metricType, duration } = req.query;
18+
const { metricType, duration, clusterName, clusterLocation } = req.query;
1919

2020
try {
2121
const timeSeries = await fetchGCPMetric({
2222
metricType: String(metricType),
2323
duration: duration ? Number(duration) : 5,
24+
clusterName: clusterName ? String(clusterName) : undefined,
25+
clusterLocation: clusterLocation ? String(clusterLocation) : undefined,
2426
});
2527

2628
res.json(timeSeries);

‎server/src/utils/metricService.ts

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ import type { TimeSeries, Point, Metric, Resource } from '../types/metricTypes';
88
type FetchMetricOptions = {
99
metricType: string;
1010
duration?: number;
11+
clusterName?: string;
12+
clusterLocation?: string;
1113
};
1214

1315
// Create Monitoring client instance
@@ -16,17 +18,28 @@ const client = new Monitoring.MetricServiceClient();
1618
const fetchGCPMetric = async ({
1719
metricType, // ('container.googleapis.com/container/cpu/utilization')
1820
duration = 5,
21+
clusterName,
22+
clusterLocation,
1923
}: FetchMetricOptions): Promise<TimeSeries[]> => {
2024
try {
2125
const projectId = await client.getProjectId();
2226

2327
const endTimeSeconds = Math.floor(Date.now() / 1000);
2428
const startTimeSeconds = endTimeSeconds - duration * 60;
2529

30+
// Build filter with optional cluster filtering
31+
let filter = `metric.type="${metricType}"`;
32+
33+
// Add cluster filtering if cluster information is provided
34+
if (clusterName && clusterLocation) {
35+
filter += ` AND resource.labels.cluster_name="${clusterName}"`;
36+
filter += ` AND resource.labels.location="${clusterLocation}"`;
37+
}
38+
2639
// Write time series data
2740
const [timeSeries] = await client.listTimeSeries({
2841
name: client.projectPath(projectId),
29-
filter: `metric.type="${metricType}"`, // Filter by metric types
42+
filter, // Filter by metric types and optionally by cluster
3043
interval: {
3144
startTime: { seconds: startTimeSeconds },
3245
endTime: { seconds: endTimeSeconds },

0 commit comments

Comments
 (0)