@things-factory/integration-ui 7.0.0-alpha.1 → 7.0.0-alpha.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -9,7 +9,7 @@ import { customElement, property, query } from 'lit/decorators.js'
9
9
 
10
10
  import { client, subscribe } from '@operato/graphql'
11
11
  import { i18next, localize } from '@operato/i18n'
12
- import { PageView } from '@operato/shell'
12
+ import { PageView, InheritedValueType } from '@operato/shell'
13
13
  import { ScrollbarStyles } from '@operato/styles'
14
14
 
15
15
  function IS_SCENARIO_RUNNING(state) {
@@ -108,18 +108,9 @@ export class IntegrationMonitor extends localize(i18next)(PageView) {
108
108
 
109
109
  render() {
110
110
  return html`
111
- <integration-summary
112
- .pendings=${this.pendings}
113
- .scenarios=${this.scenarios}
114
- .connections=${this.connections}
115
- ></integration-summary>
111
+ <integration-summary .pendings=${this.pendings} .scenarios=${this.scenarios} .connections=${this.connections}></integration-summary>
116
112
  <content>
117
- <scenarios-monitor
118
- .scenarios=${this.scenarios}
119
- .pendings=${this.pendings}
120
- .colorIndex=${this.colorIndex || {}}
121
- .running=${!!this.active}
122
- ></scenarios-monitor>
113
+ <scenarios-monitor .scenarios=${this.scenarios} .pendings=${this.pendings} .colorIndex=${this.colorIndex || {}} .running=${!!this.active}></scenarios-monitor>
123
114
  <connections-monitor .connections=${this.connections}></connections-monitor>
124
115
  </content>
125
116
  `
@@ -140,8 +131,8 @@ export class IntegrationMonitor extends localize(i18next)(PageView) {
140
131
  async fetchScenarios() {
141
132
  const response = await client.query({
142
133
  query: gql`
143
- query {
144
- responses: scenarios {
134
+ query ($inherited: InheritedValueType) {
135
+ responses: scenarios(inherited: $inherited) {
145
136
  items {
146
137
  id
147
138
  name
@@ -173,7 +164,10 @@ export class IntegrationMonitor extends localize(i18next)(PageView) {
173
164
  total
174
165
  }
175
166
  }
176
- `
167
+ `,
168
+ variables: {
169
+ inherited: InheritedValueType.Include
170
+ }
177
171
  })
178
172
 
179
173
  var colorIndex = {}
@@ -23,7 +23,6 @@ export class ScenarioMonitor extends localize(i18next)(LitElement) {
23
23
  :host {
24
24
  display: flex;
25
25
  flex-direction: row;
26
- margin: var(--margin-default);
27
26
 
28
27
  border: var(--border-dark-color);
29
28
  background-color: var(--theme-white-color);
@@ -34,11 +33,11 @@ export class ScenarioMonitor extends localize(i18next)(LitElement) {
34
33
  }
35
34
 
36
35
  [desc] {
36
+ flex: 1;
37
37
  position: relative;
38
38
  display: flex;
39
39
  flex-direction: column;
40
40
  padding: var(--padding-default);
41
- width: 200px;
42
41
  color: var(--secondary-color);
43
42
  font-size: var(--fontsize-small);
44
43
  }
@@ -114,9 +113,15 @@ export class ScenarioMonitor extends localize(i18next)(LitElement) {
114
113
  margin: var(--margin-default) 0 0 0;
115
114
  }
116
115
 
116
+ :host([mode='detail']) [desc] {
117
+ flex: unset;
118
+ width: 200px;
119
+ }
120
+
117
121
  :host([mode='detail']) [desc] [buttons] {
118
122
  display: none;
119
123
  }
124
+
120
125
  :host([mode='detail']) [buttons] {
121
126
  border-top: none;
122
127
  padding: var(--padding-default);
@@ -137,7 +142,6 @@ export class ScenarioMonitor extends localize(i18next)(LitElement) {
137
142
  position: relative;
138
143
  margin: var(--margin-default);
139
144
  min-width: 140px;
140
- max-width: 180px;
141
145
  border: 1px solid black;
142
146
  border-radius: var(--border-radius);
143
147
  font-size: 12px;
@@ -154,21 +158,12 @@ export class ScenarioMonitor extends localize(i18next)(LitElement) {
154
158
  @media screen and (max-width: 480px) {
155
159
  :host {
156
160
  margin: var(--margin-narrow);
157
- max-width: 46%;
158
- }
159
-
160
- :host([mode='detail']) {
161
- max-width: initial;
162
161
  }
163
162
 
164
163
  [desc] {
165
164
  padding: var(--padding-narrow);
166
165
  }
167
166
 
168
- :host([mode='detail']) > [desc] {
169
- max-width: 125px;
170
- }
171
-
172
167
  [desc] [detail-info] {
173
168
  height: 38px;
174
169
  }
@@ -230,17 +225,8 @@ export class ScenarioMonitor extends localize(i18next)(LitElement) {
230
225
  <div buttons ?detail=${this.mode == 'detail'}>
231
226
  <mwc-icon-button @click=${e => this.popupLogView(scenario)} icon="text_snippet"></mwc-icon-button>
232
227
  ${!scenarioInstance
233
- ? html` <mwc-icon-button
234
- icon="play_circle_outline"
235
- @click=${e => this.startScenario(scenario)}
236
- ></mwc-icon-button>`
237
- : html`
238
- <mwc-icon-button
239
- icon="pause_circle_outline"
240
- @click=${e => this.stopScenario(scenario)}
241
- stop
242
- ></mwc-icon-button>
243
- `}
228
+ ? html` <mwc-icon-button icon="play_circle_outline" @click=${e => this.startScenario(scenario)}></mwc-icon-button>`
229
+ : html` <mwc-icon-button icon="pause_circle_outline" @click=${e => this.stopScenario(scenario)} stop></mwc-icon-button> `}
244
230
  </div>
245
231
  `
246
232
  }
@@ -268,9 +254,7 @@ export class ScenarioMonitor extends localize(i18next)(LitElement) {
268
254
 
269
255
  notify({
270
256
  level: 'info',
271
- message: `${!IS_SCENARIO_RUNNING(response.data.startScenario.state) ? 'fail' : 'success'} to start instance : ${
272
- scenario.name
273
- }`
257
+ message: `${!IS_SCENARIO_RUNNING(response.data.startScenario.state) ? 'fail' : 'success'} to start instance : ${scenario.name}`
274
258
  })
275
259
  }
276
260
 
@@ -290,9 +274,7 @@ export class ScenarioMonitor extends localize(i18next)(LitElement) {
290
274
 
291
275
  notify({
292
276
  level: 'info',
293
- message: `${IS_SCENARIO_RUNNING(response.data.stopScenario.state) ? 'fail' : 'success'} to stop instance : ${
294
- scenario.name
295
- }`
277
+ message: `${IS_SCENARIO_RUNNING(response.data.stopScenario.state) ? 'fail' : 'success'} to stop instance : ${scenario.name}`
296
278
  })
297
279
  }
298
280
  }
@@ -8,10 +8,6 @@ import { customElement, property, query } from 'lit/decorators.js'
8
8
  import { i18next, localize } from '@operato/i18n'
9
9
  import { ScrollbarStyles } from '@operato/styles'
10
10
 
11
- function IS_SCENARIO_RUNNING(state) {
12
- return state && state !== 'UNLOADED'
13
- }
14
-
15
11
  @customElement('scenarios-monitor')
16
12
  export class ScenariosMonitor extends localize(i18next)(LitElement) {
17
13
  static styles = [
@@ -84,12 +80,17 @@ export class ScenariosMonitor extends localize(i18next)(LitElement) {
84
80
  [scenarios] [flowbox] {
85
81
  display: flex;
86
82
  flex-direction: column;
87
- min-height: min-content;
83
+ padding: 10px;
84
+ gap: 12px;
88
85
  }
89
86
 
90
87
  [scenarios][mode='brief'] [flowbox] {
91
- flex-flow: row wrap;
92
- align-self: start;
88
+ overflow: auto;
89
+ display: grid;
90
+
91
+ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
92
+ grid-auto-rows: max-content;
93
+ grid-gap: 12px;
93
94
  }
94
95
 
95
96
  scenario-monitor {
@@ -128,16 +129,12 @@ export class ScenariosMonitor extends localize(i18next)(LitElement) {
128
129
  </div>
129
130
 
130
131
  <div content>
131
- <pending-q-monitor
132
- .pendings=${this.pendings}
133
- .colorIndex=${this.colorIndex || {}}
134
- .running=${this.running}
135
- ></pending-q-monitor>
132
+ <pending-q-monitor .pendings=${this.pendings} .colorIndex=${this.colorIndex || {}} .running=${this.running}></pending-q-monitor>
136
133
 
137
134
  <div scenarios mode=${mode}>
138
135
  <div flowbox>
139
136
  ${scenarios
140
- .filter(scenario => scenario.name.indexOf(filter) == 0)
137
+ .filter(scenario => new RegExp(filter, 'i').test(scenario.name))
141
138
  .map(scenario => html`<scenario-monitor .scenario=${scenario} mode=${mode}></scenario-monitor>`)}
142
139
  </div>
143
140
  </div>
@@ -8,7 +8,7 @@ import { css, html } from 'lit';
8
8
  import { customElement, property } from 'lit/decorators.js';
9
9
  import { client, subscribe } from '@operato/graphql';
10
10
  import { i18next, localize } from '@operato/i18n';
11
- import { PageView } from '@operato/shell';
11
+ import { PageView, InheritedValueType } from '@operato/shell';
12
12
  import { ScrollbarStyles } from '@operato/styles';
13
13
  function IS_SCENARIO_RUNNING(state) {
14
14
  return state && state !== 'UNLOADED';
@@ -37,18 +37,9 @@ let IntegrationMonitor = class IntegrationMonitor extends localize(i18next)(Page
37
37
  }
38
38
  render() {
39
39
  return html `
40
- <integration-summary
41
- .pendings=${this.pendings}
42
- .scenarios=${this.scenarios}
43
- .connections=${this.connections}
44
- ></integration-summary>
40
+ <integration-summary .pendings=${this.pendings} .scenarios=${this.scenarios} .connections=${this.connections}></integration-summary>
45
41
  <content>
46
- <scenarios-monitor
47
- .scenarios=${this.scenarios}
48
- .pendings=${this.pendings}
49
- .colorIndex=${this.colorIndex || {}}
50
- .running=${!!this.active}
51
- ></scenarios-monitor>
42
+ <scenarios-monitor .scenarios=${this.scenarios} .pendings=${this.pendings} .colorIndex=${this.colorIndex || {}} .running=${!!this.active}></scenarios-monitor>
52
43
  <connections-monitor .connections=${this.connections}></connections-monitor>
53
44
  </content>
54
45
  `;
@@ -68,8 +59,8 @@ let IntegrationMonitor = class IntegrationMonitor extends localize(i18next)(Page
68
59
  async fetchScenarios() {
69
60
  const response = await client.query({
70
61
  query: gql `
71
- query {
72
- responses: scenarios {
62
+ query ($inherited: InheritedValueType) {
63
+ responses: scenarios(inherited: $inherited) {
73
64
  items {
74
65
  id
75
66
  name
@@ -101,7 +92,10 @@ let IntegrationMonitor = class IntegrationMonitor extends localize(i18next)(Page
101
92
  total
102
93
  }
103
94
  }
104
- `
95
+ `,
96
+ variables: {
97
+ inherited: InheritedValueType.Include
98
+ }
105
99
  });
106
100
  var colorIndex = {};
107
101
  this.scenarios = (response.data.responses.items || []).map(scenario => {
@@ -1 +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'\nimport '../viewparts/pending-q-monitor'\nimport '../viewparts/scenarios-monitor'\nimport '../viewparts/connections-monitor'\n\nimport gql from 'graphql-tag'\nimport { css, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { client, subscribe } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { PageView } 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(--main-section-background-color);\n padding: var(--padding-wide);\n }\n\n integration-summary {\n margin-bottom: var(--margin-wide);\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(--margin-wide) 0 0;\n }\n\n @media screen and (max-width: 480px) {\n :host {\n padding: var(--padding-default);\n }\n integration-summary {\n margin-bottom: var(--margin-default);\n }\n content {\n display: block;\n overflow: auto;\n }\n scenarios-monitor {\n min-height: 350px;\n margin: 0 0 var(--margin-default) 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 {\n responses: scenarios {\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 }\n total\n }\n }\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 {\n responses: connections {\n items {\n id\n name\n description\n type\n state\n }\n total\n }\n }\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 }\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(connection => connection.id === state.id)\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"]}
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'\nimport '../viewparts/pending-q-monitor'\nimport '../viewparts/scenarios-monitor'\nimport '../viewparts/connections-monitor'\n\nimport gql from 'graphql-tag'\nimport { css, html } from 'lit'\nimport { customElement, property, query } 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(--main-section-background-color);\n padding: var(--padding-wide);\n }\n\n integration-summary {\n margin-bottom: var(--margin-wide);\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(--margin-wide) 0 0;\n }\n\n @media screen and (max-width: 480px) {\n :host {\n padding: var(--padding-default);\n }\n integration-summary {\n margin-bottom: var(--margin-default);\n }\n content {\n display: block;\n overflow: auto;\n }\n scenarios-monitor {\n min-height: 350px;\n margin: 0 0 var(--margin-default) 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 .pendings=${this.pendings} .scenarios=${this.scenarios} .connections=${this.connections}></integration-summary>\n <content>\n <scenarios-monitor .scenarios=${this.scenarios} .pendings=${this.pendings} .colorIndex=${this.colorIndex || {}} .running=${!!this.active}></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 }\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 {\n responses: connections {\n items {\n id\n name\n description\n type\n state\n }\n total\n }\n }\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 }\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(connection => connection.id === state.id)\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"]}