@things-factory/integration-ui 7.0.1-rc.9 → 7.0.2

Sign up to get free protection for your applications and to get access to all the features.
Files changed (42) hide show
  1. package/client/analysis/graph-viewer.ts +1 -1
  2. package/client/editors/things-editor-oracle-procedure.ts +4 -4
  3. package/client/pages/connection.ts +1 -1
  4. package/client/pages/integration-monitor.ts +6 -6
  5. package/client/pages/scenario.ts +1 -1
  6. package/client/viewparts/connections-monitor.ts +6 -6
  7. package/client/viewparts/monitoring-summary.ts +5 -5
  8. package/client/viewparts/pending-q-monitor.ts +4 -4
  9. package/client/viewparts/scenario-instance-log-view.ts +1 -1
  10. package/client/viewparts/scenario-instance-monitor.ts +3 -3
  11. package/client/viewparts/scenario-instance-view.ts +5 -5
  12. package/client/viewparts/scenario-monitor.ts +10 -10
  13. package/client/viewparts/scenarios-monitor.ts +4 -4
  14. package/dist-client/analysis/graph-viewer.js +1 -1
  15. package/dist-client/analysis/graph-viewer.js.map +1 -1
  16. package/dist-client/editors/things-editor-oracle-procedure.js +4 -4
  17. package/dist-client/editors/things-editor-oracle-procedure.js.map +1 -1
  18. package/dist-client/pages/connection.js +1 -1
  19. package/dist-client/pages/connection.js.map +1 -1
  20. package/dist-client/pages/integration-monitor.js +6 -6
  21. package/dist-client/pages/integration-monitor.js.map +1 -1
  22. package/dist-client/pages/scenario.js +1 -1
  23. package/dist-client/pages/scenario.js.map +1 -1
  24. package/dist-client/tsconfig.tsbuildinfo +1 -1
  25. package/dist-client/viewparts/connections-monitor.js +6 -6
  26. package/dist-client/viewparts/connections-monitor.js.map +1 -1
  27. package/dist-client/viewparts/monitoring-summary.js +5 -5
  28. package/dist-client/viewparts/monitoring-summary.js.map +1 -1
  29. package/dist-client/viewparts/pending-q-monitor.js +4 -4
  30. package/dist-client/viewparts/pending-q-monitor.js.map +1 -1
  31. package/dist-client/viewparts/scenario-instance-log-view.js +1 -1
  32. package/dist-client/viewparts/scenario-instance-log-view.js.map +1 -1
  33. package/dist-client/viewparts/scenario-instance-monitor.js +3 -3
  34. package/dist-client/viewparts/scenario-instance-monitor.js.map +1 -1
  35. package/dist-client/viewparts/scenario-instance-view.js +5 -5
  36. package/dist-client/viewparts/scenario-instance-view.js.map +1 -1
  37. package/dist-client/viewparts/scenario-monitor.js +10 -10
  38. package/dist-client/viewparts/scenario-monitor.js.map +1 -1
  39. package/dist-client/viewparts/scenarios-monitor.js +4 -4
  40. package/dist-client/viewparts/scenarios-monitor.js.map +1 -1
  41. package/dist-server/tsconfig.tsbuildinfo +1 -1
  42. package/package.json +16 -16
@@ -93,7 +93,7 @@ ConnectionsMonitor.styles = [
93
93
  }
94
94
  h2 {
95
95
  margin: 0;
96
- padding: var(--padding-default) 0 var(--padding-default) var(--padding-default);
96
+ padding: var(--spacing-medium) 0 var(--spacing-medium) var(--spacing-medium);
97
97
  border-bottom: var(--border-dim-color);
98
98
  font: var(--subtitle-font);
99
99
  color: var(--md-sys-color-secondary);
@@ -111,7 +111,7 @@ ConnectionsMonitor.styles = [
111
111
  [card] {
112
112
  display: flex;
113
113
  flex-direction: column;
114
- padding: var(--padding-default);
114
+ padding: var(--spacing-medium);
115
115
  border-bottom: var(--border-dim-color);
116
116
  color: var(--md-sys-color-secondary);
117
117
  }
@@ -135,14 +135,14 @@ ConnectionsMonitor.styles = [
135
135
  height: 10px;
136
136
  border-radius: 50%;
137
137
  background-color: var(--md-sys-color-primary);
138
- margin-left: var(--margin-narrow);
138
+ margin-left: var(--spacing-small);
139
139
  }
140
140
 
141
141
  [buttons] {
142
142
  --md-icon-size: 20px;
143
143
  border-top: 1px dashed rgba(0, 0, 0, 0.1);
144
- margin: var(--margin-narrow) 0 0 0;
145
- padding: var(--padding-narrow) 0 0 0;
144
+ margin: var(--spacing-small) 0 0 0;
145
+ padding: var(--spacing-small) 0 0 0;
146
146
  text-align: right;
147
147
  }
148
148
 
@@ -152,7 +152,7 @@ ConnectionsMonitor.styles = [
152
152
 
153
153
  @media screen and (max-width: 480px) {
154
154
  h2 {
155
- padding: var(--padding-narrow);
155
+ padding: var(--spacing-small);
156
156
  }
157
157
 
158
158
  [card] span {
@@ -1 +1 @@
1
- {"version":3,"file":"connections-monitor.js","sourceRoot":"","sources":["../../client/viewparts/connections-monitor.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { client } from '@operato/graphql'\nimport { ScrollbarStyles } from '@operato/styles'\n\n@customElement('connections-monitor')\nexport class ConnectionsMonitor extends LitElement {\n static styles = [\n ScrollbarStyles,\n css`\n :host {\n display: flex;\n flex-direction: column;\n\n overflow: hidden;\n background-color: var(--md-sys-color-surface);\n border-radius: var(--border-radius);\n border: var(--border-dim-color);\n }\n h2 {\n margin: 0;\n padding: var(--padding-default) 0 var(--padding-default) var(--padding-default);\n border-bottom: var(--border-dim-color);\n font: var(--subtitle-font);\n color: var(--md-sys-color-secondary);\n text-transform: capitalize;\n }\n\n [cards] {\n flex: 1;\n display: flex;\n flex-direction: column;\n\n overflow: auto;\n }\n\n [card] {\n display: flex;\n flex-direction: column;\n padding: var(--padding-default);\n border-bottom: var(--border-dim-color);\n color: var(--md-sys-color-secondary);\n }\n [card] * {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n [card] strong {\n color: var(--md-sys-color-primary);\n }\n [card] span {\n font-size: var(--fontsize-default);\n line-height: var(--fontsize-large);\n }\n\n [connected] strong::after {\n content: '';\n display: inline-block;\n width: 10px;\n height: 10px;\n border-radius: 50%;\n background-color: var(--md-sys-color-primary);\n margin-left: var(--margin-narrow);\n }\n\n [buttons] {\n --md-icon-size: 20px;\n border-top: 1px dashed rgba(0, 0, 0, 0.1);\n margin: var(--margin-narrow) 0 0 0;\n padding: var(--padding-narrow) 0 0 0;\n text-align: right;\n }\n\n [buttons] md-icon {\n color: var(--md-sys-color-secondary);\n }\n\n @media screen and (max-width: 480px) {\n h2 {\n padding: var(--padding-narrow);\n }\n\n [card] span {\n display: none;\n }\n }\n `\n ]\n\n @property({ type: Array }) connections: any\n\n render() {\n var connections = this.connections || []\n\n return html`\n <div info>\n <h2>connections</h2>\n </div>\n\n <div cards>${connections.map(connection => this.renderConnection(connection))}</div>\n `\n }\n\n renderConnection(connection) {\n const { id, name, description, type, state } = connection\n const connected = state == 'CONNECTED'\n\n return html`\n <div card ?connected=${connected}>\n <strong>${name}</strong>\n <span>${description}</span>\n <span>Type : ${type}</span>\n <div buttons>\n <md-icon\n @click=${e => (connected ? this.disconnect(connection) : this.connect(connection))}\n title=${connected ? 'disconnect' : 'connect'}\n >${connected ? 'link_off' : 'link'}</md-icon\n >\n </div>\n </div>\n `\n }\n\n async connect(connection) {\n var response = await client.mutate({\n mutation: gql`\n mutation ($name: String!) {\n connectConnection(name: $name) {\n state\n }\n }\n `,\n variables: {\n name: connection.name\n }\n })\n\n connection.state = response.data.connectConnection.state\n\n this.requestUpdate()\n\n document.dispatchEvent(\n new CustomEvent('notify', {\n detail: {\n level: 'info',\n message: `${connection.state == 'CONNECTED' ? 'success' : 'fail'} to connect : ${connection.name}`\n }\n })\n )\n }\n\n async disconnect(connection) {\n var response = await client.mutate({\n mutation: gql`\n mutation ($name: String!) {\n disconnectConnection(name: $name) {\n state\n }\n }\n `,\n variables: {\n name: connection.name\n }\n })\n\n connection.state = response.data.disconnectConnection.state\n\n this.requestUpdate()\n\n document.dispatchEvent(\n new CustomEvent('notify', {\n detail: {\n level: 'info',\n message: `${connection.state == 'CONNECTED' ? 'fail' : 'success'} to disconnect : ${connection.name}`\n }\n })\n )\n }\n}\n"]}
1
+ {"version":3,"file":"connections-monitor.js","sourceRoot":"","sources":["../../client/viewparts/connections-monitor.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { client } from '@operato/graphql'\nimport { ScrollbarStyles } from '@operato/styles'\n\n@customElement('connections-monitor')\nexport class ConnectionsMonitor extends LitElement {\n static styles = [\n ScrollbarStyles,\n css`\n :host {\n display: flex;\n flex-direction: column;\n\n overflow: hidden;\n background-color: var(--md-sys-color-surface);\n border-radius: var(--border-radius);\n border: var(--border-dim-color);\n }\n h2 {\n margin: 0;\n padding: var(--spacing-medium) 0 var(--spacing-medium) var(--spacing-medium);\n border-bottom: var(--border-dim-color);\n font: var(--subtitle-font);\n color: var(--md-sys-color-secondary);\n text-transform: capitalize;\n }\n\n [cards] {\n flex: 1;\n display: flex;\n flex-direction: column;\n\n overflow: auto;\n }\n\n [card] {\n display: flex;\n flex-direction: column;\n padding: var(--spacing-medium);\n border-bottom: var(--border-dim-color);\n color: var(--md-sys-color-secondary);\n }\n [card] * {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n [card] strong {\n color: var(--md-sys-color-primary);\n }\n [card] span {\n font-size: var(--fontsize-default);\n line-height: var(--fontsize-large);\n }\n\n [connected] strong::after {\n content: '';\n display: inline-block;\n width: 10px;\n height: 10px;\n border-radius: 50%;\n background-color: var(--md-sys-color-primary);\n margin-left: var(--spacing-small);\n }\n\n [buttons] {\n --md-icon-size: 20px;\n border-top: 1px dashed rgba(0, 0, 0, 0.1);\n margin: var(--spacing-small) 0 0 0;\n padding: var(--spacing-small) 0 0 0;\n text-align: right;\n }\n\n [buttons] md-icon {\n color: var(--md-sys-color-secondary);\n }\n\n @media screen and (max-width: 480px) {\n h2 {\n padding: var(--spacing-small);\n }\n\n [card] span {\n display: none;\n }\n }\n `\n ]\n\n @property({ type: Array }) connections: any\n\n render() {\n var connections = this.connections || []\n\n return html`\n <div info>\n <h2>connections</h2>\n </div>\n\n <div cards>${connections.map(connection => this.renderConnection(connection))}</div>\n `\n }\n\n renderConnection(connection) {\n const { id, name, description, type, state } = connection\n const connected = state == 'CONNECTED'\n\n return html`\n <div card ?connected=${connected}>\n <strong>${name}</strong>\n <span>${description}</span>\n <span>Type : ${type}</span>\n <div buttons>\n <md-icon\n @click=${e => (connected ? this.disconnect(connection) : this.connect(connection))}\n title=${connected ? 'disconnect' : 'connect'}\n >${connected ? 'link_off' : 'link'}</md-icon\n >\n </div>\n </div>\n `\n }\n\n async connect(connection) {\n var response = await client.mutate({\n mutation: gql`\n mutation ($name: String!) {\n connectConnection(name: $name) {\n state\n }\n }\n `,\n variables: {\n name: connection.name\n }\n })\n\n connection.state = response.data.connectConnection.state\n\n this.requestUpdate()\n\n document.dispatchEvent(\n new CustomEvent('notify', {\n detail: {\n level: 'info',\n message: `${connection.state == 'CONNECTED' ? 'success' : 'fail'} to connect : ${connection.name}`\n }\n })\n )\n }\n\n async disconnect(connection) {\n var response = await client.mutate({\n mutation: gql`\n mutation ($name: String!) {\n disconnectConnection(name: $name) {\n state\n }\n }\n `,\n variables: {\n name: connection.name\n }\n })\n\n connection.state = response.data.disconnectConnection.state\n\n this.requestUpdate()\n\n document.dispatchEvent(\n new CustomEvent('notify', {\n detail: {\n level: 'info',\n message: `${connection.state == 'CONNECTED' ? 'fail' : 'success'} to disconnect : ${connection.name}`\n }\n })\n )\n }\n}\n"]}
@@ -72,8 +72,8 @@ IntegrationMonitoringSummary.styles = [
72
72
 
73
73
  [card] {
74
74
  flex: 1;
75
- margin: var(--margin-default);
76
- padding: var(--padding-narrow) var(--padding-default);
75
+ margin: var(--spacing-medium);
76
+ padding: var(--spacing-small) var(--spacing-medium);
77
77
  border-right: var(--border-light-color);
78
78
  }
79
79
  :host :last-child {
@@ -86,7 +86,7 @@ IntegrationMonitoringSummary.styles = [
86
86
  }
87
87
  span {
88
88
  display: block;
89
- margin-bottom: var(--margin-narrow);
89
+ margin-bottom: var(--spacing-small);
90
90
  font-size: var(--fontsize-small);
91
91
  text-transform: capitalize;
92
92
  opacity: 0.6;
@@ -101,8 +101,8 @@ IntegrationMonitoringSummary.styles = [
101
101
  font-size: 0.8em;
102
102
  }
103
103
  [card] {
104
- margin: var(--margin-narrow);
105
- padding: var(--padding-narrow);
104
+ margin: var(--spacing-small);
105
+ padding: var(--spacing-small);
106
106
  }
107
107
  [card]:nth-child(5),
108
108
  [card]:nth-child(6) {
@@ -1 +1 @@
1
- {"version":3,"file":"monitoring-summary.js","sourceRoot":"","sources":["../../client/viewparts/monitoring-summary.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@operato/data-grist'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { ScrollbarStyles } from '@operato/styles'\n\n@customElement('integration-summary')\nexport class IntegrationMonitoringSummary extends localize(i18next)(LitElement) {\n static styles = [\n ScrollbarStyles,\n css`\n :host {\n display: flex;\n flex-direction: row;\n\n overflow: hidden;\n background-color: var(--md-sys-color-secondary);\n border-radius: var(--border-radius);\n color: var(--md-sys-color-on-secondary);\n }\n\n [card] {\n flex: 1;\n margin: var(--margin-default);\n padding: var(--padding-narrow) var(--padding-default);\n border-right: var(--border-light-color);\n }\n :host :last-child {\n border-right: none;\n }\n strong {\n font-size: 36px;\n line-height: 30px;\n color: var(--md-sys-color-on-primary);\n }\n span {\n display: block;\n margin-bottom: var(--margin-narrow);\n font-size: var(--fontsize-small);\n text-transform: capitalize;\n opacity: 0.6;\n }\n\n md-icon {\n opacity: 0.6;\n }\n\n @media screen and (max-width: 480px) {\n :host {\n font-size: 0.8em;\n }\n [card] {\n margin: var(--margin-narrow);\n padding: var(--padding-narrow);\n }\n [card]:nth-child(5),\n [card]:nth-child(6) {\n display: none;\n }\n [card]:nth-child(4) {\n border-right: none;\n }\n md-icon {\n --md-icon-size: var(--fontsize-large);\n }\n span {\n line-height: 1;\n }\n strong {\n font-size: 24px;\n }\n }\n `\n ]\n\n @property({ type: Array }) pendings: any\n @property({ type: Array }) scenarios: any\n @property({ type: Array }) connections: any\n\n render() {\n const now = Date.now()\n const pendings = this.pendings || []\n const scenarios = this.scenarios || []\n const connections = this.connections || []\n\n const cards = [\n {\n title: 'pending instances',\n icon: 'update',\n value: pendings.length\n },\n {\n title: 'due out instances',\n icon: 'update_disabled',\n value: Math.max(\n 0,\n pendings.concat({ due: now + 1 }).findIndex(pending => Number(pending.due) > now)\n )\n },\n {\n title: 'total scenarios',\n icon: 'format_list_numbered',\n value: scenarios.length\n },\n {\n title: 'scenario instances',\n icon: 'list_alt',\n value: scenarios.reduce((total, scenario) => {\n return total + scenario.instances.length\n }, 0)\n },\n {\n title: 'connections',\n icon: 'device_hub',\n value: connections.length\n },\n {\n title: 'active connections',\n icon: 'fact_check',\n value: connections.filter(connection => connection.state == 'CONNECTED').length\n }\n ]\n\n return cards.map(({ title, icon, value }) => this.renderCard(title, icon, value))\n }\n\n renderCard(title, icon, value) {\n return html`\n <div card>\n <span>${title}</span>\n <md-icon>${icon}</md-icon>\n <strong> ${value}</strong>\n </div>\n `\n }\n}\n"]}
1
+ {"version":3,"file":"monitoring-summary.js","sourceRoot":"","sources":["../../client/viewparts/monitoring-summary.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@operato/data-grist'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { ScrollbarStyles } from '@operato/styles'\n\n@customElement('integration-summary')\nexport class IntegrationMonitoringSummary extends localize(i18next)(LitElement) {\n static styles = [\n ScrollbarStyles,\n css`\n :host {\n display: flex;\n flex-direction: row;\n\n overflow: hidden;\n background-color: var(--md-sys-color-secondary);\n border-radius: var(--border-radius);\n color: var(--md-sys-color-on-secondary);\n }\n\n [card] {\n flex: 1;\n margin: var(--spacing-medium);\n padding: var(--spacing-small) var(--spacing-medium);\n border-right: var(--border-light-color);\n }\n :host :last-child {\n border-right: none;\n }\n strong {\n font-size: 36px;\n line-height: 30px;\n color: var(--md-sys-color-on-primary);\n }\n span {\n display: block;\n margin-bottom: var(--spacing-small);\n font-size: var(--fontsize-small);\n text-transform: capitalize;\n opacity: 0.6;\n }\n\n md-icon {\n opacity: 0.6;\n }\n\n @media screen and (max-width: 480px) {\n :host {\n font-size: 0.8em;\n }\n [card] {\n margin: var(--spacing-small);\n padding: var(--spacing-small);\n }\n [card]:nth-child(5),\n [card]:nth-child(6) {\n display: none;\n }\n [card]:nth-child(4) {\n border-right: none;\n }\n md-icon {\n --md-icon-size: var(--fontsize-large);\n }\n span {\n line-height: 1;\n }\n strong {\n font-size: 24px;\n }\n }\n `\n ]\n\n @property({ type: Array }) pendings: any\n @property({ type: Array }) scenarios: any\n @property({ type: Array }) connections: any\n\n render() {\n const now = Date.now()\n const pendings = this.pendings || []\n const scenarios = this.scenarios || []\n const connections = this.connections || []\n\n const cards = [\n {\n title: 'pending instances',\n icon: 'update',\n value: pendings.length\n },\n {\n title: 'due out instances',\n icon: 'update_disabled',\n value: Math.max(\n 0,\n pendings.concat({ due: now + 1 }).findIndex(pending => Number(pending.due) > now)\n )\n },\n {\n title: 'total scenarios',\n icon: 'format_list_numbered',\n value: scenarios.length\n },\n {\n title: 'scenario instances',\n icon: 'list_alt',\n value: scenarios.reduce((total, scenario) => {\n return total + scenario.instances.length\n }, 0)\n },\n {\n title: 'connections',\n icon: 'device_hub',\n value: connections.length\n },\n {\n title: 'active connections',\n icon: 'fact_check',\n value: connections.filter(connection => connection.state == 'CONNECTED').length\n }\n ]\n\n return cards.map(({ title, icon, value }) => this.renderCard(title, icon, value))\n }\n\n renderCard(title, icon, value) {\n return html`\n <div card>\n <span>${title}</span>\n <md-icon>${icon}</md-icon>\n <strong> ${value}</strong>\n </div>\n `\n }\n}\n"]}
@@ -123,7 +123,7 @@ PendingQMonitor.styles = [
123
123
  flex-direction: column;
124
124
  background-color: var(--md-sys-color-surface);
125
125
  border-radius: var(--border-radius);
126
- padding: var(--padding-narrow);
126
+ padding: var(--spacing-small);
127
127
  }
128
128
 
129
129
  div[tags] {
@@ -132,7 +132,7 @@ PendingQMonitor.styles = [
132
132
  }
133
133
  [tags] md-icon {
134
134
  --md-icon-size: var(--fontsize-large);
135
- margin: 0 var(--margin-narrow) 0 0;
135
+ margin: 0 var(--spacing-small) 0 0;
136
136
  }
137
137
 
138
138
  select {
@@ -156,7 +156,7 @@ PendingQMonitor.styles = [
156
156
 
157
157
  [pending-wrap] {
158
158
  flex: 1;
159
- margin-top: var(--margin-default);
159
+ margin-top: var(--spacing-medium);
160
160
  padding-left: 30px;
161
161
  padding-right: 4px;
162
162
  font-size: 8px;
@@ -185,7 +185,7 @@ PendingQMonitor.styles = [
185
185
  }
186
186
  [timeline] table {
187
187
  border-collapse: collapse;
188
- margin-top: var(--margin-default);
188
+ margin-top: var(--spacing-medium);
189
189
  width: 100%;
190
190
  }
191
191
  [timeline] th {
@@ -1 +1 @@
1
- {"version":3,"file":"pending-q-monitor.js","sourceRoot":"","sources":["../../client/viewparts/pending-q-monitor.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { asyncReplace } from 'lit/directives/async-replace.js'\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js'\n\nimport { ScrollbarStyles } from '@operato/styles'\nimport { sleep } from '@operato/utils'\n\n@customElement('pending-q-monitor')\nexport class PendingQMonitor extends LitElement {\n static styles = [\n ScrollbarStyles,\n css`\n :host {\n display: flex;\n flex-direction: column;\n background-color: var(--md-sys-color-surface);\n border-radius: var(--border-radius);\n padding: var(--padding-narrow);\n }\n\n div[tags] {\n display: flex;\n align-items: center;\n }\n [tags] md-icon {\n --md-icon-size: var(--fontsize-large);\n margin: 0 var(--margin-narrow) 0 0;\n }\n\n select {\n flex: 1;\n display: inline-block;\n border: none;\n border-radius: var(--border-radius);\n }\n\n select:focus {\n outline: 0;\n }\n\n [pendings] {\n display: flex;\n\n flex: 1;\n position: relative;\n overflow: auto;\n }\n\n [pending-wrap] {\n flex: 1;\n margin-top: var(--margin-default);\n padding-left: 30px;\n padding-right: 4px;\n font-size: 8px;\n line-height: 16px;\n\n display: flex;\n }\n\n [pendings-by-tag] {\n flex: 1;\n position: relative;\n margin: 0 1px;\n }\n\n [pending] {\n display: block;\n height: 2px;\n width: 100%;\n white-space: nowrap;\n position: absolute;\n }\n\n [timeline] {\n position: absolute;\n width: 100%;\n }\n [timeline] table {\n border-collapse: collapse;\n margin-top: var(--margin-default);\n width: 100%;\n }\n [timeline] th {\n opacity: 0.5;\n width: 25px;\n border: 0;\n font-weight: normal;\n font-size: 9px;\n }\n [timeline] th span {\n display: block;\n position: absolute;\n margin-top: -22px;\n }\n [timeline] td {\n border: 0;\n border-top: var(--border-dim-color);\n height: 30px;\n box-sizing: border-box;\n }\n [timeline] tr:nth-child(3n + 1) td {\n border: 0;\n border-top: 1px solid rgba(0, 0, 0, 0.4);\n box-sizing: border-box;\n }\n `\n ]\n\n @property({ type: Array }) pendings: any\n @property({ type: Array }) filteredPendings: any\n @property({ type: Object }) colorIndex: any\n @property({ type: Boolean }) running?: boolean\n @property({ type: Object }) tags: any\n @property({ type: String }) tag?: string\n @property({ type: Array }) scales: any\n\n filterPendings: any\n\n render() {\n const tag = this.tag === undefined ? '(*)' : this.tag\n const scales = this.scales || []\n\n return html`\n <div tags>\n <md-icon>bookmark_border</md-icon>\n <select @change=${e => (this.tag = e.target.value)} .value=${tag}>\n <option value=\"(*)\">*</option>\n ${Object.keys(this.tags || {})\n .sort()\n .map(tag => html`<option value=${tag}>${tag}</option>`)}\n </select>\n </div>\n\n <div pendings>\n <div timeline>\n <table>\n ${unsafeHTML(\n scales.map(\n time => `\n <tr>\n <th><span>${time}</span></th>\n <td></td>\n </tr>\n `\n ).join(`\n <tr>\n <th></th>\n <td></td>\n </tr>\n <tr>\n <th></th>\n <td></td>\n </tr>\n `)\n )}\n </table>\n </div>\n\n <div pending-wrap>${asyncReplace(this.queue())}</div>\n </div>\n `\n }\n\n async *queue() {\n while (this.running) {\n var now = Date.now()\n var pendingsByTags = Object.values(this.filterPendings || {})\n\n yield pendingsByTags.map(\n pendings => html`\n <div pendings-by-tag>\n ${(pendings as any).map((pending, index) => {\n var due = Number(pending.due)\n var top = Math.max(Math.floor((due - now) / 1000) * 3, 0) /* 3px per second */\n\n return html`\n <div pending .style=\"top:${top}px;background-color:${this.colorIndex[pending.stuff.scenario]};\">\n ${index == 0 ? html` <div>${this.countdown(pending.due, now)}</div> ` : html``}\n </div>\n `\n })}\n </div>\n `\n )\n\n await sleep(1000)\n }\n }\n\n countdown(due, now) {\n const MIN = 60\n\n var remain = (Number(due) - now) / 1000\n var normailzed = Math.floor(Math.abs(remain))\n const mins = Math.floor(normailzed / MIN)\n const secs = normailzed - mins * MIN\n\n return `${remain > 0 ? '' : '-'}${mins ? mins + 'm ' : ''}${secs}s`\n }\n\n buildFilterPendings() {\n var filtered\n if (this.tag === undefined || this.tag == '(*)') {\n filtered = this.pendings || []\n } else {\n filtered = (this.pendings || []).filter(pending => pending.tag == this.tag)\n }\n\n const now = Date.now()\n const lastdue = filtered[filtered.length - 1]?.due || now\n const length = Math.max(5, Math.ceil((lastdue - now) / (1000 * 30 * 2) + 1))\n this.scales = new Array(length)\n .fill(0)\n .map((_, index) => [`${String(index).padStart(2, '0')}:00`, `${String(index).padStart(2, '0')}:30`])\n .flat()\n\n this.filterPendings = filtered.reduce((sum, pending) => {\n if (sum[pending.tag]) {\n sum[pending.tag].push(pending)\n } else {\n sum[pending.tag] = [pending]\n }\n return sum\n }, {})\n }\n\n updated(changes) {\n if (changes.has('pendings')) {\n this.buildFilterPendings()\n\n this.tags = (this.pendings || []).reduce((tags, pending) => {\n tags[pending.tag] = (tags[pending.tag] || 0) + 1\n return tags\n }, {})\n }\n\n if (changes.has('tag')) {\n this.buildFilterPendings()\n }\n }\n}\n"]}
1
+ {"version":3,"file":"pending-q-monitor.js","sourceRoot":"","sources":["../../client/viewparts/pending-q-monitor.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { asyncReplace } from 'lit/directives/async-replace.js'\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js'\n\nimport { ScrollbarStyles } from '@operato/styles'\nimport { sleep } from '@operato/utils'\n\n@customElement('pending-q-monitor')\nexport class PendingQMonitor extends LitElement {\n static styles = [\n ScrollbarStyles,\n css`\n :host {\n display: flex;\n flex-direction: column;\n background-color: var(--md-sys-color-surface);\n border-radius: var(--border-radius);\n padding: var(--spacing-small);\n }\n\n div[tags] {\n display: flex;\n align-items: center;\n }\n [tags] md-icon {\n --md-icon-size: var(--fontsize-large);\n margin: 0 var(--spacing-small) 0 0;\n }\n\n select {\n flex: 1;\n display: inline-block;\n border: none;\n border-radius: var(--border-radius);\n }\n\n select:focus {\n outline: 0;\n }\n\n [pendings] {\n display: flex;\n\n flex: 1;\n position: relative;\n overflow: auto;\n }\n\n [pending-wrap] {\n flex: 1;\n margin-top: var(--spacing-medium);\n padding-left: 30px;\n padding-right: 4px;\n font-size: 8px;\n line-height: 16px;\n\n display: flex;\n }\n\n [pendings-by-tag] {\n flex: 1;\n position: relative;\n margin: 0 1px;\n }\n\n [pending] {\n display: block;\n height: 2px;\n width: 100%;\n white-space: nowrap;\n position: absolute;\n }\n\n [timeline] {\n position: absolute;\n width: 100%;\n }\n [timeline] table {\n border-collapse: collapse;\n margin-top: var(--spacing-medium);\n width: 100%;\n }\n [timeline] th {\n opacity: 0.5;\n width: 25px;\n border: 0;\n font-weight: normal;\n font-size: 9px;\n }\n [timeline] th span {\n display: block;\n position: absolute;\n margin-top: -22px;\n }\n [timeline] td {\n border: 0;\n border-top: var(--border-dim-color);\n height: 30px;\n box-sizing: border-box;\n }\n [timeline] tr:nth-child(3n + 1) td {\n border: 0;\n border-top: 1px solid rgba(0, 0, 0, 0.4);\n box-sizing: border-box;\n }\n `\n ]\n\n @property({ type: Array }) pendings: any\n @property({ type: Array }) filteredPendings: any\n @property({ type: Object }) colorIndex: any\n @property({ type: Boolean }) running?: boolean\n @property({ type: Object }) tags: any\n @property({ type: String }) tag?: string\n @property({ type: Array }) scales: any\n\n filterPendings: any\n\n render() {\n const tag = this.tag === undefined ? '(*)' : this.tag\n const scales = this.scales || []\n\n return html`\n <div tags>\n <md-icon>bookmark_border</md-icon>\n <select @change=${e => (this.tag = e.target.value)} .value=${tag}>\n <option value=\"(*)\">*</option>\n ${Object.keys(this.tags || {})\n .sort()\n .map(tag => html`<option value=${tag}>${tag}</option>`)}\n </select>\n </div>\n\n <div pendings>\n <div timeline>\n <table>\n ${unsafeHTML(\n scales.map(\n time => `\n <tr>\n <th><span>${time}</span></th>\n <td></td>\n </tr>\n `\n ).join(`\n <tr>\n <th></th>\n <td></td>\n </tr>\n <tr>\n <th></th>\n <td></td>\n </tr>\n `)\n )}\n </table>\n </div>\n\n <div pending-wrap>${asyncReplace(this.queue())}</div>\n </div>\n `\n }\n\n async *queue() {\n while (this.running) {\n var now = Date.now()\n var pendingsByTags = Object.values(this.filterPendings || {})\n\n yield pendingsByTags.map(\n pendings => html`\n <div pendings-by-tag>\n ${(pendings as any).map((pending, index) => {\n var due = Number(pending.due)\n var top = Math.max(Math.floor((due - now) / 1000) * 3, 0) /* 3px per second */\n\n return html`\n <div pending .style=\"top:${top}px;background-color:${this.colorIndex[pending.stuff.scenario]};\">\n ${index == 0 ? html` <div>${this.countdown(pending.due, now)}</div> ` : html``}\n </div>\n `\n })}\n </div>\n `\n )\n\n await sleep(1000)\n }\n }\n\n countdown(due, now) {\n const MIN = 60\n\n var remain = (Number(due) - now) / 1000\n var normailzed = Math.floor(Math.abs(remain))\n const mins = Math.floor(normailzed / MIN)\n const secs = normailzed - mins * MIN\n\n return `${remain > 0 ? '' : '-'}${mins ? mins + 'm ' : ''}${secs}s`\n }\n\n buildFilterPendings() {\n var filtered\n if (this.tag === undefined || this.tag == '(*)') {\n filtered = this.pendings || []\n } else {\n filtered = (this.pendings || []).filter(pending => pending.tag == this.tag)\n }\n\n const now = Date.now()\n const lastdue = filtered[filtered.length - 1]?.due || now\n const length = Math.max(5, Math.ceil((lastdue - now) / (1000 * 30 * 2) + 1))\n this.scales = new Array(length)\n .fill(0)\n .map((_, index) => [`${String(index).padStart(2, '0')}:00`, `${String(index).padStart(2, '0')}:30`])\n .flat()\n\n this.filterPendings = filtered.reduce((sum, pending) => {\n if (sum[pending.tag]) {\n sum[pending.tag].push(pending)\n } else {\n sum[pending.tag] = [pending]\n }\n return sum\n }, {})\n }\n\n updated(changes) {\n if (changes.has('pendings')) {\n this.buildFilterPendings()\n\n this.tags = (this.pendings || []).reduce((tags, pending) => {\n tags[pending.tag] = (tags[pending.tag] || 0) + 1\n return tags\n }, {})\n }\n\n if (changes.has('tag')) {\n this.buildFilterPendings()\n }\n }\n}\n"]}
@@ -81,7 +81,7 @@ ScenarioInstanceLogView.styles = [
81
81
  display: flex;
82
82
  flex-direction: column;
83
83
  background-color: var(--md-sys-color-surface);
84
- padding: var(--padding-wide);
84
+ padding: var(--spacing-large);
85
85
  }
86
86
 
87
87
  :host([active]) {
@@ -1 +1 @@
1
- {"version":3,"file":"scenario-instance-log-view.js","sourceRoot":"","sources":["../../client/viewparts/scenario-instance-log-view.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@material/web/fab/fab.js'\n\nimport gql from 'graphql-tag'\n\nimport { css, html, LitElement, nothing } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { connect } from 'pwa-helpers/connect-mixin'\n\nimport { subscribe } from '@operato/graphql'\nimport { store } from '@operato/shell'\nimport { ScrollbarStyles } from '@operato/styles'\n\n@customElement('scenario-instance-log-view')\nexport class ScenarioInstanceLogView extends connect(store)(LitElement) {\n static styles = [\n ScrollbarStyles,\n css`\n :host {\n display: flex;\n flex-direction: column;\n background-color: var(--md-sys-color-surface);\n padding: var(--padding-wide);\n }\n\n :host([active]) {\n padding: 0;\n }\n\n [content] {\n flex: 1;\n\n display: flex;\n flex-direction: column;\n overflow: auto;\n\n font-size: var(--fontsize-small);\n }\n\n div.error {\n color: #8b0000;\n }\n\n div.warn {\n color: #ff6b6b;\n }\n\n span {\n color: var(--secondary-text-color);\n }\n\n #start {\n position: absolute;\n bottom: 15px;\n right: 16px;\n text-decoration: auto;\n }\n `\n ]\n\n @property({ type: String }) scenarioName?: string\n @property({ type: String }) instanceName?: string\n @property({ type: Array }) logs: any\n @property({ type: Boolean }) startable: boolean = false\n\n subscription: any\n\n firstUpdated() {\n this.logs = []\n this.startSubscribe()\n }\n\n disconnectedCallback() {\n super.disconnectedCallback()\n this.stopSubscribe()\n }\n\n render() {\n const logs = this.logs || []\n\n return html`\n <div options></div>\n <div content>\n ${logs.map(\n ({ timestamp, message, level }) => html`\n <div class=\"${level}\">\n <span>${new Date(timestamp).toLocaleString()}</span> <strong>${level}</strong> ${message}\n </div>\n `\n )}\n </div>\n ${this.startable\n ? html`<md-fab id=\"start\" title=\"start\" @click=${() => this.dispatchEvent(new CustomEvent('start'))}>\n <md-icon slot=\"icon\">play_arrow</md-icon>\n </md-fab>`\n : nothing}\n `\n }\n\n async startSubscribe() {\n this.subscription = await subscribe(\n {\n query: gql`\n subscription ($instanceName: String, $scenarioName: String, $level: String) {\n log: scenarioInstanceLog(instanceName: $instanceName, scenarioName: $scenarioName, level: $level) {\n level\n message\n timestamp\n }\n }\n `,\n variables: {\n instanceName: this.instanceName,\n scenarioName: this.scenarioName\n }\n },\n {\n next: async ({ data }) => {\n var wasBottom = this.scrollHeight - this.scrollTop === this.clientHeight\n\n this.logs.push(data.log)\n this.logs.length > 100 && this.logs.shift()\n this.requestUpdate()\n\n if (wasBottom) {\n /* this is not proved yet - to keep bottom scroll position */\n await this.updateComplete\n this.scrollTop = this.scrollHeight - this.clientHeight\n }\n }\n }\n )\n }\n\n async stopSubscribe() {\n await this.subscription?.unsubscribe()\n delete this.subscription\n }\n}\n"]}
1
+ {"version":3,"file":"scenario-instance-log-view.js","sourceRoot":"","sources":["../../client/viewparts/scenario-instance-log-view.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,0BAA0B,CAAA;AAEjC,OAAO,GAAG,MAAM,aAAa,CAAA;AAE7B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAA;AACpD,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,uBAAuB,GAA7B,MAAM,uBAAwB,SAAQ,OAAO,CAAC,KAAK,CAAC,CAAC,UAAU,CAAC;IAAhE;;QAiDwB,cAAS,GAAY,KAAK,CAAA;IA2EzD,CAAC;IAvEC,YAAY;QACV,IAAI,CAAC,IAAI,GAAG,EAAE,CAAA;QACd,IAAI,CAAC,cAAc,EAAE,CAAA;IACvB,CAAC;IAED,oBAAoB;QAClB,KAAK,CAAC,oBAAoB,EAAE,CAAA;QAC5B,IAAI,CAAC,aAAa,EAAE,CAAA;IACtB,CAAC;IAED,MAAM;QACJ,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,EAAE,CAAA;QAE5B,OAAO,IAAI,CAAA;;;UAGL,IAAI,CAAC,GAAG,CACR,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,IAAI,CAAA;0BACvB,KAAK;sBACT,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC,cAAc,EAAE,mBAAmB,KAAK,aAAa,OAAO;;WAE3F,CACF;;QAED,IAAI,CAAC,SAAS;YACd,CAAC,CAAC,IAAI,CAAA,2CAA2C,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,OAAO,CAAC,CAAC;;oBAEvF;YACZ,CAAC,CAAC,OAAO;KACZ,CAAA;IACH,CAAC;IAED,KAAK,CAAC,cAAc;QAClB,IAAI,CAAC,YAAY,GAAG,MAAM,SAAS,CACjC;YACE,KAAK,EAAE,GAAG,CAAA;;;;;;;;SAQT;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,SAAS,GAAG,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,SAAS,KAAK,IAAI,CAAC,YAAY,CAAA;gBAExE,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;gBACxB,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAA;gBAC3C,IAAI,CAAC,aAAa,EAAE,CAAA;gBAEpB,IAAI,SAAS,EAAE,CAAC;oBACd,6DAA6D;oBAC7D,MAAM,IAAI,CAAC,cAAc,CAAA;oBACzB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,CAAA;gBACxD,CAAC;YACH,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;;AA1HM,8BAAM,GAAG;IACd,eAAe;IACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAwCF;CACF,AA3CY,CA2CZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;6DAAsB;AACrB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;6DAAsB;AACtB;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;;qDAAU;AACP;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;;0DAA2B;AAjD5C,uBAAuB;IADnC,aAAa,CAAC,4BAA4B,CAAC;GAC/B,uBAAuB,CA4HnC","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@material/web/fab/fab.js'\n\nimport gql from 'graphql-tag'\n\nimport { css, html, LitElement, nothing } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { connect } from 'pwa-helpers/connect-mixin'\n\nimport { subscribe } from '@operato/graphql'\nimport { store } from '@operato/shell'\nimport { ScrollbarStyles } from '@operato/styles'\n\n@customElement('scenario-instance-log-view')\nexport class ScenarioInstanceLogView extends connect(store)(LitElement) {\n static styles = [\n ScrollbarStyles,\n css`\n :host {\n display: flex;\n flex-direction: column;\n background-color: var(--md-sys-color-surface);\n padding: var(--spacing-large);\n }\n\n :host([active]) {\n padding: 0;\n }\n\n [content] {\n flex: 1;\n\n display: flex;\n flex-direction: column;\n overflow: auto;\n\n font-size: var(--fontsize-small);\n }\n\n div.error {\n color: #8b0000;\n }\n\n div.warn {\n color: #ff6b6b;\n }\n\n span {\n color: var(--secondary-text-color);\n }\n\n #start {\n position: absolute;\n bottom: 15px;\n right: 16px;\n text-decoration: auto;\n }\n `\n ]\n\n @property({ type: String }) scenarioName?: string\n @property({ type: String }) instanceName?: string\n @property({ type: Array }) logs: any\n @property({ type: Boolean }) startable: boolean = false\n\n subscription: any\n\n firstUpdated() {\n this.logs = []\n this.startSubscribe()\n }\n\n disconnectedCallback() {\n super.disconnectedCallback()\n this.stopSubscribe()\n }\n\n render() {\n const logs = this.logs || []\n\n return html`\n <div options></div>\n <div content>\n ${logs.map(\n ({ timestamp, message, level }) => html`\n <div class=\"${level}\">\n <span>${new Date(timestamp).toLocaleString()}</span> <strong>${level}</strong> ${message}\n </div>\n `\n )}\n </div>\n ${this.startable\n ? html`<md-fab id=\"start\" title=\"start\" @click=${() => this.dispatchEvent(new CustomEvent('start'))}>\n <md-icon slot=\"icon\">play_arrow</md-icon>\n </md-fab>`\n : nothing}\n `\n }\n\n async startSubscribe() {\n this.subscription = await subscribe(\n {\n query: gql`\n subscription ($instanceName: String, $scenarioName: String, $level: String) {\n log: scenarioInstanceLog(instanceName: $instanceName, scenarioName: $scenarioName, level: $level) {\n level\n message\n timestamp\n }\n }\n `,\n variables: {\n instanceName: this.instanceName,\n scenarioName: this.scenarioName\n }\n },\n {\n next: async ({ data }) => {\n var wasBottom = this.scrollHeight - this.scrollTop === this.clientHeight\n\n this.logs.push(data.log)\n this.logs.length > 100 && this.logs.shift()\n this.requestUpdate()\n\n if (wasBottom) {\n /* this is not proved yet - to keep bottom scroll position */\n await this.updateComplete\n this.scrollTop = this.scrollHeight - this.clientHeight\n }\n }\n }\n )\n }\n\n async stopSubscribe() {\n await this.subscription?.unsubscribe()\n delete this.subscription\n }\n}\n"]}
@@ -89,7 +89,7 @@ ScenarioInstanceMonitor.styles = [
89
89
  display: block;
90
90
  overflow: hidden;
91
91
  position: relative;
92
- padding: var(--padding-narrow);
92
+ padding: var(--spacing-small);
93
93
  color: var(--md-sys-color-secondary);
94
94
  }
95
95
 
@@ -126,7 +126,7 @@ ScenarioInstanceMonitor.styles = [
126
126
  }
127
127
 
128
128
  [steps] {
129
- padding: 0 0 0 var(--padding-narrow);
129
+ padding: 0 0 0 var(--spacing-small);
130
130
  }
131
131
 
132
132
  #progressbar {
@@ -140,7 +140,7 @@ ScenarioInstanceMonitor.styles = [
140
140
  --md-icon-size: 18px;
141
141
 
142
142
  border-top: var(--border-dim-color);
143
- padding: var(--padding-narrow) 0 0 0;
143
+ padding: var(--spacing-small) 0 0 0;
144
144
  text-align: right;
145
145
  }
146
146
 
@@ -1 +1 @@
1
- {"version":3,"file":"scenario-instance-monitor.js","sourceRoot":"","sources":["../../client/viewparts/scenario-instance-monitor.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@operato/data-grist'\nimport './scenario-instance-view'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { client } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { notify, openPopup } from '@operato/layout'\nimport { ScrollbarStyles } from '@operato/styles'\n\nfunction IS_SCENARIO_RUNNING(state) {\n return state && state !== 'UNLOADED'\n}\n\n@customElement('scenario-instance-monitor')\nexport class ScenarioInstanceMonitor extends localize(i18next)(LitElement) {\n static styles = [\n ScrollbarStyles,\n css`\n :host {\n display: block;\n overflow: hidden;\n position: relative;\n padding: var(--padding-narrow);\n color: var(--md-sys-color-secondary);\n }\n\n [running] {\n background-color: lightgreen;\n }\n\n [name] {\n font-size: var(--fontsize-default);\n font-weight: bold;\n }\n\n [progress] {\n display: block;\n position: relative;\n\n width: 100%;\n margin: 2px;\n padding: 2px;\n box-sizing: border-box;\n\n border: var(--border-dim-color);\n border-radius: 10px;\n background-color: var(--md-sys-color-surface);\n }\n [progress-wrap] {\n display: flex;\n flex-direction: row;\n margin: 4px 0;\n }\n\n [running] [progress] {\n background-color: var(--md-sys-color-surface-variant);\n }\n\n [steps] {\n padding: 0 0 0 var(--padding-narrow);\n }\n\n #progressbar {\n height: 100%;\n text-align: left;\n border-radius: 5px;\n animation: width 1s linear ease-out;\n }\n\n [buttons] {\n --md-icon-size: 18px;\n\n border-top: var(--border-dim-color);\n padding: var(--padding-narrow) 0 0 0;\n text-align: right;\n }\n\n [buttons] md-icon {\n color: var(--md-sys-color-primary);\n }\n\n @keyframes width {\n 0% {\n width: 0;\n }\n 100% {\n width: auto;\n }\n }\n `\n ]\n\n @property({ type: Object }) instance: any\n @property({ type: String }) color?: string\n\n render() {\n var instance = this.instance\n const { instanceName, progress, message, state } = instance\n const { rate = 0, steps = 0, step = 0, rounds = 0 } = progress || {}\n\n const running = IS_SCENARIO_RUNNING(state)\n\n return html`\n <div name>${instanceName}</div>\n <div progress-wrap>\n <div progress>\n <div id=\"progressbar\" .style=\"width:${rate}%;background-color:${this.color};\"></div>\n </div>\n <div steps>${step}/${steps}</div>\n </div>\n <div buttons>\n <span><strong>${rounds}</strong> round</span>\n <md-icon @click=${e => this.showInstanceDetail()}>wysiwyg</md-icon>\n <md-icon @click=${e => (running ? this.stopScenario(instance) : this.startScenario(instance))}\n >${running ? 'pause' : 'play_arrow'}</md-icon\n >\n </div>\n `\n }\n\n async startScenario(instance) {\n var response = await client.mutate({\n mutation: gql`\n mutation ($scenarioName: String!, $instanceName: String) {\n startScenario(scenarioName: $scenarioName, instanceName: $instanceName) {\n state\n }\n }\n `,\n variables: {\n scenarioName: instance.scenarioName,\n instanceName: instance.instanceName\n }\n })\n\n notify({\n level: 'info',\n message: `${IS_SCENARIO_RUNNING(response.data.startScenario.state) ? 'success' : 'fail'} to start scenario : ${instance.scenarioName}`\n })\n }\n\n async stopScenario(instance) {\n var response = await client.mutate({\n mutation: gql`\n mutation ($instanceName: String!) {\n stopScenario(instanceName: $instanceName) {\n state\n }\n }\n `,\n variables: {\n instanceName: instance.instanceName\n }\n })\n\n notify({\n level: 'info',\n message: `${IS_SCENARIO_RUNNING(response.data.stopScenario.state) ? 'fail' : 'success'} to stop instance : ${instance.instanceName}`\n })\n }\n\n async showInstanceDetail() {\n const { instanceName, scenarioName } = this.instance\n openPopup(\n html`\n <scenario-instance-view .instanceName=${instanceName} .scenarioName=${scenarioName}></scenario-instance-view>\n `,\n {\n size: 'large',\n title: `${i18next.t('title.scenario-instance')}`\n }\n )\n }\n}\n"]}
1
+ {"version":3,"file":"scenario-instance-monitor.js","sourceRoot":"","sources":["../../client/viewparts/scenario-instance-monitor.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@operato/data-grist'\nimport './scenario-instance-view'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { client } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { notify, openPopup } from '@operato/layout'\nimport { ScrollbarStyles } from '@operato/styles'\n\nfunction IS_SCENARIO_RUNNING(state) {\n return state && state !== 'UNLOADED'\n}\n\n@customElement('scenario-instance-monitor')\nexport class ScenarioInstanceMonitor extends localize(i18next)(LitElement) {\n static styles = [\n ScrollbarStyles,\n css`\n :host {\n display: block;\n overflow: hidden;\n position: relative;\n padding: var(--spacing-small);\n color: var(--md-sys-color-secondary);\n }\n\n [running] {\n background-color: lightgreen;\n }\n\n [name] {\n font-size: var(--fontsize-default);\n font-weight: bold;\n }\n\n [progress] {\n display: block;\n position: relative;\n\n width: 100%;\n margin: 2px;\n padding: 2px;\n box-sizing: border-box;\n\n border: var(--border-dim-color);\n border-radius: 10px;\n background-color: var(--md-sys-color-surface);\n }\n [progress-wrap] {\n display: flex;\n flex-direction: row;\n margin: 4px 0;\n }\n\n [running] [progress] {\n background-color: var(--md-sys-color-surface-variant);\n }\n\n [steps] {\n padding: 0 0 0 var(--spacing-small);\n }\n\n #progressbar {\n height: 100%;\n text-align: left;\n border-radius: 5px;\n animation: width 1s linear ease-out;\n }\n\n [buttons] {\n --md-icon-size: 18px;\n\n border-top: var(--border-dim-color);\n padding: var(--spacing-small) 0 0 0;\n text-align: right;\n }\n\n [buttons] md-icon {\n color: var(--md-sys-color-primary);\n }\n\n @keyframes width {\n 0% {\n width: 0;\n }\n 100% {\n width: auto;\n }\n }\n `\n ]\n\n @property({ type: Object }) instance: any\n @property({ type: String }) color?: string\n\n render() {\n var instance = this.instance\n const { instanceName, progress, message, state } = instance\n const { rate = 0, steps = 0, step = 0, rounds = 0 } = progress || {}\n\n const running = IS_SCENARIO_RUNNING(state)\n\n return html`\n <div name>${instanceName}</div>\n <div progress-wrap>\n <div progress>\n <div id=\"progressbar\" .style=\"width:${rate}%;background-color:${this.color};\"></div>\n </div>\n <div steps>${step}/${steps}</div>\n </div>\n <div buttons>\n <span><strong>${rounds}</strong> round</span>\n <md-icon @click=${e => this.showInstanceDetail()}>wysiwyg</md-icon>\n <md-icon @click=${e => (running ? this.stopScenario(instance) : this.startScenario(instance))}\n >${running ? 'pause' : 'play_arrow'}</md-icon\n >\n </div>\n `\n }\n\n async startScenario(instance) {\n var response = await client.mutate({\n mutation: gql`\n mutation ($scenarioName: String!, $instanceName: String) {\n startScenario(scenarioName: $scenarioName, instanceName: $instanceName) {\n state\n }\n }\n `,\n variables: {\n scenarioName: instance.scenarioName,\n instanceName: instance.instanceName\n }\n })\n\n notify({\n level: 'info',\n message: `${IS_SCENARIO_RUNNING(response.data.startScenario.state) ? 'success' : 'fail'} to start scenario : ${instance.scenarioName}`\n })\n }\n\n async stopScenario(instance) {\n var response = await client.mutate({\n mutation: gql`\n mutation ($instanceName: String!) {\n stopScenario(instanceName: $instanceName) {\n state\n }\n }\n `,\n variables: {\n instanceName: instance.instanceName\n }\n })\n\n notify({\n level: 'info',\n message: `${IS_SCENARIO_RUNNING(response.data.stopScenario.state) ? 'fail' : 'success'} to stop instance : ${instance.instanceName}`\n })\n }\n\n async showInstanceDetail() {\n const { instanceName, scenarioName } = this.instance\n openPopup(\n html`\n <scenario-instance-view .instanceName=${instanceName} .scenarioName=${scenarioName}></scenario-instance-view>\n `,\n {\n size: 'large',\n title: `${i18next.t('title.scenario-instance')}`\n }\n )\n }\n}\n"]}
@@ -151,7 +151,7 @@ ScenarioInstanceView.styles = [
151
151
 
152
152
  [tab] span {
153
153
  display: inline;
154
- padding: var(--padding-wide) var(--padding-wide) var(--padding-narrow) var(--padding-wide);
154
+ padding: var(--spacing-large) var(--spacing-large) var(--spacing-small) var(--spacing-large);
155
155
  border-bottom: 3px solid transparent;
156
156
  color: var(--md-sys-color-secondary);
157
157
  text-transform: capitalize;
@@ -167,7 +167,7 @@ ScenarioInstanceView.styles = [
167
167
  background-color: var(--md-sys-color-surface);
168
168
  border-top: var(--border-dim-color);
169
169
  overflow: hidden;
170
- padding: var(--padding-wide);
170
+ padding: var(--spacing-large);
171
171
  }
172
172
 
173
173
  [detail] > * {
@@ -193,7 +193,7 @@ ScenarioInstanceView.styles = [
193
193
  list-style: inside '- ';
194
194
  }
195
195
  [detail] li {
196
- padding: var(--padding-default) var(--padding-narrow) var(--padding-narrow) var(--padding-narrow);
196
+ padding: var(--spacing-medium) var(--spacing-small) var(--spacing-small) var(--spacing-small);
197
197
  border-bottom: var(--border-dim-color);
198
198
  }
199
199
 
@@ -204,7 +204,7 @@ ScenarioInstanceView.styles = [
204
204
  [value] {
205
205
  flex: 1;
206
206
  overflow: auto;
207
- padding: var(--padding-wide);
207
+ padding: var(--spacing-large);
208
208
  }
209
209
  scenario-instance-log-view [active] {
210
210
  padding: 0;
@@ -215,7 +215,7 @@ ScenarioInstanceView.styles = [
215
215
  display: block;
216
216
  }
217
217
  [detail] {
218
- padding: var(--padding-default);
218
+ padding: var(--spacing-medium);
219
219
  overflow: auto;
220
220
  }
221
221
  [detail] > * {
@@ -1 +1 @@
1
- {"version":3,"file":"scenario-instance-view.js","sourceRoot":"","sources":["../../client/viewparts/scenario-instance-view.ts"],"names":[],"mappings":"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","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(--padding-wide) var(--padding-wide) var(--padding-narrow) var(--padding-wide);\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(--padding-wide);\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(--padding-default) var(--padding-narrow) var(--padding-narrow) var(--padding-narrow);\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(--padding-wide);\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(--padding-default);\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"]}
1
+ {"version":3,"file":"scenario-instance-view.js","sourceRoot":"","sources":["../../client/viewparts/scenario-instance-view.ts"],"names":[],"mappings":"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","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"]}
@@ -127,7 +127,7 @@ ScenarioMonitor.styles = [
127
127
  position: relative;
128
128
  display: flex;
129
129
  flex-direction: column;
130
- padding: var(--padding-default);
130
+ padding: var(--spacing-medium);
131
131
  color: var(--md-sys-color-secondary);
132
132
  font-size: var(--fontsize-small);
133
133
  width: 100%;
@@ -154,7 +154,7 @@ ScenarioMonitor.styles = [
154
154
  display: block;
155
155
  position: absolute;
156
156
  top: 0px;
157
- right: var(--padding-default);
157
+ right: var(--spacing-medium);
158
158
  font-size: 40px;
159
159
  font-weight: bold;
160
160
  text-align: right;
@@ -168,8 +168,8 @@ ScenarioMonitor.styles = [
168
168
  [desc] [schedule] {
169
169
  background-color: #f1f1f1;
170
170
  border-radius: 20px;
171
- margin: var(--margin-default) 0;
172
- padding: var(--padding-narrow);
171
+ margin: var(--spacing-medium) 0;
172
+ padding: var(--spacing-small);
173
173
  overflow: hidden;
174
174
  text-overflow: ellipsis;
175
175
  white-space: nowrap;
@@ -185,7 +185,7 @@ ScenarioMonitor.styles = [
185
185
 
186
186
  [buttons] {
187
187
  border-top: var(--border-dim-color);
188
- padding: var(--padding-narrow) 0 0 0;
188
+ padding: var(--spacing-small) 0 0 0;
189
189
  text-align: right;
190
190
  }
191
191
 
@@ -201,7 +201,7 @@ ScenarioMonitor.styles = [
201
201
  }
202
202
 
203
203
  :host([mode='detail']) [schedule] {
204
- margin: var(--margin-default) 0 0 0;
204
+ margin: var(--spacing-medium) 0 0 0;
205
205
  }
206
206
 
207
207
  :host([mode='detail']) [desc] {
@@ -215,7 +215,7 @@ ScenarioMonitor.styles = [
215
215
 
216
216
  :host([mode='detail']) [buttons] {
217
217
  border-top: none;
218
- padding: var(--padding-default);
218
+ padding: var(--spacing-medium);
219
219
  }
220
220
 
221
221
  ul {
@@ -231,7 +231,7 @@ ScenarioMonitor.styles = [
231
231
 
232
232
  ul > li {
233
233
  position: relative;
234
- margin: var(--margin-default);
234
+ margin: var(--spacing-medium);
235
235
  min-width: 140px;
236
236
  border: 1px solid black;
237
237
  border-radius: var(--border-radius);
@@ -248,11 +248,11 @@ ScenarioMonitor.styles = [
248
248
 
249
249
  @media screen and (max-width: 480px) {
250
250
  :host {
251
- margin: var(--margin-narrow);
251
+ margin: var(--spacing-small);
252
252
  }
253
253
 
254
254
  [desc] {
255
- padding: var(--padding-narrow);
255
+ padding: var(--spacing-small);
256
256
  }
257
257
 
258
258
  [desc] [detail-info] {
@@ -1 +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(--padding-default);\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(--padding-default);\n font-size: 40px;\n font-weight: bold;\n text-align: right;\n }\n\n [desc] [schedule] * {\n vertical-align: middle;\n display: inline;\n }\n\n [desc] [schedule] {\n background-color: #f1f1f1;\n border-radius: 20px;\n margin: var(--margin-default) 0;\n padding: var(--padding-narrow);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n font-size: 12px;\n line-height: 8px;\n }\n\n [desc] md-icon {\n --md-icon-size: 18px;\n border-radius: 50%;\n color: var(--md-sys-color-on-primary);\n }\n\n [buttons] {\n border-top: var(--border-dim-color);\n padding: var(--padding-narrow) 0 0 0;\n text-align: right;\n }\n\n [buttons] md-icon {\n --md-icon-size: 22px;\n color: var(--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(--margin-default) 0 0 0;\n }\n\n :host([mode='detail']) [desc] {\n flex: unset;\n width: 200px;\n }\n\n :host([mode='detail']) [desc] [buttons] {\n display: none;\n }\n\n :host([mode='detail']) [buttons] {\n border-top: none;\n padding: var(--padding-default);\n }\n\n ul {\n flex: 1;\n\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n list-style: none;\n margin: 0;\n padding: 0;\n }\n\n ul > li {\n position: relative;\n margin: var(--margin-default);\n min-width: 140px;\n border: 1px solid black;\n border-radius: var(--border-radius);\n font-size: 12px;\n }\n\n li span {\n display: block;\n position: absolute;\n width: 100%;\n height: 100%;\n background-color: rgba(255, 255, 255, 0.8);\n }\n\n @media screen and (max-width: 480px) {\n :host {\n margin: var(--margin-narrow);\n }\n\n [desc] {\n padding: var(--padding-narrow);\n }\n\n [desc] [detail-info] {\n height: 38px;\n }\n\n [desc] span {\n font-size: 36px;\n }\n }\n `\n ]\n\n @property({ type: Object }) scenario: any\n @property({ type: String }) mode?: string\n\n render() {\n const scenario = this.scenario || {}\n const mode = this.mode\n\n const { id, name, description, schedule, color } = scenario\n const instances = scenario.instances || []\n\n return html`\n <div desc>\n <div detail-info title=${name}>\n <strong>${name}</strong>\n ${description}\n <span>${instances.length}</span>\n </div>\n <div schedule>\n <md-icon .style=\"background-color: ${color};\">schedule</md-icon>\n <pre>${schedule}</pre>\n </div>\n ${this.renderButtons(scenario)}\n </div>\n\n ${mode === 'detail'\n ? html`\n <ul>\n ${instances.map(\n instance => html`\n <li .style=\"border-color:${color};background-color:${color}\">\n <span></span>\n <scenario-instance-monitor .instance=${instance} .color=${color}></scenario-instance-monitor>\n </li>\n `\n )}\n </ul>\n ${this.renderButtons(scenario)}\n `\n : html``}\n `\n }\n\n renderButtons(scenario) {\n const instances = scenario.instances || []\n const scenarioInstance = instances.find(instance => instance.instanceName == scenario.name) || null\n\n return html`\n <div buttons ?detail=${this.mode == 'detail'}>\n <md-icon @click=${e => this.popupLogView(scenario)}>text_snippet</md-icon>\n ${!scenarioInstance\n ? html` <md-icon @click=${e => this.startScenario(scenario)}>play_circle</md-icon>`\n : html` <md-icon @click=${e => this.stopScenario(scenario)} stop>pause_circle</md-icon> `}\n </div>\n `\n }\n\n async popupLogView(scenario) {\n const popup = openPopup(\n html`\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"]}
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;\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 border-top: var(--border-dim-color);\n padding: var(--spacing-small) 0 0 0;\n text-align: right;\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 @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}</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"]}
@@ -55,8 +55,8 @@ ScenariosMonitor.styles = [
55
55
 
56
56
  [info] {
57
57
  display: flex;
58
- margin-bottom: var(--margin-default);
59
- padding: var(--padding-narrow) 0;
58
+ margin-bottom: var(--spacing-medium);
59
+ padding: var(--spacing-small) 0;
60
60
  flex-direction: row;
61
61
  align-items: center;
62
62
  border-bottom: 2px solid var(--md-sys-color-secondary);
@@ -75,13 +75,13 @@ ScenariosMonitor.styles = [
75
75
  }
76
76
  [info] input {
77
77
  margin: var(--input-margin);
78
- padding: var(--padding-narrow);
78
+ padding: var(--spacing-small);
79
79
  border: var(--border-dim-color);
80
80
  border-radius: var(--border-radius);
81
81
  font: var(--input-font);
82
82
  }
83
83
  [info] md-icon {
84
- margin-left: var(--margin-narrow);
84
+ margin-left: var(--spacing-small);
85
85
  color: var(--md-sys-color-secondary);
86
86
  line-height: 34px;
87
87
  cursor: pointer;