npm - @things-factory/integration-ui - Versions diffs - 9.0.0-beta.79 → 9.0.0-beta.80 - Mend

@things-factory/integration-ui 9.0.0-beta.79 → 9.0.0-beta.80

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (57) hide show

package/dist-client/viewparts/scenario-instance-log-view.js CHANGED Viewed

@@ -13,6 +13,50 @@ let ScenarioInstanceLogView = class ScenarioInstanceLogView extends connect(stor
         super(...arguments);
         this.startable = false;
     }
+    static { this.styles = [
+        ScrollbarStyles,
+        css `
+      :host {
+        display: flex;
+        flex-direction: column;
+        background-color: var(--md-sys-color-surface);
+        padding: var(--spacing-large);
+      }
+      :host([active]) {
+        padding: 0;
+      }
+      [content] {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        overflow: auto;
+        font-size: var(--fontsize-small);
+      }
+      div.error {
+        color: #8b0000;
+      }
+      div.warn {
+        color: #ff6b6b;
+      }
+      span {
+        color: var(--md-sys-color-primary);
+      }
+      #start {
+        position: absolute;
+        bottom: 15px;
+        right: 16px;
+        text-decoration: auto;
+      }
+    `
+    ]; }
     firstUpdated() {
         this.logs = [];
         this.startSubscribe();
@@ -69,55 +113,10 @@ let ScenarioInstanceLogView = class ScenarioInstanceLogView extends connect(stor
         });
     }
     async stopSubscribe() {
-        var _a;
-        await ((_a = this.subscription) === null || _a === void 0 ? void 0 : _a.unsubscribe());
+        await this.subscription?.unsubscribe();
         delete this.subscription;
     }
 };
-ScenarioInstanceLogView.styles = [
-    ScrollbarStyles,
-    css `
-      :host {
-        display: flex;
-        flex-direction: column;
-        background-color: var(--md-sys-color-surface);
-        padding: var(--spacing-large);
-      }
-      :host([active]) {
-        padding: 0;
-      }
-      [content] {
-        flex: 1;
-        display: flex;
-        flex-direction: column;
-        overflow: auto;
-        font-size: var(--fontsize-small);
-      }
-      div.error {
-        color: #8b0000;
-      }
-      div.warn {
-        color: #ff6b6b;
-      }
-      span {
-        color: var(--md-sys-color-primary);
-      }
-      #start {
-        position: absolute;
-        bottom: 15px;
-        right: 16px;
-        text-decoration: auto;
-      }
-    `
-];
 __decorate([
     property({ type: String }),
     __metadata("design:type", String)

package/dist-client/viewparts/scenario-instance-log-view.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"scenario-instance-log-view.js","sourceRoot":"","sources":["../../client/viewparts/scenario-instance-log-view.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,0BAA0B,CAAA;AAEjC,OAAO,GAAG,MAAM,aAAa,CAAA;AAE7B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAA;AACpD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAS,MAAM,mBAAmB,CAAA;AAClE,OAAO,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAA;AAEtD,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAC5C,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AACtC,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAG1C,IAAM,uBAAuB,GAA7B,MAAM,uBAAwB,SAAQ,OAAO,CAAC,KAAK,CAAC,CAAC,UAAU,CAAC;IAAhE;;QAiDwB,cAAS,GAAY,KAAK,CAAA;IA2EzD,CAAC;~~IAvEC~~,YAAY;QACV,IAAI,CAAC,IAAI,GAAG,EAAE,CAAA;QACd,IAAI,CAAC,cAAc,EAAE,CAAA;IACvB,CAAC;IAED,oBAAoB;QAClB,KAAK,CAAC,oBAAoB,EAAE,CAAA;QAC5B,IAAI,CAAC,aAAa,EAAE,CAAA;IACtB,CAAC;IAED,MAAM;QACJ,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,EAAE,CAAA;QAE5B,OAAO,IAAI,CAAA;;;UAGL,IAAI,CAAC,GAAG,CACR,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,IAAI,CAAA;0BACvB,KAAK;sBACT,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC,cAAc,EAAE,mBAAmB,KAAK,aAAa,OAAO;;WAE3F,CACF;;QAED,IAAI,CAAC,SAAS;YACd,CAAC,CAAC,IAAI,CAAA,2CAA2C,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,OAAO,CAAC,CAAC;;oBAEvF;YACZ,CAAC,CAAC,OAAO;KACZ,CAAA;IACH,CAAC;IAED,KAAK,CAAC,cAAc;QAClB,IAAI,CAAC,YAAY,GAAG,MAAM,SAAS,CACjC;YACE,KAAK,EAAE,GAAG,CAAA;;;;;;;;SAQT;YACD,SAAS,EAAE;gBACT,YAAY,EAAE,IAAI,CAAC,YAAY;gBAC/B,YAAY,EAAE,IAAI,CAAC,YAAY;aAChC;SACF,EACD;YACE,IAAI,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;gBACvB,IAAI,SAAS,GAAG,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,SAAS,KAAK,IAAI,CAAC,YAAY,CAAA;gBAExE,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;gBACxB,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAA;gBAC3C,IAAI,CAAC,aAAa,EAAE,CAAA;gBAEpB,IAAI,SAAS,EAAE,CAAC;oBACd,6DAA6D;oBAC7D,MAAM,IAAI,CAAC,cAAc,CAAA;oBACzB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,CAAA;gBACxD,CAAC;YACH,CAAC;SACF,CACF,CAAA;IACH,CAAC;IAED,KAAK,CAAC,aAAa;;QACjB,MAAM,~~CAAA,MAAA,~~IAAI,CAAC,YAAY,~~0CAAE~~,WAAW,EAAE,CAAA~~,CAAA~~;QACtC,OAAO,IAAI,CAAC,YAAY,CAAA;IAC1B,CAAC;;~~AA1HM,8BAAM,GAAG~~;~~IACd,eAAe;IACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAwCF;CACF,AA3CY,CA2CZ;AAE2B;~~IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;6DAAsB;AACrB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;6DAAsB;AACtB;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;;qDAAU;AACP;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;;0DAA2B;AAjD5C,uBAAuB;IADnC,aAAa,CAAC,4BAA4B,CAAC;GAC/B,uBAAuB,CA4HnC","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@material/web/fab/fab.js'\n\nimport gql from 'graphql-tag'\n\nimport { css, html, LitElement, nothing } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { connect } from 'pwa-helpers/connect-mixin.js'\n\nimport { subscribe } from '@operato/graphql'\nimport { store } from '@operato/shell'\nimport { ScrollbarStyles } from '@operato/styles'\n\n@customElement('scenario-instance-log-view')\nexport class ScenarioInstanceLogView extends connect(store)(LitElement) {\n static styles = [\n ScrollbarStyles,\n css`\n :host {\n display: flex;\n flex-direction: column;\n background-color: var(--md-sys-color-surface);\n padding: var(--spacing-large);\n }\n\n :host([active]) {\n padding: 0;\n }\n\n [content] {\n flex: 1;\n\n display: flex;\n flex-direction: column;\n overflow: auto;\n\n font-size: var(--fontsize-small);\n }\n\n div.error {\n color: #8b0000;\n }\n\n div.warn {\n color: #ff6b6b;\n }\n\n span {\n color: var(--md-sys-color-primary);\n }\n\n #start {\n position: absolute;\n bottom: 15px;\n right: 16px;\n text-decoration: auto;\n }\n `\n ]\n\n @property({ type: String }) scenarioName?: string\n @property({ type: String }) instanceName?: string\n @property({ type: Array }) logs: any\n @property({ type: Boolean }) startable: boolean = false\n\n subscription: any\n\n firstUpdated() {\n this.logs = []\n this.startSubscribe()\n }\n\n disconnectedCallback() {\n super.disconnectedCallback()\n this.stopSubscribe()\n }\n\n render() {\n const logs = this.logs \|\| []\n\n return html`\n <div options></div>\n <div content>\n ${logs.map(\n ({ timestamp, message, level }) => html`\n <div class=\"${level}\">\n <span>${new Date(timestamp).toLocaleString()}</span> <strong>${level}</strong> ${message}\n </div>\n `\n )}\n </div>\n ${this.startable\n ? html`<md-fab id=\"start\" title=\"start\" @click=${() => this.dispatchEvent(new CustomEvent('start'))}>\n <md-icon slot=\"icon\">play_arrow</md-icon>\n </md-fab>`\n : nothing}\n `\n }\n\n async startSubscribe() {\n this.subscription = await subscribe(\n {\n query: gql`\n subscription ($instanceName: String, $scenarioName: String, $level: String) {\n log: scenarioInstanceLog(instanceName: $instanceName, scenarioName: $scenarioName, level: $level) {\n level\n message\n timestamp\n }\n }\n `,\n variables: {\n instanceName: this.instanceName,\n scenarioName: this.scenarioName\n }\n },\n {\n next: async ({ data }) => {\n var wasBottom = this.scrollHeight - this.scrollTop === this.clientHeight\n\n this.logs.push(data.log)\n this.logs.length > 100 && this.logs.shift()\n this.requestUpdate()\n\n if (wasBottom) {\n /* this is not proved yet - to keep bottom scroll position */\n await this.updateComplete\n this.scrollTop = this.scrollHeight - this.clientHeight\n }\n }\n }\n )\n }\n\n async stopSubscribe() {\n await this.subscription?.unsubscribe()\n delete this.subscription\n }\n}\n"]}
1	+ {"version":3,"file":"scenario-instance-log-view.js","sourceRoot":"","sources":["../../client/viewparts/scenario-instance-log-view.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,0BAA0B,CAAA;AAEjC,OAAO,GAAG,MAAM,aAAa,CAAA;AAE7B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAA;AACpD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAS,MAAM,mBAAmB,CAAA;AAClE,OAAO,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAA;AAEtD,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAC5C,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AACtC,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAG1C,IAAM,uBAAuB,GAA7B,MAAM,uBAAwB,SAAQ,OAAO,CAAC,KAAK,CAAC,CAAC,UAAU,CAAC;IAAhE;;QAiDwB,cAAS,GAAY,KAAK,CAAA;IA2EzD,CAAC;aA3HQ,WAAM,GAAG;QACd,eAAe;QACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAwCF;KACF,AA3CY,CA2CZ;IASD,YAAY;QACV,IAAI,CAAC,IAAI,GAAG,EAAE,CAAA;QACd,IAAI,CAAC,cAAc,EAAE,CAAA;IACvB,CAAC;IAED,oBAAoB;QAClB,KAAK,CAAC,oBAAoB,EAAE,CAAA;QAC5B,IAAI,CAAC,aAAa,EAAE,CAAA;IACtB,CAAC;IAED,MAAM;QACJ,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,EAAE,CAAA;QAE5B,OAAO,IAAI,CAAA;;;UAGL,IAAI,CAAC,GAAG,CACR,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,IAAI,CAAA;0BACvB,KAAK;sBACT,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC,cAAc,EAAE,mBAAmB,KAAK,aAAa,OAAO;;WAE3F,CACF;;QAED,IAAI,CAAC,SAAS;YACd,CAAC,CAAC,IAAI,CAAA,2CAA2C,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,OAAO,CAAC,CAAC;;oBAEvF;YACZ,CAAC,CAAC,OAAO;KACZ,CAAA;IACH,CAAC;IAED,KAAK,CAAC,cAAc;QAClB,IAAI,CAAC,YAAY,GAAG,MAAM,SAAS,CACjC;YACE,KAAK,EAAE,GAAG,CAAA;;;;;;;;SAQT;YACD,SAAS,EAAE;gBACT,YAAY,EAAE,IAAI,CAAC,YAAY;gBAC/B,YAAY,EAAE,IAAI,CAAC,YAAY;aAChC;SACF,EACD;YACE,IAAI,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;gBACvB,IAAI,SAAS,GAAG,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,SAAS,KAAK,IAAI,CAAC,YAAY,CAAA;gBAExE,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;gBACxB,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAA;gBAC3C,IAAI,CAAC,aAAa,EAAE,CAAA;gBAEpB,IAAI,SAAS,EAAE,CAAC;oBACd,6DAA6D;oBAC7D,MAAM,IAAI,CAAC,cAAc,CAAA;oBACzB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,CAAA;gBACxD,CAAC;YACH,CAAC;SACF,CACF,CAAA;IACH,CAAC;IAED,KAAK,CAAC,aAAa;QACjB,MAAM,IAAI,CAAC,YAAY,EAAE,WAAW,EAAE,CAAA;QACtC,OAAO,IAAI,CAAC,YAAY,CAAA;IAC1B,CAAC;;AA7E2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;6DAAsB;AACrB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;6DAAsB;AACtB;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;;qDAAU;AACP;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;;0DAA2B;AAjD5C,uBAAuB;IADnC,aAAa,CAAC,4BAA4B,CAAC;GAC/B,uBAAuB,CA4HnC","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@material/web/fab/fab.js'\n\nimport gql from 'graphql-tag'\n\nimport { css, html, LitElement, nothing } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { connect } from 'pwa-helpers/connect-mixin.js'\n\nimport { subscribe } from '@operato/graphql'\nimport { store } from '@operato/shell'\nimport { ScrollbarStyles } from '@operato/styles'\n\n@customElement('scenario-instance-log-view')\nexport class ScenarioInstanceLogView extends connect(store)(LitElement) {\n static styles = [\n ScrollbarStyles,\n css`\n :host {\n display: flex;\n flex-direction: column;\n background-color: var(--md-sys-color-surface);\n padding: var(--spacing-large);\n }\n\n :host([active]) {\n padding: 0;\n }\n\n [content] {\n flex: 1;\n\n display: flex;\n flex-direction: column;\n overflow: auto;\n\n font-size: var(--fontsize-small);\n }\n\n div.error {\n color: #8b0000;\n }\n\n div.warn {\n color: #ff6b6b;\n }\n\n span {\n color: var(--md-sys-color-primary);\n }\n\n #start {\n position: absolute;\n bottom: 15px;\n right: 16px;\n text-decoration: auto;\n }\n `\n ]\n\n @property({ type: String }) scenarioName?: string\n @property({ type: String }) instanceName?: string\n @property({ type: Array }) logs: any\n @property({ type: Boolean }) startable: boolean = false\n\n subscription: any\n\n firstUpdated() {\n this.logs = []\n this.startSubscribe()\n }\n\n disconnectedCallback() {\n super.disconnectedCallback()\n this.stopSubscribe()\n }\n\n render() {\n const logs = this.logs \|\| []\n\n return html`\n <div options></div>\n <div content>\n ${logs.map(\n ({ timestamp, message, level }) => html`\n <div class=\"${level}\">\n <span>${new Date(timestamp).toLocaleString()}</span> <strong>${level}</strong> ${message}\n </div>\n `\n )}\n </div>\n ${this.startable\n ? html`<md-fab id=\"start\" title=\"start\" @click=${() => this.dispatchEvent(new CustomEvent('start'))}>\n <md-icon slot=\"icon\">play_arrow</md-icon>\n </md-fab>`\n : nothing}\n `\n }\n\n async startSubscribe() {\n this.subscription = await subscribe(\n {\n query: gql`\n subscription ($instanceName: String, $scenarioName: String, $level: String) {\n log: scenarioInstanceLog(instanceName: $instanceName, scenarioName: $scenarioName, level: $level) {\n level\n message\n timestamp\n }\n }\n `,\n variables: {\n instanceName: this.instanceName,\n scenarioName: this.scenarioName\n }\n },\n {\n next: async ({ data }) => {\n var wasBottom = this.scrollHeight - this.scrollTop === this.clientHeight\n\n this.logs.push(data.log)\n this.logs.length > 100 && this.logs.shift()\n this.requestUpdate()\n\n if (wasBottom) {\n /* this is not proved yet - to keep bottom scroll position */\n await this.updateComplete\n this.scrollTop = this.scrollHeight - this.clientHeight\n }\n }\n }\n )\n }\n\n async stopSubscribe() {\n await this.subscription?.unsubscribe()\n delete this.subscription\n }\n}\n"]}

package/dist-client/viewparts/scenario-instance-monitor.js CHANGED Viewed

@@ -13,78 +13,9 @@ function IS_SCENARIO_RUNNING(state) {
     return state && state !== 'UNLOADED';
 }
 let ScenarioInstanceMonitor = class ScenarioInstanceMonitor extends localize(i18next)(LitElement) {
-    render() {
-        var instance = this.instance;
-        const { instanceName, progress, message, state } = instance;
-        const { rate = 0, steps = 0, step = 0, rounds = 0 } = progress || {};
-        const running = IS_SCENARIO_RUNNING(state);
-        return html `
-      <div name>${instanceName}</div>
-      <div progress-wrap>
-        <div progress>
-          <div id="progressbar" style="width:${rate}%;background-color:${this.color};"></div>
-        </div>
-        <div steps>${step}/${steps}</div>
-      </div>
-      <div buttons>
-        <md-icon @click=${e => (running ? this.stopScenario(instance) : this.startScenario(instance))}
-          >${running ? 'pause' : 'play_arrow'}</md-icon
-        >
-        <md-icon @click=${e => this.showInstanceDetail()}>wysiwyg</md-icon>
-        <span><strong>${rounds}</strong> round</span>
-      </div>
-    `;
-    }
-    async startScenario(instance) {
-        var response = await client.mutate({
-            mutation: gql `
-        mutation ($scenarioName: String!, $instanceName: String) {
-          startScenario(scenarioName: $scenarioName, instanceName: $instanceName) {
-            state
-          }
-        }
-      `,
-            variables: {
-                scenarioName: instance.scenarioName,
-                instanceName: instance.instanceName
-            }
-        });
-        notify({
-            level: 'info',
-            message: `${IS_SCENARIO_RUNNING(response.data.startScenario.state) ? 'success' : 'fail'} to start scenario : ${instance.scenarioName}`
-        });
-    }
-    async stopScenario(instance) {
-        var response = await client.mutate({
-            mutation: gql `
-        mutation ($instanceName: String!) {
-          stopScenario(instanceName: $instanceName) {
-            state
-          }
-        }
-      `,
-            variables: {
-                instanceName: instance.instanceName
-            }
-        });
-        notify({
-            level: 'info',
-            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')}`
-        });
-    }
-};
-ScenarioInstanceMonitor.styles = [
-    ScrollbarStyles,
-    css `
+    static { this.styles = [
+        ScrollbarStyles,
+        css `
       :host {
         display: block;
         overflow: hidden;
@@ -159,7 +90,76 @@ ScenarioInstanceMonitor.styles = [
         }
       }
     `
-];
+    ]; }
+    render() {
+        var instance = this.instance;
+        const { instanceName, progress, message, state } = instance;
+        const { rate = 0, steps = 0, step = 0, rounds = 0 } = progress || {};
+        const running = IS_SCENARIO_RUNNING(state);
+        return html `
+      <div name>${instanceName}</div>
+      <div progress-wrap>
+        <div progress>
+          <div id="progressbar" style="width:${rate}%;background-color:${this.color};"></div>
+        </div>
+        <div steps>${step}/${steps}</div>
+      </div>
+      <div buttons>
+        <md-icon @click=${e => (running ? this.stopScenario(instance) : this.startScenario(instance))}
+          >${running ? 'pause' : 'play_arrow'}</md-icon
+        >
+        <md-icon @click=${e => this.showInstanceDetail()}>wysiwyg</md-icon>
+        <span><strong>${rounds}</strong> round</span>
+      </div>
+    `;
+    }
+    async startScenario(instance) {
+        var response = await client.mutate({
+            mutation: gql `
+        mutation ($scenarioName: String!, $instanceName: String) {
+          startScenario(scenarioName: $scenarioName, instanceName: $instanceName) {
+            state
+          }
+        }
+      `,
+            variables: {
+                scenarioName: instance.scenarioName,
+                instanceName: instance.instanceName
+            }
+        });
+        notify({
+            level: 'info',
+            message: `${IS_SCENARIO_RUNNING(response.data.startScenario.state) ? 'success' : 'fail'} to start scenario : ${instance.scenarioName}`
+        });
+    }
+    async stopScenario(instance) {
+        var response = await client.mutate({
+            mutation: gql `
+        mutation ($instanceName: String!) {
+          stopScenario(instanceName: $instanceName) {
+            state
+          }
+        }
+      `,
+            variables: {
+                instanceName: instance.instanceName
+            }
+        });
+        notify({
+            level: 'info',
+            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')}`
+        });
+    }
+};
 __decorate([
     property({ type: Object }),
     __metadata("design:type", Object)

package/dist-client/viewparts/scenario-instance-monitor.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"scenario-instance-monitor.js","sourceRoot":"","sources":["../../client/viewparts/scenario-instance-monitor.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,qBAAqB,CAAA;AAC5B,OAAO,6BAA6B,CAAA;AAEpC,OAAO,GAAG,MAAM,aAAa,CAAA;AAC7B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAS,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AACzC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AACnD,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAEjD,SAAS,mBAAmB,CAAC,KAAK;IAChC,OAAO,KAAK,IAAI,KAAK,KAAK,UAAU,CAAA;AACtC,CAAC;AAGM,IAAM,uBAAuB,GAA7B,MAAM,uBAAwB,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;~~IAmFxE~~,MAAM;QACJ,IAAI,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAA;QAC5B,MAAM,EAAE,YAAY,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,GAAG,QAAQ,CAAA;QAC3D,MAAM,EAAE,IAAI,GAAG,CAAC,EAAE,KAAK,GAAG,CAAC,EAAE,IAAI,GAAG,CAAC,EAAE,MAAM,GAAG,CAAC,EAAE,GAAG,QAAQ,IAAI,EAAE,CAAA;QAEpE,MAAM,OAAO,GAAG,mBAAmB,CAAC,KAAK,CAAC,CAAA;QAE1C,OAAO,IAAI,CAAA;kBACG,YAAY;;;+CAGiB,IAAI,sBAAsB,IAAI,CAAC,KAAK;;qBAE9D,IAAI,IAAI,KAAK;;;0BAGR,CAAC,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;aACxF,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,YAAY;;0BAEnB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,kBAAkB,EAAE;wBAChC,MAAM;;KAEzB,CAAA;IACH,CAAC;IAED,KAAK,CAAC,aAAa,CAAC,QAAQ;QAC1B,IAAI,QAAQ,GAAG,MAAM,MAAM,CAAC,MAAM,CAAC;YACjC,QAAQ,EAAE,GAAG,CAAA;;;;;;OAMZ;YACD,SAAS,EAAE;gBACT,YAAY,EAAE,QAAQ,CAAC,YAAY;gBACnC,YAAY,EAAE,QAAQ,CAAC,YAAY;aACpC;SACF,CAAC,CAAA;QAEF,MAAM,CAAC;YACL,KAAK,EAAE,MAAM;YACb,OAAO,EAAE,GAAG,mBAAmB,CAAC,QAAQ,CAAC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,wBAAwB,QAAQ,CAAC,YAAY,EAAE;SACvI,CAAC,CAAA;IACJ,CAAC;IAED,KAAK,CAAC,YAAY,CAAC,QAAQ;QACzB,IAAI,QAAQ,GAAG,MAAM,MAAM,CAAC,MAAM,CAAC;YACjC,QAAQ,EAAE,GAAG,CAAA;;;;;;OAMZ;YACD,SAAS,EAAE;gBACT,YAAY,EAAE,QAAQ,CAAC,YAAY;aACpC;SACF,CAAC,CAAA;QAEF,MAAM,CAAC;YACL,KAAK,EAAE,MAAM;YACb,OAAO,EAAE,GAAG,mBAAmB,CAAC,QAAQ,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,uBAAuB,QAAQ,CAAC,YAAY,EAAE;SACrI,CAAC,CAAA;IACJ,CAAC;IAED,KAAK,CAAC,kBAAkB;QACtB,MAAM,EAAE,YAAY,EAAE,YAAY,EAAE,GAAG,IAAI,CAAC,QAAQ,CAAA;QACpD,SAAS,CACP,IAAI,CAAA;gDACsC,YAAY,kBAAkB,YAAY;OACnF,EACD;YACE,IAAI,EAAE,OAAO;YACb,KAAK,EAAE,GAAG,OAAO,CAAC,CAAC,CAAC,yBAAyB,CAAC,EAAE;SACjD,CACF,CAAA;IACH,CAAC;;~~AA/JM,8BAAM,GAAG~~;~~IACd,eAAe;IACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA0EF;CACF,AA7EY,CA6EZ;AAE2B;~~IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;yDAAc;AACb;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;sDAAe;AAjF/B,uBAAuB;IADnC,aAAa,CAAC,2BAA2B,CAAC;GAC9B,uBAAuB,CAiKnC","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@operato/data-grist'\nimport './scenario-instance-view.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { client } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { notify, openPopup } from '@operato/layout'\nimport { ScrollbarStyles } from '@operato/styles'\n\nfunction IS_SCENARIO_RUNNING(state) {\n return state && state !== 'UNLOADED'\n}\n\n@customElement('scenario-instance-monitor')\nexport class ScenarioInstanceMonitor extends localize(i18next)(LitElement) {\n static styles = [\n ScrollbarStyles,\n css`\n :host {\n display: block;\n overflow: hidden;\n position: relative;\n padding: var(--spacing-small);\n color: var(--md-sys-color-secondary);\n }\n\n [running] {\n background-color: lightgreen;\n }\n\n [name] {\n font-size: var(--fontsize-default);\n font-weight: bold;\n }\n\n [progress] {\n display: block;\n position: relative;\n\n width: 100%;\n margin: 2px;\n padding: 2px;\n box-sizing: border-box;\n\n border: var(--border-dim-color);\n border-radius: 10px;\n background-color: var(--md-sys-color-surface);\n }\n [progress-wrap] {\n display: flex;\n flex-direction: row;\n margin: 4px 0;\n }\n\n [running] [progress] {\n background-color: var(--md-sys-color-surface-variant);\n }\n\n [steps] {\n padding: 0 0 0 var(--spacing-small);\n }\n\n #progressbar {\n height: 100%;\n text-align: left;\n border-radius: 5px;\n animation: width 1s linear ease-out;\n }\n\n [buttons] {\n display: flex;\n flex-direction: row-reverse;\n --md-icon-size: 18px;\n\n border-top: var(--border-dim-color);\n padding: var(--spacing-medium) 0 0 0;\n text-align: right;\n }\n\n [buttons] md-icon {\n color: var(--md-sys-color-primary);\n }\n\n @keyframes width {\n 0% {\n width: 0;\n }\n 100% {\n width: auto;\n }\n }\n `\n ]\n\n @property({ type: Object }) instance: any\n @property({ type: String }) color?: string\n\n render() {\n var instance = this.instance\n const { instanceName, progress, message, state } = instance\n const { rate = 0, steps = 0, step = 0, rounds = 0 } = progress \|\| {}\n\n const running = IS_SCENARIO_RUNNING(state)\n\n return html`\n <div name>${instanceName}</div>\n <div progress-wrap>\n <div progress>\n <div id=\"progressbar\" style=\"width:${rate}%;background-color:${this.color};\"></div>\n </div>\n <div steps>${step}/${steps}</div>\n </div>\n <div buttons>\n <md-icon @click=${e => (running ? this.stopScenario(instance) : this.startScenario(instance))}\n >${running ? 'pause' : 'play_arrow'}</md-icon\n >\n <md-icon @click=${e => this.showInstanceDetail()}>wysiwyg</md-icon>\n <span><strong>${rounds}</strong> round</span>\n </div>\n `\n }\n\n async startScenario(instance) {\n var response = await client.mutate({\n mutation: gql`\n mutation ($scenarioName: String!, $instanceName: String) {\n startScenario(scenarioName: $scenarioName, instanceName: $instanceName) {\n state\n }\n }\n `,\n variables: {\n scenarioName: instance.scenarioName,\n instanceName: instance.instanceName\n }\n })\n\n notify({\n level: 'info',\n message: `${IS_SCENARIO_RUNNING(response.data.startScenario.state) ? 'success' : 'fail'} to start scenario : ${instance.scenarioName}`\n })\n }\n\n async stopScenario(instance) {\n var response = await client.mutate({\n mutation: gql`\n mutation ($instanceName: String!) {\n stopScenario(instanceName: $instanceName) {\n state\n }\n }\n `,\n variables: {\n instanceName: instance.instanceName\n }\n })\n\n notify({\n level: 'info',\n message: `${IS_SCENARIO_RUNNING(response.data.stopScenario.state) ? 'fail' : 'success'} to stop instance : ${instance.instanceName}`\n })\n }\n\n async showInstanceDetail() {\n const { instanceName, scenarioName } = this.instance\n openPopup(\n html`\n <scenario-instance-view .instanceName=${instanceName} .scenarioName=${scenarioName}></scenario-instance-view>\n `,\n {\n size: 'large',\n title: `${i18next.t('title.scenario-instance')}`\n }\n )\n }\n}\n"]}
1	+ {"version":3,"file":"scenario-instance-monitor.js","sourceRoot":"","sources":["../../client/viewparts/scenario-instance-monitor.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,qBAAqB,CAAA;AAC5B,OAAO,6BAA6B,CAAA;AAEpC,OAAO,GAAG,MAAM,aAAa,CAAA;AAC7B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAS,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AACzC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AACnD,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAEjD,SAAS,mBAAmB,CAAC,KAAK;IAChC,OAAO,KAAK,IAAI,KAAK,KAAK,UAAU,CAAA;AACtC,CAAC;AAGM,IAAM,uBAAuB,GAA7B,MAAM,uBAAwB,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;aACjE,WAAM,GAAG;QACd,eAAe;QACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA0EF;KACF,AA7EY,CA6EZ;IAKD,MAAM;QACJ,IAAI,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAA;QAC5B,MAAM,EAAE,YAAY,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,GAAG,QAAQ,CAAA;QAC3D,MAAM,EAAE,IAAI,GAAG,CAAC,EAAE,KAAK,GAAG,CAAC,EAAE,IAAI,GAAG,CAAC,EAAE,MAAM,GAAG,CAAC,EAAE,GAAG,QAAQ,IAAI,EAAE,CAAA;QAEpE,MAAM,OAAO,GAAG,mBAAmB,CAAC,KAAK,CAAC,CAAA;QAE1C,OAAO,IAAI,CAAA;kBACG,YAAY;;;+CAGiB,IAAI,sBAAsB,IAAI,CAAC,KAAK;;qBAE9D,IAAI,IAAI,KAAK;;;0BAGR,CAAC,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;aACxF,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,YAAY;;0BAEnB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,kBAAkB,EAAE;wBAChC,MAAM;;KAEzB,CAAA;IACH,CAAC;IAED,KAAK,CAAC,aAAa,CAAC,QAAQ;QAC1B,IAAI,QAAQ,GAAG,MAAM,MAAM,CAAC,MAAM,CAAC;YACjC,QAAQ,EAAE,GAAG,CAAA;;;;;;OAMZ;YACD,SAAS,EAAE;gBACT,YAAY,EAAE,QAAQ,CAAC,YAAY;gBACnC,YAAY,EAAE,QAAQ,CAAC,YAAY;aACpC;SACF,CAAC,CAAA;QAEF,MAAM,CAAC;YACL,KAAK,EAAE,MAAM;YACb,OAAO,EAAE,GAAG,mBAAmB,CAAC,QAAQ,CAAC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,wBAAwB,QAAQ,CAAC,YAAY,EAAE;SACvI,CAAC,CAAA;IACJ,CAAC;IAED,KAAK,CAAC,YAAY,CAAC,QAAQ;QACzB,IAAI,QAAQ,GAAG,MAAM,MAAM,CAAC,MAAM,CAAC;YACjC,QAAQ,EAAE,GAAG,CAAA;;;;;;OAMZ;YACD,SAAS,EAAE;gBACT,YAAY,EAAE,QAAQ,CAAC,YAAY;aACpC;SACF,CAAC,CAAA;QAEF,MAAM,CAAC;YACL,KAAK,EAAE,MAAM;YACb,OAAO,EAAE,GAAG,mBAAmB,CAAC,QAAQ,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,uBAAuB,QAAQ,CAAC,YAAY,EAAE;SACrI,CAAC,CAAA;IACJ,CAAC;IAED,KAAK,CAAC,kBAAkB;QACtB,MAAM,EAAE,YAAY,EAAE,YAAY,EAAE,GAAG,IAAI,CAAC,QAAQ,CAAA;QACpD,SAAS,CACP,IAAI,CAAA;gDACsC,YAAY,kBAAkB,YAAY;OACnF,EACD;YACE,IAAI,EAAE,OAAO;YACb,KAAK,EAAE,GAAG,OAAO,CAAC,CAAC,CAAC,yBAAyB,CAAC,EAAE;SACjD,CACF,CAAA;IACH,CAAC;;AAhF2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;yDAAc;AACb;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;sDAAe;AAjF/B,uBAAuB;IADnC,aAAa,CAAC,2BAA2B,CAAC;GAC9B,uBAAuB,CAiKnC","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@operato/data-grist'\nimport './scenario-instance-view.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { client } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { notify, openPopup } from '@operato/layout'\nimport { ScrollbarStyles } from '@operato/styles'\n\nfunction IS_SCENARIO_RUNNING(state) {\n return state && state !== 'UNLOADED'\n}\n\n@customElement('scenario-instance-monitor')\nexport class ScenarioInstanceMonitor extends localize(i18next)(LitElement) {\n static styles = [\n ScrollbarStyles,\n css`\n :host {\n display: block;\n overflow: hidden;\n position: relative;\n padding: var(--spacing-small);\n color: var(--md-sys-color-secondary);\n }\n\n [running] {\n background-color: lightgreen;\n }\n\n [name] {\n font-size: var(--fontsize-default);\n font-weight: bold;\n }\n\n [progress] {\n display: block;\n position: relative;\n\n width: 100%;\n margin: 2px;\n padding: 2px;\n box-sizing: border-box;\n\n border: var(--border-dim-color);\n border-radius: 10px;\n background-color: var(--md-sys-color-surface);\n }\n [progress-wrap] {\n display: flex;\n flex-direction: row;\n margin: 4px 0;\n }\n\n [running] [progress] {\n background-color: var(--md-sys-color-surface-variant);\n }\n\n [steps] {\n padding: 0 0 0 var(--spacing-small);\n }\n\n #progressbar {\n height: 100%;\n text-align: left;\n border-radius: 5px;\n animation: width 1s linear ease-out;\n }\n\n [buttons] {\n display: flex;\n flex-direction: row-reverse;\n --md-icon-size: 18px;\n\n border-top: var(--border-dim-color);\n padding: var(--spacing-medium) 0 0 0;\n text-align: right;\n }\n\n [buttons] md-icon {\n color: var(--md-sys-color-primary);\n }\n\n @keyframes width {\n 0% {\n width: 0;\n }\n 100% {\n width: auto;\n }\n }\n `\n ]\n\n @property({ type: Object }) instance: any\n @property({ type: String }) color?: string\n\n render() {\n var instance = this.instance\n const { instanceName, progress, message, state } = instance\n const { rate = 0, steps = 0, step = 0, rounds = 0 } = progress \|\| {}\n\n const running = IS_SCENARIO_RUNNING(state)\n\n return html`\n <div name>${instanceName}</div>\n <div progress-wrap>\n <div progress>\n <div id=\"progressbar\" style=\"width:${rate}%;background-color:${this.color};\"></div>\n </div>\n <div steps>${step}/${steps}</div>\n </div>\n <div buttons>\n <md-icon @click=${e => (running ? this.stopScenario(instance) : this.startScenario(instance))}\n >${running ? 'pause' : 'play_arrow'}</md-icon\n >\n <md-icon @click=${e => this.showInstanceDetail()}>wysiwyg</md-icon>\n <span><strong>${rounds}</strong> round</span>\n </div>\n `\n }\n\n async startScenario(instance) {\n var response = await client.mutate({\n mutation: gql`\n mutation ($scenarioName: String!, $instanceName: String) {\n startScenario(scenarioName: $scenarioName, instanceName: $instanceName) {\n state\n }\n }\n `,\n variables: {\n scenarioName: instance.scenarioName,\n instanceName: instance.instanceName\n }\n })\n\n notify({\n level: 'info',\n message: `${IS_SCENARIO_RUNNING(response.data.startScenario.state) ? 'success' : 'fail'} to start scenario : ${instance.scenarioName}`\n })\n }\n\n async stopScenario(instance) {\n var response = await client.mutate({\n mutation: gql`\n mutation ($instanceName: String!) {\n stopScenario(instanceName: $instanceName) {\n state\n }\n }\n `,\n variables: {\n instanceName: instance.instanceName\n }\n })\n\n notify({\n level: 'info',\n message: `${IS_SCENARIO_RUNNING(response.data.stopScenario.state) ? 'fail' : 'success'} to stop instance : ${instance.instanceName}`\n })\n }\n\n async showInstanceDetail() {\n const { instanceName, scenarioName } = this.instance\n openPopup(\n html`\n <scenario-instance-view .instanceName=${instanceName} .scenarioName=${scenarioName}></scenario-instance-view>\n `,\n {\n size: 'large',\n title: `${i18next.t('title.scenario-instance')}`\n }\n )\n }\n}\n"]}

package/dist-client/viewparts/scenario-instance-view.js CHANGED Viewed

@@ -8,6 +8,112 @@ import { subscribe } from '@operato/graphql';
 import { store } from '@operato/shell';
 import { ScrollbarStyles } from '@operato/styles';
 let ScenarioInstanceView = class ScenarioInstanceView extends connect(store)(LitElement) {
+    static { this.styles = [
+        ScrollbarStyles,
+        css `
+      :host {
+        display: flex;
+        flex-direction: column;
+        background-color: var(--md-sys-color-background);
+      }
+      [diagram] {
+        flex: 1;
+        height: 100%;
+        border: none;
+      }
+      [content] {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+      }
+      [tab] {
+        display: flex;
+      }
+      [tab] span {
+        display: inline;
+        padding: var(--spacing-large) var(--spacing-large) var(--spacing-small) var(--spacing-large);
+        border-bottom: 3px solid transparent;
+        color: var(--md-sys-color-secondary);
+        text-transform: capitalize;
+      }
+      [tab] span[active] {
+        border-color: var(--md-sys-color-primary);
+        font-weight: bold;
+      }
+      [detail] {
+        flex: 1;
+        background-color: var(--md-sys-color-surface);
+        border-top: var(--border-dim-color);
+        overflow: hidden;
+        padding: var(--spacing-large);
+      }
+      [detail] > * {
+        display: none;
+        width: 100%;
+        height: 100%;
+        color: var(--md-sys-color-secondary);
+      }
+      [detail] > [active] {
+        display: flex;
+        overflow: auto;
+      }
+      pre {
+        margin: 0;
+      }
+      [detail] ul {
+        margin: 0;
+        padding: 0;
+        flex: 1;
+        list-style: inside '- ';
+      }
+      [detail] li {
+        padding: var(--spacing-medium) var(--spacing-small) var(--spacing-small) var(--spacing-small);
+        border-bottom: var(--border-dim-color);
+      }
+      li[active] {
+        font-weight: bold;
+      }
+      [value] {
+        flex: 1;
+        overflow: auto;
+        padding: var(--spacing-large);
+      }
+      scenario-instance-log-view [active] {
+        padding: 0;
+      }
+      @media only screen and (max-width: 460px) {
+        [info][active] {
+          display: block;
+        }
+        [detail] {
+          padding: var(--spacing-medium);
+          overflow: auto;
+        }
+        [detail] > * {
+          height: auto;
+        }
+        [diagram] {
+          width: 100%;
+          min-height: 500px;
+        }
+      }
+    `
+    ]; }
     render() {
         const tab = this.tab || 'info';
         const { scenarioName, instanceName, description, state, progress, variables, data, message } = this.instance || {};
@@ -117,117 +223,10 @@ let ScenarioInstanceView = class ScenarioInstanceView extends connect(store)(Lit
         });
     }
     async stopSubscribe() {
-        var _a;
-        await ((_a = this.subscription) === null || _a === void 0 ? void 0 : _a.unsubscribe());
+        await this.subscription?.unsubscribe();
         delete this.subscription;
     }
 };
-ScenarioInstanceView.styles = [
-    ScrollbarStyles,
-    css `
-      :host {
-        display: flex;
-        flex-direction: column;
-        background-color: var(--md-sys-color-background);
-      }
-      [diagram] {
-        flex: 1;
-        height: 100%;
-        border: none;
-      }
-      [content] {
-        flex: 1;
-        display: flex;
-        flex-direction: column;
-        overflow: hidden;
-      }
-      [tab] {
-        display: flex;
-      }
-      [tab] span {
-        display: inline;
-        padding: var(--spacing-large) var(--spacing-large) var(--spacing-small) var(--spacing-large);
-        border-bottom: 3px solid transparent;
-        color: var(--md-sys-color-secondary);
-        text-transform: capitalize;
-      }
-      [tab] span[active] {
-        border-color: var(--md-sys-color-primary);
-        font-weight: bold;
-      }
-      [detail] {
-        flex: 1;
-        background-color: var(--md-sys-color-surface);
-        border-top: var(--border-dim-color);
-        overflow: hidden;
-        padding: var(--spacing-large);
-      }
-      [detail] > * {
-        display: none;
-        width: 100%;
-        height: 100%;
-        color: var(--md-sys-color-secondary);
-      }
-      [detail] > [active] {
-        display: flex;
-        overflow: auto;
-      }
-      pre {
-        margin: 0;
-      }
-      [detail] ul {
-        margin: 0;
-        padding: 0;
-        flex: 1;
-        list-style: inside '- ';
-      }
-      [detail] li {
-        padding: var(--spacing-medium) var(--spacing-small) var(--spacing-small) var(--spacing-small);
-        border-bottom: var(--border-dim-color);
-      }
-      li[active] {
-        font-weight: bold;
-      }
-      [value] {
-        flex: 1;
-        overflow: auto;
-        padding: var(--spacing-large);
-      }
-      scenario-instance-log-view [active] {
-        padding: 0;
-      }
-      @media only screen and (max-width: 460px) {
-        [info][active] {
-          display: block;
-        }
-        [detail] {
-          padding: var(--spacing-medium);
-          overflow: auto;
-        }
-        [detail] > * {
-          height: auto;
-        }
-        [diagram] {
-          width: 100%;
-          min-height: 500px;
-        }
-      }
-    `
-];
 __decorate([
     property({ type: String }),
     __metadata("design:type", String)

package/dist-client/viewparts/scenario-instance-view.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"scenario-instance-view.js","sourceRoot":"","sources":["../../client/viewparts/scenario-instance-view.ts"],"names":[],"mappings":"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","sourcesContent":["import './scenario-instance-log-view.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { connect } from 'pwa-helpers/connect-mixin.js'\n\nimport { subscribe } from '@operato/graphql'\nimport { store } from '@operato/shell'\nimport { ScrollbarStyles } from '@operato/styles'\n\n@customElement('scenario-instance-view')\nexport class ScenarioInstanceView extends connect(store)(LitElement) {\n static styles = [\n ScrollbarStyles,\n css`\n :host {\n display: flex;\n flex-direction: column;\n background-color: var(--md-sys-color-background);\n }\n\n [diagram] {\n flex: 1;\n height: 100%;\n border: none;\n }\n\n [content] {\n flex: 1;\n\n display: flex;\n flex-direction: column;\n overflow: hidden;\n }\n\n [tab] {\n display: flex;\n }\n\n [tab] span {\n display: inline;\n padding: var(--spacing-large) var(--spacing-large) var(--spacing-small) var(--spacing-large);\n border-bottom: 3px solid transparent;\n color: var(--md-sys-color-secondary);\n text-transform: capitalize;\n }\n\n [tab] span[active] {\n border-color: var(--md-sys-color-primary);\n font-weight: bold;\n }\n\n [detail] {\n flex: 1;\n background-color: var(--md-sys-color-surface);\n border-top: var(--border-dim-color);\n overflow: hidden;\n padding: var(--spacing-large);\n }\n\n [detail] > * {\n display: none;\n width: 100%;\n height: 100%;\n color: var(--md-sys-color-secondary);\n }\n\n [detail] > [active] {\n display: flex;\n overflow: auto;\n }\n\n pre {\n margin: 0;\n }\n\n [detail] ul {\n margin: 0;\n padding: 0;\n flex: 1;\n list-style: inside '- ';\n }\n [detail] li {\n padding: var(--spacing-medium) var(--spacing-small) var(--spacing-small) var(--spacing-small);\n border-bottom: var(--border-dim-color);\n }\n\n li[active] {\n font-weight: bold;\n }\n\n [value] {\n flex: 1;\n overflow: auto;\n padding: var(--spacing-large);\n }\n scenario-instance-log-view [active] {\n padding: 0;\n }\n\n @media only screen and (max-width: 460px) {\n [info][active] {\n display: block;\n }\n [detail] {\n padding: var(--spacing-medium);\n overflow: auto;\n }\n [detail] > * {\n height: auto;\n }\n [diagram] {\n width: 100%;\n min-height: 500px;\n }\n }\n `\n ]\n\n @property({ type: String }) scenarioName?: string\n @property({ type: String }) instanceName?: string\n @property({ type: Object }) instance?: any\n @property({ type: String }) tab?: string\n @property({ type: String }) step?: string\n @property({ type: String }) key?: string\n @property({ type: String }) contextPath?: string\n\n subscription: any\n\n render() {\n const tab = this.tab \|\| 'info'\n const { scenarioName, instanceName, description, state, progress, variables, data, message } = this.instance \|\| {}\n const { rate = 0, steps = 0, step = 0, rounds = 0 } = progress \|\| {}\n const diagram = `${this.contextPath \|\| ''}/scenario-view/${this.scenarioName}`\n\n return html`\n <div content>\n <div tab>\n <span @click=${e => (this.tab = 'info')} ?active=${tab == 'info'}>info</span>\n <span @click=${e => (this.tab = 'variables')} ?active=${tab == 'variables'}>variables</span>\n <span @click=${e => (this.tab = 'data')} ?active=${tab == 'data'}>data</span>\n <span @click=${e => (this.tab = 'log')} ?active=${tab == 'log'}>log</span>\n </div>\n <div detail>\n <div info ?active=${tab == 'info'}>\n <ul>\n <li>scenario name : <strong>${scenarioName}</strong></li>\n <li>instance name : ${instanceName}</li>\n <li>description : ${description}</li>\n <li>state : ${state}</li>\n <li>total steps : ${steps}</li>\n <li>current step : ${step}</li>\n <li>rounds : ${rounds}</li>\n <li>messge : ${message}</li>\n </ul>\n <iframe diagram src=\"${diagram}\"></iframe>\n </div>\n <div variables ?active=${tab == 'variables'}>${this.renderVariableObject(variables)}</div>\n <div data ?active=${tab == 'data'}>${this.renderDataObject(data)}</div>\n <scenario-instance-log-view\n log\n ?active=${tab == 'log'}\n .scenarioName=${this.scenarioName}\n .instanceName=${this.instanceName}\n ></scenario-instance-log-view>\n </div>\n </div>\n `\n }\n\n firstUpdated() {\n this.startSubscribe()\n }\n\n disconnectedCallback() {\n super.disconnectedCallback()\n this.stopSubscribe()\n }\n\n stateChanged(state) {\n this.contextPath = state.app.contextPath\n }\n\n renderDataObject(data) {\n const keys = Object.keys(data \|\| {})\n\n if (keys.length == 0) {\n return html`<pre>no data</pre>`\n }\n\n const currentStep = this.step \|\| keys[0]\n\n return html`\n <ul keys>\n ${keys.map(step => html`<li @click=${e => (this.step = step)} ?active=${currentStep == step}>${step}</li>`)}\n </ul>\n <div value>\n <pre>${data[currentStep] ? JSON.stringify(data[currentStep], null, 2) : ''}</pre>\n </div>\n `\n }\n\n renderVariableObject(data) {\n const keys = Object.keys(data \|\| {})\n\n if (keys.length == 0) {\n return html`<pre>no data</pre>`\n }\n\n const currentKey = this.key \|\| keys[0]\n\n return html`\n <ul keys>\n ${keys.map(key => html`<li @click=${e => (this.key = key)} ?active=${currentKey == key}>${key}</li>`)}\n </ul>\n <div value>\n <pre>${data[currentKey] ? JSON.stringify(data[currentKey], null, 2) : ''}</pre>\n </div>\n `\n }\n\n async startSubscribe() {\n this.subscription = await subscribe(\n {\n query: gql`\n subscription ($instanceName: String, $scenarioName: String) {\n scenarioInstanceState(instanceName: $instanceName, scenarioName: $scenarioName) {\n instanceName\n scenarioName\n state\n progress {\n rate\n steps\n step\n rounds\n }\n variables\n data\n }\n }\n `,\n variables: {\n instanceName: this.instanceName,\n scenarioName: this.scenarioName\n }\n },\n {\n next: async ({ data }) => {\n data && (this.instance = data.scenarioInstanceState)\n }\n }\n )\n }\n\n async stopSubscribe() {\n await this.subscription?.unsubscribe()\n delete this.subscription\n }\n}\n"]}
1	+ {"version":3,"file":"scenario-instance-view.js","sourceRoot":"","sources":["../../client/viewparts/scenario-instance-view.ts"],"names":[],"mappings":"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","sourcesContent":["import './scenario-instance-log-view.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { connect } from 'pwa-helpers/connect-mixin.js'\n\nimport { subscribe } from '@operato/graphql'\nimport { store } from '@operato/shell'\nimport { ScrollbarStyles } from '@operato/styles'\n\n@customElement('scenario-instance-view')\nexport class ScenarioInstanceView extends connect(store)(LitElement) {\n static styles = [\n ScrollbarStyles,\n css`\n :host {\n display: flex;\n flex-direction: column;\n background-color: var(--md-sys-color-background);\n }\n\n [diagram] {\n flex: 1;\n height: 100%;\n border: none;\n }\n\n [content] {\n flex: 1;\n\n display: flex;\n flex-direction: column;\n overflow: hidden;\n }\n\n [tab] {\n display: flex;\n }\n\n [tab] span {\n display: inline;\n padding: var(--spacing-large) var(--spacing-large) var(--spacing-small) var(--spacing-large);\n border-bottom: 3px solid transparent;\n color: var(--md-sys-color-secondary);\n text-transform: capitalize;\n }\n\n [tab] span[active] {\n border-color: var(--md-sys-color-primary);\n font-weight: bold;\n }\n\n [detail] {\n flex: 1;\n background-color: var(--md-sys-color-surface);\n border-top: var(--border-dim-color);\n overflow: hidden;\n padding: var(--spacing-large);\n }\n\n [detail] > * {\n display: none;\n width: 100%;\n height: 100%;\n color: var(--md-sys-color-secondary);\n }\n\n [detail] > [active] {\n display: flex;\n overflow: auto;\n }\n\n pre {\n margin: 0;\n }\n\n [detail] ul {\n margin: 0;\n padding: 0;\n flex: 1;\n list-style: inside '- ';\n }\n [detail] li {\n padding: var(--spacing-medium) var(--spacing-small) var(--spacing-small) var(--spacing-small);\n border-bottom: var(--border-dim-color);\n }\n\n li[active] {\n font-weight: bold;\n }\n\n [value] {\n flex: 1;\n overflow: auto;\n padding: var(--spacing-large);\n }\n scenario-instance-log-view [active] {\n padding: 0;\n }\n\n @media only screen and (max-width: 460px) {\n [info][active] {\n display: block;\n }\n [detail] {\n padding: var(--spacing-medium);\n overflow: auto;\n }\n [detail] > * {\n height: auto;\n }\n [diagram] {\n width: 100%;\n min-height: 500px;\n }\n }\n `\n ]\n\n @property({ type: String }) scenarioName?: string\n @property({ type: String }) instanceName?: string\n @property({ type: Object }) instance?: any\n @property({ type: String }) tab?: string\n @property({ type: String }) step?: string\n @property({ type: String }) key?: string\n @property({ type: String }) contextPath?: string\n\n subscription: any\n\n render() {\n const tab = this.tab \|\| 'info'\n const { scenarioName, instanceName, description, state, progress, variables, data, message } = this.instance \|\| {}\n const { rate = 0, steps = 0, step = 0, rounds = 0 } = progress \|\| {}\n const diagram = `${this.contextPath \|\| ''}/scenario-view/${this.scenarioName}`\n\n return html`\n <div content>\n <div tab>\n <span @click=${e => (this.tab = 'info')} ?active=${tab == 'info'}>info</span>\n <span @click=${e => (this.tab = 'variables')} ?active=${tab == 'variables'}>variables</span>\n <span @click=${e => (this.tab = 'data')} ?active=${tab == 'data'}>data</span>\n <span @click=${e => (this.tab = 'log')} ?active=${tab == 'log'}>log</span>\n </div>\n <div detail>\n <div info ?active=${tab == 'info'}>\n <ul>\n <li>scenario name : <strong>${scenarioName}</strong></li>\n <li>instance name : ${instanceName}</li>\n <li>description : ${description}</li>\n <li>state : ${state}</li>\n <li>total steps : ${steps}</li>\n <li>current step : ${step}</li>\n <li>rounds : ${rounds}</li>\n <li>messge : ${message}</li>\n </ul>\n <iframe diagram src=\"${diagram}\"></iframe>\n </div>\n <div variables ?active=${tab == 'variables'}>${this.renderVariableObject(variables)}</div>\n <div data ?active=${tab == 'data'}>${this.renderDataObject(data)}</div>\n <scenario-instance-log-view\n log\n ?active=${tab == 'log'}\n .scenarioName=${this.scenarioName}\n .instanceName=${this.instanceName}\n ></scenario-instance-log-view>\n </div>\n </div>\n `\n }\n\n firstUpdated() {\n this.startSubscribe()\n }\n\n disconnectedCallback() {\n super.disconnectedCallback()\n this.stopSubscribe()\n }\n\n stateChanged(state) {\n this.contextPath = state.app.contextPath\n }\n\n renderDataObject(data) {\n const keys = Object.keys(data \|\| {})\n\n if (keys.length == 0) {\n return html`<pre>no data</pre>`\n }\n\n const currentStep = this.step \|\| keys[0]\n\n return html`\n <ul keys>\n ${keys.map(step => html`<li @click=${e => (this.step = step)} ?active=${currentStep == step}>${step}</li>`)}\n </ul>\n <div value>\n <pre>${data[currentStep] ? JSON.stringify(data[currentStep], null, 2) : ''}</pre>\n </div>\n `\n }\n\n renderVariableObject(data) {\n const keys = Object.keys(data \|\| {})\n\n if (keys.length == 0) {\n return html`<pre>no data</pre>`\n }\n\n const currentKey = this.key \|\| keys[0]\n\n return html`\n <ul keys>\n ${keys.map(key => html`<li @click=${e => (this.key = key)} ?active=${currentKey == key}>${key}</li>`)}\n </ul>\n <div value>\n <pre>${data[currentKey] ? JSON.stringify(data[currentKey], null, 2) : ''}</pre>\n </div>\n `\n }\n\n async startSubscribe() {\n this.subscription = await subscribe(\n {\n query: gql`\n subscription ($instanceName: String, $scenarioName: String) {\n scenarioInstanceState(instanceName: $instanceName, scenarioName: $scenarioName) {\n instanceName\n scenarioName\n state\n progress {\n rate\n steps\n step\n rounds\n }\n variables\n data\n }\n }\n `,\n variables: {\n instanceName: this.instanceName,\n scenarioName: this.scenarioName\n }\n },\n {\n next: async ({ data }) => {\n data && (this.instance = data.scenarioInstanceState)\n }\n }\n )\n }\n\n async stopSubscribe() {\n await this.subscription?.unsubscribe()\n delete this.subscription\n }\n}\n"]}