diff --git a/package.json b/package.json
index ade481a7d..2706a1c07 100644
--- a/package.json
+++ b/package.json
@@ -104,6 +104,7 @@
"@grafana/faro-web-sdk": "1.3.6",
"@grafana/runtime": "11.5.1",
"@grafana/scenes": "5.1.0",
+ "@grafana/scenes-react": "6.0.2",
"@grafana/schema": "11.5.1",
"@grafana/ui": "11.5.1",
"@hookform/resolvers": "3.3.4",
diff --git a/src/page/SceneHomepage.tsx b/src/page/SceneHomepage.tsx
index 1b06aee37..6c0ea98f6 100644
--- a/src/page/SceneHomepage.tsx
+++ b/src/page/SceneHomepage.tsx
@@ -1,5 +1,7 @@
import React, { useMemo } from 'react';
+import { Route, Routes } from 'react-router-dom-v5-compat';
import { SceneApp, SceneAppPage } from '@grafana/scenes';
+import { CustomVariable, SceneContextProvider } from '@grafana/scenes-react';
import { LoadingPlaceholder } from '@grafana/ui';
import { DashboardSceneAppConfig } from 'types';
@@ -10,6 +12,7 @@ import { useLogsDS } from 'hooks/useLogsDS';
import { useMetricsDS } from 'hooks/useMetricsDS';
import { useSMDS } from 'hooks/useSMDS';
import { getSummaryScene } from 'scenes/Summary';
+import { Summary } from 'scenes/Summary/Summary';
export const SceneHomepage = () => {
const smDS = useSMDS();
@@ -42,5 +45,14 @@ export const SceneHomepage = () => {
return ;
}
- return ;
+ return (
+
+
+
+
+
+
+ );
+
+ //return ;
};
diff --git a/src/scenes/Summary/Summary.tsx b/src/scenes/Summary/Summary.tsx
new file mode 100644
index 000000000..97af1cb3e
--- /dev/null
+++ b/src/scenes/Summary/Summary.tsx
@@ -0,0 +1,95 @@
+import React from 'react';
+import { GrafanaTheme2 } from '@grafana/data';
+import { PluginPage } from '@grafana/runtime';
+import { VizConfigBuilders } from '@grafana/scenes';
+import { QueryVariable, useQueryRunner, VizPanel } from '@grafana/scenes-react';
+import { VariableRefresh } from '@grafana/schema';
+import { useStyles2 } from '@grafana/ui';
+
+import { useMetricsDS } from 'hooks/useMetricsDS';
+
+export const Summary = () => {
+ const styles = useStyles2(getStyles);
+ const metricsDS = useMetricsDS();
+
+ const queries = [
+ {
+ expr: `
+ (
+ sum(
+ rate(probe_all_duration_seconds_sum{probe=~"$probe"}[$__rate_interval])
+ * on (instance, job, probe, config_version) group_left max(sm_check_info{check_name=~"$check_type", region=~"$region", $Filters})
+ by (instance, job, probe, config_version)
+ )
+ by (job, instance)
+ )
+ /
+ (
+ sum(
+ rate(probe_all_duration_seconds_count{probe=~"$probe"}[$__rate_interval])
+ * on (instance, job, probe, config_version) group_left max(sm_check_info{check_name=~"$check_type", region=~"$region", $Filters})
+ by (instance, job, probe, config_version)
+ )
+ by (job, instance)
+ )
+ `,
+ hide: false,
+ interval: '1m',
+ legendFormat: '{{job}}/{{ instance }}',
+ refId: 'A',
+ uid: metricsDS?.uid,
+ },
+ ];
+
+ const dataProvider = useQueryRunner({
+ queries,
+ cacheKey: [queries],
+ });
+
+ const plainGraph = VizConfigBuilders.timeseries().setCustomFieldConfig('fillOpacity', 6).build();
+
+ return (
+
+ Summary page
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+const getStyles = (theme: GrafanaTheme2) => ({
+ display: 'grid',
+ flexGrow: 1,
+ gridTemplateColumns: 'repeat(auto-fit, minmax(400px, 1fr))',
+ gridAutoRows: '320px',
+ columnGap: `8px`,
+ rowGap: `8px`,
+});
diff --git a/yarn.lock b/yarn.lock
index d1c16fd49..9e43155d3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -864,12 +864,21 @@
"@floating-ui/utils" "^0.2.9"
tabbable "^6.0.0"
+"@floating-ui/react@^0.26.16":
+ version "0.26.28"
+ resolved "https://registry.yarnpkg.com/@floating-ui/react/-/react-0.26.28.tgz#93f44ebaeb02409312e9df9507e83aab4a8c0dc7"
+ integrity sha512-yORQuuAtVpiRjpMhdc0wJj06b9JFjrYF4qp96j++v2NBpbi6SEGF7donUJ3TMieerQ6qVkAv1tgr7L4r5roTqw==
+ dependencies:
+ "@floating-ui/react-dom" "^2.1.2"
+ "@floating-ui/utils" "^0.2.8"
+ tabbable "^6.0.0"
+
"@floating-ui/utils@^0.2.0":
version "0.2.2"
resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.2.2.tgz#d8bae93ac8b815b2bd7a98078cf91e2724ef11e5"
integrity sha512-J4yDIIthosAsRZ5CPYP/jQvUAQtlZTTD/4suA08/FEnlxqW3sKS9iAhgsa9VYLZ6vDHn/ixJgIqRQPotoBjxIw==
-"@floating-ui/utils@^0.2.9":
+"@floating-ui/utils@^0.2.8", "@floating-ui/utils@^0.2.9":
version "0.2.9"
resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.2.9.tgz#50dea3616bc8191fb8e112283b49eaff03e78429"
integrity sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg==
@@ -1018,6 +1027,15 @@
rxjs "7.8.1"
tslib "2.8.1"
+"@grafana/scenes-react@6.0.2":
+ version "6.0.2"
+ resolved "https://registry.yarnpkg.com/@grafana/scenes-react/-/scenes-react-6.0.2.tgz#1e6b461db3d5f4e3327c44095bd0c3843a445297"
+ integrity sha512-AFIlwhfR/1X1Ga47/AbnolqvyVMCJn76T6g3RWMQl7VeEX8tGQKbdd66KeGJ7TLtYXb6+WDAUUcCyyoNBLz+hg==
+ dependencies:
+ "@grafana/scenes" "6.0.2"
+ lru-cache "^10.2.2"
+ react-use "^17.4.0"
+
"@grafana/scenes@5.1.0":
version "5.1.0"
resolved "https://registry.yarnpkg.com/@grafana/scenes/-/scenes-5.1.0.tgz#6878555302d8ef44d25619963dbd508f41de6ef0"
@@ -1030,6 +1048,19 @@
react-virtualized-auto-sizer "1.0.24"
uuid "^9.0.0"
+"@grafana/scenes@6.0.2":
+ version "6.0.2"
+ resolved "https://registry.yarnpkg.com/@grafana/scenes/-/scenes-6.0.2.tgz#d9f1102a0b008392c176fca7ea03a37e53c47c6c"
+ integrity sha512-FIPHR/oYlgALTDfnfl0EOPNzLgmcvTU7BOws6i09qFYrZ+ZKLFNWXeLw/Q1HGT2jQsy6e8+IVsAxjOOL/Ga1Wg==
+ dependencies:
+ "@floating-ui/react" "^0.26.16"
+ "@leeoniya/ufuzzy" "^1.0.16"
+ "@tanstack/react-virtual" "^3.9.0"
+ react-grid-layout "1.3.4"
+ react-use "17.5.0"
+ react-virtualized-auto-sizer "1.0.24"
+ uuid "^9.0.0"
+
"@grafana/schema@11.5.1":
version "11.5.1"
resolved "https://registry.yarnpkg.com/@grafana/schema/-/schema-11.5.1.tgz#fff0e3207f13187a90bfef839971afa7d84cf08d"
@@ -1492,7 +1523,7 @@
"@jridgewell/resolve-uri" "^3.1.0"
"@jridgewell/sourcemap-codec" "^1.4.14"
-"@leeoniya/ufuzzy@1.0.18":
+"@leeoniya/ufuzzy@1.0.18", "@leeoniya/ufuzzy@^1.0.16":
version "1.0.18"
resolved "https://registry.yarnpkg.com/@leeoniya/ufuzzy/-/ufuzzy-1.0.18.tgz#98e38c1308208bd47524aa2c53da0fe33dbbdab8"
integrity sha512-5D54A86/VaPvJVf7UWJgy+UyhDtstUxq0iQd8UOZ2TG3NjV2oSoa9m4qW3VsotDD6dH2SNHDQwSPq+IAuudnag==
@@ -2401,11 +2432,23 @@
dependencies:
"@tanstack/virtual-core" "3.10.9"
+"@tanstack/react-virtual@^3.9.0":
+ version "3.13.0"
+ resolved "https://registry.yarnpkg.com/@tanstack/react-virtual/-/react-virtual-3.13.0.tgz#f50bccdfbb792cb11fdc0342fd3ec6945c730389"
+ integrity sha512-CchF0NlLIowiM2GxtsoKBkXA4uqSnY2KvnXo+kyUFD4a4ll6+J0qzoRsUPMwXV/H26lRsxgJIr/YmjYum2oEjg==
+ dependencies:
+ "@tanstack/virtual-core" "3.13.0"
+
"@tanstack/virtual-core@3.10.9":
version "3.10.9"
resolved "https://registry.yarnpkg.com/@tanstack/virtual-core/-/virtual-core-3.10.9.tgz#55710c92b311fdaa8d8c66682a0dbdd684bc77c4"
integrity sha512-kBknKOKzmeR7lN+vSadaKWXaLS0SZZG+oqpQ/k80Q6g9REn6zRHS/ZYdrIzHnpHgy/eWs00SujveUN/GJT2qTw==
+"@tanstack/virtual-core@3.13.0":
+ version "3.13.0"
+ resolved "https://registry.yarnpkg.com/@tanstack/virtual-core/-/virtual-core-3.13.0.tgz#8db0ccc9d6c32b6393551a6d19c87dbb259a8828"
+ integrity sha512-NBKJP3OIdmZY3COJdWkSonr50FMVIi+aj5ZJ7hI/DTpEKg2RMfo/KvP8A3B/zOSpMgIe52B5E2yn7rryULzA6g==
+
"@testing-library/dom@^10.0.0":
version "10.1.0"
resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-10.1.0.tgz#2d073e49771ad614da999ca48f199919e5176fb6"
@@ -8442,6 +8485,11 @@ lru-cache@^10.0.0, lru-cache@^10.2.0:
resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-10.2.2.tgz#48206bc114c1252940c41b25b41af5b545aca878"
integrity sha512-9hp3Vp2/hFQUiIwKo8XCeFVnrg8Pk3TYNPIR7tJADKi5YfcF7vEaK7avFHTlSy3kOKYaJQaalfEo6YuXdceBOQ==
+lru-cache@^10.2.2:
+ version "10.4.3"
+ resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-10.4.3.tgz#410fc8a17b70e598013df257c2446b7f3383f119"
+ integrity sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==
+
lru-cache@^5.1.1:
version "5.1.1"
resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-5.1.1.tgz#1da27e6710271947695daf6848e847f01d84b920"
@@ -10226,7 +10274,7 @@ react-use@17.5.0:
ts-easing "^0.2.0"
tslib "^2.1.0"
-react-use@17.6.0:
+react-use@17.6.0, react-use@^17.4.0:
version "17.6.0"
resolved "https://registry.yarnpkg.com/react-use/-/react-use-17.6.0.tgz#2101a3a79dc965a25866b21f5d6de4b128488a14"
integrity sha512-OmedEScUMKFfzn1Ir8dBxiLLSOzhKe/dPZwVxcujweSj45aNM7BEGPb9BEVIgVEqEXx6f3/TsXzwIktNgUR02g==
@@ -11172,16 +11220,7 @@ string-template@~0.2.1:
resolved "https://registry.yarnpkg.com/string-template/-/string-template-0.2.1.tgz#42932e598a352d01fc22ec3367d9d84eec6c9add"
integrity sha512-Yptehjogou2xm4UJbxJ4CxgZx12HBfeystp0y3x7s4Dj32ltVVG1Gg8YhKjHZkHicuKpZX/ffilA8505VbUbpw==
-"string-width-cjs@npm:string-width@^4.2.0":
- version "4.2.3"
- resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
- integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
- dependencies:
- emoji-regex "^8.0.0"
- is-fullwidth-code-point "^3.0.0"
- strip-ansi "^6.0.1"
-
-string-width@^4.0.0, string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.2, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.0.0, string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.2, string-width@^4.2.3:
version "4.2.3"
resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -11264,14 +11303,7 @@ string_decoder@~1.1.1:
dependencies:
safe-buffer "~5.1.0"
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
- version "6.0.1"
- resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
- integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
- dependencies:
- ansi-regex "^5.0.1"
-
-strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
version "6.0.1"
resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -12354,7 +12386,7 @@ wordwrap@^1.0.0:
resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb"
integrity sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
version "7.0.0"
resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -12372,15 +12404,6 @@ wrap-ansi@^6.0.1:
string-width "^4.1.0"
strip-ansi "^6.0.0"
-wrap-ansi@^7.0.0:
- version "7.0.0"
- resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
- integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
- dependencies:
- ansi-styles "^4.0.0"
- string-width "^4.1.0"
- strip-ansi "^6.0.0"
-
wrap-ansi@^8.1.0:
version "8.1.0"
resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"