@things-factory/integration-ui 10.0.6 → 10.0.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/client/viewparts/monitoring-summary.ts +6 -3
- package/client/viewparts/scenario-instance-monitor.ts +2 -1
- package/client/viewparts/scenario-monitor.ts +4 -2
- package/dist-client/tsconfig.tsbuildinfo +1 -1
- package/dist-client/viewparts/monitoring-summary.js +6 -3
- package/dist-client/viewparts/monitoring-summary.js.map +1 -1
- package/dist-client/viewparts/scenario-instance-monitor.js +2 -1
- package/dist-client/viewparts/scenario-instance-monitor.js.map +1 -1
- package/dist-client/viewparts/scenario-monitor.js +4 -2
- package/dist-client/viewparts/scenario-monitor.js.map +1 -1
- package/package.json +6 -6
|
@@ -14,9 +14,11 @@ let IntegrationMonitoringSummary = class IntegrationMonitoringSummary extends lo
|
|
|
14
14
|
flex-direction: row;
|
|
15
15
|
|
|
16
16
|
overflow: hidden;
|
|
17
|
-
|
|
17
|
+
/* 요약 타일 줄은 큰 면이므로 강조 역할(secondary)이 아니라 표면 계단을 쓴다.
|
|
18
|
+
다크에서 secondary 는 밝아져 화면 상단이 갈색 띠가 됐다. */
|
|
19
|
+
background-color: var(--md-sys-color-surface-container);
|
|
18
20
|
border-radius: var(--border-radius);
|
|
19
|
-
color: var(--md-sys-color-on-
|
|
21
|
+
color: var(--md-sys-color-on-surface-variant);
|
|
20
22
|
}
|
|
21
23
|
|
|
22
24
|
[card] {
|
|
@@ -31,7 +33,8 @@ let IntegrationMonitoringSummary = class IntegrationMonitoringSummary extends lo
|
|
|
31
33
|
strong {
|
|
32
34
|
font-size: 36px;
|
|
33
35
|
line-height: 30px;
|
|
34
|
-
|
|
36
|
+
/* 배경이 표면색이므로 짝이 되는 글자색을 쓴다. on-primary 는 primary 위에 놓는 색이다. */
|
|
37
|
+
color: var(--md-sys-color-on-surface);
|
|
35
38
|
}
|
|
36
39
|
span {
|
|
37
40
|
display: block;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"monitoring-summary.js","sourceRoot":"","sources":["../../client/viewparts/monitoring-summary.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,qBAAqB,CAAA;AAE5B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAS,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAG1C,IAAM,4BAA4B,GAAlC,MAAM,4BAA6B,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;aACtE,WAAM,GAAG;QACd,eAAe;QACf,GAAG,CAAA
|
|
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 /* 요약 타일 줄은 큰 면이므로 강조 역할(secondary)이 아니라 표면 계단을 쓴다.\n 다크에서 secondary 는 밝아져 화면 상단이 갈색 띠가 됐다. */\n background-color: var(--md-sys-color-surface-container);\n border-radius: var(--border-radius);\n color: var(--md-sys-color-on-surface-variant);\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 /* 배경이 표면색이므로 짝이 되는 글자색을 쓴다. on-primary 는 primary 위에 놓는 색이다. */\n color: var(--md-sys-color-on-surface);\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"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"scenario-instance-monitor.js","sourceRoot":"","sources":["../../client/viewparts/scenario-instance-monitor.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,qBAAqB,CAAA;AAC5B,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,uBAAuB,GAA7B,MAAM,uBAAwB,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;aACjE,WAAM,GAAG;QACd,eAAe;QACf,GAAG,CAAA
|
|
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.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 { 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 /* lightgreen 하드코딩 → 상태 색(가동) 역할 */\n background-color: var(--status-success-color, #35a24a);\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 display: flex;\n flex-direction: row-reverse;\n --md-icon-size: 18px;\n\n border-top: var(--border-dim-color);\n padding: var(--spacing-medium) 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 <md-icon @click=${e => (running ? this.stopScenario(instance) : this.startScenario(instance))}\n >${running ? 'pause' : 'play_arrow'}</md-icon\n >\n <md-icon @click=${e => this.showInstanceDetail()}>wysiwyg</md-icon>\n <span><strong>${rounds}</strong> round</span>\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"]}
|
|
@@ -73,7 +73,8 @@ let ScenarioMonitor = class ScenarioMonitor extends localize(i18next)(LitElement
|
|
|
73
73
|
}
|
|
74
74
|
|
|
75
75
|
[desc] [schedule] {
|
|
76
|
-
|
|
76
|
+
/* #f1f1f1 은 다크 카드 안에서 흰 알약처럼 남았다 */
|
|
77
|
+
background-color: var(--md-sys-color-surface-container-highest);
|
|
77
78
|
border-radius: 20px;
|
|
78
79
|
margin: var(--spacing-medium) 0;
|
|
79
80
|
padding: var(--spacing-small);
|
|
@@ -158,7 +159,8 @@ let ScenarioMonitor = class ScenarioMonitor extends localize(i18next)(LitElement
|
|
|
158
159
|
position: absolute;
|
|
159
160
|
width: 100%;
|
|
160
161
|
height: 100%;
|
|
161
|
-
|
|
162
|
+
/* 흰 반투명 덮개 → 현재 표면에서 파생. 다크에서 밝은 판이 되지 않게. */
|
|
163
|
+
background-color: color-mix(in srgb, var(--md-sys-color-surface) 85%, transparent);
|
|
162
164
|
}
|
|
163
165
|
|
|
164
166
|
pre {
|
|
@@ -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.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement, nothing } from 'lit'\nimport { customElement, property } 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: flex;\n align-items: center;\n gap: var(--spacing-small);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n font-size: var(--fontsize-large);\n }\n\n [desc] span {\n display: block;\n position: absolute;\n top: 0px;\n right: var(--spacing-medium);\n font-size: 40px;\n font-weight: bold;\n text-align: right;\n }\n\n [desc] [schedule] * {\n vertical-align: middle;\n display: inline-block;\n }\n\n [desc] [schedule] {\n background-color: #f1f1f1;\n border-radius: 20px;\n margin: var(--spacing-medium) 0;\n padding: var(--spacing-small);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n font-size: 12px;\n line-height: 8px;\n }\n\n [desc] md-icon {\n --md-icon-size: 18px;\n border-radius: 50%;\n color: var(--md-sys-color-on-primary);\n }\n\n [desc] strong md-icon {\n --md-icon-size: 16px;\n color: var(--md-sys-color-primary);\n }\n\n [buttons] {\n display: flex;\n flex-direction: row-reverse;\n border-top: var(--border-dim-color);\n padding: var(--spacing-small) 0 0 0;\n }\n\n [buttons] md-icon {\n --md-icon-size: 22px;\n color: var(--md-sys-color-primary);\n }\n\n [buttons][detail] {\n display: flex;\n flex-direction: column-reverse;\n margin-bottom: auto;\n }\n\n :host([mode='detail']) [schedule] {\n margin: var(--spacing-medium) 0 0 0;\n }\n\n :host([mode='detail']) [desc] {\n flex: unset;\n width: 200px;\n }\n\n :host([mode='detail']) [desc] [buttons] {\n display: none;\n }\n\n :host([mode='detail']) [buttons] {\n border-top: none;\n padding: var(--spacing-medium);\n }\n\n ul {\n flex: 1;\n\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n list-style: none;\n margin: 0;\n padding: 0;\n }\n\n ul > li {\n position: relative;\n margin: var(--spacing-medium);\n min-width: 140px;\n border: 1px solid black;\n border-radius: var(--border-radius);\n font-size: 12px;\n box-sizing: border-box;\n overflow: hidden;\n }\n\n li span {\n display: block;\n position: absolute;\n width: 100%;\n height: 100%;\n background-color: rgba(255, 255, 255, 0.8);\n }\n\n pre {\n margin: var(--spacing-medium);\n }\n\n @media screen and (max-width: 480px) {\n :host {\n margin: var(--spacing-small);\n }\n\n [desc] {\n padding: var(--spacing-small);\n }\n\n [desc] [detail-info] {\n height: 38px;\n }\n\n [desc] span {\n font-size: 36px;\n }\n }\n `\n ]\n\n @property({ type: Object }) scenario: any\n @property({ type: String }) mode?: string\n @property({ type: Boolean, attribute: 'is-parent' }) isParent?: boolean\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\n >${name} ${this.isParent ? html`<md-icon title=\"inherited\">arrow_downward</md-icon>` : nothing}</strong\n >\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`\n <md-icon\n title=${i18next.t('button.run released version')}\n @click=${e => this.startScenario(scenario, 'released')}\n >play_circle</md-icon\n >\n <md-icon\n title=${i18next.t('button.run draft for debugging')}\n @click=${e => this.startScenario(scenario, 'draft')}\n debug\n >bug_report</md-icon\n >\n `\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=${(e: CustomEvent) => this.startScenario(scenario, e.detail?.mode || 'released')}\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, mode: string = 'released') {\n var response = await client.mutate({\n mutation: gql`\n mutation ($scenarioName: String!, $mode: String) {\n startScenario(scenarioName: $scenarioName, mode: $mode) {\n state\n }\n }\n `,\n variables: {\n scenarioName: scenario.name,\n mode\n }\n })\n\n notify({\n level: 'info',\n message: `${!IS_SCENARIO_RUNNING(response.data.startScenario.state) ? 'fail' : 'success'} to start instance : ${scenario.name} (${mode})`\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":";AAAA,OAAO,4BAA4B,CAAA;AAEnC,OAAO,qBAAqB,CAAA;AAC5B,OAAO,gCAAgC,CAAA;AAEvC,OAAO,GAAG,MAAM,aAAa,CAAA;AAC7B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAA;AACpD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,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;aACzD,WAAM,GAAG;QACd,eAAe;QACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAyKF;KACF,AA5KY,CA4KZ;IAMD,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;;eAEtB,IAAI,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAA,qDAAqD,CAAC,CAAC,CAAC,OAAO;;YAE9F,WAAW;kBACL,SAAS,CAAC,MAAM;;;8CAGY,KAAK;iBAClC,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;4CACY,KAAK,qBAAqB,KAAK;;2DAEhB,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,IAAI,IAAI,CAAA;QAEnG,OAAO,IAAI,CAAA;6BACc,IAAI,CAAC,IAAI,IAAI,QAAQ;0BACxB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC;UAChD,CAAC,gBAAgB;YACjB,CAAC,CAAC,IAAI,CAAA;;wBAEQ,OAAO,CAAC,CAAC,CAAC,6BAA6B,CAAC;yBACvC,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,QAAQ,EAAE,UAAU,CAAC;;;;wBAI9C,OAAO,CAAC,CAAC,CAAC,gCAAgC,CAAC;yBAC1C,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,QAAQ,EAAE,OAAO,CAAC;;;;aAItD;YACH,CAAC,CAAC,IAAI,CAAA,oBAAoB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,+BAA+B;;KAE9F,CAAA;IACH,CAAC;IAED,KAAK,CAAC,YAAY,CAAC,QAAQ;QACzB,MAAM,KAAK,GAAG,SAAS,CACrB,IAAI,CAAA;;0BAEgB,QAAQ,CAAC,IAAI;mBACpB,CAAC,CAAc,EAAE,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,QAAQ,EAAE,CAAC,CAAC,MAAM,EAAE,IAAI,IAAI,UAAU,CAAC;;;OAG1F,EACD;YACE,IAAI,EAAE,OAAO;YACb,KAAK,EAAE,GAAG,OAAO,CAAC,CAAC,CAAC,oBAAoB,CAAC,KAAK,QAAQ,CAAC,IAAI,GAAG;SAC/D,CACF,CAAA;IACH,CAAC;IAED,KAAK,CAAC,aAAa,CAAC,QAAQ,EAAE,OAAe,UAAU;QACrD,IAAI,QAAQ,GAAG,MAAM,MAAM,CAAC,MAAM,CAAC;YACjC,QAAQ,EAAE,GAAG,CAAA;;;;;;OAMZ;YACD,SAAS,EAAE;gBACT,YAAY,EAAE,QAAQ,CAAC,IAAI;gBAC3B,IAAI;aACL;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,KAAK,IAAI,GAAG;SAC1I,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;;AA9H2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;iDAAc;AACb;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;6CAAc;AACY;IAApD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;;iDAAmB;AAjL5D,eAAe;IAD3B,aAAa,CAAC,kBAAkB,CAAC;GACrB,eAAe,CA8S3B","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport '@operato/data-grist'\nimport './scenario-instance-monitor.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement, nothing } from 'lit'\nimport { customElement, property } 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: flex;\n align-items: center;\n gap: var(--spacing-small);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n font-size: var(--fontsize-large);\n }\n\n [desc] span {\n display: block;\n position: absolute;\n top: 0px;\n right: var(--spacing-medium);\n font-size: 40px;\n font-weight: bold;\n text-align: right;\n }\n\n [desc] [schedule] * {\n vertical-align: middle;\n display: inline-block;\n }\n\n [desc] [schedule] {\n /* #f1f1f1 은 다크 카드 안에서 흰 알약처럼 남았다 */\n background-color: var(--md-sys-color-surface-container-highest);\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 [desc] strong md-icon {\n --md-icon-size: 16px;\n color: var(--md-sys-color-primary);\n }\n\n [buttons] {\n display: flex;\n flex-direction: row-reverse;\n border-top: var(--border-dim-color);\n padding: var(--spacing-small) 0 0 0;\n }\n\n [buttons] md-icon {\n --md-icon-size: 22px;\n color: var(--md-sys-color-primary);\n }\n\n [buttons][detail] {\n display: flex;\n flex-direction: column-reverse;\n margin-bottom: auto;\n }\n\n :host([mode='detail']) [schedule] {\n margin: var(--spacing-medium) 0 0 0;\n }\n\n :host([mode='detail']) [desc] {\n flex: unset;\n width: 200px;\n }\n\n :host([mode='detail']) [desc] [buttons] {\n display: none;\n }\n\n :host([mode='detail']) [buttons] {\n border-top: none;\n padding: var(--spacing-medium);\n }\n\n ul {\n flex: 1;\n\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n list-style: none;\n margin: 0;\n padding: 0;\n }\n\n ul > li {\n position: relative;\n margin: var(--spacing-medium);\n min-width: 140px;\n border: 1px solid black;\n border-radius: var(--border-radius);\n font-size: 12px;\n box-sizing: border-box;\n overflow: hidden;\n }\n\n li span {\n display: block;\n position: absolute;\n width: 100%;\n height: 100%;\n /* 흰 반투명 덮개 → 현재 표면에서 파생. 다크에서 밝은 판이 되지 않게. */\n background-color: color-mix(in srgb, var(--md-sys-color-surface) 85%, transparent);\n }\n\n pre {\n margin: var(--spacing-medium);\n }\n\n @media screen and (max-width: 480px) {\n :host {\n margin: var(--spacing-small);\n }\n\n [desc] {\n padding: var(--spacing-small);\n }\n\n [desc] [detail-info] {\n height: 38px;\n }\n\n [desc] span {\n font-size: 36px;\n }\n }\n `\n ]\n\n @property({ type: Object }) scenario: any\n @property({ type: String }) mode?: string\n @property({ type: Boolean, attribute: 'is-parent' }) isParent?: boolean\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\n >${name} ${this.isParent ? html`<md-icon title=\"inherited\">arrow_downward</md-icon>` : nothing}</strong\n >\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`\n <md-icon\n title=${i18next.t('button.run released version')}\n @click=${e => this.startScenario(scenario, 'released')}\n >play_circle</md-icon\n >\n <md-icon\n title=${i18next.t('button.run draft for debugging')}\n @click=${e => this.startScenario(scenario, 'draft')}\n debug\n >bug_report</md-icon\n >\n `\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=${(e: CustomEvent) => this.startScenario(scenario, e.detail?.mode || 'released')}\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, mode: string = 'released') {\n var response = await client.mutate({\n mutation: gql`\n mutation ($scenarioName: String!, $mode: String) {\n startScenario(scenarioName: $scenarioName, mode: $mode) {\n state\n }\n }\n `,\n variables: {\n scenarioName: scenario.name,\n mode\n }\n })\n\n notify({\n level: 'info',\n message: `${!IS_SCENARIO_RUNNING(response.data.startScenario.state) ? 'fail' : 'success'} to start instance : ${scenario.name} (${mode})`\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": "10.0.
|
|
3
|
+
"version": "10.0.8",
|
|
4
4
|
"main": "dist-server/index.js",
|
|
5
5
|
"browser": "dist-client/index.js",
|
|
6
6
|
"things-factory": true,
|
|
@@ -39,11 +39,11 @@
|
|
|
39
39
|
"@operato/property-editor": "^10.0.0",
|
|
40
40
|
"@operato/styles": "^10.0.0",
|
|
41
41
|
"@operato/utils": "^10.0.0",
|
|
42
|
-
"@things-factory/export-base": "^10.0.
|
|
43
|
-
"@things-factory/import-base": "^10.0.
|
|
44
|
-
"@things-factory/integration-base": "^10.0.
|
|
45
|
-
"@things-factory/personalization": "^10.0.
|
|
42
|
+
"@things-factory/export-base": "^10.0.8",
|
|
43
|
+
"@things-factory/import-base": "^10.0.8",
|
|
44
|
+
"@things-factory/integration-base": "^10.0.8",
|
|
45
|
+
"@things-factory/personalization": "^10.0.8",
|
|
46
46
|
"d3": "^7.8.5"
|
|
47
47
|
},
|
|
48
|
-
"gitHead": "
|
|
48
|
+
"gitHead": "4a5a29c9c4a8a3e04fd67a5e5a11a42f0131ad4b"
|
|
49
49
|
}
|