@things-factory/integration-ui 7.0.1-alpha.9 → 7.0.1-alpha.92

package/dist-client/viewparts/connections-monitor.d.ts

@@ -1,4 +1,4 @@
-import '@material/mwc-icon-button';
+import '@material/web/icon/icon.js';
 import { LitElement } from 'lit';
 export declare class ConnectionsMonitor extends LitElement {
     static styles: import("lit").CSSResult[];

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

@@ -1,5 +1,5 @@
 import { __decorate, __metadata } from "tslib";
-import '@material/mwc-icon-button';
+import '@material/web/icon/icon.js';
 import gql from 'graphql-tag';
 import { css, html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
@@ -25,11 +25,9 @@ let ConnectionsMonitor = class ConnectionsMonitor extends LitElement {
         <span>${description}</span>
         <span>Type : ${type}</span>
         <div buttons>
-          <mwc-icon-button
-            @click=${e => (connected ? this.disconnect(connection) : this.connect(connection))}
-            .icon=${connected ? 'link_off' : 'link'}
-            label=${connected ? 'disconnect' : 'connect'}
-          ></mwc-icon-button>
+          <md-icon @click=${e => (connected ? this.disconnect(connection) : this.connect(connection))} title=${connected ? 'disconnect' : 'connect'}
+            >${connected ? 'link_off' : 'link'}</md-icon
+          >
         </div>
       </div>
     `;
@@ -137,21 +135,24 @@ ConnectionsMonitor.styles = [
         background-color: var(--primary-color);
         margin-left: var(--margin-narrow);
       }
+
       [buttons] {
-        --mdc-icon-button-size: 20px;
-        --mdc-icon-size: 20px;
+        --md-icon-size: 20px;
         border-top: 1px dashed rgba(0, 0, 0, 0.1);
         margin: var(--margin-narrow) 0 0 0;
         padding: var(--padding-narrow) 0 0 0;
         text-align: right;
       }
-      [buttons] mwc-icon-button {
+
+      [buttons] md-icon {
         color: rgba(var(--secondary-color-rgb), 0.8);
       }
+
       @media screen and (max-width: 480px) {
         h2 {
           padding: var(--padding-narrow);
         }
+
         [card] span {
           display: none;
         }

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

@@ -1 +1 @@
-{"version":3,"file":"connections-monitor.js","sourceRoot":"","sources":["../../client/viewparts/connections-monitor.ts"],"names":[],"mappings":";AAAA,OAAO,2BAA2B,CAAA;AAElC,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,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAG1C,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,UAAU;IAmFhD,MAAM;QACJ,IAAI,WAAW,GAAG,IAAI,CAAC,WAAW,IAAI,EAAE,CAAA;QAExC,OAAO,IAAI,CAAA;;;;;mBAKI,WAAW,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE,CAAC,IAAI,CAAC,gBAAgB,CAAC,UAAU,CAAC,CAAC;KAC9E,CAAA;IACH,CAAC;IAED,gBAAgB,CAAC,UAAU;QACzB,MAAM,EAAE,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,UAAU,CAAA;QACzD,MAAM,SAAS,GAAG,KAAK,IAAI,WAAW,CAAA;QAEtC,OAAO,IAAI,CAAA;6BACc,SAAS;kBACpB,IAAI;gBACN,WAAW;uBACJ,IAAI;;;qBAGN,CAAC,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;oBAC1E,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM;oBAC/B,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS;;;;KAInD,CAAA;IACH,CAAC;IAED,KAAK,CAAC,OAAO,CAAC,UAAU;QACtB,IAAI,QAAQ,GAAG,MAAM,MAAM,CAAC,MAAM,CAAC;YACjC,QAAQ,EAAE,GAAG,CAAA;;;;;;OAMZ;YACD,SAAS,EAAE;gBACT,IAAI,EAAE,UAAU,CAAC,IAAI;aACtB;SACF,CAAC,CAAA;QAEF,UAAU,CAAC,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAA;QAExD,IAAI,CAAC,aAAa,EAAE,CAAA;QAEpB,QAAQ,CAAC,aAAa,CACpB,IAAI,WAAW,CAAC,QAAQ,EAAE;YACxB,MAAM,EAAE;gBACN,KAAK,EAAE,MAAM;gBACb,OAAO,EAAE,GAAG,UAAU,CAAC,KAAK,IAAI,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,iBAAiB,UAAU,CAAC,IAAI,EAAE;aACnG;SACF,CAAC,CACH,CAAA;IACH,CAAC;IAED,KAAK,CAAC,UAAU,CAAC,UAAU;QACzB,IAAI,QAAQ,GAAG,MAAM,MAAM,CAAC,MAAM,CAAC;YACjC,QAAQ,EAAE,GAAG,CAAA;;;;;;OAMZ;YACD,SAAS,EAAE;gBACT,IAAI,EAAE,UAAU,CAAC,IAAI;aACtB;SACF,CAAC,CAAA;QAEF,UAAU,CAAC,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,oBAAoB,CAAC,KAAK,CAAA;QAE3D,IAAI,CAAC,aAAa,EAAE,CAAA;QAEpB,QAAQ,CAAC,aAAa,CACpB,IAAI,WAAW,CAAC,QAAQ,EAAE;YACxB,MAAM,EAAE;gBACN,KAAK,EAAE,MAAM;gBACb,OAAO,EAAE,GAAG,UAAU,CAAC,KAAK,IAAI,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,oBAAoB,UAAU,CAAC,IAAI,EAAE;aACtG;SACF,CAAC,CACH,CAAA;IACH,CAAC;;AAxKM,yBAAM,GAAG;IACd,eAAe;IACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA2EF;CACF,CAAA;AAED;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;;uDAAiB;AAjFhC,kBAAkB;IAD9B,aAAa,CAAC,qBAAqB,CAAC;GACxB,kBAAkB,CA0K9B;SA1KY,kBAAkB","sourcesContent":["import '@material/mwc-icon-button'\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(--theme-white-color);\n        border-radius: var(--border-radius);\n        border: var(--border-dark-color);\n      }\n      h2 {\n        margin: 0;\n        padding: var(--padding-default) 0 var(--padding-default) var(--padding-default);\n        border-bottom: var(--border-dark-color);\n        font: var(--subtitle-font);\n        color: var(--secondary-color);\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(--padding-default);\n        border-bottom: var(--border-dark-color);\n        color: var(--secondary-color);\n      }\n      [card] * {\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n      }\n      [card] strong {\n        color: var(--primary-color);\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(--primary-color);\n        margin-left: var(--margin-narrow);\n      }\n      [buttons] {\n        --mdc-icon-button-size: 20px;\n        --mdc-icon-size: 20px;\n        border-top: 1px dashed rgba(0, 0, 0, 0.1);\n        margin: var(--margin-narrow) 0 0 0;\n        padding: var(--padding-narrow) 0 0 0;\n        text-align: right;\n      }\n      [buttons] mwc-icon-button {\n        color: rgba(var(--secondary-color-rgb), 0.8);\n      }\n      @media screen and (max-width: 480px) {\n        h2 {\n          padding: var(--padding-narrow);\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          <mwc-icon-button\n            @click=${e => (connected ? this.disconnect(connection) : this.connect(connection))}\n            .icon=${connected ? 'link_off' : 'link'}\n            label=${connected ? 'disconnect' : 'connect'}\n          ></mwc-icon-button>\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"]}
+{"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(--theme-white-color);\n        border-radius: var(--border-radius);\n        border: var(--border-dark-color);\n      }\n      h2 {\n        margin: 0;\n        padding: var(--padding-default) 0 var(--padding-default) var(--padding-default);\n        border-bottom: var(--border-dark-color);\n        font: var(--subtitle-font);\n        color: var(--secondary-color);\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(--padding-default);\n        border-bottom: var(--border-dark-color);\n        color: var(--secondary-color);\n      }\n      [card] * {\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n      }\n      [card] strong {\n        color: var(--primary-color);\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(--primary-color);\n        margin-left: var(--margin-narrow);\n      }\n\n      [buttons] {\n        --md-icon-size: 20px;\n        border-top: 1px dashed rgba(0, 0, 0, 0.1);\n        margin: var(--margin-narrow) 0 0 0;\n        padding: var(--padding-narrow) 0 0 0;\n        text-align: right;\n      }\n\n      [buttons] md-icon {\n        color: rgba(var(--secondary-color-rgb), 0.8);\n      }\n\n      @media screen and (max-width: 480px) {\n        h2 {\n          padding: var(--padding-narrow);\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 @click=${e => (connected ? this.disconnect(connection) : this.connect(connection))} 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

@@ -1,3 +1,4 @@
+import '@material/web/icon/icon.js';
 import '@operato/data-grist';
 import { LitElement } from 'lit';
 declare const IntegrationMonitoringSummary_base: (new (...args: any[]) => LitElement) & typeof LitElement;

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

@@ -1,4 +1,5 @@
 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';
@@ -50,7 +51,7 @@ let IntegrationMonitoringSummary = class IntegrationMonitoringSummary extends lo
         return html `
       <div card>
         <span>${title}</span>
-        <mwc-icon>${icon}</mwc-icon>
+        <md-icon>${icon}</md-icon>
         <strong> ${value}</strong>
       </div>
     `;
@@ -104,8 +105,8 @@ IntegrationMonitoringSummary.styles = [
         [card]:nth-child(4) {
           border-right: none;
         }
-        mwc-icon {
-          font-size: var(--fontsize-large);
+        md-icon {
+          --md-icon-size: var(--fontsize-large);
         }
         span {
           line-height: 1;

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

@@ -1 +1 @@
-{"version":3,"file":"monitoring-summary.js","sourceRoot":"","sources":["../../client/viewparts/monitoring-summary.ts"],"names":[],"mappings":"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","sourcesContent":["import '@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(--paper-grey-800);\n        border-radius: var(--border-radius);\n        color: var(--opacity-light-color);\n      }\n\n      [card] {\n        flex: 1;\n        margin: var(--margin-default);\n        padding: var(--padding-narrow) var(--padding-default);\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(--theme-white-color);\n      }\n      span {\n        display: block;\n        margin-bottom: var(--margin-narrow);\n        font-size: var(--fontsize-small);\n        text-transform: capitalize;\n      }\n      @media screen and (max-width: 480px) {\n        :host {\n          font-size: 0.8em;\n        }\n        [card] {\n          margin: var(--margin-narrow);\n          padding: var(--padding-narrow);\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        mwc-icon {\n          font-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        <mwc-icon>${icon}</mwc-icon>\n        <strong> ${value}</strong>\n      </div>\n    `\n  }\n}\n"]}
+{"version":3,"file":"monitoring-summary.js","sourceRoot":"","sources":["../../client/viewparts/monitoring-summary.ts"],"names":[],"mappings":"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","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(--paper-grey-800);\n        border-radius: var(--border-radius);\n        color: var(--opacity-light-color);\n      }\n\n      [card] {\n        flex: 1;\n        margin: var(--margin-default);\n        padding: var(--padding-narrow) var(--padding-default);\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(--theme-white-color);\n      }\n      span {\n        display: block;\n        margin-bottom: var(--margin-narrow);\n        font-size: var(--fontsize-small);\n        text-transform: capitalize;\n      }\n      @media screen and (max-width: 480px) {\n        :host {\n          font-size: 0.8em;\n        }\n        [card] {\n          margin: var(--margin-narrow);\n          padding: var(--padding-narrow);\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

@@ -1,3 +1,4 @@
+import '@material/web/icon/icon.js';
 import { LitElement } from 'lit';
 export declare class PendingQMonitor extends LitElement {
     static styles: import("lit").CSSResult[];

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

@@ -1,4 +1,5 @@
 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';
@@ -11,7 +12,7 @@ let PendingQMonitor = class PendingQMonitor extends LitElement {
         const scales = this.scales || [];
         return html `
       <div tags>
-        <mwc-icon>bookmark_border</mwc-icon>
+        <md-icon>bookmark_border</md-icon>
         <select @change=${e => (this.tag = e.target.value)} .value=${tag}>
           <option value="(*)">*</option>
           ${Object.keys(this.tags || {})
@@ -129,9 +130,9 @@ PendingQMonitor.styles = [
         display: flex;
         align-items: center;
       }
-      [tags] mwc-icon {
+      [tags] md-icon {
+        --md-icon-size: var(--fontsize-large);
         margin: 0 var(--margin-narrow) 0 0;
-        font-size: var(--fontsize-large);
       }
 
       select {

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

@@ -1 +1 @@
-{"version":3,"file":"pending-q-monitor.js","sourceRoot":"","sources":["../../client/viewparts/pending-q-monitor.ts"],"names":[],"mappings":"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","sourcesContent":["import { 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: rgba(var(--primary-color-rgb), 0.1);\n        border-radius: var(--border-radius);\n        padding: var(--padding-narrow);\n      }\n\n      div[tags] {\n        display: flex;\n        align-items: center;\n      }\n      [tags] mwc-icon {\n        margin: 0 var(--margin-narrow) 0 0;\n        font-size: var(--fontsize-large);\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(--margin-default);\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(--margin-default);\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-dark-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        <mwc-icon>bookmark_border</mwc-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"]}
+{"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: rgba(var(--primary-color-rgb), 0.1);\n        border-radius: var(--border-radius);\n        padding: var(--padding-narrow);\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(--margin-narrow) 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(--margin-default);\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(--margin-default);\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-dark-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

@@ -1,4 +1,5 @@
-import '@material/mwc-fab';
+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;

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

@@ -1,5 +1,6 @@
 import { __decorate, __metadata } from "tslib";
-import '@material/mwc-fab';
+import '@material/web/icon/icon.js';
+import '@material/web/fab/fab.js';
 import gql from 'graphql-tag';
 import { css, html, LitElement, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
@@ -27,7 +28,11 @@ let ScenarioInstanceLogView = class ScenarioInstanceLogView extends connect(stor
       <div content>
         ${logs.map(({ timestamp, message, level }) => html ` <div class="${level}"><span>${new Date(timestamp).toLocaleString()}</span> <strong>${level}</strong> ${message}</div> `)}
       </div>
-      ${this.startable ? html `<mwc-fab id="start" icon="play_arrow" title="start" @click=${() => this.dispatchEvent(new CustomEvent('start'))}> </mwc-fab>` : nothing}
+      ${this.startable
+            ? html `<md-fab id="start" title="start" @click=${() => this.dispatchEvent(new CustomEvent('start'))}>
+            <md-icon slot="icon">play_arrow</md-icon>
+          </md-fab>`
+            : nothing}
     `;
     }
     async startSubscribe() {

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

@@ -1 +1 @@
-{"version":3,"file":"scenario-instance-log-view.js","sourceRoot":"","sources":["../../client/viewparts/scenario-instance-log-view.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/mwc-fab'\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'\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(--theme-white-color);\n        padding: var(--padding-wide);\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(--secondary-text-color);\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` <div class=\"${level}\"><span>${new Date(timestamp).toLocaleString()}</span> <strong>${level}</strong> ${message}</div> `\n        )}\n      </div>\n      ${this.startable ? html`<mwc-fab id=\"start\" icon=\"play_arrow\" title=\"start\" @click=${() => this.dispatchEvent(new CustomEvent('start'))}> </mwc-fab>` : 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"]}
+{"version":3,"file":"scenario-instance-log-view.js","sourceRoot":"","sources":["../../client/viewparts/scenario-instance-log-view.ts"],"names":[],"mappings":"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","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'\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(--theme-white-color);\n        padding: var(--padding-wide);\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(--secondary-text-color);\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` <div class=\"${level}\"><span>${new Date(timestamp).toLocaleString()}</span> <strong>${level}</strong> ${message}</div> `\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.d.ts

@@ -1,5 +1,5 @@
+import '@material/web/icon/icon.js';
 import '@operato/data-grist';
-import '@material/mwc-icon';
 import './scenario-instance-view';
 import { LitElement } from 'lit';
 declare const ScenarioInstanceMonitor_base: (new (...args: any[]) => LitElement) & typeof LitElement;

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

@@ -1,6 +1,6 @@
 import { __decorate, __metadata } from "tslib";
+import '@material/web/icon/icon.js';
 import '@operato/data-grist';
-import '@material/mwc-icon';
 import './scenario-instance-view';
 import gql from 'graphql-tag';
 import { css, html, LitElement } from 'lit';
@@ -28,8 +28,8 @@ let ScenarioInstanceMonitor = class ScenarioInstanceMonitor extends localize(i18
       </div>
       <div buttons>
         <span><strong>${rounds}</strong> round</span>
-        <mwc-icon-button @click=${e => this.showInstanceDetail()} icon="wysiwyg"></mwc-icon-button>
-        <mwc-icon-button @click=${e => (running ? this.stopScenario(instance) : this.startScenario(instance))} icon=${running ? 'pause' : 'play_arrow'}></mwc-icon-button>
+        <md-icon @click=${e => this.showInstanceDetail()}>wysiwyg</md-icon>
+        <md-icon @click=${e => (running ? this.stopScenario(instance) : this.startScenario(instance))}>${running ? 'pause' : 'play_arrow'}</md-icon>
       </div>
     `;
     }
@@ -120,6 +120,7 @@ ScenarioInstanceMonitor.styles = [
       [running] [progress] {
         background-color: var(--theme-white-color);
       }
+
       [steps] {
         padding: 0 0 0 var(--padding-narrow);
       }
@@ -130,14 +131,16 @@ ScenarioInstanceMonitor.styles = [
         border-radius: 5px;
         animation: width 1s linear ease-out;
       }
+
       [buttons] {
-        --mdc-icon-button-size: 18px;
-        --mdc-icon-size: 18px;
+        --md-icon-size: 18px;
+
         border-top: var(--border-dark-color);
         padding: var(--padding-narrow) 0 0 0;
         text-align: right;
       }
-      [buttons] mwc-icon-button {
+
+      [buttons] md-icon {
         color: var(--primary-color);
       }
 

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

@@ -1 +1 @@
-{"version":3,"file":"scenario-instance-monitor.js","sourceRoot":"","sources":["../../client/viewparts/scenario-instance-monitor.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/data-grist'\nimport '@material/mwc-icon'\nimport './scenario-instance-view'\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(--padding-narrow);\n        color: var(--secondary-color);\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-dark-color);\n        border-radius: 10px;\n        background-color: var(--theme-white-color);\n      }\n      [progress-wrap] {\n        display: flex;\n        flex-direction: row;\n        margin: 4px 0;\n      }\n\n      [running] [progress] {\n        background-color: var(--theme-white-color);\n      }\n      [steps] {\n        padding: 0 0 0 var(--padding-narrow);\n      }\n\n      #progressbar {\n        height: 100%;\n        text-align: left;\n        border-radius: 5px;\n        animation: width 1s linear ease-out;\n      }\n      [buttons] {\n        --mdc-icon-button-size: 18px;\n        --mdc-icon-size: 18px;\n        border-top: var(--border-dark-color);\n        padding: var(--padding-narrow) 0 0 0;\n        text-align: right;\n      }\n      [buttons] mwc-icon-button {\n        color: var(--primary-color);\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        <span><strong>${rounds}</strong> round</span>\n        <mwc-icon-button @click=${e => this.showInstanceDetail()} icon=\"wysiwyg\"></mwc-icon-button>\n        <mwc-icon-button @click=${e => (running ? this.stopScenario(instance) : this.startScenario(instance))} icon=${running ? 'pause' : 'play_arrow'}></mwc-icon-button>\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(html` <scenario-instance-view .instanceName=${instanceName} .scenarioName=${scenarioName}></scenario-instance-view> `, {\n      size: 'large',\n      title: `${i18next.t('title.scenario-instance')}`\n    })\n  }\n}\n"]}
+{"version":3,"file":"scenario-instance-monitor.js","sourceRoot":"","sources":["../../client/viewparts/scenario-instance-monitor.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@operato/data-grist'\nimport './scenario-instance-view'\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(--padding-narrow);\n        color: var(--secondary-color);\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-dark-color);\n        border-radius: 10px;\n        background-color: var(--theme-white-color);\n      }\n      [progress-wrap] {\n        display: flex;\n        flex-direction: row;\n        margin: 4px 0;\n      }\n\n      [running] [progress] {\n        background-color: var(--theme-white-color);\n      }\n\n      [steps] {\n        padding: 0 0 0 var(--padding-narrow);\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        --md-icon-size: 18px;\n\n        border-top: var(--border-dark-color);\n        padding: var(--padding-narrow) 0 0 0;\n        text-align: right;\n      }\n\n      [buttons] md-icon {\n        color: var(--primary-color);\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        <span><strong>${rounds}</strong> round</span>\n        <md-icon @click=${e => this.showInstanceDetail()}>wysiwyg</md-icon>\n        <md-icon @click=${e => (running ? this.stopScenario(instance) : this.startScenario(instance))}>${running ? 'pause' : 'play_arrow'}</md-icon>\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(html` <scenario-instance-view .instanceName=${instanceName} .scenarioName=${scenarioName}></scenario-instance-view> `, {\n      size: 'large',\n      title: `${i18next.t('title.scenario-instance')}`\n    })\n  }\n}\n"]}

package/dist-client/viewparts/scenario-monitor.d.ts

@@ -1,5 +1,5 @@
+import '@material/web/icon/icon.js';
 import '@operato/data-grist';
-import '@material/mwc-icon-button';
 import './scenario-instance-monitor';
 import { LitElement } from 'lit';
 declare const ScenarioMonitor_base: (new (...args: any[]) => LitElement) & typeof LitElement;

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

@@ -1,6 +1,6 @@
 import { __decorate, __metadata } from "tslib";
+import '@material/web/icon/icon.js';
 import '@operato/data-grist';
-import '@material/mwc-icon-button';
 import './scenario-instance-monitor';
 import gql from 'graphql-tag';
 import { css, html, LitElement } from 'lit';
@@ -26,7 +26,7 @@ let ScenarioMonitor = class ScenarioMonitor extends localize(i18next)(LitElement
           <span>${instances.length}</span>
         </div>
         <div schedule>
-          <mwc-icon .style="background-color: ${color};">schedule</mwc-icon>
+          <md-icon .style="background-color: ${color};">schedule</md-icon>
           <pre>${schedule}</pre>
         </div>
         ${this.renderButtons(scenario)}
@@ -52,10 +52,10 @@ let ScenarioMonitor = class ScenarioMonitor extends localize(i18next)(LitElement
         const scenarioInstance = instances.find(instance => instance.instanceName == scenario.name) || null;
         return html `
       <div buttons ?detail=${this.mode == 'detail'}>
-        <mwc-icon-button @click=${e => this.popupLogView(scenario)} icon="text_snippet"></mwc-icon-button>
+        <md-icon @click=${e => this.popupLogView(scenario)}>text_snippet</md-icon>
         ${!scenarioInstance
-            ? html ` <mwc-icon-button icon="play_circle_outline" @click=${e => this.startScenario(scenario)}></mwc-icon-button>`
-            : html ` <mwc-icon-button icon="pause_circle_outline" @click=${e => this.stopScenario(scenario)} stop></mwc-icon-button> `}
+            ? html ` <md-icon @click=${e => this.startScenario(scenario)}>play_circle</md-icon>`
+            : html ` <md-icon @click=${e => this.stopScenario(scenario)} stop>pause_circle</md-icon> `}
       </div>
     `;
     }
@@ -171,15 +171,20 @@ ScenarioMonitor.styles = [
         line-height: 8px;
       }
 
+      [desc] md-icon {
+        --md-icon-size: 18px;
+        border-radius: 50%;
+        color: var(--theme-white-color);
+      }
+
       [buttons] {
-        --mdc-icon-button-size: 24px;
-        --mdc-icon-size: 24px;
         border-top: var(--border-dark-color);
         padding: var(--padding-narrow) 0 0 0;
         text-align: right;
       }
 
-      [buttons] mwc-icon-button {
+      [buttons] md-icon {
+        --md-icon-size: 22px;
         color: var(--primary-color);
       }
 
@@ -189,12 +194,6 @@ ScenarioMonitor.styles = [
         margin-bottom: auto;
       }
 
-      [desc] mwc-icon {
-        border-radius: 50%;
-        color: var(--theme-white-color);
-        font-size: 18px;
-      }
-
       :host([mode='detail']) [schedule] {
         margin: var(--margin-default) 0 0 0;
       }

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

@@ -1 +1 @@
-{"version":3,"file":"scenario-monitor.js","sourceRoot":"","sources":["../../client/viewparts/scenario-monitor.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/data-grist'\nimport '@material/mwc-icon-button'\nimport './scenario-instance-monitor'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query, state } 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-monitor')\nexport class ScenarioMonitor extends localize(i18next)(LitElement) {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: row;\n\n        border: var(--border-dark-color);\n        background-color: var(--theme-white-color);\n        box-shadow: var(--box-shadow);\n        border-radius: var(--border-radius);\n        position: relative;\n        overflow: hidden;\n      }\n\n      [desc] {\n        position: relative;\n        display: flex;\n        flex-direction: column;\n        padding: var(--padding-default);\n        color: var(--secondary-color);\n        font-size: var(--fontsize-small);\n        width: 100%;\n        box-sizing: border-box;\n      }\n\n      [desc] [detail-info] {\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n        width: calc(100% - 25px);\n        height: 45px;\n      }\n\n      [desc] strong {\n        display: block;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n        font-size: var(--fontsize-large);\n      }\n\n      [desc] span {\n        display: block;\n        position: absolute;\n        top: 0px;\n        right: var(--padding-default);\n        font-size: 40px;\n        font-weight: bold;\n        text-align: right;\n      }\n\n      [desc] [schedule] * {\n        vertical-align: middle;\n        display: inline;\n      }\n\n      [desc] [schedule] {\n        background-color: #f1f1f1;\n        border-radius: 20px;\n        margin: var(--margin-default) 0;\n        padding: var(--padding-narrow);\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n        font-size: 12px;\n        line-height: 8px;\n      }\n\n      [buttons] {\n        --mdc-icon-button-size: 24px;\n        --mdc-icon-size: 24px;\n        border-top: var(--border-dark-color);\n        padding: var(--padding-narrow) 0 0 0;\n        text-align: right;\n      }\n\n      [buttons] mwc-icon-button {\n        color: var(--primary-color);\n      }\n\n      [buttons][detail] {\n        display: flex;\n        flex-direction: column-reverse;\n        margin-bottom: auto;\n      }\n\n      [desc] mwc-icon {\n        border-radius: 50%;\n        color: var(--theme-white-color);\n        font-size: 18px;\n      }\n\n      :host([mode='detail']) [schedule] {\n        margin: var(--margin-default) 0 0 0;\n      }\n\n      :host([mode='detail']) [desc] {\n        flex: unset;\n        width: 200px;\n      }\n\n      :host([mode='detail']) [desc] [buttons] {\n        display: none;\n      }\n\n      :host([mode='detail']) [buttons] {\n        border-top: none;\n        padding: var(--padding-default);\n      }\n\n      ul {\n        flex: 1;\n\n        display: flex;\n        flex-direction: row;\n        flex-wrap: wrap;\n        list-style: none;\n        margin: 0;\n        padding: 0;\n      }\n\n      ul > li {\n        position: relative;\n        margin: var(--margin-default);\n        min-width: 140px;\n        border: 1px solid black;\n        border-radius: var(--border-radius);\n        font-size: 12px;\n      }\n\n      li span {\n        display: block;\n        position: absolute;\n        width: 100%;\n        height: 100%;\n        background-color: rgba(255, 255, 255, 0.8);\n      }\n\n      @media screen and (max-width: 480px) {\n        :host {\n          margin: var(--margin-narrow);\n        }\n\n        [desc] {\n          padding: var(--padding-narrow);\n        }\n\n        [desc] [detail-info] {\n          height: 38px;\n        }\n\n        [desc] span {\n          font-size: 36px;\n        }\n      }\n    `\n  ]\n\n  @property({ type: Object }) scenario: any\n  @property({ type: String }) mode?: string\n\n  render() {\n    const scenario = this.scenario || {}\n    const mode = this.mode\n\n    const { id, name, description, schedule, color } = scenario\n    const instances = scenario.instances || []\n\n    return html`\n      <div desc>\n        <div detail-info title=${name}>\n          <strong>${name}</strong>\n          ${description}\n          <span>${instances.length}</span>\n        </div>\n        <div schedule>\n          <mwc-icon .style=\"background-color: ${color};\">schedule</mwc-icon>\n          <pre>${schedule}</pre>\n        </div>\n        ${this.renderButtons(scenario)}\n      </div>\n\n      ${mode === 'detail'\n        ? html`\n            <ul>\n              ${instances.map(\n                instance => html`\n                  <li .style=\"border-color:${color};background-color:${color}\">\n                    <span></span>\n                    <scenario-instance-monitor .instance=${instance} .color=${color}></scenario-instance-monitor>\n                  </li>\n                `\n              )}\n            </ul>\n            ${this.renderButtons(scenario)}\n          `\n        : html``}\n    `\n  }\n\n  renderButtons(scenario) {\n    const instances = scenario.instances || []\n    const scenarioInstance = instances.find(instance => instance.instanceName == scenario.name) || null\n\n    return html`\n      <div buttons ?detail=${this.mode == 'detail'}>\n        <mwc-icon-button @click=${e => this.popupLogView(scenario)} icon=\"text_snippet\"></mwc-icon-button>\n        ${!scenarioInstance\n          ? html` <mwc-icon-button icon=\"play_circle_outline\" @click=${e => this.startScenario(scenario)}></mwc-icon-button>`\n          : html` <mwc-icon-button icon=\"pause_circle_outline\" @click=${e => this.stopScenario(scenario)} stop></mwc-icon-button> `}\n      </div>\n    `\n  }\n\n  async popupLogView(scenario) {\n    const popup = openPopup(\n      html` <scenario-instance-log-view .scenarioName=${scenario.name} @start=${() => this.startScenario(scenario)} startable></scenario-instance-log-view> `,\n      {\n        size: 'large',\n        title: `${i18next.t('title.scenario-log')} (${scenario.name})`\n      }\n    )\n  }\n\n  async startScenario(scenario) {\n    var response = await client.mutate({\n      mutation: gql`\n        mutation ($scenarioName: String!) {\n          startScenario(scenarioName: $scenarioName) {\n            state\n          }\n        }\n      `,\n      variables: {\n        scenarioName: scenario.name\n      }\n    })\n\n    notify({\n      level: 'info',\n      message: `${!IS_SCENARIO_RUNNING(response.data.startScenario.state) ? 'fail' : 'success'} to start instance : ${scenario.name}`\n    })\n  }\n\n  async stopScenario(scenario) {\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: scenario.name\n      }\n    })\n\n    notify({\n      level: 'info',\n      message: `${IS_SCENARIO_RUNNING(response.data.stopScenario.state) ? 'fail' : 'success'} to stop instance : ${scenario.name}`\n    })\n  }\n}\n"]}
+{"version":3,"file":"scenario-monitor.js","sourceRoot":"","sources":["../../client/viewparts/scenario-monitor.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AAEnC,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,EAAgB,MAAM,mBAAmB,CAAA;AAEzE,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,eAAe,GAArB,MAAM,eAAgB,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;IAkKhE,MAAM;QACJ,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,IAAI,EAAE,CAAA;QACpC,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAA;QAEtB,MAAM,EAAE,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,QAAQ,CAAA;QAC3D,MAAM,SAAS,GAAG,QAAQ,CAAC,SAAS,IAAI,EAAE,CAAA;QAE1C,OAAO,IAAI,CAAA;;iCAEkB,IAAI;oBACjB,IAAI;YACZ,WAAW;kBACL,SAAS,CAAC,MAAM;;;+CAGa,KAAK;iBACnC,QAAQ;;UAEf,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC;;;QAG9B,IAAI,KAAK,QAAQ;YACjB,CAAC,CAAC,IAAI,CAAA;;gBAEE,SAAS,CAAC,GAAG,CACb,QAAQ,CAAC,EAAE,CAAC,IAAI,CAAA;6CACa,KAAK,qBAAqB,KAAK;;2DAEjB,QAAQ,WAAW,KAAK;;iBAElE,CACF;;cAED,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC;WAC/B;YACH,CAAC,CAAC,IAAI,CAAA,EAAE;KACX,CAAA;IACH,CAAC;IAED,aAAa,CAAC,QAAQ;QACpB,MAAM,SAAS,GAAG,QAAQ,CAAC,SAAS,IAAI,EAAE,CAAA;QAC1C,MAAM,gBAAgB,GAAG,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,QAAQ,CAAC,YAAY,IAAI,QAAQ,CAAC,IAAI,CAAC,IAAI,IAAI,CAAA;QAEnG,OAAO,IAAI,CAAA;6BACc,IAAI,CAAC,IAAI,IAAI,QAAQ;0BACxB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC;UAChD,CAAC,gBAAgB;YACjB,CAAC,CAAC,IAAI,CAAA,oBAAoB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,wBAAwB;YACnF,CAAC,CAAC,IAAI,CAAA,oBAAoB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,+BAA+B;;KAE9F,CAAA;IACH,CAAC;IAED,KAAK,CAAC,YAAY,CAAC,QAAQ;QACzB,MAAM,KAAK,GAAG,SAAS,CACrB,IAAI,CAAA,8CAA8C,QAAQ,CAAC,IAAI,WAAW,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,2CAA2C,EACvJ;YACE,IAAI,EAAE,OAAO;YACb,KAAK,EAAE,GAAG,OAAO,CAAC,CAAC,CAAC,oBAAoB,CAAC,KAAK,QAAQ,CAAC,IAAI,GAAG;SAC/D,CACF,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,IAAI;aAC5B;SACF,CAAC,CAAA;QAEF,MAAM,CAAC;YACL,KAAK,EAAE,MAAM;YACb,OAAO,EAAE,GAAG,CAAC,mBAAmB,CAAC,QAAQ,CAAC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,wBAAwB,QAAQ,CAAC,IAAI,EAAE;SAChI,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,IAAI;aAC5B;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,IAAI,EAAE;SAC7H,CAAC,CAAA;IACJ,CAAC;;AAtQM,sBAAM,GAAG;IACd,eAAe;IACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAyJF;CACF,CAAA;AAED;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;iDAAc;AACzC;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;6CAAc;AAhK9B,eAAe;IAD3B,aAAa,CAAC,kBAAkB,CAAC;GACrB,eAAe,CAwQ3B;SAxQY,eAAe","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport '@operato/data-grist'\nimport './scenario-instance-monitor'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query, state } 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-monitor')\nexport class ScenarioMonitor extends localize(i18next)(LitElement) {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: row;\n\n        border: var(--border-dark-color);\n        background-color: var(--theme-white-color);\n        box-shadow: var(--box-shadow);\n        border-radius: var(--border-radius);\n        position: relative;\n        overflow: hidden;\n      }\n\n      [desc] {\n        position: relative;\n        display: flex;\n        flex-direction: column;\n        padding: var(--padding-default);\n        color: var(--secondary-color);\n        font-size: var(--fontsize-small);\n        width: 100%;\n        box-sizing: border-box;\n      }\n\n      [desc] [detail-info] {\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n        width: calc(100% - 25px);\n        height: 45px;\n      }\n\n      [desc] strong {\n        display: block;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n        font-size: var(--fontsize-large);\n      }\n\n      [desc] span {\n        display: block;\n        position: absolute;\n        top: 0px;\n        right: var(--padding-default);\n        font-size: 40px;\n        font-weight: bold;\n        text-align: right;\n      }\n\n      [desc] [schedule] * {\n        vertical-align: middle;\n        display: inline;\n      }\n\n      [desc] [schedule] {\n        background-color: #f1f1f1;\n        border-radius: 20px;\n        margin: var(--margin-default) 0;\n        padding: var(--padding-narrow);\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n        font-size: 12px;\n        line-height: 8px;\n      }\n\n      [desc] md-icon {\n        --md-icon-size: 18px;\n        border-radius: 50%;\n        color: var(--theme-white-color);\n      }\n\n      [buttons] {\n        border-top: var(--border-dark-color);\n        padding: var(--padding-narrow) 0 0 0;\n        text-align: right;\n      }\n\n      [buttons] md-icon {\n        --md-icon-size: 22px;\n        color: var(--primary-color);\n      }\n\n      [buttons][detail] {\n        display: flex;\n        flex-direction: column-reverse;\n        margin-bottom: auto;\n      }\n\n      :host([mode='detail']) [schedule] {\n        margin: var(--margin-default) 0 0 0;\n      }\n\n      :host([mode='detail']) [desc] {\n        flex: unset;\n        width: 200px;\n      }\n\n      :host([mode='detail']) [desc] [buttons] {\n        display: none;\n      }\n\n      :host([mode='detail']) [buttons] {\n        border-top: none;\n        padding: var(--padding-default);\n      }\n\n      ul {\n        flex: 1;\n\n        display: flex;\n        flex-direction: row;\n        flex-wrap: wrap;\n        list-style: none;\n        margin: 0;\n        padding: 0;\n      }\n\n      ul > li {\n        position: relative;\n        margin: var(--margin-default);\n        min-width: 140px;\n        border: 1px solid black;\n        border-radius: var(--border-radius);\n        font-size: 12px;\n      }\n\n      li span {\n        display: block;\n        position: absolute;\n        width: 100%;\n        height: 100%;\n        background-color: rgba(255, 255, 255, 0.8);\n      }\n\n      @media screen and (max-width: 480px) {\n        :host {\n          margin: var(--margin-narrow);\n        }\n\n        [desc] {\n          padding: var(--padding-narrow);\n        }\n\n        [desc] [detail-info] {\n          height: 38px;\n        }\n\n        [desc] span {\n          font-size: 36px;\n        }\n      }\n    `\n  ]\n\n  @property({ type: Object }) scenario: any\n  @property({ type: String }) mode?: string\n\n  render() {\n    const scenario = this.scenario || {}\n    const mode = this.mode\n\n    const { id, name, description, schedule, color } = scenario\n    const instances = scenario.instances || []\n\n    return html`\n      <div desc>\n        <div detail-info title=${name}>\n          <strong>${name}</strong>\n          ${description}\n          <span>${instances.length}</span>\n        </div>\n        <div schedule>\n          <md-icon .style=\"background-color: ${color};\">schedule</md-icon>\n          <pre>${schedule}</pre>\n        </div>\n        ${this.renderButtons(scenario)}\n      </div>\n\n      ${mode === 'detail'\n        ? html`\n            <ul>\n              ${instances.map(\n                instance => html`\n                  <li .style=\"border-color:${color};background-color:${color}\">\n                    <span></span>\n                    <scenario-instance-monitor .instance=${instance} .color=${color}></scenario-instance-monitor>\n                  </li>\n                `\n              )}\n            </ul>\n            ${this.renderButtons(scenario)}\n          `\n        : html``}\n    `\n  }\n\n  renderButtons(scenario) {\n    const instances = scenario.instances || []\n    const scenarioInstance = instances.find(instance => instance.instanceName == scenario.name) || null\n\n    return html`\n      <div buttons ?detail=${this.mode == 'detail'}>\n        <md-icon @click=${e => this.popupLogView(scenario)}>text_snippet</md-icon>\n        ${!scenarioInstance\n          ? html` <md-icon @click=${e => this.startScenario(scenario)}>play_circle</md-icon>`\n          : html` <md-icon @click=${e => this.stopScenario(scenario)} stop>pause_circle</md-icon> `}\n      </div>\n    `\n  }\n\n  async popupLogView(scenario) {\n    const popup = openPopup(\n      html` <scenario-instance-log-view .scenarioName=${scenario.name} @start=${() => this.startScenario(scenario)} startable></scenario-instance-log-view> `,\n      {\n        size: 'large',\n        title: `${i18next.t('title.scenario-log')} (${scenario.name})`\n      }\n    )\n  }\n\n  async startScenario(scenario) {\n    var response = await client.mutate({\n      mutation: gql`\n        mutation ($scenarioName: String!) {\n          startScenario(scenarioName: $scenarioName) {\n            state\n          }\n        }\n      `,\n      variables: {\n        scenarioName: scenario.name\n      }\n    })\n\n    notify({\n      level: 'info',\n      message: `${!IS_SCENARIO_RUNNING(response.data.startScenario.state) ? 'fail' : 'success'} to start instance : ${scenario.name}`\n    })\n  }\n\n  async stopScenario(scenario) {\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: scenario.name\n      }\n    })\n\n    notify({\n      level: 'info',\n      message: `${IS_SCENARIO_RUNNING(response.data.stopScenario.state) ? 'fail' : 'success'} to stop instance : ${scenario.name}`\n    })\n  }\n}\n"]}

package/dist-client/viewparts/scenarios-monitor.d.ts

@@ -1,5 +1,5 @@
+import '@material/web/icon/icon.js';
 import '@operato/data-grist';
-import '@material/mwc-icon-button';
 import './scenario-monitor';
 import { LitElement } from 'lit';
 declare const ScenariosMonitor_base: (new (...args: any[]) => LitElement) & typeof LitElement;

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

@@ -1,6 +1,6 @@
 import { __decorate, __metadata } from "tslib";
+import '@material/web/icon/icon.js';
 import '@operato/data-grist';
-import '@material/mwc-icon-button';
 import './scenario-monitor';
 import { css, html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
@@ -20,8 +20,8 @@ let ScenariosMonitor = class ScenariosMonitor extends localize(i18next)(LitEleme
         <h2>scenarios</h2>
         <span>
           <input .value=${filter} @change=${e => (this.filter = e.target.value)} placeholder="search" />
-          <mwc-icon @click=${e => (this.mode = 'brief')} ?active=${mode == 'brief'}>view_comfy</mwc-icon>
-          <mwc-icon @click=${e => (this.mode = 'detail')} ?active=${mode == 'detail'}>dehaze</mwc-icon>
+          <md-icon @click=${e => (this.mode = 'brief')} ?active=${mode == 'brief'}>view_comfy</md-icon>
+          <md-icon @click=${e => (this.mode = 'detail')} ?active=${mode == 'detail'}>dehaze</md-icon>
         </span>
       </div>
 
@@ -67,6 +67,7 @@ ScenariosMonitor.styles = [
       [info] > span {
         display: flex;
         margin-left: auto;
+        align-items: center;
       }
       [info] input {
         margin: var(--input-margin);
@@ -75,13 +76,13 @@ ScenariosMonitor.styles = [
         border-radius: var(--border-radius);
         font: var(--input-font);
       }
-      [info] mwc-icon {
+      [info] md-icon {
         margin-left: var(--margin-narrow);
         color: rgba(var(--secondary-color-rgb), 0.6);
         line-height: 34px;
         cursor: pointer;
       }
-      [info] mwc-icon[active] {
+      [info] md-icon[active] {
         color: var(--primary-color);
       }