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

package/client/pages/scenario.ts

@@ -5,7 +5,7 @@ import './scenario-importer'
 import gql from 'graphql-tag'
 import { css, html } from 'lit'
 import { customElement, property, query, state } from 'lit/decorators.js'
-import moment from 'moment-timezone'
+import moment from '@operato/moment-timezone-es'
 import { connect } from 'pwa-helpers/connect-mixin'
 
 import { DataGrist } from '@operato/data-grist/ox-grist.js'
@@ -15,6 +15,7 @@ import { notify, openPopup } from '@operato/layout'
 import { navigate, PageView, store } from '@operato/shell'
 import { CommonButtonStyles, CommonGristStyles, ScrollbarStyles } from '@operato/styles'
 import { isMobileDevice } from '@operato/utils'
+import { FetchOption } from '@operato/data-grist'
 
 const DEFAULT_TZ = Intl.DateTimeFormat().resolvedOptions().timeZone
 const TIMEZONE_OPTIONS = ['', DEFAULT_TZ, ...moment.tz.names().filter(tz => tz !== DEFAULT_TZ)]
@@ -47,11 +48,11 @@ export class Scenario extends connect(store)(localize(i18next)(PageView)) {
           flex-direction: row;
           justify-content: space-between;
 
-          background-color: white;
+          background-color: var(--md-sys-color-surface);
         }
 
         #filters > * {
-          padding: var(--padding-default) var(--padding-wide);
+          padding: var(--spacing-medium) var(--spacing-large);
         }
       `
     ]
@@ -264,6 +265,15 @@ export class Scenario extends connect(store)(localize(i18next)(PageView)) {
           },
           width: 120
         },
+        {
+          type: 'number',
+          name: 'ttl',
+          header: i18next.t('field.ttl-seconds'),
+          record: {
+            editable: true
+          },
+          width: 80
+        },
         {
           type: 'privilege',
           name: 'privilege',
@@ -327,7 +337,7 @@ export class Scenario extends connect(store)(localize(i18next)(PageView)) {
     }
   }
 
-  async fetchHandler({ page, limit, sortings = [], filters = [] }) {
+  async fetchHandler({ page, limit, sortings = [], filters = [] }: FetchOption) {
     const response = await client.query({
       query: gql`
         query ($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {
@@ -342,6 +352,7 @@ export class Scenario extends connect(store)(localize(i18next)(PageView)) {
               schedule
               scheduleId
               timezone
+              ttl
               privilege {
                 category
                 privilege
@@ -396,6 +407,7 @@ export class Scenario extends connect(store)(localize(i18next)(PageView)) {
                 label
                 placeholder
                 property
+                styles
               }
             }
           }

package/client/viewparts/connections-monitor.ts

@@ -1,4 +1,4 @@
-import '@material/mwc-icon-button'
+import '@material/web/icon/icon.js'
 
 import gql from 'graphql-tag'
 import { css, html, LitElement } from 'lit'
@@ -17,16 +17,16 @@ export class ConnectionsMonitor extends LitElement {
         flex-direction: column;
 
         overflow: hidden;
-        background-color: var(--theme-white-color);
+        background-color: var(--md-sys-color-surface);
         border-radius: var(--border-radius);
-        border: var(--border-dark-color);
+        border: var(--border-dim-color);
       }
       h2 {
         margin: 0;
-        padding: var(--padding-default) 0 var(--padding-default) var(--padding-default);
-        border-bottom: var(--border-dark-color);
+        padding: var(--spacing-medium) 0 var(--spacing-medium) var(--spacing-medium);
+        border-bottom: var(--border-dim-color);
         font: var(--subtitle-font);
-        color: var(--secondary-color);
+        color: var(--md-sys-color-secondary);
         text-transform: capitalize;
       }
 
@@ -41,9 +41,9 @@ export class ConnectionsMonitor extends LitElement {
       [card] {
         display: flex;
         flex-direction: column;
-        padding: var(--padding-default);
-        border-bottom: var(--border-dark-color);
-        color: var(--secondary-color);
+        padding: var(--spacing-medium);
+        border-bottom: var(--border-dim-color);
+        color: var(--md-sys-color-secondary);
       }
       [card] * {
         overflow: hidden;
@@ -51,7 +51,7 @@ export class ConnectionsMonitor extends LitElement {
         white-space: nowrap;
       }
       [card] strong {
-        color: var(--primary-color);
+        color: var(--md-sys-color-primary);
       }
       [card] span {
         font-size: var(--fontsize-default);
@@ -64,24 +64,27 @@ export class ConnectionsMonitor extends LitElement {
         width: 10px;
         height: 10px;
         border-radius: 50%;
-        background-color: var(--primary-color);
-        margin-left: var(--margin-narrow);
+        background-color: var(--md-sys-color-primary);
+        margin-left: var(--spacing-small);
       }
+
       [buttons] {
-        --mdc-icon-button-size: 20px;
-        --mdc-icon-size: 20px;
+        --md-icon-size: 20px;
         border-top: 1px dashed rgba(0, 0, 0, 0.1);
-        margin: var(--margin-narrow) 0 0 0;
-        padding: var(--padding-narrow) 0 0 0;
+        margin: var(--spacing-small) 0 0 0;
+        padding: var(--spacing-small) 0 0 0;
         text-align: right;
       }
-      [buttons] mwc-icon-button {
-        color: rgba(var(--secondary-color-rgb), 0.8);
+
+      [buttons] md-icon {
+        color: var(--md-sys-color-secondary);
       }
+
       @media screen and (max-width: 480px) {
         h2 {
-          padding: var(--padding-narrow);
+          padding: var(--spacing-small);
         }
+
         [card] span {
           display: none;
         }
@@ -113,11 +116,11 @@ export class ConnectionsMonitor extends LitElement {
         <span>${description}</span>
         <span>Type : ${type}</span>
         <div buttons>
-          <mwc-icon-button
+          <md-icon
             @click=${e => (connected ? this.disconnect(connection) : this.connect(connection))}
-            .icon=${connected ? 'link_off' : 'link'}
-            label=${connected ? 'disconnect' : 'connect'}
-          ></mwc-icon-button>
+            title=${connected ? 'disconnect' : 'connect'}
+            >${connected ? 'link_off' : 'link'}</md-icon
+          >
         </div>
       </div>
     `

package/client/viewparts/monitoring-summary.ts

@@ -1,3 +1,4 @@
+import '@material/web/icon/icon.js'
 import '@operato/data-grist'
 
 import { css, html, LitElement } from 'lit'
@@ -16,15 +17,15 @@ export class IntegrationMonitoringSummary extends localize(i18next)(LitElement)
         flex-direction: row;
 
         overflow: hidden;
-        background-color: var(--paper-grey-800);
+        background-color: var(--md-sys-color-secondary);
         border-radius: var(--border-radius);
-        color: var(--opacity-light-color);
+        color: var(--md-sys-color-on-secondary);
       }
 
       [card] {
         flex: 1;
-        margin: var(--margin-default);
-        padding: var(--padding-narrow) var(--padding-default);
+        margin: var(--spacing-medium);
+        padding: var(--spacing-small) var(--spacing-medium);
         border-right: var(--border-light-color);
       }
       :host :last-child {
@@ -33,21 +34,27 @@ export class IntegrationMonitoringSummary extends localize(i18next)(LitElement)
       strong {
         font-size: 36px;
         line-height: 30px;
-        color: var(--theme-white-color);
+        color: var(--md-sys-color-on-primary);
       }
       span {
         display: block;
-        margin-bottom: var(--margin-narrow);
+        margin-bottom: var(--spacing-small);
         font-size: var(--fontsize-small);
         text-transform: capitalize;
+        opacity: 0.6;
       }
+
+      md-icon {
+        opacity: 0.6;
+      }
+
       @media screen and (max-width: 480px) {
         :host {
           font-size: 0.8em;
         }
         [card] {
-          margin: var(--margin-narrow);
-          padding: var(--padding-narrow);
+          margin: var(--spacing-small);
+          padding: var(--spacing-small);
         }
         [card]:nth-child(5),
         [card]:nth-child(6) {
@@ -56,8 +63,8 @@ export class IntegrationMonitoringSummary extends localize(i18next)(LitElement)
         [card]:nth-child(4) {
           border-right: none;
         }
-        mwc-icon {
-          font-size: var(--fontsize-large);
+        md-icon {
+          --md-icon-size: var(--fontsize-large);
         }
         span {
           line-height: 1;
@@ -124,7 +131,7 @@ export class IntegrationMonitoringSummary extends localize(i18next)(LitElement)
     return html`
       <div card>
         <span>${title}</span>
-        <mwc-icon>${icon}</mwc-icon>
+        <md-icon>${icon}</md-icon>
         <strong> ${value}</strong>
       </div>
     `

package/client/viewparts/pending-q-monitor.ts

@@ -1,3 +1,5 @@
+import '@material/web/icon/icon.js'
+
 import { css, html, LitElement } from 'lit'
 import { customElement, property, query } from 'lit/decorators.js'
 import { asyncReplace } from 'lit/directives/async-replace.js'
@@ -14,18 +16,18 @@ export class PendingQMonitor extends LitElement {
       :host {
         display: flex;
         flex-direction: column;
-        background-color: rgba(var(--primary-color-rgb), 0.1);
+        background-color: var(--md-sys-color-surface);
         border-radius: var(--border-radius);
-        padding: var(--padding-narrow);
+        padding: var(--spacing-small);
       }
 
       div[tags] {
         display: flex;
         align-items: center;
       }
-      [tags] mwc-icon {
-        margin: 0 var(--margin-narrow) 0 0;
-        font-size: var(--fontsize-large);
+      [tags] md-icon {
+        --md-icon-size: var(--fontsize-large);
+        margin: 0 var(--spacing-small) 0 0;
       }
 
       select {
@@ -49,7 +51,7 @@ export class PendingQMonitor extends LitElement {
 
       [pending-wrap] {
         flex: 1;
-        margin-top: var(--margin-default);
+        margin-top: var(--spacing-medium);
         padding-left: 30px;
         padding-right: 4px;
         font-size: 8px;
@@ -78,7 +80,7 @@ export class PendingQMonitor extends LitElement {
       }
       [timeline] table {
         border-collapse: collapse;
-        margin-top: var(--margin-default);
+        margin-top: var(--spacing-medium);
         width: 100%;
       }
       [timeline] th {
@@ -95,7 +97,7 @@ export class PendingQMonitor extends LitElement {
       }
       [timeline] td {
         border: 0;
-        border-top: var(--border-dark-color);
+        border-top: var(--border-dim-color);
         height: 30px;
         box-sizing: border-box;
       }
@@ -123,7 +125,7 @@ export class PendingQMonitor extends LitElement {
 
     return html`
       <div tags>
-        <mwc-icon>bookmark_border</mwc-icon>
+        <md-icon>bookmark_border</md-icon>
         <select @change=${e => (this.tag = e.target.value)} .value=${tag}>
           <option value="(*)">*</option>
           ${Object.keys(this.tags || {})

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

@@ -1,4 +1,5 @@
-import '@material/mwc-fab'
+import '@material/web/icon/icon.js'
+import '@material/web/fab/fab.js'
 
 import gql from 'graphql-tag'
 
@@ -18,8 +19,8 @@ export class ScenarioInstanceLogView extends connect(store)(LitElement) {
       :host {
         display: flex;
         flex-direction: column;
-        background-color: var(--theme-white-color);
-        padding: var(--padding-wide);
+        background-color: var(--md-sys-color-surface);
+        padding: var(--spacing-large);
       }
 
       :host([active]) {
@@ -81,10 +82,18 @@ 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}
+      ${this.startable
+        ? html`<md-fab id="start" title="start" @click=${() => this.dispatchEvent(new CustomEvent('start'))}>
+            <md-icon slot="icon">play_arrow</md-icon>
+          </md-fab>`
+        : nothing}
     `
   }
 

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

@@ -1,5 +1,5 @@
+import '@material/web/icon/icon.js'
 import '@operato/data-grist'
-import '@material/mwc-icon'
 import './scenario-instance-view'
 
 import gql from 'graphql-tag'
@@ -24,8 +24,8 @@ export class ScenarioInstanceMonitor extends localize(i18next)(LitElement) {
         display: block;
         overflow: hidden;
         position: relative;
-        padding: var(--padding-narrow);
-        color: var(--secondary-color);
+        padding: var(--spacing-small);
+        color: var(--md-sys-color-secondary);
       }
 
       [running] {
@@ -46,9 +46,9 @@ export class ScenarioInstanceMonitor extends localize(i18next)(LitElement) {
         padding: 2px;
         box-sizing: border-box;
 
-        border: var(--border-dark-color);
+        border: var(--border-dim-color);
         border-radius: 10px;
-        background-color: var(--theme-white-color);
+        background-color: var(--md-sys-color-surface);
       }
       [progress-wrap] {
         display: flex;
@@ -57,10 +57,11 @@ export class ScenarioInstanceMonitor extends localize(i18next)(LitElement) {
       }
 
       [running] [progress] {
-        background-color: var(--theme-white-color);
+        background-color: var(--md-sys-color-surface-variant);
       }
+
       [steps] {
-        padding: 0 0 0 var(--padding-narrow);
+        padding: 0 0 0 var(--spacing-small);
       }
 
       #progressbar {
@@ -69,15 +70,17 @@ export class ScenarioInstanceMonitor extends localize(i18next)(LitElement) {
         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;
+        --md-icon-size: 18px;
+
+        border-top: var(--border-dim-color);
+        padding: var(--spacing-small) 0 0 0;
         text-align: right;
       }
-      [buttons] mwc-icon-button {
-        color: var(--primary-color);
+
+      [buttons] md-icon {
+        color: var(--md-sys-color-primary);
       }
 
       @keyframes width {
@@ -111,8 +114,10 @@ export class ScenarioInstanceMonitor extends localize(i18next)(LitElement) {
       </div>
       <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>
+        <md-icon @click=${e => this.showInstanceDetail()}>wysiwyg</md-icon>
+        <md-icon @click=${e => (running ? this.stopScenario(instance) : this.startScenario(instance))}
+          >${running ? 'pause' : 'play_arrow'}</md-icon
+        >
       </div>
     `
   }
@@ -160,9 +165,14 @@ export class ScenarioInstanceMonitor extends localize(i18next)(LitElement) {
 
   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-instance-view.ts

@@ -17,7 +17,7 @@ export class ScenarioInstanceView extends connect(store)(LitElement) {
       :host {
         display: flex;
         flex-direction: column;
-        background-color: var(--main-section-background-color);
+        background-color: var(--md-sys-color-background);
       }
 
       [diagram] {
@@ -40,30 +40,30 @@ export class ScenarioInstanceView extends connect(store)(LitElement) {
 
       [tab] span {
         display: inline;
-        padding: var(--padding-wide) var(--padding-wide) var(--padding-narrow) var(--padding-wide);
+        padding: var(--spacing-large) var(--spacing-large) var(--spacing-small) var(--spacing-large);
         border-bottom: 3px solid transparent;
-        color: var(--secondary-color);
+        color: var(--md-sys-color-secondary);
         text-transform: capitalize;
       }
 
       [tab] span[active] {
-        border-color: var(--primary-color);
+        border-color: var(--md-sys-color-primary);
         font-weight: bold;
       }
 
       [detail] {
         flex: 1;
-        background-color: var(--theme-white-color);
-        border-top: var(--border-dark-color);
+        background-color: var(--md-sys-color-surface);
+        border-top: var(--border-dim-color);
         overflow: hidden;
-        padding: var(--padding-wide);
+        padding: var(--spacing-large);
       }
 
       [detail] > * {
         display: none;
         width: 100%;
         height: 100%;
-        color: var(--secondary-color);
+        color: var(--md-sys-color-secondary);
       }
 
       [detail] > [active] {
@@ -82,8 +82,8 @@ export class ScenarioInstanceView extends connect(store)(LitElement) {
         list-style: inside '- ';
       }
       [detail] li {
-        padding: var(--padding-default) var(--padding-narrow) var(--padding-narrow) var(--padding-narrow);
-        border-bottom: var(--border-dark-color);
+        padding: var(--spacing-medium) var(--spacing-small) var(--spacing-small) var(--spacing-small);
+        border-bottom: var(--border-dim-color);
       }
 
       li[active] {
@@ -93,7 +93,7 @@ export class ScenarioInstanceView extends connect(store)(LitElement) {
       [value] {
         flex: 1;
         overflow: auto;
-        padding: var(--padding-wide);
+        padding: var(--spacing-large);
       }
       scenario-instance-log-view [active] {
         padding: 0;
@@ -104,7 +104,7 @@ export class ScenarioInstanceView extends connect(store)(LitElement) {
           display: block;
         }
         [detail] {
-          padding: var(--padding-default);
+          padding: var(--spacing-medium);
           overflow: auto;
         }
         [detail] > * {