@things-factory/integration-ui 10.1.27 → 10.1.29

package/dist-client/pages/integration-analysis.js

@@ -1,4 +1,5 @@
 import { __decorate, __metadata } from "tslib";
+import '@operato/list-state/ox-page-state.js';
 import '../analysis/graph-viewer.js';
 import gql from 'graphql-tag';
 import { css, html, nothing } from 'lit';
@@ -6,27 +7,26 @@ import { customElement, query, state } from 'lit/decorators.js';
 import { client } from '@operato/graphql';
 import { i18next, localize } from '@operato/i18n';
 import { PageView } from '@operato/shell';
-import { ScrollbarStyles } from '@operato/styles';
+import { ScrollbarStyles, WorkSurfacePageStyles } from '@operato/styles';
 import { GraphViewer } from '../analysis/graph-viewer.js';
 import { GraphViewerStyles } from '../analysis/graph-viewer-style';
 let IntegrationAnalysis = class IntegrationAnalysis extends localize(i18next)(PageView) {
+    constructor() {
+        super(...arguments);
+        this.loaded = false;
+        this.loadError = null;
+    }
     static { this.styles = [
+        /* The frame owns the page shell; the graph is the content it sizes (ADR-0060 decision 8). */
+        WorkSurfacePageStyles,
         GraphViewerStyles,
         ScrollbarStyles,
         css `
       :host {
         position: relative;
-
-        display: flex;
-        flex-direction: column;
-
-        overflow: hidden;
-        background-color: var(--md-sys-color-background);
-        padding: 0;
       }
 
       [graph-container] {
-        flex: 1;
         margin: 0;
         padding: 0;
       }
@@ -49,10 +49,23 @@ let IntegrationAnalysis = class IntegrationAnalysis extends localize(i18next)(Pa
         };
     }
     render() {
+        /*
+         * The graph is the whole screen. Reading and failing both drew an empty canvas, so a failed read
+         * looked like an integration with nothing in it (ADR-0060 decision 8).
+         */
+        return html `<ox-page-state
+      .loading=${!this.loaded && !this.loadError}
+      .error=${this.loadError}
+      @retry=${() => this.fetchIntegrationAnalysis()}
+      >${this.renderGraph()}</ox-page-state
+    >`;
+    }
+    renderGraph() {
         const info = this.info;
         return html `
       <div
         graph-container
+        class="page-fill"
         @node-mouseenter=${(e) => console.log(e.detail)}
         @node-mouseleave=${(e) => console.log(e.detail)}
       ></div>
@@ -134,14 +147,24 @@ let IntegrationAnalysis = class IntegrationAnalysis extends localize(i18next)(Pa
         }
     }
     async fetchIntegrationAnalysis() {
-        const response = await client.query({
-            query: gql `
-        query {
-          integrationAnalysis
+        this.loadError = null;
+        try {
+            const response = await client.query({
+                query: gql `
+          query {
+            integrationAnalysis
+          }
+        `
+            });
+            if (response.errors?.length) {
+                throw response.errors[0];
+            }
+            this.loaded = true;
+            this.analysis = response.data.integrationAnalysis;
+        }
+        catch (error) {
+            this.loadError = error;
         }
-      `
-        });
-        this.analysis = response.data.integrationAnalysis;
     }
     async onSearch(search) {
         if (!this.graphViewer) {
@@ -222,6 +245,14 @@ __decorate([
     state(),
     __metadata("design:type", Object)
 ], IntegrationAnalysis.prototype, "info", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], IntegrationAnalysis.prototype, "loaded", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], IntegrationAnalysis.prototype, "loadError", void 0);
 __decorate([
     query('[graph-container]'),
     __metadata("design:type", HTMLDivElement)

package/dist-client/pages/integration-analysis.js.map

@@ -1 +1 @@
-{"version":3,"file":"integration-analysis.js","sourceRoot":"","sources":["../../client/pages/integration-analysis.ts"],"names":[],"mappings":"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","sourcesContent":["import '../analysis/graph-viewer.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, nothing } from 'lit'\nimport { customElement, query, state } from 'lit/decorators.js'\n\nimport { client } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { PageView } from '@operato/shell'\nimport { ScrollbarStyles } from '@operato/styles'\nimport { GraphData, Node, Relationship } from '../analysis/graph-data.js'\nimport { GraphViewer } from '../analysis/graph-viewer.js'\nimport { GraphViewerStyles } from '../analysis/graph-viewer-style'\n\n@customElement('integration-analysis')\nexport class IntegrationAnalysis extends localize(i18next)(PageView) {\n  static styles = [\n    GraphViewerStyles,\n    ScrollbarStyles,\n    css`\n      :host {\n        position: relative;\n\n        display: flex;\n        flex-direction: column;\n\n        overflow: hidden;\n        background-color: var(--md-sys-color-background);\n        padding: 0;\n      }\n\n      [graph-container] {\n        flex: 1;\n        margin: 0;\n        padding: 0;\n      }\n\n      .graph-info {\n        position: absolute;\n        top: 10px;\n        left: 10px;\n        opacity: 0.8;\n      }\n    `\n  ]\n\n  @state() private graphViewer?: GraphViewer\n  @state() private analysis?: { nodes: Node[]; relationships: Relationship[] }\n  @state() private info?: { cls: string; property: string; value: string } | null\n\n  @query('[graph-container]') container!: HTMLDivElement\n  @query('[node-info]') nodeInfo!: HTMLAnchorElement\n\n  get context() {\n    return {\n      title: i18next.t('text.integration analysis'),\n      search: {\n        handler: search => this.onSearch(search)\n      },\n      help: 'integration/ui/integration-analysis'\n    }\n  }\n\n  render() {\n    const info = this.info\n\n    return html`\n      <div\n        graph-container\n        @node-mouseenter=${(e: CustomEvent) => console.log(e.detail)}\n        @node-mouseleave=${(e: CustomEvent) => console.log(e.detail)}\n      ></div>\n      <div class=\"graph-info\">\n        ${info\n          ? html`<a href=\"#\" class=\"${info.cls}\" node-info><strong>${info.property}</strong>${info.value}</a>`\n          : nothing}\n      </div>\n    `\n  }\n\n  updated(changes) {\n    if (changes.has('analysis')) {\n      if (!this.graphViewer) {\n        this.graphViewer = new GraphViewer(this.container, {\n          highlight: [\n            {\n              class: 'Connection',\n              property: 'missing',\n              value: true\n            },\n            {\n              class: 'Scenario',\n              property: 'missing',\n              value: true\n            },\n            {\n              class: 'Tag',\n              property: 'missing',\n              value: true\n            }\n          ],\n          minCollision: 60,\n          graphData: {\n            results: [\n              {\n                columns: [],\n                data: [\n                  {\n                    graph: this.analysis\n                  }\n                ]\n              }\n            ],\n            errors: []\n          },\n          nodeRadius: 25,\n          onNodeDoubleClick: node => {\n            switch (node.id) {\n              case '25':\n                // Google\n                window.open(node.properties.url, '_blank')\n                break\n              default:\n                break\n            }\n          },\n          zoomFit: true\n        })\n      } else {\n        this.graphViewer.updateWithGraphData({\n          results: [{ columns: [], data: [{ graph: this.analysis! }] }],\n          errors: []\n        })\n      }\n    }\n\n    if (changes.has('info') && this.info) {\n    }\n  }\n\n  async pageUpdated(changes) {\n    if ('active' in changes) {\n      if (this.active) {\n        await this.fetchIntegrationAnalysis()\n        this.graphViewer?.simulation.restart()\n      } else {\n        this.graphViewer?.simulation.stop()\n      }\n    }\n  }\n\n  async fetchIntegrationAnalysis() {\n    const response = await client.query({\n      query: gql`\n        query {\n          integrationAnalysis\n        }\n      `\n    })\n\n    this.analysis = response.data.integrationAnalysis\n  }\n\n  async onSearch(search: string) {\n    if (!this.graphViewer) {\n      return\n    }\n\n    if (!search) {\n      this.graphViewer.updateWithGraphData({\n        results: [{ columns: [], data: [{ graph: this.analysis! }] }],\n        errors: []\n      })\n      return\n    }\n\n    const { nodes = [], relationships = [] } = this.analysis || {}\n\n    // 검색어와 일치하는 노드를 필터링\n    const matchingNodes = nodes.filter(node => {\n      return node.properties.name && node.properties.name.toLowerCase().includes(search.toLowerCase())\n    })\n\n    if (matchingNodes.length === 0) {\n      this.graphViewer.updateWithGraphData({\n        results: [{ columns: [], data: [{ graph: { nodes: [], relationships: [] } }] }],\n        errors: []\n      })\n      return\n    }\n\n    // 1차로 연결된 노드와 관계를 찾기 위해 관련된 노드 ID를 추적\n    const relatedNodeIds = new Set<string>()\n    const filteredNodes = [] as Node[]\n    const filteredRelationships = [] as Relationship[]\n\n    matchingNodes.forEach(node => {\n      relatedNodeIds.add(node.id)\n      filteredNodes.push(node)\n\n      relationships.forEach(relationship => {\n        const { source, target } = relationship || {}\n        if (source!.id === node.id || target!.id === node.id) {\n          relatedNodeIds.add(source!.id)\n          relatedNodeIds.add(target!.id)\n          filteredRelationships.push(relationship!)\n        }\n      })\n    })\n\n    // 관련된 노드 추가\n    relatedNodeIds.forEach(nodeId => {\n      const node = nodes.find(n => n.id === nodeId)\n      if (node) {\n        filteredNodes.push(node)\n      }\n    })\n\n    // 새로운 GraphData 구성\n    const filteredGraphData: GraphData = {\n      results: [\n        {\n          columns: [],\n          data: [\n            {\n              graph: {\n                nodes: filteredNodes,\n                relationships: filteredRelationships\n              }\n            }\n          ]\n        }\n      ],\n      errors: []\n    }\n\n    // GraphViewer 업데이트\n    this.graphViewer.updateWithGraphData(filteredGraphData)\n  }\n}\n"]}
+{"version":3,"file":"integration-analysis.js","sourceRoot":"","sources":["../../client/pages/integration-analysis.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/list-state/ox-page-state.js'\n\nimport '../analysis/graph-viewer.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, nothing } from 'lit'\nimport { customElement, query, state } from 'lit/decorators.js'\n\nimport { client } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { PageView } from '@operato/shell'\nimport { ScrollbarStyles, WorkSurfacePageStyles } from '@operato/styles'\nimport { GraphData, Node, Relationship } from '../analysis/graph-data.js'\nimport { GraphViewer } from '../analysis/graph-viewer.js'\nimport { GraphViewerStyles } from '../analysis/graph-viewer-style'\n\n@customElement('integration-analysis')\nexport class IntegrationAnalysis extends localize(i18next)(PageView) {\n  static styles = [\n    /* The frame owns the page shell; the graph is the content it sizes (ADR-0060 decision 8). */\n    WorkSurfacePageStyles,\n    GraphViewerStyles,\n    ScrollbarStyles,\n    css`\n      :host {\n        position: relative;\n      }\n\n      [graph-container] {\n        margin: 0;\n        padding: 0;\n      }\n\n      .graph-info {\n        position: absolute;\n        top: 10px;\n        left: 10px;\n        opacity: 0.8;\n      }\n    `\n  ]\n\n  @state() private graphViewer?: GraphViewer\n  @state() private analysis?: { nodes: Node[]; relationships: Relationship[] }\n  @state() private info?: { cls: string; property: string; value: string } | null\n  @state() private loaded = false\n  @state() private loadError: unknown = null\n\n  @query('[graph-container]') container!: HTMLDivElement\n  @query('[node-info]') nodeInfo!: HTMLAnchorElement\n\n  get context() {\n    return {\n      title: i18next.t('text.integration analysis'),\n      search: {\n        handler: search => this.onSearch(search)\n      },\n      help: 'integration/ui/integration-analysis'\n    }\n  }\n\n  render() {\n    /*\n     * The graph is the whole screen. Reading and failing both drew an empty canvas, so a failed read\n     * looked like an integration with nothing in it (ADR-0060 decision 8).\n     */\n    return html`<ox-page-state\n      .loading=${!this.loaded && !this.loadError}\n      .error=${this.loadError}\n      @retry=${() => this.fetchIntegrationAnalysis()}\n      >${this.renderGraph()}</ox-page-state\n    >`\n  }\n\n  renderGraph() {\n    const info = this.info\n\n    return html`\n      <div\n        graph-container\n        class=\"page-fill\"\n        @node-mouseenter=${(e: CustomEvent) => console.log(e.detail)}\n        @node-mouseleave=${(e: CustomEvent) => console.log(e.detail)}\n      ></div>\n      <div class=\"graph-info\">\n        ${\n          info\n            ? html`<a href=\"#\" class=\"${info.cls}\" node-info><strong>${info.property}</strong>${info.value}</a>`\n            : nothing\n        }\n      </div>\n    `\n  }\n\n  updated(changes) {\n    if (changes.has('analysis')) {\n      if (!this.graphViewer) {\n        this.graphViewer = new GraphViewer(this.container, {\n          highlight: [\n            {\n              class: 'Connection',\n              property: 'missing',\n              value: true\n            },\n            {\n              class: 'Scenario',\n              property: 'missing',\n              value: true\n            },\n            {\n              class: 'Tag',\n              property: 'missing',\n              value: true\n            }\n          ],\n          minCollision: 60,\n          graphData: {\n            results: [\n              {\n                columns: [],\n                data: [\n                  {\n                    graph: this.analysis\n                  }\n                ]\n              }\n            ],\n            errors: []\n          },\n          nodeRadius: 25,\n          onNodeDoubleClick: node => {\n            switch (node.id) {\n              case '25':\n                // Google\n                window.open(node.properties.url, '_blank')\n                break\n              default:\n                break\n            }\n          },\n          zoomFit: true\n        })\n      } else {\n        this.graphViewer.updateWithGraphData({\n          results: [{ columns: [], data: [{ graph: this.analysis! }] }],\n          errors: []\n        })\n      }\n    }\n\n    if (changes.has('info') && this.info) {\n    }\n  }\n\n  async pageUpdated(changes) {\n    if ('active' in changes) {\n      if (this.active) {\n        await this.fetchIntegrationAnalysis()\n        this.graphViewer?.simulation.restart()\n      } else {\n        this.graphViewer?.simulation.stop()\n      }\n    }\n  }\n\n  async fetchIntegrationAnalysis() {\n    this.loadError = null\n\n    try {\n      const response = await client.query({\n        query: gql`\n          query {\n            integrationAnalysis\n          }\n        `\n      })\n\n      if (response.errors?.length) {\n        throw response.errors[0]\n      }\n\n      this.loaded = true\n      this.analysis = response.data.integrationAnalysis\n    } catch (error) {\n      this.loadError = error\n    }\n  }\n\n  async onSearch(search: string) {\n    if (!this.graphViewer) {\n      return\n    }\n\n    if (!search) {\n      this.graphViewer.updateWithGraphData({\n        results: [{ columns: [], data: [{ graph: this.analysis! }] }],\n        errors: []\n      })\n      return\n    }\n\n    const { nodes = [], relationships = [] } = this.analysis || {}\n\n    // 검색어와 일치하는 노드를 필터링\n    const matchingNodes = nodes.filter(node => {\n      return node.properties.name && node.properties.name.toLowerCase().includes(search.toLowerCase())\n    })\n\n    if (matchingNodes.length === 0) {\n      this.graphViewer.updateWithGraphData({\n        results: [{ columns: [], data: [{ graph: { nodes: [], relationships: [] } }] }],\n        errors: []\n      })\n      return\n    }\n\n    // 1차로 연결된 노드와 관계를 찾기 위해 관련된 노드 ID를 추적\n    const relatedNodeIds = new Set<string>()\n    const filteredNodes = [] as Node[]\n    const filteredRelationships = [] as Relationship[]\n\n    matchingNodes.forEach(node => {\n      relatedNodeIds.add(node.id)\n      filteredNodes.push(node)\n\n      relationships.forEach(relationship => {\n        const { source, target } = relationship || {}\n        if (source!.id === node.id || target!.id === node.id) {\n          relatedNodeIds.add(source!.id)\n          relatedNodeIds.add(target!.id)\n          filteredRelationships.push(relationship!)\n        }\n      })\n    })\n\n    // 관련된 노드 추가\n    relatedNodeIds.forEach(nodeId => {\n      const node = nodes.find(n => n.id === nodeId)\n      if (node) {\n        filteredNodes.push(node)\n      }\n    })\n\n    // 새로운 GraphData 구성\n    const filteredGraphData: GraphData = {\n      results: [\n        {\n          columns: [],\n          data: [\n            {\n              graph: {\n                nodes: filteredNodes,\n                relationships: filteredRelationships\n              }\n            }\n          ]\n        }\n      ],\n      errors: []\n    }\n\n    // GraphViewer 업데이트\n    this.graphViewer.updateWithGraphData(filteredGraphData)\n  }\n}\n"]}

package/dist-client/pages/integration-monitor.d.ts

@@ -1,3 +1,4 @@
+import '@operato/list-state/ox-page-state.js';
 import '../viewparts/monitoring-summary.js';
 import '../viewparts/pending-q-monitor.js';
 import '../viewparts/scenarios-monitor.js';
@@ -11,6 +12,8 @@ export declare class IntegrationMonitor extends IntegrationMonitor_base {
     pendings: any;
     connections: any;
     colorIndex: any;
+    loaded: boolean;
+    loadError: unknown;
     scenarioInstanceStateSubscription: any;
     scenarioQueueStateSubscription: any;
     connectionStateSubscription: any;
@@ -19,7 +22,9 @@ export declare class IntegrationMonitor extends IntegrationMonitor_base {
         help: string;
     };
     render(): import("lit-html").TemplateResult<1>;
+    renderMonitor(): import("lit-html").TemplateResult<1>;
     pageUpdated(changes: any): Promise<void>;
+    load: () => Promise<void>;
     fetchScenarios(): Promise<void>;
     fetchConnections(): Promise<void>;
     startSubscribe(): Promise<void>;

package/dist-client/pages/integration-monitor.js

@@ -1,15 +1,16 @@
 import { __decorate, __metadata } from "tslib";
+import '@operato/list-state/ox-page-state.js';
 import '../viewparts/monitoring-summary.js';
 import '../viewparts/pending-q-monitor.js';
 import '../viewparts/scenarios-monitor.js';
 import '../viewparts/connections-monitor.js';
 import gql from 'graphql-tag';
 import { css, html } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { customElement, property, state } from 'lit/decorators.js';
 import { client, subscribe } from '@operato/graphql';
 import { i18next, localize } from '@operato/i18n';
 import { PageView, InheritedValueType } from '@operato/shell';
-import { ScrollbarStyles } from '@operato/styles';
+import { ScrollbarStyles, WorkSurfacePageStyles } from '@operato/styles';
 function IS_SCENARIO_RUNNING(state) {
     return state && state !== 'UNLOADED';
 }
@@ -29,16 +30,31 @@ function toColor(string) {
     return color;
 }
 let IntegrationMonitor = class IntegrationMonitor extends localize(i18next)(PageView) {
+    constructor() {
+        super(...arguments);
+        this.loaded = false;
+        this.loadError = null;
+        this.load = async () => {
+            this.loadError = null;
+            try {
+                await this.fetchScenarios();
+                await this.fetchConnections();
+                await this.startSubscribe();
+                this.loaded = true;
+            }
+            catch (error) {
+                this.loadError = error;
+            }
+        };
+    }
     static { this.ScenarioInstanceStatus = ['READY', 'STARTED', 'STOPPED', 'HALTED']; }
     static { this.styles = [
+        /* The frame owns the page shell; the two monitors are the content it sizes (ADR-0060 decision 8). */
+        WorkSurfacePageStyles,
         ScrollbarStyles,
         css `
+      /* The panels are bordered boxes, so they keep a gutter off the window edge. */
       :host {
-        display: flex;
-        flex-direction: column;
-
-        overflow: hidden;
-        background-color: var(--md-sys-color-background);
         padding: var(--spacing-large);
       }
 
@@ -47,7 +63,6 @@ let IntegrationMonitor = class IntegrationMonitor extends localize(i18next)(Page
       }
 
       content {
-        flex: 1;
         display: flex;
         flex-direction: row;
 
@@ -91,13 +106,23 @@ let IntegrationMonitor = class IntegrationMonitor extends localize(i18next)(Page
         };
     }
     render() {
+        /*
+         * Scenarios and connections are read before anything is drawn. Reading and failing both left the
+         * summary at zero and the panels empty, so a stopped server read as "nothing is running"
+         * (ADR-0060 decision 8).
+         */
+        return html `<ox-page-state .loading=${!this.loaded && !this.loadError} .error=${this.loadError} @retry=${this.load}>
+      ${this.renderMonitor()}
+    </ox-page-state>`;
+    }
+    renderMonitor() {
         return html `
       <integration-summary
         .pendings=${this.pendings}
         .scenarios=${this.scenarios}
         .connections=${this.connections}
       ></integration-summary>
-      <content>
+      <content class="page-fill">
         <scenarios-monitor
           .scenarios=${this.scenarios}
           .pendings=${this.pendings}
@@ -111,9 +136,7 @@ let IntegrationMonitor = class IntegrationMonitor extends localize(i18next)(Page
     async pageUpdated(changes) {
         if ('active' in changes) {
             if (this.active) {
-                await this.fetchScenarios();
-                await this.fetchConnections();
-                await this.startSubscribe();
+                await this.load();
             }
             else {
                 await this.stopSubscribe();
@@ -165,6 +188,9 @@ let IntegrationMonitor = class IntegrationMonitor extends localize(i18next)(Page
                 inherited: InheritedValueType.Include
             }
         });
+        if (response.errors?.length) {
+            throw response.errors[0];
+        }
         var colorIndex = {};
         this.scenarios = (response.data.responses.items || []).map(scenario => {
             var color = toColor(scenario.id);
@@ -200,6 +226,9 @@ let IntegrationMonitor = class IntegrationMonitor extends localize(i18next)(Page
                 inherited: InheritedValueType.Include
             }
         });
+        if (response.errors?.length) {
+            throw response.errors[0];
+        }
         this.connections = response.data.responses.items || [];
         // .map(connection => {
         //   var color = toColor(scenario.id)
@@ -353,6 +382,14 @@ __decorate([
     property({ type: Object }),
     __metadata("design:type", Object)
 ], IntegrationMonitor.prototype, "colorIndex", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], IntegrationMonitor.prototype, "loaded", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], IntegrationMonitor.prototype, "loadError", void 0);
 IntegrationMonitor = __decorate([
     customElement('integration-monitor')
 ], IntegrationMonitor);

package/dist-client/pages/integration-monitor.js.map

@@ -1 +1 @@
-{"version":3,"file":"integration-monitor.js","sourceRoot":"","sources":["../../client/pages/integration-monitor.ts"],"names":[],"mappings":"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","sourcesContent":["import '../viewparts/monitoring-summary.js'\nimport '../viewparts/pending-q-monitor.js'\nimport '../viewparts/scenarios-monitor.js'\nimport '../viewparts/connections-monitor.js'\n\nimport gql from 'graphql-tag'\nimport { css, html } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { client, subscribe } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { PageView, InheritedValueType } from '@operato/shell'\nimport { ScrollbarStyles } from '@operato/styles'\n\nfunction IS_SCENARIO_RUNNING(state) {\n  return state && state !== 'UNLOADED'\n}\n\nfunction toColor(string) {\n  var hash = 0\n  if (string.length === 0) return hash\n  for (var i = 0; i < string.length; i++) {\n    hash = string.charCodeAt(i) + ((hash << 5) - hash)\n    hash = hash & hash\n  }\n  var color = '#'\n  for (var i = 0; i < 3; i++) {\n    var value = (hash >> (i * 8)) & 255\n    color += ('00' + value.toString(16)).substr(-2)\n  }\n  return color\n}\n\n@customElement('integration-monitor')\nexport class IntegrationMonitor extends localize(i18next)(PageView) {\n  static ScenarioInstanceStatus = ['READY', 'STARTED', 'STOPPED', 'HALTED']\n\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n\n        overflow: hidden;\n        background-color: var(--md-sys-color-background);\n        padding: var(--spacing-large);\n      }\n\n      integration-summary {\n        margin-bottom: var(--spacing-large);\n      }\n\n      content {\n        flex: 1;\n        display: flex;\n        flex-direction: row;\n\n        overflow: hidden;\n      }\n\n      connections-monitor {\n        width: 180px;\n      }\n\n      scenarios-monitor {\n        flex: 1;\n        margin: 0 var(--spacing-large) 0 0;\n      }\n\n      @media screen and (max-width: 480px) {\n        :host {\n          padding: var(--spacing-medium);\n        }\n        integration-summary {\n          margin-bottom: var(--spacing-medium);\n        }\n        content {\n          display: block;\n          overflow: auto;\n        }\n        scenarios-monitor {\n          min-height: 350px;\n          margin: 0 0 var(--spacing-medium) 0;\n        }\n        connections-monitor {\n          width: initial;\n        }\n      }\n    `\n  ]\n\n  @property({ type: Array }) scenarios: any\n  @property({ type: Array }) pendings: any\n  @property({ type: Array }) connections: any\n  @property({ type: Object }) colorIndex: any\n\n  scenarioInstanceStateSubscription: any\n  scenarioQueueStateSubscription: any\n  connectionStateSubscription: any\n\n  get context() {\n    return {\n      title: i18next.t('text.integration monitor'),\n      help: 'integration/ui/integration-monitor'\n    }\n  }\n\n  render() {\n    return html`\n      <integration-summary\n        .pendings=${this.pendings}\n        .scenarios=${this.scenarios}\n        .connections=${this.connections}\n      ></integration-summary>\n      <content>\n        <scenarios-monitor\n          .scenarios=${this.scenarios}\n          .pendings=${this.pendings}\n          .colorIndex=${this.colorIndex || {}}\n          .running=${!!this.active}\n        ></scenarios-monitor>\n        <connections-monitor .connections=${this.connections}></connections-monitor>\n      </content>\n    `\n  }\n\n  async pageUpdated(changes) {\n    if ('active' in changes) {\n      if (this.active) {\n        await this.fetchScenarios()\n        await this.fetchConnections()\n        await this.startSubscribe()\n      } else {\n        await this.stopSubscribe()\n      }\n    }\n  }\n\n  async fetchScenarios() {\n    const response = await client.query({\n      query: gql`\n        query ($inherited: InheritedValueType) {\n          responses: scenarios(inherited: $inherited) {\n            items {\n              id\n              name\n              description\n              active\n              state\n              schedule\n              timezone\n              instances {\n                instanceName\n                scenarioName\n                state\n                progress {\n                  rate\n                  steps\n                  step\n                  rounds\n                }\n                variables\n                data\n                message\n              }\n              updater {\n                id\n                name\n              }\n              updatedAt\n              domain {\n                id\n                name\n              }\n            }\n            total\n          }\n        }\n      `,\n      variables: {\n        inherited: InheritedValueType.Include\n      }\n    })\n\n    var colorIndex = {}\n    this.scenarios = (response.data.responses.items || []).map(scenario => {\n      var color = toColor(scenario.id)\n      colorIndex[scenario.id] = color\n\n      return {\n        ...scenario,\n        color\n      }\n    })\n    this.colorIndex = colorIndex\n  }\n\n  async fetchConnections() {\n    const response = await client.query({\n      query: gql`\n        query ($inherited: InheritedValueType) {\n          responses: connections(inherited: $inherited) {\n            items {\n              id\n              name\n              description\n              type\n              state\n              domain {\n                id\n                name\n              }\n            }\n            total\n          }\n        }\n      `,\n      variables: {\n        inherited: InheritedValueType.Include\n      }\n    })\n\n    this.connections = response.data.responses.items || []\n    // .map(connection => {\n    //   var color = toColor(scenario.id)\n    //   colorIndex[scenario.id] = color\n\n    //   return {\n    //     ...scenario,\n    //     color\n    //   }\n    // })\n    // this.colorIndex = colorIndex\n  }\n\n  async startSubscribe() {\n    if (this.scenarioInstanceStateSubscription) {\n      return\n    }\n\n    this.scenarioInstanceStateSubscription = await subscribe(\n      {\n        query: gql`\n          subscription {\n            scenarioInstanceState {\n              instanceName\n              scenarioName\n              state\n              progress {\n                rate\n                steps\n                step\n                rounds\n              }\n            }\n          }\n        `\n      },\n      {\n        next: async ({ data }) => {\n          if (data) {\n            var { scenarioName, instanceName, state } = data.scenarioInstanceState\n\n            this.scenarios = this.scenarios || []\n            var scenario = this.scenarios.find(scenario => scenario.name === scenarioName)\n\n            if (scenario) {\n              var idx = scenario.instances.findIndex(instance => instance.instanceName === instanceName)\n              if (idx == -1) {\n                if (IS_SCENARIO_RUNNING(state)) {\n                  scenario.instances.push(data.scenarioInstanceState)\n                }\n              } else {\n                if (!IS_SCENARIO_RUNNING(state)) {\n                  scenario.instances.splice(idx, 1)\n                } else {\n                  scenario.instances.splice(idx, 1, data.scenarioInstanceState)\n                }\n              }\n            } else {\n              this.scenarios = []\n\n              await this.stopSubscribe()\n              await this.fetchScenarios()\n              await this.startSubscribe()\n\n              return\n            }\n\n            /* change object intentionally to force to refresh scenario */\n            this.scenarios.splice(this.scenarios.indexOf(scenario), 1, { ...scenario })\n            this.scenarios = [...this.scenarios]\n          }\n        },\n        start: subscription => {\n          console.log(subscription)\n        },\n        error: error => {\n          console.log(error)\n        },\n        complete: () => {\n          console.log('complete')\n        }\n      }\n    )\n\n    this.scenarioQueueStateSubscription = await subscribe(\n      {\n        query: gql`\n          subscription {\n            scenarioQueueState {\n              queue {\n                stuff\n                due\n                priority\n                tag\n              }\n            }\n          }\n        `\n      },\n      {\n        next: ({ data }) => {\n          if (data) {\n            this.pendings = data.scenarioQueueState.queue\n          }\n        }\n      }\n    )\n\n    this.connectionStateSubscription = await subscribe(\n      {\n        query: gql`\n          subscription {\n            connectionState {\n              id\n              name\n              description\n              type\n              state\n              domain {\n                id\n                name\n              }\n            }\n          }\n        `\n      },\n      {\n        next: async ({ data }) => {\n          if (data) {\n            var state = data.connectionState\n\n            this.connections = this.connections || []\n            var idx = this.connections.findIndex(\n              connection => connection.id === state.id && connection.domain.id === state.domain.id\n            )\n\n            if (idx !== -1) {\n              this.connections[idx] = data.connectionState\n              this.connections = [...this.connections]\n            } else {\n              this.connections = [...this.connections, data.connectionState]\n            }\n          }\n        }\n      }\n    )\n  }\n\n  async stopSubscribe() {\n    await this.scenarioInstanceStateSubscription?.unsubscribe()\n    await this.scenarioQueueStateSubscription?.unsubscribe()\n    await this.connectionStateSubscription?.unsubscribe()\n\n    delete this.scenarioInstanceStateSubscription\n    delete this.scenarioQueueStateSubscription\n    delete this.connectionStateSubscription\n  }\n}\n"]}
+{"version":3,"file":"integration-monitor.js","sourceRoot":"","sources":["../../client/pages/integration-monitor.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/list-state/ox-page-state.js'\n\nimport '../viewparts/monitoring-summary.js'\nimport '../viewparts/pending-q-monitor.js'\nimport '../viewparts/scenarios-monitor.js'\nimport '../viewparts/connections-monitor.js'\n\nimport gql from 'graphql-tag'\nimport { css, html } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { client, subscribe } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { PageView, InheritedValueType } from '@operato/shell'\nimport { ScrollbarStyles, WorkSurfacePageStyles } from '@operato/styles'\n\nfunction IS_SCENARIO_RUNNING(state) {\n  return state && state !== 'UNLOADED'\n}\n\nfunction toColor(string) {\n  var hash = 0\n  if (string.length === 0) return hash\n  for (var i = 0; i < string.length; i++) {\n    hash = string.charCodeAt(i) + ((hash << 5) - hash)\n    hash = hash & hash\n  }\n  var color = '#'\n  for (var i = 0; i < 3; i++) {\n    var value = (hash >> (i * 8)) & 255\n    color += ('00' + value.toString(16)).substr(-2)\n  }\n  return color\n}\n\n@customElement('integration-monitor')\nexport class IntegrationMonitor extends localize(i18next)(PageView) {\n  static ScenarioInstanceStatus = ['READY', 'STARTED', 'STOPPED', 'HALTED']\n\n  static styles = [\n    /* The frame owns the page shell; the two monitors are the content it sizes (ADR-0060 decision 8). */\n    WorkSurfacePageStyles,\n    ScrollbarStyles,\n    css`\n      /* The panels are bordered boxes, so they keep a gutter off the window edge. */\n      :host {\n        padding: var(--spacing-large);\n      }\n\n      integration-summary {\n        margin-bottom: var(--spacing-large);\n      }\n\n      content {\n        display: flex;\n        flex-direction: row;\n\n        overflow: hidden;\n      }\n\n      connections-monitor {\n        width: 180px;\n      }\n\n      scenarios-monitor {\n        flex: 1;\n        margin: 0 var(--spacing-large) 0 0;\n      }\n\n      @media screen and (max-width: 480px) {\n        :host {\n          padding: var(--spacing-medium);\n        }\n        integration-summary {\n          margin-bottom: var(--spacing-medium);\n        }\n        content {\n          display: block;\n          overflow: auto;\n        }\n        scenarios-monitor {\n          min-height: 350px;\n          margin: 0 0 var(--spacing-medium) 0;\n        }\n        connections-monitor {\n          width: initial;\n        }\n      }\n    `\n  ]\n\n  @property({ type: Array }) scenarios: any\n  @property({ type: Array }) pendings: any\n  @property({ type: Array }) connections: any\n  @property({ type: Object }) colorIndex: any\n\n  @state() loaded = false\n  @state() loadError: unknown = null\n\n  scenarioInstanceStateSubscription: any\n  scenarioQueueStateSubscription: any\n  connectionStateSubscription: any\n\n  get context() {\n    return {\n      title: i18next.t('text.integration monitor'),\n      help: 'integration/ui/integration-monitor'\n    }\n  }\n\n  render() {\n    /*\n     * Scenarios and connections are read before anything is drawn. Reading and failing both left the\n     * summary at zero and the panels empty, so a stopped server read as \"nothing is running\"\n     * (ADR-0060 decision 8).\n     */\n    return html`<ox-page-state .loading=${!this.loaded && !this.loadError} .error=${this.loadError} @retry=${this.load}>\n      ${this.renderMonitor()}\n    </ox-page-state>`\n  }\n\n  renderMonitor() {\n    return html`\n      <integration-summary\n        .pendings=${this.pendings}\n        .scenarios=${this.scenarios}\n        .connections=${this.connections}\n      ></integration-summary>\n      <content class=\"page-fill\">\n        <scenarios-monitor\n          .scenarios=${this.scenarios}\n          .pendings=${this.pendings}\n          .colorIndex=${this.colorIndex || {}}\n          .running=${!!this.active}\n        ></scenarios-monitor>\n        <connections-monitor .connections=${this.connections}></connections-monitor>\n      </content>\n    `\n  }\n\n  async pageUpdated(changes) {\n    if ('active' in changes) {\n      if (this.active) {\n        await this.load()\n      } else {\n        await this.stopSubscribe()\n      }\n    }\n  }\n\n  load = async () => {\n    this.loadError = null\n\n    try {\n      await this.fetchScenarios()\n      await this.fetchConnections()\n      await this.startSubscribe()\n      this.loaded = true\n    } catch (error) {\n      this.loadError = error\n    }\n  }\n\n  async fetchScenarios() {\n    const response = await client.query({\n      query: gql`\n        query ($inherited: InheritedValueType) {\n          responses: scenarios(inherited: $inherited) {\n            items {\n              id\n              name\n              description\n              active\n              state\n              schedule\n              timezone\n              instances {\n                instanceName\n                scenarioName\n                state\n                progress {\n                  rate\n                  steps\n                  step\n                  rounds\n                }\n                variables\n                data\n                message\n              }\n              updater {\n                id\n                name\n              }\n              updatedAt\n              domain {\n                id\n                name\n              }\n            }\n            total\n          }\n        }\n      `,\n      variables: {\n        inherited: InheritedValueType.Include\n      }\n    })\n\n    if (response.errors?.length) {\n      throw response.errors[0]\n    }\n\n    var colorIndex = {}\n    this.scenarios = (response.data.responses.items || []).map(scenario => {\n      var color = toColor(scenario.id)\n      colorIndex[scenario.id] = color\n\n      return {\n        ...scenario,\n        color\n      }\n    })\n    this.colorIndex = colorIndex\n  }\n\n  async fetchConnections() {\n    const response = await client.query({\n      query: gql`\n        query ($inherited: InheritedValueType) {\n          responses: connections(inherited: $inherited) {\n            items {\n              id\n              name\n              description\n              type\n              state\n              domain {\n                id\n                name\n              }\n            }\n            total\n          }\n        }\n      `,\n      variables: {\n        inherited: InheritedValueType.Include\n      }\n    })\n\n    if (response.errors?.length) {\n      throw response.errors[0]\n    }\n\n    this.connections = response.data.responses.items || []\n    // .map(connection => {\n    //   var color = toColor(scenario.id)\n    //   colorIndex[scenario.id] = color\n\n    //   return {\n    //     ...scenario,\n    //     color\n    //   }\n    // })\n    // this.colorIndex = colorIndex\n  }\n\n  async startSubscribe() {\n    if (this.scenarioInstanceStateSubscription) {\n      return\n    }\n\n    this.scenarioInstanceStateSubscription = await subscribe(\n      {\n        query: gql`\n          subscription {\n            scenarioInstanceState {\n              instanceName\n              scenarioName\n              state\n              progress {\n                rate\n                steps\n                step\n                rounds\n              }\n            }\n          }\n        `\n      },\n      {\n        next: async ({ data }) => {\n          if (data) {\n            var { scenarioName, instanceName, state } = data.scenarioInstanceState\n\n            this.scenarios = this.scenarios || []\n            var scenario = this.scenarios.find(scenario => scenario.name === scenarioName)\n\n            if (scenario) {\n              var idx = scenario.instances.findIndex(instance => instance.instanceName === instanceName)\n              if (idx == -1) {\n                if (IS_SCENARIO_RUNNING(state)) {\n                  scenario.instances.push(data.scenarioInstanceState)\n                }\n              } else {\n                if (!IS_SCENARIO_RUNNING(state)) {\n                  scenario.instances.splice(idx, 1)\n                } else {\n                  scenario.instances.splice(idx, 1, data.scenarioInstanceState)\n                }\n              }\n            } else {\n              this.scenarios = []\n\n              await this.stopSubscribe()\n              await this.fetchScenarios()\n              await this.startSubscribe()\n\n              return\n            }\n\n            /* change object intentionally to force to refresh scenario */\n            this.scenarios.splice(this.scenarios.indexOf(scenario), 1, { ...scenario })\n            this.scenarios = [...this.scenarios]\n          }\n        },\n        start: subscription => {\n          console.log(subscription)\n        },\n        error: error => {\n          console.log(error)\n        },\n        complete: () => {\n          console.log('complete')\n        }\n      }\n    )\n\n    this.scenarioQueueStateSubscription = await subscribe(\n      {\n        query: gql`\n          subscription {\n            scenarioQueueState {\n              queue {\n                stuff\n                due\n                priority\n                tag\n              }\n            }\n          }\n        `\n      },\n      {\n        next: ({ data }) => {\n          if (data) {\n            this.pendings = data.scenarioQueueState.queue\n          }\n        }\n      }\n    )\n\n    this.connectionStateSubscription = await subscribe(\n      {\n        query: gql`\n          subscription {\n            connectionState {\n              id\n              name\n              description\n              type\n              state\n              domain {\n                id\n                name\n              }\n            }\n          }\n        `\n      },\n      {\n        next: async ({ data }) => {\n          if (data) {\n            var state = data.connectionState\n\n            this.connections = this.connections || []\n            var idx = this.connections.findIndex(\n              connection => connection.id === state.id && connection.domain.id === state.domain.id\n            )\n\n            if (idx !== -1) {\n              this.connections[idx] = data.connectionState\n              this.connections = [...this.connections]\n            } else {\n              this.connections = [...this.connections, data.connectionState]\n            }\n          }\n        }\n      }\n    )\n  }\n\n  async stopSubscribe() {\n    await this.scenarioInstanceStateSubscription?.unsubscribe()\n    await this.scenarioQueueStateSubscription?.unsubscribe()\n    await this.connectionStateSubscription?.unsubscribe()\n\n    delete this.scenarioInstanceStateSubscription\n    delete this.scenarioQueueStateSubscription\n    delete this.connectionStateSubscription\n  }\n}\n"]}

package/dist-client/pages/scenario.js

@@ -13,7 +13,7 @@ import { i18next, localize } from '@operato/i18n';
 import { notify, openPopup } from '@operato/layout';
 import { OxPrompt } from '@operato/popup/ox-prompt.js';
 import { navigate, PageView } from '@operato/shell';
-import { CommonButtonStyles, CommonGristStyles, ScrollbarStyles } from '@operato/styles';
+import { CommonButtonStyles, CommonGristStyles, ScrollbarStyles, WorkSurfacePageStyles } from '@operato/styles';
 import { isMobileDevice } from '@operato/utils';
 import { p13n } from '@operato/p13n';
 function IS_SCENARIO_RUNNING(state) {
@@ -26,18 +26,11 @@ let Scenario = class Scenario extends p13n(localize(i18next)(PageView)) {
     }
     static get styles() {
         return [
+            /* The work surface frame for a list screen (ADR-0060 decision 8). */
+            WorkSurfacePageStyles,
             CommonGristStyles,
             ScrollbarStyles,
             css `
-        :host {           display: flex;
-          flex-direction: column;
-
-          overflow: hidden;
- }
-
-        ox-grist {           overflow-y: auto;
-          flex: 1;
- }
       `
         ];
     }
@@ -83,7 +76,7 @@ let Scenario = class Scenario extends p13n(localize(i18next)(PageView)) {
     }
     render() {
         return html `
-      <ox-grist
+      <ox-grist class="page-fill"
         .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
         .config=${this.gristConfig}
         .fetchHandler=${this.fetchHandler.bind(this)}