feat: Enable metric alerts on dev (#140)

* Allow to set alerts for metric charts on development env
* Validation improvements for webhook alerts form (HDX-213)

.changeset/healthy-elephants-give.md

@@ -0,0 +1,5 @@
+---
+'@hyperdx/app': patch
+---
+
+Allow to set alerts for metric charts on development env

packages/app/src/Alert.tsx

@@ -55,28 +55,28 @@ export const SlackChannelForm = ({
 
   return (
     <>
-      {hasSlackWebhooks && (
-        <div className="mt-3">
-          <Form.Label className="text-muted">Slack Webhook</Form.Label>
-          <Form.Select
-            className="bg-black border-0 mb-1 px-3"
-            required
-            id="webhookId"
-            size="sm"
-            {...webhookSelectProps}
-          >
-            {/* Ensure user selects a slack webhook before submitting form */}
-            <option value="" disabled>
-              Select a Slack Webhook
+      <div className="mt-3">
+        <Form.Label className="text-muted">Slack Webhook</Form.Label>
+        <Form.Select
+          className="bg-black border-0 mb-1 px-3"
+          required
+          id="webhookId"
+          size="sm"
+          {...webhookSelectProps}
+        >
+          {/* Ensure user selects a slack webhook before submitting form */}
+          <option value="" disabled selected>
+            {hasSlackWebhooks
+              ? 'Select a Slack Webhook'
+              : 'No Slack Webhooks available'}
+          </option>
+          {slackWebhooks?.data.map((sw: any) => (
+            <option key={sw._id} value={sw._id}>
+              {sw.name}
             </option>
-            {slackWebhooks.data.map((sw: any) => (
-              <option key={sw._id} value={sw._id}>
-                {sw.name}
-              </option>
-            ))}
-          </Form.Select>
-        </div>
-      )}
+          ))}
+        </Form.Select>
+      </div>
 
       <div className="mb-2">
         <a

packages/app/src/EditChartForm.tsx

@@ -21,6 +21,7 @@ import EditChartFormAlerts from './EditChartFormAlerts';
 import HDXNumberChart from './HDXNumberChart';
 import HDXTableChart from './HDXTableChart';
 import { intervalToGranularity } from './Alert';
+import { METRIC_ALERTS_ENABLED } from './config';
 
 export type Chart = {
   id: string;
@@ -867,6 +868,9 @@ export const EditLineChartForm = ({
     return null;
   }
 
+  const isChartAlertsFeatureEnabled =
+    editedChart.series[0].table === 'logs' || METRIC_ALERTS_ENABLED;
+
   return (
     <form
       onSubmit={e => {
@@ -970,7 +974,7 @@ export const EditLineChartForm = ({
         }}
       />
 
-      {editedChart.series[0].table === 'logs' && (
+      {isChartAlertsFeatureEnabled && (
         <div className="mt-4 border-top border-bottom border-grey p-2 py-3">
           {isLocalDashboard ? (
             <span className="text-gray-600 fs-8">

packages/app/src/TeamPage.tsx

@@ -341,6 +341,7 @@ export default function TeamPage() {
                         name="name"
                         placeholder="My Slack Webhook"
                         className="border-0 mb-4 px-3"
+                        required
                       />
                       <Form.Label className="text-start text-muted fs-7 mb-2 mt-2">
                         Webhook URL
@@ -351,6 +352,7 @@ export default function TeamPage() {
                         name="url"
                         placeholder="https://hooks.slack.com/services/T00000000/B00000000/XXXXXXXXXXXXXXXXXXXXXXXX"
                         className="border-0 mb-4 px-3"
+                        required
                       />
                       <Button
                         variant="brand-primary"

packages/app/src/config.ts

@@ -9,3 +9,6 @@ export const HDX_COLLECTOR_URL =
   'http://localhost:4318';
 
 export const IS_OSS = process.env.NEXT_PUBLIC_IS_OSS ?? 'true' === 'true';
+
+// Features in development
+export const METRIC_ALERTS_ENABLED = process.env.NODE_ENV === 'development';