From 5357dad678e5d2bbd9a93ad049e89e7ecdcbbc44 Mon Sep 17 00:00:00 2001 From: Dominik Broj Date: Wed, 10 Jan 2024 10:41:00 +0100 Subject: [PATCH] Brojd/apply default stack in insights (#3641) # What this PR does - Apply default stack - Rename "Instance" to "Stack" - Add some additional banners - Add Prometheus by default on local env so that e2e tests pass locally for everyone ## Which issue(s) this PR fixes https://github.com/grafana/oncall-private/issues/2382 ## Checklist - [x] Unit, integration, and e2e (if applicable) tests updated - [x] Documentation added (or `pr:no public docs` PR label added if not required) - [x] `CHANGELOG.md` updated (or `pr:no changelog` PR label added if not required) --- dev/helm-local.yml | 4 +- .../e2e-tests/insights/insights.test.ts | 1 + .../e2e-tests/schedules/timezones.test.ts | 7 +- .../src/pages/insights/Insights.module.scss | 5 + .../src/pages/insights/Insights.tsx | 273 ++++++++++-------- .../src/pages/insights/Insights.types.ts | 1 + .../scenes/AlertGroupsByIntegration.tsx | 2 +- .../insights/scenes/AlertGroupsByTeam.tsx | 2 +- .../src/pages/insights/scenes/MTTR.tsx | 2 +- .../insights/scenes/MTTRByIntegration.tsx | 4 +- .../src/pages/insights/scenes/MTTRByTeam.tsx | 2 +- .../scenes/MTTRChangedForPeriodStat.tsx | 2 +- .../scenes/MTTRChangedForPeriodTimeseries.tsx | 2 +- .../scenes/NewAlertGroupsDuringTimePeriod.tsx | 2 +- .../NewAlertGroupsForSelectedPeriod.tsx | 2 +- ...ertGroupsNotificationsDuringTimePeriod.tsx | 2 +- ...AlertGroupsNotificationsForPeriodTable.tsx | 2 +- .../NewAlertGroupsNotificationsInTotal.tsx | 2 +- .../insights/scenes/TotalAlertGroups.tsx | 2 +- .../scenes/TotalAlertGroupsByState.tsx | 2 +- .../src/pages/insights/variables.ts | 47 ++- 21 files changed, 207 insertions(+), 161 deletions(-) diff --git a/dev/helm-local.yml b/dev/helm-local.yml index 7d6cf5b8..d33f216c 100644 --- a/dev/helm-local.yml +++ b/dev/helm-local.yml @@ -3,6 +3,8 @@ base_url_protocol: http env: - name: GRAFANA_CLOUD_NOTIFICATIONS_ENABLED value: "False" + - name: FEATURE_PROMETHEUS_EXPORTER_ENABLED + value: "True" image: repository: localhost:63628/oncall/engine tag: dev @@ -134,7 +136,7 @@ service: port: 8080 nodePort: 30001 prometheus: - enabled: false + enabled: true extraScrapeConfigs: | - job_name: 'oncall-exporter' metrics_path: /metrics/ diff --git a/grafana-plugin/e2e-tests/insights/insights.test.ts b/grafana-plugin/e2e-tests/insights/insights.test.ts index d83b9b59..355037b4 100644 --- a/grafana-plugin/e2e-tests/insights/insights.test.ts +++ b/grafana-plugin/e2e-tests/insights/insights.test.ts @@ -37,6 +37,7 @@ test.describe('Insights', () => { ); await createIntegrationAndSendDemoAlert(page, integrationName, escalationChainName); await resolveFiringAlert(page); + await page.waitForTimeout(5000); }); test('Viewer can see all the panels in OnCall insights', async ({ viewerRolePage: { page } }) => { diff --git a/grafana-plugin/e2e-tests/schedules/timezones.test.ts b/grafana-plugin/e2e-tests/schedules/timezones.test.ts index e569712b..5e8326f8 100644 --- a/grafana-plugin/e2e-tests/schedules/timezones.test.ts +++ b/grafana-plugin/e2e-tests/schedules/timezones.test.ts @@ -1,5 +1,6 @@ import { expect } from '@playwright/test'; import dayjs from 'dayjs'; +import isoWeek from 'dayjs/plugin/isoWeek'; import utc from 'dayjs/plugin/utc'; import { test } from '../fixtures'; @@ -7,6 +8,7 @@ import { clickButton, generateRandomValue } from '../utils/forms'; import { createOnCallSchedule } from '../utils/schedule'; dayjs.extend(utc); +dayjs.extend(isoWeek); test.use({ timezoneId: 'Europe/Moscow' }); // GMT+3 the whole year const currentUtcTime = dayjs().utc().format('HH:mm'); @@ -39,15 +41,18 @@ test('default dates in override creation modal are correct', async ({ adminRoleP // Schedule slot shows correct times and timezones await page.getByTestId('schedule-slot').first().hover(); + await page.waitForTimeout(500); await expect(page.getByText(`User's local time${currentMoscowDate}, ${currentMoscowTime}(GMT+3)`)).toBeVisible(); await expect(page.getByText(`Current timezone${currentUtcDate}, ${currentUtcTime}(GMT)`)).toBeVisible(); + const firstDayOfTheWeek = dayjs().utc().startOf('isoWeek'); + // Rotation form has correct start date and current timezone information await clickButton({ page, buttonText: 'Add rotation' }); await page.getByText('Layer 1 rotation').click(); await expect(page.getByTestId('rotation-form').getByText('Current timezone: GMT')).toBeVisible(); await expect(page.getByTestId('rotation-form').getByPlaceholder('Date')).toHaveValue( - dayjs().utcOffset(0).format('MM/DD/YYYY') + firstDayOfTheWeek.format('MM/DD/YYYY') ); await expect(page.getByTestId('rotation-form').getByTestId('date-time-picker').getByRole('textbox')).toHaveValue( '00:00' diff --git a/grafana-plugin/src/pages/insights/Insights.module.scss b/grafana-plugin/src/pages/insights/Insights.module.scss index 99ecbdcf..e5503077 100644 --- a/grafana-plugin/src/pages/insights/Insights.module.scss +++ b/grafana-plugin/src/pages/insights/Insights.module.scss @@ -3,4 +3,9 @@ padding-left: 0; padding-right: 0; border: none; + margin: 0; +} + +.alertBox { + margin-top: 16px; } diff --git a/grafana-plugin/src/pages/insights/Insights.tsx b/grafana-plugin/src/pages/insights/Insights.tsx index 3ea049bb..f032be64 100644 --- a/grafana-plugin/src/pages/insights/Insights.tsx +++ b/grafana-plugin/src/pages/insights/Insights.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React, { useCallback, useEffect, useMemo, useState } from 'react'; import { EmbeddedScene, @@ -39,154 +39,187 @@ import getTotalAlertGroupsScene from './scenes/TotalAlertGroups'; import getTotalAlertGroupsByStateScene from './scenes/TotalAlertGroupsByState'; import getVariables from './variables'; +const getDefaultStackValue = (isOpenSource: boolean) => + isOpenSource ? 'self_hosted_stack' : location.host.split('.')[0]; + const Insights = observer(() => { const { isOpenSource, insightsDatasource } = useStore(); + const [showAllStackInfo, setShowAllStackInfo] = useState(false); + const [datasource, setDatasource] = useState(); - const datasource = { uid: isOpenSource ? '$datasource' : insightsDatasource }; - const appScene = useSceneApp(() => getAppScene({ isOpenSource, datasource })); + const config = useMemo( + () => ({ + isOpenSource, + datasource: { uid: isOpenSource ? '$datasource' : insightsDatasource }, + stack: getDefaultStackValue(isOpenSource), + }), + [] + ); + + const variables = useMemo(() => getVariables(config), [config]); + + const getAppScene = useCallback(() => getRootScene(config, variables), [config, variables]); + + const appScene = useSceneApp(getAppScene); + + useEffect(() => { + const stackListener = variables.stack.subscribeToState(({ text }) => { + setShowAllStackInfo((text as string[]).includes('All')); + }); + const dataSourceListener = + isOpenSource && + variables.datasource.subscribeToState(({ text }) => { + setDatasource(`${text}`); + }); + return () => { + stackListener?.unsubscribe(); + dataSourceListener?.unsubscribe(); + }; + }, []); return (
- + + {showAllStackInfo && } + {isOpenSource && !datasource && }
); }); -const InsightsInfoAlert = observer(() => { - const { isOpenSource } = useStore(); +const InsightsGeneralInfo = () => { + const docsLink = ( + + documentation + + ); + return Find out more about OnCall Insights and Metrics in our {docsLink}.; +}; + +const AllStacksSelectedWarning = () => { const [alertVisible, setAlertVisible] = useState(true); + return alertVisible ? ( + setAlertVisible(false)} severity="warning" title="" className={styles.alertBox}> + Retrieving insights from multiple stacks has performance impact and loading data might take significantly more + time. We recommend to select only specific stacks. + + ) : null; +}; + +const NoDatasourceWarning = () => { + const [alertVisible, setAlertVisible] = useState(true); const docsLink = ( - + documentation ); - const content = isOpenSource ? ( - <> - In order to see insights you need to set up Prometheus, add it to your Grafana instance as a data source, set - FEATURE_PROMETHEUS_EXPORTER_ENABLED environment variable to true and then select your Data source in the dropdown - below. -
-
- <>You can find out more in our {docsLink}. - - ) : ( - <>Find out more about OnCall Insights and Metrics in our {docsLink}. - ); - return alertVisible ? ( - setAlertVisible(false)} severity="info" title=""> - {content} + setAlertVisible(false)} severity="warning" title="" className={styles.alertBox}> + Insights data has missing Prometheus configuration. Open OnCall {docsLink} to see how to setup it. ) : null; -}); +}; -const getAppScene = (config: InsightsConfig) => +const getRootScene = (config: InsightsConfig, variables: ReturnType) => new SceneApp({ pages: [ new SceneAppPage({ title: 'OnCall Insights', url: '/a/grafana-oncall-app/insights', - getScene: () => getRootScene(config), + getScene: () => + new EmbeddedScene({ + $timeRange: new SceneTimeRange({ from: 'now-7d', to: 'now' }), + $variables: new SceneVariableSet({ + variables: Object.values(variables), + }), + controls: [ + new VariableValueSelectors({}), + new SceneControlsSpacer(), + new SceneTimePicker({}), + new SceneRefreshPicker({}), + ], + body: new SceneFlexLayout({ + direction: 'column', + children: [ + new NestedScene({ + title: 'Overview', + canCollapse: true, + isCollapsed: false, + body: new SceneFlexLayout({ + direction: 'column', + children: [ + new SceneFlexLayout({ + height: 200, + children: [ + getTotalAlertGroupsScene(config), + getTotalAlertGroupsByStateScene(config), + getNewAlertGroupsForSelectedPeriodScene(config), + getMTTRScene(config), + getMTTRChangedForPeriodStatScene(config), + ], + }), + new SceneFlexLayout({ + height: 400, + children: [getNewAlertGroupsDuringTimePeriodScene(config)], + }), + new SceneFlexLayout({ + height: 400, + children: [getMTTRChangedForPeriodTimeseriesScene(config)], + }), + ], + }), + }), + new NestedScene({ + title: 'Integrations data', + canCollapse: true, + isCollapsed: false, + body: new SceneFlexLayout({ + height: 400, + children: [getAlertGroupsByIntegrationScene(config), getMTTRByIntegrationScene(config)], + }), + }), + new NestedScene({ + title: 'Notified alert groups by Users (based on all Integrations)', + canCollapse: true, + isCollapsed: false, + body: new SceneFlexLayout({ + direction: 'column', + children: [ + new SceneFlexLayout({ + height: 400, + children: [getNewAlertGroupsNotificationsDuringTimePeriodScene(config)], + }), + new SceneFlexLayout({ + height: 400, + children: [ + getNewAlertGroupsNotificationsInTotalScene(config), + getNewAlertGroupsNotificationsForPeriodTableScene(config), + ], + }), + ], + }), + }), + new NestedScene({ + title: 'Teams data', + canCollapse: true, + isCollapsed: false, + body: new SceneFlexLayout({ + direction: 'column', + children: [ + new SceneFlexLayout({ + height: 400, + children: [getAlertGroupsByTeamScene(config), getMTTRByTeamScene(config)], + }), + ], + }), + }), + ], + }), + }), }), ], }); -const getRootScene = (config: InsightsConfig) => - new EmbeddedScene({ - $timeRange: new SceneTimeRange({ from: 'now-7d', to: 'now' }), - $variables: new SceneVariableSet({ - variables: getVariables(config), - }), - controls: [ - new VariableValueSelectors({}), - new SceneControlsSpacer(), - new SceneTimePicker({}), - new SceneRefreshPicker({}), - ], - body: new SceneFlexLayout({ - direction: 'column', - children: [ - new NestedScene({ - title: 'Overview', - canCollapse: true, - isCollapsed: false, - body: new SceneFlexLayout({ - direction: 'column', - children: [ - new SceneFlexLayout({ - height: 200, - children: [ - getTotalAlertGroupsScene(config), - getTotalAlertGroupsByStateScene(config), - getNewAlertGroupsForSelectedPeriodScene(config), - getMTTRScene(config), - getMTTRChangedForPeriodStatScene(config), - ], - }), - new SceneFlexLayout({ - height: 400, - children: [getNewAlertGroupsDuringTimePeriodScene(config)], - }), - new SceneFlexLayout({ - height: 400, - children: [getMTTRChangedForPeriodTimeseriesScene(config)], - }), - ], - }), - }), - new NestedScene({ - title: 'Integrations data', - canCollapse: true, - isCollapsed: false, - body: new SceneFlexLayout({ - height: 400, - children: [getAlertGroupsByIntegrationScene(config), getMTTRByIntegrationScene(config)], - }), - }), - new NestedScene({ - title: 'Notified alert groups by Users (based on all Integrations)', - canCollapse: true, - isCollapsed: false, - body: new SceneFlexLayout({ - direction: 'column', - children: [ - new SceneFlexLayout({ - height: 400, - children: [getNewAlertGroupsNotificationsDuringTimePeriodScene(config)], - }), - new SceneFlexLayout({ - height: 400, - children: [ - getNewAlertGroupsNotificationsInTotalScene(config), - getNewAlertGroupsNotificationsForPeriodTableScene(config), - ], - }), - ], - }), - }), - new NestedScene({ - title: 'Teams data', - canCollapse: true, - isCollapsed: false, - body: new SceneFlexLayout({ - direction: 'column', - children: [ - new SceneFlexLayout({ - height: 400, - children: [getAlertGroupsByTeamScene(config), getMTTRByTeamScene(config)], - }), - ], - }), - }), - ], - }), - }); - export default Insights; diff --git a/grafana-plugin/src/pages/insights/Insights.types.ts b/grafana-plugin/src/pages/insights/Insights.types.ts index 912585a9..a864862b 100644 --- a/grafana-plugin/src/pages/insights/Insights.types.ts +++ b/grafana-plugin/src/pages/insights/Insights.types.ts @@ -3,4 +3,5 @@ import { DataSourceRef } from '@grafana/schema'; export interface InsightsConfig { isOpenSource: boolean; datasource: DataSourceRef; + stack: string; } diff --git a/grafana-plugin/src/pages/insights/scenes/AlertGroupsByIntegration.tsx b/grafana-plugin/src/pages/insights/scenes/AlertGroupsByIntegration.tsx index 07e2a102..2a660c00 100644 --- a/grafana-plugin/src/pages/insights/scenes/AlertGroupsByIntegration.tsx +++ b/grafana-plugin/src/pages/insights/scenes/AlertGroupsByIntegration.tsx @@ -10,7 +10,7 @@ export default function getAlertGroupsByIntegrationScene({ datasource }: Insight { editorMode: 'code', exemplar: false, - expr: 'sort_desc(max_over_time(sum by(integration) (avg without(pod, instance)($alert_groups_total{slug=~"$instance", team=~"$team", integration=~"$integration"}))[1d:]))', + expr: 'sort_desc(max_over_time(sum by(integration) (avg without(pod, stack)($alert_groups_total{slug=~"$stack", team=~"$team", integration=~"$integration"}))[1d:]))', format: 'table', instant: true, legendFormat: '__auto', diff --git a/grafana-plugin/src/pages/insights/scenes/AlertGroupsByTeam.tsx b/grafana-plugin/src/pages/insights/scenes/AlertGroupsByTeam.tsx index 2df8f305..808a45b7 100644 --- a/grafana-plugin/src/pages/insights/scenes/AlertGroupsByTeam.tsx +++ b/grafana-plugin/src/pages/insights/scenes/AlertGroupsByTeam.tsx @@ -10,7 +10,7 @@ export default function getAlertGroupsByTeamScene({ datasource }: InsightsConfig { editorMode: 'code', exemplar: false, - expr: 'sort_desc(max_over_time(sum by(team) (avg without(pod, instance)($alert_groups_total{slug=~"$instance", team=~"$team", integration=~"$integration"}))[1d:]))', + expr: 'sort_desc(max_over_time(sum by(team) (avg without(pod, stack)($alert_groups_total{slug=~"$stack", team=~"$team", integration=~"$integration"}))[1d:]))', format: 'table', instant: true, legendFormat: '__auto', diff --git a/grafana-plugin/src/pages/insights/scenes/MTTR.tsx b/grafana-plugin/src/pages/insights/scenes/MTTR.tsx index a8849465..0dbec58d 100644 --- a/grafana-plugin/src/pages/insights/scenes/MTTR.tsx +++ b/grafana-plugin/src/pages/insights/scenes/MTTR.tsx @@ -10,7 +10,7 @@ export default function getMTTRScene({ datasource }: InsightsConfig) { { editorMode: 'code', exemplar: false, - expr: 'avg_over_time((sum($alert_groups_response_time_seconds_sum{slug=~"$instance", team=~"$team", integration=~"$integration"}) / sum($alert_groups_response_time_seconds_count{slug=~"$instance", team=~"$team", integration=~"$integration"}))[$__range:])', + expr: 'avg_over_time((sum($alert_groups_response_time_seconds_sum{slug=~"$stack", team=~"$team", integration=~"$integration"}) / sum($alert_groups_response_time_seconds_count{slug=~"$stack", team=~"$team", integration=~"$integration"}))[$__range:])', instant: true, legendFormat: '__auto', range: false, diff --git a/grafana-plugin/src/pages/insights/scenes/MTTRByIntegration.tsx b/grafana-plugin/src/pages/insights/scenes/MTTRByIntegration.tsx index 384a247c..0f93aa7c 100644 --- a/grafana-plugin/src/pages/insights/scenes/MTTRByIntegration.tsx +++ b/grafana-plugin/src/pages/insights/scenes/MTTRByIntegration.tsx @@ -10,7 +10,7 @@ export default function getMTTRByIntegrationScene({ datasource }: InsightsConfig { editorMode: 'code', exemplar: false, - expr: 'sort_desc(avg_over_time((sum by (integration)($alert_groups_response_time_seconds_sum{slug=~"$instance", team=~"$team", integration=~"$integration"}) / sum by (integration)($alert_groups_response_time_seconds_count{slug=~"$instance", team=~"$team", integration=~"$integration"}))[$__range:]))', + expr: 'sort_desc(avg_over_time((sum by (integration)($alert_groups_response_time_seconds_sum{slug=~"$stack", team=~"$team", integration=~"$integration"}) / sum by (integration)($alert_groups_response_time_seconds_count{slug=~"$stack", team=~"$team", integration=~"$integration"}))[$__range:]))', format: 'table', instant: true, legendFormat: '__auto', @@ -35,7 +35,7 @@ export default function getMTTRByIntegrationScene({ datasource }: InsightsConfig cluster: true, container: true, id: true, - instance: true, + stack: true, job: true, namespace: true, org_id: true, diff --git a/grafana-plugin/src/pages/insights/scenes/MTTRByTeam.tsx b/grafana-plugin/src/pages/insights/scenes/MTTRByTeam.tsx index e193546f..2196e9e2 100644 --- a/grafana-plugin/src/pages/insights/scenes/MTTRByTeam.tsx +++ b/grafana-plugin/src/pages/insights/scenes/MTTRByTeam.tsx @@ -10,7 +10,7 @@ export default function getMTTRByTeamScene({ datasource }: InsightsConfig) { { editorMode: 'code', exemplar: false, - expr: 'sort_desc(avg_over_time((sum by(team) ($alert_groups_response_time_seconds_sum{slug=~"$instance", team=~"$team", integration=~"$integration"}) / sum by(team)($alert_groups_response_time_seconds_count{slug=~"$instance", team=~"$team", integration=~"$integration"}))[$__range:]))', + expr: 'sort_desc(avg_over_time((sum by(team) ($alert_groups_response_time_seconds_sum{slug=~"$stack", team=~"$team", integration=~"$integration"}) / sum by(team)($alert_groups_response_time_seconds_count{slug=~"$stack", team=~"$team", integration=~"$integration"}))[$__range:]))', format: 'table', instant: true, legendFormat: '__auto', diff --git a/grafana-plugin/src/pages/insights/scenes/MTTRChangedForPeriodStat.tsx b/grafana-plugin/src/pages/insights/scenes/MTTRChangedForPeriodStat.tsx index 11000fd7..77569394 100644 --- a/grafana-plugin/src/pages/insights/scenes/MTTRChangedForPeriodStat.tsx +++ b/grafana-plugin/src/pages/insights/scenes/MTTRChangedForPeriodStat.tsx @@ -10,7 +10,7 @@ export default function getMTTRChangedForPeriodStatScene({ datasource }: Insight { editorMode: 'code', exemplar: false, - expr: 'avg(sum($alert_groups_response_time_seconds_sum{slug=~"$instance", team=~"$team", integration=~"$integration"}) / sum($alert_groups_response_time_seconds_count{slug=~"$instance", team=~"$team", integration=~"$integration"}))', + expr: 'avg(sum($alert_groups_response_time_seconds_sum{slug=~"$stack", team=~"$team", integration=~"$integration"}) / sum($alert_groups_response_time_seconds_count{slug=~"$stack", team=~"$team", integration=~"$integration"}))', instant: false, legendFormat: '__auto', range: true, diff --git a/grafana-plugin/src/pages/insights/scenes/MTTRChangedForPeriodTimeseries.tsx b/grafana-plugin/src/pages/insights/scenes/MTTRChangedForPeriodTimeseries.tsx index c5f37f2c..a581efa5 100644 --- a/grafana-plugin/src/pages/insights/scenes/MTTRChangedForPeriodTimeseries.tsx +++ b/grafana-plugin/src/pages/insights/scenes/MTTRChangedForPeriodTimeseries.tsx @@ -10,7 +10,7 @@ export default function getMTTRChangedForPeriodTimeseriesScene({ datasource }: I { editorMode: 'code', exemplar: false, - expr: 'avg(sum($alert_groups_response_time_seconds_sum{slug=~"$instance", team=~"$team", integration=~"$integration"}) / sum($alert_groups_response_time_seconds_count{slug=~"$instance", team=~"$team", integration=~"$integration"}))', + expr: 'avg(sum($alert_groups_response_time_seconds_sum{slug=~"$stack", team=~"$team", integration=~"$integration"}) / sum($alert_groups_response_time_seconds_count{slug=~"$stack", team=~"$team", integration=~"$integration"}))', instant: false, legendFormat: '__auto', range: true, diff --git a/grafana-plugin/src/pages/insights/scenes/NewAlertGroupsDuringTimePeriod.tsx b/grafana-plugin/src/pages/insights/scenes/NewAlertGroupsDuringTimePeriod.tsx index 16033da3..9f5314d8 100644 --- a/grafana-plugin/src/pages/insights/scenes/NewAlertGroupsDuringTimePeriod.tsx +++ b/grafana-plugin/src/pages/insights/scenes/NewAlertGroupsDuringTimePeriod.tsx @@ -12,7 +12,7 @@ export default function getNewAlertGroupsDuringTimePeriodScene({ datasource }: I editorMode: 'code', excludeNullMetadata: false, exemplar: false, - expr: 'increase(max_over_time(sum by (integration) (avg without(pod, instance) ($alert_groups_total{slug=~"$instance", team=~"$team", integration=~"$integration"}))[30m:])[1h:])', + expr: 'increase(max_over_time(sum by (integration) (avg without(pod, stack) ($alert_groups_total{slug=~"$stack", team=~"$team", integration=~"$integration"}))[30m:])[1h:])', fullMetaSearch: false, instant: false, legendFormat: '__auto', diff --git a/grafana-plugin/src/pages/insights/scenes/NewAlertGroupsForSelectedPeriod.tsx b/grafana-plugin/src/pages/insights/scenes/NewAlertGroupsForSelectedPeriod.tsx index f38abacb..1eadde1d 100644 --- a/grafana-plugin/src/pages/insights/scenes/NewAlertGroupsForSelectedPeriod.tsx +++ b/grafana-plugin/src/pages/insights/scenes/NewAlertGroupsForSelectedPeriod.tsx @@ -12,7 +12,7 @@ export default function getNewAlertGroupsForSelectedPeriodScene({ datasource }: editorMode: 'code', excludeNullMetadata: false, exemplar: false, - expr: 'increase(max_over_time(sum(avg without(pod, instance) ($alert_groups_total{slug=~"$instance", team=~"$team", integration=~"$integration"}))[1d:])[$__range:])', + expr: 'increase(max_over_time(sum(avg without(pod, stack) ($alert_groups_total{slug=~"$stack", team=~"$team", integration=~"$integration"}))[1d:])[$__range:])', format: 'time_series', fullMetaSearch: false, includeNullMetadata: true, diff --git a/grafana-plugin/src/pages/insights/scenes/NewAlertGroupsNotificationsDuringTimePeriod.tsx b/grafana-plugin/src/pages/insights/scenes/NewAlertGroupsNotificationsDuringTimePeriod.tsx index 328da56b..20a49c37 100644 --- a/grafana-plugin/src/pages/insights/scenes/NewAlertGroupsNotificationsDuringTimePeriod.tsx +++ b/grafana-plugin/src/pages/insights/scenes/NewAlertGroupsNotificationsDuringTimePeriod.tsx @@ -12,7 +12,7 @@ export default function getNewAlertGroupsNotificationsDuringTimePeriodScene({ da editorMode: 'code', excludeNullMetadata: false, exemplar: false, - expr: 'increase(max_over_time(sum by (username) (avg without(pod, instance) ($user_was_notified_of_alert_groups_total{slug=~"$instance"}))[30m:])[1h:])', + expr: 'increase(max_over_time(sum by (username) (avg without(pod, stack) ($user_was_notified_of_alert_groups_total{slug=~"$stack"}))[30m:])[1h:])', fullMetaSearch: false, instant: false, legendFormat: '__auto', diff --git a/grafana-plugin/src/pages/insights/scenes/NewAlertGroupsNotificationsForPeriodTable.tsx b/grafana-plugin/src/pages/insights/scenes/NewAlertGroupsNotificationsForPeriodTable.tsx index b7c4d722..6a0eda34 100644 --- a/grafana-plugin/src/pages/insights/scenes/NewAlertGroupsNotificationsForPeriodTable.tsx +++ b/grafana-plugin/src/pages/insights/scenes/NewAlertGroupsNotificationsForPeriodTable.tsx @@ -10,7 +10,7 @@ export default function getNewAlertGroupsNotificationsForPeriodTableScene({ data { editorMode: 'code', exemplar: false, - expr: 'sort_desc(increase(max_over_time(sum by (username) (avg without(pod, instance) ($user_was_notified_of_alert_groups_total{slug=~"$instance"}))[1h:])[$__range:]))', + expr: 'sort_desc(increase(max_over_time(sum by (username) (avg without(pod, stack) ($user_was_notified_of_alert_groups_total{slug=~"$stack"}))[1h:])[$__range:]))', format: 'table', instant: true, legendFormat: '__auto', diff --git a/grafana-plugin/src/pages/insights/scenes/NewAlertGroupsNotificationsInTotal.tsx b/grafana-plugin/src/pages/insights/scenes/NewAlertGroupsNotificationsInTotal.tsx index 2e6564a6..0b3df846 100644 --- a/grafana-plugin/src/pages/insights/scenes/NewAlertGroupsNotificationsInTotal.tsx +++ b/grafana-plugin/src/pages/insights/scenes/NewAlertGroupsNotificationsInTotal.tsx @@ -10,7 +10,7 @@ export default function getNewAlertGroupsNotificationsInTotalScene({ datasource { editorMode: 'code', exemplar: false, - expr: 'sort_desc(max_over_time(sum by(username) (avg without(pod, instance)($user_was_notified_of_alert_groups_total{slug=~"$instance"}))[1d:]))', + expr: 'sort_desc(max_over_time(sum by(username) (avg without(pod, stack)($user_was_notified_of_alert_groups_total{slug=~"$stack"}))[1d:]))', format: 'table', instant: true, legendFormat: '__auto', diff --git a/grafana-plugin/src/pages/insights/scenes/TotalAlertGroups.tsx b/grafana-plugin/src/pages/insights/scenes/TotalAlertGroups.tsx index ebd3facd..fedf39ff 100644 --- a/grafana-plugin/src/pages/insights/scenes/TotalAlertGroups.tsx +++ b/grafana-plugin/src/pages/insights/scenes/TotalAlertGroups.tsx @@ -12,7 +12,7 @@ export default function getTotalAlertGroupsScene({ datasource }: InsightsConfig) editorMode: 'code', excludeNullMetadata: false, exemplar: false, - expr: 'max_over_time(sum(avg without(pod, instance) ($alert_groups_total{slug=~"$instance", team=~"$team", integration=~"$integration"}))[1d:])', + expr: 'max_over_time(sum(avg without(pod, stack) ($alert_groups_total{slug=~"$stack", team=~"$team", integration=~"$integration"}))[1d:])', format: 'time_series', fullMetaSearch: false, instant: false, diff --git a/grafana-plugin/src/pages/insights/scenes/TotalAlertGroupsByState.tsx b/grafana-plugin/src/pages/insights/scenes/TotalAlertGroupsByState.tsx index 7d36795b..0af04be8 100644 --- a/grafana-plugin/src/pages/insights/scenes/TotalAlertGroupsByState.tsx +++ b/grafana-plugin/src/pages/insights/scenes/TotalAlertGroupsByState.tsx @@ -11,7 +11,7 @@ export default function getTotalAlertGroupsByStateScene({ datasource }: Insights disableTextWrap: false, editorMode: 'code', excludeNullMetadata: false, - expr: 'sum by (state) (avg without(pod, instance) ($alert_groups_total{slug=~"$instance", team=~"$team", integration=~"$integration"}))', + expr: 'sum by (state) (avg without(pod, stack) ($alert_groups_total{slug=~"$stack", team=~"$team", integration=~"$integration"}))', fullMetaSearch: false, legendFormat: '__auto', range: true, diff --git a/grafana-plugin/src/pages/insights/variables.ts b/grafana-plugin/src/pages/insights/variables.ts index 1d121789..f11338ba 100644 --- a/grafana-plugin/src/pages/insights/variables.ts +++ b/grafana-plugin/src/pages/insights/variables.ts @@ -14,24 +14,23 @@ const DEFAULT_VARIABLE_CONFIG: Partial [ +const getVariables = ({ isOpenSource, datasource, stack }: InsightsConfig) => ({ // Selectable ...(isOpenSource - ? [ - new DataSourceVariable({ + ? { + datasource: new DataSourceVariable({ name: 'datasource', label: 'Data source', pluginId: 'prometheus', value: 'grafanacloud-usage', }), - ] - : []), - new QueryVariable({ + } + : {}), + stack: new QueryVariable({ ...DEFAULT_VARIABLE_CONFIG, - name: 'instance', - label: 'Instance', - text: ['All'], - value: ['$__all'], + name: 'stack', + label: 'Stack', + value: stack, datasource, definition: 'label_values(${alert_groups_total},slug)', query: { @@ -39,37 +38,37 @@ const getVariables = ({ isOpenSource, datasource }: InsightsConfig) => [ refId: 'PrometheusVariableQueryEditor-VariableQuery', }, }), - new QueryVariable({ + team: new QueryVariable({ ...DEFAULT_VARIABLE_CONFIG, name: 'team', label: 'Team', text: ['All'], value: ['$__all'], datasource, - definition: 'label_values(${alert_groups_total}{slug=~"$instance"},team)', + definition: 'label_values(${alert_groups_total}{slug=~"$stack"},team)', query: { - query: 'label_values(${alert_groups_total}{slug=~"$instance"},team)', + query: 'label_values(${alert_groups_total}{slug=~"$stack"},team)', refId: 'PrometheusVariableQueryEditor-VariableQuery', }, refresh: 2, }), - new QueryVariable({ + integration: new QueryVariable({ ...DEFAULT_VARIABLE_CONFIG, name: 'integration', label: 'Integration', text: ['All'], value: ['$__all'], datasource, - definition: 'label_values(${alert_groups_total}{team=~"$team",slug=~"$instance"},integration)', + definition: 'label_values(${alert_groups_total}{team=~"$team",slug=~"$stack"},integration)', query: { - query: 'label_values(${alert_groups_total}{team=~"$team",slug=~"$instance"},integration)', + query: 'label_values(${alert_groups_total}{team=~"$team",slug=~"$stack"},integration)', refId: 'PrometheusVariableQueryEditor-VariableQuery', }, refresh: 2, }), // Non-selectable - new QueryVariable({ + alertGroupsTotal: new QueryVariable({ ...DEFAULT_VARIABLE_CONFIG, name: 'alert_groups_total', label: 'alert_groups_total', @@ -78,13 +77,13 @@ const getVariables = ({ isOpenSource, datasource }: InsightsConfig) => [ query: 'metrics(alert_groups_total)', refId: 'PrometheusVariableQueryEditor-VariableQuery', }, - text: ['oncall_alert_groups_total', 'grafanacloud_oncall_instance_alert_groups_total'], - value: ['oncall_alert_groups_total', 'grafanacloud_oncall_instance_alert_groups_total'], + text: ['oncall_alert_groups_total', 'grafanacloud_oncall_stack_alert_groups_total'], + value: ['oncall_alert_groups_total', 'grafanacloud_oncall_stack_alert_groups_total'], definition: 'metrics(alert_groups_total)', hide: 2, includeAll: false, }), - new QueryVariable({ + userNotified: new QueryVariable({ ...DEFAULT_VARIABLE_CONFIG, name: 'user_was_notified_of_alert_groups_total', label: 'user_was_notified_of_alert_groups_total', @@ -97,7 +96,7 @@ const getVariables = ({ isOpenSource, datasource }: InsightsConfig) => [ hide: 2, refresh: 2, }), - new QueryVariable({ + alertGroupsResponseTimeBucket: new QueryVariable({ ...DEFAULT_VARIABLE_CONFIG, name: 'alert_groups_response_time_seconds_bucket', label: 'alert_groups_response_time_seconds_bucket', @@ -109,7 +108,7 @@ const getVariables = ({ isOpenSource, datasource }: InsightsConfig) => [ }, hide: 2, }), - new QueryVariable({ + alertGroupsResponseTimeSum: new QueryVariable({ ...DEFAULT_VARIABLE_CONFIG, name: 'alert_groups_response_time_seconds_sum', label: 'alert_groups_response_time_seconds_sum', @@ -121,7 +120,7 @@ const getVariables = ({ isOpenSource, datasource }: InsightsConfig) => [ }, hide: 2, }), - new QueryVariable({ + alertGroupsResponseTimeCount: new QueryVariable({ ...DEFAULT_VARIABLE_CONFIG, name: 'alert_groups_response_time_seconds_count', label: 'alert_groups_response_time_seconds_count', @@ -133,6 +132,6 @@ const getVariables = ({ isOpenSource, datasource }: InsightsConfig) => [ }, hide: 2, }), -]; +}); export default getVariables;