add resource limit fields to utilization queries and charts for applications

Author: rbjornstad

schema.graphql

@@ -6404,6 +6404,9 @@ type WorkloadUtilization {
   """Get the current usage for the requested resource type."""
   current(resourceType: UtilizationResourceType!): Float!
 
+  """Gets the limit of the resources for the requested resource type."""
+  limit(resourceType: UtilizationResourceType!): Float
+
   """
   Gets the requested amount of resources for the requested resource type.
   """

src/routes/team/[team]/[env]/app/[app]/utilization/+page.gql

@@ -17,6 +17,8 @@ query ResourceUtilizationForApp(
 					current_memory: current(resourceType: MEMORY)
 					requested_cpu: requested(resourceType: CPU)
 					requested_memory: requested(resourceType: MEMORY)
+					limit_cpu: limit(resourceType: CPU)
+					limit_memory: limit(resourceType: MEMORY)
 					cpu_series: series(input: { start: $start, end: $end, resourceType: CPU }) {
 						timestamp
 						value

src/routes/team/[team]/[env]/app/[app]/utilization/+page.svelte

@@ -23,7 +23,12 @@
 		readonly value: number;
 	}[];
 
-	function options(data: resourceUsage, request: number, color: string = '#000000'): EChartsOption {
+	function options(
+		data: resourceUsage,
+		request: number,
+		limit?: number,
+		color: string = '#000000'
+	): EChartsOption {
 		const dates = data?.map((d) => d.timestamp) || [];
 		return {
 			tooltip: {
@@ -54,12 +59,19 @@
 					data: data?.map((d) => d.value) || [],
 					color
 				},
+				{
+					name: 'Limit',
+					type: 'line',
+					data: data?.map(() => limit) || [],
+					showSymbol: false,
+					color: '#C30000'
+				},
 				{
 					name: 'Requested',
 					type: 'line',
 					data: data?.map(() => request) || [],
 					showSymbol: false,
-					color: '#C30000'
+					color: '#00C300'
 				}
 			],
 
@@ -177,6 +189,7 @@
 						return { timestamp: d.timestamp, value: d.value / 1024 / 1024 / 1024 };
 					}),
 					utilization.requested_memory / 1024 / 1024 / 1024,
+					utilization.limit_memory ? utilization.limit_memory / 1024 / 1024 / 1024 : undefined,
 					'rgb(145, 220, 117)'
 				)}
 				style="height: 400px"
@@ -186,7 +199,12 @@
 				<h3 style="margin-bottom: 0">CPU usage</h3>
 			</span>
 			<EChart
-				options={options(utilization.cpu_series, utilization.requested_cpu, 'rgb(131, 191, 246)')}
+				options={options(
+					utilization.cpu_series,
+					utilization.requested_cpu,
+					utilization.limit_cpu ? utilization.limit_cpu : undefined,
+					'rgb(131, 191, 246)'
+				)}
 				style="height: 400px"
 			/>
 		</Card>