{{ t("timeTips") }}
- {{ t(menu.meta.title) }}
+ {{
+ t(menu.meta.title)
+ }}
@@ -88,24 +90,16 @@ limitations under the License. -->
diff --git a/src/views/dashboard/New.vue b/src/views/dashboard/New.vue
index e41b6639..7a7a5d0e 100644
--- a/src/views/dashboard/New.vue
+++ b/src/views/dashboard/New.vue
@@ -56,7 +56,6 @@ limitations under the License. -->
import { reactive } from "vue";
import { useI18n } from "vue-i18n";
import router from "@/router";
-import { ElInput, ElButton } from "element-plus";
import { useSelectorStore } from "@/store/modules/selectors";
import { EntityType, Options } from "./data";
import uuid from "@/utils/uuid";
@@ -74,11 +73,11 @@ const onCreate = () => {
router.push(path);
};
selectorStore.fetchServices("general");
-function changeLayer(opt: { label: string; value: string }) {
- states.layer = opt.value;
+function changeLayer(opt: { label: string; value: string }[]) {
+ states.layer = opt[0].value;
}
-function changeEntity(opt: { label: string; value: string }) {
- states.entity = opt.value;
+function changeEntity(opt: { label: string; value: string }[]) {
+ states.entity = opt[0].value;
}
diff --git a/src/views/dashboard/configuration/StandardOptions.vue b/src/views/dashboard/configuration/StandardOptions.vue
new file mode 100644
index 00000000..56081354
--- /dev/null
+++ b/src/views/dashboard/configuration/StandardOptions.vue
@@ -0,0 +1,169 @@
+
+
+ ![]()
+
+
diff --git a/src/views/dashboard/controls/Tab.vue b/src/views/dashboard/controls/Tab.vue
new file mode 100644
index 00000000..2f5515b2
--- /dev/null
+++ b/src/views/dashboard/controls/Tab.vue
@@ -0,0 +1,263 @@
+
+
+
+
+
+
diff --git a/src/views/dashboard/graphs/HeatMap.vue b/src/views/dashboard/graphs/HeatMap.vue
new file mode 100644
index 00000000..a07f22ce
--- /dev/null
+++ b/src/views/dashboard/graphs/HeatMap.vue
@@ -0,0 +1,157 @@
+
+
+
+
+
+
diff --git a/src/views/dashboard/graphs/Line.vue b/src/views/dashboard/graphs/Line.vue
new file mode 100644
index 00000000..34b7ec74
--- /dev/null
+++ b/src/views/dashboard/graphs/Line.vue
@@ -0,0 +1,191 @@
+
+
+ ;
- devDependencies: Recordable;
- };
- lastBuildTime: string;
- };
-
- // vue
- declare type PropType = VuePropType;
- declare type VueNode = VNodeChild | JSX.Element;
-
- export type Writable = {
- -readonly [P in keyof T]: T[P];
- };
-
- declare type Nullable = T | null;
- declare type NonNullable = T extends null | undefined ? never : T;
- declare type Recordable = Record;
- declare type ReadonlyRecordable = {
- readonly [key: string]: T;
- };
- declare type Indexable = {
- [key: string]: T;
- };
- declare type DeepPartial = {
- [P in keyof T]?: DeepPartial;
- };
- declare type TimeoutHandle = ReturnType;
- declare type IntervalHandle = ReturnType;
-
- declare interface ChangeEvent extends Event {
- target: HTMLInputElement;
- }
-
- declare interface WheelEvent {
- path?: EventTarget[];
- }
- interface ImportMetaEnv extends ViteEnv {
- __: unknown;
- }
-
- declare interface ViteEnv {
- VITE_PORT: number;
- VITE_USE_MOCK: boolean;
- VITE_USE_PWA: boolean;
- VITE_PUBLIC_PATH: string;
- VITE_PROXY: [string, string][];
- VITE_GLOB_APP_TITLE: string;
- VITE_GLOB_APP_SHORT_NAME: string;
- VITE_USE_CDN: boolean;
- VITE_DROP_CONSOLE: boolean;
- VITE_BUILD_COMPRESS: "gzip" | "brotli" | "none";
- VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE: boolean;
- VITE_LEGACY: boolean;
- VITE_USE_IMAGEMIN: boolean;
- VITE_GENERATE_UI: string;
- }
-
- declare function parseInt(s: string | number, radix?: number): number;
-
- declare function parseFloat(string: string | number): number;
-
- namespace JSX {
- type Element = VNode;
- type ElementClass = ComponentRenderProxy;
- interface ElementAttributesProperty {
- $props: any;
- }
- interface IntrinsicElements {
- [elem: string]: any;
- }
- interface IntrinsicAttributes {
- [elem: string]: any;
- }
- }
-}
-
-declare module "vue" {
- export type JSXComponent =
- | { new (): ComponentPublicInstance }
- | FunctionalComponent;
-}
+ {{ t("unit") }}
+
+
+ {{ t("sortOrder") }}
+
+
+ {{ t("max") }}
+
+
+ {{ t("min") }}
+
+
+ {{ t("plus") }}
+
+
+ {{ t("minus") }}
+
+
+ {{ t("multiply") }}
+
+
+ {{ t("divide") }}
+
+
+ {{ t("convertToMilliseconds") }}
+
+
+ {{ t("convertToSeconds") }}
+
+
+
+
diff --git a/src/views/dashboard/configuration/WidgetOptions.vue b/src/views/dashboard/configuration/WidgetOptions.vue
new file mode 100644
index 00000000..8918d204
--- /dev/null
+++ b/src/views/dashboard/configuration/WidgetOptions.vue
@@ -0,0 +1,73 @@
+
+
+
+ {{ t("title") }}
+
+
+ {{ t("tooltipsContent") }}
+
+
+
+
diff --git a/src/views/dashboard/configuration/graph-styles/Area.vue b/src/views/dashboard/configuration/graph-styles/Area.vue
new file mode 100644
index 00000000..11fbf536
--- /dev/null
+++ b/src/views/dashboard/configuration/graph-styles/Area.vue
@@ -0,0 +1,63 @@
+
+
+
+ {{ t("areaOpacity") }}
+
+
+
+
diff --git a/src/views/dashboard/configuration/graph-styles/Bar.vue b/src/views/dashboard/configuration/graph-styles/Bar.vue
new file mode 100644
index 00000000..68000f82
--- /dev/null
+++ b/src/views/dashboard/configuration/graph-styles/Bar.vue
@@ -0,0 +1,59 @@
+
+
+
+ {{ t("showBackground") }}
+
+
+
+
diff --git a/src/views/dashboard/configuration/graph-styles/Card.vue b/src/views/dashboard/configuration/graph-styles/Card.vue
new file mode 100644
index 00000000..13eb6e63
--- /dev/null
+++ b/src/views/dashboard/configuration/graph-styles/Card.vue
@@ -0,0 +1,63 @@
+
+
+
+ {{ t("fontSize") }}
+
+
+
+
diff --git a/src/views/dashboard/configuration/graph-styles/Line.vue b/src/views/dashboard/configuration/graph-styles/Line.vue
new file mode 100644
index 00000000..4afb630a
--- /dev/null
+++ b/src/views/dashboard/configuration/graph-styles/Line.vue
@@ -0,0 +1,73 @@
+
+
+
+ {{ t("smooth") }}
+
+
+ {{ t("showSymbol") }}
+
+
+ {{ t("step") }}
+
+
+
+
diff --git a/src/views/dashboard/configuration/graph-styles/Table.vue b/src/views/dashboard/configuration/graph-styles/Table.vue
new file mode 100644
index 00000000..100550f9
--- /dev/null
+++ b/src/views/dashboard/configuration/graph-styles/Table.vue
@@ -0,0 +1,84 @@
+
+
+
+ {{ t("showValues") }}
+
+
+ {{ t("tableHeaderCol1") }}
+
+
+ {{ t("tableHeaderCol2") }}
+
+
+
+
diff --git a/src/views/dashboard/configuration/graph-styles/TopList.vue b/src/views/dashboard/configuration/graph-styles/TopList.vue
new file mode 100644
index 00000000..a067b0c8
--- /dev/null
+++ b/src/views/dashboard/configuration/graph-styles/TopList.vue
@@ -0,0 +1,59 @@
+
+
+
+ {{ t("maxItemNum") }}
+
+
+
+
diff --git a/src/views/dashboard/configuration/graph-styles/index.ts b/src/views/dashboard/configuration/graph-styles/index.ts
new file mode 100644
index 00000000..8e487cc6
--- /dev/null
+++ b/src/views/dashboard/configuration/graph-styles/index.ts
@@ -0,0 +1,26 @@
+/**
+ * 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.
+ */
+
+import AreaConfig from "./Area.vue";
+import LineConfig from "./Line.vue";
+import BarConfig from "./Bar.vue";
+
+export default {
+ AreaConfig,
+ LineConfig,
+ BarConfig,
+};
diff --git a/src/views/dashboard/controls/Image.vue b/src/views/dashboard/controls/Image.vue
new file mode 100644
index 00000000..777e8284
--- /dev/null
+++ b/src/views/dashboard/controls/Image.vue
@@ -0,0 +1,35 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/views/dashboard/controls/Widget.vue b/src/views/dashboard/controls/Widget.vue
new file mode 100644
index 00000000..f757782c
--- /dev/null
+++ b/src/views/dashboard/controls/Widget.vue
@@ -0,0 +1,188 @@
+
+
+
+
+
+
diff --git a/src/views/dashboard/data.ts b/src/views/dashboard/data.ts
index aa7b88a4..c93f74c5 100644
--- a/src/views/dashboard/data.ts
+++ b/src/views/dashboard/data.ts
@@ -14,42 +14,214 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
+export const ChartTypes = [
+ { label: "Bar", value: "Bar" },
+ { label: "Line", value: "Line" },
+ { label: "Area", value: "Area" },
+ { label: "Heatmap", value: "Heatmap" },
+ { label: "Pie", value: "Pie" },
+ { label: "Card", value: "Card" },
+ { label: "Top List", value: "TopList" },
+ { label: "Table", value: "Table" },
+ { label: "Endpoint List", value: "EndpointList" },
+ { label: "Instance List", value: "InstanceList" },
+];
+export const DefaultGraphConfig: { [key: string]: any } = {
+ Bar: {
+ type: "Bar",
+ showBackground: true,
+ },
+ Line: {
+ type: "Line",
+ step: false,
+ smooth: false,
+ showSymbol: false,
+ },
+ Area: {
+ type: "Area",
+ opacity: 0.4,
+ },
+ Card: {
+ type: "Card",
+ fontSize: 14,
+ showUint: true,
+ },
+ Table: {
+ type: "Card",
+ showTableValues: true,
+ tableHeaderCol1: "",
+ tableHeaderCol2: "",
+ },
+ TopList: {
+ type: "TopList",
+ topN: 10,
+ },
+};
+
+export enum MetricQueryTypes {
+ ReadMetricsValue = "readMetricsValue",
+ ReadMetricsValues = "readMetricsValues",
+ SortMetrics = "sortMetrics",
+ ReadLabeledMetricsValues = "readLabeledMetricsValues",
+ READHEATMAP = "readHeatMap",
+ ReadSampledRecords = "readSampledRecords",
+}
+export enum MetricsType {
+ UNKNOWN = "UNKNOWN",
+ REGULAR_VALUE = "REGULAR_VALUE",
+ LABELED_VALUE = "LABELED_VALUE",
+ HEATMAP = "HEATMAP",
+ SAMPLED_RECORD = "SAMPLED_RECORD",
+}
+export const ValuesTypes: {
+ [key: string]: Array<{ label: string; value: string }>;
+} = {
+ REGULAR_VALUE: [
+ { label: "read all values in the duration", value: "readMetricsValues" },
+ {
+ label: "read the single value in the duration",
+ value: "readMetricsValue",
+ },
+ { label: "get sorted top N values", value: "sortMetrics" },
+ ],
+ LABELED_VALUE: [
+ {
+ label: "read all values of labels in the duration",
+ value: "readLabeledMetricsValues",
+ },
+ ],
+ HEATMAP: [
+ { label: "read heatmap values in the duration", value: "readHeatMap" },
+ ],
+ SAMPLED_RECORD: [
+ { label: "get sorted topN values", value: "readSampledRecords" },
+ ],
+};
+export const MetricChartType: { [key: string]: string } = {
+ readMetricsValue: "ChartNum",
+ readMetricsValues: "ChartLine",
+ sortMetrics: "ChartSlow",
+ readLabeledMetricsValues: "ChartLine",
+ readHeatMap: "ChartHeatmap",
+ readSampledRecords: "ChartSlow",
+};
+export const CalculationType = [
+ { label: "Plus", value: "+" },
+ { label: "Minus", value: "-" },
+ { label: "Multiplication", value: "*" },
+ { label: "Division", value: "/" },
+ { label: "Convert Unix Timestamp(milliseconds)", value: "milliseconds" },
+ { label: "Convert Unix Timestamp(seconds)", value: "seconds" },
+];
+export const ReadValueChartType = [
+ { value: "ChartNum", label: "Digital Card" },
+ { value: "ChartSlow", label: "Slow Chart" },
+];
+
+export const MaxItemNum = 10;
+
+export enum MetricsName {
+ SERVICE_RESP_TIME = "service_resp_time",
+ SERVICE_SLA = "service_sla",
+ SERVICE_CPM = "service_cpm",
+ SERVICE_PERCENTILE = "service_percentile",
+ SERVICE_APDEX = "service_apdex",
+}
export const EntityType = [
- { value: "service", label: "Service" },
- { value: "all", label: "All" },
- { value: "endpoint", label: "Service Endpoint" },
- { value: "serviceInstance", label: "Service Instance" },
- { value: "serviceRelationClient", label: "Service Relation(client)" },
- { value: "serviceRelationServer", label: "Service Relation(server)" },
+ { value: "service", label: "Service", key: 1 },
+ { value: "all", label: "All", key: 10 },
+ { value: "endpoint", label: "Service Endpoint", key: 3 },
+ { value: "serviceInstance", label: "Service Instance", key: 3 },
+ { value: "serviceRelationClient", label: "Service Relation(client)", key: 2 },
+ { value: "serviceRelationServer", label: "Service Relation(server)", key: 2 },
{
value: "serviceInstanceRelationClient",
label: "Service Instance Relation(client)",
+ key: 4,
},
{
value: "serviceInstanceRelationServer",
label: "Service Instance Relation(server)",
+ key: 4,
},
- { value: "endpointRelation", label: "Endpoint Relation" },
+ { value: "endpointRelation", label: "Endpoint Relation", key: 4 },
+];
+export const SortOrder = [
+ { label: "DES", value: "DES" },
+ { label: "ASC", value: "ASC" },
+];
+export const ToolIcons = [
+ { name: "playlist_add", content: "Add Widget", id: "addWidget" },
+ { name: "all_inbox", content: "Add Tab", id: "addTab" },
+ // { name: "insert_image", content: "Add Image", id: "addImage" },
+ { name: "save_alt", content: "Export", id: "export" },
+ { name: "folder_open", content: "Import", id: "import" },
+ { name: "settings", content: "Settings", id: "settings" },
+ { name: "save", content: "Apply", id: "applay" },
];
export const Options = [
{
- value: "layer1",
- label: "layer1",
+ value: "Option1",
+ label: "Option1",
},
{
- value: "layer2",
- label: "layer2",
+ value: "Option2",
+ label: "Option2",
},
{
- value: "layer3",
- label: "layer3",
+ value: "Option3",
+ label: "Option3",
},
{
- value: "layer4",
- label: "layer4",
+ value: "Option4",
+ label: "Option4",
},
{
- value: "layer5",
- label: "layer5",
+ value: "Option5",
+ label: "Option5",
+ },
+];
+export const SelectOpts = [
+ {
+ value: "guide",
+ label: "Guide",
+ children: [
+ {
+ value: "disciplines",
+ label: "Disciplines",
+ children: [
+ {
+ value: "consistency",
+ label: "Consistency",
+ },
+ {
+ value: "feedback",
+ label: "Feedback",
+ },
+ {
+ value: "efficiency",
+ label: "Efficiency",
+ },
+ {
+ value: "controllability",
+ label: "Controllability",
+ },
+ ],
+ },
+ {
+ value: "navigation",
+ label: "Navigation",
+ children: [
+ {
+ value: "side nav",
+ label: "Side Navigation",
+ },
+ {
+ value: "top nav",
+ label: "Top Navigation",
+ },
+ ],
+ },
+ ],
},
];
diff --git a/src/views/dashboard/graphs/Area.vue b/src/views/dashboard/graphs/Area.vue
new file mode 100644
index 00000000..8582339b
--- /dev/null
+++ b/src/views/dashboard/graphs/Area.vue
@@ -0,0 +1,36 @@
+
+
+
+ Please add widgets.
+
+ {{
+ typeof data[key] === "string"
+ ? data[key]
+ : isNaN(data[key])
+ ? null
+ : data[key].toFixed(2)
+ }}
+ {{ standard.unit }}
+
+
+
+
diff --git a/src/views/dashboard/graphs/EndpointList.vue b/src/views/dashboard/graphs/EndpointList.vue
new file mode 100644
index 00000000..3f14aa94
--- /dev/null
+++ b/src/views/dashboard/graphs/EndpointList.vue
@@ -0,0 +1,34 @@
+
+
+
+
+
+
+
diff --git a/src/views/dashboard/graphs/TopList.vue b/src/views/dashboard/graphs/TopList.vue
new file mode 100644
index 00000000..d863808d
--- /dev/null
+++ b/src/views/dashboard/graphs/TopList.vue
@@ -0,0 +1,116 @@
+
+
+
+
+
+
+
+
+ {{ config.tableHeaderCol1 || $t("name") }}
+
+
+ {{ config.tableHeaderCol2 || $t("value") }}
+
+
+
+ {{ key }}
+
+ {{ data[key][data[key].length - 1 || 0] }}
+
+
+
+
+
+
diff --git a/src/views/dashboard/graphs/index.ts b/src/views/dashboard/graphs/index.ts
new file mode 100644
index 00000000..f676f686
--- /dev/null
+++ b/src/views/dashboard/graphs/index.ts
@@ -0,0 +1,36 @@
+/**
+ * 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.
+ */
+
+import Area from "./Area.vue";
+import Line from "./Line.vue";
+import Bar from "./Bar.vue";
+import Heatmap from "./HeatMap.vue";
+import TopList from "./TopList.vue";
+import Table from "./Table.vue";
+import Pie from "./Pie.vue";
+import Card from "./Card.vue";
+
+export default {
+ Line,
+ Bar,
+ Heatmap,
+ TopList,
+ Area,
+ Table,
+ Pie,
+ Card,
+};
diff --git a/src/views/dashboard/panel/Layout.vue b/src/views/dashboard/panel/Layout.vue
index 12780be4..0f1577f3 100644
--- a/src/views/dashboard/panel/Layout.vue
+++ b/src/views/dashboard/panel/Layout.vue
@@ -29,20 +29,38 @@ limitations under the License. -->
:h="item.h"
:i="item.i"
:key="item.i"
+ @click="clickGrid(item)"
+ :class="{ active: dashboardStore.activedGridItem === item.i }"
>
-
+ {{ i.value }}
+
+ {{ i.name + getTraceId(i) }}
+
+
+
+
+
+
+
+
diff --git a/src/views/dashboard/panel/Widget.vue b/src/views/dashboard/panel/Widget.vue
deleted file mode 100644
index 82201551..00000000
--- a/src/views/dashboard/panel/Widget.vue
+++ /dev/null
@@ -1,71 +0,0 @@
-
-
-
-
-
-
diff --git a/tsconfig.json b/tsconfig.json
index 3587ae2e..045b4baf 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -34,7 +34,7 @@
"webpack-env",
"jest"
],
- "typeRoots": ["./node_modules/@types/", "./types"],
+ "typeRoots": ["./node_modules/@types/"],
"paths": {
"@/*": [
"src/*"
diff --git a/type.d.ts b/type.d.ts
deleted file mode 100644
index ecbfb242..00000000
--- a/type.d.ts
+++ /dev/null
@@ -1,114 +0,0 @@
-/**
- * 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.
- */
-import type {
- ComponentRenderProxy,
- VNode,
- VNodeChild,
- ComponentPublicInstance,
- FunctionalComponent,
- PropType as VuePropType,
-} from "vue";
-
-declare module "three";
-declare module "three-orbit-controls";
-declare module "element-plus";
-declare global {
- const __APP_INFO__: {
- pkg: {
- name: string;
- version: string;
- dependencies: Recordable
+
+
+
+ $Service
+
+
+ $ServiceInstance
+
+
+ $DestinationService
+
+
+ $DestinationServiceInstance
+
+