feat: http integration (#575)

* addtime endpoint * create universal Subscription * add http integration * catch error from HTTP integration emit * unify osc and http validateSubscriptionEntry * add necessary endpoint for http subscription * make subscription part of modal generic * add http subscription to integration modal * remove log * Revert "addtime endpoint" This reverts commit 4c039220dc. * reuse agent and test url compatibility * simplify retun path * add todo in UI * test for http protocol * import not needed yet * lint * fix merge * lint * fix httpPlaceholder * wip: prepare endpoints * wip: temporary fix to get form to work * disable HTTP integration if enabledOut==false * register/unregister http * refactor: subscription types and form register * refactor: validation * cleanup * cleanup * try GOT * allow https * split url and searchParams allow for post option * add options to post * add retry count * fix test * Revert "fix test" This reverts commit 927e88370f. * Revert "add options to post" This reverts commit 0523a68ef4. * Revert "split url and searchParams allow for post option" This reverts commit 54ab8d4ffe. * missing retryCount in httpPlaceholder * remove global this * remove retry count * remove https --------- Co-authored-by: Carlos Valente <carlosvalente@pm.me>
2026-08-20 14:39:06 +00:00 · 2023-12-10 16:56:42 +01:00
parent abe27d54a2
commit 2586b0b10c
37 changed files with 1021 additions and 264 deletions
@@ -5,6 +5,7 @@ export const USERFIELDS = ['userFields'];
 export const RUNDOWN = ['rundown'];
 export const APP_INFO = ['appinfo'];
 export const OSC_SETTINGS = ['oscSettings'];
+export const HTTP_SETTINGS = ['httpSettings'];
 export const APP_SETTINGS = ['appSettings'];
 export const VIEW_SETTINGS = ['viewSettings'];
 export const RUNTIME = ['runtimeStore'];
@@ -3,6 +3,7 @@ import {
  Alias,
  DatabaseModel,
  GetInfo,
+  HttpSettings,
  OntimeRundown,
  OSCSettings,
  OscSubscription,
@@ -104,6 +105,23 @@ export async function getOSC(): Promise<OSCSettings> {
  return res.data;
 }

+/**
+ * @description HTTP request to retrieve http settings
+ * @return {Promise}
+ */
+export async function getHTTP(): Promise<HttpSettings> {
+  const res = await axios.get(`${ontimeURL}/http`);
+  return res.data;
+}
+
+/**
+ * @description HTTP request to mutate http settings
+ * @return {Promise}
+ */
+export async function postHTTP(data: HttpSettings) {
+  return axios.post(`${ontimeURL}/http`, data);
+}
+
 /**
 * @description HTTP request to mutate osc settings
 * @return {Promise}
@@ -0,0 +1,33 @@
+import { useMutation, useQuery } from '@tanstack/react-query';
+import { HttpSettings } from 'ontime-types';
+
+import { queryRefetchIntervalSlow } from '../../ontimeConfig';
+import { HTTP_SETTINGS } from '../api/apiConstants';
+import { logAxiosError } from '../api/apiUtils';
+import { getHTTP, postHTTP } from '../api/ontimeApi';
+import { httpPlaceholder } from '../models/Http';
+import { ontimeQueryClient } from '../queryClient';
+
+export function useHttpSettings() {
+  const { data, status, isFetching, isError, refetch } = useQuery({
+    queryKey: HTTP_SETTINGS,
+    queryFn: getHTTP,
+    placeholderData: httpPlaceholder,
+    retry: 5,
+    retryDelay: (attempt: number) => attempt * 2500,
+    refetchInterval: queryRefetchIntervalSlow,
+    networkMode: 'always',
+  });
+
+  // we need to jump through some hoops because of the type op port
+  return { data: data! as unknown as HttpSettings, status, isFetching, isError, refetch };
+}
+
+export function usePostHttpSettings() {
+  const { isPending, mutateAsync } = useMutation({
+    mutationFn: postHTTP,
+    onError: (error) => logAxiosError('Error saving HTTP settings', error),
+    onSettled: () => ontimeQueryClient.invalidateQueries({ queryKey: HTTP_SETTINGS }),
+  });
+  return { isPending, mutateAsync };
+}
@@ -1,26 +1,13 @@
-export const httpPlaceholder = {
-  onLoad: {
-    url: '',
-    enabled: false,
-  },
-  onStart: {
-    url: '',
-    enabled: false,
-  },
-  onUpdate: {
-    url: '',
-    enabled: false,
-  },
-  onPause: {
-    url: '',
-    enabled: false,
-  },
-  onStop: {
-    url: '',
-    enabled: false,
-  },
-  onFinish: {
-    url: '',
-    enabled: false,
+import { HttpSettings } from 'ontime-types';
+
+export const httpPlaceholder: HttpSettings = {
+  enabledOut: false,
+  subscriptions: {
+    onLoad: [],
+    onStart: [],
+    onUpdate: [],
+    onPause: [],
+    onStop: [],
+    onFinish: [],
  },
 };
@@ -1,4 +1,4 @@
-import { isIPAddress, isOnlyNumbers } from '../regex';
+import { isIPAddress, isOnlyNumbers, startsWithHttp } from '../regex';

 describe('simple tests for regex', () => {
  test('isOnlyNumbers', () => {
@@ -24,4 +24,16 @@ describe('simple tests for regex', () => {
      expect(isIPAddress.test(t)).toBe(false);
    });
  });
+
+  test('startsWithHttp', () => {
+    const right = ['http://test'];
+    const wrong = ['https://test', 'testing', '123.0.1'];
+
+    right.forEach((t) => {
+      expect(startsWithHttp.test(t)).toBe(true);
+    });
+    wrong.forEach((t) => {
+      expect(startsWithHttp.test(t)).toBe(false);
+    });
+  });
 });
@@ -1,2 +1,3 @@
 export const isOnlyNumbers = /^\d+$/;
 export const isIPAddress = /^((25[0-5]|(2[0-4]|1\d|[1-9]|)\d)\.?\b){4}$/;
+export const startsWithHttp = /^http:\/\//;
@@ -2,8 +2,9 @@ import { ModalBody, Tab, TabList, TabPanel, TabPanels, Tabs } from '@chakra-ui/r

 import ModalWrapper from '../ModalWrapper';

-import OscIntegration from './OscIntegration';
-import OscSettings from './OscSettings';
+import HttpIntegration from './http/HttpIntegration';
+import OscIntegration from './osc/OscIntegration';
+import OscSettings from './osc/OscSettings';

 import styles from '../Modal.module.scss';

@@ -30,6 +31,7 @@ export default function IntegrationModal(props: IntegrationModalProps) {
          <TabList>
            <Tab>OSC</Tab>
            <Tab>OSC Integration</Tab>
+            <Tab>HTTP Integration</Tab>
          </TabList>
          <TabPanels>
            <TabPanel>
@@ -38,6 +40,9 @@ export default function IntegrationModal(props: IntegrationModalProps) {
            <TabPanel>
              <OscIntegration />
            </TabPanel>
+            <TabPanel>
+              <HttpIntegration />
+            </TabPanel>
          </TabPanels>
        </Tabs>
      </ModalBody>
@@ -0,0 +1,152 @@
+import { useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { Switch } from '@chakra-ui/react';
+import type { HttpSettings } from 'ontime-types';
+import { TimerLifeCycle } from 'ontime-types';
+
+import { useHttpSettings, usePostHttpSettings } from '../../../../common/hooks-query/useHttpSettings';
+import { useEmitLog } from '../../../../common/stores/logger';
+import ModalLoader from '../../modal-loader/ModalLoader';
+import OntimeModalFooter from '../../OntimeModalFooter';
+import { OntimeCycle, sectionText } from '../integration.utils';
+
+import HttpSubscriptionRow from './HttpSubscriptionRow';
+
+import styles from '../../Modal.module.scss';
+
+export default function HttpIntegration() {
+  const { data, isFetching } = useHttpSettings();
+  const { mutateAsync } = usePostHttpSettings();
+  const { emitError } = useEmitLog();
+  const {
+    control,
+    handleSubmit,
+    register,
+    reset,
+    formState: { isSubmitting, isDirty, isValid },
+  } = useForm<HttpSettings>({
+    mode: 'onBlur',
+    defaultValues: data,
+    values: data,
+    resetOptions: {
+      keepDirtyValues: true,
+    },
+  });
+
+  const [showSection, setShowSection] = useState<OntimeCycle>(TimerLifeCycle.onLoad);
+
+  useEffect(() => {
+    if (data) {
+      reset(data);
+    }
+  }, [data, reset]);
+
+  const resetForm = () => {
+    reset(data);
+  };
+
+  const onSubmit = async (values: HttpSettings) => {
+    try {
+      const newSettings: HttpSettings = {
+        enabledOut: Boolean(values.enabledOut),
+        subscriptions: {
+          onLoad: values.subscriptions.onLoad ?? [],
+          onStart: values.subscriptions.onStart ?? [],
+          onPause: values.subscriptions.onPause ?? [],
+          onStop: values.subscriptions.onStop ?? [],
+          onUpdate: values.subscriptions.onUpdate ?? [],
+          onFinish: values.subscriptions.onFinish ?? [],
+        },
+      };
+
+      await mutateAsync(newSettings);
+    } catch (error) {
+      emitError(`Error setting HTML: ${error}`);
+    }
+  };
+
+  if (isFetching) {
+    return <ModalLoader />;
+  }
+
+  const placeholder = 'http://x.x.x.x:xxxx/api/path';
+  return (
+    <form onSubmit={handleSubmit(onSubmit)} className={styles.sectionContainer} id='http-subscriptions'>
+      <div className={styles.splitSection}>
+        <div>
+          <span className={`${styles.sectionTitle} ${styles.main}`}>HTTP Output</span>
+          <span className={styles.sectionSubtitle}>Ontime data feedback</span>
+        </div>
+        <Switch {...register('enabledOut')} variant='ontime-on-light' />
+      </div>
+
+      <HttpSubscriptionRow
+        cycle={TimerLifeCycle.onLoad}
+        title={sectionText.onLoad.title}
+        subtitle={sectionText.onLoad.subtitle}
+        visible={showSection === TimerLifeCycle.onLoad}
+        setShowSection={setShowSection}
+        register={register}
+        control={control}
+        placeholder={placeholder}
+      />
+      <HttpSubscriptionRow
+        cycle={TimerLifeCycle.onStart}
+        title={sectionText.onStart.title}
+        subtitle={sectionText.onStart.subtitle}
+        visible={showSection === TimerLifeCycle.onStart}
+        setShowSection={setShowSection}
+        register={register}
+        control={control}
+        placeholder={placeholder}
+      />
+      <HttpSubscriptionRow
+        cycle={TimerLifeCycle.onPause}
+        title={sectionText.onPause.title}
+        subtitle={sectionText.onPause.subtitle}
+        visible={showSection === TimerLifeCycle.onPause}
+        setShowSection={setShowSection}
+        register={register}
+        control={control}
+        placeholder={placeholder}
+      />
+      <HttpSubscriptionRow
+        cycle={TimerLifeCycle.onStop}
+        title={sectionText.onStop.title}
+        subtitle={sectionText.onStop.subtitle}
+        visible={showSection === TimerLifeCycle.onStop}
+        setShowSection={setShowSection}
+        register={register}
+        control={control}
+        placeholder={placeholder}
+      />
+      <HttpSubscriptionRow
+        cycle={TimerLifeCycle.onUpdate}
+        title={sectionText.onUpdate.title}
+        subtitle={sectionText.onUpdate.subtitle}
+        visible={showSection === TimerLifeCycle.onUpdate}
+        setShowSection={setShowSection}
+        register={register}
+        control={control}
+        placeholder={placeholder}
+      />
+      <HttpSubscriptionRow
+        cycle={TimerLifeCycle.onFinish}
+        title={sectionText.onFinish.title}
+        subtitle={sectionText.onFinish.subtitle}
+        visible={showSection === TimerLifeCycle.onFinish}
+        setShowSection={setShowSection}
+        register={register}
+        control={control}
+        placeholder={placeholder}
+      />
+      <OntimeModalFooter
+        formId='http-subscriptions'
+        handleRevert={resetForm}
+        isDirty={isDirty}
+        isValid={isValid}
+        isSubmitting={isSubmitting}
+      />
+    </form>
+  );
+}
@@ -0,0 +1,95 @@
+import { Control, useFieldArray, UseFormRegister } from 'react-hook-form';
+import { Button, IconButton, Input, Switch } from '@chakra-ui/react';
+import { FiChevronUp } from '@react-icons/all-files/fi/FiChevronUp';
+import { IoRemove } from '@react-icons/all-files/io5/IoRemove';
+import { HttpSettings, TimerLifeCycle } from 'ontime-types';
+
+import { useEmitLog } from '../../../../common/stores/logger';
+import { startsWithHttp } from '../../../../common/utils/regex';
+
+import collapseStyles from '../../../../common/components/collapse-bar/CollapseBar.module.scss';
+import styles from '../../Modal.module.scss';
+
+interface SubscriptionRowProps {
+  cycle: TimerLifeCycle;
+  title: string;
+  subtitle: string;
+  visible: boolean;
+  setShowSection: (cycle: TimerLifeCycle) => void;
+  register: UseFormRegister<HttpSettings>;
+  control: Control<HttpSettings>;
+  placeholder: string;
+}
+
+export default function SubscriptionRow(props: SubscriptionRowProps) {
+  const { cycle, title, subtitle, visible, setShowSection, register, control, placeholder } = props;
+  const { emitError } = useEmitLog();
+  const { fields, append, remove } = useFieldArray({
+    name: `subscriptions.${cycle}`,
+    control,
+  });
+
+  const hasTooManyOptions = fields.length >= 3;
+  const headerStyle = `${styles.splitSection} ${visible ? '' : styles.showPointer}`;
+
+  const sectionTitle = `${title} ${fields.length ? fields.length : '-'} / 3`;
+
+  const handleAddNew = () => {
+    if (hasTooManyOptions) {
+      emitError(`Maximum amount of ${cycle} subscriptions reached (3)`);
+      return;
+    }
+    append({
+      message: '',
+      enabled: false,
+    });
+  };
+
+  return (
+    <>
+      <div className={headerStyle} onClick={() => setShowSection(cycle)}>
+        <div>
+          <span className={`${styles.sectionTitle} ${styles.main}`}>{sectionTitle}</span>
+          {visible && <span className={styles.sectionSubtitle}>{subtitle}</span>}
+        </div>
+        <FiChevronUp className={visible ? collapseStyles.moreCollapsed : collapseStyles.moreExpanded} />
+      </div>
+      {visible && (
+        <>
+          {fields.map((subscription, index) => (
+            <div key={subscription.id} className={styles.entryRow}>
+              <IconButton
+                icon={<IoRemove />}
+                onClick={() => remove(index)}
+                aria-label='delete'
+                size='xs'
+                colorScheme='red'
+              />
+              <Input
+                placeholder={placeholder}
+                size='xs'
+                variant='ontime-filled-on-light'
+                autoComplete='off'
+                {...register(`subscriptions.${cycle}.${index}.message`, {
+                  pattern: { value: startsWithHttp, message: 'Request address must start with http://' },
+                })}
+              />
+              <Switch variant='ontime-on-light' {...register(`subscriptions.${cycle}.${index}.enabled`)} />
+            </div>
+          ))}
+          <Button
+            onClick={handleAddNew}
+            className={styles.shiftRight}
+            isDisabled={hasTooManyOptions}
+            size='xs'
+            colorScheme='blue'
+            variant='outline'
+            padding='0 2em'
+          >
+            Add new
+          </Button>
+        </>
+      )}
+    </>
+  );
+}
@@ -0,0 +1,30 @@
+import { TimerLifeCycle } from 'ontime-types';
+
+export type OntimeCycle = keyof typeof TimerLifeCycle;
+
+export const sectionText: { [key in TimerLifeCycle]: { title: string; subtitle: string } } = {
+  onLoad: {
+    title: 'On Load',
+    subtitle: 'Triggers when a timer is loaded',
+  },
+  onStart: {
+    title: 'On Start',
+    subtitle: 'Triggers when a timer starts',
+  },
+  onPause: {
+    title: 'On Pause',
+    subtitle: 'Triggers when a running timer is paused',
+  },
+  onStop: {
+    title: 'On Stop',
+    subtitle: 'Triggers when a running timer is stopped',
+  },
+  onUpdate: {
+    title: 'On Every Second',
+    subtitle: 'Triggers when a running timer is updated (at least once a second, can be more)',
+  },
+  onFinish: {
+    title: 'On Finish',
+    subtitle: 'Triggers when a running reaches 0',
+  },
+};
@@ -3,43 +3,15 @@ import { useForm } from 'react-hook-form';
 import type { OscSubscription } from 'ontime-types';
 import { TimerLifeCycle } from 'ontime-types';

-import useOscSettings, { usePostOscSubscriptions } from '../../../common/hooks-query/useOscSettings';
-import { useEmitLog } from '../../../common/stores/logger';
-import ModalLoader from '../modal-loader/ModalLoader';
-import OntimeModalFooter from '../OntimeModalFooter';
+import useOscSettings, { usePostOscSubscriptions } from '../../../../common/hooks-query/useOscSettings';
+import { useEmitLog } from '../../../../common/stores/logger';
+import ModalLoader from '../../modal-loader/ModalLoader';
+import OntimeModalFooter from '../../OntimeModalFooter';
+import { type OntimeCycle, sectionText } from '../integration.utils';

 import OscSubscriptionRow from './OscSubscriptionRow';

-import styles from '../Modal.module.scss';
-
-type OntimeCycle = keyof typeof TimerLifeCycle;
-
-const sectionText: { [key in TimerLifeCycle]: { title: string; subtitle: string } } = {
-  onLoad: {
-    title: 'On Load',
-    subtitle: 'Triggers when a timer is loaded',
-  },
-  onStart: {
-    title: 'On Start',
-    subtitle: 'Triggers when a timer starts',
-  },
-  onPause: {
-    title: 'On Pause',
-    subtitle: 'Triggers when a running timer is paused',
-  },
-  onStop: {
-    title: 'On Stop',
-    subtitle: 'Triggers when a running timer is stopped',
-  },
-  onUpdate: {
-    title: 'On Every Second',
-    subtitle: 'Triggers when a running timer is updated (at least once a second, can be more)',
-  },
-  onFinish: {
-    title: 'On Finish',
-    subtitle: 'Triggers when a running reaches 0',
-  },
-};
+import styles from '../../Modal.module.scss';

 export default function OscIntegration() {
  const { data, isFetching } = useOscSettings();
@@ -92,6 +64,7 @@ export default function OscIntegration() {
    return <ModalLoader />;
  }

+  const placeholder = 'OSC message';
  return (
    <form onSubmit={handleSubmit(onSubmit)} className={styles.sectionContainer} id='osc-subscriptions'>
      <OscSubscriptionRow
@@ -102,6 +75,7 @@ export default function OscIntegration() {
        setShowSection={setShowSection}
        register={register}
        control={control}
+        placeholder={placeholder}
      />
      <OscSubscriptionRow
        cycle={TimerLifeCycle.onStart}
@@ -111,6 +85,7 @@ export default function OscIntegration() {
        setShowSection={setShowSection}
        register={register}
        control={control}
+        placeholder={placeholder}
      />
      <OscSubscriptionRow
        cycle={TimerLifeCycle.onPause}
@@ -120,6 +95,7 @@ export default function OscIntegration() {
        setShowSection={setShowSection}
        register={register}
        control={control}
+        placeholder={placeholder}
      />
      <OscSubscriptionRow
        cycle={TimerLifeCycle.onStop}
@@ -129,6 +105,7 @@ export default function OscIntegration() {
        setShowSection={setShowSection}
        register={register}
        control={control}
+        placeholder={placeholder}
      />
      <OscSubscriptionRow
        cycle={TimerLifeCycle.onUpdate}
@@ -138,6 +115,7 @@ export default function OscIntegration() {
        setShowSection={setShowSection}
        register={register}
        control={control}
+        placeholder={placeholder}
      />
      <OscSubscriptionRow
        cycle={TimerLifeCycle.onFinish}
@@ -147,6 +125,7 @@ export default function OscIntegration() {
        setShowSection={setShowSection}
        register={register}
        control={control}
+        placeholder={placeholder}
      />
      <OntimeModalFooter
        formId='osc-subscriptions'
@@ -4,14 +4,14 @@ import { useEffect } from 'react';
 import { useForm } from 'react-hook-form';
 import { FormControl, Input, Switch } from '@chakra-ui/react';

-import useOscSettings, { useOscSettingsMutation } from '../../../common/hooks-query/useOscSettings';
-import { PlaceholderSettings } from '../../../common/models/OscSettings';
-import { useEmitLog } from '../../../common/stores/logger';
-import { isIPAddress, isOnlyNumbers } from '../../../common/utils/regex';
-import ModalLoader from '../modal-loader/ModalLoader';
-import OntimeModalFooter from '../OntimeModalFooter';
+import useOscSettings, { useOscSettingsMutation } from '../../../../common/hooks-query/useOscSettings';
+import { PlaceholderSettings } from '../../../../common/models/OscSettings';
+import { useEmitLog } from '../../../../common/stores/logger';
+import { isIPAddress, isOnlyNumbers } from '../../../../common/utils/regex';
+import ModalLoader from '../../modal-loader/ModalLoader';
+import OntimeModalFooter from '../../OntimeModalFooter';

-import styles from '../Modal.module.scss';
+import styles from '../../Modal.module.scss';

 export default function OscSettings() {
  const { data, isFetching } = useOscSettings();
@@ -2,12 +2,12 @@ import { Control, useFieldArray, UseFormRegister } from 'react-hook-form';
 import { Button, IconButton, Input, Switch } from '@chakra-ui/react';
 import { FiChevronUp } from '@react-icons/all-files/fi/FiChevronUp';
 import { IoRemove } from '@react-icons/all-files/io5/IoRemove';
-import { OscSubscription, TimerLifeCycle } from 'ontime-types';
+import type { OscSubscription, TimerLifeCycle } from 'ontime-types';

-import { useEmitLog } from '../../../common/stores/logger';
+import { useEmitLog } from '../../../../common/stores/logger';

-import collapseStyles from '../../../common/components/collapse-bar/CollapseBar.module.scss';
-import styles from '../Modal.module.scss';
+import collapseStyles from '../../../../common/components/collapse-bar/CollapseBar.module.scss';
+import styles from '../../Modal.module.scss';

 interface OscSubscriptionRowProps {
  cycle: TimerLifeCycle;
@@ -17,10 +17,11 @@ interface OscSubscriptionRowProps {
  setShowSection: (cycle: TimerLifeCycle) => void;
  register: UseFormRegister<OscSubscription>;
  control: Control<OscSubscription>;
+  placeholder: string;
 }

 export default function OscSubscriptionRow(props: OscSubscriptionRowProps) {
-  const { cycle, title, subtitle, visible, setShowSection, register, control } = props;
+  const { cycle, title, subtitle, visible, setShowSection, register, control, placeholder } = props;
  const { emitError } = useEmitLog();
  const { fields, append, remove } = useFieldArray({
    name: cycle,
@@ -64,7 +65,7 @@ export default function OscSubscriptionRow(props: OscSubscriptionRowProps) {
                colorScheme='red'
              />
              <Input
-                placeholder='OSC Message'
+                placeholder={placeholder}
                size='xs'
                variant='ontime-filled-on-light'
                autoComplete='off'