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"