mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Alerting: Adds visual component for feature toggles (#63621)
This commit is contained in:
Gilles De Mey
GitHub
parent
91d2df59fc
commit
09fdbb69ec
@ -375,6 +375,7 @@
|
||||
"react-dom": "17.0.2",
|
||||
"react-draggable": "4.4.5",
|
||||
"react-dropzone": "^14.2.3",
|
||||
"react-enable": "^3.0.1",
|
||||
"react-grid-layout": "1.3.4",
|
||||
"react-highlight-words": "0.20.0",
|
||||
"react-hook-form": "7.5.3",
|
||||
|
||||
@ -1,18 +1,40 @@
|
||||
import React from 'react';
|
||||
import Mousetrap from 'mousetrap';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Features, ToggleFeatures } from 'react-enable';
|
||||
|
||||
import { NavModelItem } from '@grafana/data';
|
||||
import { Page } from 'app/core/components/Page/Page';
|
||||
|
||||
import FEATURES from '../features';
|
||||
|
||||
interface Props {
|
||||
pageId: string;
|
||||
isLoading?: boolean;
|
||||
pageNav?: NavModelItem;
|
||||
}
|
||||
|
||||
const SHOW_TOGGLES_KEY_COMBO = 'ctrl+1';
|
||||
const combokeys = new Mousetrap(document.body);
|
||||
|
||||
export const AlertingPageWrapper = ({ children, pageId, pageNav, isLoading }: React.PropsWithChildren<Props>) => {
|
||||
const [showFeatureToggle, setShowFeatureToggles] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
combokeys.bind(SHOW_TOGGLES_KEY_COMBO, () => {
|
||||
setShowFeatureToggles((show) => !show);
|
||||
});
|
||||
|
||||
return () => {
|
||||
combokeys.unbind(SHOW_TOGGLES_KEY_COMBO);
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Page pageNav={pageNav} navId={pageId}>
|
||||
<Page.Contents isLoading={isLoading}>{children}</Page.Contents>
|
||||
</Page>
|
||||
<Features features={FEATURES}>
|
||||
<Page pageNav={pageNav} navId={pageId}>
|
||||
<Page.Contents isLoading={isLoading}>{children}</Page.Contents>
|
||||
</Page>
|
||||
{showFeatureToggle ? <ToggleFeatures defaultOpen={true} /> : null}
|
||||
</Features>
|
||||
);
|
||||
};
|
||||
|
||||
10
public/app/features/alerting/unified/features.ts
Normal file
10
public/app/features/alerting/unified/features.ts
Normal file
@ -0,0 +1,10 @@
|
||||
import { FeatureDescription } from 'react-enable/dist/FeatureState';
|
||||
|
||||
const FEATURES: FeatureDescription[] = [
|
||||
{
|
||||
name: 'notification-policies.v2.matching-instances',
|
||||
defaultValue: false,
|
||||
},
|
||||
];
|
||||
|
||||
export default FEATURES;
|
||||
74
yarn.lock
74
yarn.lock
@ -5422,6 +5422,18 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@headlessui/react@npm:^1.5.0":
|
||||
version: 1.7.11
|
||||
resolution: "@headlessui/react@npm:1.7.11"
|
||||
dependencies:
|
||||
client-only: ^0.0.1
|
||||
peerDependencies:
|
||||
react: ^16 || ^17 || ^18
|
||||
react-dom: ^16 || ^17 || ^18
|
||||
checksum: 3c9abbc5eaf039fccd309b34269aad761f518c4863e482afddf47579384243ecc0d7b69ecd2f05997e4e079237efa8846c568f5ed8d32df358814a239600de1f
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@humanwhocodes/config-array@npm:^0.11.6":
|
||||
version: 0.11.7
|
||||
resolution: "@humanwhocodes/config-array@npm:0.11.7"
|
||||
@ -13022,6 +13034,25 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@xstate/react@npm:^3.0.0":
|
||||
version: 3.2.1
|
||||
resolution: "@xstate/react@npm:3.2.1"
|
||||
dependencies:
|
||||
use-isomorphic-layout-effect: ^1.0.0
|
||||
use-sync-external-store: ^1.0.0
|
||||
peerDependencies:
|
||||
"@xstate/fsm": ^2.0.0
|
||||
react: ^16.8.0 || ^17.0.0 || ^18.0.0
|
||||
xstate: ^4.36.0
|
||||
peerDependenciesMeta:
|
||||
"@xstate/fsm":
|
||||
optional: true
|
||||
xstate:
|
||||
optional: true
|
||||
checksum: f3b4816b1ed7128254d53a0b03cfa53d928a2efda9180364eb22e6b36660fc3b39bcc6d77843a40874551cf9c89fc597d371ad923997d85a66005d340805feef
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@xtuc/ieee754@npm:^1.2.0":
|
||||
version: 1.2.0
|
||||
resolution: "@xtuc/ieee754@npm:1.2.0"
|
||||
@ -15807,6 +15838,13 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"client-only@npm:^0.0.1":
|
||||
version: 0.0.1
|
||||
resolution: "client-only@npm:0.0.1"
|
||||
checksum: 0c16bf660dadb90610553c1d8946a7fdfb81d624adea073b8440b7d795d5b5b08beb3c950c6a2cf16279365a3265158a236876d92bce16423c485c322d7dfaf8
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"cliui@npm:^7.0.2":
|
||||
version: 7.0.4
|
||||
resolution: "cliui@npm:7.0.4"
|
||||
@ -22106,6 +22144,7 @@ __metadata:
|
||||
react-dom: 17.0.2
|
||||
react-draggable: 4.4.5
|
||||
react-dropzone: ^14.2.3
|
||||
react-enable: ^3.0.1
|
||||
react-grid-layout: 1.3.4
|
||||
react-highlight-words: 0.20.0
|
||||
react-hook-form: 7.5.3
|
||||
@ -32625,6 +32664,21 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"react-enable@npm:^3.0.1":
|
||||
version: 3.0.1
|
||||
resolution: "react-enable@npm:3.0.1"
|
||||
dependencies:
|
||||
"@headlessui/react": ^1.5.0
|
||||
"@xstate/react": ^3.0.0
|
||||
tslib: ^1.14.1
|
||||
xstate: ^4.31.0
|
||||
peerDependencies:
|
||||
react: ^17 || ^18
|
||||
react-dom: ^17 || ^18
|
||||
checksum: 1426b2433785eab34054b82594c085772a8ce334e71ca8d49d4171cd3f37dc8d5273e4717f1c70efb1411ef89220a4bba156a9fae5c6eb2a9a80c178307567f4
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"react-error-boundary@npm:^3.1.0":
|
||||
version: 3.1.3
|
||||
resolution: "react-error-boundary@npm:3.1.3"
|
||||
@ -37426,7 +37480,7 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"tslib@npm:^1.10.0, tslib@npm:^1.8.1, tslib@npm:^1.9.3":
|
||||
"tslib@npm:^1.10.0, tslib@npm:^1.14.1, tslib@npm:^1.8.1, tslib@npm:^1.9.3":
|
||||
version: 1.14.1
|
||||
resolution: "tslib@npm:1.14.1"
|
||||
checksum: dbe628ef87f66691d5d2959b3e41b9ca0045c3ee3c7c7b906cc1e328b39f199bb1ad9e671c39025bd56122ac57dfbf7385a94843b1cc07c60a4db74795829acd
|
||||
@ -38192,7 +38246,7 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"use-isomorphic-layout-effect@npm:^1.1.2":
|
||||
"use-isomorphic-layout-effect@npm:^1.0.0, use-isomorphic-layout-effect@npm:^1.1.2":
|
||||
version: 1.1.2
|
||||
resolution: "use-isomorphic-layout-effect@npm:1.1.2"
|
||||
peerDependencies:
|
||||
@ -38213,6 +38267,15 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"use-sync-external-store@npm:^1.0.0":
|
||||
version: 1.2.0
|
||||
resolution: "use-sync-external-store@npm:1.2.0"
|
||||
peerDependencies:
|
||||
react: ^16.8.0 || ^17.0.0 || ^18.0.0
|
||||
checksum: 5c639e0f8da3521d605f59ce5be9e094ca772bd44a4ce7322b055a6f58eeed8dda3c94cabd90c7a41fb6fa852210092008afe48f7038792fd47501f33299116a
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"use@npm:^3.1.0":
|
||||
version: 3.1.1
|
||||
resolution: "use@npm:3.1.1"
|
||||
@ -39588,6 +39651,13 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"xstate@npm:^4.31.0":
|
||||
version: 4.36.0
|
||||
resolution: "xstate@npm:4.36.0"
|
||||
checksum: c8c4c7bb02b0a1f402dc967ce29489551457f0bb5e021328b4cddf34d7eb6b66ad5c131003d33808f5a9ef2cbd2f6ae31ac5904314ee5e6adc7616589b746310
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"xtend@npm:^4.0.0, xtend@npm:^4.0.1, xtend@npm:~4.0.0, xtend@npm:~4.0.1":
|
||||
version: 4.0.2
|
||||
resolution: "xtend@npm:4.0.2"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user