@things-factory/integration-ui 6.1.66 → 6.1.71

package/client/viewparts/{pending-q-monitor.js → pending-q-monitor.ts}

@@ -1,123 +1,121 @@
 import { css, html, LitElement } from 'lit'
+import { customElement, property, query } from 'lit/decorators.js'
 import { asyncReplace } from 'lit/directives/async-replace.js'
 import { unsafeHTML } from 'lit/directives/unsafe-html.js'
 
 import { ScrollbarStyles } from '@operato/styles'
 import { sleep } from '@operato/utils'
 
+@customElement('pending-q-monitor')
 export class PendingQMonitor extends LitElement {
-  static get styles() {
-    return [
-      ScrollbarStyles,
-      css`
-        :host {
-          display: flex;
-          flex-direction: column;
-          background-color: rgba(var(--primary-color-rgb), 0.1);
-          border-radius: var(--border-radius);
-          padding: var(--padding-narrow);
-        }
-
-        div[tags] {
-          display: flex;
-          align-items: center;
-        }
-        [tags] mwc-icon {
-          margin: 0 var(--margin-narrow) 0 0;
-          font-size: var(--fontsize-large);
-        }
-
-        select {
-          flex: 1;
-          display: inline-block;
-          border: none;
-          border-radius: var(--border-radius);
-        }
-
-        select:focus {
-          outline: 0;
-        }
-
-        [pendings] {
-          display: flex;
-
-          flex: 1;
-          position: relative;
-          overflow: auto;
-        }
-
-        [pending-wrap] {
-          flex: 1;
-          margin-top: var(--margin-default);
-          padding-left: 30px;
-          padding-right: 4px;
-          font-size: 8px;
-          line-height: 16px;
-
-          display: flex;
-        }
-
-        [pendings-by-tag] {
-          flex: 1;
-          position: relative;
-          margin: 0 1px;
-        }
-
-        [pending] {
-          display: block;
-          height: 2px;
-          width: 100%;
-          white-space: nowrap;
-          position: absolute;
-        }
-
-        [timeline] {
-          position: absolute;
-          width: 100%;
-        }
-        [timeline] table {
-          border-collapse: collapse;
-          margin-top: var(--margin-default);
-          width: 100%;
-        }
-        [timeline] th {
-          opacity: 0.5;
-          width: 25px;
-          border: 0;
-          font-weight: normal;
-          font-size: 9px;
-        }
-        [timeline] th span {
-          display: block;
-          position: absolute;
-          margin-top: -22px;
-        }
-        [timeline] td {
-          border: 0;
-          border-top: var(--border-dark-color);
-          height: 30px;
-          box-sizing: border-box;
-        }
-        [timeline] tr:nth-child(3n + 1) td {
-          border: 0;
-          border-top: 1px solid rgba(0, 0, 0, 0.4);
-          box-sizing: border-box;
-        }
-      `
-    ]
-  }
+  static styles = [
+    ScrollbarStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        background-color: rgba(var(--primary-color-rgb), 0.1);
+        border-radius: var(--border-radius);
+        padding: var(--padding-narrow);
+      }
 
-  static get properties() {
-    return {
-      pendings: Array,
-      filteredPendings: Array,
-      colorIndex: Object,
-      running: Boolean,
-      tags: Object,
-      tag: String,
-      scales: Array
-    }
-  }
+      div[tags] {
+        display: flex;
+        align-items: center;
+      }
+      [tags] mwc-icon {
+        margin: 0 var(--margin-narrow) 0 0;
+        font-size: var(--fontsize-large);
+      }
+
+      select {
+        flex: 1;
+        display: inline-block;
+        border: none;
+        border-radius: var(--border-radius);
+      }
+
+      select:focus {
+        outline: 0;
+      }
+
+      [pendings] {
+        display: flex;
+
+        flex: 1;
+        position: relative;
+        overflow: auto;
+      }
+
+      [pending-wrap] {
+        flex: 1;
+        margin-top: var(--margin-default);
+        padding-left: 30px;
+        padding-right: 4px;
+        font-size: 8px;
+        line-height: 16px;
+
+        display: flex;
+      }
+
+      [pendings-by-tag] {
+        flex: 1;
+        position: relative;
+        margin: 0 1px;
+      }
+
+      [pending] {
+        display: block;
+        height: 2px;
+        width: 100%;
+        white-space: nowrap;
+        position: absolute;
+      }
+
+      [timeline] {
+        position: absolute;
+        width: 100%;
+      }
+      [timeline] table {
+        border-collapse: collapse;
+        margin-top: var(--margin-default);
+        width: 100%;
+      }
+      [timeline] th {
+        opacity: 0.5;
+        width: 25px;
+        border: 0;
+        font-weight: normal;
+        font-size: 9px;
+      }
+      [timeline] th span {
+        display: block;
+        position: absolute;
+        margin-top: -22px;
+      }
+      [timeline] td {
+        border: 0;
+        border-top: var(--border-dark-color);
+        height: 30px;
+        box-sizing: border-box;
+      }
+      [timeline] tr:nth-child(3n + 1) td {
+        border: 0;
+        border-top: 1px solid rgba(0, 0, 0, 0.4);
+        box-sizing: border-box;
+      }
+    `
+  ]
+
+  @property({ type: Array }) pendings: any
+  @property({ type: Array }) filteredPendings: any
+  @property({ type: Object }) colorIndex: any
+  @property({ type: Boolean }) running?: boolean
+  @property({ type: Object }) tags: any
+  @property({ type: String }) tag?: string
+  @property({ type: Array }) scales: any
+
+  filterPendings: any
 
   render() {
     const tag = this.tag === undefined ? '(*)' : this.tag
@@ -172,7 +170,7 @@ export class PendingQMonitor extends LitElement {
       yield pendingsByTags.map(
         pendings => html`
           <div pendings-by-tag>
-            ${pendings.map((pending, index) => {
+            ${(pendings as any).map((pending, index) => {
               var due = Number(pending.due)
               var top = Math.max(Math.floor((due - now) / 1000) * 3, 0) /* 3px per second */
 
@@ -242,5 +240,3 @@ export class PendingQMonitor extends LitElement {
     }
   }
 }
-
-customElements.define('pending-q-monitor', PendingQMonitor)

package/client/viewparts/{scenario-instance-log-view.js → scenario-instance-log-view.ts}

@@ -1,49 +1,47 @@
 import gql from 'graphql-tag'
 import { css, html, LitElement } from 'lit'
+import { customElement, property, query } from 'lit/decorators.js'
 import { connect } from 'pwa-helpers/connect-mixin'
 
 import { subscribe } from '@operato/graphql'
 import { store } from '@operato/shell'
 import { ScrollbarStyles } from '@operato/styles'
 
+@customElement('scenario-instance-log-view')
 export class ScenarioInstanceLogView extends connect(store)(LitElement) {
-  static get styles() {
-    return [
-      ScrollbarStyles,
-      css`
-        :host {
-          display: flex;
-          flex-direction: column;
-          background-color: var(--theme-white-color);
-          padding: var(--padding-wide);
-        }
-        :host([active]) {
-          padding: 0;
-        }
+  static styles = [
+    ScrollbarStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        background-color: var(--theme-white-color);
+        padding: var(--padding-wide);
+      }
+      :host([active]) {
+        padding: 0;
+      }
 
-        [content] {
-          flex: 1;
+      [content] {
+        flex: 1;
 
-          display: flex;
-          flex-direction: column;
-          overflow: auto;
+        display: flex;
+        flex-direction: column;
+        overflow: auto;
 
-          font-size: var(--fontsize-small);
-        }
-        span {
-          color: var(--secondary-text-color);
-        }
-      `
-    ]
-  }
+        font-size: var(--fontsize-small);
+      }
+      span {
+        color: var(--secondary-text-color);
+      }
+    `
+  ]
 
-  static get properties() {
-    return {
-      scenarioName: String,
-      instanceName: String,
-      logs: Array
-    }
-  }
+  @property({ type: String }) scenarioName?: string
+  @property({ type: String }) instanceName?: string
+  @property({ type: Array }) logs: any
+
+  subscription: any
 
   firstUpdated() {
     this.logs = []
@@ -109,5 +107,3 @@ export class ScenarioInstanceLogView extends connect(store)(LitElement) {
     delete this.subscription
   }
 }
-
-customElements.define('scenario-instance-log-view', ScenarioInstanceLogView)

package/client/viewparts/{scenario-instance-monitor.js → scenario-instance-monitor.ts}

@@ -4,6 +4,7 @@ import './scenario-instance-view'
 
 import gql from 'graphql-tag'
 import { css, html, LitElement } from 'lit'
+import { customElement, property, query } from 'lit/decorators.js'
 
 import { client } from '@operato/graphql'
 import { i18next, localize } from '@operato/i18n'
@@ -14,89 +15,84 @@ function IS_SCENARIO_RUNNING(state) {
   return state && state !== 'UNLOADED'
 }
 
+@customElement('scenario-instance-monitor')
 export class ScenarioInstanceMonitor extends localize(i18next)(LitElement) {
-  static get properties() {
-    return {
-      instance: Object,
-      color: String
-    }
-  }
+  static styles = [
+    ScrollbarStyles,
+    css`
+      :host {
+        display: block;
+        overflow: hidden;
+        position: relative;
+        padding: var(--padding-narrow);
+        color: var(--secondary-color);
+      }
 
-  static get styles() {
-    return [
-      ScrollbarStyles,
-      css`
-        :host {
-          display: block;
-          overflow: hidden;
-          position: relative;
-          padding: var(--padding-narrow);
-          color: var(--secondary-color);
-        }
+      [running] {
+        background-color: lightgreen;
+      }
 
-        [running] {
-          background-color: lightgreen;
-        }
+      [name] {
+        font-size: var(--fontsize-default);
+        font-weight: bold;
+      }
 
-        [name] {
-          font-size: var(--fontsize-default);
-          font-weight: bold;
-        }
+      [progress] {
+        display: block;
+        position: relative;
 
-        [progress] {
-          display: block;
-          position: relative;
+        width: 100%;
+        margin: 2px;
+        padding: 2px;
+        box-sizing: border-box;
 
-          width: 100%;
-          margin: 2px;
-          padding: 2px;
-          box-sizing: border-box;
+        border: var(--border-dark-color);
+        border-radius: 10px;
+        background-color: var(--theme-white-color);
+      }
+      [progress-wrap] {
+        display: flex;
+        flex-direction: row;
+        margin: 4px 0;
+      }
 
-          border: var(--border-dark-color);
-          border-radius: 10px;
-          background-color: var(--theme-white-color);
-        }
-        [progress-wrap] {
-          display: flex;
-          flex-direction: row;
-          margin: 4px 0;
-        }
+      [running] [progress] {
+        background-color: var(--theme-white-color);
+      }
+      [steps] {
+        padding: 0 0 0 var(--padding-narrow);
+      }
 
-        [running] [progress] {
-          background-color: var(--theme-white-color);
-        }
-        [steps] {
-          padding: 0 0 0 var(--padding-narrow);
-        }
+      #progressbar {
+        height: 100%;
+        text-align: left;
+        border-radius: 5px;
+        animation: width 1s linear ease-out;
+      }
+      [buttons] {
+        --mdc-icon-button-size: 18px;
+        --mdc-icon-size: 18px;
+        border-top: var(--border-dark-color);
+        padding: var(--padding-narrow) 0 0 0;
+        text-align: right;
+      }
+      [buttons] mwc-icon-button {
+        color: var(--primary-color);
+      }
 
-        #progressbar {
-          height: 100%;
-          text-align: left;
-          border-radius: 5px;
-          animation: width 1s linear ease-out;
-        }
-        [buttons] {
-          --mdc-icon-button-size: 18px;
-          --mdc-icon-size: 18px;
-          border-top: var(--border-dark-color);
-          padding: var(--padding-narrow) 0 0 0;
-          text-align: right;
+      @keyframes width {
+        0% {
+          width: 0;
         }
-        [buttons] mwc-icon-button {
-          color: var(--primary-color);
+        100% {
+          width: auto;
         }
+      }
+    `
+  ]
 
-        @keyframes width {
-          0% {
-            width: 0;
-          }
-          100% {
-            width: auto;
-          }
-        }
-      `
-    ]
-  }
+  @property({ type: Object }) instance: any
+  @property({ type: String }) color?: string
 
   render() {
     var instance = this.instance
@@ -182,5 +178,3 @@ export class ScenarioInstanceMonitor extends localize(i18next)(LitElement) {
     )
   }
 }
-
-window.customElements.define('scenario-instance-monitor', ScenarioInstanceMonitor)