@things-factory/integration-ui 6.1.66 → 6.1.69

package/client/editors/{things-editor-http-parameters.js → things-editor-http-parameters.ts}

@@ -3,6 +3,7 @@
  */
 
 import { css, html, LitElement } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
 
 /**
 http parameters editor element
@@ -12,61 +13,52 @@ Example:
   <things-editor-http-parameters value=${map}>
   </things-editor-http-parameters>
 */
+@customElement('things-editor-http-parameters')
 export default class ThingsEditorHttpParameters extends LitElement {
-  static get properties() {
-    return {
-      value: Object
-    }
-  }
-
-  static get styles() {
-    return [
-      css`
-        :host {
-          display: flex;
-          flex-direction: column;
-          align-content: center;
-
-          width: 100%;
-          overflow: hidden;
-          border: 1px solid #ccc;
-          margin: 5px 0;
-
-          background-color: #ddd;
-        }
+  static styles = [
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        align-content: center;
+
+        width: 100%;
+        overflow: hidden;
+        border: 1px solid #ccc;
+        margin: 5px 0;
+
+        background-color: #ddd;
+      }
 
-        div {
-          display: flex;
-          flex-flow: row nowrap;
-          align-items: center;
-        }
+      div {
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
+      }
 
-        div > * {
-          min-width: 0px;
-          min-height: 20px;
-          margin: 2px;
-          padding: 0;
-        }
+      div > * {
+        min-width: 0px;
+        min-height: 20px;
+        margin: 2px;
+        padding: 0;
+      }
 
-        button {
-          width: 20px;
-          text-align: center;
-          border-radius: 50%;
-          font-size: 1em;
-        }
+      button {
+        width: 20px;
+        text-align: center;
+        border-radius: 50%;
+        font-size: 1em;
+      }
 
-        input {
-          flex: 1;
-        }
-      `
-    ]
-  }
+      input {
+        flex: 1;
+      }
+    `
+  ]
 
-  constructor() {
-    super()
+  @property({ type: Object }) value: { [key: string]: string } = {}
 
-    this.value = {}
-  }
+  _changingNow: boolean = false
 
   firstUpdated() {
     this.renderRoot.addEventListener('change', this._onChange.bind(this))
@@ -87,7 +79,7 @@ export default class ThingsEditorHttpParameters extends LitElement {
       <div data-record-new>
         <input type="text" data-key placeholder="key" value="" />
         <input type="text" data-value placeholder="value" value="" />
-        <button class="record-action" @click=${e => this._add(e)} tabindex="-1">+</button>
+        <button class="record-action" @click=${e => this._add()} tabindex="-1">+</button>
       </div>
     `
   }
@@ -122,7 +114,7 @@ export default class ThingsEditorHttpParameters extends LitElement {
     this._changingNow = false
   }
 
-  _build(includeNewRecord) {
+  _build(includeNewRecord?) {
     if (includeNewRecord) var records = this.renderRoot.querySelectorAll('[data-record],[data-record-new]')
     else var records = this.renderRoot.querySelectorAll('[data-record]')
 
@@ -131,11 +123,11 @@ export default class ThingsEditorHttpParameters extends LitElement {
     for (var i = 0; i < records.length; i++) {
       var record = records[i]
 
-      var key = record.querySelector('[data-key]').value
+      var key = (record.querySelector('[data-key]') as HTMLInputElement).value
       var inputs = record.querySelectorAll('[data-value]:not([style*="display: none"])')
       if (!inputs || inputs.length == 0) continue
 
-      var input = inputs[inputs.length - 1]
+      var input = inputs[inputs.length - 1] as HTMLInputElement
 
       var value = input.value
 
@@ -148,7 +140,7 @@ export default class ThingsEditorHttpParameters extends LitElement {
 
   /* map아이템들을 template(dom-repeat)용 배열로 변환하는 함수 */
   _toArray(map) {
-    var array = []
+    var array: { key: any; value: any }[] = []
 
     for (var key in map) {
       array.push({
@@ -160,17 +152,17 @@ export default class ThingsEditorHttpParameters extends LitElement {
     return array
   }
 
-  _add(e) {
+  _add() {
     this._build(true)
 
     var inputs = this.renderRoot.querySelectorAll('[data-record-new] input:not([style*="display: none"])')
 
     for (var i = 0; i < inputs.length; i++) {
-      let input = inputs[i]
+      let input = inputs[i] as HTMLInputElement
       input.value = ''
     }
 
-    inputs[0].focus()
+    ;(inputs[0] as HTMLInputElement).focus()
   }
 
   _delete(e) {
@@ -179,5 +171,3 @@ export default class ThingsEditorHttpParameters extends LitElement {
     this._build()
   }
 }
-
-customElements.define('things-editor-http-parameters', ThingsEditorHttpParameters)

package/client/grist/{connection-selector.js → connection-selector.ts}

@@ -1,6 +1,7 @@
 import '@material/mwc-icon'
 
 import gql from 'graphql-tag'
+import { customElement } from 'lit/decorators.js'
 
 import { client } from '@operato/graphql'
 
@@ -19,6 +20,7 @@ const FETCH_CONNECTIONS_GQL = gql`
   }
 `
 
+@customElement('connection-selector')
 export class ConnectionSelector extends DynamicSelector {
   async getOptions() {
     var response = await client.query({
@@ -28,5 +30,3 @@ export class ConnectionSelector extends DynamicSelector {
     return (response && response.data && response.data.connections.items) || []
   }
 }
-
-customElements.define('connection-selector', ConnectionSelector)

package/client/grist/{connector-selector.js → connector-selector.ts}

@@ -1,6 +1,7 @@
 import '@material/mwc-icon'
 
 import gql from 'graphql-tag'
+import { customElement } from 'lit/decorators.js'
 
 import { client } from '@operato/graphql'
 
@@ -19,6 +20,7 @@ const FETCH_CONNECTORS_GQL = gql`
   }
 `
 
+@customElement('connector-selector')
 export class ConnectorSelector extends DynamicSelector {
   async getOptions() {
     var response = await client.query({
@@ -28,5 +30,3 @@ export class ConnectorSelector extends DynamicSelector {
     return (response && response.data && response.data.connectors.items) || []
   }
 }
-
-customElements.define('connector-selector', ConnectorSelector)

package/client/grist/{dynamic-selector.js → dynamic-selector.ts}

@@ -6,24 +6,26 @@ import { html } from 'lit'
 const EMPTY_OPTION = { name: '', value: '' }
 
 export class DynamicSelector extends OxGristEditor {
-  getOptions() {
+  options: any
+
+  async getOptions() {
     return []
   }
 
   async firstUpdated() {
     super.firstUpdated()
 
-    var { options } = this.column.record || {}
+    var { options } = this.column.record || []
 
     if (!options) {
-      var options = await this.getOptions()
-      if (options.unshift) {
-        options.unshift(EMPTY_OPTION)
+      var dynamic: any = await this.getOptions()
+      if (dynamic.unshift) {
+        dynamic.unshift(EMPTY_OPTION)
       } else {
-        options = [EMPTY_OPTION]
+        dynamic = [EMPTY_OPTION]
       }
 
-      this.column.record.options = options
+      this.column.record.options = dynamic
       this.requestUpdate()
     }
   }

package/client/grist/{task-type-selector.js → task-type-selector.ts}

@@ -2,6 +2,7 @@ import { OxGristEditor } from '@operato/data-grist'
 import { client } from '@operato/graphql'
 import gql from 'graphql-tag'
 import { html } from 'lit'
+import { customElement } from 'lit/decorators.js'
 
 const FETCH_TASK_TYPES_GQL = gql`
   query ($connectionName: String!) {
@@ -15,7 +16,10 @@ const FETCH_TASK_TYPES_GQL = gql`
 
 const EMPTY_OPTION = { name: '', value: '' }
 
+@customElement('task-type-selector')
 export class TaskTypeSelector extends OxGristEditor {
+  options: any
+
   async getOptions() {
     var { connectionName = '' } = this.column.record
     if (typeof connectionName === 'function') {
@@ -59,5 +63,3 @@ export class TaskTypeSelector extends OxGristEditor {
     `
   }
 }
-
-customElements.define('task-type-selector', TaskTypeSelector)

package/client/index.ts

@@ -0,0 +1,2 @@
+export * from './pages/scenario.js'
+export * from './pages/connection.js'

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

@@ -1,55 +1,55 @@
-import '@operato/data-grist'
+import '@operato/data-grist/ox-grist.js'
 
 import gql from 'graphql-tag'
 import { css, html } from 'lit'
+import { customElement, property, query } from 'lit/decorators.js'
 import { connect } from 'pwa-helpers/connect-mixin'
 
+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 { PageView, store } from '@operato/shell'
-import { CommonButtonStyles, ScrollbarStyles } from '@operato/styles'
+import { CommonButtonStyles, CommonGristStyles, ScrollbarStyles } from '@operato/styles'
 import { isMobileDevice } from '@operato/utils'
 
+@customElement('connection-page')
 export class Connection extends connect(store)(localize(i18next)(PageView)) {
-  static get properties() {
-    return {
-      active: String,
-      gristConfig: Object,
-      connectors: Object
-    }
-  }
+  static styles = [
+    CommonGristStyles,
+    ScrollbarStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+
+        overflow: hidden;
+      }
 
-  static get styles() {
-    return [
-      ScrollbarStyles,
-      css`
-        :host {
-          display: flex;
-          flex-direction: column;
+      ox-grist {
+        overflow-y: auto;
+        flex: 1;
+      }
 
-          overflow: hidden;
-        }
+      #filters {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
 
-        ox-grist {
-          overflow-y: auto;
-          flex: 1;
-        }
+        background-color: white;
+      }
 
-        #filters {
-          display: flex;
-          flex-direction: row;
-          justify-content: space-between;
+      #filters > * {
+        padding: var(--padding-default) var(--padding-wide);
+      }
+    `
+  ]
 
-          background-color: white;
-        }
+  @property({ type: Boolean }) active: boolean = false
+  @property({ type: Object }) gristConfig: any
+  @property({ type: Object }) connectors: any
 
-        #filters > * {
-          padding: var(--padding-default) var(--padding-wide);
-        }
-      `
-    ]
-  }
+  @query('ox-grist') grist!: DataGrist
 
   get context() {
     return {
@@ -90,15 +90,10 @@ export class Connection 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() {
     this.fetchConnectors()
 
@@ -211,7 +206,7 @@ export class Connection extends connect(store)(localize(i18next)(PageView)) {
           record: {
             editable: true,
             options: async (value, column, record, row, field) => {
-              const { name, help, parameterSpec: spec } = record.type ? this.connectors?.[record.type] : {}
+              const { name, help, parameterSpec: spec } = record.type ? this.connectors?.[record.type] : ({} as any)
               const context = this.grist
               return { name, help, spec, context }
             },
@@ -365,10 +360,11 @@ export class Connection extends connect(store)(localize(i18next)(PageView)) {
   }
 
   async _updateConnectionManager() {
-    let patches = this.grist.dirtyRecords
+    var patches = this.grist.dirtyRecords
+
     if (patches && patches.length) {
       patches = patches.map(connection => {
-        let patchField = connection.id ? { id: connection.id } : {}
+        let patchField: any = connection.id ? { id: connection.id } : {}
         const dirtyFields = connection.__dirtyfields__
         for (let key in dirtyFields) {
           patchField[key] = dirtyFields[key].after
@@ -455,5 +451,3 @@ export class Connection extends connect(store)(localize(i18next)(PageView)) {
     )
   }
 }
-
-window.customElements.define('connection-page', Connection)

package/client/pages/{integration-monitor.js → integration-monitor.ts}

@@ -5,6 +5,7 @@ import '../viewparts/connections-monitor'
 
 import gql from 'graphql-tag'
 import { css, html } from 'lit'
+import { customElement, property, query } from 'lit/decorators.js'
 
 import { client, subscribe } from '@operato/graphql'
 import { i18next, localize } from '@operato/i18n'
@@ -30,74 +31,73 @@ function toColor(string) {
   return color
 }
 
+@customElement('integration-monitor')
 export class IntegrationMonitor extends localize(i18next)(PageView) {
   static ScenarioInstanceStatus = ['READY', 'STARTED', 'STOPPED', 'HALTED']
 
-  static get properties() {
-    return {
-      scenarios: Array,
-      pendings: Array,
-      connections: Array,
-      colorIndex: Object
-    }
-  }
+  static styles = [
+    ScrollbarStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
 
-  static get styles() {
-    return [
-      ScrollbarStyles,
-      css`
-        :host {
-          display: flex;
-          flex-direction: column;
+        overflow: hidden;
+        background-color: var(--main-section-background-color);
+        padding: var(--padding-wide);
+      }
 
-          overflow: hidden;
-          background-color: var(--main-section-background-color);
-          padding: var(--padding-wide);
-        }
+      integration-summary {
+        margin-bottom: var(--margin-wide);
+      }
 
+      content {
+        flex: 1;
+        display: flex;
+        flex-direction: row;
+
+        overflow: hidden;
+      }
+
+      connections-monitor {
+        width: 180px;
+      }
+
+      scenarios-monitor {
+        flex: 1;
+        margin: 0 var(--margin-wide) 0 0;
+      }
+
+      @media screen and (max-width: 480px) {
+        :host {
+          padding: var(--padding-default);
+        }
         integration-summary {
-          margin-bottom: var(--margin-wide);
+          margin-bottom: var(--margin-default);
         }
-
         content {
-          flex: 1;
-          display: flex;
-          flex-direction: row;
-
-          overflow: hidden;
+          display: block;
+          overflow: auto;
+        }
+        scenarios-monitor {
+          min-height: 350px;
+          margin: 0 0 var(--margin-default) 0;
         }
-
         connections-monitor {
-          width: 180px;
+          width: initial;
         }
+      }
+    `
+  ]
 
-        scenarios-monitor {
-          flex: 1;
-          margin: 0 var(--margin-wide) 0 0;
-        }
+  @property({ type: Array }) scenarios: any
+  @property({ type: Array }) pendings: any
+  @property({ type: Array }) connections: any
+  @property({ type: Object }) colorIndex: any
 
-        @media screen and (max-width: 480px) {
-          :host {
-            padding: var(--padding-default);
-          }
-          integration-summary {
-            margin-bottom: var(--margin-default);
-          }
-          content {
-            display: block;
-            overflow: auto;
-          }
-          scenarios-monitor {
-            min-height: 350px;
-            margin: 0 0 var(--margin-default) 0;
-          }
-          connections-monitor {
-            width: initial;
-          }
-        }
-      `
-    ]
-  }
+  scenarioInstanceStateSubscription: any
+  scenarioQueueStateSubscription: any
+  connectionStateSubscription: any
 
   get context() {
     return {
@@ -359,5 +359,3 @@ export class IntegrationMonitor extends localize(i18next)(PageView) {
     delete this.connectionStateSubscription
   }
 }
-
-window.customElements.define('integration-monitor', IntegrationMonitor)