@things-factory/scheduler 8.0.0-beta.9 → 8.0.2

package/client/pages/scheduler/schedule-popup.ts

@@ -0,0 +1,484 @@
+import '@material/web/icon/icon.js'
+import '@material/web/textfield/filled-text-field.js'
+import '@material/web/select/outlined-select.js'
+import '@material/web/checkbox/checkbox.js'
+import '@material/web/button/filled-button.js'
+import '@operato/input/ox-input-data.js'
+import '@operato/input/ox-input-key-values.js'
+
+import { html, css, LitElement, PropertyValues } from 'lit'
+import { customElement, property, query, state } from 'lit/decorators.js'
+import gql from 'graphql-tag'
+
+import { client } from '@operato/graphql'
+import { i18next } from '@operato/i18n'
+import { CommonHeaderStyles, ScrollbarStyles } from '@operato/styles'
+import { notify, openPopup } from '@operato/layout'
+import moment from '@operato/moment-timezone-es'
+
+import { Schedule } from 'types'
+
+function getSystemTimeZone(): string {
+  try {
+    const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone
+    if (!timeZone) {
+      throw new Error('Unable to resolve timeZone')
+    }
+    return timeZone
+  } catch (e) {
+    console.warn('Failed to get system timeZone, falling back to UTC.', e)
+    return 'UTC'
+  }
+}
+
+const DEFAULT_TZ = getSystemTimeZone()
+const TIMEZONE_OPTIONS = ['', DEFAULT_TZ, ...moment.tz.names().filter(tz => tz !== DEFAULT_TZ)]
+
+@customElement('schedule-popup')
+export class NewSchedulePopup extends LitElement {
+  static styles = [
+    ScrollbarStyles,
+    CommonHeaderStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        color: var(--popup-content-color);
+        background-color: var(--popup-content-background-color);
+      }
+
+      [content] {
+        flex: 1;
+        padding: var(--spacing-medium);
+        overflow: auto;
+      }
+
+      label {
+        display: flex;
+        flex-direction: row;
+        gap: 10px;
+        align-items: center;
+      }
+
+      md-filled-button,
+      md-outlined-button {
+        margin-top: 16px;
+      }
+
+      .footer {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+    `
+  ]
+
+  @property({ type: Object }) closeCallback?: (schedule?: Schedule | null) => void
+  @property({ type: String, attribute: 'schedule-id' }) scheduleId?: string
+
+  @state() schedule: Schedule = {}
+
+  @query('form') form!: HTMLFormElement
+
+  render() {
+    const updatable = !!this.scheduleId
+
+    return html`
+      <div content>
+        <form @change=${this.onInputChanged}>
+          <md-filled-text-field
+            label="Name"
+            type="text"
+            id="name"
+            name="name"
+            .value=${this.schedule.name || ''}
+            required
+          ></md-filled-text-field>
+          <br /><br />
+
+          <fieldset>
+            <legend>Client Details</legend>
+            <md-filled-text-field
+              label="Application"
+              type="text"
+              id="application"
+              name="client.application"
+              .value=${this.schedule.client?.application || ''}
+              ?readonly=${updatable}
+              required
+            ></md-filled-text-field>
+            <br /><br />
+
+            <md-filled-text-field
+              label="Group"
+              type="text"
+              id="group"
+              name="client.group"
+              .value=${this.schedule.client?.group || ''}
+              ?readonly=${updatable}
+              required
+            ></md-filled-text-field>
+            <br /><br />
+
+            <md-filled-text-field
+              label="Type"
+              type="text"
+              id="type"
+              name="client.type"
+              .value=${this.schedule.client?.type || ''}
+              ?readonly=${updatable}
+              required
+            ></md-filled-text-field>
+            <br /><br />
+
+            <md-filled-text-field
+              label="Key"
+              type="text"
+              id="key"
+              name="client.key"
+              .value=${this.schedule.client?.key || ''}
+              ?readonly=${updatable}
+              required
+            ></md-filled-text-field>
+            <br /><br />
+
+            <md-filled-text-field
+              label="Operation"
+              type="text"
+              id="operation"
+              name="client.operation"
+              .value=${this.schedule.client?.operation || ''}
+              ?readonly=${updatable}
+              required
+            ></md-filled-text-field>
+          </fieldset>
+          <br />
+
+          <fieldset>
+            <legend>Schedule</legend>
+
+            <md-outlined-select label="Schedule Type" name="type" required>
+              <md-select-option value="now" ?selected=${this.schedule.type === 'now'}>Now</md-select-option>
+              <md-select-option value="delay" ?selected=${this.schedule.type === 'delay'}>Delay</md-select-option>
+              <md-select-option value="date" ?selected=${this.schedule.type === 'date'}>Date</md-select-option>
+              <md-select-option value="cron" ?selected=${this.schedule.type === 'cron'}>Cron</md-select-option>
+              <md-select-option value="delay-recur" ?selected=${this.schedule.type === 'delay-recur'}
+                >Delay-Recur</md-select-option
+              >
+            </md-outlined-select>
+            <br /><br />
+
+            <md-filled-text-field
+              label="Schedule (optional)"
+              type="text"
+              id="schedule"
+              name="schedule"
+              .value=${this.schedule.schedule || ''}
+              @click=${(e: MouseEvent) => {
+                const x = e.target as HTMLInputElement
+                openPopup(
+                  html`
+                    <ox-popup-crontab-input
+                      .value=${x.value}
+                      .confirmCallback=${value => {
+                        x.value = value
+                        x.dispatchEvent(new Event('change', { bubbles: true, cancelable: true }))
+                      }}
+                    ></ox-popup-crontab-input>
+                  `,
+                  {
+                    backdrop: true,
+                    title: i18next.t('title.setting schedule')
+                  }
+                )
+              }}
+            ></md-filled-text-field>
+            <br /><br />
+
+            <md-outlined-select
+              label="Timezone (optional)"
+              id="timezone"
+              name="timezone"
+              .value=${this.schedule.timezone || ''}
+              required
+            >
+              ${TIMEZONE_OPTIONS.map(
+                tz =>
+                  html` <md-select-option value=${tz} ?selected=${this.schedule.timezone === tz}
+                    >${tz}</md-select-option
+                  >`
+              )}
+            </md-outlined-select>
+          </fieldset>
+          <br /><br />
+
+          <fieldset>
+            <legend>Task Details</legend>
+            <md-outlined-select label="Task Type" name="task.type" required>
+              <md-select-option value="rest" ?selected=${this.schedule.task?.type === 'rest'}>REST</md-select-option>
+              <md-select-option value="kafka" ?selected=${this.schedule.task?.type === 'kafka'}>Kafka</md-select-option>
+              <md-select-option value="redis" ?selected=${this.schedule.task?.type === 'redis'}>Redis</md-select-option>
+            </md-outlined-select>
+            <br /><br />
+
+            <md-filled-text-field
+              label="Connection Host"
+              id="connectionHost"
+              name="task.connection.host"
+              .value=${this.schedule.task?.connection?.host || ''}
+              required
+            ></md-filled-text-field>
+            <br /><br />
+
+            <md-filled-text-field
+              label="Connection Topic (optional)"
+              id="connectionTopic"
+              name="task.connection.topic"
+              .value=${this.schedule.task?.connection?.topic || ''}
+            ></md-filled-text-field>
+            <br /><br />
+
+            <fieldset>
+              <legend>Connection Headers (optional)</legend>
+              <ox-input-key-values
+                name="task.connection.headers"
+                .value=${this.schedule.task?.connection?.headers || {}}
+              ></ox-input-key-values>
+            </fieldset>
+            <br /><br />
+
+            <fieldset>
+              <legend>Data (JSON)</legend>
+
+              <ox-input-data name="task.data" .value=${this.schedule.task?.data}> </ox-input-data>
+            </fieldset>
+            <br /><br />
+
+            <label>
+              <md-checkbox
+                type="checkbox"
+                id="historyCheck"
+                name="task.history_check"
+                .checked=${this.schedule.task?.history_check || false}
+              ></md-checkbox
+              >History Check
+            </label>
+            <br /><br />
+
+            <md-outlined-select label="Failed Policy" name="task.failed_policy" required>
+              <md-select-option value="ignore" ?selected=${this.schedule.task?.failed_policy === 'ignore'}
+                >Ignore</md-select-option
+              >
+              <md-select-option value="retry" ?selected=${this.schedule.task?.failed_policy === 'retry'}
+                >Retry</md-select-option
+              >
+              <md-select-option value="retry_dlq" ?selected=${this.schedule.task?.failed_policy === 'retry_dlq'}
+                >Retry DLQ</md-select-option
+              >
+            </md-outlined-select>
+            <br /><br />
+
+            <md-filled-text-field
+              label="Retry Wait (ms)"
+              type="number"
+              id="retryWait"
+              name="task.retry_wait"
+              .valueAsNumber=${this.schedule.task?.retry_wait || 0}
+            ></md-filled-text-field>
+            <br /><br />
+
+            <md-filled-text-field
+              label="Retry Count"
+              type="number"
+              id="retryCount"
+              name="task.retry_count"
+              .valueAsNumber=${this.schedule.task?.retry_count || 0}
+            ></md-filled-text-field>
+            <br /><br />
+
+            <md-filled-text-field
+              label="Max Retry Count"
+              type="number"
+              id="maxRetryCount"
+              name="task.max_retry_count"
+              .valueAsNumber=${this.schedule.task?.max_retry_count || 0}
+            ></md-filled-text-field>
+          </fieldset>
+        </form>
+      </div>
+
+      <div class="footer">
+        <button @click=${this.reset.bind(this)}><md-icon>restart_alt</md-icon>${i18next.t('button.reset')}</button>
+        <div filler></div>
+        <button @click=${this.cancel.bind(this)}><md-icon>cancel</md-icon>${i18next.t('button.cancel')}</button>
+        ${updatable
+          ? html` <button @click=${this.updateSchedule.bind(this)} done>
+              <md-icon>update</md-icon>${i18next.t('button.update')}
+            </button>`
+          : html` <button @click=${this.registerSchedule.bind(this)} done>
+              <md-icon>pending_actions</md-icon>${i18next.t('button.register')}
+            </button>`}
+      </div>
+    `
+  }
+
+  async updated(changes: PropertyValues<this>) {
+    if (changes.has('scheduleId')) {
+      this.schedule = this.scheduleId ? await this.fetchSchedule(this.scheduleId) : {}
+    }
+  }
+
+  private onInputChanged(event: Event) {
+    const target = event.target as HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement
+    const nameParts = target.name.split('.')
+    let current = this.schedule
+
+    for (let i = 0; i < nameParts.length - 1; i++) {
+      const part = nameParts[i]
+      if (!current[part]) {
+        current[part] = {}
+      }
+      current = current[part]
+    }
+
+    const key = nameParts[nameParts.length - 1]
+    current[key] =
+      'checked' in target
+        ? (target as HTMLInputElement).checked
+        : target.type === 'number'
+          ? Number(target.value)
+          : key == 'task.data'
+            ? JSON.parse(target.value)
+            : target.value
+
+    this.requestUpdate()
+  }
+
+  private reset() {
+    this.form.reset()
+  }
+
+  private cancel() {
+    history.back()
+  }
+
+  private prepareSchedule() {
+    this.schedule = {
+      ...this.schedule,
+      client: {
+        application: this.schedule.client?.application || '',
+        group: this.schedule.client?.group || '',
+        type: this.schedule.client?.type || '',
+        key: this.schedule.client?.key || '',
+        operation: this.schedule.client?.operation || ''
+      },
+      task: {
+        ...this.schedule.task,
+        data: this.schedule.task?.data || {},
+        history_check: this.schedule.task?.history_check ?? false,
+        failed_policy: this.schedule.task?.failed_policy || 'ignore',
+        retry_wait: this.schedule.task?.retry_wait || 0,
+        retry_count: this.schedule.task?.retry_count || 0,
+        max_retry_count: this.schedule.task?.max_retry_count || 0,
+        connection: {
+          ...this.schedule.task?.connection,
+          headers: this.schedule.task?.connection?.headers || {}
+        }
+      }
+    }
+  }
+
+  private async registerSchedule() {
+    this.prepareSchedule()
+
+    const { id, ...newSchedule } = this.schedule
+
+    const response = await client.mutate({
+      mutation: gql`
+        mutation ($schedule: NewSchedule!) {
+          handle: registerSchedule(schedule: $schedule)
+        }
+      `,
+      variables: {
+        schedule: newSchedule
+      }
+    })
+
+    if (response.data?.handle) {
+      this.scheduleId = response.data.handle
+
+      notify({
+        message: i18next.t('text.info_x_successfully', { x: i18next.t('text.register') })
+      })
+    }
+  }
+
+  private async updateSchedule() {
+    this.prepareSchedule()
+
+    const response = await client.mutate({
+      mutation: gql`
+        mutation UpdateSchedule($schedule: SchedulePatch!) {
+          handle: updateSchedule(schedule: $schedule)
+        }
+      `,
+      variables: {
+        schedule: this.schedule
+      }
+    })
+
+    if (response.data?.handle) {
+      this.scheduleId = response.data.handle
+
+      notify({
+        message: i18next.t('text.info_x_successfully', { x: i18next.t('text.update') })
+      })
+    }
+  }
+
+  private async fetchSchedule(id: string) {
+    const response = await client.query({
+      query: gql`
+        query ($id: ID!) {
+          schedule(id: $id) {
+            id
+            name
+            client {
+              application
+              group
+              type
+              key
+              operation
+            }
+            type
+            schedule
+            timezone
+            task {
+              type
+              connection {
+                host
+                headers
+                topic
+              }
+              data
+              history_check
+              failed_policy
+              retry_wait
+              retry_count
+              max_retry_count
+            }
+          }
+        }
+      `,
+      variables: {
+        id
+      }
+    })
+
+    if (response.data?.schedule) {
+      console.log(`a schedule fetched : ${response.data.schedule}`)
+
+      return response.data.schedule
+    }
+  }
+}

package/client/route.ts

@@ -0,0 +1,7 @@
+export default function route(page: string) {
+  switch (page) {
+    case 'schedule-list':
+      import('./pages/scheduler/schedule-list-page')
+      return page
+  }
+}

package/client/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "../../tsconfig-base.json",
+  "compilerOptions": {
+    "strict": true,
+    "declaration": true,
+    "module": "esnext",
+    "outDir": "../dist-client",
+    "baseUrl": "./"
+  },
+  "include": ["./**/*"]
+}

package/client/types.ts

@@ -0,0 +1,34 @@
+export interface ScheduleClient {
+  application?: string
+  group?: string
+  type?: string
+  key?: string
+  operation?: string
+}
+
+export interface ScheduleTaskConnection {
+  host?: string
+  headers?: Record<string, string>
+  topic?: string
+}
+
+export interface ScheduleTask {
+  type?: string
+  connection?: ScheduleTaskConnection
+  data?: { [key: string]: any }
+  history_check?: boolean
+  failed_policy?: 'ignore' | 'retry' | 'retry_dlq'
+  retry_wait?: number
+  retry_count?: number
+  max_retry_count?: number
+}
+
+export interface Schedule {
+  id?: string
+  name?: string
+  client?: ScheduleClient
+  type?: 'now' | 'delay' | 'date' | 'cron' | 'delay-recur'
+  schedule?: string
+  timezone?: string
+  task?: ScheduleTask
+}