@things-factory/integration-ui 9.0.0-beta.24 → 9.0.0-beta.27

package/dist-client/pages/scenario.js

@@ -1,632 +0,0 @@
-import { __decorate, __metadata } from "tslib";
-import '@operato/data-grist';
-import './scenario-detail.js';
-import './scenario-importer.js';
-import gql from 'graphql-tag';
-import { css, html } from 'lit';
-import { customElement, property, query, state } from 'lit/decorators.js';
-import moment from '@operato/moment-timezone-es';
-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 { CommonButtonStyles, CommonGristStyles, ScrollbarStyles } from '@operato/styles';
-import { isMobileDevice } from '@operato/utils';
-import { p13n } from '@operato/p13n';
-function getSystemTimeZone() {
-    try {
-        const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
-        if (!timeZone) {
-            throw new Error('Unable to resolve timeZone');
-        }
-        return timeZone;
-    }
-    catch (e) {
-        console.warn('Failed to get system timeZone, falling back to UTC.', e);
-        return 'UTC';
-    }
-}
-const DEFAULT_TZ = getSystemTimeZone();
-const TIMEZONE_OPTIONS = ['', DEFAULT_TZ, ...moment.tz.names().filter(tz => tz !== DEFAULT_TZ)];
-function IS_SCENARIO_RUNNING(state) {
-    return state && state !== 'UNLOADED';
-}
-let Scenario = class Scenario extends connect(store)(p13n(localize(i18next)(PageView))) {
-    constructor() {
-        super(...arguments);
-        this.active = false;
-    }
-    static get styles() {
-        return [
-            CommonGristStyles,
-            ScrollbarStyles,
-            css `
-        :host {
-          display: flex;
-          flex-direction: column;
-
-          overflow: hidden;
-        }
-
-        ox-grist {
-          overflow-y: auto;
-          flex: 1;
-        }
-      `
-        ];
-    }
-    get context() {
-        var _a;
-        return {
-            title: i18next.t('text.scenario list'),
-            search: {
-                handler: search => {
-                    this.grist.searchText = search;
-                },
-                value: ((_a = this.grist) === null || _a === void 0 ? void 0 : _a.searchText) || ''
-            },
-            // 필터가 설정되면, 아래 코멘트 해제
-            // filter: {
-            //   handler: () => {
-            //     const display = this.headroom.style.display
-            //     this.headroom.style.display = display !== 'none' ? 'none' : 'flex'
-            //   }
-            // },
-            help: 'integration/ui/scenario',
-            actions: [
-                Object.assign({ title: i18next.t('button.start monitor'), action: () => {
-                        navigate('integration-monitor');
-                    } }, CommonButtonStyles.preview),
-                Object.assign({ title: i18next.t('button.copy'), action: this._copyScenario.bind(this) }, CommonButtonStyles.copy),
-                Object.assign({ title: i18next.t('button.save'), action: this._updateScenario.bind(this) }, CommonButtonStyles.save),
-                Object.assign({ title: i18next.t('button.delete'), action: this._deleteScenario.bind(this) }, CommonButtonStyles.delete)
-            ],
-            exportable: {
-                name: i18next.t('text.scenario list'),
-                data: this.exportHandler.bind(this)
-            },
-            importable: {
-                handler: this.importHandler.bind(this)
-            }
-        };
-    }
-    render() {
-        return html `
-      <ox-grist
-        .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
-        .config=${this.gristConfig}
-        .fetchHandler=${this.fetchHandler.bind(this)}
-        .personalConfigProvider=${this.getPagePreferenceProvider('ox-grist')}
-      >
-        <ox-grist-personalizer slot="setting"></ox-grist-personalizer>
-      </ox-grist>
-    `;
-    }
-    async pageInitialized(lifecycle) {
-        this.fetchTaskTypes();
-        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',
-                    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) => {
-                            if (!record || !record.id || (!record.scheduleId && !record.schedule)) {
-                                return;
-                            }
-                            if (record.scheduleId) {
-                                this.stopScenarioSchedule(record);
-                            }
-                            else {
-                                this.startScenarioSchedule(record);
-                            }
-                        }
-                    }
-                },
-                {
-                    type: 'gutter',
-                    gutterName: 'button',
-                    name: 'state',
-                    fixed: true,
-                    icon: record => !record ? 'play_arrow' : record.id ? (IS_SCENARIO_RUNNING(record.state) ? 'pause' : 'play_arrow') : '',
-                    iconOnly: false,
-                    title: record => !record
-                        ? i18next.t('button.start')
-                        : record.id
-                            ? IS_SCENARIO_RUNNING(record.state)
-                                ? i18next.t('button.stop')
-                                : i18next.t('button.start')
-                            : '',
-                    width: 72,
-                    handlers: {
-                        click: (columns, data, column, record, rowIndex) => {
-                            if (!record || !record.name) {
-                                /* TODO record가 새로 추가된 것이면 리턴하도록 한다. */
-                                return;
-                            }
-                            if (IS_SCENARIO_RUNNING(record.state)) {
-                                this.stopScenario(record);
-                            }
-                            else {
-                                this.startScenario(record);
-                            }
-                        }
-                    }
-                },
-                {
-                    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) => {
-                            if (!record.id)
-                                return;
-                            openPopup(html `
-                  <scenario-detail
-                    .scenario=${record}
-                    .taskTypes=${this.taskTypes}
-                    @requestRefresh="${() => this.grist.fetch()}"
-                  ></scenario-detail>
-                `, {
-                                backdrop: true,
-                                help: 'integration/ui/scenario-detail',
-                                size: 'large',
-                                title: i18next.t('title.scenario-detail')
-                            });
-                        }
-                    }
-                },
-                {
-                    type: 'string',
-                    name: 'name',
-                    fixed: true,
-                    label: true,
-                    header: i18next.t('field.name'),
-                    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',
-                                message: 'scenario name cannot be changed during execution.'
-                            });
-                            return false;
-                        }
-                        return true;
-                    }
-                },
-                {
-                    type: 'string',
-                    name: 'type',
-                    header: i18next.t('field.type'),
-                    record: {
-                        editable: true
-                    },
-                    filter: 'search',
-                    sortable: true,
-                    width: 100
-                },
-                {
-                    type: 'string',
-                    name: 'description',
-                    label: true,
-                    header: i18next.t('field.description'),
-                    record: {
-                        editable: true
-                    },
-                    filter: 'search',
-                    width: 400
-                },
-                {
-                    type: 'crontab',
-                    name: 'schedule',
-                    label: true,
-                    header: i18next.t('field.schedule'),
-                    record: {
-                        editable: true
-                    },
-                    width: 110
-                },
-                {
-                    type: 'select',
-                    name: 'timezone',
-                    header: i18next.t('field.timezone'),
-                    record: {
-                        editable: true,
-                        options: TIMEZONE_OPTIONS
-                    },
-                    width: 120
-                },
-                {
-                    type: 'number',
-                    name: 'ttl',
-                    header: i18next.t('field.ttl-seconds'),
-                    record: {
-                        editable: true
-                    },
-                    width: 80
-                },
-                {
-                    type: 'resource-object',
-                    name: 'role',
-                    label: true,
-                    header: i18next.t('field.required role'),
-                    record: {
-                        editable: true,
-                        options: {
-                            title: i18next.t('title.lookup role'),
-                            queryName: 'roles'
-                        }
-                    },
-                    width: 200
-                },
-                {
-                    type: 'checkbox',
-                    name: 'active',
-                    label: true,
-                    header: i18next.t('field.active'),
-                    record: {
-                        align: 'center',
-                        editable: true
-                    },
-                    sortable: true,
-                    width: 60
-                },
-                {
-                    type: 'object',
-                    name: 'updater',
-                    header: i18next.t('field.updater'),
-                    record: {
-                        editable: false
-                    },
-                    width: 85
-                },
-                {
-                    type: 'datetime',
-                    name: 'updatedAt',
-                    header: i18next.t('field.updated_at'),
-                    record: {
-                        editable: false
-                    },
-                    sortable: true,
-                    width: 180
-                }
-            ],
-            rows: {
-                selectable: {
-                    multiple: true
-                }
-            },
-            sorters: [
-                {
-                    name: 'name'
-                }
-            ]
-        };
-    }
-    async pageUpdated(changes, lifecycle) {
-        if (this.active) {
-            this.grist.fetch();
-        }
-    }
-    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
-              name
-              type
-              description
-              active
-              state
-              schedule
-              scheduleId
-              timezone
-              ttl
-              role {
-                id
-                name
-                description
-              }
-              updater {
-                id
-                name
-              }
-              updatedAt
-              steps {
-                name
-                description
-                sequence
-                task
-                skip
-                log
-                connection
-                params
-              }
-            }
-            total
-          }
-        }
-      `,
-            variables: {
-                filters,
-                pagination: { page, limit },
-                sortings
-            }
-        });
-        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
-              description
-              help
-              parameterSpec {
-                type
-                name
-                label
-                placeholder
-                property
-                styles
-              }
-            }
-          }
-        }
-      `
-        });
-        if (!response.errors) {
-            this.taskTypes = response.data.taskTypes.items.reduce((taskTypes, taskType) => {
-                taskTypes[taskType.name] = taskType;
-                return taskTypes;
-            }, {});
-        }
-        else {
-            console.error('fetch taskTypes error');
-        }
-    }
-    async _deleteScenario() {
-        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)
-            }
-          `,
-                    variables: {
-                        ids
-                    }
-                });
-                if (!response.errors) {
-                    this.grist.fetch();
-                    notify({
-                        message: i18next.t('text.info_x_successfully', { x: i18next.t('text.delete') })
-                    });
-                }
-            }
-        }
-    }
-    async _copyScenario() {
-        var selected = this.grist.selected;
-        if (selected.length == 0)
-            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
-          }
-        }
-      `,
-            variables: {
-                ids: selected.map(r => r.id)
-            }
-        });
-        if (!response.errors)
-            this.grist.fetch();
-    }
-    async _updateScenario() {
-        var patches = this.grist.dirtyRecords;
-        if (patches && patches.length) {
-            patches = patches.map(patch => {
-                let patchField = patch.id ? { id: patch.id } : {};
-                const dirtyFields = patch.__dirtyfields__;
-                for (let key in dirtyFields) {
-                    if (['message', 'step', 'steps', 'progress', 'rounds'].indexOf(key) == -1) {
-                        patchField[key] = dirtyFields[key].after;
-                    }
-                }
-                patchField.cuFlag = patch.__dirty__;
-                return patchField;
-            });
-            const response = await client.mutate({
-                mutation: gql `
-          mutation ($patches: [ScenarioPatch!]!) {
-            updateMultipleScenario(patches: $patches) {
-              name
-            }
-          }
-        `,
-                variables: {
-                    patches
-                }
-            });
-            if (!response.errors)
-                this.grist.fetch();
-        }
-    }
-    async startScenario(record) {
-        var { data, errors } = await client.mutate({
-            mutation: gql `
-        mutation ($scenarioName: String!, $instanceName: String) {
-          startScenario(scenarioName: $scenarioName, instanceName: $instanceName) {
-            state
-          }
-        }
-      `,
-            variables: {
-                scenarioName: record.name,
-                instanceName: record.name
-            }
-        });
-        if (data && data.startScenario) {
-            record.state = data.startScenario.state;
-            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
-          }
-        }
-      `,
-            variables: {
-                instanceName: record.name
-            }
-        });
-        if (!response.errors) {
-            notify({
-                level: 'info',
-                message: `success to stop scenario : ${record.name}`
-            });
-        }
-        else {
-            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
-          }
-        }
-      `,
-            variables: {
-                scenarioId: record.id
-            }
-        });
-        const scheduleId = response.data.startScenarioSchedule.scheduleId;
-        record.scheduleId = scheduleId;
-        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
-          }
-        }
-      `,
-            variables: {
-                scenarioId: record.id
-            }
-        });
-        if (!response.errors) {
-            notify({
-                level: 'info',
-                message: `success to stop scenario schedule : ${record.name}`
-            });
-        }
-        else {
-            notify({
-                level: 'error',
-                message: `${response.errors.map(error => error.message).join('\n')}`
-            });
-        }
-        this.grist.fetch();
-    }
-    async exportHandler() {
-        const exportTargets = this.grist.selected.length ? this.grist.selected : this.grist.dirtyData.records;
-        const targetFieldSet = new Set(['id', 'name', 'type', 'description', 'schedule', 'timezone', 'steps']);
-        return exportTargets.map(scenario => {
-            let tempObj = {};
-            for (const field of targetFieldSet) {
-                tempObj[field] = scenario[field];
-            }
-            return tempObj;
-        });
-    }
-    async importHandler(records) {
-        openPopup(html `
-        <scenario-importer
-          .scenarios="${records}"
-          @imported="${() => {
-            history.back();
-            this.grist.fetch();
-        }}"
-        ></scenario-importer>
-      `, {
-            backdrop: true,
-            size: 'large',
-            title: i18next.t('title.import scenario')
-        });
-    }
-};
-__decorate([
-    property({ type: Boolean }),
-    __metadata("design:type", Boolean)
-], Scenario.prototype, "active", void 0);
-__decorate([
-    property({ type: Object }),
-    __metadata("design:type", Object)
-], Scenario.prototype, "gristConfig", void 0);
-__decorate([
-    property({ type: Object }),
-    __metadata("design:type", Object)
-], Scenario.prototype, "taskTypes", void 0);
-__decorate([
-    query('ox-grist'),
-    __metadata("design:type", DataGrist)
-], Scenario.prototype, "grist", void 0);
-Scenario = __decorate([
-    customElement('scenario-page')
-], Scenario);
-export { Scenario };
-//# sourceMappingURL=scenario.js.map