Use record created for container_network metrics

This commit updates the container_network pod metrics
to use the newly introduced recording rules in the
CMO repository.
Ref: openshift/cluster-monitoring-operator#2314

frontend/packages/console-shared/src/promql/resource-metrics.ts

@@ -21,10 +21,10 @@ const podMetricsQueries = {
     "pod:container_fs_usage_bytes:sum{pod='<%= name %>'}",
   ),
   [ResourceUtilizationQuery.NETWORK_IN]: _.template(
-    "(sum(irate(container_network_receive_bytes_total{pod='<%= name %>'}[5m])) by (pod, interface)) + on(pod,interface) group_left(network_name) (pod_network_name_info)",
+    "pod_interface_network:container_network_receive_bytes:irate5m{pod='<%= name %>'}",
   ),
   [ResourceUtilizationQuery.NETWORK_OUT]: _.template(
-    "(sum(irate(container_network_transmit_bytes_total{pod='<%= name %>'}[5m])) by (pod, interface)) + on(pod,interface) group_left(network_name) (pod_network_name_info)",
+    "pod_interface_network:container_network_transmit_bytes_total:irate5m{pod='<%= name %>'}",
   ),
   [ResourceUtilizationQuery.QUOTA_LIMIT]: _.template(
     "sum by (pod, resource) (kube_pod_resource_limit{resource='<%= resource %>',pod='<%= name %>'})",

frontend/public/components/pod.tsx

@@ -684,7 +684,7 @@ const PodMetrics: React.FC<PodMetricsProps> = ({ obj }) => {
                 ariaChartLinkLabel={t('public~View in query browser')}
                 humanize={humanizeDecimalBytesPerSec}
                 namespace={obj.metadata.namespace}
-                query={`(sum(irate(container_network_receive_bytes_total{pod='${obj.metadata.name}', namespace='${obj.metadata.namespace}'}[5m])) by (pod, namespace, interface)) + on(namespace,pod,interface) group_left(network_name) (pod_network_name_info)`}
+                query={`pod_interface_network:container_network_receive_bytes:irate5m{pod='${obj.metadata.name}', namespace='${obj.metadata.namespace}'}`}
                 description={getNetworkName}
               />
             </CardBody>
@@ -700,7 +700,7 @@ const PodMetrics: React.FC<PodMetricsProps> = ({ obj }) => {
                 ariaChartLinkLabel={t('public~View in query browser')}
                 humanize={humanizeDecimalBytesPerSec}
                 namespace={obj.metadata.namespace}
-                query={`(sum(irate(container_network_transmit_bytes_total{pod='${obj.metadata.name}', namespace='${obj.metadata.namespace}'}[5m])) by (pod, namespace, interface)) + on(namespace,pod,interface) group_left(network_name) (pod_network_name_info)`}
+                query={`pod_interface_network:container_network_transmit_bytes_total:irate5m{pod='${obj.metadata.name}', namespace='${obj.metadata.namespace}'}`}
                 description={getNetworkName}
               />
             </CardBody>