From 917aef0ed88279de6066dcabbcea4786be977910 Mon Sep 17 00:00:00 2001 From: rahulkeswani101 Date: Mon, 26 Aug 2024 16:57:15 +0530 Subject: [PATCH 01/26] feat: added new tab for infra metrics in logs detailed page --- .../src/components/LogDetail/constants.ts | 1 + frontend/src/components/LogDetail/index.tsx | 14 + .../InfraMetrics/InfraMetrics.styles.scss | 19 + .../InfraMetrics/InfraMetrics.tsx | 116 +++ .../LogDetailedView/InfraMetrics/constants.ts | 766 ++++++++++++++++++ 5 files changed, 916 insertions(+) create mode 100644 frontend/src/container/LogDetailedView/InfraMetrics/InfraMetrics.styles.scss create mode 100644 frontend/src/container/LogDetailedView/InfraMetrics/InfraMetrics.tsx create mode 100644 frontend/src/container/LogDetailedView/InfraMetrics/constants.ts diff --git a/frontend/src/components/LogDetail/constants.ts b/frontend/src/components/LogDetail/constants.ts index 92199d4441..e68d0230a6 100644 --- a/frontend/src/components/LogDetail/constants.ts +++ b/frontend/src/components/LogDetail/constants.ts @@ -2,6 +2,7 @@ export const VIEW_TYPES = { OVERVIEW: 'OVERVIEW', JSON: 'JSON', CONTEXT: 'CONTEXT', + INFRAMETRICS: 'INFRAMETRICS', } as const; export type VIEWS = typeof VIEW_TYPES[keyof typeof VIEW_TYPES]; diff --git a/frontend/src/components/LogDetail/index.tsx b/frontend/src/components/LogDetail/index.tsx index b138718ed9..d8958d9702 100644 --- a/frontend/src/components/LogDetail/index.tsx +++ b/frontend/src/components/LogDetail/index.tsx @@ -9,6 +9,7 @@ import cx from 'classnames'; import { LogType } from 'components/Logs/LogStateIndicator/LogStateIndicator'; import { LOCALSTORAGE } from 'constants/localStorage'; import ContextView from 'container/LogDetailedView/ContextView/ContextView'; +import InfraMetrics from 'container/LogDetailedView/InfraMetrics/InfraMetrics'; import JSONView from 'container/LogDetailedView/JsonView'; import Overview from 'container/LogDetailedView/Overview'; import { @@ -22,6 +23,7 @@ import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder'; import { useIsDarkMode } from 'hooks/useDarkMode'; import { useNotifications } from 'hooks/useNotifications'; import { + Activity, Braces, Copy, Filter, @@ -192,6 +194,17 @@ function LogDetail({ Context + +
+ + InfraMetrics +
+ {selectedView === VIEW_TYPES.JSON && ( @@ -246,6 +259,7 @@ function LogDetail({ isEdit={isEdit} /> )} + {selectedView === VIEW_TYPES.INFRAMETRICS && } ); } diff --git a/frontend/src/container/LogDetailedView/InfraMetrics/InfraMetrics.styles.scss b/frontend/src/container/LogDetailedView/InfraMetrics/InfraMetrics.styles.scss new file mode 100644 index 0000000000..b6da129895 --- /dev/null +++ b/frontend/src/container/LogDetailedView/InfraMetrics/InfraMetrics.styles.scss @@ -0,0 +1,19 @@ +.infra-metrics-card { + margin: 1rem 0; + height: 400px; + padding: 10px; + + .ant-card-body { + padding: 0; + } + + .chart-container { + overflow: hidden; + width: 100%; + height: 100%; + } +} + +.no-data { + height: 100px; +} \ No newline at end of file diff --git a/frontend/src/container/LogDetailedView/InfraMetrics/InfraMetrics.tsx b/frontend/src/container/LogDetailedView/InfraMetrics/InfraMetrics.tsx new file mode 100644 index 0000000000..e58c715f38 --- /dev/null +++ b/frontend/src/container/LogDetailedView/InfraMetrics/InfraMetrics.tsx @@ -0,0 +1,116 @@ +import './InfraMetrics.styles.scss'; + +import { Card, Col, Row, Typography } from 'antd'; +import cx from 'classnames'; +import Spinner from 'components/Spinner'; +import Uplot from 'components/Uplot'; +import { ENTITY_VERSION_V4 } from 'constants/app'; +import { useIsDarkMode } from 'hooks/useDarkMode'; +import { useResizeObserver } from 'hooks/useDimensions'; +import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults'; +import getStartEndRangeTime from 'lib/getStartEndRangeTime'; +import { getUPlotChartOptions } from 'lib/uPlotLib/getUplotChartOptions'; +import { getUPlotChartData } from 'lib/uPlotLib/utils/getUplotChartData'; +import { useMemo, useRef } from 'react'; +import { useQueries, UseQueryResult } from 'react-query'; +import { SuccessResponse } from 'types/api'; +import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange'; + +import { JSONViewProps } from '../LogDetailedView.types'; +import { cardTitles, getQueryPayload } from './constants'; + +function InfraMetrics({ logData }: JSONViewProps): JSX.Element { + const { start, end } = getStartEndRangeTime({ + type: 'GLOBAL_TIME', + interval: '3h', + }); + const minTimeScale = (parseInt(start, 10) * 1e3) / 1000; + const maxTimeScale = (parseInt(end, 10) * 1e3) / 1000; + + const clusterName = + (logData.resources_string?.['k8s.cluster.name'] as + | string + | undefined)?.replace(/-/g, '_') ?? ''; + const podName = + (logData.resources_string?.['k8s.pod.name'] as string | undefined)?.replace( + /-/g, + '_', + ) ?? ''; + const queries = useQueries( + getQueryPayload(clusterName, podName).map((payload) => ({ + queryKey: ['metrics', payload, ENTITY_VERSION_V4], + queryFn: (): Promise> => + GetMetricQueryRange(payload, ENTITY_VERSION_V4), + })), + ); + console.log(queries); + + const isDarkMode = useIsDarkMode(); + const graphRef = useRef(null); + + const dimensions = useResizeObserver(graphRef); + + const chartData = useMemo( + () => queries.map(({ data }) => getUPlotChartData(data?.payload)), + [queries], + ); + + const options = useMemo( + () => + queries.map(({ data }) => + getUPlotChartOptions({ + apiResponse: data?.payload, + isDarkMode, + dimensions, + minTimeScale, + maxTimeScale, + softMax: null, + softMin: null, + }), + ), + [queries, isDarkMode, dimensions, minTimeScale, maxTimeScale], + ); + + const renderCardContent = ( + query: UseQueryResult, unknown>, + idx: number, + ): JSX.Element => { + if (query.isLoading) { + return ; + } + + if (query.error) { + const errorMessage = + (query.error as Error)?.message || 'Something went wrong'; + return
{errorMessage}
; + } + + return ( +
+ +
+ ); + }; + return ( +
+ + {queries.map((query, idx) => ( + + {cardTitles[idx]} + + {renderCardContent(query, idx)} + + + ))} + +
+ ); +} + +export default InfraMetrics; diff --git a/frontend/src/container/LogDetailedView/InfraMetrics/constants.ts b/frontend/src/container/LogDetailedView/InfraMetrics/constants.ts new file mode 100644 index 0000000000..7929e677e9 --- /dev/null +++ b/frontend/src/container/LogDetailedView/InfraMetrics/constants.ts @@ -0,0 +1,766 @@ +/* eslint-disable sonarjs/no-duplicate-string */ +import { PANEL_TYPES } from 'constants/queryBuilder'; +import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults'; +import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse'; +import { EQueryType } from 'types/common/dashboard'; +import { DataSource } from 'types/common/queryBuilder'; + +export const getQueryPayload = ( + clusterName: string, + podName: string, +): GetQueryResultsProps[] => [ + { + selectedTime: 'GLOBAL_TIME', + graphType: PANEL_TYPES.TIME_SERIES, + query: { + builder: { + queryData: [ + { + aggregateAttribute: { + dataType: DataTypes.Float64, + id: 'k8s_pod_cpu_utilization--float64----true', + isColumn: true, + key: 'k8s_pod_cpu_utilization', + type: '', + }, + aggregateOperator: 'avg', + dataSource: DataSource.METRICS, + disabled: false, + expression: 'A', + filters: { + items: [ + { + id: '9a0ffaf3', + key: { + dataType: DataTypes.String, + id: 'k8s_cluster_name--string--tag--false', + isColumn: false, + key: 'k8s_cluster_name', + type: 'tag', + }, + op: '=', + value: clusterName, + }, + // { + // id: '9a0ffaf3', + // key: { + // dataType: DataTypes.String, + // id: 'k8s_node_name--string--tag--false', + // isColumn: false, + // key: 'k8s_node_name', + // type: 'tag', + // }, + // op: 'in', + // value: ['{{.k8s_node_name}}'], + // }, + // { + // id: 'b5db2e8e', + // key: { + // dataType: DataTypes.String, + // id: 'k8s_namespace_name--string--tag--false', + // isColumn: false, + // key: 'k8s_namespace_name', + // type: 'tag', + // }, + // op: 'in', + // value: ['{{.k8s_namespace_name}}'], + // }, + ], + op: 'AND', + }, + groupBy: [ + { + dataType: DataTypes.String, + id: 'k8s_node_name--string--tag--false', + isColumn: false, + key: 'k8s_node_name', + type: 'tag', + }, + { + dataType: DataTypes.String, + id: 'k8s_namespace_name--string--tag--false', + isColumn: false, + key: 'k8s_namespace_name', + type: 'tag', + }, + { + dataType: DataTypes.String, + id: 'k8s_pod_name--string--tag--false', + isColumn: false, + key: 'k8s_pod_name', + type: 'tag', + }, + ], + having: [], + legend: '{{k8s_namespace_name}}-{{k8s_pod_name}}', + limit: null, + orderBy: [], + queryName: 'A', + reduceTo: 'sum', + spaceAggregation: 'sum', + stepInterval: 60, + timeAggregation: 'avg', + functions: [], + }, + ], + queryFormulas: [], + }, + clickhouse_sql: [ + { + disabled: false, + legend: '', + name: 'A', + query: '', + }, + ], + id: '3fe84db4-8f8b-44ba-b903-2daaab59c756', + promql: [ + { + disabled: false, + legend: '', + name: 'A', + query: '', + }, + ], + queryType: EQueryType.QUERY_BUILDER, + }, + globalSelectedInterval: '3h', + variables: { + k8s_node_name: [ + 'gke-saas-us-central1-c-default-pool-94d03205-nt9p', + 'gke-saas-us-central1-c-ingress-b17bf782-2js8', + 'gke-saas-us-central1-c-ingress-b17bf782-2lw7', + 'gke-saas-us-central1-c-ingress-b17bf782-42p7', + 'gke-saas-us-central1-c-ingress-b17bf782-4k7w', + 'gke-saas-us-central1-c-ingress-b17bf782-8626', + 'gke-saas-us-central1-c-ingress-b17bf782-9m4r', + 'gke-saas-us-central1-c-ingress-b17bf782-bcqm', + 'gke-saas-us-central1-c-ingress-b17bf782-c5pt', + 'gke-saas-us-central1-c-ingress-b17bf782-c8ph', + 'gke-saas-us-central1-c-ingress-b17bf782-ddp7', + 'gke-saas-us-central1-c-ingress-b17bf782-drpr', + 'gke-saas-us-central1-c-ingress-b17bf782-f2xh', + 'gke-saas-us-central1-c-ingress-b17bf782-fgvc', + 'gke-saas-us-central1-c-ingress-b17bf782-fpsn', + 'gke-saas-us-central1-c-ingress-b17bf782-gdpq', + 'gke-saas-us-central1-c-ingress-b17bf782-hgwk', + 'gke-saas-us-central1-c-ingress-b17bf782-hkqb', + 'gke-saas-us-central1-c-ingress-b17bf782-kllg', + 'gke-saas-us-central1-c-ingress-b17bf782-m8bc', + 'gke-saas-us-central1-c-ingress-b17bf782-mr26', + 'gke-saas-us-central1-c-ingress-b17bf782-qbn4', + 'gke-saas-us-central1-c-ingress-b17bf782-rqgw', + 'gke-saas-us-central1-c-ingress-b17bf782-sjh8', + 'gke-saas-us-central1-c-ingress-b17bf782-sq7t', + 'gke-saas-us-central1-c-ingress-b17bf782-w5qp', + 'gke-saas-us-central1-c-ingress-b17bf782-xh27', + 'gke-saas-us-central1-c-ingress-b17bf782-xktp', + 'gke-saas-us-central1-c-ingress-b17bf782-z7vc', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-476s', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-5p2l', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-5qx4', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-6gbh', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-bpgh', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-bqhs', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-cv7b', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-fqqd', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-gfmv', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-h6np', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-j5h2', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-jkkb', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-lsfg', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-m66c', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-m6pg', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-ptkm', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-qf49', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-qvbc', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-rr72', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-ssx7', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-vkdf', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-vlft', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-vwqr', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-xcrt', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-xmvh', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-xt7z', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-z7q5', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-zfgm', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-zjl5', + ], + k8s_cluster_name: 'saas-us-central1-c', + k8s_namespace_name: 'autoscaling', + }, + formatForWeb: false, + }, + { + selectedTime: 'GLOBAL_TIME', + graphType: PANEL_TYPES.TIME_SERIES, + query: { + builder: { + queryData: [ + { + aggregateAttribute: { + dataType: DataTypes.Float64, + id: 'k8s_pod_memory_usage--float64----true', + isColumn: true, + key: 'k8s_pod_memory_usage', + type: '', + }, + aggregateOperator: 'avg', + dataSource: DataSource.METRICS, + disabled: false, + expression: 'A', + filters: { + items: [ + { + id: '9a0ffaf3', + key: { + dataType: DataTypes.String, + id: 'k8s_cluster_name--string--tag--false', + isColumn: false, + key: 'k8s_cluster_name', + type: 'tag', + }, + op: '=', + value: '{{.k8s_cluster_name}}', + }, + { + id: '2d8022f6', + key: { + dataType: DataTypes.String, + id: 'k8s_pod_name--string--tag--false', + isColumn: false, + key: 'k8s_pod_name', + type: 'tag', + }, + op: 'in', + value: [podName], + }, + { + id: '3d87a431', + key: { + dataType: DataTypes.String, + id: 'k8s_namespace_name--string--tag--false', + isColumn: false, + key: 'k8s_namespace_name', + type: 'tag', + }, + op: 'in', + value: ['{{.k8s_namespace_name}}'], + }, + ], + op: 'AND', + }, + groupBy: [ + { + dataType: DataTypes.String, + id: 'k8s_node_name--string--tag--false', + isColumn: false, + key: 'k8s_node_name', + type: 'tag', + }, + { + dataType: DataTypes.String, + id: 'k8s_namespace_name--string--tag--false', + isColumn: false, + key: 'k8s_namespace_name', + type: 'tag', + }, + { + dataType: DataTypes.String, + id: 'k8s_pod_name--string--tag--false', + isColumn: false, + key: 'k8s_pod_name', + type: 'tag', + }, + ], + having: [], + legend: '{{k8s_namespace_name}}-{{k8s_pod_name}}', + limit: null, + orderBy: [], + queryName: 'A', + reduceTo: 'sum', + spaceAggregation: 'sum', + stepInterval: 60, + timeAggregation: 'avg', + functions: [], + }, + ], + queryFormulas: [], + }, + clickhouse_sql: [ + { + disabled: false, + legend: '', + name: 'A', + query: '', + }, + ], + id: '59c73365-4180-4ddd-9406-2e2d8cfbc0d9', + promql: [ + { + disabled: false, + legend: '', + name: 'A', + query: '', + }, + ], + queryType: EQueryType.QUERY_BUILDER, + }, + globalSelectedInterval: '3h', + variables: { + SIGNOZ_START_TIME: 1724643303000, + SIGNOZ_END_TIME: 1724654103000, + k8s_node_name: [ + 'gke-saas-us-central1-c-default-pool-94d03205-nt9p', + 'gke-saas-us-central1-c-ingress-b17bf782-2js8', + 'gke-saas-us-central1-c-ingress-b17bf782-2lw7', + 'gke-saas-us-central1-c-ingress-b17bf782-42p7', + 'gke-saas-us-central1-c-ingress-b17bf782-4k7w', + 'gke-saas-us-central1-c-ingress-b17bf782-8626', + 'gke-saas-us-central1-c-ingress-b17bf782-9m4r', + 'gke-saas-us-central1-c-ingress-b17bf782-bcqm', + 'gke-saas-us-central1-c-ingress-b17bf782-c5pt', + 'gke-saas-us-central1-c-ingress-b17bf782-c8ph', + 'gke-saas-us-central1-c-ingress-b17bf782-ddp7', + 'gke-saas-us-central1-c-ingress-b17bf782-drpr', + 'gke-saas-us-central1-c-ingress-b17bf782-f2xh', + 'gke-saas-us-central1-c-ingress-b17bf782-fgvc', + 'gke-saas-us-central1-c-ingress-b17bf782-fpsn', + 'gke-saas-us-central1-c-ingress-b17bf782-gdpq', + 'gke-saas-us-central1-c-ingress-b17bf782-hgwk', + 'gke-saas-us-central1-c-ingress-b17bf782-hkqb', + 'gke-saas-us-central1-c-ingress-b17bf782-kllg', + 'gke-saas-us-central1-c-ingress-b17bf782-m8bc', + 'gke-saas-us-central1-c-ingress-b17bf782-mr26', + 'gke-saas-us-central1-c-ingress-b17bf782-qbn4', + 'gke-saas-us-central1-c-ingress-b17bf782-rqgw', + 'gke-saas-us-central1-c-ingress-b17bf782-sjh8', + 'gke-saas-us-central1-c-ingress-b17bf782-sq7t', + 'gke-saas-us-central1-c-ingress-b17bf782-w5qp', + 'gke-saas-us-central1-c-ingress-b17bf782-xh27', + 'gke-saas-us-central1-c-ingress-b17bf782-xktp', + 'gke-saas-us-central1-c-ingress-b17bf782-z7vc', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-476s', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-5p2l', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-5qx4', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-6gbh', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-bpgh', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-bqhs', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-cv7b', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-fqqd', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-gfmv', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-h6np', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-j5h2', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-jkkb', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-lsfg', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-m66c', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-m6pg', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-ptkm', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-qf49', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-qvbc', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-rr72', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-ssx7', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-vkdf', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-vlft', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-vwqr', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-xcrt', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-xmvh', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-xt7z', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-z7q5', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-zfgm', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-zjl5', + ], + k8s_cluster_name: 'saas-us-central1-c', + k8s_namespace_name: 'autoscaling', + }, + formatForWeb: false, + }, + { + selectedTime: 'GLOBAL_TIME', + graphType: PANEL_TYPES.TIME_SERIES, + query: { + builder: { + queryData: [ + { + aggregateAttribute: { + dataType: DataTypes.Float64, + id: 'k8s_pod_network_io--float64----true', + isColumn: true, + key: 'k8s_pod_network_io', + type: '', + }, + aggregateOperator: 'sum_rate', + dataSource: DataSource.METRICS, + disabled: false, + expression: 'A', + filters: { + items: [ + { + id: '9a0ffaf3', + key: { + dataType: DataTypes.String, + id: 'k8s_cluster_name--string--tag--false', + isColumn: false, + key: 'k8s_cluster_name', + type: 'tag', + }, + op: '=', + value: '{{.k8s_cluster_name}}', + }, + { + id: 'c32821ed', + key: { + dataType: DataTypes.String, + id: 'k8s_node_name--string--tag--false', + isColumn: false, + key: 'k8s_node_name', + type: 'tag', + }, + op: 'in', + value: ['{{.k8s_node_name}}'], + }, + { + id: 'c0d7e589', + key: { + dataType: DataTypes.String, + id: 'k8s_namespace_name--string--tag--false', + isColumn: false, + key: 'k8s_namespace_name', + type: 'tag', + }, + op: 'in', + value: ['{{.k8s_namespace_name}}'], + }, + ], + op: 'AND', + }, + groupBy: [ + { + dataType: DataTypes.String, + id: 'direction--string--tag--false', + isColumn: false, + key: 'direction', + type: 'tag', + }, + { + dataType: DataTypes.String, + id: 'interface--string--tag--false', + isColumn: false, + key: 'interface', + type: 'tag', + }, + { + dataType: DataTypes.String, + id: 'k8s_node_name--string--tag--false', + isColumn: false, + key: 'k8s_node_name', + type: 'tag', + }, + { + dataType: DataTypes.String, + id: 'k8s_namespace_name--string--tag--false', + isColumn: false, + key: 'k8s_namespace_name', + type: 'tag', + }, + { + dataType: DataTypes.String, + id: 'k8s_pod_name--string--tag--false', + isColumn: false, + key: 'k8s_pod_name', + type: 'tag', + }, + ], + having: [], + legend: + '{{k8s_namespace_name}}-{{k8s_pod_name}}-{{interface}}-{{direction}}', + limit: null, + orderBy: [], + queryName: 'A', + reduceTo: 'sum', + spaceAggregation: 'sum', + stepInterval: 60, + timeAggregation: 'rate', + functions: [], + }, + ], + queryFormulas: [], + }, + clickhouse_sql: [ + { + disabled: false, + legend: '', + name: 'A', + query: '', + }, + ], + id: '534b461d-d992-4a30-ba17-ed7aac95a55b', + promql: [ + { + disabled: false, + legend: '', + name: 'A', + query: '', + }, + ], + queryType: EQueryType.QUERY_BUILDER, + }, + globalSelectedInterval: '3h', + variables: { + k8s_node_name: [ + 'gke-saas-us-central1-c-default-pool-94d03205-nt9p', + 'gke-saas-us-central1-c-ingress-b17bf782-2js8', + 'gke-saas-us-central1-c-ingress-b17bf782-2lw7', + 'gke-saas-us-central1-c-ingress-b17bf782-42p7', + 'gke-saas-us-central1-c-ingress-b17bf782-4k7w', + 'gke-saas-us-central1-c-ingress-b17bf782-8626', + 'gke-saas-us-central1-c-ingress-b17bf782-9m4r', + 'gke-saas-us-central1-c-ingress-b17bf782-bcqm', + 'gke-saas-us-central1-c-ingress-b17bf782-c5pt', + 'gke-saas-us-central1-c-ingress-b17bf782-c8ph', + 'gke-saas-us-central1-c-ingress-b17bf782-ddp7', + 'gke-saas-us-central1-c-ingress-b17bf782-drpr', + 'gke-saas-us-central1-c-ingress-b17bf782-f2xh', + 'gke-saas-us-central1-c-ingress-b17bf782-fgvc', + 'gke-saas-us-central1-c-ingress-b17bf782-fpsn', + 'gke-saas-us-central1-c-ingress-b17bf782-gdpq', + 'gke-saas-us-central1-c-ingress-b17bf782-hgwk', + 'gke-saas-us-central1-c-ingress-b17bf782-hkqb', + 'gke-saas-us-central1-c-ingress-b17bf782-kllg', + 'gke-saas-us-central1-c-ingress-b17bf782-m8bc', + 'gke-saas-us-central1-c-ingress-b17bf782-mr26', + 'gke-saas-us-central1-c-ingress-b17bf782-qbn4', + 'gke-saas-us-central1-c-ingress-b17bf782-rqgw', + 'gke-saas-us-central1-c-ingress-b17bf782-sjh8', + 'gke-saas-us-central1-c-ingress-b17bf782-sq7t', + 'gke-saas-us-central1-c-ingress-b17bf782-w5qp', + 'gke-saas-us-central1-c-ingress-b17bf782-xh27', + 'gke-saas-us-central1-c-ingress-b17bf782-xktp', + 'gke-saas-us-central1-c-ingress-b17bf782-z7vc', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-476s', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-5p2l', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-5qx4', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-6gbh', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-bpgh', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-bqhs', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-cv7b', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-fqqd', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-gfmv', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-h6np', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-j5h2', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-jkkb', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-lsfg', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-m66c', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-m6pg', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-ptkm', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-qf49', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-qvbc', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-rr72', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-ssx7', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-vkdf', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-vlft', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-vwqr', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-xcrt', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-xmvh', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-xt7z', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-z7q5', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-zfgm', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-zjl5', + ], + k8s_cluster_name: 'saas-us-central1-c', + k8s_namespace_name: 'autoscaling', + }, + formatForWeb: false, + }, + { + selectedTime: 'GLOBAL_TIME', + graphType: PANEL_TYPES.TIME_SERIES, + query: { + builder: { + queryData: [ + { + aggregateAttribute: { + dataType: DataTypes.Float64, + id: 'k8s_pod_filesystem_usage--float64----true', + isColumn: true, + key: 'k8s_pod_filesystem_usage', + type: '', + }, + aggregateOperator: 'avg', + dataSource: DataSource.METRICS, + disabled: false, + expression: 'A', + filters: { + items: [ + { + id: '9a0ffaf3', + key: { + dataType: DataTypes.String, + id: 'k8s_cluster_name--string--tag--false', + isColumn: false, + key: 'k8s_cluster_name', + type: 'tag', + }, + op: '=', + value: '{{.k8s_cluster_name}}', + }, + { + id: 'ba47cf47', + key: { + dataType: DataTypes.String, + id: 'k8s_node_name--string--tag--false', + isColumn: false, + key: 'k8s_node_name', + type: 'tag', + }, + op: 'in', + value: ['{{.k8s_node_name}}'], + }, + { + id: '539e5b96', + key: { + dataType: DataTypes.String, + id: 'k8s_namespace_name--string--tag--false', + isColumn: false, + key: 'k8s_namespace_name', + type: 'tag', + }, + op: 'in', + value: ['{{.k8s_namespace_name}}'], + }, + ], + op: 'AND', + }, + groupBy: [ + { + dataType: DataTypes.String, + id: 'k8s_node_name--string--tag--false', + isColumn: false, + key: 'k8s_node_name', + type: 'tag', + }, + { + dataType: DataTypes.String, + id: 'k8s_namespace_name--string--tag--false', + isColumn: false, + key: 'k8s_namespace_name', + type: 'tag', + }, + { + dataType: DataTypes.String, + id: 'k8s_pod_name--string--tag--false', + isColumn: false, + key: 'k8s_pod_name', + type: 'tag', + }, + ], + having: [], + legend: '{{k8s_node_name}}-{{k8s_namespace_name}}-{{k8s_pod_name}}', + limit: null, + orderBy: [], + queryName: 'A', + reduceTo: 'sum', + spaceAggregation: 'sum', + stepInterval: 60, + timeAggregation: 'avg', + functions: [], + }, + ], + queryFormulas: [], + }, + clickhouse_sql: [ + { + disabled: false, + legend: '', + name: 'A', + query: '', + }, + ], + id: '5a709367-ad0b-4a0a-9f7e-884e555f7686', + promql: [ + { + disabled: false, + legend: '', + name: 'A', + query: '', + }, + ], + queryType: EQueryType.QUERY_BUILDER, + }, + globalSelectedInterval: '3h', + variables: { + SIGNOZ_START_TIME: 1724643663000, + SIGNOZ_END_TIME: 1724654463000, + k8s_node_name: [ + 'gke-saas-us-central1-c-default-pool-94d03205-nt9p', + 'gke-saas-us-central1-c-ingress-b17bf782-2js8', + 'gke-saas-us-central1-c-ingress-b17bf782-2lw7', + 'gke-saas-us-central1-c-ingress-b17bf782-42p7', + 'gke-saas-us-central1-c-ingress-b17bf782-4k7w', + 'gke-saas-us-central1-c-ingress-b17bf782-8626', + 'gke-saas-us-central1-c-ingress-b17bf782-9m4r', + 'gke-saas-us-central1-c-ingress-b17bf782-bcqm', + 'gke-saas-us-central1-c-ingress-b17bf782-c5pt', + 'gke-saas-us-central1-c-ingress-b17bf782-c8ph', + 'gke-saas-us-central1-c-ingress-b17bf782-ddp7', + 'gke-saas-us-central1-c-ingress-b17bf782-drpr', + 'gke-saas-us-central1-c-ingress-b17bf782-f2xh', + 'gke-saas-us-central1-c-ingress-b17bf782-fgvc', + 'gke-saas-us-central1-c-ingress-b17bf782-fpsn', + 'gke-saas-us-central1-c-ingress-b17bf782-gdpq', + 'gke-saas-us-central1-c-ingress-b17bf782-hgwk', + 'gke-saas-us-central1-c-ingress-b17bf782-hkqb', + 'gke-saas-us-central1-c-ingress-b17bf782-kllg', + 'gke-saas-us-central1-c-ingress-b17bf782-m8bc', + 'gke-saas-us-central1-c-ingress-b17bf782-mr26', + 'gke-saas-us-central1-c-ingress-b17bf782-qbn4', + 'gke-saas-us-central1-c-ingress-b17bf782-rqgw', + 'gke-saas-us-central1-c-ingress-b17bf782-sjh8', + 'gke-saas-us-central1-c-ingress-b17bf782-sq7t', + 'gke-saas-us-central1-c-ingress-b17bf782-w5qp', + 'gke-saas-us-central1-c-ingress-b17bf782-xh27', + 'gke-saas-us-central1-c-ingress-b17bf782-xktp', + 'gke-saas-us-central1-c-ingress-b17bf782-z7vc', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-476s', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-5p2l', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-5qx4', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-6gbh', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-bpgh', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-bqhs', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-cv7b', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-fqqd', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-gfmv', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-h6np', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-j5h2', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-jkkb', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-lsfg', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-m66c', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-m6pg', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-ptkm', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-qf49', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-qvbc', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-rr72', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-ssx7', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-vkdf', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-vlft', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-vwqr', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-xcrt', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-xmvh', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-xt7z', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-z7q5', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-zfgm', + 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-zjl5', + ], + k8s_cluster_name: 'saas-us-central1-c', + k8s_namespace_name: 'autoscaling', + }, + formatForWeb: false, + }, +]; + +export const cardTitles: string[] = [ + 'Pod CPU usage', + 'Pod memory usage (WSS)', + 'Pod network IO', + 'Pod filesystem usage', +]; From 247cd782d524a18c6407713ec483c3057994a475 Mon Sep 17 00:00:00 2001 From: rahulkeswani101 Date: Mon, 26 Aug 2024 18:50:05 +0530 Subject: [PATCH 02/26] feat: added yaxis unit for the charts --- .../container/LogDetailedView/InfraMetrics/InfraMetrics.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/frontend/src/container/LogDetailedView/InfraMetrics/InfraMetrics.tsx b/frontend/src/container/LogDetailedView/InfraMetrics/InfraMetrics.tsx index e58c715f38..736d88087c 100644 --- a/frontend/src/container/LogDetailedView/InfraMetrics/InfraMetrics.tsx +++ b/frontend/src/container/LogDetailedView/InfraMetrics/InfraMetrics.tsx @@ -57,7 +57,7 @@ function InfraMetrics({ logData }: JSONViewProps): JSX.Element { const options = useMemo( () => - queries.map(({ data }) => + queries.map(({ data }, idx) => getUPlotChartOptions({ apiResponse: data?.payload, isDarkMode, @@ -66,6 +66,7 @@ function InfraMetrics({ logData }: JSONViewProps): JSX.Element { maxTimeScale, softMax: null, softMin: null, + yAxisUnit: idx === 2 || idx === 3 ? 'bytes' : '', }), ), [queries, isDarkMode, dimensions, minTimeScale, maxTimeScale], From 6e3910a369edb40977185ff55a648c99128c49c1 Mon Sep 17 00:00:00 2001 From: Ankit Nayan Date: Mon, 26 Aug 2024 19:02:56 +0530 Subject: [PATCH 03/26] chore: cleanup query_range params --- .../LogDetailedView/InfraMetrics/constants.ts | 426 ++---------------- 1 file changed, 34 insertions(+), 392 deletions(-) diff --git a/frontend/src/container/LogDetailedView/InfraMetrics/constants.ts b/frontend/src/container/LogDetailedView/InfraMetrics/constants.ts index 7929e677e9..e5639f2b62 100644 --- a/frontend/src/container/LogDetailedView/InfraMetrics/constants.ts +++ b/frontend/src/container/LogDetailedView/InfraMetrics/constants.ts @@ -41,48 +41,22 @@ export const getQueryPayload = ( op: '=', value: clusterName, }, - // { - // id: '9a0ffaf3', - // key: { - // dataType: DataTypes.String, - // id: 'k8s_node_name--string--tag--false', - // isColumn: false, - // key: 'k8s_node_name', - // type: 'tag', - // }, - // op: 'in', - // value: ['{{.k8s_node_name}}'], - // }, - // { - // id: 'b5db2e8e', - // key: { - // dataType: DataTypes.String, - // id: 'k8s_namespace_name--string--tag--false', - // isColumn: false, - // key: 'k8s_namespace_name', - // type: 'tag', - // }, - // op: 'in', - // value: ['{{.k8s_namespace_name}}'], - // }, + { + id: '9a0ffaf3', + key: { + dataType: DataTypes.String, + id: 'k8s_pod_name--string--tag--false', + isColumn: false, + key: 'k8s_pod_name', + type: 'tag', + }, + op: '=', + value: podName, + }, ], op: 'AND', }, groupBy: [ - { - dataType: DataTypes.String, - id: 'k8s_node_name--string--tag--false', - isColumn: false, - key: 'k8s_node_name', - type: 'tag', - }, - { - dataType: DataTypes.String, - id: 'k8s_namespace_name--string--tag--false', - isColumn: false, - key: 'k8s_namespace_name', - type: 'tag', - }, { dataType: DataTypes.String, id: 'k8s_pod_name--string--tag--false', @@ -92,7 +66,7 @@ export const getQueryPayload = ( }, ], having: [], - legend: '{{k8s_namespace_name}}-{{k8s_pod_name}}', + legend: '{{k8s_pod_name}}', limit: null, orderBy: [], queryName: 'A', @@ -125,70 +99,7 @@ export const getQueryPayload = ( queryType: EQueryType.QUERY_BUILDER, }, globalSelectedInterval: '3h', - variables: { - k8s_node_name: [ - 'gke-saas-us-central1-c-default-pool-94d03205-nt9p', - 'gke-saas-us-central1-c-ingress-b17bf782-2js8', - 'gke-saas-us-central1-c-ingress-b17bf782-2lw7', - 'gke-saas-us-central1-c-ingress-b17bf782-42p7', - 'gke-saas-us-central1-c-ingress-b17bf782-4k7w', - 'gke-saas-us-central1-c-ingress-b17bf782-8626', - 'gke-saas-us-central1-c-ingress-b17bf782-9m4r', - 'gke-saas-us-central1-c-ingress-b17bf782-bcqm', - 'gke-saas-us-central1-c-ingress-b17bf782-c5pt', - 'gke-saas-us-central1-c-ingress-b17bf782-c8ph', - 'gke-saas-us-central1-c-ingress-b17bf782-ddp7', - 'gke-saas-us-central1-c-ingress-b17bf782-drpr', - 'gke-saas-us-central1-c-ingress-b17bf782-f2xh', - 'gke-saas-us-central1-c-ingress-b17bf782-fgvc', - 'gke-saas-us-central1-c-ingress-b17bf782-fpsn', - 'gke-saas-us-central1-c-ingress-b17bf782-gdpq', - 'gke-saas-us-central1-c-ingress-b17bf782-hgwk', - 'gke-saas-us-central1-c-ingress-b17bf782-hkqb', - 'gke-saas-us-central1-c-ingress-b17bf782-kllg', - 'gke-saas-us-central1-c-ingress-b17bf782-m8bc', - 'gke-saas-us-central1-c-ingress-b17bf782-mr26', - 'gke-saas-us-central1-c-ingress-b17bf782-qbn4', - 'gke-saas-us-central1-c-ingress-b17bf782-rqgw', - 'gke-saas-us-central1-c-ingress-b17bf782-sjh8', - 'gke-saas-us-central1-c-ingress-b17bf782-sq7t', - 'gke-saas-us-central1-c-ingress-b17bf782-w5qp', - 'gke-saas-us-central1-c-ingress-b17bf782-xh27', - 'gke-saas-us-central1-c-ingress-b17bf782-xktp', - 'gke-saas-us-central1-c-ingress-b17bf782-z7vc', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-476s', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-5p2l', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-5qx4', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-6gbh', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-bpgh', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-bqhs', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-cv7b', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-fqqd', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-gfmv', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-h6np', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-j5h2', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-jkkb', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-lsfg', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-m66c', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-m6pg', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-ptkm', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-qf49', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-qvbc', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-rr72', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-ssx7', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-vkdf', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-vlft', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-vwqr', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-xcrt', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-xmvh', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-xt7z', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-z7q5', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-zfgm', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-zjl5', - ], - k8s_cluster_name: 'saas-us-central1-c', - k8s_namespace_name: 'autoscaling', - }, + variables: {}, formatForWeb: false, }, { @@ -221,7 +132,7 @@ export const getQueryPayload = ( type: 'tag', }, op: '=', - value: '{{.k8s_cluster_name}}', + value: 'saas-us-central1-c', }, { id: '2d8022f6', @@ -232,39 +143,13 @@ export const getQueryPayload = ( key: 'k8s_pod_name', type: 'tag', }, - op: 'in', - value: [podName], - }, - { - id: '3d87a431', - key: { - dataType: DataTypes.String, - id: 'k8s_namespace_name--string--tag--false', - isColumn: false, - key: 'k8s_namespace_name', - type: 'tag', - }, - op: 'in', - value: ['{{.k8s_namespace_name}}'], + op: '=', + value: 'signoz-otel-collector-595b45477c-9wt2h', }, ], op: 'AND', }, groupBy: [ - { - dataType: DataTypes.String, - id: 'k8s_node_name--string--tag--false', - isColumn: false, - key: 'k8s_node_name', - type: 'tag', - }, - { - dataType: DataTypes.String, - id: 'k8s_namespace_name--string--tag--false', - isColumn: false, - key: 'k8s_namespace_name', - type: 'tag', - }, { dataType: DataTypes.String, id: 'k8s_pod_name--string--tag--false', @@ -274,7 +159,7 @@ export const getQueryPayload = ( }, ], having: [], - legend: '{{k8s_namespace_name}}-{{k8s_pod_name}}', + legend: '{{k8s_pod_name}}', limit: null, orderBy: [], queryName: 'A', @@ -307,72 +192,7 @@ export const getQueryPayload = ( queryType: EQueryType.QUERY_BUILDER, }, globalSelectedInterval: '3h', - variables: { - SIGNOZ_START_TIME: 1724643303000, - SIGNOZ_END_TIME: 1724654103000, - k8s_node_name: [ - 'gke-saas-us-central1-c-default-pool-94d03205-nt9p', - 'gke-saas-us-central1-c-ingress-b17bf782-2js8', - 'gke-saas-us-central1-c-ingress-b17bf782-2lw7', - 'gke-saas-us-central1-c-ingress-b17bf782-42p7', - 'gke-saas-us-central1-c-ingress-b17bf782-4k7w', - 'gke-saas-us-central1-c-ingress-b17bf782-8626', - 'gke-saas-us-central1-c-ingress-b17bf782-9m4r', - 'gke-saas-us-central1-c-ingress-b17bf782-bcqm', - 'gke-saas-us-central1-c-ingress-b17bf782-c5pt', - 'gke-saas-us-central1-c-ingress-b17bf782-c8ph', - 'gke-saas-us-central1-c-ingress-b17bf782-ddp7', - 'gke-saas-us-central1-c-ingress-b17bf782-drpr', - 'gke-saas-us-central1-c-ingress-b17bf782-f2xh', - 'gke-saas-us-central1-c-ingress-b17bf782-fgvc', - 'gke-saas-us-central1-c-ingress-b17bf782-fpsn', - 'gke-saas-us-central1-c-ingress-b17bf782-gdpq', - 'gke-saas-us-central1-c-ingress-b17bf782-hgwk', - 'gke-saas-us-central1-c-ingress-b17bf782-hkqb', - 'gke-saas-us-central1-c-ingress-b17bf782-kllg', - 'gke-saas-us-central1-c-ingress-b17bf782-m8bc', - 'gke-saas-us-central1-c-ingress-b17bf782-mr26', - 'gke-saas-us-central1-c-ingress-b17bf782-qbn4', - 'gke-saas-us-central1-c-ingress-b17bf782-rqgw', - 'gke-saas-us-central1-c-ingress-b17bf782-sjh8', - 'gke-saas-us-central1-c-ingress-b17bf782-sq7t', - 'gke-saas-us-central1-c-ingress-b17bf782-w5qp', - 'gke-saas-us-central1-c-ingress-b17bf782-xh27', - 'gke-saas-us-central1-c-ingress-b17bf782-xktp', - 'gke-saas-us-central1-c-ingress-b17bf782-z7vc', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-476s', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-5p2l', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-5qx4', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-6gbh', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-bpgh', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-bqhs', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-cv7b', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-fqqd', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-gfmv', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-h6np', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-j5h2', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-jkkb', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-lsfg', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-m66c', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-m6pg', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-ptkm', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-qf49', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-qvbc', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-rr72', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-ssx7', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-vkdf', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-vlft', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-vwqr', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-xcrt', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-xmvh', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-xt7z', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-z7q5', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-zfgm', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-zjl5', - ], - k8s_cluster_name: 'saas-us-central1-c', - k8s_namespace_name: 'autoscaling', - }, + variables: {}, formatForWeb: false, }, { @@ -405,31 +225,19 @@ export const getQueryPayload = ( type: 'tag', }, op: '=', - value: '{{.k8s_cluster_name}}', + value: 'saas-us-central1-c', }, { id: 'c32821ed', key: { dataType: DataTypes.String, - id: 'k8s_node_name--string--tag--false', - isColumn: false, - key: 'k8s_node_name', - type: 'tag', - }, - op: 'in', - value: ['{{.k8s_node_name}}'], - }, - { - id: 'c0d7e589', - key: { - dataType: DataTypes.String, - id: 'k8s_namespace_name--string--tag--false', + id: 'k8s_pod_name--string--tag--false', isColumn: false, - key: 'k8s_namespace_name', + key: 'k8s_pod_name', type: 'tag', }, - op: 'in', - value: ['{{.k8s_namespace_name}}'], + op: '=', + value: 'signoz-otel-collector-595b45477c-9wt2h', }, ], op: 'AND', @@ -449,20 +257,6 @@ export const getQueryPayload = ( key: 'interface', type: 'tag', }, - { - dataType: DataTypes.String, - id: 'k8s_node_name--string--tag--false', - isColumn: false, - key: 'k8s_node_name', - type: 'tag', - }, - { - dataType: DataTypes.String, - id: 'k8s_namespace_name--string--tag--false', - isColumn: false, - key: 'k8s_namespace_name', - type: 'tag', - }, { dataType: DataTypes.String, id: 'k8s_pod_name--string--tag--false', @@ -472,8 +266,7 @@ export const getQueryPayload = ( }, ], having: [], - legend: - '{{k8s_namespace_name}}-{{k8s_pod_name}}-{{interface}}-{{direction}}', + legend: '{{k8s_pod_name}}-{{interface}}-{{direction}}', limit: null, orderBy: [], queryName: 'A', @@ -506,70 +299,7 @@ export const getQueryPayload = ( queryType: EQueryType.QUERY_BUILDER, }, globalSelectedInterval: '3h', - variables: { - k8s_node_name: [ - 'gke-saas-us-central1-c-default-pool-94d03205-nt9p', - 'gke-saas-us-central1-c-ingress-b17bf782-2js8', - 'gke-saas-us-central1-c-ingress-b17bf782-2lw7', - 'gke-saas-us-central1-c-ingress-b17bf782-42p7', - 'gke-saas-us-central1-c-ingress-b17bf782-4k7w', - 'gke-saas-us-central1-c-ingress-b17bf782-8626', - 'gke-saas-us-central1-c-ingress-b17bf782-9m4r', - 'gke-saas-us-central1-c-ingress-b17bf782-bcqm', - 'gke-saas-us-central1-c-ingress-b17bf782-c5pt', - 'gke-saas-us-central1-c-ingress-b17bf782-c8ph', - 'gke-saas-us-central1-c-ingress-b17bf782-ddp7', - 'gke-saas-us-central1-c-ingress-b17bf782-drpr', - 'gke-saas-us-central1-c-ingress-b17bf782-f2xh', - 'gke-saas-us-central1-c-ingress-b17bf782-fgvc', - 'gke-saas-us-central1-c-ingress-b17bf782-fpsn', - 'gke-saas-us-central1-c-ingress-b17bf782-gdpq', - 'gke-saas-us-central1-c-ingress-b17bf782-hgwk', - 'gke-saas-us-central1-c-ingress-b17bf782-hkqb', - 'gke-saas-us-central1-c-ingress-b17bf782-kllg', - 'gke-saas-us-central1-c-ingress-b17bf782-m8bc', - 'gke-saas-us-central1-c-ingress-b17bf782-mr26', - 'gke-saas-us-central1-c-ingress-b17bf782-qbn4', - 'gke-saas-us-central1-c-ingress-b17bf782-rqgw', - 'gke-saas-us-central1-c-ingress-b17bf782-sjh8', - 'gke-saas-us-central1-c-ingress-b17bf782-sq7t', - 'gke-saas-us-central1-c-ingress-b17bf782-w5qp', - 'gke-saas-us-central1-c-ingress-b17bf782-xh27', - 'gke-saas-us-central1-c-ingress-b17bf782-xktp', - 'gke-saas-us-central1-c-ingress-b17bf782-z7vc', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-476s', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-5p2l', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-5qx4', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-6gbh', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-bpgh', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-bqhs', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-cv7b', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-fqqd', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-gfmv', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-h6np', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-j5h2', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-jkkb', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-lsfg', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-m66c', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-m6pg', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-ptkm', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-qf49', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-qvbc', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-rr72', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-ssx7', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-vkdf', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-vlft', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-vwqr', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-xcrt', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-xmvh', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-xt7z', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-z7q5', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-zfgm', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-zjl5', - ], - k8s_cluster_name: 'saas-us-central1-c', - k8s_namespace_name: 'autoscaling', - }, + variables: {}, formatForWeb: false, }, { @@ -602,50 +332,24 @@ export const getQueryPayload = ( type: 'tag', }, op: '=', - value: '{{.k8s_cluster_name}}', + value: '$k8s_cluster_name', }, { id: 'ba47cf47', key: { dataType: DataTypes.String, - id: 'k8s_node_name--string--tag--false', - isColumn: false, - key: 'k8s_node_name', - type: 'tag', - }, - op: 'in', - value: ['{{.k8s_node_name}}'], - }, - { - id: '539e5b96', - key: { - dataType: DataTypes.String, - id: 'k8s_namespace_name--string--tag--false', + id: 'k8s_pod_name--string--tag--false', isColumn: false, - key: 'k8s_namespace_name', + key: 'k8s_pod_name', type: 'tag', }, - op: 'in', - value: ['{{.k8s_namespace_name}}'], + op: '=', + value: '$k8s_pod_name', }, ], op: 'AND', }, groupBy: [ - { - dataType: DataTypes.String, - id: 'k8s_node_name--string--tag--false', - isColumn: false, - key: 'k8s_node_name', - type: 'tag', - }, - { - dataType: DataTypes.String, - id: 'k8s_namespace_name--string--tag--false', - isColumn: false, - key: 'k8s_namespace_name', - type: 'tag', - }, { dataType: DataTypes.String, id: 'k8s_pod_name--string--tag--false', @@ -655,7 +359,7 @@ export const getQueryPayload = ( }, ], having: [], - legend: '{{k8s_node_name}}-{{k8s_namespace_name}}-{{k8s_pod_name}}', + legend: '{{k8s_pod_name}}', limit: null, orderBy: [], queryName: 'A', @@ -689,70 +393,8 @@ export const getQueryPayload = ( }, globalSelectedInterval: '3h', variables: { - SIGNOZ_START_TIME: 1724643663000, - SIGNOZ_END_TIME: 1724654463000, - k8s_node_name: [ - 'gke-saas-us-central1-c-default-pool-94d03205-nt9p', - 'gke-saas-us-central1-c-ingress-b17bf782-2js8', - 'gke-saas-us-central1-c-ingress-b17bf782-2lw7', - 'gke-saas-us-central1-c-ingress-b17bf782-42p7', - 'gke-saas-us-central1-c-ingress-b17bf782-4k7w', - 'gke-saas-us-central1-c-ingress-b17bf782-8626', - 'gke-saas-us-central1-c-ingress-b17bf782-9m4r', - 'gke-saas-us-central1-c-ingress-b17bf782-bcqm', - 'gke-saas-us-central1-c-ingress-b17bf782-c5pt', - 'gke-saas-us-central1-c-ingress-b17bf782-c8ph', - 'gke-saas-us-central1-c-ingress-b17bf782-ddp7', - 'gke-saas-us-central1-c-ingress-b17bf782-drpr', - 'gke-saas-us-central1-c-ingress-b17bf782-f2xh', - 'gke-saas-us-central1-c-ingress-b17bf782-fgvc', - 'gke-saas-us-central1-c-ingress-b17bf782-fpsn', - 'gke-saas-us-central1-c-ingress-b17bf782-gdpq', - 'gke-saas-us-central1-c-ingress-b17bf782-hgwk', - 'gke-saas-us-central1-c-ingress-b17bf782-hkqb', - 'gke-saas-us-central1-c-ingress-b17bf782-kllg', - 'gke-saas-us-central1-c-ingress-b17bf782-m8bc', - 'gke-saas-us-central1-c-ingress-b17bf782-mr26', - 'gke-saas-us-central1-c-ingress-b17bf782-qbn4', - 'gke-saas-us-central1-c-ingress-b17bf782-rqgw', - 'gke-saas-us-central1-c-ingress-b17bf782-sjh8', - 'gke-saas-us-central1-c-ingress-b17bf782-sq7t', - 'gke-saas-us-central1-c-ingress-b17bf782-w5qp', - 'gke-saas-us-central1-c-ingress-b17bf782-xh27', - 'gke-saas-us-central1-c-ingress-b17bf782-xktp', - 'gke-saas-us-central1-c-ingress-b17bf782-z7vc', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-476s', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-5p2l', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-5qx4', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-6gbh', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-bpgh', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-bqhs', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-cv7b', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-fqqd', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-gfmv', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-h6np', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-j5h2', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-jkkb', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-lsfg', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-m66c', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-m6pg', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-ptkm', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-qf49', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-qvbc', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-rr72', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-ssx7', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-vkdf', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-vlft', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-vwqr', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-xcrt', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-xmvh', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-xt7z', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-z7q5', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-zfgm', - 'gke-saas-us-central1-c-signoz-tenant-a5b5ade0-zjl5', - ], - k8s_cluster_name: 'saas-us-central1-c', - k8s_namespace_name: 'autoscaling', + k8s_cluster_name: clusterName, + k8s_pod_name: podName, }, formatForWeb: false, }, From 1bf30ce4402a2791dfcb35f95e85e3b311112131 Mon Sep 17 00:00:00 2001 From: Ankit Nayan Date: Mon, 26 Aug 2024 21:36:38 +0530 Subject: [PATCH 04/26] fix: clusterName, podName variables not working --- .../InfraMetrics/InfraMetrics.tsx | 14 ++++---------- .../LogDetailedView/InfraMetrics/constants.ts | 17 +++++++---------- 2 files changed, 11 insertions(+), 20 deletions(-) diff --git a/frontend/src/container/LogDetailedView/InfraMetrics/InfraMetrics.tsx b/frontend/src/container/LogDetailedView/InfraMetrics/InfraMetrics.tsx index 736d88087c..82a14ecc2f 100644 --- a/frontend/src/container/LogDetailedView/InfraMetrics/InfraMetrics.tsx +++ b/frontend/src/container/LogDetailedView/InfraMetrics/InfraMetrics.tsx @@ -27,15 +27,9 @@ function InfraMetrics({ logData }: JSONViewProps): JSX.Element { const minTimeScale = (parseInt(start, 10) * 1e3) / 1000; const maxTimeScale = (parseInt(end, 10) * 1e3) / 1000; - const clusterName = - (logData.resources_string?.['k8s.cluster.name'] as - | string - | undefined)?.replace(/-/g, '_') ?? ''; - const podName = - (logData.resources_string?.['k8s.pod.name'] as string | undefined)?.replace( - /-/g, - '_', - ) ?? ''; + const clusterName = logData.resources_string?.['k8s.cluster.name'] as string; + const podName = logData.resources_string?.['k8s.pod.name'] as string; + const queries = useQueries( getQueryPayload(clusterName, podName).map((payload) => ({ queryKey: ['metrics', payload, ENTITY_VERSION_V4], @@ -66,7 +60,7 @@ function InfraMetrics({ logData }: JSONViewProps): JSX.Element { maxTimeScale, softMax: null, softMin: null, - yAxisUnit: idx === 2 || idx === 3 ? 'bytes' : '', + yAxisUnit: idx === 1 || idx === 2 || idx === 3 ? 'bytes' : '', }), ), [queries, isDarkMode, dimensions, minTimeScale, maxTimeScale], diff --git a/frontend/src/container/LogDetailedView/InfraMetrics/constants.ts b/frontend/src/container/LogDetailedView/InfraMetrics/constants.ts index e5639f2b62..9d5567bdd1 100644 --- a/frontend/src/container/LogDetailedView/InfraMetrics/constants.ts +++ b/frontend/src/container/LogDetailedView/InfraMetrics/constants.ts @@ -132,7 +132,7 @@ export const getQueryPayload = ( type: 'tag', }, op: '=', - value: 'saas-us-central1-c', + value: clusterName, }, { id: '2d8022f6', @@ -144,7 +144,7 @@ export const getQueryPayload = ( type: 'tag', }, op: '=', - value: 'signoz-otel-collector-595b45477c-9wt2h', + value: podName, }, ], op: 'AND', @@ -225,7 +225,7 @@ export const getQueryPayload = ( type: 'tag', }, op: '=', - value: 'saas-us-central1-c', + value: clusterName, }, { id: 'c32821ed', @@ -237,7 +237,7 @@ export const getQueryPayload = ( type: 'tag', }, op: '=', - value: 'signoz-otel-collector-595b45477c-9wt2h', + value: podName, }, ], op: 'AND', @@ -332,7 +332,7 @@ export const getQueryPayload = ( type: 'tag', }, op: '=', - value: '$k8s_cluster_name', + value: clusterName, }, { id: 'ba47cf47', @@ -344,7 +344,7 @@ export const getQueryPayload = ( type: 'tag', }, op: '=', - value: '$k8s_pod_name', + value: podName, }, ], op: 'AND', @@ -392,10 +392,7 @@ export const getQueryPayload = ( queryType: EQueryType.QUERY_BUILDER, }, globalSelectedInterval: '3h', - variables: { - k8s_cluster_name: clusterName, - k8s_pod_name: podName, - }, + variables: {}, formatForWeb: false, }, ]; From 0faa5e32e72de882cc05c4ee51b7f3673330e837 Mon Sep 17 00:00:00 2001 From: rahulkeswani101 Date: Mon, 26 Aug 2024 23:32:55 +0530 Subject: [PATCH 05/26] feat: added skeleton for each charts in infra metrics tab --- .../InfraMetrics/InfraMetrics.tsx | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/frontend/src/container/LogDetailedView/InfraMetrics/InfraMetrics.tsx b/frontend/src/container/LogDetailedView/InfraMetrics/InfraMetrics.tsx index 82a14ecc2f..88d3a7887e 100644 --- a/frontend/src/container/LogDetailedView/InfraMetrics/InfraMetrics.tsx +++ b/frontend/src/container/LogDetailedView/InfraMetrics/InfraMetrics.tsx @@ -1,8 +1,7 @@ import './InfraMetrics.styles.scss'; -import { Card, Col, Row, Typography } from 'antd'; +import { Card, Col, Row, Skeleton, Typography } from 'antd'; import cx from 'classnames'; -import Spinner from 'components/Spinner'; import Uplot from 'components/Uplot'; import { ENTITY_VERSION_V4 } from 'constants/app'; import { useIsDarkMode } from 'hooks/useDarkMode'; @@ -27,9 +26,14 @@ function InfraMetrics({ logData }: JSONViewProps): JSX.Element { const minTimeScale = (parseInt(start, 10) * 1e3) / 1000; const maxTimeScale = (parseInt(end, 10) * 1e3) / 1000; - const clusterName = logData.resources_string?.['k8s.cluster.name'] as string; - const podName = logData.resources_string?.['k8s.pod.name'] as string; + const clusterName = logData.resources_string?.['k8s.cluster.name'] + ? (logData.resources_string?.['k8s.cluster.name'] as string) + : ''; + const podName = logData.resources_string?.['k8s.pod.name'] + ? (logData.resources_string?.['k8s.pod.name'] as string) + : ''; + console.log(clusterName, podName); const queries = useQueries( getQueryPayload(clusterName, podName).map((payload) => ({ queryKey: ['metrics', payload, ENTITY_VERSION_V4], @@ -37,7 +41,6 @@ function InfraMetrics({ logData }: JSONViewProps): JSX.Element { GetMetricQueryRange(payload, ENTITY_VERSION_V4), })), ); - console.log(queries); const isDarkMode = useIsDarkMode(); const graphRef = useRef(null); @@ -71,7 +74,7 @@ function InfraMetrics({ logData }: JSONViewProps): JSX.Element { idx: number, ): JSX.Element => { if (query.isLoading) { - return ; + return ; } if (query.error) { @@ -95,7 +98,8 @@ function InfraMetrics({ logData }: JSONViewProps): JSX.Element { From 42f7be643d5d56b259d9dab34856960e6ae1cc83 Mon Sep 17 00:00:00 2001 From: Ankit Nayan Date: Tue, 27 Aug 2024 12:00:39 +0530 Subject: [PATCH 06/26] change card height to 300px --- .../LogDetailedView/InfraMetrics/InfraMetrics.styles.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/container/LogDetailedView/InfraMetrics/InfraMetrics.styles.scss b/frontend/src/container/LogDetailedView/InfraMetrics/InfraMetrics.styles.scss index b6da129895..37f19c3e81 100644 --- a/frontend/src/container/LogDetailedView/InfraMetrics/InfraMetrics.styles.scss +++ b/frontend/src/container/LogDetailedView/InfraMetrics/InfraMetrics.styles.scss @@ -1,6 +1,6 @@ .infra-metrics-card { margin: 1rem 0; - height: 400px; + height: 300px; padding: 10px; .ant-card-body { @@ -16,4 +16,4 @@ .no-data { height: 100px; -} \ No newline at end of file +} From 9d74ad83fcbc393a982ed3a88a63d27b181b62a0 Mon Sep 17 00:00:00 2001 From: rahulkeswani101 Date: Tue, 27 Aug 2024 14:18:42 +0530 Subject: [PATCH 07/26] fix: updated the test cases --- .../tests/DraggableTableRow.test.tsx | 14 ++++++++++++++ .../InfraMetrics/InfraMetrics.styles.scss | 2 +- .../InfraMetrics/InfraMetrics.tsx | 19 ++++++++++++++----- .../LogDetailedView/LogDetailedView.types.ts | 4 ++++ .../tests/LogsExplorerViews.test.tsx | 14 ++++++++++++++ .../tests/ChangeHistory.test.tsx | 14 ++++++++++++++ .../tests/AddNewPipeline.test.tsx | 14 ++++++++++++++ .../tests/AddNewProcessor.test.tsx | 14 ++++++++++++++ .../PipelinePage/tests/DeleteAction.test.tsx | 14 ++++++++++++++ .../PipelinePage/tests/DragAction.test.tsx | 14 ++++++++++++++ .../PipelinePage/tests/EditAction.test.tsx | 14 ++++++++++++++ .../tests/PipelineActions.test.tsx | 14 ++++++++++++++ .../tests/PipelineExpandView.test.tsx | 14 ++++++++++++++ .../tests/PipelineListsView.test.tsx | 14 ++++++++++++++ .../tests/PipelinePageLayout.test.tsx | 14 ++++++++++++++ .../PipelinePage/tests/TagInput.test.tsx | 14 ++++++++++++++ .../PipelinePage/tests/utils.test.ts | 14 ++++++++++++++ .../__tests__/LogsExplorer.test.tsx | 15 +++++++++++++++ 18 files changed, 230 insertions(+), 6 deletions(-) diff --git a/frontend/src/components/DraggableTableRow/tests/DraggableTableRow.test.tsx b/frontend/src/components/DraggableTableRow/tests/DraggableTableRow.test.tsx index f938a19203..67bbeb56f2 100644 --- a/frontend/src/components/DraggableTableRow/tests/DraggableTableRow.test.tsx +++ b/frontend/src/components/DraggableTableRow/tests/DraggableTableRow.test.tsx @@ -12,6 +12,20 @@ beforeAll(() => { matchMedia(); }); +jest.mock('uplot', () => { + const paths = { + spline: jest.fn(), + bars: jest.fn(), + }; + const uplotMock = jest.fn(() => ({ + paths, + })); + return { + paths, + default: uplotMock, + }; +}); + jest.mock('react-dnd', () => ({ useDrop: jest.fn().mockImplementation(() => [jest.fn(), jest.fn(), jest.fn()]), useDrag: jest.fn().mockImplementation(() => [jest.fn(), jest.fn(), jest.fn()]), diff --git a/frontend/src/container/LogDetailedView/InfraMetrics/InfraMetrics.styles.scss b/frontend/src/container/LogDetailedView/InfraMetrics/InfraMetrics.styles.scss index b6da129895..5eb2abe34b 100644 --- a/frontend/src/container/LogDetailedView/InfraMetrics/InfraMetrics.styles.scss +++ b/frontend/src/container/LogDetailedView/InfraMetrics/InfraMetrics.styles.scss @@ -14,6 +14,6 @@ } } -.no-data { +.no-data-card { height: 100px; } \ No newline at end of file diff --git a/frontend/src/container/LogDetailedView/InfraMetrics/InfraMetrics.tsx b/frontend/src/container/LogDetailedView/InfraMetrics/InfraMetrics.tsx index 88d3a7887e..d3ae3585db 100644 --- a/frontend/src/container/LogDetailedView/InfraMetrics/InfraMetrics.tsx +++ b/frontend/src/container/LogDetailedView/InfraMetrics/InfraMetrics.tsx @@ -15,10 +15,10 @@ import { useQueries, UseQueryResult } from 'react-query'; import { SuccessResponse } from 'types/api'; import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange'; -import { JSONViewProps } from '../LogDetailedView.types'; +import { InfraMetricsSProps } from '../LogDetailedView.types'; import { cardTitles, getQueryPayload } from './constants'; -function InfraMetrics({ logData }: JSONViewProps): JSX.Element { +function InfraMetrics({ logData }: InfraMetricsSProps): JSX.Element { const { start, end } = getStartEndRangeTime({ type: 'GLOBAL_TIME', interval: '3h', @@ -33,7 +33,6 @@ function InfraMetrics({ logData }: JSONViewProps): JSX.Element { ? (logData.resources_string?.['k8s.pod.name'] as string) : ''; - console.log(clusterName, podName); const queries = useQueries( getQueryPayload(clusterName, podName).map((payload) => ({ queryKey: ['metrics', payload, ENTITY_VERSION_V4], @@ -52,6 +51,16 @@ function InfraMetrics({ logData }: JSONViewProps): JSX.Element { [queries], ); + const getYAxisUnit = (idx: number): string => { + if (idx === 1 || idx === 3) { + return 'bytes'; + } + if (idx === 2) { + return 'binBps'; + } + return ''; + }; + const options = useMemo( () => queries.map(({ data }, idx) => @@ -63,7 +72,7 @@ function InfraMetrics({ logData }: JSONViewProps): JSX.Element { maxTimeScale, softMax: null, softMin: null, - yAxisUnit: idx === 1 || idx === 2 || idx === 3 ? 'bytes' : '', + yAxisUnit: getYAxisUnit(idx), }), ), [queries, isDarkMode, dimensions, minTimeScale, maxTimeScale], @@ -98,7 +107,7 @@ function InfraMetrics({ logData }: JSONViewProps): JSX.Element { ), ); +jest.mock('uplot', () => { + const paths = { + spline: jest.fn(), + bars: jest.fn(), + }; + const uplotMock = jest.fn(() => ({ + paths, + })); + return { + paths, + default: uplotMock, + }; +}); + // mocking the graph components in this test as this should be handled separately jest.mock( 'container/TimeSeriesView/TimeSeriesView', diff --git a/frontend/src/container/PipelinePage/Layouts/ChangeHistory/tests/ChangeHistory.test.tsx b/frontend/src/container/PipelinePage/Layouts/ChangeHistory/tests/ChangeHistory.test.tsx index 194acbea0a..88fdb5d594 100644 --- a/frontend/src/container/PipelinePage/Layouts/ChangeHistory/tests/ChangeHistory.test.tsx +++ b/frontend/src/container/PipelinePage/Layouts/ChangeHistory/tests/ChangeHistory.test.tsx @@ -9,6 +9,20 @@ import store from 'store'; import ChangeHistory from '../index'; import { pipelineData, pipelineDataHistory } from './testUtils'; +jest.mock('uplot', () => { + const paths = { + spline: jest.fn(), + bars: jest.fn(), + }; + const uplotMock = jest.fn(() => ({ + paths, + })); + return { + paths, + default: uplotMock, + }; +}); + const queryClient = new QueryClient({ defaultOptions: { queries: { diff --git a/frontend/src/container/PipelinePage/tests/AddNewPipeline.test.tsx b/frontend/src/container/PipelinePage/tests/AddNewPipeline.test.tsx index 8990ffa4e7..360a7c5925 100644 --- a/frontend/src/container/PipelinePage/tests/AddNewPipeline.test.tsx +++ b/frontend/src/container/PipelinePage/tests/AddNewPipeline.test.tsx @@ -9,6 +9,20 @@ import store from 'store'; import { pipelineMockData } from '../mocks/pipeline'; import AddNewPipeline from '../PipelineListsView/AddNewPipeline'; +jest.mock('uplot', () => { + const paths = { + spline: jest.fn(), + bars: jest.fn(), + }; + const uplotMock = jest.fn(() => ({ + paths, + })); + return { + paths, + default: uplotMock, + }; +}); + export function matchMedia(): void { Object.defineProperty(window, 'matchMedia', { writable: true, diff --git a/frontend/src/container/PipelinePage/tests/AddNewProcessor.test.tsx b/frontend/src/container/PipelinePage/tests/AddNewProcessor.test.tsx index a4d2e680a4..d3f236437f 100644 --- a/frontend/src/container/PipelinePage/tests/AddNewProcessor.test.tsx +++ b/frontend/src/container/PipelinePage/tests/AddNewProcessor.test.tsx @@ -9,6 +9,20 @@ import { pipelineMockData } from '../mocks/pipeline'; import AddNewProcessor from '../PipelineListsView/AddNewProcessor'; import { matchMedia } from './AddNewPipeline.test'; +jest.mock('uplot', () => { + const paths = { + spline: jest.fn(), + bars: jest.fn(), + }; + const uplotMock = jest.fn(() => ({ + paths, + })); + return { + paths, + default: uplotMock, + }; +}); + beforeAll(() => { matchMedia(); }); diff --git a/frontend/src/container/PipelinePage/tests/DeleteAction.test.tsx b/frontend/src/container/PipelinePage/tests/DeleteAction.test.tsx index 451ef8807f..3b2fdfeb34 100644 --- a/frontend/src/container/PipelinePage/tests/DeleteAction.test.tsx +++ b/frontend/src/container/PipelinePage/tests/DeleteAction.test.tsx @@ -6,6 +6,20 @@ import { MemoryRouter } from 'react-router-dom'; import i18n from 'ReactI18'; import store from 'store'; +jest.mock('uplot', () => { + const paths = { + spline: jest.fn(), + bars: jest.fn(), + }; + const uplotMock = jest.fn(() => ({ + paths, + })); + return { + paths, + default: uplotMock, + }; +}); + describe('PipelinePage container test', () => { it('should render DeleteAction section', () => { const { asFragment } = render( diff --git a/frontend/src/container/PipelinePage/tests/DragAction.test.tsx b/frontend/src/container/PipelinePage/tests/DragAction.test.tsx index 168b3f042f..9f64714072 100644 --- a/frontend/src/container/PipelinePage/tests/DragAction.test.tsx +++ b/frontend/src/container/PipelinePage/tests/DragAction.test.tsx @@ -6,6 +6,20 @@ import { MemoryRouter } from 'react-router-dom'; import i18n from 'ReactI18'; import store from 'store'; +jest.mock('uplot', () => { + const paths = { + spline: jest.fn(), + bars: jest.fn(), + }; + const uplotMock = jest.fn(() => ({ + paths, + })); + return { + paths, + default: uplotMock, + }; +}); + describe('PipelinePage container test', () => { it('should render DragAction section', () => { const { asFragment } = render( diff --git a/frontend/src/container/PipelinePage/tests/EditAction.test.tsx b/frontend/src/container/PipelinePage/tests/EditAction.test.tsx index c52991bf6d..56dd779600 100644 --- a/frontend/src/container/PipelinePage/tests/EditAction.test.tsx +++ b/frontend/src/container/PipelinePage/tests/EditAction.test.tsx @@ -6,6 +6,20 @@ import { MemoryRouter } from 'react-router-dom'; import i18n from 'ReactI18'; import store from 'store'; +jest.mock('uplot', () => { + const paths = { + spline: jest.fn(), + bars: jest.fn(), + }; + const uplotMock = jest.fn(() => ({ + paths, + })); + return { + paths, + default: uplotMock, + }; +}); + describe('PipelinePage container test', () => { it('should render EditAction section', () => { const { asFragment } = render( diff --git a/frontend/src/container/PipelinePage/tests/PipelineActions.test.tsx b/frontend/src/container/PipelinePage/tests/PipelineActions.test.tsx index 83f503107b..d472f4745c 100644 --- a/frontend/src/container/PipelinePage/tests/PipelineActions.test.tsx +++ b/frontend/src/container/PipelinePage/tests/PipelineActions.test.tsx @@ -8,6 +8,20 @@ import store from 'store'; import { pipelineMockData } from '../mocks/pipeline'; import PipelineActions from '../PipelineListsView/TableComponents/PipelineActions'; +jest.mock('uplot', () => { + const paths = { + spline: jest.fn(), + bars: jest.fn(), + }; + const uplotMock = jest.fn(() => ({ + paths, + })); + return { + paths, + default: uplotMock, + }; +}); + describe('PipelinePage container test', () => { it('should render PipelineActions section', () => { const { asFragment } = render( diff --git a/frontend/src/container/PipelinePage/tests/PipelineExpandView.test.tsx b/frontend/src/container/PipelinePage/tests/PipelineExpandView.test.tsx index 6875d11259..b9c78091dd 100644 --- a/frontend/src/container/PipelinePage/tests/PipelineExpandView.test.tsx +++ b/frontend/src/container/PipelinePage/tests/PipelineExpandView.test.tsx @@ -9,6 +9,20 @@ import { pipelineMockData } from '../mocks/pipeline'; import PipelineExpandView from '../PipelineListsView/PipelineExpandView'; import { matchMedia } from './AddNewPipeline.test'; +jest.mock('uplot', () => { + const paths = { + spline: jest.fn(), + bars: jest.fn(), + }; + const uplotMock = jest.fn(() => ({ + paths, + })); + return { + paths, + default: uplotMock, + }; +}); + beforeAll(() => { matchMedia(); }); diff --git a/frontend/src/container/PipelinePage/tests/PipelineListsView.test.tsx b/frontend/src/container/PipelinePage/tests/PipelineListsView.test.tsx index 74f1f125e0..517e623ebe 100644 --- a/frontend/src/container/PipelinePage/tests/PipelineListsView.test.tsx +++ b/frontend/src/container/PipelinePage/tests/PipelineListsView.test.tsx @@ -11,6 +11,20 @@ import store from 'store'; import { pipelineApiResponseMockData } from '../mocks/pipeline'; import PipelineListsView from '../PipelineListsView'; +jest.mock('uplot', () => { + const paths = { + spline: jest.fn(), + bars: jest.fn(), + }; + const uplotMock = jest.fn(() => ({ + paths, + })); + return { + paths, + default: uplotMock, + }; +}); + const samplePipelinePreviewResponse = { isLoading: false, logs: [ diff --git a/frontend/src/container/PipelinePage/tests/PipelinePageLayout.test.tsx b/frontend/src/container/PipelinePage/tests/PipelinePageLayout.test.tsx index 91d5dfe244..a71bc1266d 100644 --- a/frontend/src/container/PipelinePage/tests/PipelinePageLayout.test.tsx +++ b/frontend/src/container/PipelinePage/tests/PipelinePageLayout.test.tsx @@ -11,6 +11,20 @@ import { v4 } from 'uuid'; import PipelinePageLayout from '../Layouts/Pipeline'; import { matchMedia } from './AddNewPipeline.test'; +jest.mock('uplot', () => { + const paths = { + spline: jest.fn(), + bars: jest.fn(), + }; + const uplotMock = jest.fn(() => ({ + paths, + })); + return { + paths, + default: uplotMock, + }; +}); + beforeAll(() => { matchMedia(); }); diff --git a/frontend/src/container/PipelinePage/tests/TagInput.test.tsx b/frontend/src/container/PipelinePage/tests/TagInput.test.tsx index 24cedc2eb0..e95efb6715 100644 --- a/frontend/src/container/PipelinePage/tests/TagInput.test.tsx +++ b/frontend/src/container/PipelinePage/tests/TagInput.test.tsx @@ -7,6 +7,20 @@ import store from 'store'; import TagInput from '../components/TagInput'; +jest.mock('uplot', () => { + const paths = { + spline: jest.fn(), + bars: jest.fn(), + }; + const uplotMock = jest.fn(() => ({ + paths, + })); + return { + paths, + default: uplotMock, + }; +}); + describe('Pipeline Page', () => { it('should render TagInput section', () => { const { asFragment } = render( diff --git a/frontend/src/container/PipelinePage/tests/utils.test.ts b/frontend/src/container/PipelinePage/tests/utils.test.ts index c21e8c5a4b..707ad06c2d 100644 --- a/frontend/src/container/PipelinePage/tests/utils.test.ts +++ b/frontend/src/container/PipelinePage/tests/utils.test.ts @@ -11,6 +11,20 @@ import { getTableColumn, } from '../PipelineListsView/utils'; +jest.mock('uplot', () => { + const paths = { + spline: jest.fn(), + bars: jest.fn(), + }; + const uplotMock = jest.fn(() => ({ + paths, + })); + return { + paths, + default: uplotMock, + }; +}); + describe('Utils testing of Pipeline Page', () => { test('it should be check form field of add pipeline', () => { expect(pipelineFields.length).toBe(3); diff --git a/frontend/src/pages/LogsExplorer/__tests__/LogsExplorer.test.tsx b/frontend/src/pages/LogsExplorer/__tests__/LogsExplorer.test.tsx index ff0f891333..753c206197 100644 --- a/frontend/src/pages/LogsExplorer/__tests__/LogsExplorer.test.tsx +++ b/frontend/src/pages/LogsExplorer/__tests__/LogsExplorer.test.tsx @@ -26,6 +26,21 @@ import { Query } from 'types/api/queryBuilder/queryBuilderData'; import LogsExplorer from '../index'; const queryRangeURL = 'http://localhost/api/v3/query_range'; + +jest.mock('uplot', () => { + const paths = { + spline: jest.fn(), + bars: jest.fn(), + }; + const uplotMock = jest.fn(() => ({ + paths, + })); + return { + paths, + default: uplotMock, + }; +}); + // mocking the graph components in this test as this should be handled separately jest.mock( 'container/TimeSeriesView/TimeSeriesView', From 20ff95202d665121e3ff6401d32a37e847c9d61e Mon Sep 17 00:00:00 2001 From: rahulkeswani101 Date: Fri, 6 Sep 2024 12:08:25 +0530 Subject: [PATCH 08/26] feat: added new sub-tabs node and pod for infra metrics tab --- .../InfraMetrics/InfraMetrics.tsx | 146 +- .../LogDetailedView/InfraMetrics/constants.ts | 3208 ++++++++++++++++- 2 files changed, 3262 insertions(+), 92 deletions(-) diff --git a/frontend/src/container/LogDetailedView/InfraMetrics/InfraMetrics.tsx b/frontend/src/container/LogDetailedView/InfraMetrics/InfraMetrics.tsx index d3ae3585db..73376a1804 100644 --- a/frontend/src/container/LogDetailedView/InfraMetrics/InfraMetrics.tsx +++ b/frontend/src/container/LogDetailedView/InfraMetrics/InfraMetrics.tsx @@ -1,6 +1,15 @@ import './InfraMetrics.styles.scss'; -import { Card, Col, Row, Skeleton, Typography } from 'antd'; +import { ClusterOutlined, ContainerOutlined } from '@ant-design/icons'; +import { + Card, + Col, + Radio, + RadioChangeEvent, + Row, + Skeleton, + Typography, +} from 'antd'; import cx from 'classnames'; import Uplot from 'components/Uplot'; import { ENTITY_VERSION_V4 } from 'constants/app'; @@ -10,15 +19,27 @@ import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults'; import getStartEndRangeTime from 'lib/getStartEndRangeTime'; import { getUPlotChartOptions } from 'lib/uPlotLib/getUplotChartOptions'; import { getUPlotChartData } from 'lib/uPlotLib/utils/getUplotChartData'; -import { useMemo, useRef } from 'react'; +import { useMemo, useRef, useState } from 'react'; import { useQueries, UseQueryResult } from 'react-query'; import { SuccessResponse } from 'types/api'; import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange'; import { InfraMetricsSProps } from '../LogDetailedView.types'; -import { cardTitles, getQueryPayload } from './constants'; +import { + cardTitles, + getHostQueryPayload, + getNodeQueryPayload, + getQueryPayload, + nodeCardTitles, + VIEW_TYPES, +} from './constants'; function InfraMetrics({ logData }: InfraMetricsSProps): JSX.Element { + const podName = logData.resources_string?.['k8s.pod.name'] + ? (logData.resources_string?.['k8s.pod.name'] as string) + : ''; + const initialView = podName ? VIEW_TYPES.POD : VIEW_TYPES.NODE; + const [selectedView, setSelectedView] = useState(initialView); const { start, end } = getStartEndRangeTime({ type: 'GLOBAL_TIME', interval: '3h', @@ -29,15 +50,28 @@ function InfraMetrics({ logData }: InfraMetricsSProps): JSX.Element { const clusterName = logData.resources_string?.['k8s.cluster.name'] ? (logData.resources_string?.['k8s.cluster.name'] as string) : ''; - const podName = logData.resources_string?.['k8s.pod.name'] - ? (logData.resources_string?.['k8s.pod.name'] as string) + const nodeName = logData.resources_string?.['k8s.node.name'] + ? (logData.resources_string?.['k8s.node.name'] as string) + : ''; + const hostName = logData.resources_string?.host_name + ? (logData.resources_string?.host_name as string) : ''; + const queryPayloads = useMemo(() => { + if (selectedView === VIEW_TYPES.NODE) { + if (nodeName) { + return getNodeQueryPayload(clusterName, nodeName); + } + return getHostQueryPayload(hostName); + } + return getQueryPayload(clusterName, podName); + }, [selectedView, clusterName, podName, nodeName, hostName]); const queries = useQueries( - getQueryPayload(clusterName, podName).map((payload) => ({ - queryKey: ['metrics', payload, ENTITY_VERSION_V4], + queryPayloads.map((payload) => ({ + queryKey: ['metrics', payload, ENTITY_VERSION_V4, selectedView], queryFn: (): Promise> => GetMetricQueryRange(payload, ENTITY_VERSION_V4), + enabled: !!payload, })), ); @@ -78,45 +112,97 @@ function InfraMetrics({ logData }: InfraMetricsSProps): JSX.Element { [queries, isDarkMode, dimensions, minTimeScale, maxTimeScale], ); + const handleModeChange = (e: RadioChangeEvent): void => { + setSelectedView(e.target.value); + }; + const renderCardContent = ( - query: UseQueryResult, unknown>, + query: UseQueryResult>, idx: number, ): JSX.Element => { if (query.isLoading) { return ; } - if (query.error) { - const errorMessage = - (query.error as Error)?.message || 'Something went wrong'; - return
{errorMessage}
; + return ( +
{(query.error as Error)?.message || 'Something went wrong'}
+ ); } - return (
); }; + + const renderNodeMetrics = (): JSX.Element => ( + + {queries.map((query, idx) => ( + + {nodeCardTitles[idx]} + + {renderCardContent(query, idx)} + + + ))} + + ); + const renderPodMetrics = (): JSX.Element => ( + + {queries.map((query, idx) => ( + + {cardTitles[idx]} + + {renderCardContent(query, idx)} + + + ))} + + ); return (
- - {queries.map((query, idx) => ( - - {cardTitles[idx]} - - {renderCardContent(query, idx)} - - - ))} - + + +
+ + Node +
+ + {podName && ( + +
+ + Pod +
+ + )} + + {selectedView === VIEW_TYPES.NODE && renderNodeMetrics()} + {selectedView === VIEW_TYPES.POD && podName && renderPodMetrics()}
); } diff --git a/frontend/src/container/LogDetailedView/InfraMetrics/constants.ts b/frontend/src/container/LogDetailedView/InfraMetrics/constants.ts index 9d5567bdd1..f59406275d 100644 --- a/frontend/src/container/LogDetailedView/InfraMetrics/constants.ts +++ b/frontend/src/container/LogDetailedView/InfraMetrics/constants.ts @@ -5,6 +5,398 @@ import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse'; import { EQueryType } from 'types/common/dashboard'; import { DataSource } from 'types/common/queryBuilder'; +// export const getQueryPayload = ( +// clusterName: string, +// podName: string, +// ): GetQueryResultsProps[] => [ +// { +// selectedTime: 'GLOBAL_TIME', +// graphType: PANEL_TYPES.TIME_SERIES, +// query: { +// builder: { +// queryData: [ +// { +// aggregateAttribute: { +// dataType: DataTypes.Float64, +// id: 'k8s_pod_cpu_utilization--float64----true', +// isColumn: true, +// key: 'k8s_pod_cpu_utilization', +// type: '', +// }, +// aggregateOperator: 'avg', +// dataSource: DataSource.METRICS, +// disabled: false, +// expression: 'A', +// filters: { +// items: [ +// { +// id: '9a0ffaf3', +// key: { +// dataType: DataTypes.String, +// id: 'k8s_cluster_name--string--tag--false', +// isColumn: false, +// key: 'k8s_cluster_name', +// type: 'tag', +// }, +// op: '=', +// value: clusterName, +// }, +// { +// id: '9a0ffaf3', +// key: { +// dataType: DataTypes.String, +// id: 'k8s_pod_name--string--tag--false', +// isColumn: false, +// key: 'k8s_pod_name', +// type: 'tag', +// }, +// op: '=', +// value: podName, +// }, +// ], +// op: 'AND', +// }, +// groupBy: [ +// { +// dataType: DataTypes.String, +// id: 'k8s_pod_name--string--tag--false', +// isColumn: false, +// key: 'k8s_pod_name', +// type: 'tag', +// }, +// ], +// having: [], +// legend: '{{k8s_pod_name}}', +// limit: null, +// orderBy: [], +// queryName: 'A', +// reduceTo: 'sum', +// spaceAggregation: 'sum', +// stepInterval: 60, +// timeAggregation: 'avg', +// functions: [], +// }, +// ], +// queryFormulas: [], +// }, +// clickhouse_sql: [ +// { +// disabled: false, +// legend: '', +// name: 'A', +// query: '', +// }, +// ], +// id: '3fe84db4-8f8b-44ba-b903-2daaab59c756', +// promql: [ +// { +// disabled: false, +// legend: '', +// name: 'A', +// query: '', +// }, +// ], +// queryType: EQueryType.QUERY_BUILDER, +// }, +// globalSelectedInterval: '3h', +// variables: {}, +// formatForWeb: false, +// }, +// { +// selectedTime: 'GLOBAL_TIME', +// graphType: PANEL_TYPES.TIME_SERIES, +// query: { +// builder: { +// queryData: [ +// { +// aggregateAttribute: { +// dataType: DataTypes.Float64, +// id: 'k8s_pod_memory_usage--float64----true', +// isColumn: true, +// key: 'k8s_pod_memory_usage', +// type: '', +// }, +// aggregateOperator: 'avg', +// dataSource: DataSource.METRICS, +// disabled: false, +// expression: 'A', +// filters: { +// items: [ +// { +// id: '9a0ffaf3', +// key: { +// dataType: DataTypes.String, +// id: 'k8s_cluster_name--string--tag--false', +// isColumn: false, +// key: 'k8s_cluster_name', +// type: 'tag', +// }, +// op: '=', +// value: clusterName, +// }, +// { +// id: '2d8022f6', +// key: { +// dataType: DataTypes.String, +// id: 'k8s_pod_name--string--tag--false', +// isColumn: false, +// key: 'k8s_pod_name', +// type: 'tag', +// }, +// op: '=', +// value: podName, +// }, +// ], +// op: 'AND', +// }, +// groupBy: [ +// { +// dataType: DataTypes.String, +// id: 'k8s_pod_name--string--tag--false', +// isColumn: false, +// key: 'k8s_pod_name', +// type: 'tag', +// }, +// ], +// having: [], +// legend: '{{k8s_pod_name}}', +// limit: null, +// orderBy: [], +// queryName: 'A', +// reduceTo: 'sum', +// spaceAggregation: 'sum', +// stepInterval: 60, +// timeAggregation: 'avg', +// functions: [], +// }, +// ], +// queryFormulas: [], +// }, +// clickhouse_sql: [ +// { +// disabled: false, +// legend: '', +// name: 'A', +// query: '', +// }, +// ], +// id: '59c73365-4180-4ddd-9406-2e2d8cfbc0d9', +// promql: [ +// { +// disabled: false, +// legend: '', +// name: 'A', +// query: '', +// }, +// ], +// queryType: EQueryType.QUERY_BUILDER, +// }, +// globalSelectedInterval: '3h', +// variables: {}, +// formatForWeb: false, +// }, +// { +// selectedTime: 'GLOBAL_TIME', +// graphType: PANEL_TYPES.TIME_SERIES, +// query: { +// builder: { +// queryData: [ +// { +// aggregateAttribute: { +// dataType: DataTypes.Float64, +// id: 'k8s_pod_network_io--float64----true', +// isColumn: true, +// key: 'k8s_pod_network_io', +// type: '', +// }, +// aggregateOperator: 'sum_rate', +// dataSource: DataSource.METRICS, +// disabled: false, +// expression: 'A', +// filters: { +// items: [ +// { +// id: '9a0ffaf3', +// key: { +// dataType: DataTypes.String, +// id: 'k8s_cluster_name--string--tag--false', +// isColumn: false, +// key: 'k8s_cluster_name', +// type: 'tag', +// }, +// op: '=', +// value: clusterName, +// }, +// { +// id: 'c32821ed', +// key: { +// dataType: DataTypes.String, +// id: 'k8s_pod_name--string--tag--false', +// isColumn: false, +// key: 'k8s_pod_name', +// type: 'tag', +// }, +// op: '=', +// value: podName, +// }, +// ], +// op: 'AND', +// }, +// groupBy: [ +// { +// dataType: DataTypes.String, +// id: 'direction--string--tag--false', +// isColumn: false, +// key: 'direction', +// type: 'tag', +// }, +// { +// dataType: DataTypes.String, +// id: 'interface--string--tag--false', +// isColumn: false, +// key: 'interface', +// type: 'tag', +// }, +// { +// dataType: DataTypes.String, +// id: 'k8s_pod_name--string--tag--false', +// isColumn: false, +// key: 'k8s_pod_name', +// type: 'tag', +// }, +// ], +// having: [], +// legend: '{{k8s_pod_name}}-{{interface}}-{{direction}}', +// limit: null, +// orderBy: [], +// queryName: 'A', +// reduceTo: 'sum', +// spaceAggregation: 'sum', +// stepInterval: 60, +// timeAggregation: 'rate', +// functions: [], +// }, +// ], +// queryFormulas: [], +// }, +// clickhouse_sql: [ +// { +// disabled: false, +// legend: '', +// name: 'A', +// query: '', +// }, +// ], +// id: '534b461d-d992-4a30-ba17-ed7aac95a55b', +// promql: [ +// { +// disabled: false, +// legend: '', +// name: 'A', +// query: '', +// }, +// ], +// queryType: EQueryType.QUERY_BUILDER, +// }, +// globalSelectedInterval: '3h', +// variables: {}, +// formatForWeb: false, +// }, +// { +// selectedTime: 'GLOBAL_TIME', +// graphType: PANEL_TYPES.TIME_SERIES, +// query: { +// builder: { +// queryData: [ +// { +// aggregateAttribute: { +// dataType: DataTypes.Float64, +// id: 'k8s_pod_filesystem_usage--float64----true', +// isColumn: true, +// key: 'k8s_pod_filesystem_usage', +// type: '', +// }, +// aggregateOperator: 'avg', +// dataSource: DataSource.METRICS, +// disabled: false, +// expression: 'A', +// filters: { +// items: [ +// { +// id: '9a0ffaf3', +// key: { +// dataType: DataTypes.String, +// id: 'k8s_cluster_name--string--tag--false', +// isColumn: false, +// key: 'k8s_cluster_name', +// type: 'tag', +// }, +// op: '=', +// value: clusterName, +// }, +// { +// id: 'ba47cf47', +// key: { +// dataType: DataTypes.String, +// id: 'k8s_pod_name--string--tag--false', +// isColumn: false, +// key: 'k8s_pod_name', +// type: 'tag', +// }, +// op: '=', +// value: podName, +// }, +// ], +// op: 'AND', +// }, +// groupBy: [ +// { +// dataType: DataTypes.String, +// id: 'k8s_pod_name--string--tag--false', +// isColumn: false, +// key: 'k8s_pod_name', +// type: 'tag', +// }, +// ], +// having: [], +// legend: '{{k8s_pod_name}}', +// limit: null, +// orderBy: [], +// queryName: 'A', +// reduceTo: 'sum', +// spaceAggregation: 'sum', +// stepInterval: 60, +// timeAggregation: 'avg', +// functions: [], +// }, +// ], +// queryFormulas: [], +// }, +// clickhouse_sql: [ +// { +// disabled: false, +// legend: '', +// name: 'A', +// query: '', +// }, +// ], +// id: '5a709367-ad0b-4a0a-9f7e-884e555f7686', +// promql: [ +// { +// disabled: false, +// legend: '', +// name: 'A', +// query: '', +// }, +// ], +// queryType: EQueryType.QUERY_BUILDER, +// }, +// globalSelectedInterval: '3h', +// variables: {}, +// formatForWeb: false, +// }, +// ]; + export const getQueryPayload = ( clusterName: string, podName: string, @@ -18,19 +410,20 @@ export const getQueryPayload = ( { aggregateAttribute: { dataType: DataTypes.Float64, - id: 'k8s_pod_cpu_utilization--float64----true', + id: 'container_cpu_utilization--float64--Gauge--true', isColumn: true, - key: 'k8s_pod_cpu_utilization', - type: '', + isJSON: false, + key: 'container_cpu_utilization', + type: 'Gauge', }, aggregateOperator: 'avg', dataSource: DataSource.METRICS, - disabled: false, + disabled: true, expression: 'A', filters: { items: [ { - id: '9a0ffaf3', + id: '0a862947', key: { dataType: DataTypes.String, id: 'k8s_cluster_name--string--tag--false', @@ -42,7 +435,7 @@ export const getQueryPayload = ( value: clusterName, }, { - id: '9a0ffaf3', + id: 'cd13fbf0', key: { dataType: DataTypes.String, id: 'k8s_pod_name--string--tag--false', @@ -50,23 +443,25 @@ export const getQueryPayload = ( key: 'k8s_pod_name', type: 'tag', }, - op: '=', + op: 'in', value: podName, }, ], op: 'AND', }, + functions: [], groupBy: [ { dataType: DataTypes.String, id: 'k8s_pod_name--string--tag--false', isColumn: false, + isJSON: false, key: 'k8s_pod_name', type: 'tag', }, ], having: [], - legend: '{{k8s_pod_name}}', + legend: 'usage - {{k8s_pod_name}}', limit: null, orderBy: [], queryName: 'A', @@ -74,10 +469,81 @@ export const getQueryPayload = ( spaceAggregation: 'sum', stepInterval: 60, timeAggregation: 'avg', + }, + { + aggregateAttribute: { + dataType: DataTypes.Float64, + id: 'k8s_container_cpu_limit--float64--Gauge--true', + isColumn: true, + isJSON: false, + key: 'k8s_container_cpu_limit', + type: 'Gauge', + }, + aggregateOperator: 'latest', + dataSource: DataSource.METRICS, + disabled: true, + expression: 'B', + filters: { + items: [ + { + id: 'bfb8acf7', + key: { + dataType: DataTypes.String, + id: 'k8s_cluster_name--string--tag--false', + isColumn: false, + isJSON: false, + key: 'k8s_cluster_name', + type: 'tag', + }, + op: '=', + value: clusterName, + }, + { + id: 'e09ba819', + key: { + dataType: DataTypes.String, + id: 'k8s_pod_name--string--tag--false', + isColumn: false, + isJSON: false, + key: 'k8s_pod_name', + type: 'tag', + }, + op: 'in', + value: ['{{.k8s_node_name}}'], + }, + ], + op: 'AND', + }, functions: [], + groupBy: [ + { + dataType: DataTypes.String, + id: 'k8s_pod_name--string--tag--false', + isColumn: false, + isJSON: false, + key: 'k8s_pod_name', + type: 'tag', + }, + ], + having: [], + legend: 'limit - {{k8s_pod_name}}', + limit: null, + orderBy: [], + queryName: 'B', + reduceTo: 'avg', + spaceAggregation: 'sum', + stepInterval: 60, + timeAggregation: 'latest', + }, + ], + queryFormulas: [ + { + disabled: false, + expression: 'A*100/B', + legend: '{{k8s_pod_name}}', + queryName: 'F1', }, ], - queryFormulas: [], }, clickhouse_sql: [ { @@ -87,7 +553,7 @@ export const getQueryPayload = ( query: '', }, ], - id: '3fe84db4-8f8b-44ba-b903-2daaab59c756', + id: '6d5ccd81-0ea1-4fb9-a66b-7f0fe2f15165', promql: [ { disabled: false, @@ -111,19 +577,20 @@ export const getQueryPayload = ( { aggregateAttribute: { dataType: DataTypes.Float64, - id: 'k8s_pod_memory_usage--float64----true', + id: 'k8s_pod_filesystem_available--float64--Gauge--true', isColumn: true, - key: 'k8s_pod_memory_usage', - type: '', + isJSON: false, + key: 'k8s_pod_filesystem_available', + type: 'Gauge', }, aggregateOperator: 'avg', dataSource: DataSource.METRICS, - disabled: false, + disabled: true, expression: 'A', filters: { items: [ { - id: '9a0ffaf3', + id: 'c0f3e7ef', key: { dataType: DataTypes.String, id: 'k8s_cluster_name--string--tag--false', @@ -135,7 +602,7 @@ export const getQueryPayload = ( value: clusterName, }, { - id: '2d8022f6', + id: 'ae457343', key: { dataType: DataTypes.String, id: 'k8s_pod_name--string--tag--false', @@ -143,23 +610,25 @@ export const getQueryPayload = ( key: 'k8s_pod_name', type: 'tag', }, - op: '=', + op: 'in', value: podName, }, ], op: 'AND', }, + functions: [], groupBy: [ { dataType: DataTypes.String, id: 'k8s_pod_name--string--tag--false', isColumn: false, + isJSON: false, key: 'k8s_pod_name', type: 'tag', }, ], having: [], - legend: '{{k8s_pod_name}}', + legend: '', limit: null, orderBy: [], queryName: 'A', @@ -167,10 +636,91 @@ export const getQueryPayload = ( spaceAggregation: 'sum', stepInterval: 60, timeAggregation: 'avg', + }, + { + aggregateAttribute: { + dataType: DataTypes.Float64, + id: 'k8s_pod_filesystem_capacity--float64--Gauge--true', + isColumn: true, + isJSON: false, + key: 'k8s_pod_filesystem_capacity', + type: 'Gauge', + }, + aggregateOperator: 'avg', + dataSource: DataSource.METRICS, + disabled: true, + expression: 'B', + filters: { + items: [ + { + id: '8a387fb7', + key: { + dataType: DataTypes.String, + id: 'k8s_cluster_name--string--tag--false', + isColumn: false, + key: 'k8s_cluster_name', + type: 'tag', + }, + op: '=', + value: clusterName, + }, + { + id: '6ce28dde', + key: { + dataType: DataTypes.String, + id: 'k8s_node_name--string--tag--false', + isColumn: false, + key: 'k8s_node_name', + type: 'tag', + }, + op: 'in', + value: ['{{.k8s_node_name}}'], + }, + { + id: '3a50eee8', + key: { + dataType: DataTypes.String, + id: 'k8s_namespace_name--string--tag--false', + isColumn: false, + key: 'k8s_namespace_name', + type: 'tag', + }, + op: 'in', + value: ['{{.k8s_namespace_name}}'], + }, + ], + op: 'AND', + }, functions: [], + groupBy: [ + { + dataType: DataTypes.String, + id: 'k8s_pod_name--string--tag--false', + isColumn: false, + isJSON: false, + key: 'k8s_pod_name', + type: 'tag', + }, + ], + having: [], + legend: '', + limit: null, + orderBy: [], + queryName: 'B', + reduceTo: 'sum', + spaceAggregation: 'sum', + stepInterval: 60, + timeAggregation: 'avg', + }, + ], + queryFormulas: [ + { + disabled: false, + expression: '(B-A)/B', + legend: '{{k8s_pod_name}}', + queryName: 'F1', }, ], - queryFormulas: [], }, clickhouse_sql: [ { @@ -180,7 +730,7 @@ export const getQueryPayload = ( query: '', }, ], - id: '59c73365-4180-4ddd-9406-2e2d8cfbc0d9', + id: 'bbdc1096-339c-490c-a977-6eff00e3d72f', promql: [ { disabled: false, @@ -204,19 +754,20 @@ export const getQueryPayload = ( { aggregateAttribute: { dataType: DataTypes.Float64, - id: 'k8s_pod_network_io--float64----true', + id: 'container_memory_usage--float64--Gauge--true', isColumn: true, - key: 'k8s_pod_network_io', - type: '', + isJSON: false, + key: 'container_memory_usage', + type: 'Gauge', }, - aggregateOperator: 'sum_rate', + aggregateOperator: 'avg', dataSource: DataSource.METRICS, - disabled: false, + disabled: true, expression: 'A', filters: { items: [ { - id: '9a0ffaf3', + id: 'ea3df3e7', key: { dataType: DataTypes.String, id: 'k8s_cluster_name--string--tag--false', @@ -228,7 +779,7 @@ export const getQueryPayload = ( value: clusterName, }, { - id: 'c32821ed', + id: '39b21fe0', key: { dataType: DataTypes.String, id: 'k8s_pod_name--string--tag--false', @@ -236,48 +787,120 @@ export const getQueryPayload = ( key: 'k8s_pod_name', type: 'tag', }, - op: '=', + op: 'in', value: podName, }, ], op: 'AND', }, + functions: [], groupBy: [ { dataType: DataTypes.String, - id: 'direction--string--tag--false', - isColumn: false, - key: 'direction', - type: 'tag', - }, - { - dataType: DataTypes.String, - id: 'interface--string--tag--false', + id: 'k8s_pod_name--string--tag--false', isColumn: false, - key: 'interface', + isJSON: false, + key: 'k8s_pod_name', type: 'tag', }, + ], + having: [], + legend: '', + limit: null, + orderBy: [], + queryName: 'A', + reduceTo: 'sum', + spaceAggregation: 'sum', + stepInterval: 60, + timeAggregation: 'avg', + }, + { + aggregateAttribute: { + dataType: DataTypes.Float64, + id: 'k8s_container_memory_request--float64--Gauge--true', + isColumn: true, + isJSON: false, + key: 'k8s_container_memory_request', + type: 'Gauge', + }, + aggregateOperator: 'latest', + dataSource: DataSource.METRICS, + disabled: true, + expression: 'B', + filters: { + items: [ + { + id: '7401a4b9', + key: { + dataType: DataTypes.String, + id: 'k8s_cluster_name--string--tag--false', + isColumn: false, + isJSON: false, + key: 'k8s_cluster_name', + type: 'tag', + }, + op: '=', + value: clusterName, + }, + { + id: '7cdad1cb', + key: { + dataType: DataTypes.String, + id: 'k8s_node_name--string--tag--false', + isColumn: false, + isJSON: false, + key: 'k8s_node_name', + type: 'tag', + }, + op: 'in', + value: podName, + }, + { + id: 'bd954dbe', + key: { + dataType: DataTypes.String, + id: 'k8s_namespace_name--string--tag--false', + isColumn: false, + isJSON: false, + key: 'k8s_namespace_name', + type: 'tag', + }, + op: 'in', + value: ['{{.k8s_namespace_name}}'], + }, + ], + op: 'AND', + }, + functions: [], + groupBy: [ { dataType: DataTypes.String, id: 'k8s_pod_name--string--tag--false', isColumn: false, + isJSON: false, key: 'k8s_pod_name', type: 'tag', }, ], having: [], - legend: '{{k8s_pod_name}}-{{interface}}-{{direction}}', + legend: '', limit: null, orderBy: [], - queryName: 'A', - reduceTo: 'sum', + queryName: 'B', + reduceTo: 'avg', spaceAggregation: 'sum', stepInterval: 60, - timeAggregation: 'rate', - functions: [], + timeAggregation: 'latest', + }, + ], + queryFormulas: [ + { + disabled: false, + expression: 'A*100/B', + legend: '{{k8s_pod_name}}', + queryName: 'F1', }, ], - queryFormulas: [], }, clickhouse_sql: [ { @@ -287,7 +910,7 @@ export const getQueryPayload = ( query: '', }, ], - id: '534b461d-d992-4a30-ba17-ed7aac95a55b', + id: '4d03a0ff-4fa5-4b19-b397-97f80ba9e0ac', promql: [ { disabled: false, @@ -311,19 +934,20 @@ export const getQueryPayload = ( { aggregateAttribute: { dataType: DataTypes.Float64, - id: 'k8s_pod_filesystem_usage--float64----true', + id: 'k8s_pod_network_io--float64--Sum--true', isColumn: true, - key: 'k8s_pod_filesystem_usage', - type: '', + isJSON: false, + key: 'k8s_pod_network_io', + type: 'Sum', }, - aggregateOperator: 'avg', + aggregateOperator: 'rate', dataSource: DataSource.METRICS, disabled: false, expression: 'A', filters: { items: [ { - id: '9a0ffaf3', + id: '877385bf', key: { dataType: DataTypes.String, id: 'k8s_cluster_name--string--tag--false', @@ -335,7 +959,7 @@ export const getQueryPayload = ( value: clusterName, }, { - id: 'ba47cf47', + id: '9613b4da', key: { dataType: DataTypes.String, id: 'k8s_pod_name--string--tag--false', @@ -343,13 +967,42 @@ export const getQueryPayload = ( key: 'k8s_pod_name', type: 'tag', }, - op: '=', + op: 'in', value: podName, }, ], op: 'AND', }, + functions: [], groupBy: [ + { + dataType: DataTypes.String, + id: 'interface--string--tag--false', + isColumn: false, + key: 'interface', + type: 'tag', + }, + { + dataType: DataTypes.String, + id: 'direction--string--tag--false', + isColumn: false, + key: 'direction', + type: 'tag', + }, + { + dataType: DataTypes.String, + id: 'k8s_node_name--string--tag--false', + isColumn: false, + key: 'k8s_node_name', + type: 'tag', + }, + { + dataType: DataTypes.String, + id: 'k8s_namespace_name--string--tag--false', + isColumn: false, + key: 'k8s_namespace_name', + type: 'tag', + }, { dataType: DataTypes.String, id: 'k8s_pod_name--string--tag--false', @@ -359,15 +1012,15 @@ export const getQueryPayload = ( }, ], having: [], - legend: '{{k8s_pod_name}}', + legend: + '{{k8s_namespace_name}}-{{k8s_pod_name}}-{{interface}}-{{direction}}', limit: null, orderBy: [], queryName: 'A', reduceTo: 'sum', spaceAggregation: 'sum', stepInterval: 60, - timeAggregation: 'avg', - functions: [], + timeAggregation: 'rate', }, ], queryFormulas: [], @@ -380,7 +1033,7 @@ export const getQueryPayload = ( query: '', }, ], - id: '5a709367-ad0b-4a0a-9f7e-884e555f7686', + id: '4b255d6d-4cde-474d-8866-f4418583c18b', promql: [ { disabled: false, @@ -395,11 +1048,2442 @@ export const getQueryPayload = ( variables: {}, formatForWeb: false, }, -]; - -export const cardTitles: string[] = [ - 'Pod CPU usage', - 'Pod memory usage (WSS)', - 'Pod network IO', - 'Pod filesystem usage', + { + selectedTime: 'GLOBAL_TIME', + graphType: PANEL_TYPES.TIME_SERIES, + query: { + builder: { + queryData: [ + { + aggregateAttribute: { + dataType: DataTypes.Float64, + id: 'container_cpu_utilization--float64--Gauge--true', + isColumn: true, + isJSON: false, + key: 'container_cpu_utilization', + type: 'Gauge', + }, + aggregateOperator: 'avg', + dataSource: DataSource.METRICS, + disabled: true, + expression: 'A', + filters: { + items: [ + { + id: '8426b52f', + key: { + dataType: DataTypes.String, + id: 'k8s_cluster_name--string--tag--false', + isColumn: false, + key: 'k8s_cluster_name', + type: 'tag', + }, + op: '=', + value: clusterName, + }, + { + id: '2f67240c', + key: { + dataType: DataTypes.String, + id: 'k8s_pod_name--string--tag--false', + isColumn: false, + key: 'k8s_pod_name', + type: 'tag', + }, + op: 'in', + value: podName, + }, + ], + op: 'AND', + }, + functions: [], + groupBy: [ + { + dataType: DataTypes.String, + id: 'k8s_pod_name--string--tag--false', + isColumn: false, + isJSON: false, + key: 'k8s_pod_name', + type: 'tag', + }, + ], + having: [], + legend: '', + limit: null, + orderBy: [], + queryName: 'A', + reduceTo: 'sum', + spaceAggregation: 'sum', + stepInterval: 60, + timeAggregation: 'avg', + }, + { + aggregateAttribute: { + dataType: DataTypes.Float64, + id: 'k8s_container_cpu_request--float64--Gauge--true', + isColumn: true, + isJSON: false, + key: 'k8s_container_cpu_request', + type: 'Gauge', + }, + aggregateOperator: 'latest', + dataSource: DataSource.METRICS, + disabled: true, + expression: 'B', + filters: { + items: [ + { + id: '8c4667e1', + key: { + dataType: DataTypes.String, + id: 'k8s_cluster_name--string--tag--false', + isColumn: false, + isJSON: false, + key: 'k8s_cluster_name', + type: 'tag', + }, + op: '=', + value: clusterName, + }, + { + id: 'b16e7306', + key: { + dataType: DataTypes.String, + id: 'k8s_pod_name--string--tag--false', + isColumn: false, + isJSON: false, + key: 'k8s_pod_name', + type: 'tag', + }, + op: 'in', + value: podName, + }, + ], + op: 'AND', + }, + functions: [], + groupBy: [ + { + dataType: DataTypes.String, + id: 'k8s_pod_name--string--tag--false', + isColumn: false, + isJSON: false, + key: 'k8s_pod_name', + type: 'tag', + }, + ], + having: [], + legend: '', + limit: null, + orderBy: [], + queryName: 'B', + reduceTo: 'avg', + spaceAggregation: 'sum', + stepInterval: 60, + timeAggregation: 'latest', + }, + ], + queryFormulas: [ + { + disabled: false, + expression: 'A*100/B', + legend: '{{k8s_pod_name}}', + queryName: 'F1', + }, + ], + }, + clickhouse_sql: [ + { + disabled: false, + legend: '', + name: 'A', + query: '', + }, + ], + id: '7bb3a6f5-d1c6-4f2e-9cc9-7dcc46db398f', + promql: [ + { + disabled: false, + legend: '', + name: 'A', + query: '', + }, + ], + queryType: EQueryType.QUERY_BUILDER, + }, + globalSelectedInterval: '3h', + variables: {}, + formatForWeb: false, + }, + { + selectedTime: 'GLOBAL_TIME', + graphType: PANEL_TYPES.TIME_SERIES, + query: { + builder: { + queryData: [ + { + aggregateAttribute: { + dataType: DataTypes.Float64, + id: 'container_memory_usage--float64--Gauge--true', + isColumn: true, + isJSON: false, + key: 'container_memory_usage', + type: 'Gauge', + }, + aggregateOperator: 'avg', + dataSource: DataSource.METRICS, + disabled: true, + expression: 'A', + filters: { + items: [ + { + id: 'f2a3175c', + key: { + dataType: DataTypes.String, + id: 'k8s_cluster_name--string--tag--false', + isColumn: false, + key: 'k8s_cluster_name', + type: 'tag', + }, + op: '=', + value: clusterName, + }, + { + id: 'fc17ff21', + key: { + dataType: DataTypes.String, + id: 'k8s_pod_name--string--tag--false', + isColumn: false, + key: 'k8s_pod_name', + type: 'tag', + }, + op: 'in', + value: podName, + }, + ], + op: 'AND', + }, + functions: [], + groupBy: [ + { + dataType: DataTypes.String, + id: 'k8s_pod_name--string--tag--false', + isColumn: false, + isJSON: false, + key: 'k8s_pod_name', + type: 'tag', + }, + ], + having: [], + legend: '', + limit: null, + orderBy: [], + queryName: 'A', + reduceTo: 'sum', + spaceAggregation: 'sum', + stepInterval: 60, + timeAggregation: 'avg', + }, + { + aggregateAttribute: { + dataType: DataTypes.Float64, + id: 'k8s_container_memory_limit--float64--Gauge--true', + isColumn: true, + isJSON: false, + key: 'k8s_container_memory_limit', + type: 'Gauge', + }, + aggregateOperator: 'latest', + dataSource: DataSource.METRICS, + disabled: true, + expression: 'B', + filters: { + items: [ + { + id: '175e96b7', + key: { + dataType: DataTypes.String, + id: 'k8s_cluster_name--string--tag--false', + isColumn: false, + isJSON: false, + key: 'k8s_cluster_name', + type: 'tag', + }, + op: '=', + value: clusterName, + }, + { + id: '1d9fbe48', + key: { + dataType: DataTypes.String, + id: 'k8s_pod_name--string--tag--false', + isColumn: false, + isJSON: false, + key: 'k8s_pod_name', + type: 'tag', + }, + op: 'in', + value: podName, + }, + ], + op: 'AND', + }, + functions: [], + groupBy: [ + { + dataType: DataTypes.String, + id: 'k8s_pod_name--string--tag--false', + isColumn: false, + isJSON: false, + key: 'k8s_pod_name', + type: 'tag', + }, + ], + having: [], + legend: '', + limit: null, + orderBy: [], + queryName: 'B', + reduceTo: 'avg', + spaceAggregation: 'sum', + stepInterval: 60, + timeAggregation: 'latest', + }, + ], + queryFormulas: [ + { + disabled: false, + expression: 'A*100/B', + legend: '{{k8s_pod_name}}', + queryName: 'F1', + }, + ], + }, + clickhouse_sql: [ + { + disabled: false, + legend: '', + name: 'A', + query: '', + }, + ], + id: 'ad491f19-0f83-4dd4-bb8f-bec295c18d1b', + promql: [ + { + disabled: false, + legend: '', + name: 'A', + query: '', + }, + ], + queryType: EQueryType.QUERY_BUILDER, + }, + globalSelectedInterval: '3h', + variables: {}, + formatForWeb: false, + }, + { + selectedTime: 'GLOBAL_TIME', + graphType: PANEL_TYPES.TIME_SERIES, + query: { + builder: { + queryData: [ + { + aggregateAttribute: { + dataType: DataTypes.Float64, + id: 'container_cpu_utilization--float64--Gauge--true', + isColumn: true, + isJSON: false, + key: 'container_cpu_utilization', + type: 'Gauge', + }, + aggregateOperator: 'avg', + dataSource: DataSource.METRICS, + disabled: false, + expression: 'A', + filters: { + items: [ + { + id: '6e050953', + key: { + dataType: DataTypes.String, + id: 'k8s_cluster_name--string--tag--false', + isColumn: false, + isJSON: false, + key: 'k8s_cluster_name', + type: 'tag', + }, + op: '=', + value: clusterName, + }, + { + id: '60fe5e62', + key: { + dataType: DataTypes.String, + id: 'k8s_pod_name--string--tag--false', + isColumn: false, + isJSON: false, + key: 'k8s_pod_name', + type: 'tag', + }, + op: 'in', + value: podName, + }, + ], + op: 'AND', + }, + functions: [], + groupBy: [ + { + dataType: DataTypes.String, + id: 'k8s_pod_name--string--tag--false', + isColumn: false, + isJSON: false, + key: 'k8s_pod_name', + type: 'tag', + }, + ], + having: [], + legend: '{{k8s_pod_name}}', + limit: null, + orderBy: [], + queryName: 'A', + reduceTo: 'avg', + spaceAggregation: 'sum', + stepInterval: 60, + timeAggregation: 'avg', + }, + ], + queryFormulas: [], + }, + clickhouse_sql: [ + { + disabled: false, + legend: '', + name: 'A', + query: '', + }, + ], + id: '9b92756a-b445-45f8-90f4-d26f3ef28f8f', + promql: [ + { + disabled: false, + legend: '', + name: 'A', + query: '', + }, + ], + queryType: EQueryType.QUERY_BUILDER, + }, + globalSelectedInterval: '3h', + variables: {}, + formatForWeb: false, + }, + { + selectedTime: 'GLOBAL_TIME', + graphType: PANEL_TYPES.TIME_SERIES, + query: { + builder: { + queryData: [ + { + aggregateAttribute: { + dataType: DataTypes.Float64, + id: 'container_memory_usage--float64--Gauge--true', + isColumn: true, + isJSON: false, + key: 'container_memory_usage', + type: 'Gauge', + }, + aggregateOperator: 'avg', + dataSource: DataSource.METRICS, + disabled: false, + expression: 'A', + filters: { + items: [ + { + id: 'a4250695', + key: { + dataType: DataTypes.String, + id: 'k8s_cluster_name--string--tag--false', + isColumn: false, + isJSON: false, + key: 'k8s_cluster_name', + type: 'tag', + }, + op: '=', + value: clusterName, + }, + { + id: '3b2bc32b', + key: { + dataType: DataTypes.String, + id: 'k8s_pod_name--string--tag--false', + isColumn: false, + isJSON: false, + key: 'k8s_pod_name', + type: 'tag', + }, + op: 'in', + value: podName, + }, + ], + op: 'AND', + }, + functions: [], + groupBy: [ + { + dataType: DataTypes.String, + id: 'k8s_pod_name--string--tag--false', + isColumn: false, + isJSON: false, + key: 'k8s_pod_name', + type: 'tag', + }, + ], + having: [], + legend: '{{k8s_pod_name}}', + limit: null, + orderBy: [], + queryName: 'A', + reduceTo: 'avg', + spaceAggregation: 'sum', + stepInterval: 60, + timeAggregation: 'avg', + }, + ], + queryFormulas: [], + }, + clickhouse_sql: [ + { + disabled: false, + legend: '', + name: 'A', + query: '', + }, + ], + id: 'a22c1e03-4876-4b3e-9a96-a3c3a28f9c0f', + promql: [ + { + disabled: false, + legend: '', + name: 'A', + query: '', + }, + ], + queryType: EQueryType.QUERY_BUILDER, + }, + globalSelectedInterval: '3h', + variables: {}, + formatForWeb: false, + }, +]; + +export const getNodeQueryPayload = ( + clusterName: string, + nodeName: string, +): GetQueryResultsProps[] => [ + { + selectedTime: 'GLOBAL_TIME', + graphType: PANEL_TYPES.TIME_SERIES, + query: { + builder: { + queryData: [ + { + aggregateAttribute: { + dataType: DataTypes.Float64, + id: 'k8s_node_cpu_time--float64--Sum--true', + isColumn: true, + isJSON: false, + key: 'k8s_node_cpu_time', + type: 'Sum', + }, + aggregateOperator: 'rate', + dataSource: DataSource.METRICS, + disabled: true, + expression: 'A', + filters: { + items: [ + { + id: '91223422', + key: { + dataType: DataTypes.String, + id: 'k8s_cluster_name--string--tag--false', + isColumn: false, + key: 'k8s_cluster_name', + type: 'tag', + }, + op: '=', + value: '{{.k8s_cluster_name}}', + }, + { + id: '91223422', + key: { + dataType: DataTypes.String, + id: 'k8s_node_name--string--tag--false', + isColumn: false, + key: 'k8s_node_name', + type: 'tag', + }, + op: 'in', + value: ['{{.k8s_node_name}}'], + }, + ], + op: 'AND', + }, + functions: [], + groupBy: [ + { + dataType: DataTypes.String, + id: 'k8s_node_name--string--tag--false', + isColumn: false, + key: 'k8s_node_name', + type: 'tag', + }, + ], + having: [], + legend: '{{k8s_node_name}}', + limit: null, + orderBy: [], + queryName: 'A', + reduceTo: 'sum', + spaceAggregation: 'sum', + stepInterval: 60, + timeAggregation: 'rate', + }, + { + aggregateAttribute: { + dataType: DataTypes.Float64, + id: 'k8s_node_allocatable_cpu--float64--Gauge--true', + isColumn: true, + isJSON: false, + key: 'k8s_node_allocatable_cpu', + type: 'Gauge', + }, + aggregateOperator: 'avg', + dataSource: DataSource.METRICS, + disabled: true, + expression: 'B', + filters: { + items: [ + { + id: '91223422', + key: { + dataType: DataTypes.String, + id: 'k8s_cluster_name--string--tag--false', + isColumn: false, + key: 'k8s_cluster_name', + type: 'tag', + }, + op: '=', + value: '{{.k8s_cluster_name}}', + }, + { + id: '0a54e48e', + key: { + dataType: DataTypes.String, + id: 'k8s_node_name--string--tag--false', + isColumn: false, + key: 'k8s_node_name', + type: 'tag', + }, + op: 'in', + value: ['{{.k8s_node_name}}'], + }, + ], + op: 'AND', + }, + functions: [], + groupBy: [ + { + dataType: DataTypes.String, + id: 'k8s_node_name--string--tag--false', + isColumn: false, + key: 'k8s_node_name', + type: 'tag', + }, + ], + having: [], + legend: '{{k8s_node_name}}', + limit: null, + orderBy: [], + queryName: 'B', + reduceTo: 'sum', + spaceAggregation: 'sum', + stepInterval: 60, + timeAggregation: 'avg', + }, + ], + queryFormulas: [ + { + disabled: false, + expression: 'A/B', + legend: '{{k8s_node_name}}', + queryName: 'F1', + }, + ], + }, + clickhouse_sql: [ + { + disabled: false, + legend: '', + name: 'A', + query: '', + }, + ], + id: '0a09fa11-6dc4-4511-9cc9-befe7b6a6557', + promql: [ + { + disabled: false, + legend: '', + name: 'A', + query: '', + }, + ], + queryType: EQueryType.QUERY_BUILDER, + }, + globalSelectedInterval: '3h', + variables: {}, + formatForWeb: false, + }, + { + selectedTime: 'GLOBAL_TIME', + graphType: PANEL_TYPES.TIME_SERIES, + query: { + builder: { + queryData: [ + { + aggregateAttribute: { + dataType: DataTypes.Float64, + id: 'k8s_node_filesystem_available--float64--Gauge--true', + isColumn: true, + isJSON: false, + key: 'k8s_node_filesystem_available', + type: 'Gauge', + }, + aggregateOperator: 'avg', + dataSource: DataSource.METRICS, + disabled: true, + expression: 'A', + filters: { + items: [ + { + id: '91223422', + key: { + dataType: DataTypes.String, + id: 'k8s_cluster_name--string--tag--false', + isColumn: false, + key: 'k8s_cluster_name', + type: 'tag', + }, + op: '=', + value: clusterName, + }, + { + id: 'a5dffef6', + key: { + dataType: DataTypes.String, + id: 'k8s_node_name--string--tag--false', + isColumn: false, + key: 'k8s_node_name', + type: 'tag', + }, + op: 'in', + value: nodeName, + }, + ], + op: 'AND', + }, + functions: [], + groupBy: [ + { + dataType: DataTypes.String, + id: 'k8s_node_name--string--tag--false', + isColumn: false, + key: 'k8s_node_name', + type: 'tag', + }, + ], + having: [], + legend: '', + limit: null, + orderBy: [], + queryName: 'A', + reduceTo: 'sum', + spaceAggregation: 'sum', + stepInterval: 60, + timeAggregation: 'avg', + }, + { + aggregateAttribute: { + dataType: DataTypes.Float64, + id: 'k8s_node_filesystem_capacity--float64--Gauge--true', + isColumn: true, + isJSON: false, + key: 'k8s_node_filesystem_capacity', + type: 'Gauge', + }, + aggregateOperator: 'avg', + dataSource: DataSource.METRICS, + disabled: true, + expression: 'B', + filters: { + items: [ + { + id: '91223422', + key: { + dataType: DataTypes.String, + id: 'k8s_cluster_name--string--tag--false', + isColumn: false, + key: 'k8s_cluster_name', + type: 'tag', + }, + op: '=', + value: clusterName, + }, + { + id: 'c79d5a16', + key: { + dataType: DataTypes.String, + id: 'k8s_node_name--string--tag--false', + isColumn: false, + key: 'k8s_node_name', + type: 'tag', + }, + op: 'in', + value: nodeName, + }, + ], + op: 'AND', + }, + functions: [], + groupBy: [ + { + dataType: DataTypes.String, + id: 'k8s_node_name--string--tag--false', + isColumn: false, + key: 'k8s_node_name', + type: 'tag', + }, + ], + having: [], + legend: '', + limit: null, + orderBy: [], + queryName: 'B', + reduceTo: 'sum', + spaceAggregation: 'sum', + stepInterval: 60, + timeAggregation: 'avg', + }, + ], + queryFormulas: [ + { + disabled: false, + expression: '(B-A)/B', + legend: '{{k8s_node_name}}', + queryName: 'F1', + }, + ], + }, + clickhouse_sql: [ + { + disabled: false, + legend: '', + name: 'A', + query: '', + }, + ], + id: '57eeac15-615c-4a71-9c61-8e0c0c76b045', + promql: [ + { + disabled: false, + legend: '', + name: 'A', + query: '', + }, + ], + queryType: EQueryType.QUERY_BUILDER, + }, + globalSelectedInterval: '3h', + variables: {}, + formatForWeb: false, + }, + { + selectedTime: 'GLOBAL_TIME', + graphType: PANEL_TYPES.TIME_SERIES, + query: { + builder: { + queryData: [ + { + aggregateAttribute: { + dataType: DataTypes.Float64, + id: 'k8s_node_memory_working_set--float64--Gauge--true', + isColumn: true, + isJSON: false, + key: 'k8s_node_memory_working_set', + type: 'Gauge', + }, + aggregateOperator: 'avg', + dataSource: DataSource.METRICS, + disabled: true, + expression: 'A', + filters: { + items: [ + { + id: '91223422', + key: { + dataType: DataTypes.String, + id: 'k8s_cluster_name--string--tag--false', + isColumn: false, + key: 'k8s_cluster_name', + type: 'tag', + }, + op: '=', + value: clusterName, + }, + { + id: 'e8c2a60a', + key: { + dataType: DataTypes.String, + id: 'k8s_node_name--string--tag--false', + isColumn: false, + key: 'k8s_node_name', + type: 'tag', + }, + op: 'in', + value: nodeName, + }, + ], + op: 'AND', + }, + functions: [], + groupBy: [ + { + dataType: DataTypes.String, + id: 'k8s_node_name--string--tag--false', + isColumn: false, + key: 'k8s_node_name', + type: 'tag', + }, + ], + having: [], + legend: '', + limit: null, + orderBy: [], + queryName: 'A', + reduceTo: 'sum', + spaceAggregation: 'sum', + stepInterval: 60, + timeAggregation: 'avg', + }, + { + aggregateAttribute: { + dataType: DataTypes.Float64, + id: 'k8s_node_allocatable_memory--float64--Gauge--true', + isColumn: true, + isJSON: false, + key: 'k8s_node_allocatable_memory', + type: 'Gauge', + }, + aggregateOperator: 'avg', + dataSource: DataSource.METRICS, + disabled: true, + expression: 'B', + filters: { + items: [ + { + id: '91223422', + key: { + dataType: DataTypes.String, + id: 'k8s_cluster_name--string--tag--false', + isColumn: false, + key: 'k8s_cluster_name', + type: 'tag', + }, + op: '=', + value: clusterName, + }, + { + id: 'ee687840', + key: { + dataType: DataTypes.String, + id: 'k8s_node_name--string--tag--false', + isColumn: false, + key: 'k8s_node_name', + type: 'tag', + }, + op: 'in', + value: nodeName, + }, + ], + op: 'AND', + }, + functions: [], + groupBy: [ + { + dataType: DataTypes.String, + id: 'k8s_node_name--string--tag--false', + isColumn: false, + key: 'k8s_node_name', + type: 'tag', + }, + ], + having: [], + legend: '', + limit: null, + orderBy: [], + queryName: 'B', + reduceTo: 'sum', + spaceAggregation: 'sum', + stepInterval: 60, + timeAggregation: 'avg', + }, + ], + queryFormulas: [ + { + disabled: false, + expression: 'A/B', + legend: '{{k8s_node_name}}', + queryName: 'F1', + }, + ], + }, + clickhouse_sql: [ + { + disabled: false, + legend: '', + name: 'A', + query: '', + }, + ], + id: '4cf56615-e357-4342-9a4f-ec6557477ff3', + promql: [ + { + disabled: false, + legend: '', + name: 'A', + query: '', + }, + ], + queryType: EQueryType.QUERY_BUILDER, + }, + globalSelectedInterval: '3h', + variables: {}, + formatForWeb: false, + }, + { + selectedTime: 'GLOBAL_TIME', + graphType: PANEL_TYPES.TIME_SERIES, + query: { + builder: { + queryData: [ + { + aggregateAttribute: { + dataType: DataTypes.Float64, + id: 'k8s_node_network_io--float64--Sum--true', + isColumn: true, + isJSON: false, + key: 'k8s_node_network_io', + type: 'Sum', + }, + aggregateOperator: 'rate', + dataSource: DataSource.METRICS, + disabled: false, + expression: 'A', + filters: { + items: [ + { + id: '91223422', + key: { + dataType: DataTypes.String, + id: 'k8s_cluster_name--string--tag--false', + isColumn: false, + key: 'k8s_cluster_name', + type: 'tag', + }, + op: '=', + value: clusterName, + }, + { + id: '66308505', + key: { + dataType: DataTypes.String, + id: 'k8s_node_name--string--tag--false', + isColumn: false, + key: 'k8s_node_name', + type: 'tag', + }, + op: 'in', + value: nodeName, + }, + ], + op: 'AND', + }, + functions: [], + groupBy: [ + { + dataType: DataTypes.String, + id: 'interface--string--tag--false', + isColumn: false, + key: 'interface', + type: 'tag', + }, + { + dataType: DataTypes.String, + id: 'direction--string--tag--false', + isColumn: false, + key: 'direction', + type: 'tag', + }, + { + dataType: DataTypes.String, + id: 'k8s_node_name--string--tag--false', + isColumn: false, + key: 'k8s_node_name', + type: 'tag', + }, + ], + having: [], + legend: '{{k8s_node_name}}-{{interface}}-{{direction}}', + limit: null, + orderBy: [], + queryName: 'A', + reduceTo: 'sum', + spaceAggregation: 'sum', + stepInterval: 60, + timeAggregation: 'rate', + }, + ], + queryFormulas: [], + }, + clickhouse_sql: [ + { + disabled: false, + legend: '', + name: 'A', + query: '', + }, + ], + id: 'b56143c0-7d2f-4425-97c5-65ad6fc87366', + promql: [ + { + disabled: false, + legend: '', + name: 'A', + query: '', + }, + ], + queryType: EQueryType.QUERY_BUILDER, + }, + globalSelectedInterval: '3h', + variables: {}, + formatForWeb: false, + }, +]; + +export const getHostQueryPayload = ( + hostName: string, +): GetQueryResultsProps[] => [ + { + selectedTime: 'GLOBAL_TIME', + graphType: PANEL_TYPES.TIME_SERIES, + query: { + builder: { + queryData: [ + { + aggregateAttribute: { + dataType: DataTypes.Float64, + id: 'system_cpu_time--float64--Sum--true', + isColumn: true, + isJSON: false, + key: 'system_cpu_time', + type: 'Sum', + }, + aggregateOperator: 'rate', + dataSource: DataSource.METRICS, + disabled: true, + expression: 'A', + filters: { + items: [ + { + id: 'b36d1580', + key: { + dataType: DataTypes.String, + id: 'host_name--string--tag--false', + isColumn: false, + isJSON: false, + key: 'host_name', + type: 'tag', + }, + op: '=', + value: hostName, + }, + { + id: '04c00b59', + key: { + dataType: DataTypes.String, + id: 'state--string--tag--false', + isColumn: false, + isJSON: false, + key: 'state', + type: 'tag', + }, + op: '!=', + value: 'idle', + }, + ], + op: 'AND', + }, + functions: [], + groupBy: [], + having: [], + legend: '', + limit: null, + orderBy: [], + queryName: 'A', + reduceTo: 'avg', + spaceAggregation: 'sum', + stepInterval: 60, + timeAggregation: 'rate', + }, + { + aggregateAttribute: { + dataType: DataTypes.Float64, + id: 'system_cpu_time--float64--Sum--true', + isColumn: true, + isJSON: false, + key: 'system_cpu_time', + type: 'Sum', + }, + aggregateOperator: 'rate', + dataSource: DataSource.METRICS, + disabled: true, + expression: 'B', + filters: { + items: [ + { + id: '9db53117', + key: { + dataType: DataTypes.String, + id: 'host_name--string--tag--false', + isColumn: false, + isJSON: false, + key: 'host_name', + type: 'tag', + }, + op: '=', + value: hostName, + }, + ], + op: 'AND', + }, + functions: [], + groupBy: [], + having: [], + legend: '', + limit: null, + orderBy: [], + queryName: 'B', + reduceTo: 'avg', + spaceAggregation: 'sum', + stepInterval: 60, + timeAggregation: 'rate', + }, + ], + queryFormulas: [ + { + disabled: false, + expression: 'A/B', + legend: '', + queryName: 'F1', + }, + ], + }, + clickhouse_sql: [ + { + disabled: false, + legend: '', + name: 'A', + query: '', + }, + ], + id: '9bcfa405-fd17-42ea-a55e-2f9d42e5eeb5', + promql: [ + { + disabled: false, + legend: '', + name: 'A', + query: '', + }, + ], + queryType: EQueryType.QUERY_BUILDER, + }, + globalSelectedInterval: '3h', + variables: {}, + formatForWeb: false, + }, + { + selectedTime: 'GLOBAL_TIME', + graphType: PANEL_TYPES.TIME_SERIES, + query: { + builder: { + queryData: [ + { + aggregateAttribute: { + dataType: DataTypes.Float64, + id: 'system_memory_usage--float64--Gauge--true', + isColumn: true, + isJSON: false, + key: 'system_memory_usage', + type: 'Gauge', + }, + aggregateOperator: 'avg', + dataSource: DataSource.METRICS, + disabled: true, + expression: 'A', + filters: { + items: [ + { + id: 'a4a1f5a0', + key: { + dataType: DataTypes.String, + id: 'host_name--string--tag--false', + isColumn: false, + isJSON: false, + key: 'host_name', + type: 'tag', + }, + op: '=', + value: hostName, + }, + { + id: 'ee64c6c7', + key: { + dataType: DataTypes.String, + id: 'state--string--tag--false', + isColumn: false, + isJSON: false, + key: 'state', + type: 'tag', + }, + op: '=', + value: 'used', + }, + ], + op: 'AND', + }, + functions: [], + groupBy: [], + having: [], + legend: '', + limit: null, + orderBy: [], + queryName: 'A', + reduceTo: 'avg', + spaceAggregation: 'sum', + stepInterval: 60, + timeAggregation: 'avg', + }, + { + aggregateAttribute: { + dataType: DataTypes.Float64, + id: 'system_memory_usage--float64--Gauge--true', + isColumn: true, + isJSON: false, + key: 'system_memory_usage', + type: 'Gauge', + }, + aggregateOperator: 'avg', + dataSource: DataSource.METRICS, + disabled: true, + expression: 'B', + filters: { + items: [ + { + id: 'bc3d98b1', + key: { + dataType: DataTypes.String, + id: 'host_name--string--tag--false', + isColumn: false, + isJSON: false, + key: 'host_name', + type: 'tag', + }, + op: '=', + value: hostName, + }, + ], + op: 'AND', + }, + functions: [], + groupBy: [], + having: [], + legend: '', + limit: null, + orderBy: [], + queryName: 'B', + reduceTo: 'avg', + spaceAggregation: 'sum', + stepInterval: 60, + timeAggregation: 'avg', + }, + ], + queryFormulas: [ + { + disabled: false, + expression: 'A/B', + legend: '', + queryName: 'F1', + }, + ], + }, + clickhouse_sql: [ + { + disabled: false, + legend: '', + name: 'A', + query: '', + }, + ], + id: '94cd5a8e-4305-45b5-aeef-071e0943c00f', + promql: [ + { + disabled: false, + legend: '', + name: 'A', + query: '', + }, + ], + queryType: EQueryType.QUERY_BUILDER, + }, + globalSelectedInterval: '3h', + variables: {}, + formatForWeb: false, + }, + { + selectedTime: 'GLOBAL_TIME', + graphType: PANEL_TYPES.TIME_SERIES, + query: { + builder: { + queryData: [ + { + aggregateAttribute: { + dataType: DataTypes.Float64, + id: 'system_cpu_time--float64--Sum--true', + isColumn: true, + isJSON: false, + key: 'system_cpu_time', + type: 'Sum', + }, + aggregateOperator: 'rate', + dataSource: DataSource.METRICS, + disabled: true, + expression: 'A', + filters: { + items: [ + { + id: 'ad316791', + key: { + dataType: DataTypes.String, + id: 'host_name--string--tag--false', + isColumn: false, + isJSON: false, + key: 'host_name', + type: 'tag', + }, + op: '=', + value: hostName, + }, + ], + op: 'AND', + }, + functions: [], + groupBy: [ + { + dataType: DataTypes.String, + id: 'state--string--tag--false', + isColumn: false, + isJSON: false, + key: 'state', + type: 'tag', + }, + ], + having: [], + legend: '{{state}}', + limit: null, + orderBy: [], + queryName: 'A', + reduceTo: 'avg', + spaceAggregation: 'sum', + stepInterval: 60, + timeAggregation: 'rate', + }, + { + aggregateAttribute: { + dataType: DataTypes.Float64, + id: 'system_cpu_time--float64--Sum--true', + isColumn: true, + isJSON: false, + key: 'system_cpu_time', + type: 'Sum', + }, + aggregateOperator: 'rate', + dataSource: DataSource.METRICS, + disabled: true, + expression: 'B', + filters: { + items: [ + { + id: '6baf116b', + key: { + dataType: DataTypes.String, + id: 'host_name--string--tag--false', + isColumn: false, + isJSON: false, + key: 'host_name', + type: 'tag', + }, + op: '=', + value: hostName, + }, + ], + op: 'AND', + }, + functions: [], + groupBy: [], + having: [], + legend: '{{state}}', + limit: null, + orderBy: [], + queryName: 'B', + reduceTo: 'avg', + spaceAggregation: 'sum', + stepInterval: 60, + timeAggregation: 'rate', + }, + ], + queryFormulas: [ + { + disabled: false, + expression: 'A/B', + legend: '{{state}}', + queryName: 'F1', + }, + ], + }, + clickhouse_sql: [ + { + disabled: false, + legend: '', + name: 'A', + query: '', + }, + ], + id: '315b15fa-ff0c-442f-89f8-2bf4fb1af2f2', + promql: [ + { + disabled: false, + legend: '', + name: 'A', + query: '', + }, + ], + queryType: EQueryType.QUERY_BUILDER, + }, + globalSelectedInterval: '3h', + variables: {}, + formatForWeb: false, + }, + { + selectedTime: 'GLOBAL_TIME', + graphType: PANEL_TYPES.TIME_SERIES, + query: { + builder: { + queryData: [ + { + aggregateAttribute: { + dataType: DataTypes.Float64, + id: 'system_memory_usage--float64--Gauge--true', + isColumn: true, + isJSON: false, + key: 'system_memory_usage', + type: 'Gauge', + }, + aggregateOperator: 'avg', + dataSource: DataSource.METRICS, + disabled: false, + expression: 'A', + filters: { + items: [ + { + id: '8026009e', + key: { + dataType: DataTypes.String, + id: 'host_name--string--tag--false', + isColumn: false, + isJSON: false, + key: 'host_name', + type: 'tag', + }, + op: '=', + value: hostName, + }, + ], + op: 'AND', + }, + functions: [], + groupBy: [ + { + dataType: DataTypes.String, + id: 'state--string--tag--false', + isColumn: false, + isJSON: false, + key: 'state', + type: 'tag', + }, + ], + having: [], + legend: '{{state}}', + limit: null, + orderBy: [], + queryName: 'A', + reduceTo: 'avg', + spaceAggregation: 'sum', + stepInterval: 60, + timeAggregation: 'avg', + }, + ], + queryFormulas: [], + }, + clickhouse_sql: [ + { + disabled: false, + legend: '', + name: 'A', + query: '', + }, + ], + id: '40218bfb-a9b7-4974-aead-5bf666e139bf', + promql: [ + { + disabled: false, + legend: '', + name: 'A', + query: '', + }, + ], + queryType: EQueryType.QUERY_BUILDER, + }, + globalSelectedInterval: '3h', + variables: {}, + formatForWeb: false, + }, + { + selectedTime: 'GLOBAL_TIME', + graphType: PANEL_TYPES.TIME_SERIES, + query: { + builder: { + queryData: [ + { + aggregateAttribute: { + dataType: DataTypes.Float64, + id: 'system_cpu_load_average_1m--float64--Gauge--true', + isColumn: true, + isJSON: false, + key: 'system_cpu_load_average_1m', + type: 'Gauge', + }, + aggregateOperator: 'avg', + dataSource: DataSource.METRICS, + disabled: false, + expression: 'A', + filters: { + items: [ + { + id: '4167fbb1', + key: { + dataType: DataTypes.String, + id: 'host_name--string--tag--false', + isColumn: false, + isJSON: false, + key: 'host_name', + type: 'tag', + }, + op: '=', + value: hostName, + }, + ], + op: 'AND', + }, + functions: [], + groupBy: [], + having: [], + legend: '1m', + limit: 30, + orderBy: [], + queryName: 'A', + reduceTo: 'avg', + spaceAggregation: 'sum', + stepInterval: 60, + timeAggregation: 'avg', + }, + { + aggregateAttribute: { + dataType: DataTypes.Float64, + id: 'system_cpu_load_average_5m--float64--Gauge--true', + isColumn: true, + isJSON: false, + key: 'system_cpu_load_average_5m', + type: 'Gauge', + }, + aggregateOperator: 'avg', + dataSource: DataSource.METRICS, + disabled: false, + expression: 'B', + filters: { + items: [ + { + id: '0c2cfeca', + key: { + dataType: DataTypes.String, + id: 'host_name--string--tag--false', + isColumn: false, + isJSON: false, + key: 'host_name', + type: 'tag', + }, + op: '=', + value: hostName, + }, + ], + op: 'AND', + }, + functions: [], + groupBy: [], + having: [], + legend: '5m', + limit: 30, + orderBy: [], + queryName: 'B', + reduceTo: 'avg', + spaceAggregation: 'sum', + stepInterval: 60, + timeAggregation: 'avg', + }, + { + aggregateAttribute: { + dataType: DataTypes.Float64, + id: 'system_cpu_load_average_15m--float64--Gauge--true', + isColumn: true, + isJSON: false, + key: 'system_cpu_load_average_15m', + type: 'Gauge', + }, + aggregateOperator: 'avg', + dataSource: DataSource.METRICS, + disabled: false, + expression: 'C', + filters: { + items: [ + { + id: '28693375', + key: { + dataType: DataTypes.String, + id: 'host_name--string--tag--false', + isColumn: false, + isJSON: false, + key: 'host_name', + type: 'tag', + }, + op: '=', + value: hostName, + }, + ], + op: 'AND', + }, + functions: [], + groupBy: [], + having: [], + legend: '15m', + limit: 30, + orderBy: [], + queryName: 'C', + reduceTo: 'avg', + spaceAggregation: 'sum', + stepInterval: 60, + timeAggregation: 'avg', + }, + ], + queryFormulas: [], + }, + clickhouse_sql: [ + { + disabled: false, + legend: '', + name: 'A', + query: '', + }, + ], + id: '8e6485ea-7018-43b0-ab27-b210f77b59ad', + promql: [ + { + disabled: false, + legend: '', + name: 'A', + query: '', + }, + ], + queryType: EQueryType.QUERY_BUILDER, + }, + globalSelectedInterval: '3h', + variables: {}, + formatForWeb: false, + }, + { + selectedTime: 'GLOBAL_TIME', + graphType: PANEL_TYPES.TIME_SERIES, + query: { + builder: { + queryData: [ + { + aggregateAttribute: { + dataType: DataTypes.Float64, + id: 'system_network_io--float64--Sum--true', + isColumn: true, + isJSON: false, + key: 'system_network_io', + type: 'Sum', + }, + aggregateOperator: 'rate', + dataSource: DataSource.METRICS, + disabled: false, + expression: 'A', + filters: { + items: [ + { + id: '3a03bc80', + key: { + dataType: DataTypes.String, + id: 'host_name--string--tag--false', + isColumn: false, + isJSON: false, + key: 'host_name', + type: 'tag', + }, + op: '=', + value: hostName, + }, + ], + op: 'AND', + }, + functions: [], + groupBy: [ + { + dataType: DataTypes.String, + id: 'direction--string--tag--false', + isColumn: false, + isJSON: false, + key: 'direction', + type: 'tag', + }, + { + dataType: DataTypes.String, + id: 'device--string--tag--false', + isColumn: false, + isJSON: false, + key: 'device', + type: 'tag', + }, + ], + having: [ + { + columnName: 'SUM(system_network_io)', + op: '>', + value: 0, + }, + ], + legend: '{{device}}::{{direction}}', + limit: 30, + orderBy: [], + queryName: 'A', + reduceTo: 'avg', + spaceAggregation: 'sum', + stepInterval: 60, + timeAggregation: 'rate', + }, + ], + queryFormulas: [], + }, + clickhouse_sql: [ + { + disabled: false, + legend: '', + name: 'A', + query: '', + }, + ], + id: '47173220-44df-4ef6-87f4-31e333c180c7', + promql: [ + { + disabled: false, + legend: '', + name: 'A', + query: '', + }, + ], + queryType: EQueryType.QUERY_BUILDER, + }, + globalSelectedInterval: '3h', + variables: {}, + formatForWeb: false, + }, + { + selectedTime: 'GLOBAL_TIME', + graphType: PANEL_TYPES.TIME_SERIES, + query: { + builder: { + queryData: [ + { + aggregateAttribute: { + dataType: DataTypes.Float64, + id: 'system_network_packets--float64--Sum--true', + isColumn: true, + isJSON: false, + key: 'system_network_packets', + type: 'Sum', + }, + aggregateOperator: 'rate', + dataSource: DataSource.METRICS, + disabled: false, + expression: 'A', + filters: { + items: [ + { + id: '3082ef53', + key: { + dataType: DataTypes.String, + id: 'host_name--string--tag--false', + isColumn: false, + isJSON: false, + key: 'host_name', + type: 'tag', + }, + op: '=', + value: hostName, + }, + ], + op: 'AND', + }, + functions: [], + groupBy: [ + { + dataType: DataTypes.String, + id: 'direction--string--tag--false', + isColumn: false, + isJSON: false, + key: 'direction', + type: 'tag', + }, + { + dataType: DataTypes.String, + id: 'device--string--tag--false', + isColumn: false, + isJSON: false, + key: 'device', + type: 'tag', + }, + ], + having: [], + legend: '{{device}}::{{direction}}', + limit: 30, + orderBy: [], + queryName: 'A', + reduceTo: 'avg', + spaceAggregation: 'sum', + stepInterval: 60, + timeAggregation: 'rate', + }, + ], + queryFormulas: [], + }, + clickhouse_sql: [ + { + disabled: false, + legend: '', + name: 'A', + query: '', + }, + ], + id: '62eedbc6-c8ad-4d13-80a8-129396e1d1dc', + promql: [ + { + disabled: false, + legend: '', + name: 'A', + query: '', + }, + ], + queryType: EQueryType.QUERY_BUILDER, + }, + globalSelectedInterval: '3h', + variables: {}, + formatForWeb: false, + }, + { + selectedTime: 'GLOBAL_TIME', + graphType: PANEL_TYPES.TIME_SERIES, + query: { + builder: { + queryData: [ + { + aggregateAttribute: { + dataType: DataTypes.Float64, + id: 'system_network_errors--float64--Sum--true', + isColumn: true, + isJSON: false, + key: 'system_network_errors', + type: 'Sum', + }, + aggregateOperator: 'rate', + dataSource: DataSource.METRICS, + disabled: false, + expression: 'A', + filters: { + items: [ + { + id: '8859bc50', + key: { + dataType: DataTypes.String, + id: 'host_name--string--tag--false', + isColumn: false, + isJSON: false, + key: 'host_name', + type: 'tag', + }, + op: '=', + value: hostName, + }, + ], + op: 'AND', + }, + functions: [], + groupBy: [ + { + dataType: DataTypes.String, + id: 'direction--string--tag--false', + isColumn: false, + isJSON: false, + key: 'direction', + type: 'tag', + }, + { + dataType: DataTypes.String, + id: 'device--string--tag--false', + isColumn: false, + isJSON: false, + key: 'device', + type: 'tag', + }, + ], + having: [], + legend: '{{device}}::{{direction}}', + limit: 30, + orderBy: [], + queryName: 'A', + reduceTo: 'avg', + spaceAggregation: 'sum', + stepInterval: 60, + timeAggregation: 'rate', + }, + ], + queryFormulas: [], + }, + clickhouse_sql: [ + { + disabled: false, + legend: '', + name: 'A', + query: '', + }, + ], + id: '5ddb1b38-53bb-46f5-b4fe-fe832d6b9b24', + promql: [ + { + disabled: false, + legend: '', + name: 'A', + query: '', + }, + ], + queryType: EQueryType.QUERY_BUILDER, + }, + globalSelectedInterval: '3h', + variables: {}, + formatForWeb: false, + }, + { + selectedTime: 'GLOBAL_TIME', + graphType: PANEL_TYPES.TIME_SERIES, + query: { + builder: { + queryData: [ + { + aggregateAttribute: { + dataType: DataTypes.Float64, + id: 'system_network_dropped--float64--Sum--true', + isColumn: true, + isJSON: false, + key: 'system_network_dropped', + type: 'Sum', + }, + aggregateOperator: 'rate', + dataSource: DataSource.METRICS, + disabled: false, + expression: 'A', + filters: { + items: [ + { + id: '40fec2e3', + key: { + dataType: DataTypes.String, + id: 'host_name--string--tag--false', + isColumn: false, + isJSON: false, + key: 'host_name', + type: 'tag', + }, + op: '=', + value: hostName, + }, + ], + op: 'AND', + }, + functions: [], + groupBy: [ + { + dataType: DataTypes.String, + id: 'direction--string--tag--false', + isColumn: false, + isJSON: false, + key: 'direction', + type: 'tag', + }, + { + dataType: DataTypes.String, + id: 'device--string--tag--false', + isColumn: false, + isJSON: false, + key: 'device', + type: 'tag', + }, + ], + having: [], + legend: '{{device}}::{{direction}}', + limit: 30, + orderBy: [], + queryName: 'A', + reduceTo: 'avg', + spaceAggregation: 'sum', + stepInterval: 60, + timeAggregation: 'rate', + }, + ], + queryFormulas: [], + }, + clickhouse_sql: [ + { + disabled: false, + legend: '', + name: 'A', + query: '', + }, + ], + id: 'a849bcce-7684-4852-9134-530b45419b8f', + promql: [ + { + disabled: false, + legend: '', + name: 'A', + query: '', + }, + ], + queryType: EQueryType.QUERY_BUILDER, + }, + globalSelectedInterval: '3h', + variables: {}, + formatForWeb: false, + }, + { + selectedTime: 'GLOBAL_TIME', + graphType: PANEL_TYPES.TIME_SERIES, + query: { + builder: { + queryData: [ + { + aggregateAttribute: { + dataType: DataTypes.Float64, + id: 'system_disk_operation_time--float64--Sum--true', + isColumn: true, + isJSON: false, + key: 'system_disk_operation_time', + type: 'Sum', + }, + aggregateOperator: 'rate', + dataSource: DataSource.METRICS, + disabled: false, + expression: 'A', + filters: { + items: [ + { + id: 'd21dc017', + key: { + dataType: DataTypes.String, + id: 'host_name--string--tag--false', + isColumn: false, + isJSON: false, + key: 'host_name', + type: 'tag', + }, + op: '=', + value: hostName, + }, + ], + op: 'AND', + }, + functions: [], + groupBy: [ + { + dataType: DataTypes.String, + id: 'device--string--tag--false', + isColumn: false, + isJSON: false, + key: 'device', + type: 'tag', + }, + { + dataType: DataTypes.String, + id: 'direction--string--tag--false', + isColumn: false, + isJSON: false, + key: 'direction', + type: 'tag', + }, + ], + having: [ + { + columnName: 'SUM(system_disk_operation_time)', + op: '>', + value: 0, + }, + ], + legend: '{{device}}::{{direction}}', + limit: null, + orderBy: [], + queryName: 'A', + reduceTo: 'avg', + spaceAggregation: 'sum', + stepInterval: 60, + timeAggregation: 'rate', + }, + ], + queryFormulas: [], + }, + clickhouse_sql: [ + { + disabled: false, + legend: '', + name: 'A', + query: '', + }, + ], + id: '9c6d18ad-89ff-4e38-a15a-440e72ed6ca8', + promql: [ + { + disabled: false, + legend: '', + name: 'A', + query: '', + }, + ], + queryType: EQueryType.QUERY_BUILDER, + }, + globalSelectedInterval: '3h', + variables: {}, + formatForWeb: false, + }, + { + selectedTime: 'GLOBAL_TIME', + graphType: PANEL_TYPES.TIME_SERIES, + query: { + builder: { + queryData: [ + { + aggregateAttribute: { + dataType: DataTypes.Float64, + id: 'system_disk_io--float64--Sum--true', + isColumn: true, + isJSON: false, + key: 'system_disk_io', + type: 'Sum', + }, + aggregateOperator: 'rate', + dataSource: DataSource.METRICS, + disabled: false, + expression: 'A', + filters: { + items: [ + { + id: '6039199f', + key: { + dataType: DataTypes.String, + id: 'host_name--string--tag--false', + isColumn: false, + isJSON: false, + key: 'host_name', + type: 'tag', + }, + op: '=', + value: hostName, + }, + ], + op: 'AND', + }, + functions: [], + groupBy: [], + having: [], + legend: '', + limit: null, + orderBy: [], + queryName: 'A', + reduceTo: 'avg', + spaceAggregation: 'sum', + stepInterval: 60, + timeAggregation: 'rate', + }, + ], + queryFormulas: [], + }, + clickhouse_sql: [ + { + disabled: false, + legend: '', + name: 'A', + query: '', + }, + ], + id: '9bd40b51-0790-4cdd-9718-551b2ded5926', + promql: [ + { + disabled: false, + legend: '', + name: 'A', + query: '', + }, + ], + queryType: EQueryType.QUERY_BUILDER, + }, + globalSelectedInterval: '3h', + variables: {}, + formatForWeb: false, + }, + { + selectedTime: 'GLOBAL_TIME', + graphType: PANEL_TYPES.TIME_SERIES, + query: { + builder: { + queryData: [ + { + aggregateAttribute: { + dataType: DataTypes.Float64, + id: 'system_network_io--float64--Sum--true', + isColumn: true, + isJSON: false, + key: 'system_network_io', + type: 'Sum', + }, + aggregateOperator: 'rate', + dataSource: DataSource.METRICS, + disabled: false, + expression: 'A', + filters: { + items: [ + { + id: 'e35cae4e', + key: { + dataType: DataTypes.String, + id: 'host_name--string--tag--false', + isColumn: false, + isJSON: false, + key: 'host_name', + type: 'tag', + }, + op: '=', + value: hostName, + }, + ], + op: 'AND', + }, + functions: [], + groupBy: [], + having: [ + { + columnName: 'SUM(system_network_io)', + op: '>', + value: 0, + }, + ], + legend: '', + limit: null, + orderBy: [], + queryName: 'A', + reduceTo: 'avg', + spaceAggregation: 'sum', + stepInterval: 60, + timeAggregation: 'rate', + }, + ], + queryFormulas: [], + }, + clickhouse_sql: [ + { + disabled: false, + legend: '', + name: 'A', + query: '', + }, + ], + id: '6e58ef98-c680-4d28-a538-4b1ac71d3c37', + promql: [ + { + disabled: false, + legend: '', + name: 'A', + query: '', + }, + ], + queryType: EQueryType.QUERY_BUILDER, + }, + globalSelectedInterval: '3h', + variables: {}, + formatForWeb: false, + }, +]; + +export const cardTitles: string[] = [ + 'Pod CPU usage', + 'Pod memory usage (WSS)', + 'Pod network IO', + 'Pod filesystem usage', +]; + +export const VIEW_TYPES = { + NODE: 'node', + POD: 'pod', +}; + +export const nodeCardTitles = [ + 'Node CPU usage', + 'Node memory usage (WSS)', + 'Node network IO', + 'Node filesystem usage', ]; From 88cc6c0a4634860edb86ddfcac6a77c5dc27080f Mon Sep 17 00:00:00 2001 From: rahulkeswani101 Date: Fri, 6 Sep 2024 21:31:46 +0530 Subject: [PATCH 09/26] feat: added new components for node and pod metrics --- .../src/components/LogDetail/constants.ts | 7 + frontend/src/components/LogDetail/index.tsx | 11 +- .../InfraMetrics/InfraMetrics.styles.scss | 6 + .../InfraMetrics/InfraMetrics.tsx | 196 +++--------------- .../InfraMetrics/NodeMetrics.tsx | 126 +++++++++++ .../InfraMetrics/PodMetrics.tsx | 119 +++++++++++ 6 files changed, 297 insertions(+), 168 deletions(-) create mode 100644 frontend/src/container/LogDetailedView/InfraMetrics/NodeMetrics.tsx create mode 100644 frontend/src/container/LogDetailedView/InfraMetrics/PodMetrics.tsx diff --git a/frontend/src/components/LogDetail/constants.ts b/frontend/src/components/LogDetail/constants.ts index e68d0230a6..4e76084834 100644 --- a/frontend/src/components/LogDetail/constants.ts +++ b/frontend/src/components/LogDetail/constants.ts @@ -6,3 +6,10 @@ export const VIEW_TYPES = { } as const; export type VIEWS = typeof VIEW_TYPES[keyof typeof VIEW_TYPES]; + +export const RESOURCE_KEYS = { + CLUSTER_NAME: 'k8s.cluster.name', + POD_NAME: 'k8s.pod.name', + NODE_NAME: 'k8s.node.name', + HOST_NAME: 'k8s.host.name', +} as const; diff --git a/frontend/src/components/LogDetail/index.tsx b/frontend/src/components/LogDetail/index.tsx index d8958d9702..26e95f7ee9 100644 --- a/frontend/src/components/LogDetail/index.tsx +++ b/frontend/src/components/LogDetail/index.tsx @@ -38,7 +38,7 @@ import { Query, TagFilter } from 'types/api/queryBuilder/queryBuilderData'; import { DataSource, StringOperators } from 'types/common/queryBuilder'; import { FORBID_DOM_PURIFY_TAGS } from 'utils/app'; -import { VIEW_TYPES, VIEWS } from './constants'; +import { RESOURCE_KEYS, VIEW_TYPES, VIEWS } from './constants'; import { LogDetailProps } from './LogDetail.interfaces'; import QueryBuilderSearchWrapper from './QueryBuilderSearchWrapper'; @@ -259,7 +259,14 @@ function LogDetail({ isEdit={isEdit} /> )} - {selectedView === VIEW_TYPES.INFRAMETRICS && } + {selectedView === VIEW_TYPES.INFRAMETRICS && ( + + )} ); } diff --git a/frontend/src/container/LogDetailedView/InfraMetrics/InfraMetrics.styles.scss b/frontend/src/container/LogDetailedView/InfraMetrics/InfraMetrics.styles.scss index f481a1f710..483a21c4dd 100644 --- a/frontend/src/container/LogDetailedView/InfraMetrics/InfraMetrics.styles.scss +++ b/frontend/src/container/LogDetailedView/InfraMetrics/InfraMetrics.styles.scss @@ -1,3 +1,9 @@ +.infra-metrics-container { + .views-tabs { + margin-bottom: 1rem; + } +} + .infra-metrics-card { margin: 1rem 0; height: 300px; diff --git a/frontend/src/container/LogDetailedView/InfraMetrics/InfraMetrics.tsx b/frontend/src/container/LogDetailedView/InfraMetrics/InfraMetrics.tsx index 73376a1804..d5a620d3dc 100644 --- a/frontend/src/container/LogDetailedView/InfraMetrics/InfraMetrics.tsx +++ b/frontend/src/container/LogDetailedView/InfraMetrics/InfraMetrics.tsx @@ -1,180 +1,36 @@ import './InfraMetrics.styles.scss'; import { ClusterOutlined, ContainerOutlined } from '@ant-design/icons'; -import { - Card, - Col, - Radio, - RadioChangeEvent, - Row, - Skeleton, - Typography, -} from 'antd'; -import cx from 'classnames'; -import Uplot from 'components/Uplot'; -import { ENTITY_VERSION_V4 } from 'constants/app'; -import { useIsDarkMode } from 'hooks/useDarkMode'; -import { useResizeObserver } from 'hooks/useDimensions'; -import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults'; -import getStartEndRangeTime from 'lib/getStartEndRangeTime'; -import { getUPlotChartOptions } from 'lib/uPlotLib/getUplotChartOptions'; -import { getUPlotChartData } from 'lib/uPlotLib/utils/getUplotChartData'; -import { useMemo, useRef, useState } from 'react'; -import { useQueries, UseQueryResult } from 'react-query'; -import { SuccessResponse } from 'types/api'; -import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange'; +import { Radio } from 'antd'; +import { RadioChangeEvent } from 'antd/lib'; +import { useState } from 'react'; -import { InfraMetricsSProps } from '../LogDetailedView.types'; -import { - cardTitles, - getHostQueryPayload, - getNodeQueryPayload, - getQueryPayload, - nodeCardTitles, - VIEW_TYPES, -} from './constants'; +import { VIEW_TYPES } from './constants'; +import NodeMetrics from './NodeMetrics'; +import PodMetrics from './PodMetrics'; -function InfraMetrics({ logData }: InfraMetricsSProps): JSX.Element { - const podName = logData.resources_string?.['k8s.pod.name'] - ? (logData.resources_string?.['k8s.pod.name'] as string) - : ''; +interface MetricsDataProps { + podName: string; + nodeName: string; + hostName: string; + clusterName: string; +} + +function InfraMetrics({ + podName, + nodeName, + hostName, + clusterName, +}: MetricsDataProps): JSX.Element { const initialView = podName ? VIEW_TYPES.POD : VIEW_TYPES.NODE; const [selectedView, setSelectedView] = useState(initialView); - const { start, end } = getStartEndRangeTime({ - type: 'GLOBAL_TIME', - interval: '3h', - }); - const minTimeScale = (parseInt(start, 10) * 1e3) / 1000; - const maxTimeScale = (parseInt(end, 10) * 1e3) / 1000; - - const clusterName = logData.resources_string?.['k8s.cluster.name'] - ? (logData.resources_string?.['k8s.cluster.name'] as string) - : ''; - const nodeName = logData.resources_string?.['k8s.node.name'] - ? (logData.resources_string?.['k8s.node.name'] as string) - : ''; - const hostName = logData.resources_string?.host_name - ? (logData.resources_string?.host_name as string) - : ''; - const queryPayloads = useMemo(() => { - if (selectedView === VIEW_TYPES.NODE) { - if (nodeName) { - return getNodeQueryPayload(clusterName, nodeName); - } - return getHostQueryPayload(hostName); - } - return getQueryPayload(clusterName, podName); - }, [selectedView, clusterName, podName, nodeName, hostName]); - - const queries = useQueries( - queryPayloads.map((payload) => ({ - queryKey: ['metrics', payload, ENTITY_VERSION_V4, selectedView], - queryFn: (): Promise> => - GetMetricQueryRange(payload, ENTITY_VERSION_V4), - enabled: !!payload, - })), - ); - - const isDarkMode = useIsDarkMode(); - const graphRef = useRef(null); - - const dimensions = useResizeObserver(graphRef); - - const chartData = useMemo( - () => queries.map(({ data }) => getUPlotChartData(data?.payload)), - [queries], - ); - - const getYAxisUnit = (idx: number): string => { - if (idx === 1 || idx === 3) { - return 'bytes'; - } - if (idx === 2) { - return 'binBps'; - } - return ''; - }; - - const options = useMemo( - () => - queries.map(({ data }, idx) => - getUPlotChartOptions({ - apiResponse: data?.payload, - isDarkMode, - dimensions, - minTimeScale, - maxTimeScale, - softMax: null, - softMin: null, - yAxisUnit: getYAxisUnit(idx), - }), - ), - [queries, isDarkMode, dimensions, minTimeScale, maxTimeScale], - ); const handleModeChange = (e: RadioChangeEvent): void => { setSelectedView(e.target.value); }; - const renderCardContent = ( - query: UseQueryResult>, - idx: number, - ): JSX.Element => { - if (query.isLoading) { - return ; - } - if (query.error) { - return ( -
{(query.error as Error)?.message || 'Something went wrong'}
- ); - } - return ( -
- -
- ); - }; - - const renderNodeMetrics = (): JSX.Element => ( - - {queries.map((query, idx) => ( - - {nodeCardTitles[idx]} - - {renderCardContent(query, idx)} - - - ))} - - ); - const renderPodMetrics = (): JSX.Element => ( - - {queries.map((query, idx) => ( - - {cardTitles[idx]} - - {renderCardContent(query, idx)} - - - ))} - - ); return ( -
+
)} - {selectedView === VIEW_TYPES.NODE && renderNodeMetrics()} - {selectedView === VIEW_TYPES.POD && podName && renderPodMetrics()} + {selectedView === VIEW_TYPES.NODE && ( + + )} + {selectedView === VIEW_TYPES.POD && podName && ( + + )}
); } diff --git a/frontend/src/container/LogDetailedView/InfraMetrics/NodeMetrics.tsx b/frontend/src/container/LogDetailedView/InfraMetrics/NodeMetrics.tsx new file mode 100644 index 0000000000..cfdcef5247 --- /dev/null +++ b/frontend/src/container/LogDetailedView/InfraMetrics/NodeMetrics.tsx @@ -0,0 +1,126 @@ +import { Card, Col, Row, Skeleton, Typography } from 'antd'; +import cx from 'classnames'; +import Uplot from 'components/Uplot'; +import { ENTITY_VERSION_V4 } from 'constants/app'; +import { useIsDarkMode } from 'hooks/useDarkMode'; +import { useResizeObserver } from 'hooks/useDimensions'; +import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults'; +import getStartEndRangeTime from 'lib/getStartEndRangeTime'; +import { getUPlotChartOptions } from 'lib/uPlotLib/getUplotChartOptions'; +import { getUPlotChartData } from 'lib/uPlotLib/utils/getUplotChartData'; +import { useMemo, useRef } from 'react'; +import { useQueries, UseQueryResult } from 'react-query'; +import { SuccessResponse } from 'types/api'; +import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange'; + +import { + getHostQueryPayload, + getNodeQueryPayload, + nodeCardTitles, +} from './constants'; + +function NodeMetrics({ + nodeName, + clusterName, + hostName, +}: { + nodeName: string; + clusterName: string; + hostName: string; +}): JSX.Element { + const { start, end } = getStartEndRangeTime({ + type: 'GLOBAL_TIME', + interval: '3h', + }); + const minTimeScale = (parseInt(start, 10) * 1e3) / 1000; + const maxTimeScale = (parseInt(end, 10) * 1e3) / 1000; + const queryPayloads = useMemo(() => { + if (nodeName) { + return getNodeQueryPayload(clusterName, nodeName); + } + return getHostQueryPayload(hostName); + }, [clusterName, nodeName, hostName]); + + const queries = useQueries( + queryPayloads.map((payload) => ({ + queryKey: ['metrics', payload, ENTITY_VERSION_V4, 'NODE'], + queryFn: (): Promise> => + GetMetricQueryRange(payload, ENTITY_VERSION_V4), + enabled: !!payload, + })), + ); + + const isDarkMode = useIsDarkMode(); + const graphRef = useRef(null); + const dimensions = useResizeObserver(graphRef); + + const chartData = useMemo( + () => queries.map(({ data }) => getUPlotChartData(data?.payload)), + [queries], + ); + + const getYAxisUnit = (idx: number): string => { + if (idx === 1 || idx === 3) return 'bytes'; + if (idx === 2) return 'binBps'; + return ''; + }; + + const options = useMemo( + () => + queries.map(({ data }, idx) => + getUPlotChartOptions({ + apiResponse: data?.payload, + isDarkMode, + dimensions, + yAxisUnit: getYAxisUnit(idx), + softMax: null, + softMin: null, + minTimeScale, + maxTimeScale, + }), + ), + [queries, isDarkMode, dimensions, minTimeScale, maxTimeScale], + ); + + const renderCardContent = ( + query: UseQueryResult, unknown>, + idx: number, + ): JSX.Element => { + if (query.isLoading) { + return ; + } + + if (query.error) { + const errorMessage = + (query.error as Error)?.message || 'Something went wrong'; + return
{errorMessage}
; + } + return ( +
+ +
+ ); + }; + return ( + + {chartData.map((data, idx) => ( + + {nodeCardTitles[idx]} + + {renderCardContent(queries[idx], idx)} + + + ))} + + ); +} + +export default NodeMetrics; diff --git a/frontend/src/container/LogDetailedView/InfraMetrics/PodMetrics.tsx b/frontend/src/container/LogDetailedView/InfraMetrics/PodMetrics.tsx new file mode 100644 index 0000000000..3ba0e9dc25 --- /dev/null +++ b/frontend/src/container/LogDetailedView/InfraMetrics/PodMetrics.tsx @@ -0,0 +1,119 @@ +import { Card, Col, Row, Skeleton, Typography } from 'antd'; +import cx from 'classnames'; +import Uplot from 'components/Uplot'; +import { ENTITY_VERSION_V4 } from 'constants/app'; +import { useIsDarkMode } from 'hooks/useDarkMode'; +import { useResizeObserver } from 'hooks/useDimensions'; +import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults'; +import getStartEndRangeTime from 'lib/getStartEndRangeTime'; +import { getUPlotChartOptions } from 'lib/uPlotLib/getUplotChartOptions'; +import { getUPlotChartData } from 'lib/uPlotLib/utils/getUplotChartData'; +import { useMemo, useRef } from 'react'; +import { useQueries, UseQueryResult } from 'react-query'; +import { SuccessResponse } from 'types/api'; +import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange'; + +import { cardTitles, getQueryPayload } from './constants'; + +function PodMetrics({ + podName, + clusterName, +}: { + podName: string; + clusterName: string; +}): JSX.Element { + const { start, end } = getStartEndRangeTime({ + type: 'GLOBAL_TIME', + interval: '3h', + }); + const minTimeScale = (parseInt(start, 10) * 1e3) / 1000; + const maxTimeScale = (parseInt(end, 10) * 1e3) / 1000; + const queryPayloads = useMemo(() => getQueryPayload(clusterName, podName), [ + clusterName, + podName, + ]); + + const queries = useQueries( + queryPayloads.map((payload) => ({ + queryKey: ['metrics', payload, ENTITY_VERSION_V4, 'POD'], + queryFn: (): Promise> => + GetMetricQueryRange(payload, ENTITY_VERSION_V4), + enabled: !!payload, + })), + ); + + const isDarkMode = useIsDarkMode(); + const graphRef = useRef(null); + const dimensions = useResizeObserver(graphRef); + + const chartData = useMemo( + () => queries.map(({ data }) => getUPlotChartData(data?.payload)), + [queries], + ); + + const getYAxisUnit = (idx: number): string => { + if (idx === 1 || idx === 3) return 'bytes'; + if (idx === 2) return 'binBps'; + return ''; + }; + + const options = useMemo( + () => + queries.map(({ data }, idx) => + getUPlotChartOptions({ + apiResponse: data?.payload, + isDarkMode, + dimensions, + yAxisUnit: getYAxisUnit(idx), + softMax: null, + softMin: null, + minTimeScale, + maxTimeScale, + }), + ), + [queries, isDarkMode, dimensions, minTimeScale, maxTimeScale], + ); + + const renderCardContent = ( + query: UseQueryResult, unknown>, + idx: number, + ): JSX.Element => { + if (query.isLoading) { + return ; + } + + if (query.error) { + const errorMessage = + (query.error as Error)?.message || 'Something went wrong'; + return
{errorMessage}
; + } + return ( +
+ +
+ ); + }; + + return ( + + {chartData.map((data, idx) => ( + + {cardTitles[idx]} + + {renderCardContent(queries[idx], idx)} + + + ))} + + ); +} + +export default PodMetrics; From d09d1c65888707640040cb65767dc8e2a9d35941 Mon Sep 17 00:00:00 2001 From: rahulkeswani101 Date: Sat, 7 Sep 2024 18:41:51 +0530 Subject: [PATCH 10/26] feat: added card titles for host metrics and handled empty state --- .../src/components/LogDetail/constants.ts | 2 +- .../InfraMetrics/InfraMetrics.styles.scss | 7 + .../InfraMetrics/InfraMetrics.tsx | 13 +- .../InfraMetrics/NodeMetrics.tsx | 11 +- .../InfraMetrics/PodMetrics.tsx | 4 +- .../LogDetailedView/InfraMetrics/constants.ts | 262 ++++++++++++++++-- 6 files changed, 270 insertions(+), 29 deletions(-) diff --git a/frontend/src/components/LogDetail/constants.ts b/frontend/src/components/LogDetail/constants.ts index 4e76084834..257b14310e 100644 --- a/frontend/src/components/LogDetail/constants.ts +++ b/frontend/src/components/LogDetail/constants.ts @@ -11,5 +11,5 @@ export const RESOURCE_KEYS = { CLUSTER_NAME: 'k8s.cluster.name', POD_NAME: 'k8s.pod.name', NODE_NAME: 'k8s.node.name', - HOST_NAME: 'k8s.host.name', + HOST_NAME: 'hostname', } as const; diff --git a/frontend/src/container/LogDetailedView/InfraMetrics/InfraMetrics.styles.scss b/frontend/src/container/LogDetailedView/InfraMetrics/InfraMetrics.styles.scss index 483a21c4dd..c7daedb384 100644 --- a/frontend/src/container/LogDetailedView/InfraMetrics/InfraMetrics.styles.scss +++ b/frontend/src/container/LogDetailedView/InfraMetrics/InfraMetrics.styles.scss @@ -1,3 +1,10 @@ +.empty-container { + display: flex; + justify-content: center; + align-items: center; + height: 100%; +} + .infra-metrics-container { .views-tabs { margin-bottom: 1rem; diff --git a/frontend/src/container/LogDetailedView/InfraMetrics/InfraMetrics.tsx b/frontend/src/container/LogDetailedView/InfraMetrics/InfraMetrics.tsx index d5a620d3dc..abed7a0883 100644 --- a/frontend/src/container/LogDetailedView/InfraMetrics/InfraMetrics.tsx +++ b/frontend/src/container/LogDetailedView/InfraMetrics/InfraMetrics.tsx @@ -1,7 +1,7 @@ import './InfraMetrics.styles.scss'; import { ClusterOutlined, ContainerOutlined } from '@ant-design/icons'; -import { Radio } from 'antd'; +import { Empty, Radio } from 'antd'; import { RadioChangeEvent } from 'antd/lib'; import { useState } from 'react'; @@ -29,6 +29,17 @@ function InfraMetrics({ setSelectedView(e.target.value); }; + if (!podName && !nodeName && !hostName) { + return ( +
+ +
+ ); + } + return (
({ queryKey: ['metrics', payload, ENTITY_VERSION_V4, 'NODE'], @@ -103,9 +106,9 @@ function NodeMetrics({ }; return ( - {chartData.map((data, idx) => ( - - {nodeCardTitles[idx]} + {queries.map((query, idx) => ( + + {cardTitles[idx]} - {renderCardContent(queries[idx], idx)} + {renderCardContent(query, idx)} ))} diff --git a/frontend/src/container/LogDetailedView/InfraMetrics/PodMetrics.tsx b/frontend/src/container/LogDetailedView/InfraMetrics/PodMetrics.tsx index 3ba0e9dc25..9e9f14b508 100644 --- a/frontend/src/container/LogDetailedView/InfraMetrics/PodMetrics.tsx +++ b/frontend/src/container/LogDetailedView/InfraMetrics/PodMetrics.tsx @@ -96,7 +96,7 @@ function PodMetrics({ return ( - {chartData.map((data, idx) => ( + {queries.map((query, idx) => ( {cardTitles[idx]} - {renderCardContent(queries[idx], idx)} + {renderCardContent(query, idx)} ))} diff --git a/frontend/src/container/LogDetailedView/InfraMetrics/constants.ts b/frontend/src/container/LogDetailedView/InfraMetrics/constants.ts index f59406275d..4df34e14d9 100644 --- a/frontend/src/container/LogDetailedView/InfraMetrics/constants.ts +++ b/frontend/src/container/LogDetailedView/InfraMetrics/constants.ts @@ -3213,6 +3213,173 @@ export const getHostQueryPayload = ( variables: {}, formatForWeb: false, }, + { + selectedTime: 'GLOBAL_TIME', + graphType: PANEL_TYPES.TIME_SERIES, + query: { + builder: { + queryData: [ + { + aggregateAttribute: { + dataType: DataTypes.Float64, + id: 'system_network_connections--float64--Gauge--true', + isColumn: true, + isJSON: false, + key: 'system_network_connections', + type: 'Gauge', + }, + aggregateOperator: 'avg', + dataSource: DataSource.METRICS, + disabled: false, + expression: 'A', + filters: { + items: [ + { + id: '87f665b5', + key: { + dataType: DataTypes.String, + id: 'host_name--string--tag--false', + isColumn: false, + isJSON: false, + key: 'host_name', + type: 'tag', + }, + op: '=', + value: hostName, + }, + ], + op: 'AND', + }, + functions: [], + groupBy: [ + { + dataType: DataTypes.String, + id: 'protocol--string--tag--false', + isColumn: false, + isJSON: false, + key: 'protocol', + type: 'tag', + }, + { + dataType: DataTypes.String, + id: 'state--string--tag--false', + isColumn: false, + isJSON: false, + key: 'state', + type: 'tag', + }, + ], + having: [], + legend: '{{protocol}}::{{state}}', + limit: 30, + orderBy: [], + queryName: 'A', + reduceTo: 'avg', + spaceAggregation: 'sum', + stepInterval: 60, + timeAggregation: 'avg', + }, + ], + queryFormulas: [], + }, + clickhouse_sql: [ + { + disabled: false, + legend: '', + name: 'A', + query: '', + }, + ], + id: 'ab685a3d-fa4c-4663-8d94-c452e59038f3', + promql: [ + { + disabled: false, + legend: '', + name: 'A', + query: '', + }, + ], + queryType: EQueryType.QUERY_BUILDER, + }, + globalSelectedInterval: '3h', + variables: {}, + formatForWeb: false, + }, + { + selectedTime: 'GLOBAL_TIME', + graphType: PANEL_TYPES.TIME_SERIES, + query: { + builder: { + queryData: [ + { + aggregateAttribute: { + dataType: DataTypes.Float64, + id: 'system_disk_io--float64--Sum--true', + isColumn: true, + isJSON: false, + key: 'system_disk_io', + type: 'Sum', + }, + aggregateOperator: 'rate', + dataSource: DataSource.METRICS, + disabled: false, + expression: 'A', + filters: { + items: [ + { + id: '6039199f', + key: { + dataType: DataTypes.String, + id: 'host_name--string--tag--false', + isColumn: false, + isJSON: false, + key: 'host_name', + type: 'tag', + }, + op: '=', + value: hostName, + }, + ], + op: 'AND', + }, + functions: [], + groupBy: [], + having: [], + legend: '', + limit: null, + orderBy: [], + queryName: 'A', + reduceTo: 'avg', + spaceAggregation: 'sum', + stepInterval: 60, + timeAggregation: 'rate', + }, + ], + queryFormulas: [], + }, + clickhouse_sql: [ + { + disabled: false, + legend: '', + name: 'A', + query: '', + }, + ], + id: '9bd40b51-0790-4cdd-9718-551b2ded5926', + promql: [ + { + disabled: false, + legend: '', + name: 'A', + query: '', + }, + ], + queryType: EQueryType.QUERY_BUILDER, + }, + globalSelectedInterval: '3h', + variables: {}, + formatForWeb: false, + }, { selectedTime: 'GLOBAL_TIME', graphType: PANEL_TYPES.TIME_SERIES, @@ -3320,20 +3487,20 @@ export const getHostQueryPayload = ( { aggregateAttribute: { dataType: DataTypes.Float64, - id: 'system_disk_io--float64--Sum--true', + id: 'system_disk_pending_operations--float64--Gauge--true', isColumn: true, isJSON: false, - key: 'system_disk_io', - type: 'Sum', + key: 'system_disk_pending_operations', + type: 'Gauge', }, - aggregateOperator: 'rate', + aggregateOperator: 'max', dataSource: DataSource.METRICS, disabled: false, expression: 'A', filters: { items: [ { - id: '6039199f', + id: 'a1023af9', key: { dataType: DataTypes.String, id: 'host_name--string--tag--false', @@ -3349,16 +3516,31 @@ export const getHostQueryPayload = ( op: 'AND', }, functions: [], - groupBy: [], - having: [], - legend: '', + groupBy: [ + { + dataType: DataTypes.String, + id: 'device--string--tag--false', + isColumn: false, + isJSON: false, + key: 'device', + type: 'tag', + }, + ], + having: [ + { + columnName: 'SUM(system_disk_pending_operations)', + op: '>', + value: 0, + }, + ], + legend: '{{device}}', limit: null, orderBy: [], queryName: 'A', reduceTo: 'avg', spaceAggregation: 'sum', stepInterval: 60, - timeAggregation: 'rate', + timeAggregation: 'max', }, ], queryFormulas: [], @@ -3371,7 +3553,7 @@ export const getHostQueryPayload = ( query: '', }, ], - id: '9bd40b51-0790-4cdd-9718-551b2ded5926', + id: 'f4cfc2a5-78fc-42cc-8f4a-194c8c916132', promql: [ { disabled: false, @@ -3395,10 +3577,10 @@ export const getHostQueryPayload = ( { aggregateAttribute: { dataType: DataTypes.Float64, - id: 'system_network_io--float64--Sum--true', + id: 'system_disk_operation_time--float64--Sum--true', isColumn: true, isJSON: false, - key: 'system_network_io', + key: 'system_disk_operation_time', type: 'Sum', }, aggregateOperator: 'rate', @@ -3408,7 +3590,7 @@ export const getHostQueryPayload = ( filters: { items: [ { - id: 'e35cae4e', + id: 'd21dc017', key: { dataType: DataTypes.String, id: 'host_name--string--tag--false', @@ -3424,15 +3606,32 @@ export const getHostQueryPayload = ( op: 'AND', }, functions: [], - groupBy: [], + groupBy: [ + { + dataType: DataTypes.String, + id: 'device--string--tag--false', + isColumn: false, + isJSON: false, + key: 'device', + type: 'tag', + }, + { + dataType: DataTypes.String, + id: 'direction--string--tag--false', + isColumn: false, + isJSON: false, + key: 'direction', + type: 'tag', + }, + ], having: [ { - columnName: 'SUM(system_network_io)', + columnName: 'SUM(system_disk_operation_time)', op: '>', value: 0, }, ], - legend: '', + legend: '{{device}}::{{direction}}', limit: null, orderBy: [], queryName: 'A', @@ -3452,7 +3651,7 @@ export const getHostQueryPayload = ( query: '', }, ], - id: '6e58ef98-c680-4d28-a538-4b1ac71d3c37', + id: '9c6d18ad-89ff-4e38-a15a-440e72ed6ca8', promql: [ { disabled: false, @@ -3470,10 +3669,14 @@ export const getHostQueryPayload = ( ]; export const cardTitles: string[] = [ - 'Pod CPU usage', - 'Pod memory usage (WSS)', + 'Pod CPU usage [% of Limit]', + 'Pod filesystem usage [%]', + 'Pod memory usage [% of Request]', 'Pod network IO', - 'Pod filesystem usage', + 'Pod CPU usage [% of Request]', + 'Pod memory usage [% of Limit]', + 'CPU usage', + 'Memory Usage', ]; export const VIEW_TYPES = { @@ -3481,9 +3684,26 @@ export const VIEW_TYPES = { POD: 'pod', }; -export const nodeCardTitles = [ +export const nodeCardTitles: string[] = [ 'Node CPU usage', 'Node memory usage (WSS)', 'Node network IO', 'Node filesystem usage', ]; + +export const hostCardTitles: string[] = [ + 'CPU Used', + 'Memory Used', + 'CPU Usage', + 'Memory Usage', + 'System Load Average', + 'Network usage (bytes)', + 'Network usage (packet/s)', + 'Network errors', + 'Network dropped', + 'Network connections', + 'System disk io (bytes transferred)', + 'System disk operations/s', + 'Queue size', + 'Disk operations time', +]; From 228d7b697b062d1b32c96187934d8e78d5716918 Mon Sep 17 00:00:00 2001 From: rahulkeswani101 Date: Sat, 7 Sep 2024 19:33:22 +0530 Subject: [PATCH 11/26] fix: updated the constant for host name --- frontend/src/components/LogDetail/constants.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/components/LogDetail/constants.ts b/frontend/src/components/LogDetail/constants.ts index 257b14310e..dea5121dd1 100644 --- a/frontend/src/components/LogDetail/constants.ts +++ b/frontend/src/components/LogDetail/constants.ts @@ -11,5 +11,5 @@ export const RESOURCE_KEYS = { CLUSTER_NAME: 'k8s.cluster.name', POD_NAME: 'k8s.pod.name', NODE_NAME: 'k8s.node.name', - HOST_NAME: 'hostname', + HOST_NAME: 'host.name', } as const; From 985fa96c5ff166ff4ba4a9fe1b82986669f5005d Mon Sep 17 00:00:00 2001 From: rahulkeswani101 Date: Mon, 9 Sep 2024 16:16:13 +0530 Subject: [PATCH 12/26] feat: added vertical dotted line to all panels and updated y axis units for all panels --- frontend/src/components/LogDetail/index.tsx | 7 +- .../InfraMetrics/InfraMetrics.styles.scss | 12 +- .../InfraMetrics/InfraMetrics.tsx | 15 +- .../InfraMetrics/NodeMetrics.tsx | 76 +- .../InfraMetrics/PodMetrics.tsx | 65 +- .../LogDetailedView/InfraMetrics/constants.ts | 1014 ++++++----------- .../src/lib/uPlotLib/getUplotChartOptions.ts | 82 ++ 7 files changed, 511 insertions(+), 760 deletions(-) diff --git a/frontend/src/components/LogDetail/index.tsx b/frontend/src/components/LogDetail/index.tsx index 26e95f7ee9..3cb1908953 100644 --- a/frontend/src/components/LogDetail/index.tsx +++ b/frontend/src/components/LogDetail/index.tsx @@ -23,7 +23,7 @@ import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder'; import { useIsDarkMode } from 'hooks/useDarkMode'; import { useNotifications } from 'hooks/useNotifications'; import { - Activity, + BarChart2, Braces, Copy, Filter, @@ -201,8 +201,8 @@ function LogDetail({ value={VIEW_TYPES.INFRAMETRICS} >
- - InfraMetrics + + Metrics
@@ -265,6 +265,7 @@ function LogDetail({ podName={log.resources_string?.[RESOURCE_KEYS.POD_NAME] as string} nodeName={log.resources_string?.[RESOURCE_KEYS.NODE_NAME] as string} hostName={log.resources_string?.[RESOURCE_KEYS.HOST_NAME] as string} + logLineTimestamp={log.timestamp.toString()} /> )} diff --git a/frontend/src/container/LogDetailedView/InfraMetrics/InfraMetrics.styles.scss b/frontend/src/container/LogDetailedView/InfraMetrics/InfraMetrics.styles.scss index c7daedb384..9e49bcba94 100644 --- a/frontend/src/container/LogDetailedView/InfraMetrics/InfraMetrics.styles.scss +++ b/frontend/src/container/LogDetailedView/InfraMetrics/InfraMetrics.styles.scss @@ -21,12 +21,14 @@ } .chart-container { - overflow: hidden; - width: 100%; + width: 100%; height: 100%; } -} -.no-data-card { - height: 100px; + .no-data-container { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + } } diff --git a/frontend/src/container/LogDetailedView/InfraMetrics/InfraMetrics.tsx b/frontend/src/container/LogDetailedView/InfraMetrics/InfraMetrics.tsx index abed7a0883..8c854277c3 100644 --- a/frontend/src/container/LogDetailedView/InfraMetrics/InfraMetrics.tsx +++ b/frontend/src/container/LogDetailedView/InfraMetrics/InfraMetrics.tsx @@ -1,8 +1,8 @@ import './InfraMetrics.styles.scss'; -import { ClusterOutlined, ContainerOutlined } from '@ant-design/icons'; import { Empty, Radio } from 'antd'; import { RadioChangeEvent } from 'antd/lib'; +import { History, Table } from 'lucide-react'; import { useState } from 'react'; import { VIEW_TYPES } from './constants'; @@ -14,6 +14,7 @@ interface MetricsDataProps { nodeName: string; hostName: string; clusterName: string; + logLineTimestamp: string; } function InfraMetrics({ @@ -21,6 +22,7 @@ function InfraMetrics({ nodeName, hostName, clusterName, + logLineTimestamp, }: MetricsDataProps): JSX.Element { const initialView = podName ? VIEW_TYPES.POD : VIEW_TYPES.NODE; const [selectedView, setSelectedView] = useState(initialView); @@ -52,7 +54,7 @@ function InfraMetrics({ value={VIEW_TYPES.NODE} >
- + Node @@ -62,7 +64,7 @@ function InfraMetrics({ value={VIEW_TYPES.POD} >
- + Pod
@@ -73,10 +75,15 @@ function InfraMetrics({ nodeName={nodeName} clusterName={clusterName} hostName={hostName} + logLineTimestamp={logLineTimestamp} /> )} {selectedView === VIEW_TYPES.POD && podName && ( - + )} ); diff --git a/frontend/src/container/LogDetailedView/InfraMetrics/NodeMetrics.tsx b/frontend/src/container/LogDetailedView/InfraMetrics/NodeMetrics.tsx index 33070c5ff8..8675d65cf5 100644 --- a/frontend/src/container/LogDetailedView/InfraMetrics/NodeMetrics.tsx +++ b/frontend/src/container/LogDetailedView/InfraMetrics/NodeMetrics.tsx @@ -2,10 +2,10 @@ import { Card, Col, Row, Skeleton, Typography } from 'antd'; import cx from 'classnames'; import Uplot from 'components/Uplot'; import { ENTITY_VERSION_V4 } from 'constants/app'; +import dayjs from 'dayjs'; import { useIsDarkMode } from 'hooks/useDarkMode'; import { useResizeObserver } from 'hooks/useDimensions'; import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults'; -import getStartEndRangeTime from 'lib/getStartEndRangeTime'; import { getUPlotChartOptions } from 'lib/uPlotLib/getUplotChartOptions'; import { getUPlotChartData } from 'lib/uPlotLib/utils/getUplotChartData'; import { useMemo, useRef } from 'react'; @@ -16,25 +16,37 @@ import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange'; import { getHostQueryPayload, getNodeQueryPayload, - hostCardTitles, - nodeCardTitles, + hostWidgetInfo, + nodeWidgetInfo, } from './constants'; function NodeMetrics({ nodeName, clusterName, hostName, + logLineTimestamp, }: { nodeName: string; clusterName: string; hostName: string; + logLineTimestamp: string; }): JSX.Element { - const { start, end } = getStartEndRangeTime({ - type: 'GLOBAL_TIME', - interval: '3h', - }); - const minTimeScale = (parseInt(start, 10) * 1e3) / 1000; - const maxTimeScale = (parseInt(end, 10) * 1e3) / 1000; + const { start, end, verticalLineTimestamp } = useMemo(() => { + const logTimestamp = dayjs(logLineTimestamp); + const now = dayjs(); + const startTime = logTimestamp.subtract(3, 'hour'); + + const endTime = logTimestamp.add(3, 'hour').isBefore(now) + ? logTimestamp.add(3, 'hour') + : now; + + return { + start: startTime.unix(), + end: endTime.unix(), + verticalLineTimestamp: logTimestamp.unix(), + }; + }, [logLineTimestamp]); + const queryPayloads = useMemo(() => { if (nodeName) { return getNodeQueryPayload(clusterName, nodeName); @@ -42,7 +54,7 @@ function NodeMetrics({ return getHostQueryPayload(hostName); }, [clusterName, nodeName, hostName]); - const cardTitles = nodeName ? nodeCardTitles : hostCardTitles; + const widgetInfo = nodeName ? nodeWidgetInfo : hostWidgetInfo; const queries = useQueries( queryPayloads.map((payload) => ({ @@ -62,12 +74,6 @@ function NodeMetrics({ [queries], ); - const getYAxisUnit = (idx: number): string => { - if (idx === 1 || idx === 3) return 'bytes'; - if (idx === 2) return 'binBps'; - return ''; - }; - const options = useMemo( () => queries.map(({ data }, idx) => @@ -75,14 +81,23 @@ function NodeMetrics({ apiResponse: data?.payload, isDarkMode, dimensions, - yAxisUnit: getYAxisUnit(idx), + yAxisUnit: widgetInfo[idx].yAxisUnit, softMax: null, softMin: null, - minTimeScale, - maxTimeScale, + minTimeScale: start, + maxTimeScale: end, + verticalLineTimestamp, }), ), - [queries, isDarkMode, dimensions, minTimeScale, maxTimeScale], + [ + queries, + isDarkMode, + dimensions, + widgetInfo, + start, + end, + verticalLineTimestamp, + ], ); const renderCardContent = ( @@ -99,7 +114,12 @@ function NodeMetrics({ return
{errorMessage}
; } return ( -
+
); @@ -107,17 +127,9 @@ function NodeMetrics({ return ( {queries.map((query, idx) => ( -
- {cardTitles[idx]} - + + {widgetInfo[idx].title} + {renderCardContent(query, idx)} diff --git a/frontend/src/container/LogDetailedView/InfraMetrics/PodMetrics.tsx b/frontend/src/container/LogDetailedView/InfraMetrics/PodMetrics.tsx index 9e9f14b508..cf2ea86910 100644 --- a/frontend/src/container/LogDetailedView/InfraMetrics/PodMetrics.tsx +++ b/frontend/src/container/LogDetailedView/InfraMetrics/PodMetrics.tsx @@ -2,10 +2,10 @@ import { Card, Col, Row, Skeleton, Typography } from 'antd'; import cx from 'classnames'; import Uplot from 'components/Uplot'; import { ENTITY_VERSION_V4 } from 'constants/app'; +import dayjs from 'dayjs'; import { useIsDarkMode } from 'hooks/useDarkMode'; import { useResizeObserver } from 'hooks/useDimensions'; import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults'; -import getStartEndRangeTime from 'lib/getStartEndRangeTime'; import { getUPlotChartOptions } from 'lib/uPlotLib/getUplotChartOptions'; import { getUPlotChartData } from 'lib/uPlotLib/utils/getUplotChartData'; import { useMemo, useRef } from 'react'; @@ -13,22 +13,33 @@ import { useQueries, UseQueryResult } from 'react-query'; import { SuccessResponse } from 'types/api'; import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange'; -import { cardTitles, getQueryPayload } from './constants'; +import { getPodQueryPayload, podWidgetInfo } from './constants'; function PodMetrics({ podName, clusterName, + logLineTimestamp, }: { podName: string; clusterName: string; + logLineTimestamp: string; }): JSX.Element { - const { start, end } = getStartEndRangeTime({ - type: 'GLOBAL_TIME', - interval: '3h', - }); - const minTimeScale = (parseInt(start, 10) * 1e3) / 1000; - const maxTimeScale = (parseInt(end, 10) * 1e3) / 1000; - const queryPayloads = useMemo(() => getQueryPayload(clusterName, podName), [ + const { start, end, verticalLineTimestamp } = useMemo(() => { + const logTimestamp = dayjs(logLineTimestamp); + const now = dayjs(); + const startTime = logTimestamp.subtract(3, 'hour'); + + const endTime = logTimestamp.add(3, 'hour').isBefore(now) + ? logTimestamp.add(3, 'hour') + : now; + + return { + start: startTime.unix(), + end: endTime.unix(), + verticalLineTimestamp: logTimestamp.unix(), + }; + }, [logLineTimestamp]); + const queryPayloads = useMemo(() => getPodQueryPayload(clusterName, podName), [ clusterName, podName, ]); @@ -51,12 +62,6 @@ function PodMetrics({ [queries], ); - const getYAxisUnit = (idx: number): string => { - if (idx === 1 || idx === 3) return 'bytes'; - if (idx === 2) return 'binBps'; - return ''; - }; - const options = useMemo( () => queries.map(({ data }, idx) => @@ -64,14 +69,15 @@ function PodMetrics({ apiResponse: data?.payload, isDarkMode, dimensions, - yAxisUnit: getYAxisUnit(idx), + yAxisUnit: podWidgetInfo[idx].yAxisUnit, softMax: null, softMin: null, - minTimeScale, - maxTimeScale, + minTimeScale: start, + maxTimeScale: end, + verticalLineTimestamp, }), ), - [queries, isDarkMode, dimensions, minTimeScale, maxTimeScale], + [queries, isDarkMode, dimensions, start, end, verticalLineTimestamp], ); const renderCardContent = ( @@ -88,7 +94,12 @@ function PodMetrics({ return
{errorMessage}
; } return ( -
+
); @@ -97,17 +108,9 @@ function PodMetrics({ return ( {queries.map((query, idx) => ( -
- {cardTitles[idx]} - + + {podWidgetInfo[idx].title} + {renderCardContent(query, idx)} diff --git a/frontend/src/container/LogDetailedView/InfraMetrics/constants.ts b/frontend/src/container/LogDetailedView/InfraMetrics/constants.ts index 4df34e14d9..c91b752245 100644 --- a/frontend/src/container/LogDetailedView/InfraMetrics/constants.ts +++ b/frontend/src/container/LogDetailedView/InfraMetrics/constants.ts @@ -5,399 +5,7 @@ import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse'; import { EQueryType } from 'types/common/dashboard'; import { DataSource } from 'types/common/queryBuilder'; -// export const getQueryPayload = ( -// clusterName: string, -// podName: string, -// ): GetQueryResultsProps[] => [ -// { -// selectedTime: 'GLOBAL_TIME', -// graphType: PANEL_TYPES.TIME_SERIES, -// query: { -// builder: { -// queryData: [ -// { -// aggregateAttribute: { -// dataType: DataTypes.Float64, -// id: 'k8s_pod_cpu_utilization--float64----true', -// isColumn: true, -// key: 'k8s_pod_cpu_utilization', -// type: '', -// }, -// aggregateOperator: 'avg', -// dataSource: DataSource.METRICS, -// disabled: false, -// expression: 'A', -// filters: { -// items: [ -// { -// id: '9a0ffaf3', -// key: { -// dataType: DataTypes.String, -// id: 'k8s_cluster_name--string--tag--false', -// isColumn: false, -// key: 'k8s_cluster_name', -// type: 'tag', -// }, -// op: '=', -// value: clusterName, -// }, -// { -// id: '9a0ffaf3', -// key: { -// dataType: DataTypes.String, -// id: 'k8s_pod_name--string--tag--false', -// isColumn: false, -// key: 'k8s_pod_name', -// type: 'tag', -// }, -// op: '=', -// value: podName, -// }, -// ], -// op: 'AND', -// }, -// groupBy: [ -// { -// dataType: DataTypes.String, -// id: 'k8s_pod_name--string--tag--false', -// isColumn: false, -// key: 'k8s_pod_name', -// type: 'tag', -// }, -// ], -// having: [], -// legend: '{{k8s_pod_name}}', -// limit: null, -// orderBy: [], -// queryName: 'A', -// reduceTo: 'sum', -// spaceAggregation: 'sum', -// stepInterval: 60, -// timeAggregation: 'avg', -// functions: [], -// }, -// ], -// queryFormulas: [], -// }, -// clickhouse_sql: [ -// { -// disabled: false, -// legend: '', -// name: 'A', -// query: '', -// }, -// ], -// id: '3fe84db4-8f8b-44ba-b903-2daaab59c756', -// promql: [ -// { -// disabled: false, -// legend: '', -// name: 'A', -// query: '', -// }, -// ], -// queryType: EQueryType.QUERY_BUILDER, -// }, -// globalSelectedInterval: '3h', -// variables: {}, -// formatForWeb: false, -// }, -// { -// selectedTime: 'GLOBAL_TIME', -// graphType: PANEL_TYPES.TIME_SERIES, -// query: { -// builder: { -// queryData: [ -// { -// aggregateAttribute: { -// dataType: DataTypes.Float64, -// id: 'k8s_pod_memory_usage--float64----true', -// isColumn: true, -// key: 'k8s_pod_memory_usage', -// type: '', -// }, -// aggregateOperator: 'avg', -// dataSource: DataSource.METRICS, -// disabled: false, -// expression: 'A', -// filters: { -// items: [ -// { -// id: '9a0ffaf3', -// key: { -// dataType: DataTypes.String, -// id: 'k8s_cluster_name--string--tag--false', -// isColumn: false, -// key: 'k8s_cluster_name', -// type: 'tag', -// }, -// op: '=', -// value: clusterName, -// }, -// { -// id: '2d8022f6', -// key: { -// dataType: DataTypes.String, -// id: 'k8s_pod_name--string--tag--false', -// isColumn: false, -// key: 'k8s_pod_name', -// type: 'tag', -// }, -// op: '=', -// value: podName, -// }, -// ], -// op: 'AND', -// }, -// groupBy: [ -// { -// dataType: DataTypes.String, -// id: 'k8s_pod_name--string--tag--false', -// isColumn: false, -// key: 'k8s_pod_name', -// type: 'tag', -// }, -// ], -// having: [], -// legend: '{{k8s_pod_name}}', -// limit: null, -// orderBy: [], -// queryName: 'A', -// reduceTo: 'sum', -// spaceAggregation: 'sum', -// stepInterval: 60, -// timeAggregation: 'avg', -// functions: [], -// }, -// ], -// queryFormulas: [], -// }, -// clickhouse_sql: [ -// { -// disabled: false, -// legend: '', -// name: 'A', -// query: '', -// }, -// ], -// id: '59c73365-4180-4ddd-9406-2e2d8cfbc0d9', -// promql: [ -// { -// disabled: false, -// legend: '', -// name: 'A', -// query: '', -// }, -// ], -// queryType: EQueryType.QUERY_BUILDER, -// }, -// globalSelectedInterval: '3h', -// variables: {}, -// formatForWeb: false, -// }, -// { -// selectedTime: 'GLOBAL_TIME', -// graphType: PANEL_TYPES.TIME_SERIES, -// query: { -// builder: { -// queryData: [ -// { -// aggregateAttribute: { -// dataType: DataTypes.Float64, -// id: 'k8s_pod_network_io--float64----true', -// isColumn: true, -// key: 'k8s_pod_network_io', -// type: '', -// }, -// aggregateOperator: 'sum_rate', -// dataSource: DataSource.METRICS, -// disabled: false, -// expression: 'A', -// filters: { -// items: [ -// { -// id: '9a0ffaf3', -// key: { -// dataType: DataTypes.String, -// id: 'k8s_cluster_name--string--tag--false', -// isColumn: false, -// key: 'k8s_cluster_name', -// type: 'tag', -// }, -// op: '=', -// value: clusterName, -// }, -// { -// id: 'c32821ed', -// key: { -// dataType: DataTypes.String, -// id: 'k8s_pod_name--string--tag--false', -// isColumn: false, -// key: 'k8s_pod_name', -// type: 'tag', -// }, -// op: '=', -// value: podName, -// }, -// ], -// op: 'AND', -// }, -// groupBy: [ -// { -// dataType: DataTypes.String, -// id: 'direction--string--tag--false', -// isColumn: false, -// key: 'direction', -// type: 'tag', -// }, -// { -// dataType: DataTypes.String, -// id: 'interface--string--tag--false', -// isColumn: false, -// key: 'interface', -// type: 'tag', -// }, -// { -// dataType: DataTypes.String, -// id: 'k8s_pod_name--string--tag--false', -// isColumn: false, -// key: 'k8s_pod_name', -// type: 'tag', -// }, -// ], -// having: [], -// legend: '{{k8s_pod_name}}-{{interface}}-{{direction}}', -// limit: null, -// orderBy: [], -// queryName: 'A', -// reduceTo: 'sum', -// spaceAggregation: 'sum', -// stepInterval: 60, -// timeAggregation: 'rate', -// functions: [], -// }, -// ], -// queryFormulas: [], -// }, -// clickhouse_sql: [ -// { -// disabled: false, -// legend: '', -// name: 'A', -// query: '', -// }, -// ], -// id: '534b461d-d992-4a30-ba17-ed7aac95a55b', -// promql: [ -// { -// disabled: false, -// legend: '', -// name: 'A', -// query: '', -// }, -// ], -// queryType: EQueryType.QUERY_BUILDER, -// }, -// globalSelectedInterval: '3h', -// variables: {}, -// formatForWeb: false, -// }, -// { -// selectedTime: 'GLOBAL_TIME', -// graphType: PANEL_TYPES.TIME_SERIES, -// query: { -// builder: { -// queryData: [ -// { -// aggregateAttribute: { -// dataType: DataTypes.Float64, -// id: 'k8s_pod_filesystem_usage--float64----true', -// isColumn: true, -// key: 'k8s_pod_filesystem_usage', -// type: '', -// }, -// aggregateOperator: 'avg', -// dataSource: DataSource.METRICS, -// disabled: false, -// expression: 'A', -// filters: { -// items: [ -// { -// id: '9a0ffaf3', -// key: { -// dataType: DataTypes.String, -// id: 'k8s_cluster_name--string--tag--false', -// isColumn: false, -// key: 'k8s_cluster_name', -// type: 'tag', -// }, -// op: '=', -// value: clusterName, -// }, -// { -// id: 'ba47cf47', -// key: { -// dataType: DataTypes.String, -// id: 'k8s_pod_name--string--tag--false', -// isColumn: false, -// key: 'k8s_pod_name', -// type: 'tag', -// }, -// op: '=', -// value: podName, -// }, -// ], -// op: 'AND', -// }, -// groupBy: [ -// { -// dataType: DataTypes.String, -// id: 'k8s_pod_name--string--tag--false', -// isColumn: false, -// key: 'k8s_pod_name', -// type: 'tag', -// }, -// ], -// having: [], -// legend: '{{k8s_pod_name}}', -// limit: null, -// orderBy: [], -// queryName: 'A', -// reduceTo: 'sum', -// spaceAggregation: 'sum', -// stepInterval: 60, -// timeAggregation: 'avg', -// functions: [], -// }, -// ], -// queryFormulas: [], -// }, -// clickhouse_sql: [ -// { -// disabled: false, -// legend: '', -// name: 'A', -// query: '', -// }, -// ], -// id: '5a709367-ad0b-4a0a-9f7e-884e555f7686', -// promql: [ -// { -// disabled: false, -// legend: '', -// name: 'A', -// query: '', -// }, -// ], -// queryType: EQueryType.QUERY_BUILDER, -// }, -// globalSelectedInterval: '3h', -// variables: {}, -// formatForWeb: false, -// }, -// ]; - -export const getQueryPayload = ( +export const getPodQueryPayload = ( clusterName: string, podName: string, ): GetQueryResultsProps[] => [ @@ -418,16 +26,17 @@ export const getQueryPayload = ( }, aggregateOperator: 'avg', dataSource: DataSource.METRICS, - disabled: true, + disabled: false, expression: 'A', filters: { items: [ { - id: '0a862947', + id: '6e050953', key: { dataType: DataTypes.String, id: 'k8s_cluster_name--string--tag--false', isColumn: false, + isJSON: false, key: 'k8s_cluster_name', type: 'tag', }, @@ -435,11 +44,12 @@ export const getQueryPayload = ( value: clusterName, }, { - id: 'cd13fbf0', + id: '60fe5e62', key: { dataType: DataTypes.String, id: 'k8s_pod_name--string--tag--false', isColumn: false, + isJSON: false, key: 'k8s_pod_name', type: 'tag', }, @@ -461,32 +71,64 @@ export const getQueryPayload = ( }, ], having: [], - legend: 'usage - {{k8s_pod_name}}', + legend: '{{k8s_pod_name}}', limit: null, orderBy: [], queryName: 'A', - reduceTo: 'sum', + reduceTo: 'avg', spaceAggregation: 'sum', stepInterval: 60, timeAggregation: 'avg', }, + ], + queryFormulas: [], + }, + clickhouse_sql: [ + { + disabled: false, + legend: '', + name: 'A', + query: '', + }, + ], + id: '9b92756a-b445-45f8-90f4-d26f3ef28f8f', + promql: [ + { + disabled: false, + legend: '', + name: 'A', + query: '', + }, + ], + queryType: EQueryType.QUERY_BUILDER, + }, + globalSelectedInterval: '6h', + variables: {}, + formatForWeb: false, + }, + { + selectedTime: 'GLOBAL_TIME', + graphType: PANEL_TYPES.TIME_SERIES, + query: { + builder: { + queryData: [ { aggregateAttribute: { dataType: DataTypes.Float64, - id: 'k8s_container_cpu_limit--float64--Gauge--true', + id: 'container_memory_usage--float64--Gauge--true', isColumn: true, isJSON: false, - key: 'k8s_container_cpu_limit', + key: 'container_memory_usage', type: 'Gauge', }, - aggregateOperator: 'latest', + aggregateOperator: 'avg', dataSource: DataSource.METRICS, - disabled: true, - expression: 'B', + disabled: false, + expression: 'A', filters: { items: [ { - id: 'bfb8acf7', + id: 'a4250695', key: { dataType: DataTypes.String, id: 'k8s_cluster_name--string--tag--false', @@ -499,7 +141,7 @@ export const getQueryPayload = ( value: clusterName, }, { - id: 'e09ba819', + id: '3b2bc32b', key: { dataType: DataTypes.String, id: 'k8s_pod_name--string--tag--false', @@ -509,7 +151,7 @@ export const getQueryPayload = ( type: 'tag', }, op: 'in', - value: ['{{.k8s_node_name}}'], + value: podName, }, ], op: 'AND', @@ -526,24 +168,17 @@ export const getQueryPayload = ( }, ], having: [], - legend: 'limit - {{k8s_pod_name}}', + legend: '{{k8s_pod_name}}', limit: null, orderBy: [], - queryName: 'B', + queryName: 'A', reduceTo: 'avg', spaceAggregation: 'sum', stepInterval: 60, - timeAggregation: 'latest', - }, - ], - queryFormulas: [ - { - disabled: false, - expression: 'A*100/B', - legend: '{{k8s_pod_name}}', - queryName: 'F1', + timeAggregation: 'avg', }, ], + queryFormulas: [], }, clickhouse_sql: [ { @@ -553,7 +188,7 @@ export const getQueryPayload = ( query: '', }, ], - id: '6d5ccd81-0ea1-4fb9-a66b-7f0fe2f15165', + id: 'a22c1e03-4876-4b3e-9a96-a3c3a28f9c0f', promql: [ { disabled: false, @@ -564,7 +199,7 @@ export const getQueryPayload = ( ], queryType: EQueryType.QUERY_BUILDER, }, - globalSelectedInterval: '3h', + globalSelectedInterval: '6h', variables: {}, formatForWeb: false, }, @@ -577,10 +212,10 @@ export const getQueryPayload = ( { aggregateAttribute: { dataType: DataTypes.Float64, - id: 'k8s_pod_filesystem_available--float64--Gauge--true', + id: 'container_cpu_utilization--float64--Gauge--true', isColumn: true, isJSON: false, - key: 'k8s_pod_filesystem_available', + key: 'container_cpu_utilization', type: 'Gauge', }, aggregateOperator: 'avg', @@ -590,7 +225,7 @@ export const getQueryPayload = ( filters: { items: [ { - id: 'c0f3e7ef', + id: '8426b52f', key: { dataType: DataTypes.String, id: 'k8s_cluster_name--string--tag--false', @@ -602,7 +237,7 @@ export const getQueryPayload = ( value: clusterName, }, { - id: 'ae457343', + id: '2f67240c', key: { dataType: DataTypes.String, id: 'k8s_pod_name--string--tag--false', @@ -640,24 +275,25 @@ export const getQueryPayload = ( { aggregateAttribute: { dataType: DataTypes.Float64, - id: 'k8s_pod_filesystem_capacity--float64--Gauge--true', + id: 'k8s_container_cpu_request--float64--Gauge--true', isColumn: true, isJSON: false, - key: 'k8s_pod_filesystem_capacity', + key: 'k8s_container_cpu_request', type: 'Gauge', }, - aggregateOperator: 'avg', + aggregateOperator: 'latest', dataSource: DataSource.METRICS, disabled: true, expression: 'B', filters: { items: [ { - id: '8a387fb7', + id: '8c4667e1', key: { dataType: DataTypes.String, id: 'k8s_cluster_name--string--tag--false', isColumn: false, + isJSON: false, key: 'k8s_cluster_name', type: 'tag', }, @@ -665,28 +301,17 @@ export const getQueryPayload = ( value: clusterName, }, { - id: '6ce28dde', - key: { - dataType: DataTypes.String, - id: 'k8s_node_name--string--tag--false', - isColumn: false, - key: 'k8s_node_name', - type: 'tag', - }, - op: 'in', - value: ['{{.k8s_node_name}}'], - }, - { - id: '3a50eee8', + id: 'b16e7306', key: { dataType: DataTypes.String, - id: 'k8s_namespace_name--string--tag--false', + id: 'k8s_pod_name--string--tag--false', isColumn: false, - key: 'k8s_namespace_name', + isJSON: false, + key: 'k8s_pod_name', type: 'tag', }, op: 'in', - value: ['{{.k8s_namespace_name}}'], + value: podName, }, ], op: 'AND', @@ -707,16 +332,16 @@ export const getQueryPayload = ( limit: null, orderBy: [], queryName: 'B', - reduceTo: 'sum', + reduceTo: 'avg', spaceAggregation: 'sum', stepInterval: 60, - timeAggregation: 'avg', + timeAggregation: 'latest', }, ], queryFormulas: [ { disabled: false, - expression: '(B-A)/B', + expression: 'A*100/B', legend: '{{k8s_pod_name}}', queryName: 'F1', }, @@ -730,7 +355,7 @@ export const getQueryPayload = ( query: '', }, ], - id: 'bbdc1096-339c-490c-a977-6eff00e3d72f', + id: '7bb3a6f5-d1c6-4f2e-9cc9-7dcc46db398f', promql: [ { disabled: false, @@ -741,7 +366,7 @@ export const getQueryPayload = ( ], queryType: EQueryType.QUERY_BUILDER, }, - globalSelectedInterval: '3h', + globalSelectedInterval: '6h', variables: {}, formatForWeb: false, }, @@ -754,10 +379,10 @@ export const getQueryPayload = ( { aggregateAttribute: { dataType: DataTypes.Float64, - id: 'container_memory_usage--float64--Gauge--true', + id: 'container_cpu_utilization--float64--Gauge--true', isColumn: true, isJSON: false, - key: 'container_memory_usage', + key: 'container_cpu_utilization', type: 'Gauge', }, aggregateOperator: 'avg', @@ -767,7 +392,7 @@ export const getQueryPayload = ( filters: { items: [ { - id: 'ea3df3e7', + id: '0a862947', key: { dataType: DataTypes.String, id: 'k8s_cluster_name--string--tag--false', @@ -779,7 +404,7 @@ export const getQueryPayload = ( value: clusterName, }, { - id: '39b21fe0', + id: 'cd13fbf0', key: { dataType: DataTypes.String, id: 'k8s_pod_name--string--tag--false', @@ -805,7 +430,7 @@ export const getQueryPayload = ( }, ], having: [], - legend: '', + legend: 'usage - {{k8s_pod_name}}', limit: null, orderBy: [], queryName: 'A', @@ -817,10 +442,10 @@ export const getQueryPayload = ( { aggregateAttribute: { dataType: DataTypes.Float64, - id: 'k8s_container_memory_request--float64--Gauge--true', + id: 'k8s_container_cpu_limit--float64--Gauge--true', isColumn: true, isJSON: false, - key: 'k8s_container_memory_request', + key: 'k8s_container_cpu_limit', type: 'Gauge', }, aggregateOperator: 'latest', @@ -830,7 +455,7 @@ export const getQueryPayload = ( filters: { items: [ { - id: '7401a4b9', + id: 'bfb8acf7', key: { dataType: DataTypes.String, id: 'k8s_cluster_name--string--tag--false', @@ -843,30 +468,17 @@ export const getQueryPayload = ( value: clusterName, }, { - id: '7cdad1cb', - key: { - dataType: DataTypes.String, - id: 'k8s_node_name--string--tag--false', - isColumn: false, - isJSON: false, - key: 'k8s_node_name', - type: 'tag', - }, - op: 'in', - value: podName, - }, - { - id: 'bd954dbe', + id: 'e09ba819', key: { dataType: DataTypes.String, - id: 'k8s_namespace_name--string--tag--false', + id: 'k8s_pod_name--string--tag--false', isColumn: false, isJSON: false, - key: 'k8s_namespace_name', + key: 'k8s_pod_name', type: 'tag', }, op: 'in', - value: ['{{.k8s_namespace_name}}'], + value: ['{{.k8s_node_name}}'], }, ], op: 'AND', @@ -883,7 +495,7 @@ export const getQueryPayload = ( }, ], having: [], - legend: '', + legend: 'limit - {{k8s_pod_name}}', limit: null, orderBy: [], queryName: 'B', @@ -910,130 +522,7 @@ export const getQueryPayload = ( query: '', }, ], - id: '4d03a0ff-4fa5-4b19-b397-97f80ba9e0ac', - promql: [ - { - disabled: false, - legend: '', - name: 'A', - query: '', - }, - ], - queryType: EQueryType.QUERY_BUILDER, - }, - globalSelectedInterval: '3h', - variables: {}, - formatForWeb: false, - }, - { - selectedTime: 'GLOBAL_TIME', - graphType: PANEL_TYPES.TIME_SERIES, - query: { - builder: { - queryData: [ - { - aggregateAttribute: { - dataType: DataTypes.Float64, - id: 'k8s_pod_network_io--float64--Sum--true', - isColumn: true, - isJSON: false, - key: 'k8s_pod_network_io', - type: 'Sum', - }, - aggregateOperator: 'rate', - dataSource: DataSource.METRICS, - disabled: false, - expression: 'A', - filters: { - items: [ - { - id: '877385bf', - key: { - dataType: DataTypes.String, - id: 'k8s_cluster_name--string--tag--false', - isColumn: false, - key: 'k8s_cluster_name', - type: 'tag', - }, - op: '=', - value: clusterName, - }, - { - id: '9613b4da', - key: { - dataType: DataTypes.String, - id: 'k8s_pod_name--string--tag--false', - isColumn: false, - key: 'k8s_pod_name', - type: 'tag', - }, - op: 'in', - value: podName, - }, - ], - op: 'AND', - }, - functions: [], - groupBy: [ - { - dataType: DataTypes.String, - id: 'interface--string--tag--false', - isColumn: false, - key: 'interface', - type: 'tag', - }, - { - dataType: DataTypes.String, - id: 'direction--string--tag--false', - isColumn: false, - key: 'direction', - type: 'tag', - }, - { - dataType: DataTypes.String, - id: 'k8s_node_name--string--tag--false', - isColumn: false, - key: 'k8s_node_name', - type: 'tag', - }, - { - dataType: DataTypes.String, - id: 'k8s_namespace_name--string--tag--false', - isColumn: false, - key: 'k8s_namespace_name', - type: 'tag', - }, - { - dataType: DataTypes.String, - id: 'k8s_pod_name--string--tag--false', - isColumn: false, - key: 'k8s_pod_name', - type: 'tag', - }, - ], - having: [], - legend: - '{{k8s_namespace_name}}-{{k8s_pod_name}}-{{interface}}-{{direction}}', - limit: null, - orderBy: [], - queryName: 'A', - reduceTo: 'sum', - spaceAggregation: 'sum', - stepInterval: 60, - timeAggregation: 'rate', - }, - ], - queryFormulas: [], - }, - clickhouse_sql: [ - { - disabled: false, - legend: '', - name: 'A', - query: '', - }, - ], - id: '4b255d6d-4cde-474d-8866-f4418583c18b', + id: '6d5ccd81-0ea1-4fb9-a66b-7f0fe2f15165', promql: [ { disabled: false, @@ -1044,7 +533,7 @@ export const getQueryPayload = ( ], queryType: EQueryType.QUERY_BUILDER, }, - globalSelectedInterval: '3h', + globalSelectedInterval: '6h', variables: {}, formatForWeb: false, }, @@ -1057,10 +546,10 @@ export const getQueryPayload = ( { aggregateAttribute: { dataType: DataTypes.Float64, - id: 'container_cpu_utilization--float64--Gauge--true', + id: 'container_memory_usage--float64--Gauge--true', isColumn: true, isJSON: false, - key: 'container_cpu_utilization', + key: 'container_memory_usage', type: 'Gauge', }, aggregateOperator: 'avg', @@ -1070,7 +559,7 @@ export const getQueryPayload = ( filters: { items: [ { - id: '8426b52f', + id: 'ea3df3e7', key: { dataType: DataTypes.String, id: 'k8s_cluster_name--string--tag--false', @@ -1082,7 +571,7 @@ export const getQueryPayload = ( value: clusterName, }, { - id: '2f67240c', + id: '39b21fe0', key: { dataType: DataTypes.String, id: 'k8s_pod_name--string--tag--false', @@ -1120,10 +609,10 @@ export const getQueryPayload = ( { aggregateAttribute: { dataType: DataTypes.Float64, - id: 'k8s_container_cpu_request--float64--Gauge--true', + id: 'k8s_container_memory_request--float64--Gauge--true', isColumn: true, isJSON: false, - key: 'k8s_container_cpu_request', + key: 'k8s_container_memory_request', type: 'Gauge', }, aggregateOperator: 'latest', @@ -1133,7 +622,7 @@ export const getQueryPayload = ( filters: { items: [ { - id: '8c4667e1', + id: '7401a4b9', key: { dataType: DataTypes.String, id: 'k8s_cluster_name--string--tag--false', @@ -1146,18 +635,31 @@ export const getQueryPayload = ( value: clusterName, }, { - id: 'b16e7306', + id: '7cdad1cb', key: { dataType: DataTypes.String, - id: 'k8s_pod_name--string--tag--false', + id: 'k8s_node_name--string--tag--false', isColumn: false, isJSON: false, - key: 'k8s_pod_name', + key: 'k8s_node_name', type: 'tag', }, op: 'in', value: podName, }, + { + id: 'bd954dbe', + key: { + dataType: DataTypes.String, + id: 'k8s_namespace_name--string--tag--false', + isColumn: false, + isJSON: false, + key: 'k8s_namespace_name', + type: 'tag', + }, + op: 'in', + value: ['{{.k8s_namespace_name}}'], + }, ], op: 'AND', }, @@ -1200,7 +702,7 @@ export const getQueryPayload = ( query: '', }, ], - id: '7bb3a6f5-d1c6-4f2e-9cc9-7dcc46db398f', + id: '4d03a0ff-4fa5-4b19-b397-97f80ba9e0ac', promql: [ { disabled: false, @@ -1211,7 +713,7 @@ export const getQueryPayload = ( ], queryType: EQueryType.QUERY_BUILDER, }, - globalSelectedInterval: '3h', + globalSelectedInterval: '6h', variables: {}, formatForWeb: false, }, @@ -1378,7 +880,7 @@ export const getQueryPayload = ( ], queryType: EQueryType.QUERY_BUILDER, }, - globalSelectedInterval: '3h', + globalSelectedInterval: '6h', variables: {}, formatForWeb: false, }, @@ -1391,25 +893,24 @@ export const getQueryPayload = ( { aggregateAttribute: { dataType: DataTypes.Float64, - id: 'container_cpu_utilization--float64--Gauge--true', + id: 'k8s_pod_filesystem_available--float64--Gauge--true', isColumn: true, isJSON: false, - key: 'container_cpu_utilization', + key: 'k8s_pod_filesystem_available', type: 'Gauge', }, aggregateOperator: 'avg', dataSource: DataSource.METRICS, - disabled: false, + disabled: true, expression: 'A', filters: { items: [ { - id: '6e050953', + id: 'c0f3e7ef', key: { dataType: DataTypes.String, id: 'k8s_cluster_name--string--tag--false', isColumn: false, - isJSON: false, key: 'k8s_cluster_name', type: 'tag', }, @@ -1417,12 +918,11 @@ export const getQueryPayload = ( value: clusterName, }, { - id: '60fe5e62', + id: 'ae457343', key: { dataType: DataTypes.String, id: 'k8s_pod_name--string--tag--false', isColumn: false, - isJSON: false, key: 'k8s_pod_name', type: 'tag', }, @@ -1444,17 +944,99 @@ export const getQueryPayload = ( }, ], having: [], - legend: '{{k8s_pod_name}}', + legend: '', limit: null, orderBy: [], queryName: 'A', - reduceTo: 'avg', + reduceTo: 'sum', + spaceAggregation: 'sum', + stepInterval: 60, + timeAggregation: 'avg', + }, + { + aggregateAttribute: { + dataType: DataTypes.Float64, + id: 'k8s_pod_filesystem_capacity--float64--Gauge--true', + isColumn: true, + isJSON: false, + key: 'k8s_pod_filesystem_capacity', + type: 'Gauge', + }, + aggregateOperator: 'avg', + dataSource: DataSource.METRICS, + disabled: true, + expression: 'B', + filters: { + items: [ + { + id: '8a387fb7', + key: { + dataType: DataTypes.String, + id: 'k8s_cluster_name--string--tag--false', + isColumn: false, + key: 'k8s_cluster_name', + type: 'tag', + }, + op: '=', + value: clusterName, + }, + { + id: '6ce28dde', + key: { + dataType: DataTypes.String, + id: 'k8s_node_name--string--tag--false', + isColumn: false, + key: 'k8s_node_name', + type: 'tag', + }, + op: 'in', + value: ['{{.k8s_node_name}}'], + }, + { + id: '3a50eee8', + key: { + dataType: DataTypes.String, + id: 'k8s_namespace_name--string--tag--false', + isColumn: false, + key: 'k8s_namespace_name', + type: 'tag', + }, + op: 'in', + value: ['{{.k8s_namespace_name}}'], + }, + ], + op: 'AND', + }, + functions: [], + groupBy: [ + { + dataType: DataTypes.String, + id: 'k8s_pod_name--string--tag--false', + isColumn: false, + isJSON: false, + key: 'k8s_pod_name', + type: 'tag', + }, + ], + having: [], + legend: '', + limit: null, + orderBy: [], + queryName: 'B', + reduceTo: 'sum', spaceAggregation: 'sum', stepInterval: 60, timeAggregation: 'avg', }, ], - queryFormulas: [], + queryFormulas: [ + { + disabled: false, + expression: '(B-A)/B', + legend: '{{k8s_pod_name}}', + queryName: 'F1', + }, + ], }, clickhouse_sql: [ { @@ -1464,7 +1046,7 @@ export const getQueryPayload = ( query: '', }, ], - id: '9b92756a-b445-45f8-90f4-d26f3ef28f8f', + id: 'bbdc1096-339c-490c-a977-6eff00e3d72f', promql: [ { disabled: false, @@ -1475,7 +1057,7 @@ export const getQueryPayload = ( ], queryType: EQueryType.QUERY_BUILDER, }, - globalSelectedInterval: '3h', + globalSelectedInterval: '6h', variables: {}, formatForWeb: false, }, @@ -1488,25 +1070,24 @@ export const getQueryPayload = ( { aggregateAttribute: { dataType: DataTypes.Float64, - id: 'container_memory_usage--float64--Gauge--true', + id: 'k8s_pod_network_io--float64--Sum--true', isColumn: true, isJSON: false, - key: 'container_memory_usage', - type: 'Gauge', + key: 'k8s_pod_network_io', + type: 'Sum', }, - aggregateOperator: 'avg', + aggregateOperator: 'rate', dataSource: DataSource.METRICS, disabled: false, expression: 'A', filters: { items: [ { - id: 'a4250695', + id: '877385bf', key: { dataType: DataTypes.String, id: 'k8s_cluster_name--string--tag--false', isColumn: false, - isJSON: false, key: 'k8s_cluster_name', type: 'tag', }, @@ -1514,12 +1095,11 @@ export const getQueryPayload = ( value: clusterName, }, { - id: '3b2bc32b', + id: '9613b4da', key: { dataType: DataTypes.String, id: 'k8s_pod_name--string--tag--false', isColumn: false, - isJSON: false, key: 'k8s_pod_name', type: 'tag', }, @@ -1531,24 +1111,52 @@ export const getQueryPayload = ( }, functions: [], groupBy: [ + { + dataType: DataTypes.String, + id: 'interface--string--tag--false', + isColumn: false, + key: 'interface', + type: 'tag', + }, + { + dataType: DataTypes.String, + id: 'direction--string--tag--false', + isColumn: false, + key: 'direction', + type: 'tag', + }, + { + dataType: DataTypes.String, + id: 'k8s_node_name--string--tag--false', + isColumn: false, + key: 'k8s_node_name', + type: 'tag', + }, + { + dataType: DataTypes.String, + id: 'k8s_namespace_name--string--tag--false', + isColumn: false, + key: 'k8s_namespace_name', + type: 'tag', + }, { dataType: DataTypes.String, id: 'k8s_pod_name--string--tag--false', isColumn: false, - isJSON: false, key: 'k8s_pod_name', type: 'tag', }, ], having: [], - legend: '{{k8s_pod_name}}', + legend: + '{{k8s_namespace_name}}-{{k8s_pod_name}}-{{interface}}-{{direction}}', limit: null, orderBy: [], queryName: 'A', - reduceTo: 'avg', + reduceTo: 'sum', spaceAggregation: 'sum', stepInterval: 60, - timeAggregation: 'avg', + timeAggregation: 'rate', }, ], queryFormulas: [], @@ -1561,7 +1169,7 @@ export const getQueryPayload = ( query: '', }, ], - id: 'a22c1e03-4876-4b3e-9a96-a3c3a28f9c0f', + id: '4b255d6d-4cde-474d-8866-f4418583c18b', promql: [ { disabled: false, @@ -1572,7 +1180,7 @@ export const getQueryPayload = ( ], queryType: EQueryType.QUERY_BUILDER, }, - globalSelectedInterval: '3h', + globalSelectedInterval: '6h', variables: {}, formatForWeb: false, }, @@ -1741,7 +1349,7 @@ export const getNodeQueryPayload = ( ], queryType: EQueryType.QUERY_BUILDER, }, - globalSelectedInterval: '3h', + globalSelectedInterval: '6h', variables: {}, formatForWeb: false, }, @@ -1904,7 +1512,7 @@ export const getNodeQueryPayload = ( ], queryType: EQueryType.QUERY_BUILDER, }, - globalSelectedInterval: '3h', + globalSelectedInterval: '6h', variables: {}, formatForWeb: false, }, @@ -2067,7 +1675,7 @@ export const getNodeQueryPayload = ( ], queryType: EQueryType.QUERY_BUILDER, }, - globalSelectedInterval: '3h', + globalSelectedInterval: '6h', variables: {}, formatForWeb: false, }, @@ -2175,7 +1783,7 @@ export const getNodeQueryPayload = ( ], queryType: EQueryType.QUERY_BUILDER, }, - globalSelectedInterval: '3h', + globalSelectedInterval: '6h', variables: {}, formatForWeb: false, }, @@ -2318,7 +1926,7 @@ export const getHostQueryPayload = ( ], queryType: EQueryType.QUERY_BUILDER, }, - globalSelectedInterval: '3h', + globalSelectedInterval: '6h', variables: {}, formatForWeb: false, }, @@ -2456,7 +2064,7 @@ export const getHostQueryPayload = ( ], queryType: EQueryType.QUERY_BUILDER, }, - globalSelectedInterval: '3h', + globalSelectedInterval: '6h', variables: {}, formatForWeb: false, }, @@ -2590,7 +2198,7 @@ export const getHostQueryPayload = ( ], queryType: EQueryType.QUERY_BUILDER, }, - globalSelectedInterval: '3h', + globalSelectedInterval: '6h', variables: {}, formatForWeb: false, }, @@ -2674,7 +2282,7 @@ export const getHostQueryPayload = ( ], queryType: EQueryType.QUERY_BUILDER, }, - globalSelectedInterval: '3h', + globalSelectedInterval: '6h', variables: {}, formatForWeb: false, }, @@ -2835,7 +2443,7 @@ export const getHostQueryPayload = ( ], queryType: EQueryType.QUERY_BUILDER, }, - globalSelectedInterval: '3h', + globalSelectedInterval: '6h', variables: {}, formatForWeb: false, }, @@ -2933,7 +2541,7 @@ export const getHostQueryPayload = ( ], queryType: EQueryType.QUERY_BUILDER, }, - globalSelectedInterval: '3h', + globalSelectedInterval: '6h', variables: {}, formatForWeb: false, }, @@ -3025,7 +2633,7 @@ export const getHostQueryPayload = ( ], queryType: EQueryType.QUERY_BUILDER, }, - globalSelectedInterval: '3h', + globalSelectedInterval: '6h', variables: {}, formatForWeb: false, }, @@ -3117,7 +2725,7 @@ export const getHostQueryPayload = ( ], queryType: EQueryType.QUERY_BUILDER, }, - globalSelectedInterval: '3h', + globalSelectedInterval: '6h', variables: {}, formatForWeb: false, }, @@ -3209,7 +2817,7 @@ export const getHostQueryPayload = ( ], queryType: EQueryType.QUERY_BUILDER, }, - globalSelectedInterval: '3h', + globalSelectedInterval: '6h', variables: {}, formatForWeb: false, }, @@ -3301,7 +2909,7 @@ export const getHostQueryPayload = ( ], queryType: EQueryType.QUERY_BUILDER, }, - globalSelectedInterval: '3h', + globalSelectedInterval: '6h', variables: {}, formatForWeb: false, }, @@ -3376,7 +2984,7 @@ export const getHostQueryPayload = ( ], queryType: EQueryType.QUERY_BUILDER, }, - globalSelectedInterval: '3h', + globalSelectedInterval: '6h', variables: {}, formatForWeb: false, }, @@ -3474,7 +3082,7 @@ export const getHostQueryPayload = ( ], queryType: EQueryType.QUERY_BUILDER, }, - globalSelectedInterval: '3h', + globalSelectedInterval: '6h', variables: {}, formatForWeb: false, }, @@ -3564,7 +3172,7 @@ export const getHostQueryPayload = ( ], queryType: EQueryType.QUERY_BUILDER, }, - globalSelectedInterval: '3h', + globalSelectedInterval: '6h', variables: {}, formatForWeb: false, }, @@ -3662,21 +3270,45 @@ export const getHostQueryPayload = ( ], queryType: EQueryType.QUERY_BUILDER, }, - globalSelectedInterval: '3h', + globalSelectedInterval: '6h', variables: {}, formatForWeb: false, }, ]; -export const cardTitles: string[] = [ - 'Pod CPU usage [% of Limit]', - 'Pod filesystem usage [%]', - 'Pod memory usage [% of Request]', - 'Pod network IO', - 'Pod CPU usage [% of Request]', - 'Pod memory usage [% of Limit]', - 'CPU usage', - 'Memory Usage', +export const podWidgetInfo = [ + { + title: 'CPU usage', + yAxisUnit: '', + }, + { + title: 'Memory Usage', + yAxisUnit: 'bytes', + }, + { + title: 'Pod CPU usage [% of Request]', + yAxisUnit: 'percent', + }, + { + title: 'Pod CPU usage [% of Limit]', + yAxisUnit: 'percent', + }, + { + title: 'Pod memory usage [% of Request]', + yAxisUnit: 'percent', + }, + { + title: 'Pod memory usage [% of Limit]', + yAxisUnit: 'percent', + }, + { + title: 'Pod filesystem usage [%]', + yAxisUnit: 'percentunit', + }, + { + title: 'Pod network IO', + yAxisUnit: 'bytes', + }, ]; export const VIEW_TYPES = { @@ -3684,26 +3316,38 @@ export const VIEW_TYPES = { POD: 'pod', }; -export const nodeCardTitles: string[] = [ - 'Node CPU usage', - 'Node memory usage (WSS)', - 'Node network IO', - 'Node filesystem usage', +export const nodeWidgetInfo = [ + { + title: 'Node CPU usage', + yAxisUnit: 'percentunit', + }, + { + title: 'Node memory usage (WSS)', + yAxisUnit: 'percentunit', + }, + { + title: 'Node network IO', + yAxisUnit: 'bytes', + }, + { + title: 'Node filesystem usage', + yAxisUnit: 'percentunit', + }, ]; -export const hostCardTitles: string[] = [ - 'CPU Used', - 'Memory Used', - 'CPU Usage', - 'Memory Usage', - 'System Load Average', - 'Network usage (bytes)', - 'Network usage (packet/s)', - 'Network errors', - 'Network dropped', - 'Network connections', - 'System disk io (bytes transferred)', - 'System disk operations/s', - 'Queue size', - 'Disk operations time', +export const hostWidgetInfo = [ + { title: 'CPU Used', yAxisUnit: 'percentunit' }, + { title: 'Memory Used', yAxisUnit: 'percentunit' }, + { title: 'CPU Usage', yAxisUnit: 'percentunit' }, + { title: 'Memory Usage', yAxisUnit: 'bytes' }, + { title: 'System Load Average', yAxisUnit: '' }, + { title: 'Network usage (bytes)', yAxisUnit: 'bytes' }, + { title: 'Network usage (packet/s)', yAxisUnit: 'pps' }, + { title: 'Network errors', yAxisUnit: 'short' }, + { title: 'Network dropped', yAxisUnit: 'short' }, + { title: 'Network connections', yAxisUnit: 'short' }, + { title: 'System disk io (bytes transferred)', yAxisUnit: 'bytes' }, + { title: 'System disk operations/s', yAxisUnit: 'short' }, + { title: 'Queue size', yAxisUnit: 'short' }, + { title: 'Disk operations time', yAxisUnit: 's' }, ]; diff --git a/frontend/src/lib/uPlotLib/getUplotChartOptions.ts b/frontend/src/lib/uPlotLib/getUplotChartOptions.ts index 5000b0f0d8..f4059e5a49 100644 --- a/frontend/src/lib/uPlotLib/getUplotChartOptions.ts +++ b/frontend/src/lib/uPlotLib/getUplotChartOptions.ts @@ -54,6 +54,7 @@ export interface GetUPlotChartOptions { }> >; customTooltipElement?: HTMLDivElement; + verticalLineTimestamp?: number; } /** the function converts series A , series B , series C to @@ -156,6 +157,7 @@ export const getUPlotChartOptions = ({ hiddenGraph, setHiddenGraph, customTooltipElement, + verticalLineTimestamp, }: GetUPlotChartOptions): uPlot.Options => { const timeScaleProps = getXAxisScale(minTimeScale, maxTimeScale); @@ -222,6 +224,86 @@ export const getUPlotChartOptions = ({ onClick: onClickHandler, apiResponse, }), + // { + // hooks: { + // draw: [ + // (u): void => { + // if (verticalLineTimestamp) { + // const { ctx } = u; + // ctx.save(); + // ctx.setLineDash([4, 2]); + // ctx.strokeStyle = 'white'; + // ctx.lineWidth = 1; + // const x = u.valToPos(verticalLineTimestamp, 'x', true); + // const lineStart = u.bbox.top; + // const lineEnd = u.bbox.top + u.bbox.height; + + // ctx.beginPath(); + // ctx.moveTo(x, lineStart); + // ctx.lineTo(x, lineEnd); + // ctx.stroke(); + // ctx.setLineDash([]); + // ctx.fillStyle = 'white'; + // ctx.font = '10px Arial'; + // ctx.textAlign = 'center'; + // const label = new Date( + // verticalLineTimestamp * 1000, + // ).toLocaleTimeString(); + // ctx.fillText(`Logline: ${label}`, x, u.bbox.top + u.bbox.height + 15); + + // ctx.restore(); + // } + // }, + // ], + // }, + // }, + { + hooks: { + draw: [ + (u): void => { + if (verticalLineTimestamp) { + const { ctx } = u; + ctx.save(); + + // Draw the vertical dotted line (keep this part unchanged) + ctx.setLineDash([4, 2]); + ctx.strokeStyle = 'white'; + ctx.lineWidth = 1; + const x = u.valToPos(verticalLineTimestamp, 'x', true); + + ctx.beginPath(); + ctx.moveTo(x, u.bbox.top); + ctx.lineTo(x, u.bbox.top + u.bbox.height); + ctx.stroke(); + + // Improved label for logline timestamp + ctx.setLineDash([]); + ctx.font = 'bold 12px Arial'; // Slightly larger and bold + ctx.textAlign = 'center'; + const label = new Date( + verticalLineTimestamp * 1000, + ).toLocaleTimeString(); + const labelText = `Logline: ${label}`; + + // Position the label at the bottom of the chart + const labelY = u.bbox.top + u.bbox.height + 20; + + // Add a subtle background for better readability + const labelWidth = ctx.measureText(labelText).width + 10; + const labelHeight = 20; + ctx.fillStyle = 'rgba(0, 0, 0, 0.6)'; + ctx.fillRect(x - labelWidth / 2, labelY - 15, labelWidth, labelHeight); + + // Draw the label text + ctx.fillStyle = 'white'; + ctx.fillText(labelText, x, labelY); + + ctx.restore(); + } + }, + ], + }, + }, ], hooks: { draw: [ From ec14cd5927d06900b640ea1f030ef6a347c278dd Mon Sep 17 00:00:00 2001 From: rahulkeswani101 Date: Mon, 9 Sep 2024 16:56:33 +0530 Subject: [PATCH 13/26] feat: removed other panel types other than graph from host metrics query payload --- .../LogDetailedView/InfraMetrics/constants.ts | 280 +----------------- 1 file changed, 1 insertion(+), 279 deletions(-) diff --git a/frontend/src/container/LogDetailedView/InfraMetrics/constants.ts b/frontend/src/container/LogDetailedView/InfraMetrics/constants.ts index c91b752245..a35b0dc059 100644 --- a/frontend/src/container/LogDetailedView/InfraMetrics/constants.ts +++ b/frontend/src/container/LogDetailedView/InfraMetrics/constants.ts @@ -1792,282 +1792,6 @@ export const getNodeQueryPayload = ( export const getHostQueryPayload = ( hostName: string, ): GetQueryResultsProps[] => [ - { - selectedTime: 'GLOBAL_TIME', - graphType: PANEL_TYPES.TIME_SERIES, - query: { - builder: { - queryData: [ - { - aggregateAttribute: { - dataType: DataTypes.Float64, - id: 'system_cpu_time--float64--Sum--true', - isColumn: true, - isJSON: false, - key: 'system_cpu_time', - type: 'Sum', - }, - aggregateOperator: 'rate', - dataSource: DataSource.METRICS, - disabled: true, - expression: 'A', - filters: { - items: [ - { - id: 'b36d1580', - key: { - dataType: DataTypes.String, - id: 'host_name--string--tag--false', - isColumn: false, - isJSON: false, - key: 'host_name', - type: 'tag', - }, - op: '=', - value: hostName, - }, - { - id: '04c00b59', - key: { - dataType: DataTypes.String, - id: 'state--string--tag--false', - isColumn: false, - isJSON: false, - key: 'state', - type: 'tag', - }, - op: '!=', - value: 'idle', - }, - ], - op: 'AND', - }, - functions: [], - groupBy: [], - having: [], - legend: '', - limit: null, - orderBy: [], - queryName: 'A', - reduceTo: 'avg', - spaceAggregation: 'sum', - stepInterval: 60, - timeAggregation: 'rate', - }, - { - aggregateAttribute: { - dataType: DataTypes.Float64, - id: 'system_cpu_time--float64--Sum--true', - isColumn: true, - isJSON: false, - key: 'system_cpu_time', - type: 'Sum', - }, - aggregateOperator: 'rate', - dataSource: DataSource.METRICS, - disabled: true, - expression: 'B', - filters: { - items: [ - { - id: '9db53117', - key: { - dataType: DataTypes.String, - id: 'host_name--string--tag--false', - isColumn: false, - isJSON: false, - key: 'host_name', - type: 'tag', - }, - op: '=', - value: hostName, - }, - ], - op: 'AND', - }, - functions: [], - groupBy: [], - having: [], - legend: '', - limit: null, - orderBy: [], - queryName: 'B', - reduceTo: 'avg', - spaceAggregation: 'sum', - stepInterval: 60, - timeAggregation: 'rate', - }, - ], - queryFormulas: [ - { - disabled: false, - expression: 'A/B', - legend: '', - queryName: 'F1', - }, - ], - }, - clickhouse_sql: [ - { - disabled: false, - legend: '', - name: 'A', - query: '', - }, - ], - id: '9bcfa405-fd17-42ea-a55e-2f9d42e5eeb5', - promql: [ - { - disabled: false, - legend: '', - name: 'A', - query: '', - }, - ], - queryType: EQueryType.QUERY_BUILDER, - }, - globalSelectedInterval: '6h', - variables: {}, - formatForWeb: false, - }, - { - selectedTime: 'GLOBAL_TIME', - graphType: PANEL_TYPES.TIME_SERIES, - query: { - builder: { - queryData: [ - { - aggregateAttribute: { - dataType: DataTypes.Float64, - id: 'system_memory_usage--float64--Gauge--true', - isColumn: true, - isJSON: false, - key: 'system_memory_usage', - type: 'Gauge', - }, - aggregateOperator: 'avg', - dataSource: DataSource.METRICS, - disabled: true, - expression: 'A', - filters: { - items: [ - { - id: 'a4a1f5a0', - key: { - dataType: DataTypes.String, - id: 'host_name--string--tag--false', - isColumn: false, - isJSON: false, - key: 'host_name', - type: 'tag', - }, - op: '=', - value: hostName, - }, - { - id: 'ee64c6c7', - key: { - dataType: DataTypes.String, - id: 'state--string--tag--false', - isColumn: false, - isJSON: false, - key: 'state', - type: 'tag', - }, - op: '=', - value: 'used', - }, - ], - op: 'AND', - }, - functions: [], - groupBy: [], - having: [], - legend: '', - limit: null, - orderBy: [], - queryName: 'A', - reduceTo: 'avg', - spaceAggregation: 'sum', - stepInterval: 60, - timeAggregation: 'avg', - }, - { - aggregateAttribute: { - dataType: DataTypes.Float64, - id: 'system_memory_usage--float64--Gauge--true', - isColumn: true, - isJSON: false, - key: 'system_memory_usage', - type: 'Gauge', - }, - aggregateOperator: 'avg', - dataSource: DataSource.METRICS, - disabled: true, - expression: 'B', - filters: { - items: [ - { - id: 'bc3d98b1', - key: { - dataType: DataTypes.String, - id: 'host_name--string--tag--false', - isColumn: false, - isJSON: false, - key: 'host_name', - type: 'tag', - }, - op: '=', - value: hostName, - }, - ], - op: 'AND', - }, - functions: [], - groupBy: [], - having: [], - legend: '', - limit: null, - orderBy: [], - queryName: 'B', - reduceTo: 'avg', - spaceAggregation: 'sum', - stepInterval: 60, - timeAggregation: 'avg', - }, - ], - queryFormulas: [ - { - disabled: false, - expression: 'A/B', - legend: '', - queryName: 'F1', - }, - ], - }, - clickhouse_sql: [ - { - disabled: false, - legend: '', - name: 'A', - query: '', - }, - ], - id: '94cd5a8e-4305-45b5-aeef-071e0943c00f', - promql: [ - { - disabled: false, - legend: '', - name: 'A', - query: '', - }, - ], - queryType: EQueryType.QUERY_BUILDER, - }, - globalSelectedInterval: '6h', - variables: {}, - formatForWeb: false, - }, { selectedTime: 'GLOBAL_TIME', graphType: PANEL_TYPES.TIME_SERIES, @@ -3336,15 +3060,13 @@ export const nodeWidgetInfo = [ ]; export const hostWidgetInfo = [ - { title: 'CPU Used', yAxisUnit: 'percentunit' }, - { title: 'Memory Used', yAxisUnit: 'percentunit' }, { title: 'CPU Usage', yAxisUnit: 'percentunit' }, { title: 'Memory Usage', yAxisUnit: 'bytes' }, { title: 'System Load Average', yAxisUnit: '' }, { title: 'Network usage (bytes)', yAxisUnit: 'bytes' }, { title: 'Network usage (packet/s)', yAxisUnit: 'pps' }, { title: 'Network errors', yAxisUnit: 'short' }, - { title: 'Network dropped', yAxisUnit: 'short' }, + { title: 'Network drops', yAxisUnit: 'short' }, { title: 'Network connections', yAxisUnit: 'short' }, { title: 'System disk io (bytes transferred)', yAxisUnit: 'bytes' }, { title: 'System disk operations/s', yAxisUnit: 'short' }, From 576af63cabb46df968d13a0e38ecdd3942c1b8d8 Mon Sep 17 00:00:00 2001 From: rahulkeswani101 Date: Mon, 9 Sep 2024 19:54:36 +0530 Subject: [PATCH 14/26] fix: updated the query payload for node metrics --- .../LogDetailedView/InfraMetrics/constants.ts | 243 +++++++----------- 1 file changed, 97 insertions(+), 146 deletions(-) diff --git a/frontend/src/container/LogDetailedView/InfraMetrics/constants.ts b/frontend/src/container/LogDetailedView/InfraMetrics/constants.ts index a35b0dc059..8c30427027 100644 --- a/frontend/src/container/LogDetailedView/InfraMetrics/constants.ts +++ b/frontend/src/container/LogDetailedView/InfraMetrics/constants.ts @@ -1111,34 +1111,6 @@ export const getPodQueryPayload = ( }, functions: [], groupBy: [ - { - dataType: DataTypes.String, - id: 'interface--string--tag--false', - isColumn: false, - key: 'interface', - type: 'tag', - }, - { - dataType: DataTypes.String, - id: 'direction--string--tag--false', - isColumn: false, - key: 'direction', - type: 'tag', - }, - { - dataType: DataTypes.String, - id: 'k8s_node_name--string--tag--false', - isColumn: false, - key: 'k8s_node_name', - type: 'tag', - }, - { - dataType: DataTypes.String, - id: 'k8s_namespace_name--string--tag--false', - isColumn: false, - key: 'k8s_namespace_name', - type: 'tag', - }, { dataType: DataTypes.String, id: 'k8s_pod_name--string--tag--false', @@ -1148,8 +1120,7 @@ export const getPodQueryPayload = ( }, ], having: [], - legend: - '{{k8s_namespace_name}}-{{k8s_pod_name}}-{{interface}}-{{direction}}', + legend: '{{k8s_pod_name}}', limit: null, orderBy: [], queryName: 'A', @@ -1221,7 +1192,7 @@ export const getNodeQueryPayload = ( type: 'tag', }, op: '=', - value: '{{.k8s_cluster_name}}', + value: clusterName, }, { id: '91223422', @@ -1233,7 +1204,7 @@ export const getNodeQueryPayload = ( type: 'tag', }, op: 'in', - value: ['{{.k8s_node_name}}'], + value: nodeName, }, ], op: 'AND', @@ -1244,6 +1215,7 @@ export const getNodeQueryPayload = ( dataType: DataTypes.String, id: 'k8s_node_name--string--tag--false', isColumn: false, + isJSON: false, key: 'k8s_node_name', type: 'tag', }, @@ -1274,19 +1246,7 @@ export const getNodeQueryPayload = ( filters: { items: [ { - id: '91223422', - key: { - dataType: DataTypes.String, - id: 'k8s_cluster_name--string--tag--false', - isColumn: false, - key: 'k8s_cluster_name', - type: 'tag', - }, - op: '=', - value: '{{.k8s_cluster_name}}', - }, - { - id: '0a54e48e', + id: '9700f1d4', key: { dataType: DataTypes.String, id: 'k8s_node_name--string--tag--false', @@ -1295,7 +1255,7 @@ export const getNodeQueryPayload = ( type: 'tag', }, op: 'in', - value: ['{{.k8s_node_name}}'], + value: nodeName, }, ], op: 'AND', @@ -1306,6 +1266,7 @@ export const getNodeQueryPayload = ( dataType: DataTypes.String, id: 'k8s_node_name--string--tag--false', isColumn: false, + isJSON: false, key: 'k8s_node_name', type: 'tag', }, @@ -1338,7 +1299,7 @@ export const getNodeQueryPayload = ( query: '', }, ], - id: '0a09fa11-6dc4-4511-9cc9-befe7b6a6557', + id: '259295b5-774d-4b2e-8a4f-e5dd63e6c38d', promql: [ { disabled: false, @@ -1351,6 +1312,7 @@ export const getNodeQueryPayload = ( }, globalSelectedInterval: '6h', variables: {}, + fillGaps: false, formatForWeb: false, }, { @@ -1362,10 +1324,10 @@ export const getNodeQueryPayload = ( { aggregateAttribute: { dataType: DataTypes.Float64, - id: 'k8s_node_filesystem_available--float64--Gauge--true', + id: 'k8s_node_memory_working_set--float64--Gauge--true', isColumn: true, isJSON: false, - key: 'k8s_node_filesystem_available', + key: 'k8s_node_memory_working_set', type: 'Gauge', }, aggregateOperator: 'avg', @@ -1375,7 +1337,7 @@ export const getNodeQueryPayload = ( filters: { items: [ { - id: '91223422', + id: 'a9f58cf3', key: { dataType: DataTypes.String, id: 'k8s_cluster_name--string--tag--false', @@ -1387,7 +1349,7 @@ export const getNodeQueryPayload = ( value: clusterName, }, { - id: 'a5dffef6', + id: '8430c9a0', key: { dataType: DataTypes.String, id: 'k8s_node_name--string--tag--false', @@ -1424,10 +1386,10 @@ export const getNodeQueryPayload = ( { aggregateAttribute: { dataType: DataTypes.Float64, - id: 'k8s_node_filesystem_capacity--float64--Gauge--true', + id: 'k8s_node_allocatable_memory--float64--Gauge--true', isColumn: true, isJSON: false, - key: 'k8s_node_filesystem_capacity', + key: 'k8s_node_allocatable_memory', type: 'Gauge', }, aggregateOperator: 'avg', @@ -1437,19 +1399,7 @@ export const getNodeQueryPayload = ( filters: { items: [ { - id: '91223422', - key: { - dataType: DataTypes.String, - id: 'k8s_cluster_name--string--tag--false', - isColumn: false, - key: 'k8s_cluster_name', - type: 'tag', - }, - op: '=', - value: clusterName, - }, - { - id: 'c79d5a16', + id: 'cb274856', key: { dataType: DataTypes.String, id: 'k8s_node_name--string--tag--false', @@ -1487,7 +1437,7 @@ export const getNodeQueryPayload = ( queryFormulas: [ { disabled: false, - expression: '(B-A)/B', + expression: 'A/B', legend: '{{k8s_node_name}}', queryName: 'F1', }, @@ -1501,7 +1451,7 @@ export const getNodeQueryPayload = ( query: '', }, ], - id: '57eeac15-615c-4a71-9c61-8e0c0c76b045', + id: '486af4da-2a1a-4b8f-992c-eba098d3a6f9', promql: [ { disabled: false, @@ -1514,6 +1464,7 @@ export const getNodeQueryPayload = ( }, globalSelectedInterval: '6h', variables: {}, + fillGaps: false, formatForWeb: false, }, { @@ -1525,15 +1476,15 @@ export const getNodeQueryPayload = ( { aggregateAttribute: { dataType: DataTypes.Float64, - id: 'k8s_node_memory_working_set--float64--Gauge--true', + id: 'k8s_node_network_io--float64--Sum--true', isColumn: true, isJSON: false, - key: 'k8s_node_memory_working_set', - type: 'Gauge', + key: 'k8s_node_network_io', + type: 'Sum', }, - aggregateOperator: 'avg', + aggregateOperator: 'rate', dataSource: DataSource.METRICS, - disabled: true, + disabled: false, expression: 'A', filters: { items: [ @@ -1550,7 +1501,7 @@ export const getNodeQueryPayload = ( value: clusterName, }, { - id: 'e8c2a60a', + id: '66308505', key: { dataType: DataTypes.String, id: 'k8s_node_name--string--tag--false', @@ -1566,6 +1517,20 @@ export const getNodeQueryPayload = ( }, functions: [], groupBy: [ + { + dataType: DataTypes.String, + id: 'interface--string--tag--false', + isColumn: false, + key: 'interface', + type: 'tag', + }, + { + dataType: DataTypes.String, + id: 'direction--string--tag--false', + isColumn: false, + key: 'direction', + type: 'tag', + }, { dataType: DataTypes.String, id: 'k8s_node_name--string--tag--false', @@ -1575,28 +1540,60 @@ export const getNodeQueryPayload = ( }, ], having: [], - legend: '', + legend: '{{k8s_node_name}}-{{interface}}-{{direction}}', limit: null, orderBy: [], queryName: 'A', reduceTo: 'sum', spaceAggregation: 'sum', stepInterval: 60, - timeAggregation: 'avg', + timeAggregation: 'rate', }, + ], + queryFormulas: [], + }, + clickhouse_sql: [ + { + disabled: false, + legend: '', + name: 'A', + query: '', + }, + ], + id: 'b56143c0-7d2f-4425-97c5-65ad6fc87366', + promql: [ + { + disabled: false, + legend: '', + name: 'A', + query: '', + }, + ], + queryType: EQueryType.QUERY_BUILDER, + }, + globalSelectedInterval: '6h', + variables: {}, + formatForWeb: false, + }, + { + selectedTime: 'GLOBAL_TIME', + graphType: PANEL_TYPES.TIME_SERIES, + query: { + builder: { + queryData: [ { aggregateAttribute: { dataType: DataTypes.Float64, - id: 'k8s_node_allocatable_memory--float64--Gauge--true', + id: 'k8s_node_filesystem_available--float64--Gauge--true', isColumn: true, isJSON: false, - key: 'k8s_node_allocatable_memory', + key: 'k8s_node_filesystem_available', type: 'Gauge', }, aggregateOperator: 'avg', dataSource: DataSource.METRICS, disabled: true, - expression: 'B', + expression: 'A', filters: { items: [ { @@ -1612,7 +1609,7 @@ export const getNodeQueryPayload = ( value: clusterName, }, { - id: 'ee687840', + id: 'a5dffef6', key: { dataType: DataTypes.String, id: 'k8s_node_name--string--tag--false', @@ -1640,64 +1637,25 @@ export const getNodeQueryPayload = ( legend: '', limit: null, orderBy: [], - queryName: 'B', + queryName: 'A', reduceTo: 'sum', spaceAggregation: 'sum', stepInterval: 60, timeAggregation: 'avg', }, - ], - queryFormulas: [ - { - disabled: false, - expression: 'A/B', - legend: '{{k8s_node_name}}', - queryName: 'F1', - }, - ], - }, - clickhouse_sql: [ - { - disabled: false, - legend: '', - name: 'A', - query: '', - }, - ], - id: '4cf56615-e357-4342-9a4f-ec6557477ff3', - promql: [ - { - disabled: false, - legend: '', - name: 'A', - query: '', - }, - ], - queryType: EQueryType.QUERY_BUILDER, - }, - globalSelectedInterval: '6h', - variables: {}, - formatForWeb: false, - }, - { - selectedTime: 'GLOBAL_TIME', - graphType: PANEL_TYPES.TIME_SERIES, - query: { - builder: { - queryData: [ { aggregateAttribute: { dataType: DataTypes.Float64, - id: 'k8s_node_network_io--float64--Sum--true', + id: 'k8s_node_filesystem_capacity--float64--Gauge--true', isColumn: true, isJSON: false, - key: 'k8s_node_network_io', - type: 'Sum', + key: 'k8s_node_filesystem_capacity', + type: 'Gauge', }, - aggregateOperator: 'rate', + aggregateOperator: 'avg', dataSource: DataSource.METRICS, - disabled: false, - expression: 'A', + disabled: true, + expression: 'B', filters: { items: [ { @@ -1713,7 +1671,7 @@ export const getNodeQueryPayload = ( value: clusterName, }, { - id: '66308505', + id: 'c79d5a16', key: { dataType: DataTypes.String, id: 'k8s_node_name--string--tag--false', @@ -1729,20 +1687,6 @@ export const getNodeQueryPayload = ( }, functions: [], groupBy: [ - { - dataType: DataTypes.String, - id: 'interface--string--tag--false', - isColumn: false, - key: 'interface', - type: 'tag', - }, - { - dataType: DataTypes.String, - id: 'direction--string--tag--false', - isColumn: false, - key: 'direction', - type: 'tag', - }, { dataType: DataTypes.String, id: 'k8s_node_name--string--tag--false', @@ -1752,17 +1696,24 @@ export const getNodeQueryPayload = ( }, ], having: [], - legend: '{{k8s_node_name}}-{{interface}}-{{direction}}', + legend: '', limit: null, orderBy: [], - queryName: 'A', + queryName: 'B', reduceTo: 'sum', spaceAggregation: 'sum', stepInterval: 60, - timeAggregation: 'rate', + timeAggregation: 'avg', + }, + ], + queryFormulas: [ + { + disabled: false, + expression: '(B-A)/B', + legend: '{{k8s_node_name}}', + queryName: 'F1', }, ], - queryFormulas: [], }, clickhouse_sql: [ { @@ -1772,7 +1723,7 @@ export const getNodeQueryPayload = ( query: '', }, ], - id: 'b56143c0-7d2f-4425-97c5-65ad6fc87366', + id: '57eeac15-615c-4a71-9c61-8e0c0c76b045', promql: [ { disabled: false, From a9f6f732daf7e1e1b5eadf2672c83021c164d748 Mon Sep 17 00:00:00 2001 From: rahulkeswani101 Date: Mon, 9 Sep 2024 20:37:26 +0530 Subject: [PATCH 15/26] feat: moved the label of vertical dotted line to top --- .../src/lib/uPlotLib/getUplotChartOptions.ts | 46 +------------------ 1 file changed, 2 insertions(+), 44 deletions(-) diff --git a/frontend/src/lib/uPlotLib/getUplotChartOptions.ts b/frontend/src/lib/uPlotLib/getUplotChartOptions.ts index f4059e5a49..e16e915256 100644 --- a/frontend/src/lib/uPlotLib/getUplotChartOptions.ts +++ b/frontend/src/lib/uPlotLib/getUplotChartOptions.ts @@ -224,39 +224,6 @@ export const getUPlotChartOptions = ({ onClick: onClickHandler, apiResponse, }), - // { - // hooks: { - // draw: [ - // (u): void => { - // if (verticalLineTimestamp) { - // const { ctx } = u; - // ctx.save(); - // ctx.setLineDash([4, 2]); - // ctx.strokeStyle = 'white'; - // ctx.lineWidth = 1; - // const x = u.valToPos(verticalLineTimestamp, 'x', true); - // const lineStart = u.bbox.top; - // const lineEnd = u.bbox.top + u.bbox.height; - - // ctx.beginPath(); - // ctx.moveTo(x, lineStart); - // ctx.lineTo(x, lineEnd); - // ctx.stroke(); - // ctx.setLineDash([]); - // ctx.fillStyle = 'white'; - // ctx.font = '10px Arial'; - // ctx.textAlign = 'center'; - // const label = new Date( - // verticalLineTimestamp * 1000, - // ).toLocaleTimeString(); - // ctx.fillText(`Logline: ${label}`, x, u.bbox.top + u.bbox.height + 15); - - // ctx.restore(); - // } - // }, - // ], - // }, - // }, { hooks: { draw: [ @@ -264,8 +231,6 @@ export const getUPlotChartOptions = ({ if (verticalLineTimestamp) { const { ctx } = u; ctx.save(); - - // Draw the vertical dotted line (keep this part unchanged) ctx.setLineDash([4, 2]); ctx.strokeStyle = 'white'; ctx.lineWidth = 1; @@ -275,26 +240,19 @@ export const getUPlotChartOptions = ({ ctx.moveTo(x, u.bbox.top); ctx.lineTo(x, u.bbox.top + u.bbox.height); ctx.stroke(); - - // Improved label for logline timestamp ctx.setLineDash([]); - ctx.font = 'bold 12px Arial'; // Slightly larger and bold + ctx.font = 'bold 14px Arial'; ctx.textAlign = 'center'; const label = new Date( verticalLineTimestamp * 1000, ).toLocaleTimeString(); const labelText = `Logline: ${label}`; - - // Position the label at the bottom of the chart - const labelY = u.bbox.top + u.bbox.height + 20; - - // Add a subtle background for better readability + const labelY = u.bbox.top + 20; const labelWidth = ctx.measureText(labelText).width + 10; const labelHeight = 20; ctx.fillStyle = 'rgba(0, 0, 0, 0.6)'; ctx.fillRect(x - labelWidth / 2, labelY - 15, labelWidth, labelHeight); - // Draw the label text ctx.fillStyle = 'white'; ctx.fillText(labelText, x, labelY); From 1e2b1263b6c71a770b57511389ab34ba2d60a15c Mon Sep 17 00:00:00 2001 From: rahulkeswani101 Date: Mon, 9 Sep 2024 22:54:23 +0530 Subject: [PATCH 16/26] feat: added console statement to check query payload --- frontend/src/lib/dashboard/getQueryResults.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/frontend/src/lib/dashboard/getQueryResults.ts b/frontend/src/lib/dashboard/getQueryResults.ts index 03ad5f8caa..2b3065594e 100644 --- a/frontend/src/lib/dashboard/getQueryResults.ts +++ b/frontend/src/lib/dashboard/getQueryResults.ts @@ -27,12 +27,15 @@ export async function GetMetricQueryRange( ): Promise> { const { legendMap, queryPayload } = prepareQueryRangePayload(props); + console.log(props); + const response = await getMetricsQueryRange( queryPayload, version || 'v3', signal, headers, ); + if (response.statusCode >= 400) { let error = `API responded with ${response.statusCode} - ${response.error} status: ${response.message}`; From 789c07351da9c969cc0fff092ee3a53f312fbb40 Mon Sep 17 00:00:00 2001 From: rahulkeswani101 Date: Mon, 9 Sep 2024 23:15:35 +0530 Subject: [PATCH 17/26] fix: added pod name instead of node name in pod query payload --- .../LogDetailedView/InfraMetrics/constants.ts | 39 +++++++------------ 1 file changed, 13 insertions(+), 26 deletions(-) diff --git a/frontend/src/container/LogDetailedView/InfraMetrics/constants.ts b/frontend/src/container/LogDetailedView/InfraMetrics/constants.ts index 8c30427027..fcb36b6224 100644 --- a/frontend/src/container/LogDetailedView/InfraMetrics/constants.ts +++ b/frontend/src/container/LogDetailedView/InfraMetrics/constants.ts @@ -53,7 +53,7 @@ export const getPodQueryPayload = ( key: 'k8s_pod_name', type: 'tag', }, - op: 'in', + op: '=', value: podName, }, ], @@ -150,7 +150,7 @@ export const getPodQueryPayload = ( key: 'k8s_pod_name', type: 'tag', }, - op: 'in', + op: '=', value: podName, }, ], @@ -245,7 +245,7 @@ export const getPodQueryPayload = ( key: 'k8s_pod_name', type: 'tag', }, - op: 'in', + op: '=', value: podName, }, ], @@ -412,7 +412,7 @@ export const getPodQueryPayload = ( key: 'k8s_pod_name', type: 'tag', }, - op: 'in', + op: '=', value: podName, }, ], @@ -478,7 +478,7 @@ export const getPodQueryPayload = ( type: 'tag', }, op: 'in', - value: ['{{.k8s_node_name}}'], + value: podName, }, ], op: 'AND', @@ -638,28 +638,15 @@ export const getPodQueryPayload = ( id: '7cdad1cb', key: { dataType: DataTypes.String, - id: 'k8s_node_name--string--tag--false', + id: 'k8s_pod_name--string--tag--false', isColumn: false, isJSON: false, - key: 'k8s_node_name', + key: 'k8s_pod_name', type: 'tag', }, - op: 'in', + op: '=', value: podName, }, - { - id: 'bd954dbe', - key: { - dataType: DataTypes.String, - id: 'k8s_namespace_name--string--tag--false', - isColumn: false, - isJSON: false, - key: 'k8s_namespace_name', - type: 'tag', - }, - op: 'in', - value: ['{{.k8s_namespace_name}}'], - }, ], op: 'AND', }, @@ -759,7 +746,7 @@ export const getPodQueryPayload = ( key: 'k8s_pod_name', type: 'tag', }, - op: 'in', + op: '=', value: podName, }, ], @@ -926,7 +913,7 @@ export const getPodQueryPayload = ( key: 'k8s_pod_name', type: 'tag', }, - op: 'in', + op: '=', value: podName, }, ], @@ -984,13 +971,13 @@ export const getPodQueryPayload = ( id: '6ce28dde', key: { dataType: DataTypes.String, - id: 'k8s_node_name--string--tag--false', + id: 'k8s_pod_name--string--tag--false', isColumn: false, key: 'k8s_node_name', type: 'tag', }, op: 'in', - value: ['{{.k8s_node_name}}'], + value: podName, }, { id: '3a50eee8', @@ -1103,7 +1090,7 @@ export const getPodQueryPayload = ( key: 'k8s_pod_name', type: 'tag', }, - op: 'in', + op: '=', value: podName, }, ], From 78ff18e236f053ff0307251f296f21ab9ae2bf59 Mon Sep 17 00:00:00 2001 From: rahulkeswani101 Date: Mon, 9 Sep 2024 23:20:32 +0530 Subject: [PATCH 18/26] fix: added key as pod name instead of node name in file system usage --- .../src/container/LogDetailedView/InfraMetrics/constants.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/container/LogDetailedView/InfraMetrics/constants.ts b/frontend/src/container/LogDetailedView/InfraMetrics/constants.ts index fcb36b6224..61781f3594 100644 --- a/frontend/src/container/LogDetailedView/InfraMetrics/constants.ts +++ b/frontend/src/container/LogDetailedView/InfraMetrics/constants.ts @@ -973,7 +973,7 @@ export const getPodQueryPayload = ( dataType: DataTypes.String, id: 'k8s_pod_name--string--tag--false', isColumn: false, - key: 'k8s_node_name', + key: 'k8s_pod_name', type: 'tag', }, op: 'in', From 2a08957c32c7e9d833a7aa4c4a3f4bdd14ee93a9 Mon Sep 17 00:00:00 2001 From: rahulkeswani101 Date: Mon, 9 Sep 2024 23:58:07 +0530 Subject: [PATCH 19/26] fix: updated query payload for file system usage in pod metrics and removed label from dotted line --- .../LogDetailedView/InfraMetrics/constants.ts | 25 +++++------------ .../src/lib/uPlotLib/getUplotChartOptions.ts | 28 +++++++++---------- 2 files changed, 21 insertions(+), 32 deletions(-) diff --git a/frontend/src/container/LogDetailedView/InfraMetrics/constants.ts b/frontend/src/container/LogDetailedView/InfraMetrics/constants.ts index 61781f3594..a127cd217d 100644 --- a/frontend/src/container/LogDetailedView/InfraMetrics/constants.ts +++ b/frontend/src/container/LogDetailedView/InfraMetrics/constants.ts @@ -893,7 +893,7 @@ export const getPodQueryPayload = ( filters: { items: [ { - id: 'c0f3e7ef', + id: '877385bf', key: { dataType: DataTypes.String, id: 'k8s_cluster_name--string--tag--false', @@ -905,7 +905,7 @@ export const getPodQueryPayload = ( value: clusterName, }, { - id: 'ae457343', + id: '877385cd', key: { dataType: DataTypes.String, id: 'k8s_pod_name--string--tag--false', @@ -956,7 +956,7 @@ export const getPodQueryPayload = ( filters: { items: [ { - id: '8a387fb7', + id: '877385bf', key: { dataType: DataTypes.String, id: 'k8s_cluster_name--string--tag--false', @@ -968,7 +968,7 @@ export const getPodQueryPayload = ( value: clusterName, }, { - id: '6ce28dde', + id: '877385cd', key: { dataType: DataTypes.String, id: 'k8s_pod_name--string--tag--false', @@ -976,21 +976,9 @@ export const getPodQueryPayload = ( key: 'k8s_pod_name', type: 'tag', }, - op: 'in', + op: '=', value: podName, }, - { - id: '3a50eee8', - key: { - dataType: DataTypes.String, - id: 'k8s_namespace_name--string--tag--false', - isColumn: false, - key: 'k8s_namespace_name', - type: 'tag', - }, - op: 'in', - value: ['{{.k8s_namespace_name}}'], - }, ], op: 'AND', }, @@ -1033,7 +1021,7 @@ export const getPodQueryPayload = ( query: '', }, ], - id: 'bbdc1096-339c-490c-a977-6eff00e3d72f', + id: '16908d4e-1565-4847-8d87-01ebb8fc494a', promql: [ { disabled: false, @@ -1046,6 +1034,7 @@ export const getPodQueryPayload = ( }, globalSelectedInterval: '6h', variables: {}, + fillGaps: false, formatForWeb: false, }, { diff --git a/frontend/src/lib/uPlotLib/getUplotChartOptions.ts b/frontend/src/lib/uPlotLib/getUplotChartOptions.ts index e16e915256..5751db47e8 100644 --- a/frontend/src/lib/uPlotLib/getUplotChartOptions.ts +++ b/frontend/src/lib/uPlotLib/getUplotChartOptions.ts @@ -241,20 +241,20 @@ export const getUPlotChartOptions = ({ ctx.lineTo(x, u.bbox.top + u.bbox.height); ctx.stroke(); ctx.setLineDash([]); - ctx.font = 'bold 14px Arial'; - ctx.textAlign = 'center'; - const label = new Date( - verticalLineTimestamp * 1000, - ).toLocaleTimeString(); - const labelText = `Logline: ${label}`; - const labelY = u.bbox.top + 20; - const labelWidth = ctx.measureText(labelText).width + 10; - const labelHeight = 20; - ctx.fillStyle = 'rgba(0, 0, 0, 0.6)'; - ctx.fillRect(x - labelWidth / 2, labelY - 15, labelWidth, labelHeight); - - ctx.fillStyle = 'white'; - ctx.fillText(labelText, x, labelY); + // ctx.font = 'bold 10px'; + // ctx.textAlign = 'center'; + // const label = new Date( + // verticalLineTimestamp * 1000, + // ).toLocaleTimeString(); + // const labelText = `Logline: ${label}`; + // const labelY = u.bbox.top + 20; + // const labelWidth = ctx.measureText(labelText).width + 10; + // const labelHeight = 20; + // ctx.fillStyle = 'rgba(0, 0, 0, 0.6)'; + // ctx.fillRect(x - labelWidth / 2, labelY - 15, labelWidth, labelHeight); + + // ctx.fillStyle = 'white'; + // ctx.fillText(labelText, x, labelY); ctx.restore(); } From 03adb4000907544f1a328ebb362d35f02cfd4fd2 Mon Sep 17 00:00:00 2001 From: rahulkeswani101 Date: Tue, 10 Sep 2024 13:18:07 +0530 Subject: [PATCH 20/26] fix: updated the y axis units for network io --- .../src/container/LogDetailedView/InfraMetrics/constants.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/container/LogDetailedView/InfraMetrics/constants.ts b/frontend/src/container/LogDetailedView/InfraMetrics/constants.ts index a127cd217d..34262bbc23 100644 --- a/frontend/src/container/LogDetailedView/InfraMetrics/constants.ts +++ b/frontend/src/container/LogDetailedView/InfraMetrics/constants.ts @@ -2958,7 +2958,7 @@ export const podWidgetInfo = [ }, { title: 'Pod network IO', - yAxisUnit: 'bytes', + yAxisUnit: 'binBps', }, ]; @@ -2978,7 +2978,7 @@ export const nodeWidgetInfo = [ }, { title: 'Node network IO', - yAxisUnit: 'bytes', + yAxisUnit: 'binBps', }, { title: 'Node filesystem usage', From a66c78a4f1447e7c0af76acaecbcd5cae2703bb5 Mon Sep 17 00:00:00 2001 From: rahulkeswani101 Date: Tue, 10 Sep 2024 17:51:02 +0530 Subject: [PATCH 21/26] fix: custom date time issue while plotting the graph --- .../InfraMetrics/NodeMetrics.tsx | 23 ++++++-- .../InfraMetrics/PodMetrics.tsx | 26 ++++++--- .../LogDetailedView/InfraMetrics/constants.ts | 56 +++++++++++-------- frontend/src/lib/dashboard/getQueryResults.ts | 10 +++- 4 files changed, 75 insertions(+), 40 deletions(-) diff --git a/frontend/src/container/LogDetailedView/InfraMetrics/NodeMetrics.tsx b/frontend/src/container/LogDetailedView/InfraMetrics/NodeMetrics.tsx index 8675d65cf5..b77e9b5a1a 100644 --- a/frontend/src/container/LogDetailedView/InfraMetrics/NodeMetrics.tsx +++ b/frontend/src/container/LogDetailedView/InfraMetrics/NodeMetrics.tsx @@ -5,6 +5,7 @@ import { ENTITY_VERSION_V4 } from 'constants/app'; import dayjs from 'dayjs'; import { useIsDarkMode } from 'hooks/useDarkMode'; import { useResizeObserver } from 'hooks/useDimensions'; +import useUrlQuery from 'hooks/useUrlQuery'; import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults'; import { getUPlotChartOptions } from 'lib/uPlotLib/getUplotChartOptions'; import { getUPlotChartData } from 'lib/uPlotLib/utils/getUplotChartData'; @@ -31,6 +32,10 @@ function NodeMetrics({ hostName: string; logLineTimestamp: string; }): JSX.Element { + const queryParams = useUrlQuery(); + const globalSelectedInterval = queryParams.get('relativeTime') + ? '6h' + : 'custom'; const { start, end, verticalLineTimestamp } = useMemo(() => { const logTimestamp = dayjs(logLineTimestamp); const now = dayjs(); @@ -49,18 +54,24 @@ function NodeMetrics({ const queryPayloads = useMemo(() => { if (nodeName) { - return getNodeQueryPayload(clusterName, nodeName); + return getNodeQueryPayload(clusterName, nodeName, globalSelectedInterval); } - return getHostQueryPayload(hostName); - }, [clusterName, nodeName, hostName]); + return getHostQueryPayload(hostName, globalSelectedInterval); + }, [nodeName, hostName, globalSelectedInterval, clusterName]); const widgetInfo = nodeName ? nodeWidgetInfo : hostWidgetInfo; - + const extendedEnd = !queryParams.get('relative'); const queries = useQueries( queryPayloads.map((payload) => ({ queryKey: ['metrics', payload, ENTITY_VERSION_V4, 'NODE'], queryFn: (): Promise> => - GetMetricQueryRange(payload, ENTITY_VERSION_V4), + GetMetricQueryRange( + payload, + ENTITY_VERSION_V4, + undefined, + undefined, + extendedEnd, + ), enabled: !!payload, })), ); @@ -95,8 +106,8 @@ function NodeMetrics({ dimensions, widgetInfo, start, - end, verticalLineTimestamp, + end, ], ); diff --git a/frontend/src/container/LogDetailedView/InfraMetrics/PodMetrics.tsx b/frontend/src/container/LogDetailedView/InfraMetrics/PodMetrics.tsx index cf2ea86910..0b1dee3510 100644 --- a/frontend/src/container/LogDetailedView/InfraMetrics/PodMetrics.tsx +++ b/frontend/src/container/LogDetailedView/InfraMetrics/PodMetrics.tsx @@ -5,6 +5,7 @@ import { ENTITY_VERSION_V4 } from 'constants/app'; import dayjs from 'dayjs'; import { useIsDarkMode } from 'hooks/useDarkMode'; import { useResizeObserver } from 'hooks/useDimensions'; +import useUrlQuery from 'hooks/useUrlQuery'; import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults'; import { getUPlotChartOptions } from 'lib/uPlotLib/getUplotChartOptions'; import { getUPlotChartData } from 'lib/uPlotLib/utils/getUplotChartData'; @@ -24,6 +25,10 @@ function PodMetrics({ clusterName: string; logLineTimestamp: string; }): JSX.Element { + const queryParams = useUrlQuery(); + const globalSelectedInterval = queryParams.get('relativeTime') + ? '6h' + : 'custom'; const { start, end, verticalLineTimestamp } = useMemo(() => { const logTimestamp = dayjs(logLineTimestamp); const now = dayjs(); @@ -39,16 +44,23 @@ function PodMetrics({ verticalLineTimestamp: logTimestamp.unix(), }; }, [logLineTimestamp]); - const queryPayloads = useMemo(() => getPodQueryPayload(clusterName, podName), [ - clusterName, - podName, - ]); - + console.log(start, end, verticalLineTimestamp, logLineTimestamp); + const queryPayloads = useMemo( + () => getPodQueryPayload(clusterName, podName, globalSelectedInterval), + [clusterName, globalSelectedInterval, podName], + ); + const extendedEnd = !queryParams.get('relative'); const queries = useQueries( queryPayloads.map((payload) => ({ queryKey: ['metrics', payload, ENTITY_VERSION_V4, 'POD'], queryFn: (): Promise> => - GetMetricQueryRange(payload, ENTITY_VERSION_V4), + GetMetricQueryRange( + payload, + ENTITY_VERSION_V4, + undefined, + undefined, + extendedEnd, + ), enabled: !!payload, })), ); @@ -77,7 +89,7 @@ function PodMetrics({ verticalLineTimestamp, }), ), - [queries, isDarkMode, dimensions, start, end, verticalLineTimestamp], + [queries, isDarkMode, dimensions, start, verticalLineTimestamp, end], ); const renderCardContent = ( diff --git a/frontend/src/container/LogDetailedView/InfraMetrics/constants.ts b/frontend/src/container/LogDetailedView/InfraMetrics/constants.ts index 34262bbc23..7b16a2812f 100644 --- a/frontend/src/container/LogDetailedView/InfraMetrics/constants.ts +++ b/frontend/src/container/LogDetailedView/InfraMetrics/constants.ts @@ -1,5 +1,10 @@ /* eslint-disable sonarjs/no-duplicate-string */ import { PANEL_TYPES } from 'constants/queryBuilder'; +import { Time } from 'container/TopNav/DateTimeSelection/config'; +import { + CustomTimeType, + Time as TimeV2, +} from 'container/TopNav/DateTimeSelectionV2/config'; import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults'; import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse'; import { EQueryType } from 'types/common/dashboard'; @@ -8,6 +13,7 @@ import { DataSource } from 'types/common/queryBuilder'; export const getPodQueryPayload = ( clusterName: string, podName: string, + globalSelectedInterval: Time | TimeV2 | CustomTimeType, ): GetQueryResultsProps[] => [ { selectedTime: 'GLOBAL_TIME', @@ -102,7 +108,7 @@ export const getPodQueryPayload = ( ], queryType: EQueryType.QUERY_BUILDER, }, - globalSelectedInterval: '6h', + globalSelectedInterval, variables: {}, formatForWeb: false, }, @@ -199,7 +205,7 @@ export const getPodQueryPayload = ( ], queryType: EQueryType.QUERY_BUILDER, }, - globalSelectedInterval: '6h', + globalSelectedInterval, variables: {}, formatForWeb: false, }, @@ -366,7 +372,7 @@ export const getPodQueryPayload = ( ], queryType: EQueryType.QUERY_BUILDER, }, - globalSelectedInterval: '6h', + globalSelectedInterval, variables: {}, formatForWeb: false, }, @@ -533,7 +539,7 @@ export const getPodQueryPayload = ( ], queryType: EQueryType.QUERY_BUILDER, }, - globalSelectedInterval: '6h', + globalSelectedInterval, variables: {}, formatForWeb: false, }, @@ -700,7 +706,7 @@ export const getPodQueryPayload = ( ], queryType: EQueryType.QUERY_BUILDER, }, - globalSelectedInterval: '6h', + globalSelectedInterval, variables: {}, formatForWeb: false, }, @@ -867,7 +873,7 @@ export const getPodQueryPayload = ( ], queryType: EQueryType.QUERY_BUILDER, }, - globalSelectedInterval: '6h', + globalSelectedInterval, variables: {}, formatForWeb: false, }, @@ -1032,7 +1038,7 @@ export const getPodQueryPayload = ( ], queryType: EQueryType.QUERY_BUILDER, }, - globalSelectedInterval: '6h', + globalSelectedInterval, variables: {}, fillGaps: false, formatForWeb: false, @@ -1127,7 +1133,7 @@ export const getPodQueryPayload = ( ], queryType: EQueryType.QUERY_BUILDER, }, - globalSelectedInterval: '6h', + globalSelectedInterval, variables: {}, formatForWeb: false, }, @@ -1136,6 +1142,7 @@ export const getPodQueryPayload = ( export const getNodeQueryPayload = ( clusterName: string, nodeName: string, + globalSelectedInterval: Time | TimeV2 | CustomTimeType, ): GetQueryResultsProps[] => [ { selectedTime: 'GLOBAL_TIME', @@ -1286,7 +1293,7 @@ export const getNodeQueryPayload = ( ], queryType: EQueryType.QUERY_BUILDER, }, - globalSelectedInterval: '6h', + globalSelectedInterval, variables: {}, fillGaps: false, formatForWeb: false, @@ -1438,7 +1445,7 @@ export const getNodeQueryPayload = ( ], queryType: EQueryType.QUERY_BUILDER, }, - globalSelectedInterval: '6h', + globalSelectedInterval, variables: {}, fillGaps: false, formatForWeb: false, @@ -1547,7 +1554,7 @@ export const getNodeQueryPayload = ( ], queryType: EQueryType.QUERY_BUILDER, }, - globalSelectedInterval: '6h', + globalSelectedInterval, variables: {}, formatForWeb: false, }, @@ -1710,7 +1717,7 @@ export const getNodeQueryPayload = ( ], queryType: EQueryType.QUERY_BUILDER, }, - globalSelectedInterval: '6h', + globalSelectedInterval, variables: {}, formatForWeb: false, }, @@ -1718,6 +1725,7 @@ export const getNodeQueryPayload = ( export const getHostQueryPayload = ( hostName: string, + globalSelectedInterval: Time | TimeV2 | CustomTimeType, ): GetQueryResultsProps[] => [ { selectedTime: 'GLOBAL_TIME', @@ -1849,7 +1857,7 @@ export const getHostQueryPayload = ( ], queryType: EQueryType.QUERY_BUILDER, }, - globalSelectedInterval: '6h', + globalSelectedInterval, variables: {}, formatForWeb: false, }, @@ -1933,7 +1941,7 @@ export const getHostQueryPayload = ( ], queryType: EQueryType.QUERY_BUILDER, }, - globalSelectedInterval: '6h', + globalSelectedInterval, variables: {}, formatForWeb: false, }, @@ -2094,7 +2102,7 @@ export const getHostQueryPayload = ( ], queryType: EQueryType.QUERY_BUILDER, }, - globalSelectedInterval: '6h', + globalSelectedInterval, variables: {}, formatForWeb: false, }, @@ -2192,7 +2200,7 @@ export const getHostQueryPayload = ( ], queryType: EQueryType.QUERY_BUILDER, }, - globalSelectedInterval: '6h', + globalSelectedInterval, variables: {}, formatForWeb: false, }, @@ -2284,7 +2292,7 @@ export const getHostQueryPayload = ( ], queryType: EQueryType.QUERY_BUILDER, }, - globalSelectedInterval: '6h', + globalSelectedInterval, variables: {}, formatForWeb: false, }, @@ -2376,7 +2384,7 @@ export const getHostQueryPayload = ( ], queryType: EQueryType.QUERY_BUILDER, }, - globalSelectedInterval: '6h', + globalSelectedInterval, variables: {}, formatForWeb: false, }, @@ -2468,7 +2476,7 @@ export const getHostQueryPayload = ( ], queryType: EQueryType.QUERY_BUILDER, }, - globalSelectedInterval: '6h', + globalSelectedInterval, variables: {}, formatForWeb: false, }, @@ -2560,7 +2568,7 @@ export const getHostQueryPayload = ( ], queryType: EQueryType.QUERY_BUILDER, }, - globalSelectedInterval: '6h', + globalSelectedInterval, variables: {}, formatForWeb: false, }, @@ -2635,7 +2643,7 @@ export const getHostQueryPayload = ( ], queryType: EQueryType.QUERY_BUILDER, }, - globalSelectedInterval: '6h', + globalSelectedInterval, variables: {}, formatForWeb: false, }, @@ -2733,7 +2741,7 @@ export const getHostQueryPayload = ( ], queryType: EQueryType.QUERY_BUILDER, }, - globalSelectedInterval: '6h', + globalSelectedInterval, variables: {}, formatForWeb: false, }, @@ -2823,7 +2831,7 @@ export const getHostQueryPayload = ( ], queryType: EQueryType.QUERY_BUILDER, }, - globalSelectedInterval: '6h', + globalSelectedInterval, variables: {}, formatForWeb: false, }, @@ -2921,7 +2929,7 @@ export const getHostQueryPayload = ( ], queryType: EQueryType.QUERY_BUILDER, }, - globalSelectedInterval: '6h', + globalSelectedInterval, variables: {}, formatForWeb: false, }, diff --git a/frontend/src/lib/dashboard/getQueryResults.ts b/frontend/src/lib/dashboard/getQueryResults.ts index 2b3065594e..3b8df28dbb 100644 --- a/frontend/src/lib/dashboard/getQueryResults.ts +++ b/frontend/src/lib/dashboard/getQueryResults.ts @@ -24,11 +24,15 @@ export async function GetMetricQueryRange( version: string, signal?: AbortSignal, headers?: Record, + extendedEnd?: boolean, ): Promise> { const { legendMap, queryPayload } = prepareQueryRangePayload(props); - - console.log(props); - + console.log(extendedEnd); + if (extendedEnd) { + // const currentTime = Date.now(); + queryPayload.end += 3 * 60 * 60 * 1000; + // queryPayload.end = Math.min(queryPayload.end, currentTime); + } const response = await getMetricsQueryRange( queryPayload, version || 'v3', From 065d3627e172dfc5b4d006d4c1ad812ceabb929d Mon Sep 17 00:00:00 2001 From: rahulkeswani101 Date: Tue, 10 Sep 2024 17:52:39 +0530 Subject: [PATCH 22/26] feat: compare end time and current time update the end time accordingly --- frontend/src/lib/dashboard/getQueryResults.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/lib/dashboard/getQueryResults.ts b/frontend/src/lib/dashboard/getQueryResults.ts index 3b8df28dbb..63f20ac119 100644 --- a/frontend/src/lib/dashboard/getQueryResults.ts +++ b/frontend/src/lib/dashboard/getQueryResults.ts @@ -29,9 +29,9 @@ export async function GetMetricQueryRange( const { legendMap, queryPayload } = prepareQueryRangePayload(props); console.log(extendedEnd); if (extendedEnd) { - // const currentTime = Date.now(); + const currentTime = Date.now(); queryPayload.end += 3 * 60 * 60 * 1000; - // queryPayload.end = Math.min(queryPayload.end, currentTime); + queryPayload.end = Math.min(queryPayload.end, currentTime); } const response = await getMetricsQueryRange( queryPayload, From 2e6219a1e82d15735121595feb7c197058d6bdb6 Mon Sep 17 00:00:00 2001 From: rahulkeswani101 Date: Wed, 11 Sep 2024 11:13:41 +0530 Subject: [PATCH 23/26] feat: added the start and end time in query payloads --- .../InfraMetrics/NodeMetrics.tsx | 20 +---- .../InfraMetrics/PodMetrics.tsx | 19 +--- .../LogDetailedView/InfraMetrics/constants.ts | 87 ++++++++++++------- frontend/src/lib/dashboard/getQueryResults.ts | 11 +-- .../lib/dashboard/prepareQueryRangePayload.ts | 6 +- 5 files changed, 69 insertions(+), 74 deletions(-) diff --git a/frontend/src/container/LogDetailedView/InfraMetrics/NodeMetrics.tsx b/frontend/src/container/LogDetailedView/InfraMetrics/NodeMetrics.tsx index b77e9b5a1a..3c935c8b89 100644 --- a/frontend/src/container/LogDetailedView/InfraMetrics/NodeMetrics.tsx +++ b/frontend/src/container/LogDetailedView/InfraMetrics/NodeMetrics.tsx @@ -5,7 +5,6 @@ import { ENTITY_VERSION_V4 } from 'constants/app'; import dayjs from 'dayjs'; import { useIsDarkMode } from 'hooks/useDarkMode'; import { useResizeObserver } from 'hooks/useDimensions'; -import useUrlQuery from 'hooks/useUrlQuery'; import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults'; import { getUPlotChartOptions } from 'lib/uPlotLib/getUplotChartOptions'; import { getUPlotChartData } from 'lib/uPlotLib/utils/getUplotChartData'; @@ -32,10 +31,6 @@ function NodeMetrics({ hostName: string; logLineTimestamp: string; }): JSX.Element { - const queryParams = useUrlQuery(); - const globalSelectedInterval = queryParams.get('relativeTime') - ? '6h' - : 'custom'; const { start, end, verticalLineTimestamp } = useMemo(() => { const logTimestamp = dayjs(logLineTimestamp); const now = dayjs(); @@ -54,24 +49,17 @@ function NodeMetrics({ const queryPayloads = useMemo(() => { if (nodeName) { - return getNodeQueryPayload(clusterName, nodeName, globalSelectedInterval); + return getNodeQueryPayload(clusterName, nodeName, start, end); } - return getHostQueryPayload(hostName, globalSelectedInterval); - }, [nodeName, hostName, globalSelectedInterval, clusterName]); + return getHostQueryPayload(hostName, start, end); + }, [nodeName, hostName, clusterName, start, end]); const widgetInfo = nodeName ? nodeWidgetInfo : hostWidgetInfo; - const extendedEnd = !queryParams.get('relative'); const queries = useQueries( queryPayloads.map((payload) => ({ queryKey: ['metrics', payload, ENTITY_VERSION_V4, 'NODE'], queryFn: (): Promise> => - GetMetricQueryRange( - payload, - ENTITY_VERSION_V4, - undefined, - undefined, - extendedEnd, - ), + GetMetricQueryRange(payload, ENTITY_VERSION_V4), enabled: !!payload, })), ); diff --git a/frontend/src/container/LogDetailedView/InfraMetrics/PodMetrics.tsx b/frontend/src/container/LogDetailedView/InfraMetrics/PodMetrics.tsx index 0b1dee3510..99391d65e0 100644 --- a/frontend/src/container/LogDetailedView/InfraMetrics/PodMetrics.tsx +++ b/frontend/src/container/LogDetailedView/InfraMetrics/PodMetrics.tsx @@ -5,7 +5,6 @@ import { ENTITY_VERSION_V4 } from 'constants/app'; import dayjs from 'dayjs'; import { useIsDarkMode } from 'hooks/useDarkMode'; import { useResizeObserver } from 'hooks/useDimensions'; -import useUrlQuery from 'hooks/useUrlQuery'; import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults'; import { getUPlotChartOptions } from 'lib/uPlotLib/getUplotChartOptions'; import { getUPlotChartData } from 'lib/uPlotLib/utils/getUplotChartData'; @@ -25,10 +24,6 @@ function PodMetrics({ clusterName: string; logLineTimestamp: string; }): JSX.Element { - const queryParams = useUrlQuery(); - const globalSelectedInterval = queryParams.get('relativeTime') - ? '6h' - : 'custom'; const { start, end, verticalLineTimestamp } = useMemo(() => { const logTimestamp = dayjs(logLineTimestamp); const now = dayjs(); @@ -44,23 +39,15 @@ function PodMetrics({ verticalLineTimestamp: logTimestamp.unix(), }; }, [logLineTimestamp]); - console.log(start, end, verticalLineTimestamp, logLineTimestamp); const queryPayloads = useMemo( - () => getPodQueryPayload(clusterName, podName, globalSelectedInterval), - [clusterName, globalSelectedInterval, podName], + () => getPodQueryPayload(clusterName, podName, start, end), + [clusterName, end, podName, start], ); - const extendedEnd = !queryParams.get('relative'); const queries = useQueries( queryPayloads.map((payload) => ({ queryKey: ['metrics', payload, ENTITY_VERSION_V4, 'POD'], queryFn: (): Promise> => - GetMetricQueryRange( - payload, - ENTITY_VERSION_V4, - undefined, - undefined, - extendedEnd, - ), + GetMetricQueryRange(payload, ENTITY_VERSION_V4), enabled: !!payload, })), ); diff --git a/frontend/src/container/LogDetailedView/InfraMetrics/constants.ts b/frontend/src/container/LogDetailedView/InfraMetrics/constants.ts index 7b16a2812f..39130e7f56 100644 --- a/frontend/src/container/LogDetailedView/InfraMetrics/constants.ts +++ b/frontend/src/container/LogDetailedView/InfraMetrics/constants.ts @@ -1,10 +1,5 @@ /* eslint-disable sonarjs/no-duplicate-string */ import { PANEL_TYPES } from 'constants/queryBuilder'; -import { Time } from 'container/TopNav/DateTimeSelection/config'; -import { - CustomTimeType, - Time as TimeV2, -} from 'container/TopNav/DateTimeSelectionV2/config'; import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults'; import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse'; import { EQueryType } from 'types/common/dashboard'; @@ -13,7 +8,8 @@ import { DataSource } from 'types/common/queryBuilder'; export const getPodQueryPayload = ( clusterName: string, podName: string, - globalSelectedInterval: Time | TimeV2 | CustomTimeType, + start: number, + end: number, ): GetQueryResultsProps[] => [ { selectedTime: 'GLOBAL_TIME', @@ -108,9 +104,10 @@ export const getPodQueryPayload = ( ], queryType: EQueryType.QUERY_BUILDER, }, - globalSelectedInterval, variables: {}, formatForWeb: false, + start, + end, }, { selectedTime: 'GLOBAL_TIME', @@ -205,9 +202,10 @@ export const getPodQueryPayload = ( ], queryType: EQueryType.QUERY_BUILDER, }, - globalSelectedInterval, variables: {}, formatForWeb: false, + start, + end, }, { selectedTime: 'GLOBAL_TIME', @@ -372,9 +370,10 @@ export const getPodQueryPayload = ( ], queryType: EQueryType.QUERY_BUILDER, }, - globalSelectedInterval, variables: {}, formatForWeb: false, + start, + end, }, { selectedTime: 'GLOBAL_TIME', @@ -539,9 +538,10 @@ export const getPodQueryPayload = ( ], queryType: EQueryType.QUERY_BUILDER, }, - globalSelectedInterval, variables: {}, formatForWeb: false, + start, + end, }, { selectedTime: 'GLOBAL_TIME', @@ -706,9 +706,11 @@ export const getPodQueryPayload = ( ], queryType: EQueryType.QUERY_BUILDER, }, - globalSelectedInterval, + variables: {}, formatForWeb: false, + start, + end, }, { selectedTime: 'GLOBAL_TIME', @@ -873,9 +875,10 @@ export const getPodQueryPayload = ( ], queryType: EQueryType.QUERY_BUILDER, }, - globalSelectedInterval, variables: {}, formatForWeb: false, + start, + end, }, { selectedTime: 'GLOBAL_TIME', @@ -1038,10 +1041,11 @@ export const getPodQueryPayload = ( ], queryType: EQueryType.QUERY_BUILDER, }, - globalSelectedInterval, variables: {}, fillGaps: false, formatForWeb: false, + start, + end, }, { selectedTime: 'GLOBAL_TIME', @@ -1133,16 +1137,18 @@ export const getPodQueryPayload = ( ], queryType: EQueryType.QUERY_BUILDER, }, - globalSelectedInterval, variables: {}, formatForWeb: false, + start, + end, }, ]; export const getNodeQueryPayload = ( clusterName: string, nodeName: string, - globalSelectedInterval: Time | TimeV2 | CustomTimeType, + start: number, + end: number, ): GetQueryResultsProps[] => [ { selectedTime: 'GLOBAL_TIME', @@ -1293,10 +1299,11 @@ export const getNodeQueryPayload = ( ], queryType: EQueryType.QUERY_BUILDER, }, - globalSelectedInterval, variables: {}, fillGaps: false, formatForWeb: false, + start, + end, }, { selectedTime: 'GLOBAL_TIME', @@ -1445,10 +1452,11 @@ export const getNodeQueryPayload = ( ], queryType: EQueryType.QUERY_BUILDER, }, - globalSelectedInterval, variables: {}, fillGaps: false, formatForWeb: false, + start, + end, }, { selectedTime: 'GLOBAL_TIME', @@ -1554,9 +1562,10 @@ export const getNodeQueryPayload = ( ], queryType: EQueryType.QUERY_BUILDER, }, - globalSelectedInterval, variables: {}, formatForWeb: false, + start, + end, }, { selectedTime: 'GLOBAL_TIME', @@ -1717,15 +1726,17 @@ export const getNodeQueryPayload = ( ], queryType: EQueryType.QUERY_BUILDER, }, - globalSelectedInterval, variables: {}, formatForWeb: false, + start, + end, }, ]; export const getHostQueryPayload = ( hostName: string, - globalSelectedInterval: Time | TimeV2 | CustomTimeType, + start: number, + end: number, ): GetQueryResultsProps[] => [ { selectedTime: 'GLOBAL_TIME', @@ -1857,9 +1868,10 @@ export const getHostQueryPayload = ( ], queryType: EQueryType.QUERY_BUILDER, }, - globalSelectedInterval, variables: {}, formatForWeb: false, + start, + end, }, { selectedTime: 'GLOBAL_TIME', @@ -1941,9 +1953,10 @@ export const getHostQueryPayload = ( ], queryType: EQueryType.QUERY_BUILDER, }, - globalSelectedInterval, variables: {}, formatForWeb: false, + start, + end, }, { selectedTime: 'GLOBAL_TIME', @@ -2102,9 +2115,10 @@ export const getHostQueryPayload = ( ], queryType: EQueryType.QUERY_BUILDER, }, - globalSelectedInterval, variables: {}, formatForWeb: false, + start, + end, }, { selectedTime: 'GLOBAL_TIME', @@ -2200,9 +2214,10 @@ export const getHostQueryPayload = ( ], queryType: EQueryType.QUERY_BUILDER, }, - globalSelectedInterval, variables: {}, formatForWeb: false, + start, + end, }, { selectedTime: 'GLOBAL_TIME', @@ -2292,9 +2307,10 @@ export const getHostQueryPayload = ( ], queryType: EQueryType.QUERY_BUILDER, }, - globalSelectedInterval, variables: {}, formatForWeb: false, + start, + end, }, { selectedTime: 'GLOBAL_TIME', @@ -2384,9 +2400,10 @@ export const getHostQueryPayload = ( ], queryType: EQueryType.QUERY_BUILDER, }, - globalSelectedInterval, variables: {}, formatForWeb: false, + start, + end, }, { selectedTime: 'GLOBAL_TIME', @@ -2476,9 +2493,10 @@ export const getHostQueryPayload = ( ], queryType: EQueryType.QUERY_BUILDER, }, - globalSelectedInterval, variables: {}, formatForWeb: false, + start, + end, }, { selectedTime: 'GLOBAL_TIME', @@ -2568,9 +2586,10 @@ export const getHostQueryPayload = ( ], queryType: EQueryType.QUERY_BUILDER, }, - globalSelectedInterval, variables: {}, formatForWeb: false, + start, + end, }, { selectedTime: 'GLOBAL_TIME', @@ -2643,9 +2662,10 @@ export const getHostQueryPayload = ( ], queryType: EQueryType.QUERY_BUILDER, }, - globalSelectedInterval, variables: {}, formatForWeb: false, + start, + end, }, { selectedTime: 'GLOBAL_TIME', @@ -2741,9 +2761,10 @@ export const getHostQueryPayload = ( ], queryType: EQueryType.QUERY_BUILDER, }, - globalSelectedInterval, variables: {}, formatForWeb: false, + start, + end, }, { selectedTime: 'GLOBAL_TIME', @@ -2831,9 +2852,10 @@ export const getHostQueryPayload = ( ], queryType: EQueryType.QUERY_BUILDER, }, - globalSelectedInterval, variables: {}, formatForWeb: false, + start, + end, }, { selectedTime: 'GLOBAL_TIME', @@ -2929,9 +2951,10 @@ export const getHostQueryPayload = ( ], queryType: EQueryType.QUERY_BUILDER, }, - globalSelectedInterval, variables: {}, formatForWeb: false, + start, + end, }, ]; diff --git a/frontend/src/lib/dashboard/getQueryResults.ts b/frontend/src/lib/dashboard/getQueryResults.ts index 63f20ac119..232efad04c 100644 --- a/frontend/src/lib/dashboard/getQueryResults.ts +++ b/frontend/src/lib/dashboard/getQueryResults.ts @@ -24,15 +24,8 @@ export async function GetMetricQueryRange( version: string, signal?: AbortSignal, headers?: Record, - extendedEnd?: boolean, ): Promise> { const { legendMap, queryPayload } = prepareQueryRangePayload(props); - console.log(extendedEnd); - if (extendedEnd) { - const currentTime = Date.now(); - queryPayload.end += 3 * 60 * 60 * 1000; - queryPayload.end = Math.min(queryPayload.end, currentTime); - } const response = await getMetricsQueryRange( queryPayload, version || 'v3', @@ -85,7 +78,7 @@ export interface GetQueryResultsProps { query: Query; graphType: PANEL_TYPES; selectedTime: timePreferenceType; - globalSelectedInterval: Time | TimeV2 | CustomTimeType; + globalSelectedInterval?: Time | TimeV2 | CustomTimeType; variables?: Record; params?: Record; fillGaps?: boolean; @@ -94,4 +87,6 @@ export interface GetQueryResultsProps { pagination?: Pagination; selectColumns?: any; }; + start?: number; + end?: number; } diff --git a/frontend/src/lib/dashboard/prepareQueryRangePayload.ts b/frontend/src/lib/dashboard/prepareQueryRangePayload.ts index 181a83914b..46eedebe6f 100644 --- a/frontend/src/lib/dashboard/prepareQueryRangePayload.ts +++ b/frontend/src/lib/dashboard/prepareQueryRangePayload.ts @@ -22,6 +22,8 @@ export const prepareQueryRangePayload = ({ variables = {}, params = {}, fillGaps = false, + start: startTime, + end: endTime, }: GetQueryResultsProps): PrepareQueryRangePayload => { let legendMap: Record = {}; const { allowSelectedIntervalForStepGen, ...restParams } = params; @@ -91,8 +93,8 @@ export const prepareQueryRangePayload = ({ }); const queryPayload: QueryRangePayload = { - start: parseInt(start, 10) * 1e3, - end: parseInt(end, 10) * 1e3, + start: startTime ? startTime * 1e3 : parseInt(start, 10) * 1e3, + end: endTime ? endTime * 1e3 : parseInt(end, 10) * 1e3, step: getStep({ start: allowSelectedIntervalForStepGen ? start From 1e5a8b2910ea1546fd70927802d7c9d8c1df05bf Mon Sep 17 00:00:00 2001 From: rahulkeswani101 Date: Mon, 16 Sep 2024 11:11:33 +0530 Subject: [PATCH 24/26] refactor: removed the comments and unused variables --- .../LogDetailedView/LogDetailedView.types.ts | 4 ---- frontend/src/lib/uPlotLib/getUplotChartOptions.ts | 15 --------------- 2 files changed, 19 deletions(-) diff --git a/frontend/src/container/LogDetailedView/LogDetailedView.types.ts b/frontend/src/container/LogDetailedView/LogDetailedView.types.ts index ee6d3e0db9..5cdf79a30c 100644 --- a/frontend/src/container/LogDetailedView/LogDetailedView.types.ts +++ b/frontend/src/container/LogDetailedView/LogDetailedView.types.ts @@ -23,7 +23,3 @@ export interface IFieldAttributes { export interface JSONViewProps { logData: ILog; } - -export interface InfraMetricsSProps { - logData: ILog; -} diff --git a/frontend/src/lib/uPlotLib/getUplotChartOptions.ts b/frontend/src/lib/uPlotLib/getUplotChartOptions.ts index 5751db47e8..447dd8d716 100644 --- a/frontend/src/lib/uPlotLib/getUplotChartOptions.ts +++ b/frontend/src/lib/uPlotLib/getUplotChartOptions.ts @@ -241,21 +241,6 @@ export const getUPlotChartOptions = ({ ctx.lineTo(x, u.bbox.top + u.bbox.height); ctx.stroke(); ctx.setLineDash([]); - // ctx.font = 'bold 10px'; - // ctx.textAlign = 'center'; - // const label = new Date( - // verticalLineTimestamp * 1000, - // ).toLocaleTimeString(); - // const labelText = `Logline: ${label}`; - // const labelY = u.bbox.top + 20; - // const labelWidth = ctx.measureText(labelText).width + 10; - // const labelHeight = 20; - // ctx.fillStyle = 'rgba(0, 0, 0, 0.6)'; - // ctx.fillRect(x - labelWidth / 2, labelY - 15, labelWidth, labelHeight); - - // ctx.fillStyle = 'white'; - // ctx.fillText(labelText, x, labelY); - ctx.restore(); } }, From 9ef27be630d82f6441da99c92d55daf5e2b6e411 Mon Sep 17 00:00:00 2001 From: rahulkeswani101 Date: Mon, 16 Sep 2024 15:00:58 +0530 Subject: [PATCH 25/26] chore: added a todo to make common component for sub-tabs --- .../src/container/LogDetailedView/InfraMetrics/InfraMetrics.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/frontend/src/container/LogDetailedView/InfraMetrics/InfraMetrics.tsx b/frontend/src/container/LogDetailedView/InfraMetrics/InfraMetrics.tsx index 8c854277c3..7f792f0b22 100644 --- a/frontend/src/container/LogDetailedView/InfraMetrics/InfraMetrics.tsx +++ b/frontend/src/container/LogDetailedView/InfraMetrics/InfraMetrics.tsx @@ -70,6 +70,7 @@ function InfraMetrics({ )} + {/* TODO(Rahul): Make a common config driven component for this and other infra metrics components */} {selectedView === VIEW_TYPES.NODE && ( Date: Fri, 20 Sep 2024 23:30:03 +0530 Subject: [PATCH 26/26] fix: addressed review comments --- frontend/src/components/LogDetail/index.tsx | 8 ++++---- .../LogDetailedView/InfraMetrics/InfraMetrics.tsx | 5 +++-- 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/frontend/src/components/LogDetail/index.tsx b/frontend/src/components/LogDetail/index.tsx index 3cb1908953..4748312ceb 100644 --- a/frontend/src/components/LogDetail/index.tsx +++ b/frontend/src/components/LogDetail/index.tsx @@ -261,10 +261,10 @@ function LogDetail({ )} {selectedView === VIEW_TYPES.INFRAMETRICS && ( )} diff --git a/frontend/src/container/LogDetailedView/InfraMetrics/InfraMetrics.tsx b/frontend/src/container/LogDetailedView/InfraMetrics/InfraMetrics.tsx index 7f792f0b22..78a1d21b16 100644 --- a/frontend/src/container/LogDetailedView/InfraMetrics/InfraMetrics.tsx +++ b/frontend/src/container/LogDetailedView/InfraMetrics/InfraMetrics.tsx @@ -24,8 +24,9 @@ function InfraMetrics({ clusterName, logLineTimestamp, }: MetricsDataProps): JSX.Element { - const initialView = podName ? VIEW_TYPES.POD : VIEW_TYPES.NODE; - const [selectedView, setSelectedView] = useState(initialView); + const [selectedView, setSelectedView] = useState(() => + podName ? VIEW_TYPES.POD : VIEW_TYPES.NODE, + ); const handleModeChange = (e: RadioChangeEvent): void => { setSelectedView(e.target.value);