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

package/dist-client/viewparts/connections-monitor.js

@@ -0,0 +1,172 @@
+import { __decorate, __metadata } from "tslib";
+import '@material/web/icon/icon.js';
+import gql from 'graphql-tag';
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { client } from '@operato/graphql';
+import { ScrollbarStyles } from '@operato/styles';
+let ConnectionsMonitor = class ConnectionsMonitor extends LitElement {
+    render() {
+        var connections = this.connections || [];
+        return html `
+      <div info>
+        <h2>connections</h2>
+      </div>
+
+      <div cards>${connections.map(connection => this.renderConnection(connection))}</div>
+    `;
+    }
+    renderConnection(connection) {
+        const { id, name, description, type, state } = connection;
+        const connected = state == 'CONNECTED';
+        return html `
+      <div card ?connected=${connected}>
+        <strong>${name}</strong>
+        <span>${description}</span>
+        <span>Type : ${type}</span>
+        <div buttons>
+          <md-icon
+            @click=${e => (connected ? this.disconnect(connection) : this.connect(connection))}
+            title=${connected ? 'disconnect' : 'connect'}
+            >${connected ? 'link_off' : 'link'}</md-icon
+          >
+        </div>
+      </div>
+    `;
+    }
+    async connect(connection) {
+        var response = await client.mutate({
+            mutation: gql `
+        mutation ($name: String!) {
+          connectConnection(name: $name) {
+            state
+          }
+        }
+      `,
+            variables: {
+                name: connection.name
+            }
+        });
+        connection.state = response.data.connectConnection.state;
+        this.requestUpdate();
+        document.dispatchEvent(new CustomEvent('notify', {
+            detail: {
+                level: 'info',
+                message: `${connection.state == 'CONNECTED' ? 'success' : 'fail'} to connect : ${connection.name}`
+            }
+        }));
+    }
+    async disconnect(connection) {
+        var response = await client.mutate({
+            mutation: gql `
+        mutation ($name: String!) {
+          disconnectConnection(name: $name) {
+            state
+          }
+        }
+      `,
+            variables: {
+                name: connection.name
+            }
+        });
+        connection.state = response.data.disconnectConnection.state;
+        this.requestUpdate();
+        document.dispatchEvent(new CustomEvent('notify', {
+            detail: {
+                level: 'info',
+                message: `${connection.state == 'CONNECTED' ? 'fail' : 'success'} to disconnect : ${connection.name}`
+            }
+        }));
+    }
+};
+ConnectionsMonitor.styles = [
+    ScrollbarStyles,
+    css `
+      :host {
+        display: flex;
+        flex-direction: column;
+
+        overflow: hidden;
+        background-color: var(--md-sys-color-surface);
+        border-radius: var(--border-radius);
+        border: var(--border-dim-color);
+      }
+      h2 {
+        margin: 0;
+        padding: var(--spacing-medium) 0 var(--spacing-medium) var(--spacing-medium);
+        border-bottom: var(--border-dim-color);
+        font: var(--subtitle-font);
+        color: var(--md-sys-color-secondary);
+        text-transform: capitalize;
+      }
+
+      [cards] {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+
+        overflow: auto;
+      }
+
+      [card] {
+        display: flex;
+        flex-direction: column;
+        padding: var(--spacing-medium);
+        border-bottom: var(--border-dim-color);
+        color: var(--md-sys-color-secondary);
+      }
+      [card] * {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      [card] strong {
+        color: var(--md-sys-color-primary);
+      }
+      [card] span {
+        font-size: var(--fontsize-default);
+        line-height: var(--fontsize-large);
+      }
+
+      [connected] strong::after {
+        content: '';
+        display: inline-block;
+        width: 10px;
+        height: 10px;
+        border-radius: 50%;
+        background-color: var(--md-sys-color-primary);
+        margin-left: var(--spacing-small);
+      }
+
+      [buttons] {
+        --md-icon-size: 20px;
+        border-top: 1px dashed rgba(0, 0, 0, 0.1);
+        margin: var(--spacing-small) 0 0 0;
+        padding: var(--spacing-small) 0 0 0;
+        text-align: right;
+      }
+
+      [buttons] md-icon {
+        color: var(--md-sys-color-secondary);
+      }
+
+      @media screen and (max-width: 480px) {
+        h2 {
+          padding: var(--spacing-small);
+        }
+
+        [card] span {
+          display: none;
+        }
+      }
+    `
+];
+__decorate([
+    property({ type: Array }),
+    __metadata("design:type", Object)
+], ConnectionsMonitor.prototype, "connections", void 0);
+ConnectionsMonitor = __decorate([
+    customElement('connections-monitor')
+], ConnectionsMonitor);
+export { ConnectionsMonitor };
+//# sourceMappingURL=connections-monitor.js.map

package/dist-client/viewparts/connections-monitor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"connections-monitor.js","sourceRoot":"","sources":["../../client/viewparts/connections-monitor.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.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 { ScrollbarStyles } from '@operato/styles'\n\n@customElement('connections-monitor')\nexport class ConnectionsMonitor extends LitElement {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n\n        overflow: hidden;\n        background-color: var(--md-sys-color-surface);\n        border-radius: var(--border-radius);\n        border: var(--border-dim-color);\n      }\n      h2 {\n        margin: 0;\n        padding: var(--spacing-medium) 0 var(--spacing-medium) var(--spacing-medium);\n        border-bottom: var(--border-dim-color);\n        font: var(--subtitle-font);\n        color: var(--md-sys-color-secondary);\n        text-transform: capitalize;\n      }\n\n      [cards] {\n        flex: 1;\n        display: flex;\n        flex-direction: column;\n\n        overflow: auto;\n      }\n\n      [card] {\n        display: flex;\n        flex-direction: column;\n        padding: var(--spacing-medium);\n        border-bottom: var(--border-dim-color);\n        color: var(--md-sys-color-secondary);\n      }\n      [card] * {\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n      }\n      [card] strong {\n        color: var(--md-sys-color-primary);\n      }\n      [card] span {\n        font-size: var(--fontsize-default);\n        line-height: var(--fontsize-large);\n      }\n\n      [connected] strong::after {\n        content: '';\n        display: inline-block;\n        width: 10px;\n        height: 10px;\n        border-radius: 50%;\n        background-color: var(--md-sys-color-primary);\n        margin-left: var(--spacing-small);\n      }\n\n      [buttons] {\n        --md-icon-size: 20px;\n        border-top: 1px dashed rgba(0, 0, 0, 0.1);\n        margin: var(--spacing-small) 0 0 0;\n        padding: var(--spacing-small) 0 0 0;\n        text-align: right;\n      }\n\n      [buttons] md-icon {\n        color: var(--md-sys-color-secondary);\n      }\n\n      @media screen and (max-width: 480px) {\n        h2 {\n          padding: var(--spacing-small);\n        }\n\n        [card] span {\n          display: none;\n        }\n      }\n    `\n  ]\n\n  @property({ type: Array }) connections: any\n\n  render() {\n    var connections = this.connections || []\n\n    return html`\n      <div info>\n        <h2>connections</h2>\n      </div>\n\n      <div cards>${connections.map(connection => this.renderConnection(connection))}</div>\n    `\n  }\n\n  renderConnection(connection) {\n    const { id, name, description, type, state } = connection\n    const connected = state == 'CONNECTED'\n\n    return html`\n      <div card ?connected=${connected}>\n        <strong>${name}</strong>\n        <span>${description}</span>\n        <span>Type : ${type}</span>\n        <div buttons>\n          <md-icon\n            @click=${e => (connected ? this.disconnect(connection) : this.connect(connection))}\n            title=${connected ? 'disconnect' : 'connect'}\n            >${connected ? 'link_off' : 'link'}</md-icon\n          >\n        </div>\n      </div>\n    `\n  }\n\n  async connect(connection) {\n    var response = await client.mutate({\n      mutation: gql`\n        mutation ($name: String!) {\n          connectConnection(name: $name) {\n            state\n          }\n        }\n      `,\n      variables: {\n        name: connection.name\n      }\n    })\n\n    connection.state = response.data.connectConnection.state\n\n    this.requestUpdate()\n\n    document.dispatchEvent(\n      new CustomEvent('notify', {\n        detail: {\n          level: 'info',\n          message: `${connection.state == 'CONNECTED' ? 'success' : 'fail'} to connect : ${connection.name}`\n        }\n      })\n    )\n  }\n\n  async disconnect(connection) {\n    var response = await client.mutate({\n      mutation: gql`\n        mutation ($name: String!) {\n          disconnectConnection(name: $name) {\n            state\n          }\n        }\n      `,\n      variables: {\n        name: connection.name\n      }\n    })\n\n    connection.state = response.data.disconnectConnection.state\n\n    this.requestUpdate()\n\n    document.dispatchEvent(\n      new CustomEvent('notify', {\n        detail: {\n          level: 'info',\n          message: `${connection.state == 'CONNECTED' ? 'fail' : 'success'} to disconnect : ${connection.name}`\n        }\n      })\n    )\n  }\n}\n"]}

package/dist-client/viewparts/monitoring-summary.d.ts

@@ -0,0 +1,13 @@
+import '@material/web/icon/icon.js';
+import '@operato/data-grist';
+import { LitElement } from 'lit';
+declare const IntegrationMonitoringSummary_base: (new (...args: any[]) => LitElement) & typeof LitElement;
+export declare class IntegrationMonitoringSummary extends IntegrationMonitoringSummary_base {
+    static styles: import("lit").CSSResult[];
+    pendings: any;
+    scenarios: any;
+    connections: any;
+    render(): import("lit-html").TemplateResult<1>[];
+    renderCard(title: any, icon: any, value: any): import("lit-html").TemplateResult<1>;
+}
+export {};

package/dist-client/viewparts/monitoring-summary.js

@@ -0,0 +1,142 @@
+import { __decorate, __metadata } from "tslib";
+import '@material/web/icon/icon.js';
+import '@operato/data-grist';
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { i18next, localize } from '@operato/i18n';
+import { ScrollbarStyles } from '@operato/styles';
+let IntegrationMonitoringSummary = class IntegrationMonitoringSummary extends localize(i18next)(LitElement) {
+    render() {
+        const now = Date.now();
+        const pendings = this.pendings || [];
+        const scenarios = this.scenarios || [];
+        const connections = this.connections || [];
+        const cards = [
+            {
+                title: 'pending instances',
+                icon: 'update',
+                value: pendings.length
+            },
+            {
+                title: 'due out instances',
+                icon: 'update_disabled',
+                value: Math.max(0, pendings.concat({ due: now + 1 }).findIndex(pending => Number(pending.due) > now))
+            },
+            {
+                title: 'total scenarios',
+                icon: 'format_list_numbered',
+                value: scenarios.length
+            },
+            {
+                title: 'scenario instances',
+                icon: 'list_alt',
+                value: scenarios.reduce((total, scenario) => {
+                    return total + scenario.instances.length;
+                }, 0)
+            },
+            {
+                title: 'connections',
+                icon: 'device_hub',
+                value: connections.length
+            },
+            {
+                title: 'active connections',
+                icon: 'fact_check',
+                value: connections.filter(connection => connection.state == 'CONNECTED').length
+            }
+        ];
+        return cards.map(({ title, icon, value }) => this.renderCard(title, icon, value));
+    }
+    renderCard(title, icon, value) {
+        return html `
+      <div card>
+        <span>${title}</span>
+        <md-icon>${icon}</md-icon>
+        <strong> ${value}</strong>
+      </div>
+    `;
+    }
+};
+IntegrationMonitoringSummary.styles = [
+    ScrollbarStyles,
+    css `
+      :host {
+        display: flex;
+        flex-direction: row;
+
+        overflow: hidden;
+        background-color: var(--md-sys-color-secondary);
+        border-radius: var(--border-radius);
+        color: var(--md-sys-color-on-secondary);
+      }
+
+      [card] {
+        flex: 1;
+        margin: var(--spacing-medium);
+        padding: var(--spacing-small) var(--spacing-medium);
+        border-right: var(--border-light-color);
+      }
+      :host :last-child {
+        border-right: none;
+      }
+      strong {
+        font-size: 36px;
+        line-height: 30px;
+        color: var(--md-sys-color-on-primary);
+      }
+      span {
+        display: block;
+        margin-bottom: var(--spacing-small);
+        font-size: var(--fontsize-small);
+        text-transform: capitalize;
+        opacity: 0.6;
+      }
+
+      md-icon {
+        opacity: 0.6;
+      }
+
+      @media screen and (max-width: 480px) {
+        :host {
+          font-size: 0.8em;
+        }
+        [card] {
+          margin: var(--spacing-small);
+          padding: var(--spacing-small);
+        }
+        [card]:nth-child(5),
+        [card]:nth-child(6) {
+          display: none;
+        }
+        [card]:nth-child(4) {
+          border-right: none;
+        }
+        md-icon {
+          --md-icon-size: var(--fontsize-large);
+        }
+        span {
+          line-height: 1;
+        }
+        strong {
+          font-size: 24px;
+        }
+      }
+    `
+];
+__decorate([
+    property({ type: Array }),
+    __metadata("design:type", Object)
+], IntegrationMonitoringSummary.prototype, "pendings", void 0);
+__decorate([
+    property({ type: Array }),
+    __metadata("design:type", Object)
+], IntegrationMonitoringSummary.prototype, "scenarios", void 0);
+__decorate([
+    property({ type: Array }),
+    __metadata("design:type", Object)
+], IntegrationMonitoringSummary.prototype, "connections", void 0);
+IntegrationMonitoringSummary = __decorate([
+    customElement('integration-summary')
+], IntegrationMonitoringSummary);
+export { IntegrationMonitoringSummary };
+//# sourceMappingURL=monitoring-summary.js.map

package/dist-client/viewparts/monitoring-summary.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"monitoring-summary.js","sourceRoot":"","sources":["../../client/viewparts/monitoring-summary.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,qBAAqB,CAAA;AAE5B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAS,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAG1C,IAAM,4BAA4B,GAAlC,MAAM,4BAA6B,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;IAwE7E,MAAM;QACJ,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,EAAE,CAAA;QACtB,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,IAAI,EAAE,CAAA;QACpC,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,IAAI,EAAE,CAAA;QACtC,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,IAAI,EAAE,CAAA;QAE1C,MAAM,KAAK,GAAG;YACZ;gBACE,KAAK,EAAE,mBAAmB;gBAC1B,IAAI,EAAE,QAAQ;gBACd,KAAK,EAAE,QAAQ,CAAC,MAAM;aACvB;YACD;gBACE,KAAK,EAAE,mBAAmB;gBAC1B,IAAI,EAAE,iBAAiB;gBACvB,KAAK,EAAE,IAAI,CAAC,GAAG,CACb,CAAC,EACD,QAAQ,CAAC,MAAM,CAAC,EAAE,GAAG,EAAE,GAAG,GAAG,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,OAAO,CAAC,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC,CAClF;aACF;YACD;gBACE,KAAK,EAAE,iBAAiB;gBACxB,IAAI,EAAE,sBAAsB;gBAC5B,KAAK,EAAE,SAAS,CAAC,MAAM;aACxB;YACD;gBACE,KAAK,EAAE,oBAAoB;gBAC3B,IAAI,EAAE,UAAU;gBAChB,KAAK,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,QAAQ,EAAE,EAAE;oBAC1C,OAAO,KAAK,GAAG,QAAQ,CAAC,SAAS,CAAC,MAAM,CAAA;gBAC1C,CAAC,EAAE,CAAC,CAAC;aACN;YACD;gBACE,KAAK,EAAE,aAAa;gBACpB,IAAI,EAAE,YAAY;gBAClB,KAAK,EAAE,WAAW,CAAC,MAAM;aAC1B;YACD;gBACE,KAAK,EAAE,oBAAoB;gBAC3B,IAAI,EAAE,YAAY;gBAClB,KAAK,EAAE,WAAW,CAAC,MAAM,CAAC,UAAU,CAAC,EAAE,CAAC,UAAU,CAAC,KAAK,IAAI,WAAW,CAAC,CAAC,MAAM;aAChF;SACF,CAAA;QAED,OAAO,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC,CAAA;IACnF,CAAC;IAED,UAAU,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK;QAC3B,OAAO,IAAI,CAAA;;gBAEC,KAAK;mBACF,IAAI;mBACJ,KAAK;;KAEnB,CAAA;IACH,CAAC;;AA9HM,mCAAM,GAAG;IACd,eAAe;IACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA8DF;CACF,AAjEY,CAiEZ;AAE0B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;;8DAAc;AACb;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;;+DAAe;AACd;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;;iEAAiB;AAtEhC,4BAA4B;IADxC,aAAa,CAAC,qBAAqB,CAAC;GACxB,4BAA4B,CAgIxC","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@operato/data-grist'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { ScrollbarStyles } from '@operato/styles'\n\n@customElement('integration-summary')\nexport class IntegrationMonitoringSummary extends localize(i18next)(LitElement) {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: row;\n\n        overflow: hidden;\n        background-color: var(--md-sys-color-secondary);\n        border-radius: var(--border-radius);\n        color: var(--md-sys-color-on-secondary);\n      }\n\n      [card] {\n        flex: 1;\n        margin: var(--spacing-medium);\n        padding: var(--spacing-small) var(--spacing-medium);\n        border-right: var(--border-light-color);\n      }\n      :host :last-child {\n        border-right: none;\n      }\n      strong {\n        font-size: 36px;\n        line-height: 30px;\n        color: var(--md-sys-color-on-primary);\n      }\n      span {\n        display: block;\n        margin-bottom: var(--spacing-small);\n        font-size: var(--fontsize-small);\n        text-transform: capitalize;\n        opacity: 0.6;\n      }\n\n      md-icon {\n        opacity: 0.6;\n      }\n\n      @media screen and (max-width: 480px) {\n        :host {\n          font-size: 0.8em;\n        }\n        [card] {\n          margin: var(--spacing-small);\n          padding: var(--spacing-small);\n        }\n        [card]:nth-child(5),\n        [card]:nth-child(6) {\n          display: none;\n        }\n        [card]:nth-child(4) {\n          border-right: none;\n        }\n        md-icon {\n          --md-icon-size: var(--fontsize-large);\n        }\n        span {\n          line-height: 1;\n        }\n        strong {\n          font-size: 24px;\n        }\n      }\n    `\n  ]\n\n  @property({ type: Array }) pendings: any\n  @property({ type: Array }) scenarios: any\n  @property({ type: Array }) connections: any\n\n  render() {\n    const now = Date.now()\n    const pendings = this.pendings || []\n    const scenarios = this.scenarios || []\n    const connections = this.connections || []\n\n    const cards = [\n      {\n        title: 'pending instances',\n        icon: 'update',\n        value: pendings.length\n      },\n      {\n        title: 'due out instances',\n        icon: 'update_disabled',\n        value: Math.max(\n          0,\n          pendings.concat({ due: now + 1 }).findIndex(pending => Number(pending.due) > now)\n        )\n      },\n      {\n        title: 'total scenarios',\n        icon: 'format_list_numbered',\n        value: scenarios.length\n      },\n      {\n        title: 'scenario instances',\n        icon: 'list_alt',\n        value: scenarios.reduce((total, scenario) => {\n          return total + scenario.instances.length\n        }, 0)\n      },\n      {\n        title: 'connections',\n        icon: 'device_hub',\n        value: connections.length\n      },\n      {\n        title: 'active connections',\n        icon: 'fact_check',\n        value: connections.filter(connection => connection.state == 'CONNECTED').length\n      }\n    ]\n\n    return cards.map(({ title, icon, value }) => this.renderCard(title, icon, value))\n  }\n\n  renderCard(title, icon, value) {\n    return html`\n      <div card>\n        <span>${title}</span>\n        <md-icon>${icon}</md-icon>\n        <strong> ${value}</strong>\n      </div>\n    `\n  }\n}\n"]}

package/dist-client/viewparts/pending-q-monitor.d.ts

@@ -0,0 +1,18 @@
+import '@material/web/icon/icon.js';
+import { LitElement } from 'lit';
+export declare class PendingQMonitor extends LitElement {
+    static styles: import("lit").CSSResult[];
+    pendings: any;
+    filteredPendings: any;
+    colorIndex: any;
+    running?: boolean;
+    tags: any;
+    tag?: string;
+    scales: any;
+    filterPendings: any;
+    render(): import("lit-html").TemplateResult<1>;
+    queue(): AsyncGenerator<import("lit-html").TemplateResult<1>[], void, unknown>;
+    countdown(due: any, now: any): string;
+    buildFilterPendings(): void;
+    updated(changes: any): void;
+}

package/dist-client/viewparts/pending-q-monitor.js

@@ -0,0 +1,248 @@
+import { __asyncGenerator, __await, __decorate, __metadata } from "tslib";
+import '@material/web/icon/icon.js';
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { asyncReplace } from 'lit/directives/async-replace.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import { ScrollbarStyles } from '@operato/styles';
+import { sleep } from '@operato/utils';
+let PendingQMonitor = class PendingQMonitor extends LitElement {
+    render() {
+        const tag = this.tag === undefined ? '(*)' : this.tag;
+        const scales = this.scales || [];
+        return html `
+      <div tags>
+        <md-icon>bookmark_border</md-icon>
+        <select @change=${e => (this.tag = e.target.value)} .value=${tag}>
+          <option value="(*)">*</option>
+          ${Object.keys(this.tags || {})
+            .sort()
+            .map(tag => html `<option value=${tag}>${tag}</option>`)}
+        </select>
+      </div>
+
+      <div pendings>
+        <div timeline>
+          <table>
+            ${unsafeHTML(scales.map(time => `
+              <tr>
+                <th><span>${time}</span></th>
+                <td></td>
+              </tr>
+            `).join(`
+              <tr>
+                <th></th>
+                <td></td>
+              </tr>
+              <tr>
+                <th></th>
+                <td></td>
+              </tr>
+            `))}
+          </table>
+        </div>
+
+        <div pending-wrap>${asyncReplace(this.queue())}</div>
+      </div>
+    `;
+    }
+    queue() {
+        return __asyncGenerator(this, arguments, function* queue_1() {
+            while (this.running) {
+                var now = Date.now();
+                var pendingsByTags = Object.values(this.filterPendings || {});
+                yield yield __await(pendingsByTags.map(pendings => html `
+          <div pendings-by-tag>
+            ${pendings.map((pending, index) => {
+                    var due = Number(pending.due);
+                    var top = Math.max(Math.floor((due - now) / 1000) * 3, 0); /* 3px per second */
+                    return html `
+                <div pending .style="top:${top}px;background-color:${this.colorIndex[pending.stuff.scenario]};">
+                  ${index == 0 ? html ` <div>${this.countdown(pending.due, now)}</div> ` : html ``}
+                </div>
+              `;
+                })}
+          </div>
+        `));
+                yield __await(sleep(1000));
+            }
+        });
+    }
+    countdown(due, now) {
+        const MIN = 60;
+        var remain = (Number(due) - now) / 1000;
+        var normailzed = Math.floor(Math.abs(remain));
+        const mins = Math.floor(normailzed / MIN);
+        const secs = normailzed - mins * MIN;
+        return `${remain > 0 ? '' : '-'}${mins ? mins + 'm ' : ''}${secs}s`;
+    }
+    buildFilterPendings() {
+        var _a;
+        var filtered;
+        if (this.tag === undefined || this.tag == '(*)') {
+            filtered = this.pendings || [];
+        }
+        else {
+            filtered = (this.pendings || []).filter(pending => pending.tag == this.tag);
+        }
+        const now = Date.now();
+        const lastdue = ((_a = filtered[filtered.length - 1]) === null || _a === void 0 ? void 0 : _a.due) || now;
+        const length = Math.max(5, Math.ceil((lastdue - now) / (1000 * 30 * 2) + 1));
+        this.scales = new Array(length)
+            .fill(0)
+            .map((_, index) => [`${String(index).padStart(2, '0')}:00`, `${String(index).padStart(2, '0')}:30`])
+            .flat();
+        this.filterPendings = filtered.reduce((sum, pending) => {
+            if (sum[pending.tag]) {
+                sum[pending.tag].push(pending);
+            }
+            else {
+                sum[pending.tag] = [pending];
+            }
+            return sum;
+        }, {});
+    }
+    updated(changes) {
+        if (changes.has('pendings')) {
+            this.buildFilterPendings();
+            this.tags = (this.pendings || []).reduce((tags, pending) => {
+                tags[pending.tag] = (tags[pending.tag] || 0) + 1;
+                return tags;
+            }, {});
+        }
+        if (changes.has('tag')) {
+            this.buildFilterPendings();
+        }
+    }
+};
+PendingQMonitor.styles = [
+    ScrollbarStyles,
+    css `
+      :host {
+        display: flex;
+        flex-direction: column;
+        background-color: var(--md-sys-color-surface);
+        border-radius: var(--border-radius);
+        padding: var(--spacing-small);
+      }
+
+      div[tags] {
+        display: flex;
+        align-items: center;
+      }
+      [tags] md-icon {
+        --md-icon-size: var(--fontsize-large);
+        margin: 0 var(--spacing-small) 0 0;
+      }
+
+      select {
+        flex: 1;
+        display: inline-block;
+        border: none;
+        border-radius: var(--border-radius);
+      }
+
+      select:focus {
+        outline: 0;
+      }
+
+      [pendings] {
+        display: flex;
+
+        flex: 1;
+        position: relative;
+        overflow: auto;
+      }
+
+      [pending-wrap] {
+        flex: 1;
+        margin-top: var(--spacing-medium);
+        padding-left: 30px;
+        padding-right: 4px;
+        font-size: 8px;
+        line-height: 16px;
+
+        display: flex;
+      }
+
+      [pendings-by-tag] {
+        flex: 1;
+        position: relative;
+        margin: 0 1px;
+      }
+
+      [pending] {
+        display: block;
+        height: 2px;
+        width: 100%;
+        white-space: nowrap;
+        position: absolute;
+      }
+
+      [timeline] {
+        position: absolute;
+        width: 100%;
+      }
+      [timeline] table {
+        border-collapse: collapse;
+        margin-top: var(--spacing-medium);
+        width: 100%;
+      }
+      [timeline] th {
+        opacity: 0.5;
+        width: 25px;
+        border: 0;
+        font-weight: normal;
+        font-size: 9px;
+      }
+      [timeline] th span {
+        display: block;
+        position: absolute;
+        margin-top: -22px;
+      }
+      [timeline] td {
+        border: 0;
+        border-top: var(--border-dim-color);
+        height: 30px;
+        box-sizing: border-box;
+      }
+      [timeline] tr:nth-child(3n + 1) td {
+        border: 0;
+        border-top: 1px solid rgba(0, 0, 0, 0.4);
+        box-sizing: border-box;
+      }
+    `
+];
+__decorate([
+    property({ type: Array }),
+    __metadata("design:type", Object)
+], PendingQMonitor.prototype, "pendings", void 0);
+__decorate([
+    property({ type: Array }),
+    __metadata("design:type", Object)
+], PendingQMonitor.prototype, "filteredPendings", void 0);
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], PendingQMonitor.prototype, "colorIndex", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Boolean)
+], PendingQMonitor.prototype, "running", void 0);
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], PendingQMonitor.prototype, "tags", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], PendingQMonitor.prototype, "tag", void 0);
+__decorate([
+    property({ type: Array }),
+    __metadata("design:type", Object)
+], PendingQMonitor.prototype, "scales", void 0);
+PendingQMonitor = __decorate([
+    customElement('pending-q-monitor')
+], PendingQMonitor);
+export { PendingQMonitor };
+//# sourceMappingURL=pending-q-monitor.js.map

package/dist-client/viewparts/pending-q-monitor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pending-q-monitor.js","sourceRoot":"","sources":["../../client/viewparts/pending-q-monitor.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { asyncReplace } from 'lit/directives/async-replace.js'\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js'\n\nimport { ScrollbarStyles } from '@operato/styles'\nimport { sleep } from '@operato/utils'\n\n@customElement('pending-q-monitor')\nexport class PendingQMonitor extends 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        border-radius: var(--border-radius);\n        padding: var(--spacing-small);\n      }\n\n      div[tags] {\n        display: flex;\n        align-items: center;\n      }\n      [tags] md-icon {\n        --md-icon-size: var(--fontsize-large);\n        margin: 0 var(--spacing-small) 0 0;\n      }\n\n      select {\n        flex: 1;\n        display: inline-block;\n        border: none;\n        border-radius: var(--border-radius);\n      }\n\n      select:focus {\n        outline: 0;\n      }\n\n      [pendings] {\n        display: flex;\n\n        flex: 1;\n        position: relative;\n        overflow: auto;\n      }\n\n      [pending-wrap] {\n        flex: 1;\n        margin-top: var(--spacing-medium);\n        padding-left: 30px;\n        padding-right: 4px;\n        font-size: 8px;\n        line-height: 16px;\n\n        display: flex;\n      }\n\n      [pendings-by-tag] {\n        flex: 1;\n        position: relative;\n        margin: 0 1px;\n      }\n\n      [pending] {\n        display: block;\n        height: 2px;\n        width: 100%;\n        white-space: nowrap;\n        position: absolute;\n      }\n\n      [timeline] {\n        position: absolute;\n        width: 100%;\n      }\n      [timeline] table {\n        border-collapse: collapse;\n        margin-top: var(--spacing-medium);\n        width: 100%;\n      }\n      [timeline] th {\n        opacity: 0.5;\n        width: 25px;\n        border: 0;\n        font-weight: normal;\n        font-size: 9px;\n      }\n      [timeline] th span {\n        display: block;\n        position: absolute;\n        margin-top: -22px;\n      }\n      [timeline] td {\n        border: 0;\n        border-top: var(--border-dim-color);\n        height: 30px;\n        box-sizing: border-box;\n      }\n      [timeline] tr:nth-child(3n + 1) td {\n        border: 0;\n        border-top: 1px solid rgba(0, 0, 0, 0.4);\n        box-sizing: border-box;\n      }\n    `\n  ]\n\n  @property({ type: Array }) pendings: any\n  @property({ type: Array }) filteredPendings: any\n  @property({ type: Object }) colorIndex: any\n  @property({ type: Boolean }) running?: boolean\n  @property({ type: Object }) tags: any\n  @property({ type: String }) tag?: string\n  @property({ type: Array }) scales: any\n\n  filterPendings: any\n\n  render() {\n    const tag = this.tag === undefined ? '(*)' : this.tag\n    const scales = this.scales || []\n\n    return html`\n      <div tags>\n        <md-icon>bookmark_border</md-icon>\n        <select @change=${e => (this.tag = e.target.value)} .value=${tag}>\n          <option value=\"(*)\">*</option>\n          ${Object.keys(this.tags || {})\n            .sort()\n            .map(tag => html`<option value=${tag}>${tag}</option>`)}\n        </select>\n      </div>\n\n      <div pendings>\n        <div timeline>\n          <table>\n            ${unsafeHTML(\n              scales.map(\n                time => `\n              <tr>\n                <th><span>${time}</span></th>\n                <td></td>\n              </tr>\n            `\n              ).join(`\n              <tr>\n                <th></th>\n                <td></td>\n              </tr>\n              <tr>\n                <th></th>\n                <td></td>\n              </tr>\n            `)\n            )}\n          </table>\n        </div>\n\n        <div pending-wrap>${asyncReplace(this.queue())}</div>\n      </div>\n    `\n  }\n\n  async *queue() {\n    while (this.running) {\n      var now = Date.now()\n      var pendingsByTags = Object.values(this.filterPendings || {})\n\n      yield pendingsByTags.map(\n        pendings => html`\n          <div pendings-by-tag>\n            ${(pendings as any).map((pending, index) => {\n              var due = Number(pending.due)\n              var top = Math.max(Math.floor((due - now) / 1000) * 3, 0) /* 3px per second */\n\n              return html`\n                <div pending .style=\"top:${top}px;background-color:${this.colorIndex[pending.stuff.scenario]};\">\n                  ${index == 0 ? html` <div>${this.countdown(pending.due, now)}</div> ` : html``}\n                </div>\n              `\n            })}\n          </div>\n        `\n      )\n\n      await sleep(1000)\n    }\n  }\n\n  countdown(due, now) {\n    const MIN = 60\n\n    var remain = (Number(due) - now) / 1000\n    var normailzed = Math.floor(Math.abs(remain))\n    const mins = Math.floor(normailzed / MIN)\n    const secs = normailzed - mins * MIN\n\n    return `${remain > 0 ? '' : '-'}${mins ? mins + 'm ' : ''}${secs}s`\n  }\n\n  buildFilterPendings() {\n    var filtered\n    if (this.tag === undefined || this.tag == '(*)') {\n      filtered = this.pendings || []\n    } else {\n      filtered = (this.pendings || []).filter(pending => pending.tag == this.tag)\n    }\n\n    const now = Date.now()\n    const lastdue = filtered[filtered.length - 1]?.due || now\n    const length = Math.max(5, Math.ceil((lastdue - now) / (1000 * 30 * 2) + 1))\n    this.scales = new Array(length)\n      .fill(0)\n      .map((_, index) => [`${String(index).padStart(2, '0')}:00`, `${String(index).padStart(2, '0')}:30`])\n      .flat()\n\n    this.filterPendings = filtered.reduce((sum, pending) => {\n      if (sum[pending.tag]) {\n        sum[pending.tag].push(pending)\n      } else {\n        sum[pending.tag] = [pending]\n      }\n      return sum\n    }, {})\n  }\n\n  updated(changes) {\n    if (changes.has('pendings')) {\n      this.buildFilterPendings()\n\n      this.tags = (this.pendings || []).reduce((tags, pending) => {\n        tags[pending.tag] = (tags[pending.tag] || 0) + 1\n        return tags\n      }, {})\n    }\n\n    if (changes.has('tag')) {\n      this.buildFilterPendings()\n    }\n  }\n}\n"]}

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

@@ -0,0 +1,24 @@
+import '@material/web/icon/icon.js';
+import '@material/web/fab/fab.js';
+import { LitElement } from 'lit';
+declare const ScenarioInstanceLogView_base: (new (...args: any[]) => {
+    _storeUnsubscribe: import("redux").Unsubscribe;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    stateChanged(_state: unknown): void;
+    readonly isConnected: boolean;
+}) & typeof LitElement;
+export declare class ScenarioInstanceLogView extends ScenarioInstanceLogView_base {
+    static styles: import("lit").CSSResult[];
+    scenarioName?: string;
+    instanceName?: string;
+    logs: any;
+    startable: boolean;
+    subscription: any;
+    firstUpdated(): void;
+    disconnectedCallback(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    startSubscribe(): Promise<void>;
+    stopSubscribe(): Promise<void>;
+}
+export {};