@things-factory/integration-ui 6.1.52 → 6.1.69

package/client/pages/{scenario-detail.js → scenario-detail.ts}

@@ -2,57 +2,54 @@ import '@operato/data-grist/ox-grist.js'
 
 import gql from 'graphql-tag'
 import { css, html, LitElement } from 'lit'
+import { customElement, property, query, state } from 'lit/decorators.js'
 
+import { DataGrist } from '@operato/data-grist/ox-grist.js'
 import { client } from '@operato/graphql'
 import { HelpDecoratedRenderer } from '@operato/help/help-decorated-renderer.js'
 import { i18next, localize } from '@operato/i18n'
 import { isMobileDevice } from '@operato/utils'
 
+const SelectFields = ['name', 'description', 'sequence', 'task', 'connection', 'params', 'result', 'skip', 'log']
+
+@customElement('scenario-detail')
 class ScenarioDetail extends localize(i18next)(LitElement) {
-  static get properties() {
-    return {
-      scenario: Object,
-      gristConfig: Object,
-      taskTypes: Object
-    }
-  }
+  static styles = [
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
 
-  static get styles() {
-    return [
-      css`
-        :host {
-          display: flex;
-          flex-direction: column;
+        background-color: #fff;
+      }
 
-          background-color: #fff;
-        }
+      ox-grist {
+        flex: 1;
+      }
 
-        ox-grist {
-          flex: 1;
-        }
+      .button-container {
+        display: flex;
+        margin-left: auto;
+        padding: var(--padding-default);
+      }
 
-        .button-container {
-          display: flex;
-          margin-left: auto;
-          padding: var(--padding-default);
-        }
+      form {
+        position: relative;
+      }
+      [danger] {
+        --mdc-theme-primary: var(--mdc-danger-button-primary-color);
+      }
+      mwc-button {
+        margin-left: var(--margin-default);
+      }
+    `
+  ]
 
-        form {
-          position: relative;
-        }
-        [danger] {
-          --mdc-theme-primary: var(--mdc-danger-button-primary-color);
-        }
-        mwc-button {
-          margin-left: var(--margin-default);
-        }
-      `
-    ]
-  }
+  @property({ type: Object }) scenario: any
+  @property({ type: Object }) gristConfig: any
+  @property({ type: Object }) taskTypes: any
 
-  get dataGrist() {
-    return this.renderRoot.querySelector('ox-grist')
-  }
+  @query('ox-grist') grist!: DataGrist
 
   render() {
     return html`
@@ -69,7 +66,6 @@ class ScenarioDetail extends localize(i18next)(LitElement) {
   }
 
   async firstUpdated() {
-    this.select = ['name', 'description', 'sequence', 'task', 'connection', 'params', 'result', 'skip', 'log']
     this.gristConfig = {
       list: { fields: ['name', 'description', 'task'] },
       columns: [
@@ -185,8 +181,8 @@ class ScenarioDetail extends localize(i18next)(LitElement) {
           record: {
             editable: true,
             options: (value, column, record, row, field) => {
-              var { name, parameterSpec: spec, help } = record.task ? this.taskTypes?.[record.task] : {}
-              const context = this.dataGrist
+              var { name, parameterSpec: spec, help } = record.task ? this.taskTypes?.[record.task] : ({} as any)
+              const context = this.grist
               return { name, spec, help, context }
             },
             renderer: 'json5'
@@ -224,7 +220,7 @@ class ScenarioDetail extends localize(i18next)(LitElement) {
           ) {
             items {
               id
-              ${this.select.join('\n')}
+              ${SelectFields.join('\n')}
             }
             total
           }
@@ -265,7 +261,7 @@ class ScenarioDetail extends localize(i18next)(LitElement) {
   }
 
   async _updateSteps() {
-    let patches = this.dataGrist._data.records
+    let patches = this.grist._data.records
     if (patches && patches.length) {
       patches = patches.map(patch => {
         var patchField = {}
@@ -292,19 +288,17 @@ class ScenarioDetail extends localize(i18next)(LitElement) {
       })
 
       if (!response.errors) {
-        this.dataGrist.fetch()
+        this.grist.fetch()
         this.requestRefresh()
       }
     }
   }
 
   async _deleteSteps() {
-    this.dataGrist.deleteSelectedRecords(true)
+    this.grist.deleteSelectedRecords(true)
   }
 
   requestRefresh() {
     this.dispatchEvent(new CustomEvent('requestRefresh'))
   }
 }
-
-window.customElements.define('scenario-detail', ScenarioDetail)

package/client/pages/scenario-importer.ts

@@ -0,0 +1,107 @@
+import '@operato/data-grist'
+
+import gql from 'graphql-tag'
+import { css, html, LitElement } from 'lit'
+import { customElement, property, query, state } from 'lit/decorators.js'
+
+import { client } from '@operato/graphql'
+import { i18next } from '@operato/i18n'
+import { isMobileDevice } from '@operato/utils'
+
+@customElement('scenario-importer')
+export class ScenarioImporter extends LitElement {
+  static styles = [
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+
+        background-color: #fff;
+      }
+      ox-grist {
+        flex: 1;
+      }
+      .button-container {
+        display: flex;
+        margin-left: auto;
+        padding: var(--padding-default);
+      }
+      mwc-button {
+        margin-left: var(--margin-default);
+      }
+    `
+  ]
+
+  @property({ type: Array }) scenarios: any
+  @property({ type: Object }) columns: any = {
+    list: { fields: ['name', 'description'] },
+    pagination: { infinite: true },
+    columns: [
+      {
+        type: 'string',
+        name: 'name',
+        header: i18next.t('field.name'),
+        width: 150
+      },
+      {
+        type: 'string',
+        name: 'type',
+        header: i18next.t('field.type'),
+        width: 100
+      },
+      {
+        type: 'string',
+        name: 'description',
+        header: i18next.t('field.description'),
+        width: 200
+      },
+      {
+        type: 'crontab',
+        name: 'schedule',
+        header: i18next.t('field.schedule'),
+        width: 80
+      },
+      {
+        type: 'string',
+        name: 'timezone',
+        header: i18next.t('field.timezone'),
+        width: 120
+      },
+      {
+        type: 'checkbox',
+        name: 'active',
+        header: i18next.t('field.active'),
+        width: 60
+      }
+    ]
+  }
+
+  render() {
+    return html`
+      <ox-grist
+        .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
+        .config=${this.columns}
+        .data="${{ records: this.scenarios }}"
+      ></ox-grist>
+
+      <div class="button-container">
+        <mwc-button raised @click="${this.save.bind(this)}">${i18next.t('button.save')}</mwc-button>
+      </div>
+    `
+  }
+
+  async save() {
+    const response = await client.mutate({
+      mutation: gql`
+        mutation importScenarios($scenarios: [ScenarioPatch!]!) {
+          importScenarios(scenarios: $scenarios)
+        }
+      `,
+      variables: { scenarios: this.scenarios }
+    })
+
+    if (response.errors?.length) return
+
+    this.dispatchEvent(new CustomEvent('imported'))
+  }
+}

package/client/pages/{scenario.js → scenario.ts}

@@ -4,14 +4,16 @@ import './scenario-importer'
 
 import gql from 'graphql-tag'
 import { css, html } from 'lit'
+import { customElement, property, query, state } from 'lit/decorators.js'
 import moment from 'moment-timezone'
 import { connect } from 'pwa-helpers/connect-mixin'
 
+import { DataGrist } from '@operato/data-grist/ox-grist.js'
 import { client } from '@operato/graphql'
 import { i18next, localize } from '@operato/i18n'
 import { notify, openPopup } from '@operato/layout'
 import { navigate, PageView, store } from '@operato/shell'
-import { CommonButtonStyles, ScrollbarStyles } from '@operato/styles'
+import { CommonButtonStyles, CommonGristStyles, ScrollbarStyles } from '@operato/styles'
 import { isMobileDevice } from '@operato/utils'
 
 const DEFAULT_TZ = Intl.DateTimeFormat().resolvedOptions().timeZone
@@ -21,17 +23,11 @@ function IS_SCENARIO_RUNNING(state) {
   return state && state !== 'UNLOADED'
 }
 
+@customElement('scenario-page')
 export class Scenario extends connect(store)(localize(i18next)(PageView)) {
-  static get properties() {
-    return {
-      active: String,
-      gristConfig: Object,
-      taskTypes: Object
-    }
-  }
-
   static get styles() {
     return [
+      CommonGristStyles,
       ScrollbarStyles,
       css`
         :host {
@@ -61,6 +57,12 @@ export class Scenario extends connect(store)(localize(i18next)(PageView)) {
     ]
   }
 
+  @property({ type: Boolean }) active: boolean = false
+  @property({ type: Object }) gristConfig: any
+  @property({ type: Object }) taskTypes: any
+
+  @query('ox-grist') grist!: DataGrist
+
   get context() {
     return {
       search: {
@@ -119,15 +121,10 @@ export class Scenario extends connect(store)(localize(i18next)(PageView)) {
         .config=${this.gristConfig}
         .fetchHandler=${this.fetchHandler.bind(this)}
       >
-        <div slot="headroom" id="filters"></div>
       </ox-grist>
     `
   }
 
-  get grist() {
-    return this.renderRoot.querySelector('ox-grist')
-  }
-
   async pageInitialized(lifecycle) {
     this.fetchTaskTypes()
 
@@ -251,8 +248,7 @@ export class Scenario extends connect(store)(localize(i18next)(PageView)) {
           record: {
             editable: true
           },
-          width: 110,
-          label: true
+          width: 110
         },
         {
           type: 'select',
@@ -443,10 +439,10 @@ export class Scenario extends connect(store)(localize(i18next)(PageView)) {
   }
 
   async _updateScenario() {
-    let patches = this.grist.dirtyRecords
+    var patches = this.grist.dirtyRecords
     if (patches && patches.length) {
       patches = patches.map(patch => {
-        let patchField = patch.id ? { id: patch.id } : {}
+        let patchField: any = patch.id ? { id: patch.id } : {}
         const dirtyFields = patch.__dirtyfields__
         for (let key in dirtyFields) {
           if (['message', 'step', 'steps', 'progress', 'rounds'].indexOf(key) == -1) {
@@ -617,5 +613,3 @@ export class Scenario extends connect(store)(localize(i18next)(PageView)) {
     )
   }
 }
-
-window.customElements.define('scenario-page', Scenario)

package/client/viewparts/{connections-monitor.js → connections-monitor.ts}

@@ -2,98 +2,94 @@ import '@material/mwc-icon-button'
 
 import gql from 'graphql-tag'
 import { css, html, LitElement } from 'lit'
+import { customElement, property, query } from 'lit/decorators.js'
 
 import { client } from '@operato/graphql'
 import { ScrollbarStyles } from '@operato/styles'
 
+@customElement('connections-monitor')
 export class ConnectionsMonitor extends LitElement {
-  static get styles() {
-    return [
-      ScrollbarStyles,
-      css`
-        :host {
-          display: flex;
-          flex-direction: column;
-
-          overflow: hidden;
-          background-color: var(--theme-white-color);
-          border-radius: var(--border-radius);
-          border: var(--border-dark-color);
-        }
-        h2 {
-          margin: 0;
-          padding: var(--padding-default) 0 var(--padding-default) var(--padding-default);
-          border-bottom: var(--border-dark-color);
-          font: var(--subtitle-font);
-          color: var(--secondary-color);
-          text-transform: capitalize;
-        }
+  static styles = [
+    ScrollbarStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+
+        overflow: hidden;
+        background-color: var(--theme-white-color);
+        border-radius: var(--border-radius);
+        border: var(--border-dark-color);
+      }
+      h2 {
+        margin: 0;
+        padding: var(--padding-default) 0 var(--padding-default) var(--padding-default);
+        border-bottom: var(--border-dark-color);
+        font: var(--subtitle-font);
+        color: var(--secondary-color);
+        text-transform: capitalize;
+      }
 
-        [cards] {
-          flex: 1;
-          display: flex;
-          flex-direction: column;
+      [cards] {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
 
-          overflow: auto;
-        }
+        overflow: auto;
+      }
 
-        [card] {
-          display: flex;
-          flex-direction: column;
-          padding: var(--padding-default);
-          border-bottom: var(--border-dark-color);
-          color: var(--secondary-color);
-        }
-        [card] * {
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-        }
-        [card] strong {
-          color: var(--primary-color);
-        }
-        [card] span {
-          font-size: var(--fontsize-default);
-          line-height: var(--fontsize-large);
-        }
+      [card] {
+        display: flex;
+        flex-direction: column;
+        padding: var(--padding-default);
+        border-bottom: var(--border-dark-color);
+        color: var(--secondary-color);
+      }
+      [card] * {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      [card] strong {
+        color: var(--primary-color);
+      }
+      [card] span {
+        font-size: var(--fontsize-default);
+        line-height: var(--fontsize-large);
+      }
 
-        [connected] strong::after {
-          content: '';
-          display: inline-block;
-          width: 10px;
-          height: 10px;
-          border-radius: 50%;
-          background-color: var(--status-success-color);
-          margin-left: var(--margin-narrow);
-        }
-        [buttons] {
-          --mdc-icon-button-size: 20px;
-          --mdc-icon-size: 20px;
-          border-top: 1px dashed rgba(0, 0, 0, 0.1);
-          margin: var(--margin-narrow) 0 0 0;
-          padding: var(--padding-narrow) 0 0 0;
-          text-align: right;
-        }
-        [buttons] mwc-icon-button {
-          color: rgba(var(--secondary-color-rgb), 0.8);
+      [connected] strong::after {
+        content: '';
+        display: inline-block;
+        width: 10px;
+        height: 10px;
+        border-radius: 50%;
+        background-color: var(--status-success-color);
+        margin-left: var(--margin-narrow);
+      }
+      [buttons] {
+        --mdc-icon-button-size: 20px;
+        --mdc-icon-size: 20px;
+        border-top: 1px dashed rgba(0, 0, 0, 0.1);
+        margin: var(--margin-narrow) 0 0 0;
+        padding: var(--padding-narrow) 0 0 0;
+        text-align: right;
+      }
+      [buttons] mwc-icon-button {
+        color: rgba(var(--secondary-color-rgb), 0.8);
+      }
+      @media screen and (max-width: 480px) {
+        h2 {
+          padding: var(--padding-narrow);
         }
-        @media screen and (max-width: 480px) {
-          h2 {
-            padding: var(--padding-narrow);
-          }
-          [card] span {
-            display: none;
-          }
+        [card] span {
+          display: none;
         }
-      `
-    ]
-  }
+      }
+    `
+  ]
 
-  static get properties() {
-    return {
-      connections: Array
-    }
-  }
+  @property({ type: Array }) connections: any
 
   render() {
     var connections = this.connections || []
@@ -183,5 +179,3 @@ export class ConnectionsMonitor extends LitElement {
     )
   }
 }
-
-customElements.define('connections-monitor', ConnectionsMonitor)

package/client/viewparts/{monitoring-summary.js → monitoring-summary.ts}

@@ -1,81 +1,77 @@
 import '@operato/data-grist'
 
 import { css, html, LitElement } from 'lit'
+import { customElement, property, query } from 'lit/decorators.js'
 
 import { i18next, localize } from '@operato/i18n'
 import { ScrollbarStyles } from '@operato/styles'
 
+@customElement('integration-summary')
 export class IntegrationMonitoringSummary extends localize(i18next)(LitElement) {
-  static get properties() {
-    return {
-      pendings: Array,
-      scenarios: Array,
-      connections: Array
-    }
-  }
+  static styles = [
+    ScrollbarStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: row;
 
-  static get styles() {
-    return [
-      ScrollbarStyles,
-      css`
-        :host {
-          display: flex;
-          flex-direction: row;
+        overflow: hidden;
+        background-color: var(--paper-grey-800);
+        border-radius: var(--border-radius);
+        color: var(--opacity-light-color);
+      }
 
-          overflow: hidden;
-          background-color: var(--paper-grey-800);
-          border-radius: var(--border-radius);
-          color: var(--opacity-light-color);
+      [card] {
+        flex: 1;
+        margin: var(--margin-default);
+        padding: var(--padding-narrow) var(--padding-default);
+        border-right: var(--border-light-color);
+      }
+      :host :last-child {
+        border-right: none;
+      }
+      strong {
+        font-size: 36px;
+        line-height: 30px;
+        color: var(--theme-white-color);
+      }
+      span {
+        display: block;
+        margin-bottom: var(--margin-narrow);
+        font-size: var(--fontsize-small);
+        text-transform: capitalize;
+      }
+      @media screen and (max-width: 480px) {
+        :host {
+          font-size: 0.8em;
         }
-
         [card] {
-          flex: 1;
-          margin: var(--margin-default);
-          padding: var(--padding-narrow) var(--padding-default);
-          border-right: var(--border-light-color);
+          margin: var(--margin-narrow);
+          padding: var(--padding-narrow);
         }
-        :host :last-child {
+        [card]:nth-child(5),
+        [card]:nth-child(6) {
+          display: none;
+        }
+        [card]:nth-child(4) {
           border-right: none;
         }
-        strong {
-          font-size: 36px;
-          line-height: 30px;
-          color: var(--theme-white-color);
+        mwc-icon {
+          font-size: var(--fontsize-large);
         }
         span {
-          display: block;
-          margin-bottom: var(--margin-narrow);
-          font-size: var(--fontsize-small);
-          text-transform: capitalize;
+          line-height: 1;
         }
-        @media screen and (max-width: 480px) {
-          :host {
-            font-size: 0.8em;
-          }
-          [card] {
-            margin: var(--margin-narrow);
-            padding: var(--padding-narrow);
-          }
-          [card]:nth-child(5),
-          [card]:nth-child(6) {
-            display: none;
-          }
-          [card]:nth-child(4) {
-            border-right: none;
-          }
-          mwc-icon {
-            font-size: var(--fontsize-large);
-          }
-          span {
-            line-height: 1;
-          }
-          strong {
-            font-size: 24px;
-          }
+        strong {
+          font-size: 24px;
         }
-      `
-    ]
-  }
+      }
+    `
+  ]
+
+  @property({ type: Array }) pendings: any
+  @property({ type: Array }) scenarios: any
+  @property({ type: Array }) connections: any
 
   render() {
     const now = Date.now()
@@ -134,5 +130,3 @@ export class IntegrationMonitoringSummary extends localize(i18next)(LitElement)
     `
   }
 }
-
-window.customElements.define('integration-summary', IntegrationMonitoringSummary)