Merge pull request #46 from sitewhere/v3.0.3

feat: Add pipeline debugging.
sitewhere · Mar 23, 2021 · 4f9f9b8 · 4f9f9b8
2 parents 206e745 + 736488b
commit 4f9f9b8
Show file tree

Hide file tree

Showing 15 changed files with 590 additions and 124 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "sitewhere-admin-ui",
-  "version": "3.0.2",
+  "version": "3.0.3",
   "description": "SiteWhere Administration",
   "author": "Derek Adams <[email protected]>",
   "scripts": {
@@ -28,7 +28,7 @@
     "material-icons": "^0.2.3",
     "moment": "^2.25.1",
     "mqtt": "^2.18.8",
-    "sitewhere-admin-ui-plugins": "3.0.3",
+    "sitewhere-admin-ui-plugins": "3.0.8",
     "sockjs-client": "^1.4.0",
     "source-map-support": "^0.5.19",
     "universal-analytics": "^0.4.20",
@@ -94,4 +94,4 @@
     "type": "git",
     "url": "git+https://github.com/sitewhere/sitewhere-admin-ui.git"
   }
-}
+}
diff --git a/src/components/events/EventPipelineLogging.vue b/src/components/events/EventPipelineLogging.vue
@@ -0,0 +1,199 @@
+<template>
+  <list-page
+    :icon="icon"
+    title="Pipeline Event Log"
+    loadingMessage="Loading event pipeline logs ..."
+    :loaded="loaded"
+    :results="results"
+    @pagingUpdated="onPagingUpdated"
+  >
+    <v-flex xs12>
+      <v-data-table
+        class="log-table"
+        :headers="headers"
+        :items="matches"
+        :hide-default-footer="true"
+        no-data-text="No Event Pipeline Log Entries Found"
+      >
+        <template slot="item" slot-scope="props">
+          <tr>
+            <td :title="props.item.source">
+              <span
+                style="max-width: 150px"
+                class="d-inline-block text-truncate"
+                >{{ props.item.source }}</span
+              >
+            </td>
+            <td :title="props.item.level">
+              <span
+                style="max-width: 150px"
+                class="d-inline-block text-truncate"
+                >{{ props.item.level }}</span
+              >
+            </td>
+            <td :title="props.item.deviceToken">
+              <span
+                style="max-width: 300px"
+                class="d-inline-block text-truncate"
+                >{{ props.item.deviceToken }}</span
+              >
+            </td>
+            <td :title="props.item.microservice">
+              <span
+                style="max-width: 200px"
+                class="d-inline-block text-truncate"
+                >{{ props.item.microservice }}</span
+              >
+            </td>
+            <td width="40%" :title="props.item.message">
+              {{ props.item.message }}
+            </td>
+          </tr>
+        </template>
+      </v-data-table>
+    </v-flex>
+    <template slot="actions">
+      <delete-button tooltip="Clear Log" @action="onClearLog" />
+    </template>
+    <template slot="dialogs"> </template>
+  </list-page>
+</template>
+
+<script lang="ts">
+import { Component } from "vue-property-decorator";
+import {
+  IPageSizes,
+  ITableHeaders,
+  NavigationIcon,
+  listInstancePipelineLogEntries,
+  deleteInstancePipelineLogEntries,
+  formatDate,
+  handleError,
+} from "sitewhere-ide-common";
+import { ListComponent, ListPage } from "sitewhere-ide-components";
+
+import DeleteButton from "../common/navbuttons/DeleteButton.vue";
+
+import { AxiosPromise } from "axios";
+
+import {
+  IEventPipelineLog,
+  IEventPipelineLogSearchCriteria,
+  IEventPipelineLogResponseFormat,
+  IEventPipelineLogSearchResults,
+} from "sitewhere-rest-api";
+
+@Component({
+  components: {
+    ListPage,
+    DeleteButton,
+  },
+})
+export default class EventPipelineLogging extends ListComponent<
+  IEventPipelineLog,
+  IEventPipelineLogSearchCriteria,
+  IEventPipelineLogResponseFormat,
+  IEventPipelineLogSearchResults
+> {
+  headers: ITableHeaders = [
+    {
+      align: "left",
+      sortable: false,
+      text: "Source",
+      value: "source",
+    },
+    {
+      align: "left",
+      sortable: false,
+      text: "Level",
+      value: "level",
+    },
+    {
+      align: "left",
+      sortable: false,
+      text: "Device Token",
+      value: "deviceToken",
+    },
+    {
+      align: "left",
+      sortable: false,
+      text: "Microservice",
+      value: "microservice",
+    },
+    {
+      align: "left",
+      sortable: false,
+      text: "Message",
+      value: "message",
+    },
+  ];
+  pageSizes: IPageSizes = [
+    {
+      text: "25",
+      value: 25,
+    },
+    {
+      text: "50",
+      value: 50,
+    },
+    {
+      text: "100",
+      value: 100,
+    },
+  ];
+
+  /** Get page icon */
+  get icon(): NavigationIcon {
+    return NavigationIcon.Device;
+  }
+
+  /** Build search criteria for list */
+  buildSearchCriteria(): IEventPipelineLogSearchCriteria {
+    const criteria: IEventPipelineLogSearchCriteria = {};
+    return criteria;
+  }
+
+  /** Build response format for list */
+  buildResponseFormat(): IEventPipelineLogResponseFormat {
+    const format: IEventPipelineLogResponseFormat = {};
+    return format;
+  }
+
+  /** Perform search */
+  performSearch(
+    criteria: IEventPipelineLogSearchCriteria,
+    format: IEventPipelineLogResponseFormat
+  ): AxiosPromise<IEventPipelineLogSearchResults> {
+    const tenant = this.$store.getters.selectedTenant;
+    return listInstancePipelineLogEntries(
+      this.$store,
+      tenant.token,
+      criteria,
+      format
+    );
+  }
+
+  /** Clear event pipeline log */
+  onClearLog(): void {
+    const tenant = this.$store.getters.selectedTenant;
+    try {
+      deleteInstancePipelineLogEntries(this.$store, tenant.token);
+      this.refresh();
+    } catch (err) {
+      handleError(err);
+    }
+  }
+
+  // Format a date.
+  format(date: Date) {
+    formatDate(date);
+  }
+}
+</script>
+
+<style scoped>
+.log-table >>> td {
+  font-size: 12px;
+  height: 38px;
+}
+</style>
diff --git a/src/components/global/GlobalSettings.vue b/src/components/global/GlobalSettings.vue
@@ -17,6 +17,7 @@
     <template slot="tabs">
       <v-tab key="persistence">Persistence</v-tab>
       <v-tab key="infra">Infrastructure</v-tab>
+      <v-tab key="debug">Debugging</v-tab>
       <v-tab key="json">JSON</v-tab>
     </template>
     <template slot="tab-items">
@@ -30,7 +31,15 @@
         :configuration="workingCopy"
         @updated="onInfrastructureUpdated"
       />
-      <instance-configuration-source tabkey="json" :configuration="workingCopy" />
+      <debugging-editor
+        tabkey="debug"
+        :configuration="workingCopy"
+        @updated="onDebuggingUpdated"
+      />
+      <instance-configuration-source
+        tabkey="json"
+        :configuration="workingCopy"
+      />
     </template>
     <template slot="actions" />
   </detail-page>
@@ -44,12 +53,13 @@ import { Component, Watch } from "vue-property-decorator";
 import {
   NavigationIcon,
   getInstanceConfiguration,
-  updateInstanceConfiguration
+  updateInstanceConfiguration,
 } from "sitewhere-ide-common";
 import { DetailPage } from "sitewhere-ide-components";
 
 import InfrastructureEditor from "./configuration/infrastructure/InfrastructureEditor.vue";
 import PersistenceConfigurationsEditor from "./configuration/persistence/PersistenceConfigurationsEditor.vue";
+import DebuggingEditor from "./configuration/debugging/DebuggingEditor.vue";
 import InstanceConfigurationSource from "./InstanceConfigurationSource.vue";
 import UnsavedUpdatesPanel from "./configuration/UnsavedUpdatesPanel.vue";
 
@@ -60,9 +70,10 @@ import { IInstanceConfiguration } from "sitewhere-rest-api";
     DetailPage,
     InfrastructureEditor,
     PersistenceConfigurationsEditor,
+    DebuggingEditor,
     InstanceConfigurationSource,
-    UnsavedUpdatesPanel
-  }
+    UnsavedUpdatesPanel,
+  },
 })
 export default class GlobalSettings extends Vue {
   configuration: IInstanceConfiguration | null = null;
@@ -105,6 +116,11 @@ export default class GlobalSettings extends Vue {
     this.checkDirty();
   }
 
+  /** Called when debugging settings are updated */
+  onDebuggingUpdated(): void {
+    this.checkDirty();
+  }
+
   /** Compares original with working copy for dirty check */
   checkDirty() {
     const orig: string = JSON.stringify(this.configuration);

diff --git a/src/components/global/configuration/debugging/DebuggingEditor.vue b/src/components/global/configuration/debugging/DebuggingEditor.vue
@@ -0,0 +1,51 @@
+<template>
+  <instance-configuration-editor
+    class="editor"
+    :tabkey="tabkey"
+    :configuration="configuration"
+    header="Configure Global Debugging Settings"
+  >
+    <pipeline-debugging-section
+      :configuration="configuration"
+      @updated="onEventPipelineDebuggingUpdated"
+    />
+  </instance-configuration-editor>
+</template>
+
+<script lang="ts">
+import { Component, Prop } from "vue-property-decorator";
+
+import Vue from "vue";
+import {
+  IInstanceConfiguration,
+  IEventPipelineDebugging,
+} from "sitewhere-rest-api";
+
+import InstanceConfigurationEditor from "../InstanceConfigurationEditor.vue";
+import PipelineDebuggingSection from "./PipelineDebuggingSection.vue";
+
+@Component({
+  components: {
+    InstanceConfigurationEditor,
+    PipelineDebuggingSection,
+  },
+})
+export default class DebuggingEditor extends Vue {
+  @Prop() readonly tabkey!: string;
+  @Prop() readonly configuration!: IInstanceConfiguration;
+
+  /** Called when event pipeline debugging values are updated. */
+  onEventPipelineDebuggingUpdated(updated: IEventPipelineDebugging) {
+    if (this.configuration) {
+      this.configuration.debugging.eventPipeLine = updated;
+    }
+    this.$emit("updated");
+  }
+}
+</script>
+
+<style scoped>
+.editor {
+  border-bottom: 1px solid #eee;
+}
+</style>