@things-factory/integration-ui 6.2.122 → 6.2.133
Sign up to get free protection for your applications and to get access to all the features.
- package/client/viewparts/scenario-instance-log-view.ts +14 -7
- package/client/viewparts/scenario-instance-monitor.ts +7 -19
- package/client/viewparts/scenario-monitor.ts +9 -6
- package/dist-client/tsconfig.tsbuildinfo +1 -1
- package/dist-client/viewparts/scenario-instance-log-view.d.ts +2 -0
- package/dist-client/viewparts/scenario-instance-log-view.js +19 -6
- package/dist-client/viewparts/scenario-instance-log-view.js.map +1 -1
- package/dist-client/viewparts/scenario-instance-monitor.js +2 -7
- package/dist-client/viewparts/scenario-instance-monitor.js.map +1 -1
- package/dist-client/viewparts/scenario-monitor.js +2 -2
- package/dist-client/viewparts/scenario-monitor.js.map +1 -1
- package/package.json +5 -5
@@ -1,3 +1,4 @@
|
|
1
|
+
import '@material/mwc-fab';
|
1
2
|
import { LitElement } from 'lit';
|
2
3
|
declare const ScenarioInstanceLogView_base: (new (...args: any[]) => {
|
3
4
|
_storeUnsubscribe: import("redux").Unsubscribe;
|
@@ -11,6 +12,7 @@ export declare class ScenarioInstanceLogView extends ScenarioInstanceLogView_bas
|
|
11
12
|
scenarioName?: string;
|
12
13
|
instanceName?: string;
|
13
14
|
logs: any;
|
15
|
+
startable: boolean;
|
14
16
|
subscription: any;
|
15
17
|
firstUpdated(): void;
|
16
18
|
disconnectedCallback(): void;
|
@@ -1,12 +1,17 @@
|
|
1
1
|
import { __decorate, __metadata } from "tslib";
|
2
|
+
import '@material/mwc-fab';
|
2
3
|
import gql from 'graphql-tag';
|
3
|
-
import { css, html, LitElement } from 'lit';
|
4
|
+
import { css, html, LitElement, nothing } from 'lit';
|
4
5
|
import { customElement, property } from 'lit/decorators.js';
|
5
6
|
import { connect } from 'pwa-helpers/connect-mixin';
|
6
7
|
import { subscribe } from '@operato/graphql';
|
7
8
|
import { store } from '@operato/shell';
|
8
9
|
import { ScrollbarStyles } from '@operato/styles';
|
9
10
|
let ScenarioInstanceLogView = class ScenarioInstanceLogView extends connect(store)(LitElement) {
|
11
|
+
constructor() {
|
12
|
+
super(...arguments);
|
13
|
+
this.startable = false;
|
14
|
+
}
|
10
15
|
firstUpdated() {
|
11
16
|
this.logs = [];
|
12
17
|
this.startSubscribe();
|
@@ -20,12 +25,9 @@ let ScenarioInstanceLogView = class ScenarioInstanceLogView extends connect(stor
|
|
20
25
|
return html `
|
21
26
|
<div options></div>
|
22
27
|
<div content>
|
23
|
-
${logs.map(({ timestamp, message, level }) => html `
|
24
|
-
<div class="${level}">
|
25
|
-
<span>${new Date(timestamp).toLocaleString()}</span> <strong>${level}</strong> ${message}
|
26
|
-
</div>
|
27
|
-
`)}
|
28
|
+
${logs.map(({ timestamp, message, level }) => html ` <div class="${level}"><span>${new Date(timestamp).toLocaleString()}</span> <strong>${level}</strong> ${message}</div> `)}
|
28
29
|
</div>
|
30
|
+
${this.startable ? html `<mwc-fab id="start" icon="play_arrow" title="start" @click=${() => this.dispatchEvent(new CustomEvent('start'))}> </mwc-fab>` : nothing}
|
29
31
|
`;
|
30
32
|
}
|
31
33
|
async startSubscribe() {
|
@@ -98,6 +100,13 @@ ScenarioInstanceLogView.styles = [
|
|
98
100
|
span {
|
99
101
|
color: var(--secondary-text-color);
|
100
102
|
}
|
103
|
+
|
104
|
+
#start {
|
105
|
+
position: absolute;
|
106
|
+
bottom: 15px;
|
107
|
+
right: 16px;
|
108
|
+
text-decoration: auto;
|
109
|
+
}
|
101
110
|
`
|
102
111
|
];
|
103
112
|
__decorate([
|
@@ -112,6 +121,10 @@ __decorate([
|
|
112
121
|
property({ type: Array }),
|
113
122
|
__metadata("design:type", Object)
|
114
123
|
], ScenarioInstanceLogView.prototype, "logs", void 0);
|
124
|
+
__decorate([
|
125
|
+
property({ type: Boolean }),
|
126
|
+
__metadata("design:type", Boolean)
|
127
|
+
], ScenarioInstanceLogView.prototype, "startable", void 0);
|
115
128
|
ScenarioInstanceLogView = __decorate([
|
116
129
|
customElement('scenario-instance-log-view')
|
117
130
|
], ScenarioInstanceLogView);
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"scenario-instance-log-view.js","sourceRoot":"","sources":["../../client/viewparts/scenario-instance-log-view.ts"],"names":[],"mappings":";AAAA,OAAO,GAAG,MAAM,aAAa,CAAA;
|
1
|
+
{"version":3,"file":"scenario-instance-log-view.js","sourceRoot":"","sources":["../../client/viewparts/scenario-instance-log-view.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/mwc-fab'\n\nimport gql from 'graphql-tag'\n\nimport { css, html, LitElement, nothing } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { connect } from 'pwa-helpers/connect-mixin'\n\nimport { subscribe } from '@operato/graphql'\nimport { store } from '@operato/shell'\nimport { ScrollbarStyles } from '@operato/styles'\n\n@customElement('scenario-instance-log-view')\nexport class ScenarioInstanceLogView extends connect(store)(LitElement) {\n static styles = [\n ScrollbarStyles,\n css`\n :host {\n display: flex;\n flex-direction: column;\n background-color: var(--theme-white-color);\n padding: var(--padding-wide);\n }\n\n :host([active]) {\n padding: 0;\n }\n\n [content] {\n flex: 1;\n\n display: flex;\n flex-direction: column;\n overflow: auto;\n\n font-size: var(--fontsize-small);\n }\n\n div.error {\n color: #8b0000;\n }\n\n div.warn {\n color: #ff6b6b;\n }\n\n span {\n color: var(--secondary-text-color);\n }\n\n #start {\n position: absolute;\n bottom: 15px;\n right: 16px;\n text-decoration: auto;\n }\n `\n ]\n\n @property({ type: String }) scenarioName?: string\n @property({ type: String }) instanceName?: string\n @property({ type: Array }) logs: any\n @property({ type: Boolean }) startable: boolean = false\n\n subscription: any\n\n firstUpdated() {\n this.logs = []\n this.startSubscribe()\n }\n\n disconnectedCallback() {\n super.disconnectedCallback()\n this.stopSubscribe()\n }\n\n render() {\n const logs = this.logs || []\n\n return html`\n <div options></div>\n <div content>\n ${logs.map(\n ({ timestamp, message, level }) => html` <div class=\"${level}\"><span>${new Date(timestamp).toLocaleString()}</span> <strong>${level}</strong> ${message}</div> `\n )}\n </div>\n ${this.startable ? html`<mwc-fab id=\"start\" icon=\"play_arrow\" title=\"start\" @click=${() => this.dispatchEvent(new CustomEvent('start'))}> </mwc-fab>` : nothing}\n `\n }\n\n async startSubscribe() {\n this.subscription = await subscribe(\n {\n query: gql`\n subscription ($instanceName: String, $scenarioName: String, $level: String) {\n log: scenarioInstanceLog(instanceName: $instanceName, scenarioName: $scenarioName, level: $level) {\n level\n message\n timestamp\n }\n }\n `,\n variables: {\n instanceName: this.instanceName,\n scenarioName: this.scenarioName\n }\n },\n {\n next: async ({ data }) => {\n var wasBottom = this.scrollHeight - this.scrollTop === this.clientHeight\n\n this.logs.push(data.log)\n this.logs.length > 100 && this.logs.shift()\n this.requestUpdate()\n\n if (wasBottom) {\n /* this is not proved yet - to keep bottom scroll position */\n await this.updateComplete\n this.scrollTop = this.scrollHeight - this.clientHeight\n }\n }\n }\n )\n }\n\n async stopSubscribe() {\n await this.subscription?.unsubscribe()\n delete this.subscription\n }\n}\n"]}
|
@@ -29,10 +29,7 @@ let ScenarioInstanceMonitor = class ScenarioInstanceMonitor extends localize(i18
|
|
29
29
|
<div buttons>
|
30
30
|
<span><strong>${rounds}</strong> round</span>
|
31
31
|
<mwc-icon-button @click=${e => this.showInstanceDetail()} icon="wysiwyg"></mwc-icon-button>
|
32
|
-
<mwc-icon-button
|
33
|
-
@click=${e => (running ? this.stopScenario(instance) : this.startScenario(instance))}
|
34
|
-
icon=${running ? 'pause' : 'play_arrow'}
|
35
|
-
></mwc-icon-button>
|
32
|
+
<mwc-icon-button @click=${e => (running ? this.stopScenario(instance) : this.startScenario(instance))} icon=${running ? 'pause' : 'play_arrow'}></mwc-icon-button>
|
36
33
|
</div>
|
37
34
|
`;
|
38
35
|
}
|
@@ -75,9 +72,7 @@ let ScenarioInstanceMonitor = class ScenarioInstanceMonitor extends localize(i18
|
|
75
72
|
}
|
76
73
|
async showInstanceDetail() {
|
77
74
|
const { instanceName, scenarioName } = this.instance;
|
78
|
-
openPopup(html `
|
79
|
-
<scenario-instance-view .instanceName=${instanceName} .scenarioName=${scenarioName}></scenario-instance-view>
|
80
|
-
`, {
|
75
|
+
openPopup(html ` <scenario-instance-view .instanceName=${instanceName} .scenarioName=${scenarioName}></scenario-instance-view> `, {
|
81
76
|
size: 'large',
|
82
77
|
title: `${i18next.t('title.scenario-instance')}`
|
83
78
|
});
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"scenario-instance-monitor.js","sourceRoot":"","sources":["../../client/viewparts/scenario-instance-monitor.ts"],"names":[],"mappings":";AAAA,OAAO,qBAAqB,CAAA;AAC5B,OAAO,oBAAoB,CAAA;AAC3B,OAAO,0BAA0B,CAAA;AAEjC,OAAO,GAAG,MAAM,aAAa,CAAA;AAC7B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAS,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AACzC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AACnD,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAEjD,SAAS,mBAAmB,CAAC,KAAK;IAChC,OAAO,KAAK,IAAI,KAAK,KAAK,UAAU,CAAA;AACtC,CAAC;AAGM,IAAM,uBAAuB,GAA7B,MAAM,uBAAwB,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;IA8ExE,MAAM;QACJ,IAAI,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAA;QAC5B,MAAM,EAAE,YAAY,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,GAAG,QAAQ,CAAA;QAC3D,MAAM,EAAE,IAAI,GAAG,CAAC,EAAE,KAAK,GAAG,CAAC,EAAE,IAAI,GAAG,CAAC,EAAE,MAAM,GAAG,CAAC,EAAE,GAAG,QAAQ,IAAI,EAAE,CAAA;QAEpE,MAAM,OAAO,GAAG,mBAAmB,CAAC,KAAK,CAAC,CAAA;QAE1C,OAAO,IAAI,CAAA;kBACG,YAAY;;;gDAGkB,IAAI,sBAAsB,IAAI,CAAC,KAAK;;qBAE/D,IAAI,IAAI,KAAK;;;wBAGV,MAAM;kCACI,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,kBAAkB,EAAE
|
1
|
+
{"version":3,"file":"scenario-instance-monitor.js","sourceRoot":"","sources":["../../client/viewparts/scenario-instance-monitor.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/data-grist'\nimport '@material/mwc-icon'\nimport './scenario-instance-view'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { client } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { notify, openPopup } from '@operato/layout'\nimport { ScrollbarStyles } from '@operato/styles'\n\nfunction IS_SCENARIO_RUNNING(state) {\n return state && state !== 'UNLOADED'\n}\n\n@customElement('scenario-instance-monitor')\nexport class ScenarioInstanceMonitor extends localize(i18next)(LitElement) {\n static styles = [\n ScrollbarStyles,\n css`\n :host {\n display: block;\n overflow: hidden;\n position: relative;\n padding: var(--padding-narrow);\n color: var(--secondary-color);\n }\n\n [running] {\n background-color: lightgreen;\n }\n\n [name] {\n font-size: var(--fontsize-default);\n font-weight: bold;\n }\n\n [progress] {\n display: block;\n position: relative;\n\n width: 100%;\n margin: 2px;\n padding: 2px;\n box-sizing: border-box;\n\n border: var(--border-dark-color);\n border-radius: 10px;\n background-color: var(--theme-white-color);\n }\n [progress-wrap] {\n display: flex;\n flex-direction: row;\n margin: 4px 0;\n }\n\n [running] [progress] {\n background-color: var(--theme-white-color);\n }\n [steps] {\n padding: 0 0 0 var(--padding-narrow);\n }\n\n #progressbar {\n height: 100%;\n text-align: left;\n border-radius: 5px;\n animation: width 1s linear ease-out;\n }\n [buttons] {\n --mdc-icon-button-size: 18px;\n --mdc-icon-size: 18px;\n border-top: var(--border-dark-color);\n padding: var(--padding-narrow) 0 0 0;\n text-align: right;\n }\n [buttons] mwc-icon-button {\n color: var(--primary-color);\n }\n\n @keyframes width {\n 0% {\n width: 0;\n }\n 100% {\n width: auto;\n }\n }\n `\n ]\n\n @property({ type: Object }) instance: any\n @property({ type: String }) color?: string\n\n render() {\n var instance = this.instance\n const { instanceName, progress, message, state } = instance\n const { rate = 0, steps = 0, step = 0, rounds = 0 } = progress || {}\n\n const running = IS_SCENARIO_RUNNING(state)\n\n return html`\n <div name>${instanceName}</div>\n <div progress-wrap>\n <div progress>\n <div id=\"progressbar\" .style=\"width:${rate}%;background-color:${this.color};\"></div>\n </div>\n <div steps>${step}/${steps}</div>\n </div>\n <div buttons>\n <span><strong>${rounds}</strong> round</span>\n <mwc-icon-button @click=${e => this.showInstanceDetail()} icon=\"wysiwyg\"></mwc-icon-button>\n <mwc-icon-button @click=${e => (running ? this.stopScenario(instance) : this.startScenario(instance))} icon=${running ? 'pause' : 'play_arrow'}></mwc-icon-button>\n </div>\n `\n }\n\n async startScenario(instance) {\n var response = await client.mutate({\n mutation: gql`\n mutation ($scenarioName: String!, $instanceName: String) {\n startScenario(scenarioName: $scenarioName, instanceName: $instanceName) {\n state\n }\n }\n `,\n variables: {\n scenarioName: instance.scenarioName,\n instanceName: instance.instanceName\n }\n })\n\n notify({\n level: 'info',\n message: `${IS_SCENARIO_RUNNING(response.data.startScenario.state) ? 'success' : 'fail'} to start scenario : ${instance.scenarioName}`\n })\n }\n\n async stopScenario(instance) {\n var response = await client.mutate({\n mutation: gql`\n mutation ($instanceName: String!) {\n stopScenario(instanceName: $instanceName) {\n state\n }\n }\n `,\n variables: {\n instanceName: instance.instanceName\n }\n })\n\n notify({\n level: 'info',\n message: `${IS_SCENARIO_RUNNING(response.data.stopScenario.state) ? 'fail' : 'success'} to stop instance : ${instance.instanceName}`\n })\n }\n\n async showInstanceDetail() {\n const { instanceName, scenarioName } = this.instance\n openPopup(html` <scenario-instance-view .instanceName=${instanceName} .scenarioName=${scenarioName}></scenario-instance-view> `, {\n size: 'large',\n title: `${i18next.t('title.scenario-instance')}`\n })\n }\n}\n"]}
|
@@ -49,7 +49,7 @@ let ScenarioMonitor = class ScenarioMonitor extends localize(i18next)(LitElement
|
|
49
49
|
}
|
50
50
|
renderButtons(scenario) {
|
51
51
|
const instances = scenario.instances || [];
|
52
|
-
const scenarioInstance = instances.find(instance => instance.instanceName == scenario.name);
|
52
|
+
const scenarioInstance = instances.find(instance => instance.instanceName == scenario.name) || null;
|
53
53
|
return html `
|
54
54
|
<div buttons ?detail=${this.mode == 'detail'}>
|
55
55
|
<mwc-icon-button @click=${e => this.popupLogView(scenario)} icon="text_snippet"></mwc-icon-button>
|
@@ -60,7 +60,7 @@ let ScenarioMonitor = class ScenarioMonitor extends localize(i18next)(LitElement
|
|
60
60
|
`;
|
61
61
|
}
|
62
62
|
async popupLogView(scenario) {
|
63
|
-
openPopup(html ` <scenario-instance-log-view .scenarioName=${scenario.name}></scenario-instance-log-view> `, {
|
63
|
+
const popup = openPopup(html ` <scenario-instance-log-view .scenarioName=${scenario.name} @start=${() => this.startScenario(scenario)} startable></scenario-instance-log-view> `, {
|
64
64
|
size: 'large',
|
65
65
|
title: `${i18next.t('title.scenario-log')} (${scenario.name})`
|
66
66
|
});
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"scenario-monitor.js","sourceRoot":"","sources":["../../client/viewparts/scenario-monitor.ts"],"names":[],"mappings":";AAAA,OAAO,qBAAqB,CAAA;AAC5B,OAAO,2BAA2B,CAAA;AAClC,OAAO,6BAA6B,CAAA;AAEpC,OAAO,GAAG,MAAM,aAAa,CAAA;AAC7B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAS,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AACzC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AACnD,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAEjD,SAAS,mBAAmB,CAAC,KAAK;IAChC,OAAO,KAAK,IAAI,KAAK,KAAK,UAAU,CAAA;AACtC,CAAC;AAGM,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;IAmKhE,MAAM;QACJ,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,IAAI,EAAE,CAAA;QACpC,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAA;QAEtB,MAAM,EAAE,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,QAAQ,CAAA;QAC3D,MAAM,SAAS,GAAG,QAAQ,CAAC,SAAS,IAAI,EAAE,CAAA;QAE1C,OAAO,IAAI,CAAA;;iCAEkB,IAAI;oBACjB,IAAI;YACZ,WAAW;kBACL,SAAS,CAAC,MAAM;;;gDAGc,KAAK;iBACpC,QAAQ;;UAEf,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC;;;QAG9B,IAAI,KAAK,QAAQ;YACjB,CAAC,CAAC,IAAI,CAAA;;gBAEE,SAAS,CAAC,GAAG,CACb,QAAQ,CAAC,EAAE,CAAC,IAAI,CAAA;6CACa,KAAK,qBAAqB,KAAK;;2DAEjB,QAAQ,WAAW,KAAK;;iBAElE,CACF;;cAED,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC;WAC/B;YACH,CAAC,CAAC,IAAI,CAAA,EAAE;KACX,CAAA;IACH,CAAC;IAED,aAAa,CAAC,QAAQ;QACpB,MAAM,SAAS,GAAG,QAAQ,CAAC,SAAS,IAAI,EAAE,CAAA;QAC1C,MAAM,gBAAgB,GAAG,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,QAAQ,CAAC,YAAY,IAAI,QAAQ,CAAC,IAAI,CAAC,CAAA;QAE3F,OAAO,IAAI,CAAA;6BACc,IAAI,CAAC,IAAI,IAAI,QAAQ;kCAChB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC;UACxD,CAAC,gBAAgB;YACjB,CAAC,CAAC,IAAI,CAAA,uDAAuD,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,qBAAqB;YACnH,CAAC,CAAC,IAAI,CAAA,wDAAwD,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,2BAA2B;;KAE9H,CAAA;IACH,CAAC;IAED,KAAK,CAAC,YAAY,CAAC,QAAQ;QACzB,SAAS,CAAC,IAAI,CAAA,8CAA8C,QAAQ,CAAC,IAAI,iCAAiC,EAAE;YAC1G,IAAI,EAAE,OAAO;YACb,KAAK,EAAE,GAAG,OAAO,CAAC,CAAC,CAAC,oBAAoB,CAAC,KAAK,QAAQ,CAAC,IAAI,GAAG;SAC/D,CAAC,CAAA;IACJ,CAAC;IAED,KAAK,CAAC,aAAa,CAAC,QAAQ;QAC1B,IAAI,QAAQ,GAAG,MAAM,MAAM,CAAC,MAAM,CAAC;YACjC,QAAQ,EAAE,GAAG,CAAA;;;;;;OAMZ;YACD,SAAS,EAAE;gBACT,YAAY,EAAE,QAAQ,CAAC,IAAI;aAC5B;SACF,CAAC,CAAA;QAEF,MAAM,CAAC;YACL,KAAK,EAAE,MAAM;YACb,OAAO,EAAE,GAAG,CAAC,mBAAmB,CAAC,QAAQ,CAAC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,wBAAwB,QAAQ,CAAC,IAAI,EAAE;SAChI,CAAC,CAAA;IACJ,CAAC;IAED,KAAK,CAAC,YAAY,CAAC,QAAQ;QACzB,IAAI,QAAQ,GAAG,MAAM,MAAM,CAAC,MAAM,CAAC;YACjC,QAAQ,EAAE,GAAG,CAAA;;;;;;OAMZ;YACD,SAAS,EAAE;gBACT,YAAY,EAAE,QAAQ,CAAC,IAAI;aAC5B;SACF,CAAC,CAAA;QAEF,MAAM,CAAC;YACL,KAAK,EAAE,MAAM;YACb,OAAO,EAAE,GAAG,mBAAmB,CAAC,QAAQ,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,uBAAuB,QAAQ,CAAC,IAAI,EAAE;SAC7H,CAAC,CAAA;IACJ,CAAC;;AApQM,sBAAM,GAAG;IACd,eAAe;IACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA0JF;CACF,CAAA;AAED;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;iDAAc;AACzC;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;6CAAc;AAjK9B,eAAe;IAD3B,aAAa,CAAC,kBAAkB,CAAC;GACrB,eAAe,CAsQ3B;SAtQY,eAAe","sourcesContent":["import '@operato/data-grist'\nimport '@material/mwc-icon-button'\nimport './scenario-instance-monitor'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { client } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { notify, openPopup } from '@operato/layout'\nimport { ScrollbarStyles } from '@operato/styles'\n\nfunction IS_SCENARIO_RUNNING(state) {\n return state && state !== 'UNLOADED'\n}\n\n@customElement('scenario-monitor')\nexport class ScenarioMonitor extends localize(i18next)(LitElement) {\n static styles = [\n ScrollbarStyles,\n css`\n :host {\n display: flex;\n flex-direction: row;\n\n border: var(--border-dark-color);\n background-color: var(--theme-white-color);\n box-shadow: var(--box-shadow);\n border-radius: var(--border-radius);\n position: relative;\n overflow: hidden;\n }\n\n [desc] {\n position: relative;\n display: flex;\n flex-direction: column;\n padding: var(--padding-default);\n color: var(--secondary-color);\n font-size: var(--fontsize-small);\n width: 100%;\n box-sizing: border-box;\n }\n\n [desc] [detail-info] {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n width: calc(100% - 25px);\n height: 45px;\n }\n\n [desc] strong {\n display: block;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n font-size: var(--fontsize-large);\n }\n\n [desc] span {\n display: block;\n position: absolute;\n top: 0px;\n right: var(--padding-default);\n font-size: 40px;\n font-weight: bold;\n text-align: right;\n }\n\n [desc] [schedule] * {\n vertical-align: middle;\n display: inline;\n }\n\n [desc] [schedule] {\n background-color: #f1f1f1;\n border-radius: 20px;\n margin: var(--margin-default) 0;\n padding: var(--padding-narrow);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n font-size: 12px;\n line-height: 8px;\n }\n\n [buttons] {\n --mdc-icon-button-size: 24px;\n --mdc-icon-size: 24px;\n border-top: var(--border-dark-color);\n padding: var(--padding-narrow) 0 0 0;\n text-align: right;\n }\n\n [buttons] mwc-icon-button {\n color: var(--primary-color);\n }\n\n [buttons][detail] {\n display: flex;\n flex-direction: column-reverse;\n margin-bottom: auto;\n }\n\n [desc] mwc-icon {\n border-radius: 50%;\n color: var(--theme-white-color);\n font-size: 18px;\n }\n\n :host([mode='detail']) [schedule] {\n margin: var(--margin-default) 0 0 0;\n }\n\n :host([mode='detail']) [desc] {\n flex: unset;\n width: 200px;\n }\n\n :host([mode='detail']) [desc] [buttons] {\n display: none;\n }\n\n :host([mode='detail']) [buttons] {\n border-top: none;\n padding: var(--padding-default);\n }\n\n ul {\n flex: 1;\n\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n list-style: none;\n margin: 0;\n padding: 0;\n }\n\n ul > li {\n position: relative;\n margin: var(--margin-default);\n min-width: 140px;\n border: 1px solid black;\n border-radius: var(--border-radius);\n font-size: 12px;\n }\n\n li span {\n display: block;\n position: absolute;\n width: 100%;\n height: 100%;\n background-color: rgba(255, 255, 255, 0.8);\n }\n\n @media screen and (max-width: 480px) {\n :host {\n margin: var(--margin-narrow);\n }\n\n [desc] {\n padding: var(--padding-narrow);\n }\n\n [desc] [detail-info] {\n height: 38px;\n }\n\n [desc] span {\n font-size: 36px;\n }\n }\n `\n ]\n\n @property({ type: Object }) scenario: any\n @property({ type: String }) mode?: string\n\n render() {\n const scenario = this.scenario || {}\n const mode = this.mode\n\n const { id, name, description, schedule, color } = scenario\n const instances = scenario.instances || []\n\n return html`\n <div desc>\n <div detail-info title=${name}>\n <strong>${name}</strong>\n ${description}\n <span>${instances.length}</span>\n </div>\n <div schedule>\n <mwc-icon .style=\"background-color: ${color};\">schedule</mwc-icon>\n <pre>${schedule}</pre>\n </div>\n ${this.renderButtons(scenario)}\n </div>\n\n ${mode === 'detail'\n ? html`\n <ul>\n ${instances.map(\n instance => html`\n <li .style=\"border-color:${color};background-color:${color}\">\n <span></span>\n <scenario-instance-monitor .instance=${instance} .color=${color}></scenario-instance-monitor>\n </li>\n `\n )}\n </ul>\n ${this.renderButtons(scenario)}\n `\n : html``}\n `\n }\n\n renderButtons(scenario) {\n const instances = scenario.instances || []\n const scenarioInstance = instances.find(instance => instance.instanceName == scenario.name)\n\n return html`\n <div buttons ?detail=${this.mode == 'detail'}>\n <mwc-icon-button @click=${e => this.popupLogView(scenario)} icon=\"text_snippet\"></mwc-icon-button>\n ${!scenarioInstance\n ? html` <mwc-icon-button icon=\"play_circle_outline\" @click=${e => this.startScenario(scenario)}></mwc-icon-button>`\n : html` <mwc-icon-button icon=\"pause_circle_outline\" @click=${e => this.stopScenario(scenario)} stop></mwc-icon-button> `}\n </div>\n `\n }\n\n async popupLogView(scenario) {\n openPopup(html` <scenario-instance-log-view .scenarioName=${scenario.name}></scenario-instance-log-view> `, {\n size: 'large',\n title: `${i18next.t('title.scenario-log')} (${scenario.name})`\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 '@operato/data-grist'\nimport '@material/mwc-icon-button'\nimport './scenario-instance-monitor'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport { client } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { notify, openPopup } from '@operato/layout'\nimport { ScrollbarStyles } from '@operato/styles'\n\nfunction IS_SCENARIO_RUNNING(state) {\n return state && state !== 'UNLOADED'\n}\n\n@customElement('scenario-monitor')\nexport class ScenarioMonitor extends localize(i18next)(LitElement) {\n static styles = [\n ScrollbarStyles,\n css`\n :host {\n display: flex;\n flex-direction: row;\n\n border: var(--border-dark-color);\n background-color: var(--theme-white-color);\n box-shadow: var(--box-shadow);\n border-radius: var(--border-radius);\n position: relative;\n overflow: hidden;\n }\n\n [desc] {\n position: relative;\n display: flex;\n flex-direction: column;\n padding: var(--padding-default);\n color: var(--secondary-color);\n font-size: var(--fontsize-small);\n width: 100%;\n box-sizing: border-box;\n }\n\n [desc] [detail-info] {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n width: calc(100% - 25px);\n height: 45px;\n }\n\n [desc] strong {\n display: block;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n font-size: var(--fontsize-large);\n }\n\n [desc] span {\n display: block;\n position: absolute;\n top: 0px;\n right: var(--padding-default);\n font-size: 40px;\n font-weight: bold;\n text-align: right;\n }\n\n [desc] [schedule] * {\n vertical-align: middle;\n display: inline;\n }\n\n [desc] [schedule] {\n background-color: #f1f1f1;\n border-radius: 20px;\n margin: var(--margin-default) 0;\n padding: var(--padding-narrow);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n font-size: 12px;\n line-height: 8px;\n }\n\n [buttons] {\n --mdc-icon-button-size: 24px;\n --mdc-icon-size: 24px;\n border-top: var(--border-dark-color);\n padding: var(--padding-narrow) 0 0 0;\n text-align: right;\n }\n\n [buttons] mwc-icon-button {\n color: var(--primary-color);\n }\n\n [buttons][detail] {\n display: flex;\n flex-direction: column-reverse;\n margin-bottom: auto;\n }\n\n [desc] mwc-icon {\n border-radius: 50%;\n color: var(--theme-white-color);\n font-size: 18px;\n }\n\n :host([mode='detail']) [schedule] {\n margin: var(--margin-default) 0 0 0;\n }\n\n :host([mode='detail']) [desc] {\n flex: unset;\n width: 200px;\n }\n\n :host([mode='detail']) [desc] [buttons] {\n display: none;\n }\n\n :host([mode='detail']) [buttons] {\n border-top: none;\n padding: var(--padding-default);\n }\n\n ul {\n flex: 1;\n\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n list-style: none;\n margin: 0;\n padding: 0;\n }\n\n ul > li {\n position: relative;\n margin: var(--margin-default);\n min-width: 140px;\n border: 1px solid black;\n border-radius: var(--border-radius);\n font-size: 12px;\n }\n\n li span {\n display: block;\n position: absolute;\n width: 100%;\n height: 100%;\n background-color: rgba(255, 255, 255, 0.8);\n }\n\n @media screen and (max-width: 480px) {\n :host {\n margin: var(--margin-narrow);\n }\n\n [desc] {\n padding: var(--padding-narrow);\n }\n\n [desc] [detail-info] {\n height: 38px;\n }\n\n [desc] span {\n font-size: 36px;\n }\n }\n `\n ]\n\n @property({ type: Object }) scenario: any\n @property({ type: String }) mode?: string\n\n render() {\n const scenario = this.scenario || {}\n const mode = this.mode\n\n const { id, name, description, schedule, color } = scenario\n const instances = scenario.instances || []\n\n return html`\n <div desc>\n <div detail-info title=${name}>\n <strong>${name}</strong>\n ${description}\n <span>${instances.length}</span>\n </div>\n <div schedule>\n <mwc-icon .style=\"background-color: ${color};\">schedule</mwc-icon>\n <pre>${schedule}</pre>\n </div>\n ${this.renderButtons(scenario)}\n </div>\n\n ${mode === 'detail'\n ? html`\n <ul>\n ${instances.map(\n instance => html`\n <li .style=\"border-color:${color};background-color:${color}\">\n <span></span>\n <scenario-instance-monitor .instance=${instance} .color=${color}></scenario-instance-monitor>\n </li>\n `\n )}\n </ul>\n ${this.renderButtons(scenario)}\n `\n : html``}\n `\n }\n\n renderButtons(scenario) {\n const instances = scenario.instances || []\n const scenarioInstance = instances.find(instance => instance.instanceName == scenario.name) || null\n\n return html`\n <div buttons ?detail=${this.mode == 'detail'}>\n <mwc-icon-button @click=${e => this.popupLogView(scenario)} icon=\"text_snippet\"></mwc-icon-button>\n ${!scenarioInstance\n ? html` <mwc-icon-button icon=\"play_circle_outline\" @click=${e => this.startScenario(scenario)}></mwc-icon-button>`\n : html` <mwc-icon-button icon=\"pause_circle_outline\" @click=${e => this.stopScenario(scenario)} stop></mwc-icon-button> `}\n </div>\n `\n }\n\n async popupLogView(scenario) {\n const popup = openPopup(\n html` <scenario-instance-log-view .scenarioName=${scenario.name} @start=${() => this.startScenario(scenario)} startable></scenario-instance-log-view> `,\n {\n size: 'large',\n title: `${i18next.t('title.scenario-log')} (${scenario.name})`\n }\n )\n }\n\n async startScenario(scenario) {\n var response = await client.mutate({\n mutation: gql`\n mutation ($scenarioName: String!) {\n startScenario(scenarioName: $scenarioName) {\n state\n }\n }\n `,\n variables: {\n scenarioName: scenario.name\n }\n })\n\n notify({\n level: 'info',\n message: `${!IS_SCENARIO_RUNNING(response.data.startScenario.state) ? 'fail' : 'success'} to start instance : ${scenario.name}`\n })\n }\n\n async stopScenario(scenario) {\n var response = await client.mutate({\n mutation: gql`\n mutation ($instanceName: String!) {\n stopScenario(instanceName: $instanceName) {\n state\n }\n }\n `,\n variables: {\n instanceName: scenario.name\n }\n })\n\n notify({\n level: 'info',\n message: `${IS_SCENARIO_RUNNING(response.data.stopScenario.state) ? 'fail' : 'success'} to stop instance : ${scenario.name}`\n })\n }\n}\n"]}
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@things-factory/integration-ui",
|
3
|
-
"version": "6.2.
|
3
|
+
"version": "6.2.133",
|
4
4
|
"main": "dist-server/index.js",
|
5
5
|
"browser": "dist-client/index.js",
|
6
6
|
"things-factory": true,
|
@@ -37,11 +37,11 @@
|
|
37
37
|
"@operato/property-editor": "^1.0.0",
|
38
38
|
"@operato/styles": "^1.0.0",
|
39
39
|
"@operato/utils": "^1.0.1",
|
40
|
-
"@things-factory/export-base": "^6.2.
|
41
|
-
"@things-factory/import-base": "^6.2.
|
42
|
-
"@things-factory/integration-base": "^6.2.
|
40
|
+
"@things-factory/export-base": "^6.2.133",
|
41
|
+
"@things-factory/import-base": "^6.2.133",
|
42
|
+
"@things-factory/integration-base": "^6.2.133",
|
43
43
|
"d3": "^7.8.5",
|
44
44
|
"moment-timezone": "^0.5.40"
|
45
45
|
},
|
46
|
-
"gitHead": "
|
46
|
+
"gitHead": "3a8ec24c20c710cb36bdac0e34394f08d5169f92"
|
47
47
|
}
|