feat(webhooks): allow enabling/disabling responders

secutils-dev · Mar 26, 2024 · 1104922 · 1104922
1 parent fae8fcd
commit 1104922
Show file tree

Hide file tree

Showing 5 changed files with 78 additions and 15 deletions.
diff --git a/src/index.tsx b/src/index.tsx
@@ -51,6 +51,7 @@ import { icon as EuiIconListAdd } from '@elastic/eui/es/components/icon/assets/l
 import { icon as EuiIconMinus } from '@elastic/eui/es/components/icon/assets/minus';
 import { icon as EuiIconMinusInCircle } from '@elastic/eui/es/components/icon/assets/minus_in_circle';
 import { icon as EuiIconNode } from '@elastic/eui/es/components/icon/assets/node';
+import { icon as EuiIconOffline } from '@elastic/eui/es/components/icon/assets/offline';
 import { icon as EuiIconPayment } from '@elastic/eui/es/components/icon/assets/payment';
 import { icon as EuiIconPencil } from '@elastic/eui/es/components/icon/assets/pencil';
 import { icon as EuiIconPlusInCircle } from '@elastic/eui/es/components/icon/assets/plus_in_circle';
@@ -134,6 +135,7 @@ appendIconComponentCache({
   minus: EuiIconMinus,
   minusInCircle: EuiIconMinusInCircle,
   node: EuiIconNode,
+  offline: EuiIconOffline,
   payment: EuiIconPayment,
   pencil: EuiIconPencil,
   plusInCircle: EuiIconPlusInCircle,

diff --git a/src/pages/workspace/utils/webhooks/responder.ts b/src/pages/workspace/utils/webhooks/responder.ts
@@ -3,6 +3,7 @@ export interface Responder {
   name: string;
   path: string;
   method: string;
+  enabled: boolean;
   settings: {
     requestsToTrack: number;
     statusCode: number;

diff --git a/src/pages/workspace/utils/webhooks/responder_edit_flyout.tsx b/src/pages/workspace/utils/webhooks/responder_edit_flyout.tsx
@@ -1,6 +1,7 @@
 import type { ChangeEvent } from 'react';
 import { useCallback, useMemo, useState } from 'react';
 
+import type { EuiSwitchEvent } from '@elastic/eui';
 import {
   EuiComboBox,
   EuiDescribedFormGroup,
@@ -10,6 +11,7 @@ import {
   EuiFormRow,
   EuiLink,
   EuiSelect,
+  EuiSwitch,
   EuiTextArea,
 } from '@elastic/eui';
 import axios from 'axios';
@@ -63,6 +65,11 @@ export function ResponderEditFlyout({ onClose, responder }: ResponderEditFlyoutP
     setMethod(e.target.value);
   }, []);
 
+  const [isEnabled, setIsEnabled] = useState<boolean>(responder?.enabled ?? true);
+  const onIsEnabledChange = useCallback((e: EuiSwitchEvent) => {
+    setIsEnabled(e.target.checked);
+  }, []);
+
   const [headers, setHeaders] = useState<Array<{ label: string }>>(
     responder?.settings.headers?.map(([header, value]) => ({ label: `${header}: ${value}` })) ?? [],
   );
@@ -112,6 +119,7 @@ export function ResponderEditFlyout({ onClose, responder }: ResponderEditFlyoutP
       name: responder ? (responder.name !== name ? name.trim() : null) : name.trim(),
       path: responder ? (responder.path !== path ? path.trim() : null) : path.trim(),
       method: responder ? (responder.method !== method ? method : null) : method,
+      enabled: responder ? (responder.enabled !== isEnabled ? isEnabled : null) : isEnabled,
       settings: {
         requestsToTrack,
         statusCode,
@@ -170,7 +178,7 @@ export function ResponderEditFlyout({ onClose, responder }: ResponderEditFlyoutP
         });
       },
     );
-  }, [name, method, path, requestsToTrack, statusCode, body, headers, script, responder, updatingStatus]);
+  }, [name, method, path, isEnabled, requestsToTrack, statusCode, body, headers, script, responder, updatingStatus]);
 
   return (
     <EditorFlyout
@@ -197,6 +205,12 @@ export function ResponderEditFlyout({ onClose, responder }: ResponderEditFlyoutP
               onChange={onRequestsToTrackChange}
             />
           </EuiFormRow>
+          <EuiFormRow
+            label={'Enable'}
+            helpText={'Instructs the responder whether it should process incoming requests or not.'}
+          >
+            <EuiSwitch showLabel={false} label="Enable" checked={isEnabled} onChange={onIsEnabledChange} />
+          </EuiFormRow>
         </EuiDescribedFormGroup>
         <EuiDescribedFormGroup
           title={<h3>Request</h3>}

diff --git a/src/pages/workspace/utils/webhooks/responder_name.tsx b/src/pages/workspace/utils/webhooks/responder_name.tsx
@@ -1,15 +1,30 @@
-import { EuiIcon, EuiText } from '@elastic/eui';
+import { EuiIcon, EuiText, useEuiTheme } from '@elastic/eui';
 
 import type { Responder } from './responder';
 
 export function ResponderName({ responder }: { responder: Responder }) {
-  if (!responder.settings.script) {
+  const theme = useEuiTheme();
+  if (!responder.settings.script && responder.enabled) {
     return responder.name;
   }
 
+  const disabledIcon = <EuiIcon type={'offline'} size="s" title={'Responder is disabled'} />;
+  if (responder.settings.script) {
+    const scriptIcon = <EuiIcon type={'function'} size="s" title={'Responder generates responses dynamically'} />;
+    return responder.enabled ? (
+      <EuiText size="s">
+        {responder.name} {scriptIcon}
+      </EuiText>
+    ) : (
+      <EuiText size="s" color={theme.euiTheme.colors.disabledText}>
+        {responder.name} {scriptIcon} {disabledIcon}
+      </EuiText>
+    );
+  }
+
   return (
-    <EuiText size="s">
-      {responder.name} {<EuiIcon type={'function'} size="s" title={'Responder generates responses dynamically'} />}
+    <EuiText size="s" color={theme.euiTheme.colors.disabledText}>
+      {responder.name} {disabledIcon}
     </EuiText>
   );
 }
diff --git a/src/pages/workspace/utils/webhooks/responders.tsx b/src/pages/workspace/utils/webhooks/responders.tsx
@@ -17,6 +17,7 @@ import {
   EuiSpacer,
   EuiText,
   EuiToolTip,
+  useEuiTheme,
 } from '@elastic/eui';
 import axios from 'axios';
 import { unix } from 'moment';
@@ -30,6 +31,7 @@ import { type AsyncData, getApiRequestConfig, getApiUrl, getErrorMessage } from
 import { useWorkspaceContext } from '../../hooks';
 
 export default function Responders() {
+  const theme = useEuiTheme();
   const { uiState, setTitleActions } = useWorkspaceContext();
 
   const [responders, setResponders] = useState<AsyncData<Responder[]>>({ status: 'pending' });
@@ -243,18 +245,30 @@ export default function Responders() {
             name: 'Method',
             field: 'method',
             width: '100px',
-            render: (_, { method }: Responder) => <b>{method}</b>,
+            render: (_, { enabled, method }: Responder) => (
+              <EuiText size={'s'} color={enabled ? undefined : theme.euiTheme.colors.disabledText}>
+                <b>{method}</b>
+              </EuiText>
+            ),
             sortable: true,
           },
           {
             name: 'Status code',
             field: 'statusCode',
             sortable: true,
             width: '75px',
-            render: (_, { settings }: Responder) => (
+            render: (_, { enabled, settings }: Responder) => (
               <EuiText
                 size={'s'}
-                color={settings.statusCode <= 200 ? '#5cb800' : settings.statusCode < 400 ? '#aea300' : 'danger'}
+                color={
+                  enabled
+                    ? settings.statusCode <= 200
+                      ? '#5cb800'
+                      : settings.statusCode < 400
+                        ? '#aea300'
+                        : 'danger'
+                    : theme.euiTheme.colors.disabledText
+                }
               >
                 <b>{settings.statusCode.toString().toUpperCase()}</b>
               </EuiText>
@@ -265,18 +279,27 @@ export default function Responders() {
             field: 'body',
             width: '50px',
             align: 'center',
-            render: (_, { settings }: Responder) => (
-              <EuiIcon color={settings.body ? '#5cb800' : undefined} type={settings.body ? 'dot' : 'minus'} />
+            render: (_, { enabled, settings }: Responder) => (
+              <EuiIcon
+                color={enabled ? (settings.body ? '#5cb800' : undefined) : theme.euiTheme.colors.disabledText}
+                type={settings.body ? 'dot' : 'minus'}
+              />
             ),
           },
           {
             name: 'Headers',
             field: 'headers',
             width: '50px',
             align: 'center',
-            render: (_, { settings }: Responder) => (
+            render: (_, { enabled, settings }: Responder) => (
               <EuiIcon
-                color={settings.headers && settings.headers.length > 0 ? '#5cb800' : undefined}
+                color={
+                  enabled
+                    ? settings.headers && settings.headers.length > 0
+                      ? '#5cb800'
+                      : undefined
+                    : theme.euiTheme.colors.disabledText
+                }
                 type={settings.headers && settings.headers.length > 0 ? 'dot' : 'minus'}
               />
             ),
@@ -293,12 +316,16 @@ export default function Responders() {
             sortable: true,
             render: (_, responder: Responder) => {
               const url = getResponderUrl(responder);
-              return url ? (
+              return responder.enabled && url ? (
                 <EuiLink href={url} target="_blank">
                   {url}
                 </EuiLink>
+              ) : url ? (
+                <EuiText size={'s'} color={theme.euiTheme.colors.disabledText}>
+                  {url}
+                </EuiText>
               ) : (
-                <EuiIcon type="minus" />
+                <EuiIcon type="minus" color={responder.enabled ? undefined : theme.euiTheme.colors.disabledText} />
               );
             },
           },
@@ -308,7 +335,11 @@ export default function Responders() {
             width: '160px',
             mobileOptions: { width: 'unset' },
             sortable: (responder) => responder.createdAt,
-            render: (_, responder: Responder) => unix(responder.createdAt).format('ll HH:mm'),
+            render: (_, responder: Responder) => (
+              <EuiText size={'s'} color={responder.enabled ? undefined : theme.euiTheme.colors.disabledText}>
+                {unix(responder.createdAt).format('ll HH:mm')}
+              </EuiText>
+            ),
           },
           {
             name: 'Actions',