chore: add experimental warnings to multihttp

grafana · Nov 2, 2023 · bdeeca2 · bdeeca2
1 parent a4443f1
commit bdeeca2
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 2 deletions.
diff --git a/src/components/ChooseCheckType.tsx b/src/components/ChooseCheckType.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { GrafanaTheme2, PageLayoutType } from '@grafana/data';
-import { Card, useStyles2 } from '@grafana/ui';
+import { Badge, Card, useStyles2 } from '@grafana/ui';
 import { css } from '@emotion/css';
 
 import { CheckType, FeatureName, ROUTES } from 'types';
@@ -34,7 +34,12 @@ export function ChooseCheckType() {
                 navigate(`${ROUTES.NewCheck}/${check.value}`);
               }}
             >
-              <Card.Heading className={styles.cardsHeader}>{check.label}</Card.Heading>
+              <Card.Heading className={styles.cardsHeader}>
+                {check.label}
+                {check.value === CheckType.MULTI_HTTP ? (
+                  <Badge text="Experimental" color="orange" className={styles.experimentalBadge} />
+                ) : null}
+              </Card.Heading>
               <Card.Description>{check.description}</Card.Description>
             </Card>
           );
@@ -61,4 +66,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
     justify-content: center;
     align-items: flex-start;
   `,
+  experimentalBadge: css`
+    margin-left: ${theme.spacing(1)};
+  `,
 });
diff --git a/src/components/MultiHttp/MultiHttpSettingsForm.tsx b/src/components/MultiHttp/MultiHttpSettingsForm.tsx
@@ -150,6 +150,9 @@ export const MultiHttpSettingsForm = ({ checks, onReturn }: Props) => {
         }}
       >
         {!config.featureToggles.topnav && <Legend>{check?.id ? 'Edit Check' : 'Add MULTIHTTP Check'}</Legend>}
+        <Alert severity="info" title="MultiHTTP checks are experimental">
+          If you experience any issues, please contact support.
+        </Alert>
         <VerticalGroup>
           <FormProvider {...formMethods}>
             <form onSubmit={handleSubmit(onSubmit, onError)} className={styles.form}>