@things-factory/integration-ui 6.1.101 → 6.1.104

package/client/pages/integration-analysis.ts

@@ -0,0 +1,148 @@
+import '../analysis/graph-viewer'
+
+import gql from 'graphql-tag'
+import { css, html } from 'lit'
+import { customElement, query, state } from 'lit/decorators.js'
+
+import { client } from '@operato/graphql'
+import { i18next, localize } from '@operato/i18n'
+import { PageView } from '@operato/shell'
+import { ScrollbarStyles } from '@operato/styles'
+import { GraphViewer } from '../analysis/graph-viewer'
+import { GraphViewerStyles } from '../analysis/graph-viewer-style'
+
+@customElement('integration-analysis')
+export class IntegrationAnalysis extends localize(i18next)(PageView) {
+  static styles = [
+    GraphViewerStyles,
+    ScrollbarStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+
+        overflow: hidden;
+        background-color: var(--main-section-background-color);
+        padding: 0;
+      }
+
+      [graph-container] {
+        flex: 1;
+        margin: 0;
+        padding: 0;
+      }
+    `
+  ]
+
+  @state() analysis: any
+  @state() graphViewer?: GraphViewer
+
+  @query('[graph-container]') container!: HTMLDivElement
+
+  get context() {
+    return {
+      title: i18next.t('text.integration analysis'),
+      help: 'integration/ui/integration-analysis'
+    }
+  }
+
+  render() {
+    return html`<div graph-container></div>`
+  }
+
+  updated(changes) {
+    if (changes.has('analysis')) {
+      this.graphViewer = new GraphViewer(this.container, {
+        highlight: [
+          {
+            class: 'Connection',
+            property: 'name',
+            value: 'corona-api'
+          },
+          {
+            class: 'Scenario',
+            property: 'name',
+            value: 'monitor-simple'
+          },
+          {
+            class: 'Tag',
+            property: 'tag',
+            value: 'count'
+          }
+        ],
+        icons: {
+          Connection: 'gear',
+          Scenario: 'birthday-cake',
+          Tag: 'paw'
+        },
+        // images: {
+        //   Address: 'img/twemoji/1f3e0.svg',
+        //   BirthDate: 'img/twemoji/1f5d3.svg',
+        //   Cookie: 'img/twemoji/1f36a.svg',
+        //   CreditCard: 'img/twemoji/1f4b3.svg',
+        //   Device: 'img/twemoji/1f4bb.svg',
+        //   Email: 'img/twemoji/2709.svg',
+        //   Git: 'img/twemoji/1f5c3.svg',
+        //   Github: 'img/twemoji/1f5c4.svg',
+        //   icons: 'img/twemoji/1f38f.svg',
+        //   Ip: 'img/twemoji/1f4cd.svg',
+        //   Issues: 'img/twemoji/1f4a9.svg',
+        //   Language: 'img/twemoji/1f1f1-1f1f7.svg',
+        //   Options: 'img/twemoji/2699.svg',
+        //   Password: 'img/twemoji/1f511.svg',
+        //   'Project|name|d3': 'img/twemoji/32-20e3.svg',
+        //   User: 'img/twemoji/1f600.svg'
+        // },
+        minCollision: 60,
+        graphData: {
+          results: [
+            {
+              columns: ['Connection', 'Scenario', 'Tag'],
+              data: [
+                {
+                  graph: this.analysis
+                }
+              ]
+            }
+          ],
+          errors: []
+        },
+        nodeRadius: 25,
+        onNodeDoubleClick: node => {
+          switch (node.id) {
+            case '25':
+              // Google
+              window.open(node.properties.url, '_blank')
+              break
+            default:
+              var maxNodes = 5,
+                data = this.graphViewer!.randomD3Data(node, maxNodes)
+              this.graphViewer!.updateWithD3Data(data)
+              break
+          }
+        },
+        zoomFit: true
+      })
+    }
+  }
+
+  async pageUpdated(changes) {
+    if ('active' in changes) {
+      if (this.active) {
+        await this.fetchIntegrationAnalysis()
+      }
+    }
+  }
+
+  async fetchIntegrationAnalysis() {
+    const response = await client.query({
+      query: gql`
+        query {
+          integrationAnalysis
+        }
+      `
+    })
+
+    this.analysis = response.data.integrationAnalysis
+  }
+}

package/client/route.ts

@@ -11,5 +11,9 @@ export default function route(page) {
     case 'integration-monitor':
       import('./pages/integration-monitor')
       return page
+
+    case 'integration-analysis':
+      import('./pages/integration-analysis')
+      return page
   }
 }

package/dist-client/analysis/graph-viewer-style.d.ts

@@ -0,0 +1 @@
+export declare const GraphViewerStyles: import("lit").CSSResult;

package/dist-client/analysis/graph-viewer-style.js

@@ -0,0 +1,117 @@
+import { css } from 'lit';
+export const GraphViewerStyles = css `
+  * {
+    margin: 0;
+    padding: 0;
+  }
+
+  .graph-viewer {
+    border: 1px solid #ddd;
+    border-radius: 5px;
+  }
+
+  .graph-info {
+    font-size: 16px;
+    padding: 10px;
+    position: absolute;
+  }
+
+  .graph-info a {
+    border: 1px solid;
+    display: inline-block;
+    font-size: 14px;
+    line-height: 1.428571429;
+    margin-left: 5px;
+    margin-top: 5px;
+    padding: 6px 12px;
+  }
+
+  .graph-info a.class {
+    color: #fff;
+  }
+
+  .graph-info a.property {
+    background-color: #fff;
+    border-color: #ccc;
+    color: #333;
+  }
+
+  .graph-info a.btn {
+    margin-left: 5px;
+    margin-top: 5px;
+    opacity: 1;
+  }
+
+  .graph-info a.info {
+    background-color: #a5abb6;
+    border: 1px solid #9aa1ac;
+    color: #fff;
+  }
+
+  .node.node-highlighted .ring {
+    filter: alpha(opacity=50);
+    opacity: 0.5;
+    stroke: #888;
+    stroke-width: 12px;
+  }
+
+  .node .outline {
+    cursor: pointer;
+    fill: #a5abb6;
+    pointer-events: all;
+    stroke: #9aa1ac;
+    stroke-width: 2px;
+  }
+
+  .node .ring {
+    fill: none;
+    filter: alpha(opacity=0);
+    opacity: 0;
+    stroke: #6ac6ff;
+    stroke-width: 8px;
+  }
+
+  .node .text.icon {
+    font-family: FontAwesome;
+  }
+
+  .node.selected .ring,
+  .node:hover .ring {
+    filter: alpha(opacity=30);
+    opacity: 0.3;
+  }
+
+  .relationship {
+    cursor: default;
+  }
+
+  .relationship line {
+    stroke: #aaa;
+  }
+
+  .relationship .outline {
+    cursor: default;
+  }
+
+  .relationship .overlay {
+    cursor: default;
+    fill: #6ac6ff;
+    filter: alpha(opacity=0);
+    opacity: 0;
+  }
+
+  .relationship text {
+    cursor: default;
+  }
+
+  .relationship.selected .overlay,
+  .relationship:hover .overlay {
+    filter: alpha(opacity=30);
+    opacity: 0.3;
+  }
+
+  svg {
+    cursor: move;
+  }
+`;
+//# sourceMappingURL=graph-viewer-style.js.map

package/dist-client/analysis/graph-viewer-style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"graph-viewer-style.js","sourceRoot":"","sources":["../../client/analysis/graph-viewer-style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkHnC,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const GraphViewerStyles = css`\n  * {\n    margin: 0;\n    padding: 0;\n  }\n\n  .graph-viewer {\n    border: 1px solid #ddd;\n    border-radius: 5px;\n  }\n\n  .graph-info {\n    font-size: 16px;\n    padding: 10px;\n    position: absolute;\n  }\n\n  .graph-info a {\n    border: 1px solid;\n    display: inline-block;\n    font-size: 14px;\n    line-height: 1.428571429;\n    margin-left: 5px;\n    margin-top: 5px;\n    padding: 6px 12px;\n  }\n\n  .graph-info a.class {\n    color: #fff;\n  }\n\n  .graph-info a.property {\n    background-color: #fff;\n    border-color: #ccc;\n    color: #333;\n  }\n\n  .graph-info a.btn {\n    margin-left: 5px;\n    margin-top: 5px;\n    opacity: 1;\n  }\n\n  .graph-info a.info {\n    background-color: #a5abb6;\n    border: 1px solid #9aa1ac;\n    color: #fff;\n  }\n\n  .node.node-highlighted .ring {\n    filter: alpha(opacity=50);\n    opacity: 0.5;\n    stroke: #888;\n    stroke-width: 12px;\n  }\n\n  .node .outline {\n    cursor: pointer;\n    fill: #a5abb6;\n    pointer-events: all;\n    stroke: #9aa1ac;\n    stroke-width: 2px;\n  }\n\n  .node .ring {\n    fill: none;\n    filter: alpha(opacity=0);\n    opacity: 0;\n    stroke: #6ac6ff;\n    stroke-width: 8px;\n  }\n\n  .node .text.icon {\n    font-family: FontAwesome;\n  }\n\n  .node.selected .ring,\n  .node:hover .ring {\n    filter: alpha(opacity=30);\n    opacity: 0.3;\n  }\n\n  .relationship {\n    cursor: default;\n  }\n\n  .relationship line {\n    stroke: #aaa;\n  }\n\n  .relationship .outline {\n    cursor: default;\n  }\n\n  .relationship .overlay {\n    cursor: default;\n    fill: #6ac6ff;\n    filter: alpha(opacity=0);\n    opacity: 0;\n  }\n\n  .relationship text {\n    cursor: default;\n  }\n\n  .relationship.selected .overlay,\n  .relationship:hover .overlay {\n    filter: alpha(opacity=30);\n    opacity: 0.3;\n  }\n\n  svg {\n    cursor: move;\n  }\n`\n"]}