@operato/scene-integration 0.0.5

package/src/scenario-control.ts

@@ -0,0 +1,163 @@
+import { Component, DataSource, Properties, RectPath, Shape } from '@hatiolab/things-scene'
+
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+import COMPONENT_IMAGE from '../assets/symbol-scenario-control.png'
+import { getClient } from './origin-client'
+import gql from 'graphql-tag'
+
+const NATURE = {
+  mutable: false,
+  resizable: true,
+  rotatable: true,
+  properties: [
+    {
+      type: 'select',
+      label: 'scenario-name',
+      name: 'scenarioName',
+      property: {
+        options: async () => {
+          var response = await getClient().query({
+            query: gql`
+              query {
+                scenarios {
+                  items {
+                    name
+                  }
+                }
+              }
+            `
+          })
+          if (response.errors) {
+            return ['']
+          }
+
+          return [''].concat(response.data.scenarios.items.map((item: any) => item.name))
+        }
+      }
+    },
+    {
+      type: 'select',
+      label: 'control-type',
+      name: 'controlType',
+      property: {
+        options: [
+          {
+            display: '',
+            value: ''
+          },
+          {
+            display: 'start',
+            value: 'start'
+          },
+          {
+            display: 'stop',
+            value: 'stop'
+          }
+        ]
+      }
+    }
+  ],
+  'value-property': 'controlType',
+  help: 'scene/component/scenario-control'
+}
+
+export default class ScenarioControl extends DataSource(RectPath(Shape)) {
+  static _image: HTMLImageElement
+
+  static get image() {
+    if (!ScenarioControl._image) {
+      ScenarioControl._image = new Image()
+      ScenarioControl._image.src = COMPONENT_IMAGE
+    }
+    return ScenarioControl._image
+  }
+
+  private _client: any
+
+  render(context: CanvasRenderingContext2D) {
+    var { left, top, width, height } = this.bounds
+    context.beginPath()
+    this.drawImage(context, ScenarioControl.image, left, top, width, height)
+  }
+
+  ready() {
+    super.ready()
+    this._initScenario()
+  }
+
+  _initScenario() {
+    if (!this.app.isViewMode) return
+
+    this._client = getClient()
+    this.requestData()
+  }
+
+  dispose() {
+    super.dispose()
+
+    try {
+      if (this._client) {
+        this._client.stop()
+      }
+    } catch (e) {
+      console.error(e)
+    }
+    delete this._client
+  }
+
+  get nature() {
+    return NATURE
+  }
+
+  onchange(after: Properties) {
+    if ('controlType' in after) {
+      this.requestData()
+    }
+  }
+
+  get client() {
+    return this._client
+  }
+
+  get controlType() {
+    return this.getState('controlType')
+  }
+
+  set controlType(controlType) {
+    this.setState('controlType', controlType)
+  }
+
+  async requestData() {
+    let { controlType, scenarioName } = this.state
+    if (!controlType || !scenarioName || !this.app.isViewMode) return
+    var client = this._client
+    var query = ''
+    if (controlType == 'start') {
+      query = `mutation{
+        ${controlType}Scenario(instanceName: "${scenarioName}", scenarioName: "${scenarioName}", variables: {}) {
+          state
+        }
+      }`
+    } else {
+      query = `mutation{
+        ${controlType}Scenario(instanceName: "${scenarioName}") {
+          state
+        }
+      }`
+    }
+
+    if (client) {
+      var response = await client.query({
+        query: gql`
+          ${query}
+        `
+      })
+
+      this.data = response
+    }
+  }
+}
+
+Component.register('scenario-control', ScenarioControl)

package/src/scenario-instance-subscription.ts

@@ -0,0 +1,133 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import gql from 'graphql-tag'
+
+import { Component, DataSource, RectPath, Shape } from '@hatiolab/things-scene'
+
+import COMPONENT_IMAGE from '../assets/symbol-scenario-instance-subscription.png'
+import { getClient, subscribe } from './origin-client'
+
+const NATURE = {
+  mutable: false,
+  resizable: true,
+  rotatable: true,
+  properties: [
+    {
+      type: 'select',
+      label: 'scenario-name',
+      name: 'scenarioName',
+      property: {
+        options: async () => {
+          var response = await getClient().query({
+            query: gql`
+              query {
+                scenarios {
+                  items {
+                    name
+                  }
+                }
+              }
+            `
+          })
+          if (response.errors) {
+            return ['']
+          }
+
+          return [''].concat(response.data.scenarios.items.map((item: any) => item.name))
+        }
+      }
+    },
+    {
+      type: 'string',
+      label: 'instance-name',
+      name: 'instanceName'
+    }
+  ],
+  help: 'scene/component/scenario-instance-subscription'
+}
+
+export default class ScenarioInstanceSubscription extends DataSource(RectPath(Shape)) {
+  static _image: HTMLImageElement
+
+  static get image() {
+    if (!ScenarioInstanceSubscription._image) {
+      ScenarioInstanceSubscription._image = new Image()
+      ScenarioInstanceSubscription._image.src = COMPONENT_IMAGE
+    }
+
+    return ScenarioInstanceSubscription._image
+  }
+
+  private subscription?: {
+    unsubscribe(): void
+  }
+
+  dispose() {
+    super.dispose()
+
+    this.subscription?.unsubscribe()
+    delete this.subscription
+  }
+
+  render(context: CanvasRenderingContext2D) {
+    var { left, top, width, height } = this.bounds
+
+    context.beginPath()
+    this.drawImage(context, ScenarioInstanceSubscription.image, left, top, width, height)
+  }
+
+  ready() {
+    if (!this.app.isViewMode) return
+    this._initScenarioInstanceSubscription()
+  }
+
+  get nature() {
+    return NATURE
+  }
+
+  _initScenarioInstanceSubscription() {
+    if (!this.app.isViewMode) return
+    this.startSubscribe()
+  }
+
+  async startSubscribe() {
+    var { instanceName, scenarioName = '' } = this.state
+
+    instanceName = instanceName || scenarioName
+
+    this.subscription = await subscribe(
+      {
+        query: gql`
+        subscription {
+          scenarioInstanceState(instanceName: "${instanceName}", scenarioName: "${scenarioName}") {
+            instanceName
+            scenarioName
+            state
+            variables
+            progress{
+              rounds
+              rate
+              steps
+              step
+            }
+            data
+            message
+            timestamp
+          }
+        }
+      `
+      },
+      {
+        next: async ({ data }: { data: any }) => {
+          if (data) {
+            this.data = data.scenarioInstanceState
+          }
+        }
+      }
+    )
+  }
+}
+
+Component.register('scenario-instance-subscription', ScenarioInstanceSubscription)

package/src/scenario-queue-subscription.ts

@@ -0,0 +1,91 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import gql from 'graphql-tag'
+
+import { Component, DataSource, RectPath, Shape } from '@hatiolab/things-scene'
+
+import COMPONENT_IMAGE from '../assets/symbol-scenario-queue-subscription.png'
+import { subscribe } from './origin-client'
+
+const NATURE = {
+  mutable: false,
+  resizable: true,
+  rotatable: true,
+  properties: [],
+  help: 'scene/component/scenario-queue-subscription'
+}
+
+export default class ScenarioQueueSubscription extends DataSource(RectPath(Shape)) {
+  static _image: HTMLImageElement
+
+  static get image() {
+    if (!ScenarioQueueSubscription._image) {
+      ScenarioQueueSubscription._image = new Image()
+      ScenarioQueueSubscription._image.src = COMPONENT_IMAGE
+    }
+
+    return ScenarioQueueSubscription._image
+  }
+
+  private subscription?: {
+    unsubscribe(): void
+  }
+
+  dispose() {
+    super.dispose()
+
+    this.subscription?.unsubscribe()
+    delete this.subscription
+  }
+
+  render(context: CanvasRenderingContext2D) {
+    var { left, top, width, height } = this.bounds
+
+    context.beginPath()
+    this.drawImage(context, ScenarioQueueSubscription.image, left, top, width, height)
+  }
+
+  ready() {
+    if (!this.app.isViewMode) return
+    this._initScenarioQueueSubscription()
+  }
+
+  get nature() {
+    return NATURE
+  }
+
+  _initScenarioQueueSubscription() {
+    if (!this.app.isViewMode) return
+    this.startSubscribe()
+  }
+
+  async startSubscribe() {
+    this.subscription = await subscribe(
+      {
+        query: gql`
+          subscription {
+            scenarioQueueState {
+              queue {
+                stuff
+                due
+                priority
+                tag
+              }
+            }
+          }
+        `
+      },
+      {
+        next: async ({ data }: { data: any }) => {
+          if (data) {
+            this.data = data.scenarioQueueState
+          }
+        }
+      }
+    )
+  }
+}
+
+Component.register('scenario-queue-subscription', ScenarioQueueSubscription)

package/src/scenario-run.ts

@@ -0,0 +1,157 @@
+import { Component, DataSource, Properties, RectPath, Shape } from '@hatiolab/things-scene'
+
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+import COMPONENT_IMAGE from '../assets/symbol-scenario-run.png'
+import { getClient } from './origin-client'
+import gql from 'graphql-tag'
+
+const NATURE = {
+  mutable: false,
+  resizable: true,
+  rotatable: true,
+  properties: [
+    {
+      type: 'select',
+      label: 'scenario-name',
+      name: 'scenarioName',
+      property: {
+        options: async () => {
+          var response = await getClient().query({
+            query: gql`
+              query {
+                scenarios {
+                  items {
+                    name
+                  }
+                }
+              }
+            `
+          })
+          if (response.errors) {
+            return ['']
+          }
+
+          return [''].concat(response.data.scenarios.items.map((item: any) => item.name))
+        }
+      }
+    },
+    {
+      type: 'data',
+      label: 'variables',
+      name: 'variables'
+    },
+    {
+      type: 'checkbox',
+      label: 'run-on-start',
+      name: 'runOnStart'
+    }
+  ],
+  'value-property': 'variables',
+  help: 'scene/component/scenario-run'
+}
+
+export default class ScenarioRun extends DataSource(RectPath(Shape)) {
+  static _image: HTMLImageElement
+
+  static get image() {
+    if (!ScenarioRun._image) {
+      ScenarioRun._image = new Image()
+      ScenarioRun._image.src = COMPONENT_IMAGE
+    }
+    return ScenarioRun._image
+  }
+
+  private _client: any
+
+  render(context: CanvasRenderingContext2D) {
+    var { left, top, width, height } = this.bounds
+    context.beginPath()
+    this.drawImage(context, ScenarioRun.image, left, top, width, height)
+  }
+
+  ready() {
+    super.ready()
+    this._initScenario()
+  }
+
+  _initScenario() {
+    if (!this.app.isViewMode) {
+      return
+    }
+    this._client = getClient()
+    if (this.state.runOnStart) {
+      this.requestData()
+    }
+  }
+
+  dispose() {
+    super.dispose()
+
+    try {
+      if (this._client) {
+        this._client.stop()
+      }
+    } catch (e) {
+      console.error(e)
+    }
+    delete this._client
+  }
+
+  get nature() {
+    return NATURE
+  }
+
+  onchange(after: Properties) {
+    if ('variables' in after) {
+      this.requestData()
+    }
+  }
+
+  get variables() {
+    return this.state.variables
+  }
+
+  set variables(variables) {
+    this.setState('variables', variables)
+  }
+
+  get client() {
+    return this._client
+  }
+
+  async requestData() {
+    let { scenarioName, variables } = this.state
+    if (!scenarioName || !this.app.isViewMode) return
+
+    var client = this._client
+    try {
+      variables = typeof variables == 'string' ? JSON.parse(variables) : variables
+    } catch (e) {
+      console.warn('runScenario mutation variable is not an object')
+    }
+
+    if (client) {
+      var response = await client.query({
+        query: gql`
+          mutation ($scenarioName: String!, $variables: Object) {
+            runScenario(scenarioName: $scenarioName, variables: $variables) {
+              state
+              message
+              data
+            }
+          }
+        `,
+        variables: {
+          scenarioName: scenarioName,
+          variables
+        }
+      })
+
+      this.data = response?.data?.runScenario?.data
+    }
+  }
+}
+
+Component.register('scenario-run', ScenarioRun)

package/src/scenario-start.ts

@@ -0,0 +1,155 @@
+import { Component, DataSource, Properties, RectPath, Shape } from '@hatiolab/things-scene'
+
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+import COMPONENT_IMAGE from '../assets/symbol-scenario-start.png'
+import { getClient } from './origin-client'
+import gql from 'graphql-tag'
+
+const NATURE = {
+  mutable: false,
+  resizable: true,
+  rotatable: true,
+  properties: [
+    {
+      type: 'string',
+      label: 'instance-name',
+      name: 'instanceName'
+    },
+    {
+      type: 'select',
+      label: 'scenario-name',
+      name: 'scenarioName',
+      property: {
+        options: async () => {
+          var response = await getClient().query({
+            query: gql`
+              query {
+                scenarios {
+                  items {
+                    name
+                  }
+                }
+              }
+            `
+          })
+          if (response.errors) {
+            return ['']
+          }
+
+          return [''].concat(response.data.scenarios.items.map((item: any) => item.name))
+        }
+      }
+    },
+    {
+      type: 'data',
+      label: 'variables',
+      name: 'variables'
+    }
+  ],
+  'value-property': 'variables',
+  help: 'scene/component/scenario-start'
+}
+
+export default class ScenarioStart extends DataSource(RectPath(Shape)) {
+  static _image: HTMLImageElement
+
+  static get image() {
+    if (!ScenarioStart._image) {
+      ScenarioStart._image = new Image()
+      ScenarioStart._image.src = COMPONENT_IMAGE
+    }
+    return ScenarioStart._image
+  }
+
+  private _client: any
+
+  render(context: CanvasRenderingContext2D) {
+    var { left, top, width, height } = this.bounds
+    context.beginPath()
+    this.drawImage(context, ScenarioStart.image, left, top, width, height)
+  }
+
+  ready() {
+    super.ready()
+    this._initScenario()
+  }
+
+  _initScenario() {
+    if (!this.app.isViewMode) {
+      return
+    }
+    this._client = getClient()
+  }
+
+  dispose() {
+    super.dispose()
+
+    try {
+      if (this._client) {
+        this._client.stop()
+      }
+    } catch (e) {
+      console.error(e)
+    }
+    delete this._client
+  }
+
+  get nature() {
+    return NATURE
+  }
+
+  async onchange(after: Properties) {
+    if ('variables' in after) {
+      this.requestData()
+    }
+  }
+
+  get variables() {
+    return this.state.variables
+  }
+
+  set variables(variables) {
+    this.setState('variables', variables)
+  }
+
+  get client() {
+    return this._client
+  }
+
+  async requestData() {
+    let { instanceName, scenarioName, variables } = this.state
+    if (!scenarioName || !this.app.isViewMode) return
+
+    var client = this._client
+    try {
+      variables = typeof variables == 'string' ? JSON.parse(variables) : variables
+    } catch (e) {
+      console.error(e)
+    }
+
+    if (client) {
+      var response = await client.query({
+        query: gql`
+          mutation ($instanceName: String, $scenarioName: String!, $variables: Object) {
+            startScenario(instanceName: $instanceName, scenarioName: $scenarioName, variables: $variables) {
+              state
+              message
+              data
+            }
+          }
+        `,
+        variables: {
+          instanceName: instanceName,
+          scenarioName: scenarioName,
+          variables
+        }
+      })
+
+      this.data = response?.data?.startScenario?.data
+    }
+  }
+}
+
+Component.register('scenario-start', ScenarioStart)