@things-factory/integration-ui 7.0.0-alpha.0 → 7.0.0-alpha.13

package/client/editors/things-editor-oracle-procedure.ts

@@ -286,13 +286,7 @@ export class ThingsEditorProcedureParameters extends OxFormField {
       accessor: accessor && String(accessor).trim()
     } as ProcedureParameterType
 
-    if (
-      dir != 'In' &&
-      (type == 'String' || type == 'Buffer') &&
-      maxSize !== null &&
-      maxSize !== undefined &&
-      !isNaN(maxSize)
-    ) {
+    if (dir != 'In' && (type == 'String' || type == 'Buffer') && maxSize !== null && maxSize !== undefined && !isNaN(maxSize)) {
       entry.maxSize = maxSize
     }
 
@@ -322,9 +316,7 @@ export class ThingsEditorProcedureParameters extends OxFormField {
       const accessor = (record.querySelector('[data-accessor]') as HTMLInputElement).value
       const maxSize = (record.querySelector('[data-max-size]') as HTMLInputElement).valueAsNumber
 
-      const inputs = record.querySelectorAll(
-        '[data-type]:not([style*="display: none"])'
-      ) as NodeListOf<HTMLInputElement>
+      const inputs = record.querySelectorAll('[data-type]:not([style*="display: none"])') as NodeListOf<HTMLInputElement>
 
       if (!inputs || inputs.length == 0) {
         continue
@@ -354,9 +346,7 @@ export class ThingsEditorProcedureParameters extends OxFormField {
   _add() {
     this._build(true)
 
-    const inputs = this.renderRoot.querySelectorAll(
-      '[data-record-new] input:not([style*="display: none"])'
-    ) as NodeListOf<HTMLInputElement & { value: any }>
+    const inputs = this.renderRoot.querySelectorAll('[data-record-new] input:not([style*="display: none"])') as NodeListOf<HTMLInputElement & { value: any }>
 
     for (var i = 0; i < inputs.length; i++) {
       let input = inputs[i]
@@ -418,9 +408,10 @@ export class ThingsEditorProcedureParameters extends OxFormField {
       const dir = (record.querySelector('[data-dir]') as HTMLInputElement).value
       const type = (record.querySelector('[data-type]') as HTMLInputElement).value
       const val = (record.querySelector('[data-val]') as HTMLInputElement).value
+      const accessor = (record.querySelector('[data-accessor]') as HTMLInputElement).value
       const maxSize = (record.querySelector('[data-max-size]') as HTMLInputElement).valueAsNumber
 
-      return this._adjust({ name, dir, type, val, maxSize })
+      return this._adjust({ name, dir, type, val, accessor, maxSize })
     })
 
     this._updateValue()

package/client/pages/integration-monitor.ts

@@ -9,7 +9,7 @@ import { customElement, property, query } from 'lit/decorators.js'
 
 import { client, subscribe } from '@operato/graphql'
 import { i18next, localize } from '@operato/i18n'
-import { PageView } from '@operato/shell'
+import { PageView, InheritedValueType } from '@operato/shell'
 import { ScrollbarStyles } from '@operato/styles'
 
 function IS_SCENARIO_RUNNING(state) {
@@ -108,18 +108,9 @@ export class IntegrationMonitor extends localize(i18next)(PageView) {
 
   render() {
     return html`
-      <integration-summary
-        .pendings=${this.pendings}
-        .scenarios=${this.scenarios}
-        .connections=${this.connections}
-      ></integration-summary>
+      <integration-summary .pendings=${this.pendings} .scenarios=${this.scenarios} .connections=${this.connections}></integration-summary>
       <content>
-        <scenarios-monitor
-          .scenarios=${this.scenarios}
-          .pendings=${this.pendings}
-          .colorIndex=${this.colorIndex || {}}
-          .running=${!!this.active}
-        ></scenarios-monitor>
+        <scenarios-monitor .scenarios=${this.scenarios} .pendings=${this.pendings} .colorIndex=${this.colorIndex || {}} .running=${!!this.active}></scenarios-monitor>
         <connections-monitor .connections=${this.connections}></connections-monitor>
       </content>
     `
@@ -140,8 +131,8 @@ export class IntegrationMonitor extends localize(i18next)(PageView) {
   async fetchScenarios() {
     const response = await client.query({
       query: gql`
-        query {
-          responses: scenarios {
+        query ($inherited: InheritedValueType) {
+          responses: scenarios(inherited: $inherited) {
             items {
               id
               name
@@ -173,7 +164,10 @@ export class IntegrationMonitor extends localize(i18next)(PageView) {
             total
           }
         }
-      `
+      `,
+      variables: {
+        inherited: InheritedValueType.Include
+      }
     })
 
     var colorIndex = {}

package/client/viewparts/scenario-instance-log-view.ts

@@ -1,5 +1,8 @@
+import '@material/mwc-fab'
+
 import gql from 'graphql-tag'
-import { css, html, LitElement } from 'lit'
+
+import { css, html, LitElement, nothing } from 'lit'
 import { customElement, property, query } from 'lit/decorators.js'
 import { connect } from 'pwa-helpers/connect-mixin'
 
@@ -44,12 +47,20 @@ export class ScenarioInstanceLogView extends connect(store)(LitElement) {
       span {
         color: var(--secondary-text-color);
       }
+
+      #start {
+        position: absolute;
+        bottom: 15px;
+        right: 16px;
+        text-decoration: auto;
+      }
     `
   ]
 
   @property({ type: String }) scenarioName?: string
   @property({ type: String }) instanceName?: string
   @property({ type: Array }) logs: any
+  @property({ type: Boolean }) startable: boolean = false
 
   subscription: any
 
@@ -70,14 +81,10 @@ export class ScenarioInstanceLogView extends connect(store)(LitElement) {
       <div options></div>
       <div content>
         ${logs.map(
-          ({ timestamp, message, level }) =>
-            html`
-              <div class="${level}">
-                <span>${new Date(timestamp).toLocaleString()}</span> <strong>${level}</strong> ${message}
-              </div>
-            `
+          ({ timestamp, message, level }) => html` <div class="${level}"><span>${new Date(timestamp).toLocaleString()}</span> <strong>${level}</strong> ${message}</div> `
         )}
       </div>
+      ${this.startable ? html`<mwc-fab id="start" icon="play_arrow" title="start" @click=${() => this.dispatchEvent(new CustomEvent('start'))}> </mwc-fab>` : nothing}
     `
   }
 

package/client/viewparts/scenario-instance-monitor.ts

@@ -112,10 +112,7 @@ export class ScenarioInstanceMonitor extends localize(i18next)(LitElement) {
       <div buttons>
         <span><strong>${rounds}</strong> round</span>
         <mwc-icon-button @click=${e => this.showInstanceDetail()} icon="wysiwyg"></mwc-icon-button>
-        <mwc-icon-button
-          @click=${e => (running ? this.stopScenario(instance) : this.startScenario(instance))}
-          icon=${running ? 'pause' : 'play_arrow'}
-        ></mwc-icon-button>
+        <mwc-icon-button @click=${e => (running ? this.stopScenario(instance) : this.startScenario(instance))} icon=${running ? 'pause' : 'play_arrow'}></mwc-icon-button>
       </div>
     `
   }
@@ -137,9 +134,7 @@ export class ScenarioInstanceMonitor extends localize(i18next)(LitElement) {
 
     notify({
       level: 'info',
-      message: `${IS_SCENARIO_RUNNING(response.data.startScenario.state) ? 'success' : 'fail'} to start scenario : ${
-        instance.scenarioName
-      }`
+      message: `${IS_SCENARIO_RUNNING(response.data.startScenario.state) ? 'success' : 'fail'} to start scenario : ${instance.scenarioName}`
     })
   }
 
@@ -159,22 +154,15 @@ export class ScenarioInstanceMonitor extends localize(i18next)(LitElement) {
 
     notify({
       level: 'info',
-      message: `${IS_SCENARIO_RUNNING(response.data.stopScenario.state) ? 'fail' : 'success'} to stop instance : ${
-        instance.instanceName
-      }`
+      message: `${IS_SCENARIO_RUNNING(response.data.stopScenario.state) ? 'fail' : 'success'} to stop instance : ${instance.instanceName}`
     })
   }
 
   async showInstanceDetail() {
     const { instanceName, scenarioName } = this.instance
-    openPopup(
-      html`
-        <scenario-instance-view .instanceName=${instanceName} .scenarioName=${scenarioName}></scenario-instance-view>
-      `,
-      {
-        size: 'large',
-        title: `${i18next.t('title.scenario-instance')}`
-      }
-    )
+    openPopup(html` <scenario-instance-view .instanceName=${instanceName} .scenarioName=${scenarioName}></scenario-instance-view> `, {
+      size: 'large',
+      title: `${i18next.t('title.scenario-instance')}`
+    })
   }
 }

package/client/viewparts/scenario-monitor.ts

@@ -4,7 +4,7 @@ import './scenario-instance-monitor'
 
 import gql from 'graphql-tag'
 import { css, html, LitElement } from 'lit'
-import { customElement, property, query } from 'lit/decorators.js'
+import { customElement, property, query, state } from 'lit/decorators.js'
 
 import { client } from '@operato/graphql'
 import { i18next, localize } from '@operato/i18n'
@@ -23,7 +23,6 @@ export class ScenarioMonitor extends localize(i18next)(LitElement) {
       :host {
         display: flex;
         flex-direction: row;
-        margin: var(--margin-default);
 
         border: var(--border-dark-color);
         background-color: var(--theme-white-color);
@@ -38,9 +37,10 @@ export class ScenarioMonitor extends localize(i18next)(LitElement) {
         display: flex;
         flex-direction: column;
         padding: var(--padding-default);
-        width: 200px;
         color: var(--secondary-color);
         font-size: var(--fontsize-small);
+        width: 100%;
+        box-sizing: border-box;
       }
 
       [desc] [detail-info] {
@@ -114,9 +114,15 @@ export class ScenarioMonitor extends localize(i18next)(LitElement) {
         margin: var(--margin-default) 0 0 0;
       }
 
+      :host([mode='detail']) [desc] {
+        flex: unset;
+        width: 200px;
+      }
+
       :host([mode='detail']) [desc] [buttons] {
         display: none;
       }
+
       :host([mode='detail']) [buttons] {
         border-top: none;
         padding: var(--padding-default);
@@ -137,7 +143,6 @@ export class ScenarioMonitor extends localize(i18next)(LitElement) {
         position: relative;
         margin: var(--margin-default);
         min-width: 140px;
-        max-width: 180px;
         border: 1px solid black;
         border-radius: var(--border-radius);
         font-size: 12px;
@@ -154,21 +159,12 @@ export class ScenarioMonitor extends localize(i18next)(LitElement) {
       @media screen and (max-width: 480px) {
         :host {
           margin: var(--margin-narrow);
-          max-width: 46%;
-        }
-
-        :host([mode='detail']) {
-          max-width: initial;
         }
 
         [desc] {
           padding: var(--padding-narrow);
         }
 
-        :host([mode='detail']) > [desc] {
-          max-width: 125px;
-        }
-
         [desc] [detail-info] {
           height: 38px;
         }
@@ -192,7 +188,7 @@ export class ScenarioMonitor extends localize(i18next)(LitElement) {
 
     return html`
       <div desc>
-        <div detail-info>
+        <div detail-info title=${name}>
           <strong>${name}</strong>
           ${description}
           <span>${instances.length}</span>
@@ -224,32 +220,26 @@ export class ScenarioMonitor extends localize(i18next)(LitElement) {
 
   renderButtons(scenario) {
     const instances = scenario.instances || []
-    const scenarioInstance = instances.find(instance => instance.instanceName == scenario.name)
+    const scenarioInstance = instances.find(instance => instance.instanceName == scenario.name) || null
 
     return html`
       <div buttons ?detail=${this.mode == 'detail'}>
         <mwc-icon-button @click=${e => this.popupLogView(scenario)} icon="text_snippet"></mwc-icon-button>
         ${!scenarioInstance
-          ? html` <mwc-icon-button
-              icon="play_circle_outline"
-              @click=${e => this.startScenario(scenario)}
-            ></mwc-icon-button>`
-          : html`
-              <mwc-icon-button
-                icon="pause_circle_outline"
-                @click=${e => this.stopScenario(scenario)}
-                stop
-              ></mwc-icon-button>
-            `}
+          ? html` <mwc-icon-button icon="play_circle_outline" @click=${e => this.startScenario(scenario)}></mwc-icon-button>`
+          : html` <mwc-icon-button icon="pause_circle_outline" @click=${e => this.stopScenario(scenario)} stop></mwc-icon-button> `}
       </div>
     `
   }
 
   async popupLogView(scenario) {
-    openPopup(html` <scenario-instance-log-view .scenarioName=${scenario.name}></scenario-instance-log-view> `, {
-      size: 'large',
-      title: `${i18next.t('title.scenario-log')} (${scenario.name})`
-    })
+    const popup = openPopup(
+      html` <scenario-instance-log-view .scenarioName=${scenario.name} @start=${() => this.startScenario(scenario)} startable></scenario-instance-log-view> `,
+      {
+        size: 'large',
+        title: `${i18next.t('title.scenario-log')} (${scenario.name})`
+      }
+    )
   }
 
   async startScenario(scenario) {
@@ -268,9 +258,7 @@ export class ScenarioMonitor extends localize(i18next)(LitElement) {
 
     notify({
       level: 'info',
-      message: `${!IS_SCENARIO_RUNNING(response.data.startScenario.state) ? 'fail' : 'success'} to start instance : ${
-        scenario.name
-      }`
+      message: `${!IS_SCENARIO_RUNNING(response.data.startScenario.state) ? 'fail' : 'success'} to start instance : ${scenario.name}`
     })
   }
 
@@ -290,9 +278,7 @@ export class ScenarioMonitor extends localize(i18next)(LitElement) {
 
     notify({
       level: 'info',
-      message: `${IS_SCENARIO_RUNNING(response.data.stopScenario.state) ? 'fail' : 'success'} to stop instance : ${
-        scenario.name
-      }`
+      message: `${IS_SCENARIO_RUNNING(response.data.stopScenario.state) ? 'fail' : 'success'} to stop instance : ${scenario.name}`
     })
   }
 }

package/client/viewparts/scenarios-monitor.ts

@@ -8,10 +8,6 @@ import { customElement, property, query } from 'lit/decorators.js'
 import { i18next, localize } from '@operato/i18n'
 import { ScrollbarStyles } from '@operato/styles'
 
-function IS_SCENARIO_RUNNING(state) {
-  return state && state !== 'UNLOADED'
-}
-
 @customElement('scenarios-monitor')
 export class ScenariosMonitor extends localize(i18next)(LitElement) {
   static styles = [
@@ -84,12 +80,17 @@ export class ScenariosMonitor extends localize(i18next)(LitElement) {
       [scenarios] [flowbox] {
         display: flex;
         flex-direction: column;
-        min-height: min-content;
+        padding: 10px;
+        gap: 12px;
       }
 
       [scenarios][mode='brief'] [flowbox] {
-        flex-flow: row wrap;
-        align-self: start;
+        overflow: auto;
+        display: grid;
+
+        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+        grid-auto-rows: max-content;
+        grid-gap: 12px;
       }
 
       scenario-monitor {
@@ -128,16 +129,12 @@ export class ScenariosMonitor extends localize(i18next)(LitElement) {
       </div>
 
       <div content>
-        <pending-q-monitor
-          .pendings=${this.pendings}
-          .colorIndex=${this.colorIndex || {}}
-          .running=${this.running}
-        ></pending-q-monitor>
+        <pending-q-monitor .pendings=${this.pendings} .colorIndex=${this.colorIndex || {}} .running=${this.running}></pending-q-monitor>
 
         <div scenarios mode=${mode}>
           <div flowbox>
             ${scenarios
-              .filter(scenario => scenario.name.indexOf(filter) == 0)
+              .filter(scenario => new RegExp(filter, 'i').test(scenario.name))
               .map(scenario => html`<scenario-monitor .scenario=${scenario} mode=${mode}></scenario-monitor>`)}
           </div>
         </div>

package/dist-client/editors/things-editor-oracle-procedure.js

@@ -166,11 +166,7 @@ let ThingsEditorProcedureParameters = class ThingsEditorProcedureParameters exte
             dir,
             accessor: accessor && String(accessor).trim()
         };
-        if (dir != 'In' &&
-            (type == 'String' || type == 'Buffer') &&
-            maxSize !== null &&
-            maxSize !== undefined &&
-            !isNaN(maxSize)) {
+        if (dir != 'In' && (type == 'String' || type == 'Buffer') && maxSize !== null && maxSize !== undefined && !isNaN(maxSize)) {
             entry.maxSize = maxSize;
         }
         if (dir != 'Out' && val !== null && val !== undefined && val != '') {
@@ -262,8 +258,9 @@ let ThingsEditorProcedureParameters = class ThingsEditorProcedureParameters exte
             const dir = record.querySelector('[data-dir]').value;
             const type = record.querySelector('[data-type]').value;
             const val = record.querySelector('[data-val]').value;
+            const accessor = record.querySelector('[data-accessor]').value;
             const maxSize = record.querySelector('[data-max-size]').valueAsNumber;
-            return this._adjust({ name, dir, type, val, maxSize });
+            return this._adjust({ name, dir, type, val, accessor, maxSize });
         });
         this._updateValue();
     }

package/dist-client/editors/things-editor-oracle-procedure.js.map

@@ -1 +1 @@
-{"version":3,"file":"things-editor-oracle-procedure.js","sourceRoot":"","sources":["../../client/editors/things-editor-oracle-procedure.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/mwc-icon'\n\nimport '@operato/i18n/ox-i18n.js'\nimport { css, html } from 'lit'\nimport { customElement, property, queryAll, state } from 'lit/decorators.js'\n\nimport { OxFormField } from '@operato/input'\n\ntype ProcedureParameterType = {\n  name: string\n  dir: string\n  type: string\n  val?: any\n  accessor?: string\n  maxSize?: number\n}\n\ntype ValueType = {\n  code?: string\n  procedure?: string\n  parameters?: ProcedureParameterType[]\n}\n\n/**\n input component for procedure-parameters\n \n Example:\n \n   <things-editor-oracle-procedure \n     value=${map}\n   </things-editor-oracle-procedure>\n */\n@customElement('things-editor-oracle-procedure')\nexport class ThingsEditorProcedureParameters extends OxFormField {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        overflow: hidden;\n        margin-bottom: var(--margin-wide);\n      }\n\n      div {\n        display: flex;\n        flex-flow: row nowrap;\n        gap: var(--margin-default);\n        margin-bottom: var(--margin-narrow);\n      }\n\n      pre {\n        flex: 1;\n        background-color: #333;\n        color: white;\n        margin: 0;\n        padding: 4px 6px;\n        font-size: 1.5em;\n        display: flex;\n      }\n\n      code {\n        flex: 1;\n        white-space: normal;\n        min-height: 32px;\n      }\n\n      button {\n        border: var(--button-border);\n        border-radius: var(--border-radius);\n        background-color: var(--button-background-color);\n        padding: var(--padding-narrow) var(--padding-default);\n        line-height: 0.8;\n        color: var(--button-color);\n        cursor: pointer;\n      }\n\n      button + button {\n        margin-left: -5px;\n      }\n\n      button mwc-icon {\n        font-size: var(--fontsize-default);\n      }\n\n      button:focus,\n      button:hover,\n      button:active {\n        border: var(--button-activ-border);\n        background-color: var(--button-background-focus-color);\n        color: var(--theme-white-color);\n      }\n\n      input {\n        flex: 1;\n        border: 0;\n        border-bottom: var(--border-dark-color);\n        padding: var(--input-padding);\n        font: var(--input-font);\n        color: var(--primary-text-color);\n        min-width: 50px;\n      }\n\n      input:focus {\n        outline: none;\n        border-bottom: 1px solid var(--primary-color);\n      }\n\n      button.hidden {\n        opacity: 0;\n        cursor: default;\n      }\n\n      select,\n      ox-select,\n      input:not([type='checkbox']) {\n        border: 1px solid rgba(0, 0, 0, 0.2);\n        border-radius: 4px;\n      }\n    `\n  ]\n\n  @property({ type: Object }) value: ValueType = {}\n  @property({ type: Array }) steps: string[] = []\n\n  @state() private procedure?: string = ''\n  @state() private parameters?: ProcedureParameterType[] = []\n  private _changingNow: boolean = false\n\n  @queryAll('[data-record]') records!: NodeListOf<HTMLElement>\n\n  firstUpdated() {\n    this.renderRoot.addEventListener('change', this._onChange.bind(this))\n  }\n\n  render() {\n    const code = this.value?.code || ''\n    const parameters = this.parameters || []\n    const procedure = this.procedure || ''\n\n    const steps = this.steps || []\n\n    return html`\n      <div>\n        <label><ox-i18n msgid=\"label.procedure-code\"></ox-i18n></label>\n      </div>\n\n      <div>\n        <pre>\n          <code>${code}</code>\n        </pre\n        >\n      </div>\n\n      <div>\n        <label><ox-i18n msgid=\"label.procedure-name\"></ox-i18n></label>\n      </div>\n\n      <div>\n        <input type=\"text\" data-procedure .value=${procedure} />\n      </div>\n\n      <div>\n        <label><ox-i18n msgid=\"label.parameters\"></ox-i18n></label>\n      </div>\n\n      ${parameters.map(\n        item => html`\n          <div data-record>\n            <input type=\"text\" data-name placeholder=\"name\" .value=${item.name} />\n            <select data-dir placeholder=\"dir\" .value=${item.dir}>\n              <option value=\"\" ?selected=${item.dir == ''}>&nbsp;</option>\n              <option value=\"In\" ?selected=${item.dir == 'In'}>In</option>\n              <option value=\"Inout\" ?selected=${item.dir == 'Inout'}>Inout</option>\n              <option value=\"Out\" ?selected=${item.dir == 'Out'}>Out</option>\n            </select>\n            <select data-type placeholder=\"type\" .value=${item.type}>\n              <option value=\"\" ?selected=${item.type == ''}>&nbsp;</option>\n              <option value=\"String\" ?selected=${item.type == 'String'}>String</option>\n              <option value=\"Number\" ?selected=${item.type == 'Number'}>Number</option>\n              <option value=\"Date\" ?selected=${item.type == 'Date'}>Date</option>\n              <!-- \n                <option value=\"Buffer\" ?selected=${item.type == 'Buffer'}>Buffer</option>\n                <option value=\"Blob\" ?selected=${item.type == 'Blob'}>Blob</option>\n                <option value=\"Clob\" ?selected=${item.type == 'Clob'}>Clob</option>\n              -->\n              <option value=\"Cursor\" ?selected=${item.type == 'Cursor'}>Cursor</option>\n            </select>\n            <input type=\"text\" data-accessor placeholder=\"accessor\" .value=${item.accessor || ''} list=\"step-list\" />\n            <input type=\"text\" data-val placeholder=\"val\" .value=${item.val || ''} />\n            <input type=\"number\" data-max-size placeholder=\"max-size\" .value=${String(item.maxSize)} />\n\n            <button class=\"record-action\" @click=${(e: MouseEvent) => this._delete(e)} tabindex=\"-1\">\n              <mwc-icon>remove</mwc-icon>\n            </button>\n            <button class=\"record-action\" @click=${(e: MouseEvent) => this._up(e)} tabindex=\"-1\">\n              <mwc-icon>arrow_upward</mwc-icon>\n            </button>\n            <button class=\"record-action\" @click=${(e: MouseEvent) => this._down(e)} tabindex=\"-1\">\n              <mwc-icon>arrow_downward</mwc-icon>\n            </button>\n          </div>\n        `\n      )}\n\n      <div data-record-new>\n        <input type=\"text\" data-name placeholder=\"name\" value=\"\" />\n        <select data-dir placeholder=\"dir\">\n          <option value=\"\" selected>&nbsp;</option>\n          <option value=\"In\">In</option>\n          <option value=\"Inout\">Inout</option>\n          <option value=\"Out\">Out</option>\n        </select>\n        <select data-type placeholder=\"type\" value=\"\">\n          <option value=\"\" selected>&nbsp;</option>\n          <option value=\"String\">String</option>\n          <option value=\"Number\">Number</option>\n          <option value=\"Date\">Date</option>\n          <!--\n          <option value=\"Buffer\">Buffer</option>\n          <option value=\"Blob\">Blob</option>\n          <option value=\"Clob\">Clob</option>\n          -->\n          <option value=\"Cursor\">Cursor</option>\n        </select>\n        <input type=\"text\" data-accessor placeholder=\"accessor\" value=\"\" list=\"step-list\" />\n        <input type=\"text\" data-val placeholder=\"val\" value=\"\" />\n        <input type=\"number\" data-max-size placeholder=\"max-size\" value=\"\" />\n\n        <button class=\"record-action\" @click=${(e: MouseEvent) => this._add()} tabindex=\"-1\">\n          <mwc-icon>add</mwc-icon>\n        </button>\n        <button class=\"hidden\"><mwc-icon>add</mwc-icon></button>\n        <button class=\"hidden\"><mwc-icon>add</mwc-icon></button>\n      </div>\n\n      <datalist id=\"step-list\">${steps.map(id => html` <option value=${id}></option> `)}</datalist>\n    `\n  }\n\n  updated(changes: any) {\n    if (changes.has('value')) {\n      /* 하위 호환성때문에, Array타입 값을 처리하도록 함. 다음 마이너 업그레이드시에 제거할 것. */\n      const value = (Array.isArray(this.value) ? { parameters: this.value } : this.value) as ValueType\n\n      const { procedure, parameters } = value\n\n      this.procedure = procedure\n      this.parameters = parameters\n    }\n  }\n\n  _onChange(e: Event) {\n    if (this._changingNow) {\n      return\n    }\n\n    this._changingNow = true\n\n    const input = e.target as HTMLInputElement\n\n    if (input.hasAttribute('data-procedure')) {\n      this.procedure = input.value\n      this._updateValue()\n    } else {\n      const record = (e.target as Element).closest('[data-record],[data-record-new]') as HTMLElement\n\n      if (record.hasAttribute('data-record')) {\n        this._build()\n      } else if (record.hasAttribute('data-record-new') && input.hasAttribute('data-type')) {\n        this._add()\n      }\n    }\n\n    this._changingNow = false\n  }\n\n  _adjust({ name, type, dir, maxSize, val, accessor }: ProcedureParameterType): ProcedureParameterType {\n    const entry = {\n      name: name && String(name).trim(),\n      type,\n      dir,\n      accessor: accessor && String(accessor).trim()\n    } as ProcedureParameterType\n\n    if (\n      dir != 'In' &&\n      (type == 'String' || type == 'Buffer') &&\n      maxSize !== null &&\n      maxSize !== undefined &&\n      !isNaN(maxSize)\n    ) {\n      entry.maxSize = maxSize\n    }\n\n    if (dir != 'Out' && val !== null && val !== undefined && val != '') {\n      entry.val = type == 'Number' ? Number(val) : val\n    }\n\n    return entry\n  }\n\n  _build(includeNewRecord?: boolean) {\n    if (includeNewRecord) {\n      var records = this.renderRoot.querySelectorAll('[data-record],[data-record-new]') as NodeListOf<HTMLElement>\n    } else {\n      var records = this.renderRoot.querySelectorAll('[data-record]') as NodeListOf<HTMLElement>\n    }\n\n    var newmap: ProcedureParameterType[] = []\n\n    for (var i = 0; i < records.length; i++) {\n      var record = records[i]\n\n      const name = (record.querySelector('[data-name]') as HTMLInputElement).value\n      const type = (record.querySelector('[data-type]') as HTMLInputElement).value\n      const dir = (record.querySelector('[data-dir]') as HTMLInputElement).value\n      const val = (record.querySelector('[data-val]') as HTMLInputElement).value\n      const accessor = (record.querySelector('[data-accessor]') as HTMLInputElement).value\n      const maxSize = (record.querySelector('[data-max-size]') as HTMLInputElement).valueAsNumber\n\n      const inputs = record.querySelectorAll(\n        '[data-type]:not([style*=\"display: none\"])'\n      ) as NodeListOf<HTMLInputElement>\n\n      if (!inputs || inputs.length == 0) {\n        continue\n      }\n\n      if (name) {\n        newmap.push(this._adjust({ name, type, dir, val, accessor, maxSize }))\n      }\n    }\n\n    this.parameters = newmap\n    this._updateValue()\n  }\n\n  _updateValue() {\n    const args = (this.parameters || []).map(p => ':' + p.name).join(', ')\n\n    this.value = {\n      code: `${this.procedure}(${args});`,\n      procedure: this.procedure,\n      parameters: this.parameters\n    }\n\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))\n  }\n\n  _add() {\n    this._build(true)\n\n    const inputs = this.renderRoot.querySelectorAll(\n      '[data-record-new] input:not([style*=\"display: none\"])'\n    ) as NodeListOf<HTMLInputElement & { value: any }>\n\n    for (var i = 0; i < inputs.length; i++) {\n      let input = inputs[i]\n\n      input.value = ''\n    }\n\n    inputs[0].focus()\n  }\n\n  _delete(e: MouseEvent) {\n    const record = (e.target as Element).closest('[data-record]') as HTMLElement\n\n    ;(record!.querySelector('[data-name]') as HTMLInputElement)!.value = ''\n\n    this._build()\n  }\n\n  _up(e: MouseEvent) {\n    const record = (e.target as Element).closest('[data-record]') as HTMLElement\n    const array = Array.from(this.records)\n    const index = array.indexOf(record) - 1\n\n    if (index < 0) {\n      return\n    }\n\n    const deleted = array.splice(index, 1)\n    array.splice(index + 1, 0, ...deleted)\n\n    this.parameters = array.map(record => {\n      const name = (record.querySelector('[data-name]') as HTMLInputElement).value\n      const dir = (record.querySelector('[data-dir]') as HTMLInputElement).value\n      const type = (record.querySelector('[data-type]') as HTMLInputElement).value\n      const val = (record.querySelector('[data-val]') as HTMLInputElement).value\n      const accessor = (record.querySelector('[data-accessor]') as HTMLInputElement).value\n      const maxSize = (record.querySelector('[data-max-size]') as HTMLInputElement).valueAsNumber\n\n      return this._adjust({ name, dir, type, val, accessor, maxSize })\n    })\n\n    this._updateValue()\n  }\n\n  _down(e: MouseEvent) {\n    const record = (e.target as Element).closest('[data-record]') as HTMLElement\n    const array = Array.from(this.records)\n    const index = array.indexOf(record)\n\n    if (index > array.length) {\n      return\n    }\n\n    array.splice(index, 1)\n    array.splice(index + 1, 0, record)\n\n    this.parameters = array.map(record => {\n      const name = (record.querySelector('[data-name]') as HTMLInputElement).value\n      const dir = (record.querySelector('[data-dir]') as HTMLInputElement).value\n      const type = (record.querySelector('[data-type]') as HTMLInputElement).value\n      const val = (record.querySelector('[data-val]') as HTMLInputElement).value\n      const maxSize = (record.querySelector('[data-max-size]') as HTMLInputElement).valueAsNumber\n\n      return this._adjust({ name, dir, type, val, maxSize })\n    })\n\n    this._updateValue()\n  }\n}\n"]}
+{"version":3,"file":"things-editor-oracle-procedure.js","sourceRoot":"","sources":["../../client/editors/things-editor-oracle-procedure.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/mwc-icon'\n\nimport '@operato/i18n/ox-i18n.js'\nimport { css, html } from 'lit'\nimport { customElement, property, queryAll, state } from 'lit/decorators.js'\n\nimport { OxFormField } from '@operato/input'\n\ntype ProcedureParameterType = {\n  name: string\n  dir: string\n  type: string\n  val?: any\n  accessor?: string\n  maxSize?: number\n}\n\ntype ValueType = {\n  code?: string\n  procedure?: string\n  parameters?: ProcedureParameterType[]\n}\n\n/**\n input component for procedure-parameters\n \n Example:\n \n   <things-editor-oracle-procedure \n     value=${map}\n   </things-editor-oracle-procedure>\n */\n@customElement('things-editor-oracle-procedure')\nexport class ThingsEditorProcedureParameters extends OxFormField {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        overflow: hidden;\n        margin-bottom: var(--margin-wide);\n      }\n\n      div {\n        display: flex;\n        flex-flow: row nowrap;\n        gap: var(--margin-default);\n        margin-bottom: var(--margin-narrow);\n      }\n\n      pre {\n        flex: 1;\n        background-color: #333;\n        color: white;\n        margin: 0;\n        padding: 4px 6px;\n        font-size: 1.5em;\n        display: flex;\n      }\n\n      code {\n        flex: 1;\n        white-space: normal;\n        min-height: 32px;\n      }\n\n      button {\n        border: var(--button-border);\n        border-radius: var(--border-radius);\n        background-color: var(--button-background-color);\n        padding: var(--padding-narrow) var(--padding-default);\n        line-height: 0.8;\n        color: var(--button-color);\n        cursor: pointer;\n      }\n\n      button + button {\n        margin-left: -5px;\n      }\n\n      button mwc-icon {\n        font-size: var(--fontsize-default);\n      }\n\n      button:focus,\n      button:hover,\n      button:active {\n        border: var(--button-activ-border);\n        background-color: var(--button-background-focus-color);\n        color: var(--theme-white-color);\n      }\n\n      input {\n        flex: 1;\n        border: 0;\n        border-bottom: var(--border-dark-color);\n        padding: var(--input-padding);\n        font: var(--input-font);\n        color: var(--primary-text-color);\n        min-width: 50px;\n      }\n\n      input:focus {\n        outline: none;\n        border-bottom: 1px solid var(--primary-color);\n      }\n\n      button.hidden {\n        opacity: 0;\n        cursor: default;\n      }\n\n      select,\n      ox-select,\n      input:not([type='checkbox']) {\n        border: 1px solid rgba(0, 0, 0, 0.2);\n        border-radius: 4px;\n      }\n    `\n  ]\n\n  @property({ type: Object }) value: ValueType = {}\n  @property({ type: Array }) steps: string[] = []\n\n  @state() private procedure?: string = ''\n  @state() private parameters?: ProcedureParameterType[] = []\n  private _changingNow: boolean = false\n\n  @queryAll('[data-record]') records!: NodeListOf<HTMLElement>\n\n  firstUpdated() {\n    this.renderRoot.addEventListener('change', this._onChange.bind(this))\n  }\n\n  render() {\n    const code = this.value?.code || ''\n    const parameters = this.parameters || []\n    const procedure = this.procedure || ''\n\n    const steps = this.steps || []\n\n    return html`\n      <div>\n        <label><ox-i18n msgid=\"label.procedure-code\"></ox-i18n></label>\n      </div>\n\n      <div>\n        <pre>\n          <code>${code}</code>\n        </pre\n        >\n      </div>\n\n      <div>\n        <label><ox-i18n msgid=\"label.procedure-name\"></ox-i18n></label>\n      </div>\n\n      <div>\n        <input type=\"text\" data-procedure .value=${procedure} />\n      </div>\n\n      <div>\n        <label><ox-i18n msgid=\"label.parameters\"></ox-i18n></label>\n      </div>\n\n      ${parameters.map(\n        item => html`\n          <div data-record>\n            <input type=\"text\" data-name placeholder=\"name\" .value=${item.name} />\n            <select data-dir placeholder=\"dir\" .value=${item.dir}>\n              <option value=\"\" ?selected=${item.dir == ''}>&nbsp;</option>\n              <option value=\"In\" ?selected=${item.dir == 'In'}>In</option>\n              <option value=\"Inout\" ?selected=${item.dir == 'Inout'}>Inout</option>\n              <option value=\"Out\" ?selected=${item.dir == 'Out'}>Out</option>\n            </select>\n            <select data-type placeholder=\"type\" .value=${item.type}>\n              <option value=\"\" ?selected=${item.type == ''}>&nbsp;</option>\n              <option value=\"String\" ?selected=${item.type == 'String'}>String</option>\n              <option value=\"Number\" ?selected=${item.type == 'Number'}>Number</option>\n              <option value=\"Date\" ?selected=${item.type == 'Date'}>Date</option>\n              <!-- \n                <option value=\"Buffer\" ?selected=${item.type == 'Buffer'}>Buffer</option>\n                <option value=\"Blob\" ?selected=${item.type == 'Blob'}>Blob</option>\n                <option value=\"Clob\" ?selected=${item.type == 'Clob'}>Clob</option>\n              -->\n              <option value=\"Cursor\" ?selected=${item.type == 'Cursor'}>Cursor</option>\n            </select>\n            <input type=\"text\" data-accessor placeholder=\"accessor\" .value=${item.accessor || ''} list=\"step-list\" />\n            <input type=\"text\" data-val placeholder=\"val\" .value=${item.val || ''} />\n            <input type=\"number\" data-max-size placeholder=\"max-size\" .value=${String(item.maxSize)} />\n\n            <button class=\"record-action\" @click=${(e: MouseEvent) => this._delete(e)} tabindex=\"-1\">\n              <mwc-icon>remove</mwc-icon>\n            </button>\n            <button class=\"record-action\" @click=${(e: MouseEvent) => this._up(e)} tabindex=\"-1\">\n              <mwc-icon>arrow_upward</mwc-icon>\n            </button>\n            <button class=\"record-action\" @click=${(e: MouseEvent) => this._down(e)} tabindex=\"-1\">\n              <mwc-icon>arrow_downward</mwc-icon>\n            </button>\n          </div>\n        `\n      )}\n\n      <div data-record-new>\n        <input type=\"text\" data-name placeholder=\"name\" value=\"\" />\n        <select data-dir placeholder=\"dir\">\n          <option value=\"\" selected>&nbsp;</option>\n          <option value=\"In\">In</option>\n          <option value=\"Inout\">Inout</option>\n          <option value=\"Out\">Out</option>\n        </select>\n        <select data-type placeholder=\"type\" value=\"\">\n          <option value=\"\" selected>&nbsp;</option>\n          <option value=\"String\">String</option>\n          <option value=\"Number\">Number</option>\n          <option value=\"Date\">Date</option>\n          <!--\n          <option value=\"Buffer\">Buffer</option>\n          <option value=\"Blob\">Blob</option>\n          <option value=\"Clob\">Clob</option>\n          -->\n          <option value=\"Cursor\">Cursor</option>\n        </select>\n        <input type=\"text\" data-accessor placeholder=\"accessor\" value=\"\" list=\"step-list\" />\n        <input type=\"text\" data-val placeholder=\"val\" value=\"\" />\n        <input type=\"number\" data-max-size placeholder=\"max-size\" value=\"\" />\n\n        <button class=\"record-action\" @click=${(e: MouseEvent) => this._add()} tabindex=\"-1\">\n          <mwc-icon>add</mwc-icon>\n        </button>\n        <button class=\"hidden\"><mwc-icon>add</mwc-icon></button>\n        <button class=\"hidden\"><mwc-icon>add</mwc-icon></button>\n      </div>\n\n      <datalist id=\"step-list\">${steps.map(id => html` <option value=${id}></option> `)}</datalist>\n    `\n  }\n\n  updated(changes: any) {\n    if (changes.has('value')) {\n      /* 하위 호환성때문에, Array타입 값을 처리하도록 함. 다음 마이너 업그레이드시에 제거할 것. */\n      const value = (Array.isArray(this.value) ? { parameters: this.value } : this.value) as ValueType\n\n      const { procedure, parameters } = value\n\n      this.procedure = procedure\n      this.parameters = parameters\n    }\n  }\n\n  _onChange(e: Event) {\n    if (this._changingNow) {\n      return\n    }\n\n    this._changingNow = true\n\n    const input = e.target as HTMLInputElement\n\n    if (input.hasAttribute('data-procedure')) {\n      this.procedure = input.value\n      this._updateValue()\n    } else {\n      const record = (e.target as Element).closest('[data-record],[data-record-new]') as HTMLElement\n\n      if (record.hasAttribute('data-record')) {\n        this._build()\n      } else if (record.hasAttribute('data-record-new') && input.hasAttribute('data-type')) {\n        this._add()\n      }\n    }\n\n    this._changingNow = false\n  }\n\n  _adjust({ name, type, dir, maxSize, val, accessor }: ProcedureParameterType): ProcedureParameterType {\n    const entry = {\n      name: name && String(name).trim(),\n      type,\n      dir,\n      accessor: accessor && String(accessor).trim()\n    } as ProcedureParameterType\n\n    if (dir != 'In' && (type == 'String' || type == 'Buffer') && maxSize !== null && maxSize !== undefined && !isNaN(maxSize)) {\n      entry.maxSize = maxSize\n    }\n\n    if (dir != 'Out' && val !== null && val !== undefined && val != '') {\n      entry.val = type == 'Number' ? Number(val) : val\n    }\n\n    return entry\n  }\n\n  _build(includeNewRecord?: boolean) {\n    if (includeNewRecord) {\n      var records = this.renderRoot.querySelectorAll('[data-record],[data-record-new]') as NodeListOf<HTMLElement>\n    } else {\n      var records = this.renderRoot.querySelectorAll('[data-record]') as NodeListOf<HTMLElement>\n    }\n\n    var newmap: ProcedureParameterType[] = []\n\n    for (var i = 0; i < records.length; i++) {\n      var record = records[i]\n\n      const name = (record.querySelector('[data-name]') as HTMLInputElement).value\n      const type = (record.querySelector('[data-type]') as HTMLInputElement).value\n      const dir = (record.querySelector('[data-dir]') as HTMLInputElement).value\n      const val = (record.querySelector('[data-val]') as HTMLInputElement).value\n      const accessor = (record.querySelector('[data-accessor]') as HTMLInputElement).value\n      const maxSize = (record.querySelector('[data-max-size]') as HTMLInputElement).valueAsNumber\n\n      const inputs = record.querySelectorAll('[data-type]:not([style*=\"display: none\"])') as NodeListOf<HTMLInputElement>\n\n      if (!inputs || inputs.length == 0) {\n        continue\n      }\n\n      if (name) {\n        newmap.push(this._adjust({ name, type, dir, val, accessor, maxSize }))\n      }\n    }\n\n    this.parameters = newmap\n    this._updateValue()\n  }\n\n  _updateValue() {\n    const args = (this.parameters || []).map(p => ':' + p.name).join(', ')\n\n    this.value = {\n      code: `${this.procedure}(${args});`,\n      procedure: this.procedure,\n      parameters: this.parameters\n    }\n\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))\n  }\n\n  _add() {\n    this._build(true)\n\n    const inputs = this.renderRoot.querySelectorAll('[data-record-new] input:not([style*=\"display: none\"])') as NodeListOf<HTMLInputElement & { value: any }>\n\n    for (var i = 0; i < inputs.length; i++) {\n      let input = inputs[i]\n\n      input.value = ''\n    }\n\n    inputs[0].focus()\n  }\n\n  _delete(e: MouseEvent) {\n    const record = (e.target as Element).closest('[data-record]') as HTMLElement\n\n    ;(record!.querySelector('[data-name]') as HTMLInputElement)!.value = ''\n\n    this._build()\n  }\n\n  _up(e: MouseEvent) {\n    const record = (e.target as Element).closest('[data-record]') as HTMLElement\n    const array = Array.from(this.records)\n    const index = array.indexOf(record) - 1\n\n    if (index < 0) {\n      return\n    }\n\n    const deleted = array.splice(index, 1)\n    array.splice(index + 1, 0, ...deleted)\n\n    this.parameters = array.map(record => {\n      const name = (record.querySelector('[data-name]') as HTMLInputElement).value\n      const dir = (record.querySelector('[data-dir]') as HTMLInputElement).value\n      const type = (record.querySelector('[data-type]') as HTMLInputElement).value\n      const val = (record.querySelector('[data-val]') as HTMLInputElement).value\n      const accessor = (record.querySelector('[data-accessor]') as HTMLInputElement).value\n      const maxSize = (record.querySelector('[data-max-size]') as HTMLInputElement).valueAsNumber\n\n      return this._adjust({ name, dir, type, val, accessor, maxSize })\n    })\n\n    this._updateValue()\n  }\n\n  _down(e: MouseEvent) {\n    const record = (e.target as Element).closest('[data-record]') as HTMLElement\n    const array = Array.from(this.records)\n    const index = array.indexOf(record)\n\n    if (index > array.length) {\n      return\n    }\n\n    array.splice(index, 1)\n    array.splice(index + 1, 0, record)\n\n    this.parameters = array.map(record => {\n      const name = (record.querySelector('[data-name]') as HTMLInputElement).value\n      const dir = (record.querySelector('[data-dir]') as HTMLInputElement).value\n      const type = (record.querySelector('[data-type]') as HTMLInputElement).value\n      const val = (record.querySelector('[data-val]') as HTMLInputElement).value\n      const accessor = (record.querySelector('[data-accessor]') as HTMLInputElement).value\n      const maxSize = (record.querySelector('[data-max-size]') as HTMLInputElement).valueAsNumber\n\n      return this._adjust({ name, dir, type, val, accessor, maxSize })\n    })\n\n    this._updateValue()\n  }\n}\n"]}

package/dist-client/pages/integration-monitor.js

@@ -8,7 +8,7 @@ import { css, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { client, subscribe } from '@operato/graphql';
 import { i18next, localize } from '@operato/i18n';
-import { PageView } from '@operato/shell';
+import { PageView, InheritedValueType } from '@operato/shell';
 import { ScrollbarStyles } from '@operato/styles';
 function IS_SCENARIO_RUNNING(state) {
     return state && state !== 'UNLOADED';
@@ -37,18 +37,9 @@ let IntegrationMonitor = class IntegrationMonitor extends localize(i18next)(Page
     }
     render() {
         return html `
-      <integration-summary
-        .pendings=${this.pendings}
-        .scenarios=${this.scenarios}
-        .connections=${this.connections}
-      ></integration-summary>
+      <integration-summary .pendings=${this.pendings} .scenarios=${this.scenarios} .connections=${this.connections}></integration-summary>
       <content>
-        <scenarios-monitor
-          .scenarios=${this.scenarios}
-          .pendings=${this.pendings}
-          .colorIndex=${this.colorIndex || {}}
-          .running=${!!this.active}
-        ></scenarios-monitor>
+        <scenarios-monitor .scenarios=${this.scenarios} .pendings=${this.pendings} .colorIndex=${this.colorIndex || {}} .running=${!!this.active}></scenarios-monitor>
         <connections-monitor .connections=${this.connections}></connections-monitor>
       </content>
     `;
@@ -68,8 +59,8 @@ let IntegrationMonitor = class IntegrationMonitor extends localize(i18next)(Page
     async fetchScenarios() {
         const response = await client.query({
             query: gql `
-        query {
-          responses: scenarios {
+        query ($inherited: InheritedValueType) {
+          responses: scenarios(inherited: $inherited) {
             items {
               id
               name
@@ -101,7 +92,10 @@ let IntegrationMonitor = class IntegrationMonitor extends localize(i18next)(Page
             total
           }
         }
-      `
+      `,
+            variables: {
+                inherited: InheritedValueType.Include
+            }
         });
         var colorIndex = {};
         this.scenarios = (response.data.responses.items || []).map(scenario => {