chore: add check usage to the scripted check types

grafana · Apr 25, 2024 · 2900b01 · 2900b01
1 parent dc338ef
commit 2900b01
Show file tree

Hide file tree

Showing 8 changed files with 41 additions and 28 deletions.
diff --git a/src/components/CheckForm/FormLayouts/CheckDNSLayout.tsx b/src/components/CheckForm/FormLayouts/CheckDNSLayout.tsx
@@ -27,7 +27,7 @@ export const CheckDNSLayout = ({ formActions, onSubmit, onSubmitError }: CheckFo
         <CheckTarget checkType={CheckType.DNS} />
       </FormLayout.Section>
       <FormLayout.Section label="Probes" fields={[`probes`, `frequency`, `timeout`]}>
-        <CheckUsage />
+        <CheckUsage checkType={CheckType.DNS} />
         <CheckPublishedAdvanceMetrics />
         <ProbeOptions checkType={CheckType.DNS} />
       </FormLayout.Section>

diff --git a/src/components/CheckForm/FormLayouts/CheckHttpLayout.tsx b/src/components/CheckForm/FormLayouts/CheckHttpLayout.tsx
@@ -35,7 +35,7 @@ export const CheckHTTPLayout = ({ formActions, onSubmit, onSubmitError }: CheckF
         <CheckEnabled />
       </FormLayout.Section>
       <FormLayout.Section label="Probes" fields={[`probes`, `frequency`, `timeout`]} required>
-        <CheckUsage />
+        <CheckUsage checkType={CheckType.HTTP} />
         <CheckPublishedAdvanceMetrics />
         <ProbeOptions checkType={CheckType.HTTP} />
       </FormLayout.Section>

diff --git a/src/components/CheckForm/FormLayouts/CheckMultiHttpLayout.tsx b/src/components/CheckForm/FormLayouts/CheckMultiHttpLayout.tsx
@@ -10,6 +10,7 @@ import { MultiHttpCheckRequests } from 'components/CheckEditor/FormComponents/Mu
 import { ProbeOptions } from 'components/CheckEditor/ProbeOptions';
 import { FormLayout } from 'components/CheckForm/FormLayout/FormLayout';
 import { CheckFormAlert } from 'components/CheckFormAlert';
+import { CheckUsage } from 'components/CheckUsage';
 import { LabelField } from 'components/LabelField';
 import { MultiHttpFeedbackAlert } from 'components/MultiHttp/MultiHttpFeedbackAlert';
 
@@ -25,6 +26,7 @@ export const CheckMultiHTTPLayout = ({ formActions, onSubmit, onSubmitError }: C
         <LabelField<CheckFormValuesMultiHttp> labelDestination="check" />
       </FormLayout.Section>
       <FormLayout.Section label="Probes" fields={[`probes`, `frequency`, `timeout`]} required>
+        <CheckUsage checkType={CheckType.MULTI_HTTP} />
         <ProbeOptions checkType={CheckType.MULTI_HTTP} />
       </FormLayout.Section>
       <FormLayout.Section

diff --git a/src/components/CheckForm/FormLayouts/CheckPingLayout.tsx b/src/components/CheckForm/FormLayouts/CheckPingLayout.tsx
@@ -22,7 +22,7 @@ export const CheckPingLayout = ({ formActions, onSubmit, onSubmitError }: CheckF
         <CheckTarget checkType={CheckType.PING} />
       </FormLayout.Section>
       <FormLayout.Section label="Probes" fields={[`probes`, `frequency`, `timeout`]} required>
-        <CheckUsage />
+        <CheckUsage checkType={CheckType.PING} />
         <CheckPublishedAdvanceMetrics />
         <ProbeOptions checkType={CheckType.PING} />
       </FormLayout.Section>

diff --git a/src/components/CheckForm/FormLayouts/CheckScriptedLayout.tsx b/src/components/CheckForm/FormLayouts/CheckScriptedLayout.tsx
@@ -26,7 +26,7 @@ export const CheckScriptedLayout = ({ formActions, onSubmit, onSubmitError }: Ch
         <LabelField<CheckFormValuesScripted> labelDestination="check" />
       </FormLayout.Section>
       <FormLayout.Section label="Probes" fields={[`probes`, `frequency`, `timeout`]} required>
-        <CheckUsage />
+        <CheckUsage checkType={CheckType.Scripted} />
         <ProbeOptions checkType={CheckType.Scripted} />
       </FormLayout.Section>
       <FormLayout.Section

diff --git a/src/components/CheckForm/FormLayouts/CheckTCPLayout.tsx b/src/components/CheckForm/FormLayouts/CheckTCPLayout.tsx
@@ -24,7 +24,7 @@ export const CheckTCPLayout = ({ formActions, onSubmit, onSubmitError }: CheckFo
         <CheckTarget checkType={CheckType.TCP} />
       </FormLayout.Section>
       <FormLayout.Section label="Probes" fields={[`probes`, `frequency`, `timeout`, `publishAdvancedMetrics`]} required>
-        <CheckUsage />
+        <CheckUsage checkType={CheckType.TCP} />
         <CheckPublishedAdvanceMetrics />
         <ProbeOptions checkType={CheckType.TCP} />
       </FormLayout.Section>

diff --git a/src/components/CheckForm/FormLayouts/CheckTracerouteLayout.tsx b/src/components/CheckForm/FormLayouts/CheckTracerouteLayout.tsx
@@ -23,7 +23,7 @@ export const CheckTracerouteLayout = ({ formActions, onSubmit, onSubmitError }:
         <CheckTarget checkType={CheckType.Traceroute} />
       </FormLayout.Section>
       <FormLayout.Section label="Probes" fields={[`probes`, `frequency`, `timeout`]} required>
-        <CheckUsage />
+        <CheckUsage checkType={CheckType.Traceroute} />
         <CheckPublishedAdvanceMetrics />
         <ProbeOptions checkType={CheckType.Traceroute} />
       </FormLayout.Section>

diff --git a/src/components/CheckUsage.tsx b/src/components/CheckUsage.tsx
@@ -4,7 +4,7 @@ import { GrafanaTheme2 } from '@grafana/data';
 import { Icon, Label, useStyles2 } from '@grafana/ui';
 import { css } from '@emotion/css';
 
-import { CheckFormValues } from 'types';
+import { CheckFormValues, CheckType } from 'types';
 import { checkFormValuesToUsageCalcValues } from 'utils';
 import { useUsageCalc } from 'hooks/useUsageCalc';
 
@@ -31,12 +31,16 @@ const getStyles = (theme: GrafanaTheme2) => ({
   }),
 });
 
-export const CheckUsage = () => {
+const hideTelemetryForTypes = [CheckType.Scripted, CheckType.MULTI_HTTP];
+
+export const CheckUsage = ({ checkType }: { checkType: CheckType }) => {
   const styles = useStyles2(getStyles);
   const { watch } = useFormContext<CheckFormValues>();
   const checkFormValues = watch();
   const usage = useUsageCalc([checkFormValuesToUsageCalcValues(checkFormValues)]);
 
+  const hideTelemetry = hideTelemetryForTypes.includes(checkType);
+
   if (!usage) {
     return null;
   }
@@ -45,14 +49,16 @@ export const CheckUsage = () => {
     <div className={styles.container}>
       <Label
         description={
-          <a
-            href="https://grafana.com/docs/grafana-cloud/fundamentals/active-series-and-dpm/"
-            className={styles.link}
-            target="_blank"
-            rel="noopenner noreferrer"
-          >
-            Learn more about active series and data points per minute
-          </a>
+          !hideTelemetry && (
+            <a
+              href="https://grafana.com/docs/grafana-cloud/fundamentals/active-series-and-dpm/"
+              className={styles.link}
+              target="_blank"
+              rel="noopenner noreferrer"
+            >
+              Learn more about active series and data points per minute
+            </a>
+          )
         }
       >
         Approximate expected usage for this check
@@ -62,18 +68,23 @@ export const CheckUsage = () => {
           <Icon className={styles.icon} name="calendar-alt" />
           Checks per month: <strong className={styles.value}>{usage.checksPerMonth.toLocaleString()}</strong>
         </div>
-        <div className={styles.section}>
-          <Icon className={styles.icon} name="chart-line" />
-          Active series: <strong className={styles.value}>{usage.activeSeries.toLocaleString()}</strong>
-        </div>
-        <div className={styles.section}>
-          <Icon className={styles.icon} name="clock-nine" />
-          Data points per minute : <strong className={styles.value}>{usage.dpm.toLocaleString()}</strong>
-        </div>
-        <div className={styles.section}>
-          <Icon className={styles.icon} name="database" />
-          Log usage per month (GB): <strong className={styles.value}>{usage.logsGbPerMonth.toLocaleString()}</strong>
-        </div>
+        {!hideTelemetry && (
+          <>
+            <div className={styles.section}>
+              <Icon className={styles.icon} name="chart-line" />
+              Active series: <strong className={styles.value}>{usage.activeSeries.toLocaleString()}</strong>
+            </div>
+            <div className={styles.section}>
+              <Icon className={styles.icon} name="clock-nine" />
+              Data points per minute : <strong className={styles.value}>{usage.dpm.toLocaleString()}</strong>
+            </div>
+            <div className={styles.section}>
+              <Icon className={styles.icon} name="database" />
+              Log usage per month (GB):{' '}
+              <strong className={styles.value}>{usage.logsGbPerMonth.toLocaleString()}</strong>
+            </div>
+          </>
+        )}
       </div>
     </div>
   );