@things-factory/integration-ui 9.1.19 → 10.0.0-beta.2

package/dist-client/pages/scenario.d.ts

@@ -5,12 +5,6 @@ import { DataGrist } from '@operato/data-grist/ox-grist.js';
 import { PageView } from '@operato/shell';
 import { FetchOption } from '@operato/data-grist';
 declare const Scenario_base: (new (...args: any[]) => {
-    _storeUnsubscribe: import("redux").Unsubscribe;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    stateChanged(_state: unknown): void;
-    readonly isConnected: boolean;
-}) & (new (...args: any[]) => {
     __preferenceProviders: {
         [element: string]: import("@operato/p13n").PagePreferenceProvider;
     };

package/dist-client/pages/scenario.js

@@ -5,19 +5,18 @@ import './scenario-importer.js';
 import gql from 'graphql-tag';
 import { css, html } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
-import { connect } from 'pwa-helpers/connect-mixin.js';
 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 { navigate, PageView } from '@operato/shell';
 import { CommonButtonStyles, CommonGristStyles, ScrollbarStyles } from '@operato/styles';
 import { isMobileDevice } from '@operato/utils';
 import { p13n } from '@operato/p13n';
 function IS_SCENARIO_RUNNING(state) {
     return state && state !== 'UNLOADED';
 }
-let Scenario = class Scenario extends connect(store)(p13n(localize(i18next)(PageView))) {
+let Scenario = class Scenario extends p13n(localize(i18next)(PageView)) {
     constructor() {
         super(...arguments);
         this.active = false;
@@ -27,67 +26,55 @@ let Scenario = class Scenario extends connect(store)(p13n(localize(i18next)(Page
             CommonGristStyles,
             ScrollbarStyles,
             css `
-        :host {
-          display: flex;
+        :host {           display: flex;
           flex-direction: column;
 
           overflow: hidden;
-        }
+ }
 
-        ox-grist {
-          overflow-y: auto;
+        ox-grist {           overflow-y: auto;
           flex: 1;
-        }
+ }
       `
         ];
     }
     get context() {
-        return {
-            title: i18next.t('text.scenario list'),
-            search: {
-                handler: search => {
+        return { title: i18next.t('text.scenario list'),
+            search: { handler: search => {
                     this.grist.searchText = search;
                 },
                 value: this.grist?.searchText || ''
             },
             // 필터가 설정되면, 아래 코멘트 해제
-            // filter: {
-            //   handler: () => {
-            //     const display = this.headroom.style.display
+            // filter: {       //   handler: () => {       //     const display = this.headroom.style.display
             //     this.headroom.style.display = display !== 'none' ? 'none' : 'flex'
-            //   }
+            // }
             // },
             help: 'integration/ui/scenario',
             actions: [
-                {
-                    title: i18next.t('button.start monitor'),
+                { title: i18next.t('button.start monitor'),
                     action: () => {
                         navigate('integration-monitor');
                     },
                     ...CommonButtonStyles.preview
                 },
-                {
-                    title: i18next.t('button.copy'),
+                { title: i18next.t('button.copy'),
                     action: this._copyScenario.bind(this),
                     ...CommonButtonStyles.copy
                 },
-                {
-                    title: i18next.t('button.save'),
+                { title: i18next.t('button.save'),
                     action: this._updateScenario.bind(this),
                     ...CommonButtonStyles.save
                 },
-                {
-                    title: i18next.t('button.delete'),
+                { title: i18next.t('button.delete'),
                     action: this._deleteScenario.bind(this),
                     ...CommonButtonStyles.delete
                 }
             ],
-            exportable: {
-                name: i18next.t('text.scenario list'),
+            exportable: { name: i18next.t('text.scenario list'),
                 data: this.exportHandler.bind(this)
             },
-            importable: {
-                handler: this.importHandler.bind(this)
+            importable: { handler: this.importHandler.bind(this)
             }
         };
     }
@@ -105,18 +92,15 @@ let Scenario = class Scenario extends connect(store)(p13n(localize(i18next)(Page
     }
     async pageInitialized(lifecycle) {
         this.fetchTaskTypes();
-        this.gristConfig = {
-            list: { fields: ['name', 'description', 'schedule', 'active'] },
+        this.gristConfig = { list: { fields: ['name', 'description', 'schedule', 'active'] },
             columns: [
                 { type: 'gutter', gutterName: 'sequence', fixed: true },
                 { type: 'gutter', gutterName: 'row-selector', multiple: true, fixed: true },
-                {
-                    type: 'gutter',
+                { type: 'gutter',
                     gutterName: 'button',
                     icon: record => (!record ? 'calendar_add_on' : !record.id || !record.scheduleId ? '' : 'event_available'),
                     title: i18next.t('button.schedule-task'),
-                    handlers: {
-                        click: (columns, data, column, record, rowIndex) => {
+                    handlers: { click: (columns, data, column, record, rowIndex) => {
                             if (!record || !record.id || (!record.scheduleId && !record.schedule)) {
                                 return;
                             }
@@ -129,8 +113,7 @@ let Scenario = class Scenario extends connect(store)(p13n(localize(i18next)(Page
                         }
                     }
                 },
-                {
-                    type: 'gutter',
+                { type: 'gutter',
                     gutterName: 'button',
                     name: 'state',
                     fixed: true,
@@ -144,10 +127,8 @@ let Scenario = class Scenario extends connect(store)(p13n(localize(i18next)(Page
                                 : i18next.t('button.start')
                             : '',
                     width: 72,
-                    handlers: {
-                        click: (columns, data, column, record, rowIndex) => {
-                            if (!record || !record.name) {
-                                /* TODO record가 새로 추가된 것이면 리턴하도록 한다. */
+                    handlers: { click: (columns, data, column, record, rowIndex) => {
+                            if (!record || !record.name) { /* TODO record가 새로 추가된 것이면 리턴하도록 한다. */
                                 return;
                             }
                             if (IS_SCENARIO_RUNNING(record.state)) {
@@ -159,16 +140,14 @@ let Scenario = class Scenario extends connect(store)(p13n(localize(i18next)(Page
                         }
                     }
                 },
-                {
-                    type: 'gutter',
+                { type: 'gutter',
                     gutterName: 'button',
                     fixed: true,
                     icon: record => (!record ? 'reorder' : record.id ? 'reorder' : ''),
                     iconOnly: false,
                     title: record => (!record ? i18next.t('button.detail') : record.id ? i18next.t('button.detail') : ''),
                     width: 72,
-                    handlers: {
-                        click: (columns, data, column, record, rowIndex) => {
+                    handlers: { click: (columns, data, column, record, rowIndex) => {
                             if (!record.id)
                                 return;
                             openPopup(html `
@@ -177,8 +156,7 @@ let Scenario = class Scenario extends connect(store)(p13n(localize(i18next)(Page
                     .taskTypes=${this.taskTypes}
                     @requestRefresh="${() => this.grist.fetch()}"
                   ></scenario-detail>
-                `, {
-                                backdrop: true,
+                `, { backdrop: true,
                                 help: 'integration/ui/scenario-detail',
                                 size: 'large',
                                 title: i18next.t('title.scenario-detail')
@@ -186,24 +164,20 @@ let Scenario = class Scenario extends connect(store)(p13n(localize(i18next)(Page
                         }
                     }
                 },
-                {
-                    type: 'string',
+                { type: 'string',
                     name: 'name',
                     fixed: true,
                     label: true,
                     header: i18next.t('field.name'),
-                    record: {
-                        editable: true,
+                    record: { editable: true,
                         mandatory: true
                     },
                     filter: 'search',
                     sortable: true,
                     width: 300,
                     validation: function (after, before, record, column) {
-                        /* connected 상태에서는 이름을 바꿀 수 없다. */
                         if (IS_SCENARIO_RUNNING(record.state)) {
-                            notify({
-                                level: 'warn',
+                            notify({ level: 'warn',
                                 message: 'scenario name cannot be changed during execution.'
                             });
                             return false;
@@ -211,120 +185,96 @@ let Scenario = class Scenario extends connect(store)(p13n(localize(i18next)(Page
                         return true;
                     }
                 },
-                {
-                    type: 'string',
+                { type: 'string',
                     name: 'type',
                     header: i18next.t('field.type'),
-                    record: {
-                        editable: true
+                    record: { editable: true
                     },
                     filter: 'search',
                     sortable: true,
                     width: 100
                 },
-                {
-                    type: 'string',
+                { type: 'string',
                     name: 'description',
                     label: true,
                     header: i18next.t('field.description'),
-                    record: {
-                        editable: true
+                    record: { editable: true
                     },
                     filter: 'search',
                     width: 400
                 },
-                {
-                    type: 'select',
+                { type: 'select',
                     name: 'iteration',
                     header: i18next.t('field.iteration-scope'),
-                    record: {
-                        editable: true,
+                    record: { editable: true,
                         options: ['', 'SELF', 'CHILDREN', 'SELF & CHILDREN']
                     },
                     width: 120
                 },
-                {
-                    type: 'crontab',
+                { type: 'crontab',
                     name: 'schedule',
                     label: true,
                     header: i18next.t('field.schedule'),
-                    record: {
-                        editable: true
+                    record: { editable: true
                     },
                     width: 110
                 },
-                {
-                    type: 'timezone',
+                { type: 'timezone',
                     name: 'timezone',
                     header: i18next.t('field.timezone'),
-                    record: {
-                        editable: true
+                    record: { editable: true
                     },
                     width: 120
                 },
-                {
-                    type: 'number',
+                { type: 'number',
                     name: 'ttl',
                     header: i18next.t('field.ttl-seconds'),
-                    record: {
-                        editable: true
+                    record: { editable: true
                     },
                     width: 80
                 },
-                {
-                    type: 'resource-object',
+                { type: 'resource-object',
                     name: 'role',
                     label: true,
                     header: i18next.t('field.required role'),
-                    record: {
-                        editable: true,
-                        options: {
-                            title: i18next.t('title.lookup role'),
+                    record: { editable: true,
+                        options: { title: i18next.t('title.lookup role'),
                             queryName: 'roles'
                         }
                     },
                     width: 200
                 },
-                {
-                    type: 'checkbox',
+                { type: 'checkbox',
                     name: 'active',
                     label: true,
                     header: i18next.t('field.startup-scenario'),
-                    record: {
-                        align: 'center',
+                    record: { align: 'center',
                         editable: true
                     },
                     sortable: true,
                     width: 60
                 },
-                {
-                    type: 'object',
+                { type: 'object',
                     name: 'updater',
                     header: i18next.t('field.updater'),
-                    record: {
-                        editable: false
+                    record: { editable: false
                     },
                     width: 85
                 },
-                {
-                    type: 'datetime',
+                { type: 'datetime',
                     name: 'updatedAt',
                     header: i18next.t('field.updated_at'),
-                    record: {
-                        editable: false
+                    record: { editable: false
                     },
                     sortable: true,
                     width: 180
                 }
             ],
-            rows: {
-                selectable: {
-                    multiple: true
+            rows: { selectable: { multiple: true
                 }
             },
             sorters: [
-                {
-                    name: 'name'
+                { name: 'name'
                 }
             ]
         };
@@ -335,12 +285,8 @@ let Scenario = class Scenario extends connect(store)(p13n(localize(i18next)(Page
         }
     }
     async fetchHandler({ page, limit, sortings = [], filters = [] }) {
-        const response = await client.query({
-            query: gql `
-        query ($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {
-          responses: scenarios(filters: $filters, pagination: $pagination, sortings: $sortings) {
-            items {
-              id
+        const response = await client.query({ query: gql `
+        query ($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {           responses: scenarios(filters: $filters, pagination: $pagination, sortings: $sortings) {             items {               id
               name
               type
               description
@@ -351,18 +297,15 @@ let Scenario = class Scenario extends connect(store)(p13n(localize(i18next)(Page
               scheduleId
               timezone
               ttl
-              role {
-                id
+              role {                 id
                 name
                 description
-              }
-              updater {
-                id
+ }
+              updater {                 id
                 name
-              }
+ }
               updatedAt
-              steps {
-                name
+              steps {                 name
                 description
                 sequence
                 task
@@ -370,43 +313,36 @@ let Scenario = class Scenario extends connect(store)(p13n(localize(i18next)(Page
                 log
                 connection
                 params
-              }
-            }
+ }
+ }
             total
-          }
-        }
+ }
+ }
       `,
-            variables: {
-                filters,
+            variables: { filters,
                 pagination: { page, limit },
                 sortings
             }
         });
-        return {
-            total: response.data.responses.total || 0,
+        return { total: response.data.responses.total || 0,
             records: response.data.responses.items || []
         };
     }
     async fetchTaskTypes() {
-        const response = await client.query({
-            query: gql `
-        query {
-          taskTypes {
-            items {
-              name
+        const response = await client.query({ query: gql `
+        query {           taskTypes {             items {               name
               description
               help
-              parameterSpec {
-                type
+              parameterSpec {                 type
                 name
                 label
                 placeholder
                 property
                 styles
-              }
-            }
-          }
-        }
+ }
+ }
+ }
+ }
       `
         });
         if (!response.errors) {
@@ -423,20 +359,16 @@ let Scenario = class Scenario extends connect(store)(p13n(localize(i18next)(Page
         if (confirm(i18next.t('text.sure_to_x', { x: i18next.t('text.delete') }))) {
             const ids = this.grist.selected.map(record => record.id);
             if (ids && ids.length > 0) {
-                const response = await client.mutate({
-                    mutation: gql `
-            mutation ($ids: [String!]!) {
-              deleteScenarios(ids: $ids)
-            }
+                const response = await client.mutate({ mutation: gql `
+            mutation ($ids: [String!]!) {               deleteScenarios(ids: $ids)
+ }
           `,
-                    variables: {
-                        ids
+                    variables: { ids
                     }
                 });
                 if (!response.errors) {
                     this.grist.fetch();
-                    notify({
-                        message: i18next.t('text.info_x_successfully', { x: i18next.t('text.delete') })
+                    notify({ message: i18next.t('text.info_x_successfully', { x: i18next.t('text.delete') })
                     });
                 }
             }
@@ -448,16 +380,12 @@ let Scenario = class Scenario extends connect(store)(p13n(localize(i18next)(Page
             return;
         if (!confirm(i18next.t('text.sure_to_x', { x: i18next.t('text.copy') })))
             return;
-        var response = await client.mutate({
-            mutation: gql `
-        mutation ($ids: [String!]!) {
-          copyScenarios(ids: $ids) {
-            id
-          }
-        }
+        var response = await client.mutate({ mutation: gql `
+        mutation ($ids: [String!]!) {           copyScenarios(ids: $ids) {             id
+ }
+ }
       `,
-            variables: {
-                ids: selected.map(r => r.id)
+            variables: { ids: selected.map(r => r.id)
             }
         });
         if (!response.errors)
@@ -477,16 +405,12 @@ let Scenario = class Scenario extends connect(store)(p13n(localize(i18next)(Page
                 patchField.cuFlag = patch.__dirty__;
                 return patchField;
             });
-            const response = await client.mutate({
-                mutation: gql `
-          mutation ($patches: [ScenarioPatch!]!) {
-            updateMultipleScenario(patches: $patches) {
-              name
-            }
-          }
+            const response = await client.mutate({ mutation: gql `
+          mutation ($patches: [ScenarioPatch!]!) {             updateMultipleScenario(patches: $patches) {               name
+ }
+ }
         `,
-                variables: {
-                    patches
+                variables: { patches
                 }
             });
             if (!response.errors)
@@ -494,98 +418,76 @@ let Scenario = class Scenario extends connect(store)(p13n(localize(i18next)(Page
         }
     }
     async startScenario(record) {
-        var { data, errors } = await client.mutate({
-            mutation: gql `
-        mutation ($scenarioName: String!, $instanceName: String) {
-          startScenario(scenarioName: $scenarioName, instanceName: $instanceName) {
-            state
-          }
-        }
+        var { data, errors } = await client.mutate({ mutation: gql `
+        mutation ($scenarioName: String!, $instanceName: String) {           startScenario(scenarioName: $scenarioName, instanceName: $instanceName) {             state
+ }
+ }
       `,
-            variables: {
-                scenarioName: record.name,
+            variables: { scenarioName: record.name,
                 instanceName: record.name
             }
         });
         if (data && data.startScenario) {
             record.state = data.startScenario.state;
-            notify({
-                level: 'info',
+            notify({ level: 'info',
                 message: `${IS_SCENARIO_RUNNING(state) ? 'success' : 'fail'} to start scenario : ${record.name}`
             });
         }
         this.grist.fetch();
     }
     async stopScenario(record) {
-        var response = await client.mutate({
-            mutation: gql `
-        mutation ($instanceName: String!) {
-          stopScenario(instanceName: $instanceName) {
-            state
-          }
-        }
+        var response = await client.mutate({ mutation: gql `
+        mutation ($instanceName: String!) {           stopScenario(instanceName: $instanceName) {             state
+ }
+ }
       `,
-            variables: {
-                instanceName: record.name
+            variables: { instanceName: record.name
             }
         });
         if (!response.errors) {
-            notify({
-                level: 'info',
+            notify({ level: 'info',
                 message: `success to stop scenario : ${record.name}`
             });
         }
         else {
-            notify({
-                level: 'error',
+            notify({ level: 'error',
                 message: `${response.errors.map(error => error.message).join('\n')}`
             });
         }
         this.grist.fetch();
     }
     async startScenarioSchedule(record) {
-        var response = await client.mutate({
-            mutation: gql `
-        mutation ($scenarioId: String!) {
-          startScenarioSchedule(scenarioId: $scenarioId) {
-            scheduleId
-          }
-        }
+        var response = await client.mutate({ mutation: gql `
+        mutation ($scenarioId: String!) {           startScenarioSchedule(scenarioId: $scenarioId) {             scheduleId
+ }
+ }
       `,
-            variables: {
-                scenarioId: record.id
+            variables: { scenarioId: record.id
             }
         });
         const scheduleId = response.data.startScenarioSchedule.scheduleId;
         record.scheduleId = scheduleId;
-        notify({
-            level: 'info',
+        notify({ level: 'info',
             message: `${record.scheduleId ? 'success' : 'fail'} to start scenario schedule : ${record.name}`
         });
         this.grist.fetch();
     }
     async stopScenarioSchedule(record) {
-        var response = await client.mutate({
-            mutation: gql `
-        mutation ($scenarioId: String!) {
-          stopScenarioSchedule(scenarioId: $scenarioId) {
-            scheduleId
-          }
-        }
+        var response = await client.mutate({ mutation: gql `
+        mutation ($scenarioId: String!) {           stopScenarioSchedule(scenarioId: $scenarioId) {             scheduleId
+ }
+ }
       `,
-            variables: {
-                scenarioId: record.id
+            variables: { scenarioId: record.id
             }
         });
         if (!response.errors) {
-            notify({
-                level: 'info',
+            notify({ level: 'info',
                 message: `success to stop scenario schedule : ${record.name}`
             });
         }
         else {
-            notify({
-                level: 'error',
+            notify({ level: 'error',
                 message: `${response.errors.map(error => error.message).join('\n')}`
             });
         }
@@ -611,8 +513,7 @@ let Scenario = class Scenario extends connect(store)(p13n(localize(i18next)(Page
             this.grist.fetch();
         }}"
         ></scenario-importer>
-      `, {
-            backdrop: true,
+      `, { backdrop: true,
             size: 'large',
             title: i18next.t('title.import scenario')
         });