@things-factory/integration-ui 9.0.0-beta.8 → 9.0.0

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

@@ -1 +1 @@
-{"version":3,"file":"scenario-instance-view.js","sourceRoot":"","sources":["../../client/viewparts/scenario-instance-view.ts"],"names":[],"mappings":";AAAA,OAAO,8BAA8B,CAAA;AAErC,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;AAClE,OAAO,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAA;AAEnD,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAC5C,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AACtC,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAG1C,IAAM,oBAAoB,GAA1B,MAAM,oBAAqB,SAAQ,OAAO,CAAC,KAAK,CAAC,CAAC,UAAU,CAAC;IAsHlE,MAAM;QACJ,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,IAAI,MAAM,CAAA;QAC9B,MAAM,EAAE,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC,QAAQ,IAAI,EAAE,CAAA;QAClH,MAAM,EAAE,IAAI,GAAG,CAAC,EAAE,KAAK,GAAG,CAAC,EAAE,IAAI,GAAG,CAAC,EAAE,MAAM,GAAG,CAAC,EAAE,GAAG,QAAQ,IAAI,EAAE,CAAA;QACpE,MAAM,OAAO,GAAG,GAAG,IAAI,CAAC,WAAW,IAAI,EAAE,kBAAkB,IAAI,CAAC,YAAY,EAAE,CAAA;QAE9E,OAAO,IAAI,CAAA;;;yBAGU,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,GAAG,MAAM,CAAC,YAAY,GAAG,IAAI,MAAM;yBACjD,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,GAAG,WAAW,CAAC,YAAY,GAAG,IAAI,WAAW;yBAC3D,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,GAAG,MAAM,CAAC,YAAY,GAAG,IAAI,MAAM;yBACjD,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,GAAG,KAAK,CAAC,YAAY,GAAG,IAAI,KAAK;;;8BAG1C,GAAG,IAAI,MAAM;;4CAEC,YAAY;oCACpB,YAAY;kCACd,WAAW;4BACjB,KAAK;kCACC,KAAK;mCACJ,IAAI;6BACV,MAAM;6BACN,OAAO;;mCAED,OAAO;;mCAEP,GAAG,IAAI,WAAW,IAAI,IAAI,CAAC,oBAAoB,CAAC,SAAS,CAAC;8BAC/D,GAAG,IAAI,MAAM,IAAI,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC;;;sBAGpD,GAAG,IAAI,KAAK;4BACN,IAAI,CAAC,YAAY;4BACjB,IAAI,CAAC,YAAY;;;;KAIxC,CAAA;IACH,CAAC;IAED,YAAY;QACV,IAAI,CAAC,cAAc,EAAE,CAAA;IACvB,CAAC;IAED,oBAAoB;QAClB,KAAK,CAAC,oBAAoB,EAAE,CAAA;QAC5B,IAAI,CAAC,aAAa,EAAE,CAAA;IACtB,CAAC;IAED,YAAY,CAAC,KAAK;QAChB,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC,GAAG,CAAC,WAAW,CAAA;IAC1C,CAAC;IAED,gBAAgB,CAAC,IAAI;QACnB,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,IAAI,EAAE,CAAC,CAAA;QAEpC,IAAI,IAAI,CAAC,MAAM,IAAI,CAAC,EAAE,CAAC;YACrB,OAAO,IAAI,CAAA,oBAAoB,CAAA;QACjC,CAAC;QAED,MAAM,WAAW,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,CAAC,CAAC,CAAA;QAExC,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA,cAAc,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,YAAY,WAAW,IAAI,IAAI,IAAI,IAAI,OAAO,CAAC;;;eAGpG,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE;;KAE7E,CAAA;IACH,CAAC;IAED,oBAAoB,CAAC,IAAI;QACvB,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,IAAI,EAAE,CAAC,CAAA;QAEpC,IAAI,IAAI,CAAC,MAAM,IAAI,CAAC,EAAE,CAAC;YACrB,OAAO,IAAI,CAAA,oBAAoB,CAAA;QACjC,CAAC;QAED,MAAM,UAAU,GAAG,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,CAAC,CAAC,CAAA;QAEtC,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,CAAA,cAAc,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,GAAG,GAAG,CAAC,YAAY,UAAU,IAAI,GAAG,IAAI,GAAG,OAAO,CAAC;;;eAG9F,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,UAAU,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE;;KAE3E,CAAA;IACH,CAAC;IAED,KAAK,CAAC,cAAc;QAClB,IAAI,CAAC,YAAY,GAAG,MAAM,SAAS,CACjC;YACE,KAAK,EAAE,GAAG,CAAA;;;;;;;;;;;;;;;;SAgBT;YACD,SAAS,EAAE;gBACT,YAAY,EAAE,IAAI,CAAC,YAAY;gBAC/B,YAAY,EAAE,IAAI,CAAC,YAAY;aAChC;SACF,EACD;YACE,IAAI,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;gBACvB,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,qBAAqB,CAAC,CAAA;YACtD,CAAC;SACF,CACF,CAAA;IACH,CAAC;IAED,KAAK,CAAC,aAAa;;QACjB,MAAM,CAAA,MAAA,IAAI,CAAC,YAAY,0CAAE,WAAW,EAAE,CAAA,CAAA;QACtC,OAAO,IAAI,CAAC,YAAY,CAAA;IAC1B,CAAC;;AArPM,2BAAM,GAAG;IACd,eAAe;IACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAsGF;CACF,AAzGY,CAyGZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;0DAAsB;AACrB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;0DAAsB;AACrB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;sDAAe;AACd;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;iDAAa;AACZ;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;kDAAc;AACb;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;iDAAa;AACZ;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;yDAAqB;AAlHrC,oBAAoB;IADhC,aAAa,CAAC,wBAAwB,CAAC;GAC3B,oBAAoB,CAuPhC","sourcesContent":["import './scenario-instance-log-view'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { connect } from 'pwa-helpers/connect-mixin'\n\nimport { subscribe } from '@operato/graphql'\nimport { store } from '@operato/shell'\nimport { ScrollbarStyles } from '@operato/styles'\n\n@customElement('scenario-instance-view')\nexport class ScenarioInstanceView extends connect(store)(LitElement) {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        background-color: var(--md-sys-color-background);\n      }\n\n      [diagram] {\n        flex: 1;\n        height: 100%;\n        border: none;\n      }\n\n      [content] {\n        flex: 1;\n\n        display: flex;\n        flex-direction: column;\n        overflow: hidden;\n      }\n\n      [tab] {\n        display: flex;\n      }\n\n      [tab] span {\n        display: inline;\n        padding: var(--spacing-large) var(--spacing-large) var(--spacing-small) var(--spacing-large);\n        border-bottom: 3px solid transparent;\n        color: var(--md-sys-color-secondary);\n        text-transform: capitalize;\n      }\n\n      [tab] span[active] {\n        border-color: var(--md-sys-color-primary);\n        font-weight: bold;\n      }\n\n      [detail] {\n        flex: 1;\n        background-color: var(--md-sys-color-surface);\n        border-top: var(--border-dim-color);\n        overflow: hidden;\n        padding: var(--spacing-large);\n      }\n\n      [detail] > * {\n        display: none;\n        width: 100%;\n        height: 100%;\n        color: var(--md-sys-color-secondary);\n      }\n\n      [detail] > [active] {\n        display: flex;\n        overflow: auto;\n      }\n\n      pre {\n        margin: 0;\n      }\n\n      [detail] ul {\n        margin: 0;\n        padding: 0;\n        flex: 1;\n        list-style: inside '- ';\n      }\n      [detail] li {\n        padding: var(--spacing-medium) var(--spacing-small) var(--spacing-small) var(--spacing-small);\n        border-bottom: var(--border-dim-color);\n      }\n\n      li[active] {\n        font-weight: bold;\n      }\n\n      [value] {\n        flex: 1;\n        overflow: auto;\n        padding: var(--spacing-large);\n      }\n      scenario-instance-log-view [active] {\n        padding: 0;\n      }\n\n      @media only screen and (max-width: 460px) {\n        [info][active] {\n          display: block;\n        }\n        [detail] {\n          padding: var(--spacing-medium);\n          overflow: auto;\n        }\n        [detail] > * {\n          height: auto;\n        }\n        [diagram] {\n          width: 100%;\n          min-height: 500px;\n        }\n      }\n    `\n  ]\n\n  @property({ type: String }) scenarioName?: string\n  @property({ type: String }) instanceName?: string\n  @property({ type: Object }) instance?: any\n  @property({ type: String }) tab?: string\n  @property({ type: String }) step?: string\n  @property({ type: String }) key?: string\n  @property({ type: String }) contextPath?: string\n\n  subscription: any\n\n  render() {\n    const tab = this.tab || 'info'\n    const { scenarioName, instanceName, description, state, progress, variables, data, message } = this.instance || {}\n    const { rate = 0, steps = 0, step = 0, rounds = 0 } = progress || {}\n    const diagram = `${this.contextPath || ''}/scenario-view/${this.scenarioName}`\n\n    return html`\n      <div content>\n        <div tab>\n          <span @click=${e => (this.tab = 'info')} ?active=${tab == 'info'}>info</span>\n          <span @click=${e => (this.tab = 'variables')} ?active=${tab == 'variables'}>variables</span>\n          <span @click=${e => (this.tab = 'data')} ?active=${tab == 'data'}>data</span>\n          <span @click=${e => (this.tab = 'log')} ?active=${tab == 'log'}>log</span>\n        </div>\n        <div detail>\n          <div info ?active=${tab == 'info'}>\n            <ul>\n              <li>scenario name : <strong>${scenarioName}</strong></li>\n              <li>instance name : ${instanceName}</li>\n              <li>description : ${description}</li>\n              <li>state : ${state}</li>\n              <li>total steps : ${steps}</li>\n              <li>current step : ${step}</li>\n              <li>rounds : ${rounds}</li>\n              <li>messge : ${message}</li>\n            </ul>\n            <iframe diagram src=\"${diagram}\"></iframe>\n          </div>\n          <div variables ?active=${tab == 'variables'}>${this.renderVariableObject(variables)}</div>\n          <div data ?active=${tab == 'data'}>${this.renderDataObject(data)}</div>\n          <scenario-instance-log-view\n            log\n            ?active=${tab == 'log'}\n            .scenarioName=${this.scenarioName}\n            .instanceName=${this.instanceName}\n          ></scenario-instance-log-view>\n        </div>\n      </div>\n    `\n  }\n\n  firstUpdated() {\n    this.startSubscribe()\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    this.stopSubscribe()\n  }\n\n  stateChanged(state) {\n    this.contextPath = state.app.contextPath\n  }\n\n  renderDataObject(data) {\n    const keys = Object.keys(data || {})\n\n    if (keys.length == 0) {\n      return html`<pre>no data</pre>`\n    }\n\n    const currentStep = this.step || keys[0]\n\n    return html`\n      <ul keys>\n        ${keys.map(step => html`<li @click=${e => (this.step = step)} ?active=${currentStep == step}>${step}</li>`)}\n      </ul>\n      <div value>\n        <pre>${data[currentStep] ? JSON.stringify(data[currentStep], null, 2) : ''}</pre>\n      </div>\n    `\n  }\n\n  renderVariableObject(data) {\n    const keys = Object.keys(data || {})\n\n    if (keys.length == 0) {\n      return html`<pre>no data</pre>`\n    }\n\n    const currentKey = this.key || keys[0]\n\n    return html`\n      <ul keys>\n        ${keys.map(key => html`<li @click=${e => (this.key = key)} ?active=${currentKey == key}>${key}</li>`)}\n      </ul>\n      <div value>\n        <pre>${data[currentKey] ? JSON.stringify(data[currentKey], null, 2) : ''}</pre>\n      </div>\n    `\n  }\n\n  async startSubscribe() {\n    this.subscription = await subscribe(\n      {\n        query: gql`\n          subscription ($instanceName: String, $scenarioName: String) {\n            scenarioInstanceState(instanceName: $instanceName, scenarioName: $scenarioName) {\n              instanceName\n              scenarioName\n              state\n              progress {\n                rate\n                steps\n                step\n                rounds\n              }\n              variables\n              data\n            }\n          }\n        `,\n        variables: {\n          instanceName: this.instanceName,\n          scenarioName: this.scenarioName\n        }\n      },\n      {\n        next: async ({ data }) => {\n          data && (this.instance = data.scenarioInstanceState)\n        }\n      }\n    )\n  }\n\n  async stopSubscribe() {\n    await this.subscription?.unsubscribe()\n    delete this.subscription\n  }\n}\n"]}
+{"version":3,"file":"scenario-instance-view.js","sourceRoot":"","sources":["../../client/viewparts/scenario-instance-view.ts"],"names":[],"mappings":";AAAA,OAAO,iCAAiC,CAAA;AAExC,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;AAClE,OAAO,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAA;AAEtD,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAC5C,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AACtC,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAG1C,IAAM,oBAAoB,GAA1B,MAAM,oBAAqB,SAAQ,OAAO,CAAC,KAAK,CAAC,CAAC,UAAU,CAAC;aAC3D,WAAM,GAAG;QACd,eAAe;QACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAsGF;KACF,AAzGY,CAyGZ;IAYD,MAAM;QACJ,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,IAAI,MAAM,CAAA;QAC9B,MAAM,EAAE,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC,QAAQ,IAAI,EAAE,CAAA;QAClH,MAAM,EAAE,IAAI,GAAG,CAAC,EAAE,KAAK,GAAG,CAAC,EAAE,IAAI,GAAG,CAAC,EAAE,MAAM,GAAG,CAAC,EAAE,GAAG,QAAQ,IAAI,EAAE,CAAA;QACpE,MAAM,OAAO,GAAG,GAAG,IAAI,CAAC,WAAW,IAAI,EAAE,kBAAkB,IAAI,CAAC,YAAY,EAAE,CAAA;QAE9E,OAAO,IAAI,CAAA;;;yBAGU,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,GAAG,MAAM,CAAC,YAAY,GAAG,IAAI,MAAM;yBACjD,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,GAAG,WAAW,CAAC,YAAY,GAAG,IAAI,WAAW;yBAC3D,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,GAAG,MAAM,CAAC,YAAY,GAAG,IAAI,MAAM;yBACjD,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,GAAG,KAAK,CAAC,YAAY,GAAG,IAAI,KAAK;;;8BAG1C,GAAG,IAAI,MAAM;;4CAEC,YAAY;oCACpB,YAAY;kCACd,WAAW;4BACjB,KAAK;kCACC,KAAK;mCACJ,IAAI;6BACV,MAAM;6BACN,OAAO;;mCAED,OAAO;;mCAEP,GAAG,IAAI,WAAW,IAAI,IAAI,CAAC,oBAAoB,CAAC,SAAS,CAAC;8BAC/D,GAAG,IAAI,MAAM,IAAI,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC;;;sBAGpD,GAAG,IAAI,KAAK;4BACN,IAAI,CAAC,YAAY;4BACjB,IAAI,CAAC,YAAY;;;;KAIxC,CAAA;IACH,CAAC;IAED,YAAY;QACV,IAAI,CAAC,cAAc,EAAE,CAAA;IACvB,CAAC;IAED,oBAAoB;QAClB,KAAK,CAAC,oBAAoB,EAAE,CAAA;QAC5B,IAAI,CAAC,aAAa,EAAE,CAAA;IACtB,CAAC;IAED,YAAY,CAAC,KAAK;QAChB,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC,GAAG,CAAC,WAAW,CAAA;IAC1C,CAAC;IAED,gBAAgB,CAAC,IAAI;QACnB,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,IAAI,EAAE,CAAC,CAAA;QAEpC,IAAI,IAAI,CAAC,MAAM,IAAI,CAAC,EAAE,CAAC;YACrB,OAAO,IAAI,CAAA,oBAAoB,CAAA;QACjC,CAAC;QAED,MAAM,WAAW,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,CAAC,CAAC,CAAA;QAExC,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA,cAAc,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,YAAY,WAAW,IAAI,IAAI,IAAI,IAAI,OAAO,CAAC;;;eAGpG,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE;;KAE7E,CAAA;IACH,CAAC;IAED,oBAAoB,CAAC,IAAI;QACvB,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,IAAI,EAAE,CAAC,CAAA;QAEpC,IAAI,IAAI,CAAC,MAAM,IAAI,CAAC,EAAE,CAAC;YACrB,OAAO,IAAI,CAAA,oBAAoB,CAAA;QACjC,CAAC;QAED,MAAM,UAAU,GAAG,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,CAAC,CAAC,CAAA;QAEtC,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,CAAA,cAAc,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,GAAG,GAAG,CAAC,YAAY,UAAU,IAAI,GAAG,IAAI,GAAG,OAAO,CAAC;;;eAG9F,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,UAAU,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE;;KAE3E,CAAA;IACH,CAAC;IAED,KAAK,CAAC,cAAc;QAClB,IAAI,CAAC,YAAY,GAAG,MAAM,SAAS,CACjC;YACE,KAAK,EAAE,GAAG,CAAA;;;;;;;;;;;;;;;;SAgBT;YACD,SAAS,EAAE;gBACT,YAAY,EAAE,IAAI,CAAC,YAAY;gBAC/B,YAAY,EAAE,IAAI,CAAC,YAAY;aAChC;SACF,EACD;YACE,IAAI,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;gBACvB,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,qBAAqB,CAAC,CAAA;YACtD,CAAC;SACF,CACF,CAAA;IACH,CAAC;IAED,KAAK,CAAC,aAAa;QACjB,MAAM,IAAI,CAAC,YAAY,EAAE,WAAW,EAAE,CAAA;QACtC,OAAO,IAAI,CAAC,YAAY,CAAA;IAC1B,CAAC;;AA1I2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;0DAAsB;AACrB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;0DAAsB;AACrB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;sDAAe;AACd;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;iDAAa;AACZ;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;kDAAc;AACb;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;iDAAa;AACZ;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;yDAAqB;AAlHrC,oBAAoB;IADhC,aAAa,CAAC,wBAAwB,CAAC;GAC3B,oBAAoB,CAuPhC","sourcesContent":["import './scenario-instance-log-view.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { connect } from 'pwa-helpers/connect-mixin.js'\n\nimport { subscribe } from '@operato/graphql'\nimport { store } from '@operato/shell'\nimport { ScrollbarStyles } from '@operato/styles'\n\n@customElement('scenario-instance-view')\nexport class ScenarioInstanceView extends connect(store)(LitElement) {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        background-color: var(--md-sys-color-background);\n      }\n\n      [diagram] {\n        flex: 1;\n        height: 100%;\n        border: none;\n      }\n\n      [content] {\n        flex: 1;\n\n        display: flex;\n        flex-direction: column;\n        overflow: hidden;\n      }\n\n      [tab] {\n        display: flex;\n      }\n\n      [tab] span {\n        display: inline;\n        padding: var(--spacing-large) var(--spacing-large) var(--spacing-small) var(--spacing-large);\n        border-bottom: 3px solid transparent;\n        color: var(--md-sys-color-secondary);\n        text-transform: capitalize;\n      }\n\n      [tab] span[active] {\n        border-color: var(--md-sys-color-primary);\n        font-weight: bold;\n      }\n\n      [detail] {\n        flex: 1;\n        background-color: var(--md-sys-color-surface);\n        border-top: var(--border-dim-color);\n        overflow: hidden;\n        padding: var(--spacing-large);\n      }\n\n      [detail] > * {\n        display: none;\n        width: 100%;\n        height: 100%;\n        color: var(--md-sys-color-secondary);\n      }\n\n      [detail] > [active] {\n        display: flex;\n        overflow: auto;\n      }\n\n      pre {\n        margin: 0;\n      }\n\n      [detail] ul {\n        margin: 0;\n        padding: 0;\n        flex: 1;\n        list-style: inside '- ';\n      }\n      [detail] li {\n        padding: var(--spacing-medium) var(--spacing-small) var(--spacing-small) var(--spacing-small);\n        border-bottom: var(--border-dim-color);\n      }\n\n      li[active] {\n        font-weight: bold;\n      }\n\n      [value] {\n        flex: 1;\n        overflow: auto;\n        padding: var(--spacing-large);\n      }\n      scenario-instance-log-view [active] {\n        padding: 0;\n      }\n\n      @media only screen and (max-width: 460px) {\n        [info][active] {\n          display: block;\n        }\n        [detail] {\n          padding: var(--spacing-medium);\n          overflow: auto;\n        }\n        [detail] > * {\n          height: auto;\n        }\n        [diagram] {\n          width: 100%;\n          min-height: 500px;\n        }\n      }\n    `\n  ]\n\n  @property({ type: String }) scenarioName?: string\n  @property({ type: String }) instanceName?: string\n  @property({ type: Object }) instance?: any\n  @property({ type: String }) tab?: string\n  @property({ type: String }) step?: string\n  @property({ type: String }) key?: string\n  @property({ type: String }) contextPath?: string\n\n  subscription: any\n\n  render() {\n    const tab = this.tab || 'info'\n    const { scenarioName, instanceName, description, state, progress, variables, data, message } = this.instance || {}\n    const { rate = 0, steps = 0, step = 0, rounds = 0 } = progress || {}\n    const diagram = `${this.contextPath || ''}/scenario-view/${this.scenarioName}`\n\n    return html`\n      <div content>\n        <div tab>\n          <span @click=${e => (this.tab = 'info')} ?active=${tab == 'info'}>info</span>\n          <span @click=${e => (this.tab = 'variables')} ?active=${tab == 'variables'}>variables</span>\n          <span @click=${e => (this.tab = 'data')} ?active=${tab == 'data'}>data</span>\n          <span @click=${e => (this.tab = 'log')} ?active=${tab == 'log'}>log</span>\n        </div>\n        <div detail>\n          <div info ?active=${tab == 'info'}>\n            <ul>\n              <li>scenario name : <strong>${scenarioName}</strong></li>\n              <li>instance name : ${instanceName}</li>\n              <li>description : ${description}</li>\n              <li>state : ${state}</li>\n              <li>total steps : ${steps}</li>\n              <li>current step : ${step}</li>\n              <li>rounds : ${rounds}</li>\n              <li>messge : ${message}</li>\n            </ul>\n            <iframe diagram src=\"${diagram}\"></iframe>\n          </div>\n          <div variables ?active=${tab == 'variables'}>${this.renderVariableObject(variables)}</div>\n          <div data ?active=${tab == 'data'}>${this.renderDataObject(data)}</div>\n          <scenario-instance-log-view\n            log\n            ?active=${tab == 'log'}\n            .scenarioName=${this.scenarioName}\n            .instanceName=${this.instanceName}\n          ></scenario-instance-log-view>\n        </div>\n      </div>\n    `\n  }\n\n  firstUpdated() {\n    this.startSubscribe()\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    this.stopSubscribe()\n  }\n\n  stateChanged(state) {\n    this.contextPath = state.app.contextPath\n  }\n\n  renderDataObject(data) {\n    const keys = Object.keys(data || {})\n\n    if (keys.length == 0) {\n      return html`<pre>no data</pre>`\n    }\n\n    const currentStep = this.step || keys[0]\n\n    return html`\n      <ul keys>\n        ${keys.map(step => html`<li @click=${e => (this.step = step)} ?active=${currentStep == step}>${step}</li>`)}\n      </ul>\n      <div value>\n        <pre>${data[currentStep] ? JSON.stringify(data[currentStep], null, 2) : ''}</pre>\n      </div>\n    `\n  }\n\n  renderVariableObject(data) {\n    const keys = Object.keys(data || {})\n\n    if (keys.length == 0) {\n      return html`<pre>no data</pre>`\n    }\n\n    const currentKey = this.key || keys[0]\n\n    return html`\n      <ul keys>\n        ${keys.map(key => html`<li @click=${e => (this.key = key)} ?active=${currentKey == key}>${key}</li>`)}\n      </ul>\n      <div value>\n        <pre>${data[currentKey] ? JSON.stringify(data[currentKey], null, 2) : ''}</pre>\n      </div>\n    `\n  }\n\n  async startSubscribe() {\n    this.subscription = await subscribe(\n      {\n        query: gql`\n          subscription ($instanceName: String, $scenarioName: String) {\n            scenarioInstanceState(instanceName: $instanceName, scenarioName: $scenarioName) {\n              instanceName\n              scenarioName\n              state\n              progress {\n                rate\n                steps\n                step\n                rounds\n              }\n              variables\n              data\n            }\n          }\n        `,\n        variables: {\n          instanceName: this.instanceName,\n          scenarioName: this.scenarioName\n        }\n      },\n      {\n        next: async ({ data }) => {\n          data && (this.instance = data.scenarioInstanceState)\n        }\n      }\n    )\n  }\n\n  async stopSubscribe() {\n    await this.subscription?.unsubscribe()\n    delete this.subscription\n  }\n}\n"]}

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

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

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

@@ -1,7 +1,7 @@
 import { __decorate, __metadata } from "tslib";
 import '@material/web/icon/icon.js';
 import '@operato/data-grist';
-import './scenario-instance-monitor';
+import './scenario-instance-monitor.js';
 import gql from 'graphql-tag';
 import { css, html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
@@ -13,104 +13,9 @@ function IS_SCENARIO_RUNNING(state) {
     return state && state !== 'UNLOADED';
 }
 let ScenarioMonitor = class ScenarioMonitor extends localize(i18next)(LitElement) {
-    render() {
-        const scenario = this.scenario || {};
-        const mode = this.mode;
-        const { id, name, description, schedule, color } = scenario;
-        const instances = scenario.instances || [];
-        return html `
-      <div desc>
-        <div detail-info title=${name}>
-          <strong>${name}</strong>
-          ${description}
-          <span>${instances.length}</span>
-        </div>
-        <div schedule>
-          <md-icon .style="background-color: ${color};">schedule</md-icon>
-          <pre>${schedule}&nbsp;</pre>
-        </div>
-        ${this.renderButtons(scenario)}
-      </div>
-
-      ${mode === 'detail'
-            ? html `
-            <ul>
-              ${instances.map(instance => html `
-                  <li .style="border-color:${color};background-color:${color}">
-                    <span></span>
-                    <scenario-instance-monitor .instance=${instance} .color=${color}></scenario-instance-monitor>
-                  </li>
-                `)}
-            </ul>
-            ${this.renderButtons(scenario)}
-          `
-            : html ``}
-    `;
-    }
-    renderButtons(scenario) {
-        const instances = scenario.instances || [];
-        const scenarioInstance = instances.find(instance => instance.instanceName == scenario.name) || null;
-        return html `
-      <div buttons ?detail=${this.mode == 'detail'}>
-        <md-icon @click=${e => this.popupLogView(scenario)}>text_snippet</md-icon>
-        ${!scenarioInstance
-            ? 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>
-    `;
-    }
-    async popupLogView(scenario) {
-        const popup = openPopup(html `
-        <scenario-instance-log-view
-          .scenarioName=${scenario.name}
-          @start=${() => this.startScenario(scenario)}
-          startable
-        ></scenario-instance-log-view>
-      `, {
-            size: 'large',
-            title: `${i18next.t('title.scenario-log')} (${scenario.name})`
-        });
-    }
-    async startScenario(scenario) {
-        var response = await client.mutate({
-            mutation: gql `
-        mutation ($scenarioName: String!) {
-          startScenario(scenarioName: $scenarioName) {
-            state
-          }
-        }
-      `,
-            variables: {
-                scenarioName: scenario.name
-            }
-        });
-        notify({
-            level: 'info',
-            message: `${!IS_SCENARIO_RUNNING(response.data.startScenario.state) ? 'fail' : 'success'} to start instance : ${scenario.name}`
-        });
-    }
-    async stopScenario(scenario) {
-        var response = await client.mutate({
-            mutation: gql `
-        mutation ($instanceName: String!) {
-          stopScenario(instanceName: $instanceName) {
-            state
-          }
-        }
-      `,
-            variables: {
-                instanceName: scenario.name
-            }
-        });
-        notify({
-            level: 'info',
-            message: `${IS_SCENARIO_RUNNING(response.data.stopScenario.state) ? 'fail' : 'success'} to stop instance : ${scenario.name}`
-        });
-    }
-};
-ScenarioMonitor.styles = [
-    ScrollbarStyles,
-    css `
+    static { this.styles = [
+        ScrollbarStyles,
+        css `
       :host {
         display: flex;
         flex-direction: row;
@@ -237,6 +142,8 @@ ScenarioMonitor.styles = [
         border: 1px solid black;
         border-radius: var(--border-radius);
         font-size: 12px;
+        box-sizing: border-box;
+        overflow: hidden;
       }
 
       li span {
@@ -269,7 +176,102 @@ ScenarioMonitor.styles = [
         }
       }
     `
-];
+    ]; }
+    render() {
+        const scenario = this.scenario || {};
+        const mode = this.mode;
+        const { id, name, description, schedule, color } = scenario;
+        const instances = scenario.instances || [];
+        return html `
+      <div desc>
+        <div detail-info title=${name}>
+          <strong>${name}</strong>
+          ${description}
+          <span>${instances.length}</span>
+        </div>
+        <div schedule>
+          <md-icon style="background-color: ${color};">schedule</md-icon>
+          <pre>${schedule}&nbsp;</pre>
+        </div>
+        ${this.renderButtons(scenario)}
+      </div>
+
+      ${mode === 'detail'
+            ? html `
+            <ul>
+              ${instances.map(instance => html `
+                  <li style="border-color:${color};background-color:${color}">
+                    <span></span>
+                    <scenario-instance-monitor .instance=${instance} .color=${color}></scenario-instance-monitor>
+                  </li>
+                `)}
+            </ul>
+            ${this.renderButtons(scenario)}
+          `
+            : html ``}
+    `;
+    }
+    renderButtons(scenario) {
+        const instances = scenario.instances || [];
+        const scenarioInstance = instances.find(instance => instance.instanceName == scenario.name) || null;
+        return html `
+      <div buttons ?detail=${this.mode == 'detail'}>
+        <md-icon @click=${e => this.popupLogView(scenario)}>text_snippet</md-icon>
+        ${!scenarioInstance
+            ? 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>
+    `;
+    }
+    async popupLogView(scenario) {
+        const popup = openPopup(html `
+        <scenario-instance-log-view
+          .scenarioName=${scenario.name}
+          @start=${() => this.startScenario(scenario)}
+          startable
+        ></scenario-instance-log-view>
+      `, {
+            size: 'large',
+            title: `${i18next.t('title.scenario-log')} (${scenario.name})`
+        });
+    }
+    async startScenario(scenario) {
+        var response = await client.mutate({
+            mutation: gql `
+        mutation ($scenarioName: String!) {
+          startScenario(scenarioName: $scenarioName) {
+            state
+          }
+        }
+      `,
+            variables: {
+                scenarioName: scenario.name
+            }
+        });
+        notify({
+            level: 'info',
+            message: `${!IS_SCENARIO_RUNNING(response.data.startScenario.state) ? 'fail' : 'success'} to start instance : ${scenario.name}`
+        });
+    }
+    async stopScenario(scenario) {
+        var response = await client.mutate({
+            mutation: gql `
+        mutation ($instanceName: String!) {
+          stopScenario(instanceName: $instanceName) {
+            state
+          }
+        }
+      `,
+            variables: {
+                instanceName: scenario.name
+            }
+        });
+        notify({
+            level: 'info',
+            message: `${IS_SCENARIO_RUNNING(response.data.stopScenario.state) ? 'fail' : 'success'} to stop instance : ${scenario.name}`
+        });
+    }
+};
 __decorate([
     property({ type: Object }),
     __metadata("design:type", Object)

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 '@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-dim-color);\n        background-color: var(--md-sys-color-surface);\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(--spacing-medium);\n        color: var(--md-sys-color-secondary);\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(--spacing-medium);\n        font-size: 40px;\n        font-weight: bold;\n        text-align: right;\n      }\n\n      [desc] [schedule] * {\n        vertical-align: middle;\n        display: inline-block;\n      }\n\n      [desc] [schedule] {\n        background-color: #f1f1f1;\n        border-radius: 20px;\n        margin: var(--spacing-medium) 0;\n        padding: var(--spacing-small);\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(--md-sys-color-on-primary);\n      }\n\n      [buttons] {\n        display: flex;\n        flex-direction: row-reverse;\n        border-top: var(--border-dim-color);\n        padding: var(--spacing-small) 0 0 0;\n      }\n\n      [buttons] md-icon {\n        --md-icon-size: 22px;\n        color: var(--md-sys-color-primary);\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(--spacing-medium) 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(--spacing-medium);\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(--spacing-medium);\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      pre {\n        margin: var(--spacing-medium);\n      }\n\n      @media screen and (max-width: 480px) {\n        :host {\n          margin: var(--spacing-small);\n        }\n\n        [desc] {\n          padding: var(--spacing-small);\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}&nbsp;</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`\n        <scenario-instance-log-view\n          .scenarioName=${scenario.name}\n          @start=${() => this.startScenario(scenario)}\n          startable\n        ></scenario-instance-log-view>\n      `,\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":"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","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport '@operato/data-grist'\nimport './scenario-instance-monitor.js'\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-dim-color);\n        background-color: var(--md-sys-color-surface);\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(--spacing-medium);\n        color: var(--md-sys-color-secondary);\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(--spacing-medium);\n        font-size: 40px;\n        font-weight: bold;\n        text-align: right;\n      }\n\n      [desc] [schedule] * {\n        vertical-align: middle;\n        display: inline-block;\n      }\n\n      [desc] [schedule] {\n        background-color: #f1f1f1;\n        border-radius: 20px;\n        margin: var(--spacing-medium) 0;\n        padding: var(--spacing-small);\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(--md-sys-color-on-primary);\n      }\n\n      [buttons] {\n        display: flex;\n        flex-direction: row-reverse;\n        border-top: var(--border-dim-color);\n        padding: var(--spacing-small) 0 0 0;\n      }\n\n      [buttons] md-icon {\n        --md-icon-size: 22px;\n        color: var(--md-sys-color-primary);\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(--spacing-medium) 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(--spacing-medium);\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(--spacing-medium);\n        min-width: 140px;\n        border: 1px solid black;\n        border-radius: var(--border-radius);\n        font-size: 12px;\n        box-sizing: border-box;\n        overflow: hidden;\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      pre {\n        margin: var(--spacing-medium);\n      }\n\n      @media screen and (max-width: 480px) {\n        :host {\n          margin: var(--spacing-small);\n        }\n\n        [desc] {\n          padding: var(--spacing-small);\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}&nbsp;</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`\n        <scenario-instance-log-view\n          .scenarioName=${scenario.name}\n          @start=${() => this.startScenario(scenario)}\n          startable\n        ></scenario-instance-log-view>\n      `,\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,6 +1,6 @@
 import '@material/web/icon/icon.js';
 import '@operato/data-grist';
-import './scenario-monitor';
+import './scenario-monitor.js';
 import { LitElement } from 'lit';
 declare const ScenariosMonitor_base: (new (...args: any[]) => LitElement) & typeof LitElement;
 export declare class ScenariosMonitor extends ScenariosMonitor_base {

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

@@ -1,7 +1,7 @@
 import { __decorate, __metadata } from "tslib";
 import '@material/web/icon/icon.js';
 import '@operato/data-grist';
-import './scenario-monitor';
+import './scenario-monitor.js';
 import { css, html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { i18next, localize } from '@operato/i18n';
@@ -11,41 +11,9 @@ let ScenariosMonitor = class ScenariosMonitor extends localize(i18next)(LitEleme
         super(...arguments);
         this.running = false;
     }
-    render() {
-        var scenarios = this.scenarios || [];
-        const mode = this.mode || 'brief';
-        const filter = this.filter || '';
-        return html `
-      <div info>
-        <h2>scenarios</h2>
-        <span>
-          <input .value=${filter} @change=${e => (this.filter = e.target.value)} placeholder="search" />
-          <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>
-
-      <div content>
-        <pending-q-monitor
-          .pendings=${this.pendings}
-          .colorIndex=${this.colorIndex || {}}
-          .running=${this.running}
-        ></pending-q-monitor>
-
-        <div scenarios mode=${mode}>
-          <div flowbox>
-            ${scenarios
-            .filter(scenario => new RegExp(filter, 'i').test(scenario.name))
-            .map(scenario => html `<scenario-monitor .scenario=${scenario} mode=${mode}></scenario-monitor>`)}
-          </div>
-        </div>
-      </div>
-    `;
-    }
-};
-ScenariosMonitor.styles = [
-    ScrollbarStyles,
-    css `
+    static { this.styles = [
+        ScrollbarStyles,
+        css `
       :host {
         display: flex;
         flex-direction: column;
@@ -138,7 +106,39 @@ ScenariosMonitor.styles = [
         }
       }
     `
-];
+    ]; }
+    render() {
+        var scenarios = this.scenarios || [];
+        const mode = this.mode || 'brief';
+        const filter = this.filter || '';
+        return html `
+      <div info>
+        <h2>scenarios</h2>
+        <span>
+          <input .value=${filter} @change=${e => (this.filter = e.target.value)} placeholder="search" />
+          <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>
+
+      <div content>
+        <pending-q-monitor
+          .pendings=${this.pendings}
+          .colorIndex=${this.colorIndex || {}}
+          .running=${this.running}
+        ></pending-q-monitor>
+
+        <div scenarios mode=${mode}>
+          <div flowbox>
+            ${scenarios
+            .filter(scenario => new RegExp(filter, 'i').test(scenario.name))
+            .map(scenario => html `<scenario-monitor .scenario=${scenario} mode=${mode}></scenario-monitor>`)}
+          </div>
+        </div>
+      </div>
+    `;
+    }
+};
 __decorate([
     property({ type: Array }),
     __metadata("design:type", Object)

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

@@ -1 +1 @@
-{"version":3,"file":"scenarios-monitor.js","sourceRoot":"","sources":["../../client/viewparts/scenarios-monitor.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AAEnC,OAAO,qBAAqB,CAAA;AAC5B,OAAO,oBAAoB,CAAA;AAE3B,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,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;IAA5D;;QAuGwB,YAAO,GAAY,KAAK,CAAA;IAkCvD,CAAC;IAhCC,MAAM;QACJ,IAAI,SAAS,GAAG,IAAI,CAAC,SAAS,IAAI,EAAE,CAAA;QACpC,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,OAAO,CAAA;QACjC,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,IAAI,EAAE,CAAA;QAEhC,OAAO,IAAI,CAAA;;;;0BAIW,MAAM,YAAY,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;4BACnD,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,GAAG,OAAO,CAAC,YAAY,IAAI,IAAI,OAAO;4BACrD,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,GAAG,QAAQ,CAAC,YAAY,IAAI,IAAI,QAAQ;;;;;;sBAM7D,IAAI,CAAC,QAAQ;wBACX,IAAI,CAAC,UAAU,IAAI,EAAE;qBACxB,IAAI,CAAC,OAAO;;;8BAGH,IAAI;;cAEpB,SAAS;aACR,MAAM,CAAC,QAAQ,CAAC,EAAE,CAAC,IAAI,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;aAC/D,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC,IAAI,CAAA,+BAA+B,QAAQ,SAAS,IAAI,sBAAsB,CAAC;;;;KAIzG,CAAA;IACH,CAAC;;AAvIM,uBAAM,GAAG;IACd,eAAe;IACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA4FF;CACF,AA/FY,CA+FZ;AAE0B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;;mDAAe;AACb;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;8CAAc;AACb;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;gDAAgB;AAChB;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;;kDAAc;AACZ;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;oDAAgB;AACd;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;;iDAAyB;AAvG1C,gBAAgB;IAD5B,aAAa,CAAC,mBAAmB,CAAC;GACtB,gBAAgB,CAyI5B","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport '@operato/data-grist'\nimport './scenario-monitor'\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('scenarios-monitor')\nexport class ScenariosMonitor extends localize(i18next)(LitElement) {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n\n        overflow: hidden;\n      }\n\n      [info] {\n        display: flex;\n        margin-bottom: var(--spacing-medium);\n        padding: var(--spacing-small) 0;\n        flex-direction: row;\n        align-items: center;\n        border-bottom: 2px solid var(--md-sys-color-secondary);\n      }\n      [info] h2 {\n        margin: 0;\n        font: var(--subtitle-font);\n        color: var(--md-sys-color-secondary);\n        text-transform: capitalize;\n      }\n\n      [info] > span {\n        display: flex;\n        margin-left: auto;\n        align-items: center;\n      }\n      [info] input {\n        margin: var(--input-margin);\n        padding: var(--spacing-small);\n        border: var(--border-dim-color);\n        border-radius: var(--border-radius);\n        font: var(--input-font);\n      }\n      [info] md-icon {\n        margin-left: var(--spacing-small);\n        color: var(--md-sys-color-secondary);\n        line-height: 34px;\n        cursor: pointer;\n      }\n      [info] md-icon[active] {\n        color: var(--md-sys-color-primary);\n      }\n\n      [content] {\n        flex: 1;\n\n        display: flex;\n        flex-direction: row;\n\n        overflow: hidden;\n      }\n\n      pending-q-monitor {\n        width: 100px;\n      }\n\n      [scenarios] {\n        flex: 1;\n\n        overflow: auto;\n        display: flex;\n        flex-direction: column;\n      }\n\n      [scenarios] [flowbox] {\n        display: flex;\n        flex-direction: column;\n        padding: 10px;\n        gap: 12px;\n      }\n\n      [scenarios][mode='brief'] [flowbox] {\n        overflow: auto;\n        display: grid;\n\n        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n        grid-auto-rows: max-content;\n        grid-gap: 12px;\n      }\n\n      scenario-monitor {\n        flex: none;\n        height: fit-content;\n      }\n\n      @media screen and (max-width: 480px) {\n        pending-q-monitor {\n          width: 80px;\n        }\n      }\n    `\n  ]\n\n  @property({ type: Array }) scenarios: any\n  @property({ type: String }) mode?: string\n  @property({ type: String }) filter?: string\n  @property({ type: Array }) pendings: any\n  @property({ type: Object }) colorIndex: any\n  @property({ type: Boolean }) running: boolean = false\n\n  render() {\n    var scenarios = this.scenarios || []\n    const mode = this.mode || 'brief'\n    const filter = this.filter || ''\n\n    return html`\n      <div info>\n        <h2>scenarios</h2>\n        <span>\n          <input .value=${filter} @change=${e => (this.filter = e.target.value)} placeholder=\"search\" />\n          <md-icon @click=${e => (this.mode = 'brief')} ?active=${mode == 'brief'}>view_comfy</md-icon>\n          <md-icon @click=${e => (this.mode = 'detail')} ?active=${mode == 'detail'}>dehaze</md-icon>\n        </span>\n      </div>\n\n      <div content>\n        <pending-q-monitor\n          .pendings=${this.pendings}\n          .colorIndex=${this.colorIndex || {}}\n          .running=${this.running}\n        ></pending-q-monitor>\n\n        <div scenarios mode=${mode}>\n          <div flowbox>\n            ${scenarios\n              .filter(scenario => new RegExp(filter, 'i').test(scenario.name))\n              .map(scenario => html`<scenario-monitor .scenario=${scenario} mode=${mode}></scenario-monitor>`)}\n          </div>\n        </div>\n      </div>\n    `\n  }\n}\n"]}
+{"version":3,"file":"scenarios-monitor.js","sourceRoot":"","sources":["../../client/viewparts/scenarios-monitor.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AAEnC,OAAO,qBAAqB,CAAA;AAC5B,OAAO,uBAAuB,CAAA;AAE9B,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,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;IAA5D;;QAuGwB,YAAO,GAAY,KAAK,CAAA;IAkCvD,CAAC;aAxIQ,WAAM,GAAG;QACd,eAAe;QACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA4FF;KACF,AA/FY,CA+FZ;IASD,MAAM;QACJ,IAAI,SAAS,GAAG,IAAI,CAAC,SAAS,IAAI,EAAE,CAAA;QACpC,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,OAAO,CAAA;QACjC,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,IAAI,EAAE,CAAA;QAEhC,OAAO,IAAI,CAAA;;;;0BAIW,MAAM,YAAY,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;4BACnD,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,GAAG,OAAO,CAAC,YAAY,IAAI,IAAI,OAAO;4BACrD,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,GAAG,QAAQ,CAAC,YAAY,IAAI,IAAI,QAAQ;;;;;;sBAM7D,IAAI,CAAC,QAAQ;wBACX,IAAI,CAAC,UAAU,IAAI,EAAE;qBACxB,IAAI,CAAC,OAAO;;;8BAGH,IAAI;;cAEpB,SAAS;aACR,MAAM,CAAC,QAAQ,CAAC,EAAE,CAAC,IAAI,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;aAC/D,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC,IAAI,CAAA,+BAA+B,QAAQ,SAAS,IAAI,sBAAsB,CAAC;;;;KAIzG,CAAA;IACH,CAAC;;AAtC0B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;;mDAAe;AACb;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;8CAAc;AACb;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;gDAAgB;AAChB;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;;kDAAc;AACZ;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;oDAAgB;AACd;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;;iDAAyB;AAvG1C,gBAAgB;IAD5B,aAAa,CAAC,mBAAmB,CAAC;GACtB,gBAAgB,CAyI5B","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport '@operato/data-grist'\nimport './scenario-monitor.js'\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('scenarios-monitor')\nexport class ScenariosMonitor extends localize(i18next)(LitElement) {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n\n        overflow: hidden;\n      }\n\n      [info] {\n        display: flex;\n        margin-bottom: var(--spacing-medium);\n        padding: var(--spacing-small) 0;\n        flex-direction: row;\n        align-items: center;\n        border-bottom: 2px solid var(--md-sys-color-secondary);\n      }\n      [info] h2 {\n        margin: 0;\n        font: var(--subtitle-font);\n        color: var(--md-sys-color-secondary);\n        text-transform: capitalize;\n      }\n\n      [info] > span {\n        display: flex;\n        margin-left: auto;\n        align-items: center;\n      }\n      [info] input {\n        margin: var(--input-margin);\n        padding: var(--spacing-small);\n        border: var(--border-dim-color);\n        border-radius: var(--border-radius);\n        font: var(--input-font);\n      }\n      [info] md-icon {\n        margin-left: var(--spacing-small);\n        color: var(--md-sys-color-secondary);\n        line-height: 34px;\n        cursor: pointer;\n      }\n      [info] md-icon[active] {\n        color: var(--md-sys-color-primary);\n      }\n\n      [content] {\n        flex: 1;\n\n        display: flex;\n        flex-direction: row;\n\n        overflow: hidden;\n      }\n\n      pending-q-monitor {\n        width: 100px;\n      }\n\n      [scenarios] {\n        flex: 1;\n\n        overflow: auto;\n        display: flex;\n        flex-direction: column;\n      }\n\n      [scenarios] [flowbox] {\n        display: flex;\n        flex-direction: column;\n        padding: 10px;\n        gap: 12px;\n      }\n\n      [scenarios][mode='brief'] [flowbox] {\n        overflow: auto;\n        display: grid;\n\n        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n        grid-auto-rows: max-content;\n        grid-gap: 12px;\n      }\n\n      scenario-monitor {\n        flex: none;\n        height: fit-content;\n      }\n\n      @media screen and (max-width: 480px) {\n        pending-q-monitor {\n          width: 80px;\n        }\n      }\n    `\n  ]\n\n  @property({ type: Array }) scenarios: any\n  @property({ type: String }) mode?: string\n  @property({ type: String }) filter?: string\n  @property({ type: Array }) pendings: any\n  @property({ type: Object }) colorIndex: any\n  @property({ type: Boolean }) running: boolean = false\n\n  render() {\n    var scenarios = this.scenarios || []\n    const mode = this.mode || 'brief'\n    const filter = this.filter || ''\n\n    return html`\n      <div info>\n        <h2>scenarios</h2>\n        <span>\n          <input .value=${filter} @change=${e => (this.filter = e.target.value)} placeholder=\"search\" />\n          <md-icon @click=${e => (this.mode = 'brief')} ?active=${mode == 'brief'}>view_comfy</md-icon>\n          <md-icon @click=${e => (this.mode = 'detail')} ?active=${mode == 'detail'}>dehaze</md-icon>\n        </span>\n      </div>\n\n      <div content>\n        <pending-q-monitor\n          .pendings=${this.pendings}\n          .colorIndex=${this.colorIndex || {}}\n          .running=${this.running}\n        ></pending-q-monitor>\n\n        <div scenarios mode=${mode}>\n          <div flowbox>\n            ${scenarios\n              .filter(scenario => new RegExp(filter, 'i').test(scenario.name))\n              .map(scenario => html`<scenario-monitor .scenario=${scenario} mode=${mode}></scenario-monitor>`)}\n          </div>\n        </div>\n      </div>\n    `\n  }\n}\n"]}