add templates

src/constants/templates.ts

@@ -0,0 +1,298 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export const All = {
+  id: "0",
+  configuration: {
+    name: "Global",
+    isRoot: true,
+    children: [
+      {
+        w: 8,
+        h: 12,
+        i: "0",
+        metrics: ["all_heatmap"],
+        metricTypes: ["readHeatMap"],
+        type: "Widget",
+        widget: {
+          title: "all_heatmap",
+          tips: "Tooltip",
+        },
+        graph: {
+          type: "HeatMap",
+        },
+        standard: {
+          unit: "ms",
+        },
+      },
+      {
+        w: 8,
+        h: 12,
+        i: "1",
+        metrics: ["all_percentile"],
+        metricTypes: ["readLabeledMetricsValues"],
+        type: "Widget",
+        metricLabels: "P50, P75, P90, P95, P99",
+        labelsIndex: "0, 1, 2, 3, 4",
+        widget: {
+          title: "Global Response Latency",
+          tips: "Tooltip",
+        },
+        graph: {
+          type: "Line",
+        },
+        standard: {
+          unit: "percentile in ms",
+        },
+      },
+      {
+        w: 8,
+        h: 12,
+        i: "3",
+        metrics: ["service_cpm"],
+        metricTypes: ["readMetricsValues"],
+        type: "Widget",
+        widget: {
+          title: "Service List",
+          tips: "Tooltip",
+        },
+        graph: {
+          type: "ServiceList",
+          dashboardName: "123",
+          fontSize: 12,
+        },
+        standard: {
+          unit: "percentile in ms",
+        },
+      },
+    ],
+  },
+};
+
+export const Service = {
+  id: "1",
+  configuration: {
+    name: "Service",
+    isRoot: true,
+    children: [
+      {
+        w: 8,
+        h: 12,
+        i: "0",
+        metrics: ["service_apdex"],
+        metricTypes: ["readMetricsValue"],
+        type: "Widget",
+        widget: {
+          title: "Service Apdex",
+          tips: "Tooltip",
+        },
+        graph: {
+          type: "Card",
+        },
+        standard: {
+          aggregation: "/",
+          aggregationNum: "10000",
+        },
+      },
+      {
+        w: 8,
+        h: 12,
+        i: "1",
+        metrics: ["service_sla"],
+        metricTypes: ["readMetricsValue"],
+        type: "Widget",
+        widget: {
+          title: "Successful Rate",
+          tips: "Tooltip",
+        },
+        graph: {
+          type: "Card",
+        },
+        standard: {
+          unit: "%",
+          aggregation: "/",
+          aggregationNum: "100",
+        },
+      },
+      {
+        w: 8,
+        h: 12,
+        i: "2",
+        metrics: ["service_cpm"],
+        metricTypes: ["readMetricsValue"],
+        type: "Widget",
+        widget: {
+          title: "Service Load",
+          tips: "For HTTP 1/2, gRPC, RPC services, this means Calls Per Minute (CPM), for TCP services, this means Packets Per Minute (PPM)",
+        },
+        graph: {
+          type: "Card",
+        },
+        standard: {
+          unit: "CPM / PPM",
+          aggregation: "/",
+          aggregationNum: "100",
+        },
+      },
+      {
+        w: 8,
+        h: 12,
+        i: "3",
+        metrics: ["service_cpm"],
+        metricTypes: ["readMetricsValues"],
+        type: "Widget",
+        widget: {
+          title: "Service cpm",
+          tips: "For HTTP 1/2, gRPC, RPC services, this means Calls Per Minute (CPM), for TCP services, this means Packets Per Minute (PPM)",
+        },
+        graph: {
+          type: "Card",
+        },
+        standard: {
+          unit: "CPM / PPM",
+          aggregation: "/",
+          aggregationNum: "100",
+        },
+      },
+      {
+        w: 8,
+        h: 12,
+        i: "4",
+        metrics: ["service_resp_time"],
+        metricTypes: ["readMetricsValues"],
+        type: "Widget",
+        widget: {
+          title: "Service Avg Response Time",
+        },
+        graph: {
+          type: "Line",
+        },
+        standard: {
+          unit: "ms",
+        },
+      },
+      {
+        w: 8,
+        h: 12,
+        i: "5",
+        metrics: ["service_apdex"],
+        metricTypes: ["readMetricsValues"],
+        type: "Widget",
+        widget: {
+          title: "Service Apdex",
+        },
+        graph: {
+          type: "Line",
+        },
+        standard: {
+          aggregation: "/",
+          aggregationNum: "10000",
+        },
+      },
+      {
+        w: 8,
+        h: 12,
+        i: "6",
+        metrics: ["service_percentile"],
+        metricTypes: ["readLabeledMetricsValues"],
+        type: "Widget",
+        metricLabels: "P50, P75, P90, P95, P99",
+        labelsIndex: "0, 1, 2, 3, 4",
+        widget: {
+          title: "Service Response Time Percentile",
+        },
+        graph: {
+          type: "Line",
+        },
+        standard: {
+          unit: "ms",
+        },
+      },
+      {
+        w: 8,
+        h: 12,
+        i: "7",
+        metrics: ["service_sla"],
+        metricTypes: ["readMetricsValues"],
+        type: "Widget",
+        widget: {
+          title: "Successful Rate",
+        },
+        graph: {
+          type: "Line",
+        },
+        standard: {
+          unit: "%",
+          aggregation: "/",
+          aggregationNum: "100",
+        },
+      },
+      {
+        w: 8,
+        h: 12,
+        i: "8",
+        metrics: ["service_throughput_received", "service_throughput_sent"],
+        metricTypes: ["readMetricsValues", "readMetricsValues"],
+        type: "Widget",
+        widget: {
+          title: "Service Throughput",
+        },
+        graph: {
+          type: "Line",
+        },
+        standard: {
+          unit: "Bytes",
+          tips: "This metrics is only avaible for TCP services",
+        },
+      },
+      {
+        w: 8,
+        h: 12,
+        i: "9",
+        metrics: ["service_mq_consume_count"],
+        metricTypes: ["readMetricsValues"],
+        type: "Widget",
+        widget: {
+          title: "Message Queue Consuming Count",
+        },
+        graph: {
+          type: "Line",
+        },
+        standard: {
+          tips: "The number of consumed messages.",
+        },
+      },
+      {
+        w: 8,
+        h: 12,
+        i: "10",
+        metrics: ["service_mq_consume_latency"],
+        metricTypes: ["readMetricsValues"],
+        type: "Widget",
+        widget: {
+          title: "Message Queue Consuming Count",
+        },
+        graph: {
+          type: "Line",
+        },
+        standard: {
+          unit: "ms",
+          tips: "The avg latency of message consuming. Latency = timestamp(received) - timestamp(producing)",
+        },
+      },
+    ],
+  },
+};

src/graphql/fragments/app.ts

@@ -26,3 +26,12 @@ export const OAPTimeInfo = {
 export const OAPVersion = {
   query: `version { version }`,
 };
+
+export const getAllTemplates = {
+  query: `
+    getAllTemplates {
+      id,
+      configuration,
+    }
+  `,
+};

src/graphql/fragments/dashboard.ts

@@ -30,12 +30,3 @@ export const listMetrics = {
   }
   `,
 };
-
-export const getAllTemplates = {
-  query: `
-    getAllTemplates {
-      id,
-      configuration,
-    }
-  `,
-};

src/graphql/query/app.ts

@@ -14,8 +14,10 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { OAPTimeInfo, OAPVersion } from "../fragments/app";
+import { OAPTimeInfo, OAPVersion, getAllTemplates } from "../fragments/app";
 
 export const queryOAPTimeInfo = `query queryOAPTimeInfo {${OAPTimeInfo.query}}`;
 
 export const queryOAPVersion = `query ${OAPVersion.query}`;
+
+export const getTemplates = `query queryTemplates {${getAllTemplates.query}}`;

src/graphql/query/dashboard.ts

@@ -14,14 +14,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import {
-  TypeOfMetrics,
-  listMetrics,
-  getAllTemplates,
-} from "../fragments/dashboard";
+import { TypeOfMetrics, listMetrics } from "../fragments/dashboard";
 
 export const queryTypeOfMetrics = `query typeOfMetrics(${TypeOfMetrics.variable}) {${TypeOfMetrics.query}}`;
 
 export const queryMetrics = `query queryData(${listMetrics.variable}) {${listMetrics.query}}`;
-
-export const getTemplates = `query queryOAPTimeInfo {${getAllTemplates.query}}`;

src/layout/components/AppMain.vue

@@ -22,11 +22,22 @@ limitations under the License. -->
   </section>
 </template>
 <script lang="ts" setup>
+import { ElMessage } from "element-plus";
 import { useAppStoreWithOut } from "@/store/modules/app";
 
 const appStore = useAppStoreWithOut();
 
 appStore.queryOAPTimeInfo();
+fetchTemplates();
+async function fetchTemplates() {
+  const res = await appStore.getAllTemplates();
+
+  if (res.errors) {
+    ElMessage.error(res.errors);
+    return;
+  }
+  // sessionStorage.setItem("templates", "[]");
+}
 </script>
 <style lang="scss" scoped>
 .app-main {

src/layout/components/NavBar.vue

@@ -24,7 +24,7 @@ limitations under the License. -->
         @input="changeTimeRange"
       />
       <span>
-        UTC{{ utcHour >= 0 ? "+" : ""
+        UTC{{ appStore.utcHour >= 0 ? "+" : ""
         }}{{ `${appStore.utcHour}:${appStore.utcMin}` }}
       </span>
       <span title="refresh" class="ghost ml-5 cp" @click="handleReload">
@@ -46,15 +46,6 @@ const route = useRoute();
 const pageName = ref<string>("");
 const timeRange = ref<number>(0);
 const theme = ref<string>("light");
-let utc = appStore.utc || "";
-if (!utc.includes(":")) {
-  utc = (appStore.utc || -(new Date().getTimezoneOffset() / 60)) + ":0";
-}
-const utcArr = (utc || "").split(":");
-const utcHour = isNaN(Number(utcArr[0])) ? 0 : Number(utcArr[0]);
-const utcMin = isNaN(Number(utcArr[1])) ? 0 : Number(utcArr[1]);
-
-appStore.setUTC(utcHour, utcMin);
 
 const setConfig = (value: string) => {
   pageName.value = value || "";

src/store/modules/app.ts

@@ -22,6 +22,7 @@ import getLocalTime from "@/utils/localtime";
 import { AxiosResponse } from "axios";
 import dateFormatStep, { dateFormatTime } from "@/utils/dateFormat";
 import { TimeType } from "@/constants/data";
+import { getAllTemplates } from "@/graphql/fragments/app";
 /*global Nullable*/
 interface AppState {
   durationRow: any;
@@ -108,7 +109,6 @@ export const appStore = defineStore({
   actions: {
     setDuration(data: Duration): void {
       this.durationRow = data;
-      localStorage.setItem("durationRow", JSON.stringify(data, null, 0));
       if ((window as any).axiosCancel.length !== 0) {
         for (const event of (window as any).axiosCancel) {
           setTimeout(event(), 0);
@@ -148,16 +148,21 @@ export const appStore = defineStore({
       const res: AxiosResponse = await graphql
         .query("queryOAPTimeInfo")
         .params({});
-      if (
-        !res.data ||
-        !res.data.data ||
-        !res.data.data.getTimeInfo ||
-        !res.data.data.getTimeInfo.timezone
-      ) {
+      if (res.data.errors) {
         this.utc = -(new Date().getTimezoneOffset() / 60) + ":0";
-        return;
+        return res.data;
       }
       this.utc = res.data.data.getTimeInfo.timezone / 100 + ":0";
+
+      return res.data;
+    },
+    async getAllTemplates() {
+      const res: AxiosResponse = await graphql.query("getTemplates").params({});
+
+      if (res.data.errors) {
+        return res.data;
+      }
+      return res.data;
     },
   },
 });

src/views/Settings.vue

@@ -76,7 +76,6 @@ import { ref, reactive } from "vue";
 import { useI18n } from "vue-i18n";
 import { useAppStoreWithOut } from "@/store/modules/app";
 import timeFormat from "@/utils/timeFormat";
-import { ElSwitch } from "element-plus";
 
 const { t, locale } = useI18n();
 const state = reactive<{ timer: ReturnType<typeof setInterval> | null }>({