@things-factory/integration-ui 7.0.0-alpha.7 → 7.0.0-alpha.9

package/client/viewparts/scenario-instance-log-view.ts

@@ -1,5 +1,8 @@
+import '@material/mwc-fab'
+
 import gql from 'graphql-tag'
-import { css, html, LitElement } from 'lit'
+
+import { css, html, LitElement, nothing } from 'lit'
 import { customElement, property, query } from 'lit/decorators.js'
 import { connect } from 'pwa-helpers/connect-mixin'
 
@@ -44,12 +47,20 @@ export class ScenarioInstanceLogView extends connect(store)(LitElement) {
       span {
         color: var(--secondary-text-color);
       }
+
+      #start {
+        position: absolute;
+        bottom: 15px;
+        right: 16px;
+        text-decoration: auto;
+      }
     `
   ]
 
   @property({ type: String }) scenarioName?: string
   @property({ type: String }) instanceName?: string
   @property({ type: Array }) logs: any
+  @property({ type: Boolean }) startable: boolean = false
 
   subscription: any
 
@@ -70,14 +81,10 @@ export class ScenarioInstanceLogView extends connect(store)(LitElement) {
       <div options></div>
       <div content>
         ${logs.map(
-          ({ timestamp, message, level }) =>
-            html`
-              <div class="${level}">
-                <span>${new Date(timestamp).toLocaleString()}</span> <strong>${level}</strong> ${message}
-              </div>
-            `
+          ({ timestamp, message, level }) => html` <div class="${level}"><span>${new Date(timestamp).toLocaleString()}</span> <strong>${level}</strong> ${message}</div> `
         )}
       </div>
+      ${this.startable ? html`<mwc-fab id="start" icon="play_arrow" title="start" @click=${() => this.dispatchEvent(new CustomEvent('start'))}> </mwc-fab>` : nothing}
     `
   }
 

package/client/viewparts/scenario-instance-monitor.ts

@@ -112,10 +112,7 @@ export class ScenarioInstanceMonitor extends localize(i18next)(LitElement) {
       <div buttons>
         <span><strong>${rounds}</strong> round</span>
         <mwc-icon-button @click=${e => this.showInstanceDetail()} icon="wysiwyg"></mwc-icon-button>
-        <mwc-icon-button
-          @click=${e => (running ? this.stopScenario(instance) : this.startScenario(instance))}
-          icon=${running ? 'pause' : 'play_arrow'}
-        ></mwc-icon-button>
+        <mwc-icon-button @click=${e => (running ? this.stopScenario(instance) : this.startScenario(instance))} icon=${running ? 'pause' : 'play_arrow'}></mwc-icon-button>
       </div>
     `
   }
@@ -137,9 +134,7 @@ export class ScenarioInstanceMonitor extends localize(i18next)(LitElement) {
 
     notify({
       level: 'info',
-      message: `${IS_SCENARIO_RUNNING(response.data.startScenario.state) ? 'success' : 'fail'} to start scenario : ${
-        instance.scenarioName
-      }`
+      message: `${IS_SCENARIO_RUNNING(response.data.startScenario.state) ? 'success' : 'fail'} to start scenario : ${instance.scenarioName}`
     })
   }
 
@@ -159,22 +154,15 @@ export class ScenarioInstanceMonitor extends localize(i18next)(LitElement) {
 
     notify({
       level: 'info',
-      message: `${IS_SCENARIO_RUNNING(response.data.stopScenario.state) ? 'fail' : 'success'} to stop instance : ${
-        instance.instanceName
-      }`
+      message: `${IS_SCENARIO_RUNNING(response.data.stopScenario.state) ? 'fail' : 'success'} to stop instance : ${instance.instanceName}`
     })
   }
 
   async showInstanceDetail() {
     const { instanceName, scenarioName } = this.instance
-    openPopup(
-      html`
-        <scenario-instance-view .instanceName=${instanceName} .scenarioName=${scenarioName}></scenario-instance-view>
-      `,
-      {
-        size: 'large',
-        title: `${i18next.t('title.scenario-instance')}`
-      }
-    )
+    openPopup(html` <scenario-instance-view .instanceName=${instanceName} .scenarioName=${scenarioName}></scenario-instance-view> `, {
+      size: 'large',
+      title: `${i18next.t('title.scenario-instance')}`
+    })
   }
 }

package/client/viewparts/scenario-monitor.ts

@@ -4,7 +4,7 @@ import './scenario-instance-monitor'
 
 import gql from 'graphql-tag'
 import { css, html, LitElement } from 'lit'
-import { customElement, property, query } from 'lit/decorators.js'
+import { customElement, property, query, state } from 'lit/decorators.js'
 
 import { client } from '@operato/graphql'
 import { i18next, localize } from '@operato/i18n'
@@ -220,7 +220,7 @@ export class ScenarioMonitor extends localize(i18next)(LitElement) {
 
   renderButtons(scenario) {
     const instances = scenario.instances || []
-    const scenarioInstance = instances.find(instance => instance.instanceName == scenario.name)
+    const scenarioInstance = instances.find(instance => instance.instanceName == scenario.name) || null
 
     return html`
       <div buttons ?detail=${this.mode == 'detail'}>
@@ -233,10 +233,13 @@ export class ScenarioMonitor extends localize(i18next)(LitElement) {
   }
 
   async popupLogView(scenario) {
-    openPopup(html` <scenario-instance-log-view .scenarioName=${scenario.name}></scenario-instance-log-view> `, {
-      size: 'large',
-      title: `${i18next.t('title.scenario-log')} (${scenario.name})`
-    })
+    const popup = openPopup(
+      html` <scenario-instance-log-view .scenarioName=${scenario.name} @start=${() => this.startScenario(scenario)} startable></scenario-instance-log-view> `,
+      {
+        size: 'large',
+        title: `${i18next.t('title.scenario-log')} (${scenario.name})`
+      }
+    )
   }
 
   async startScenario(scenario) {