merge

.github/workflows/nodejs.yml

@@ -44,9 +44,9 @@ jobs:
         uses: actions/setup-node@v1
         with:
           node-version: ${{ matrix.node-version }}
-      - name: npm install, lint, build, and test
+      - name: npm ci, lint, build, and test
         run: |
-          npm install
+          npm ci
           npm run lint
           npm run build --if-present
           npm run test:unit

package-lock.json

@@ -510,9 +510,9 @@
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.16.8",
+      "version": "7.19.0",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.16.8.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.19.0.tgz",
-      "integrity": "sha512-i7jDUfrVBWc+7OKcBzEe5n7fbv3i2fWtxKzzCvOjnzSxMfWMigAhtfJ7qzZNGFNMsCCd67+uz553dYKWXPvCKw==",
+      "integrity": "sha512-74bEXKX2h+8rrfQUfsBfuZZHzsEs6Eql4pqy/T4Nn6Y9wNPggQOqD6z6pn5Bl8ZfysKouFZT/UXEH94ummEeQw==",
       "bin": {
         "parser": "bin/babel-parser.js"
       },
@@ -3433,8 +3433,16 @@
     "node_modules/@types/lodash": {
       "version": "4.14.179",
       "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.179.tgz",
-      "integrity": "sha512-uwc1x90yCKqGcIOAT6DwOSuxnrAbpkdPsUOZtwrXb4D/6wZs+6qG7QnIawDuZWg0sWpxl+ltIKCaLoMlna678w==",
+      "integrity": "sha512-uwc1x90yCKqGcIOAT6DwOSuxnrAbpkdPsUOZtwrXb4D/6wZs+6qG7QnIawDuZWg0sWpxl+ltIKCaLoMlna678w=="
-      "dev": true
+    },
+    "node_modules/@types/lodash-es": {
+      "version": "4.17.6",
+      "resolved": "https://registry.npmjs.org/@types/lodash-es/-/lodash-es-4.17.6.tgz",
+      "integrity": "sha512-R+zTeVUKDdfoRxpAryaQNRKk3105Rrgx2CFRClIgRGaqDTdjsm8h6IYA8ir584W3ePzkZfst5xIgDwYrlh9HLg==",
+      "peer": true,
+      "dependencies": {
+        "@types/lodash": "*"
+      }
     },
     "node_modules/@types/mime": {
       "version": "1.3.2",
@@ -4948,6 +4956,46 @@
         "@vue/cli-service": "^3.0.0 || ^4.0.0-0"
       }
     },
+    "node_modules/@vue/cli-plugin-unit-jest/node_modules/@vue/compiler-sfc": {
+      "version": "2.7.10",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-2.7.10.tgz",
+      "integrity": "sha512-55Shns6WPxlYsz4WX7q9ZJBL77sKE1ZAYNYStLs6GbhIOMrNtjMvzcob6gu3cGlfpCR4bT7NXgyJ3tly2+Hx8Q==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@babel/parser": "^7.18.4",
+        "postcss": "^8.4.14",
+        "source-map": "^0.6.1"
+      }
+    },
+    "node_modules/@vue/cli-plugin-unit-jest/node_modules/@vue/compiler-sfc/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true,
+      "peer": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/@vue/cli-plugin-unit-jest/node_modules/csstype": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.0.tgz",
+      "integrity": "sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA==",
+      "dev": true,
+      "peer": true
+    },
+    "node_modules/@vue/cli-plugin-unit-jest/node_modules/vue": {
+      "version": "2.7.10",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-2.7.10.tgz",
+      "integrity": "sha512-HmFC70qarSHPXcKtW8U8fgIkF6JGvjEmDiVInTkKZP0gIlEPhlVlcJJLkdGIDiNkIeA2zJPQTWJUI4iWe+AVfg==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@vue/compiler-sfc": "2.7.10",
+        "csstype": "^3.1.0"
+      }
+    },
     "node_modules/@vue/cli-plugin-unit-jest/node_modules/vue-jest": {
       "version": "3.0.7",
       "resolved": "https://registry.npmjs.org/vue-jest/-/vue-jest-3.0.7.tgz",
@@ -9967,6 +10015,13 @@
       "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.10.7.tgz",
       "integrity": "sha512-P6twpd70BcPK34K26uJ1KT3wlhpuOAPoMwJzpsIWUxHZ7wpmbdZL/hQqBDfz7hGurYSa5PhzdhDHtt319hL3ig=="
     },
+    "node_modules/de-indent": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",
+      "integrity": "sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==",
+      "dev": true,
+      "peer": true
+    },
     "node_modules/deasync": {
       "version": "0.1.24",
       "resolved": "https://registry.npmjs.org/deasync/-/deasync-0.1.24.tgz",
@@ -18831,9 +18886,9 @@
       "dev": true
     },
     "node_modules/nanoid": {
-      "version": "3.1.32",
+      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.32.tgz",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
-      "integrity": "sha512-F8mf7R3iT9bvThBoW4tGXhXFHCctyCiUUPrWF8WaTqa3h96d9QybkSeba43XVOOE3oiLfkVDe4bT8MeGmkrTxw==",
+      "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==",
       "bin": {
         "nanoid": "bin/nanoid.cjs"
       },
@@ -20451,20 +20506,26 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.5",
+      "version": "8.4.16",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.5.tgz",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.16.tgz",
-      "integrity": "sha512-jBDboWM8qpaqwkMwItqTQTiFikhs/67OYVvblFFTM7MrZjt6yMKd6r2kgXizEbTTljacm4NldIlZnhbjr84QYg==",
+      "integrity": "sha512-ipHE1XBvKzm5xI7hiHCZJCSugxvsdq2mPnsq5+UF+VHCjiBvtDrlxJfMBToWaP9D5XlgNmcFGqoHmUn0EYEaRQ==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        }
+      ],
       "dependencies": {
-        "nanoid": "^3.1.30",
+        "nanoid": "^3.3.4",
         "picocolors": "^1.0.0",
-        "source-map-js": "^1.0.1"
+        "source-map-js": "^1.0.2"
       },
       "engines": {
         "node": "^10 || ^12 || >=14"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/postcss/"
       }
     },
     "node_modules/postcss-calc": {
@@ -24413,9 +24474,9 @@
       }
     },
     "node_modules/source-map-js": {
-      "version": "1.0.1",
+      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
-      "integrity": "sha512-4+TN2b3tqOCd/kaGRJ/sTYA0tR0mdXx26ipdolxcwtJVqEnqNYvlCAt1q3ypy4QMlYus+Zh34RNtYLoq2oQ4IA==",
+      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
       "engines": {
         "node": ">=0.10.0"
       }
@@ -27845,6 +27906,17 @@
       "integrity": "sha1-M7QHd3VMZDJXPBIMw4CLvRDUfwQ=",
       "dev": true
     },
+    "node_modules/vue-template-compiler": {
+      "version": "2.7.10",
+      "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.7.10.tgz",
+      "integrity": "sha512-QO+8R9YRq1Gudm8ZMdo/lImZLJVUIAM8c07Vp84ojdDAf8HmPJc7XB556PcXV218k2AkKznsRz6xB5uOjAC4EQ==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "de-indent": "^1.0.2",
+        "he": "^1.2.0"
+      }
+    },
     "node_modules/vue-template-es2015-compiler": {
       "version": "1.9.1",
       "resolved": "https://registry.npmjs.org/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz",
@@ -29975,9 +30047,9 @@
       }
     },
     "@babel/parser": {
-      "version": "7.16.8",
+      "version": "7.19.0",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.16.8.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.19.0.tgz",
-      "integrity": "sha512-i7jDUfrVBWc+7OKcBzEe5n7fbv3i2fWtxKzzCvOjnzSxMfWMigAhtfJ7qzZNGFNMsCCd67+uz553dYKWXPvCKw=="
+      "integrity": "sha512-74bEXKX2h+8rrfQUfsBfuZZHzsEs6Eql4pqy/T4Nn6Y9wNPggQOqD6z6pn5Bl8ZfysKouFZT/UXEH94ummEeQw=="
     },
     "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": {
       "version": "7.16.7",
@@ -32249,8 +32321,16 @@
     "@types/lodash": {
       "version": "4.14.179",
       "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.179.tgz",
-      "integrity": "sha512-uwc1x90yCKqGcIOAT6DwOSuxnrAbpkdPsUOZtwrXb4D/6wZs+6qG7QnIawDuZWg0sWpxl+ltIKCaLoMlna678w==",
+      "integrity": "sha512-uwc1x90yCKqGcIOAT6DwOSuxnrAbpkdPsUOZtwrXb4D/6wZs+6qG7QnIawDuZWg0sWpxl+ltIKCaLoMlna678w=="
-      "dev": true
+    },
+    "@types/lodash-es": {
+      "version": "4.17.6",
+      "resolved": "https://registry.npmjs.org/@types/lodash-es/-/lodash-es-4.17.6.tgz",
+      "integrity": "sha512-R+zTeVUKDdfoRxpAryaQNRKk3105Rrgx2CFRClIgRGaqDTdjsm8h6IYA8ir584W3ePzkZfst5xIgDwYrlh9HLg==",
+      "peer": true,
+      "requires": {
+        "@types/lodash": "*"
+      }
     },
     "@types/mime": {
       "version": "1.3.2",
@@ -33439,6 +33519,45 @@
         "vue-jest": "^3.0.5"
       },
       "dependencies": {
+        "@vue/compiler-sfc": {
+          "version": "2.7.10",
+          "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-2.7.10.tgz",
+          "integrity": "sha512-55Shns6WPxlYsz4WX7q9ZJBL77sKE1ZAYNYStLs6GbhIOMrNtjMvzcob6gu3cGlfpCR4bT7NXgyJ3tly2+Hx8Q==",
+          "dev": true,
+          "peer": true,
+          "requires": {
+            "@babel/parser": "^7.18.4",
+            "postcss": "^8.4.14",
+            "source-map": "^0.6.1"
+          },
+          "dependencies": {
+            "source-map": {
+              "version": "0.6.1",
+              "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+              "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+              "dev": true,
+              "peer": true
+            }
+          }
+        },
+        "csstype": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.0.tgz",
+          "integrity": "sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA==",
+          "dev": true,
+          "peer": true
+        },
+        "vue": {
+          "version": "2.7.10",
+          "resolved": "https://registry.npmjs.org/vue/-/vue-2.7.10.tgz",
+          "integrity": "sha512-HmFC70qarSHPXcKtW8U8fgIkF6JGvjEmDiVInTkKZP0gIlEPhlVlcJJLkdGIDiNkIeA2zJPQTWJUI4iWe+AVfg==",
+          "dev": true,
+          "peer": true,
+          "requires": {
+            "@vue/compiler-sfc": "2.7.10",
+            "csstype": "^3.1.0"
+          }
+        },
         "vue-jest": {
           "version": "3.0.7",
           "resolved": "https://registry.npmjs.org/vue-jest/-/vue-jest-3.0.7.tgz",
@@ -37456,6 +37575,13 @@
       "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.10.7.tgz",
       "integrity": "sha512-P6twpd70BcPK34K26uJ1KT3wlhpuOAPoMwJzpsIWUxHZ7wpmbdZL/hQqBDfz7hGurYSa5PhzdhDHtt319hL3ig=="
     },
+    "de-indent": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",
+      "integrity": "sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==",
+      "dev": true,
+      "peer": true
+    },
     "deasync": {
       "version": "0.1.24",
       "resolved": "https://registry.npmjs.org/deasync/-/deasync-0.1.24.tgz",
@@ -44424,9 +44550,9 @@
       "dev": true
     },
     "nanoid": {
-      "version": "3.1.32",
+      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.32.tgz",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
-      "integrity": "sha512-F8mf7R3iT9bvThBoW4tGXhXFHCctyCiUUPrWF8WaTqa3h96d9QybkSeba43XVOOE3oiLfkVDe4bT8MeGmkrTxw=="
+      "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw=="
     },
     "nanomatch": {
       "version": "1.2.13",
@@ -45679,13 +45805,13 @@
       "dev": true
     },
     "postcss": {
-      "version": "8.4.5",
+      "version": "8.4.16",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.5.tgz",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.16.tgz",
-      "integrity": "sha512-jBDboWM8qpaqwkMwItqTQTiFikhs/67OYVvblFFTM7MrZjt6yMKd6r2kgXizEbTTljacm4NldIlZnhbjr84QYg==",
+      "integrity": "sha512-ipHE1XBvKzm5xI7hiHCZJCSugxvsdq2mPnsq5+UF+VHCjiBvtDrlxJfMBToWaP9D5XlgNmcFGqoHmUn0EYEaRQ==",
       "requires": {
-        "nanoid": "^3.1.30",
+        "nanoid": "^3.3.4",
         "picocolors": "^1.0.0",
-        "source-map-js": "^1.0.1"
+        "source-map-js": "^1.0.2"
       },
       "dependencies": {
         "picocolors": {
@@ -48795,9 +48921,9 @@
       "dev": true
     },
     "source-map-js": {
-      "version": "1.0.1",
+      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
-      "integrity": "sha512-4+TN2b3tqOCd/kaGRJ/sTYA0tR0mdXx26ipdolxcwtJVqEnqNYvlCAt1q3ypy4QMlYus+Zh34RNtYLoq2oQ4IA=="
+      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw=="
     },
     "source-map-resolve": {
       "version": "0.5.3",
@@ -51480,6 +51606,17 @@
         }
       }
     },
+    "vue-template-compiler": {
+      "version": "2.7.10",
+      "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.7.10.tgz",
+      "integrity": "sha512-QO+8R9YRq1Gudm8ZMdo/lImZLJVUIAM8c07Vp84ojdDAf8HmPJc7XB556PcXV218k2AkKznsRz6xB5uOjAC4EQ==",
+      "dev": true,
+      "peer": true,
+      "requires": {
+        "de-indent": "^1.0.2",
+        "he": "^1.2.0"
+      }
+    },
     "vue-template-es2015-compiler": {
       "version": "1.9.1",
       "resolved": "https://registry.npmjs.org/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz",

src/hooks/data.ts

@@ -37,6 +37,7 @@ export enum Calculations {
   PercentageAvg = "percentageAvg",
   ApdexAvg = "apdexAvg",
   SecondToDay = "secondToDay",
+  NanosecondToMillisecond = "nanosecondToMillisecond",
 }
 export enum sizeEnum {
   XS = "XS",

src/hooks/useProcessor.ts

@@ -397,7 +397,7 @@ export function aggregation(
       data = (val / 1024 / 1024 / 1024).toFixed(2);
       break;
     case Calculations.Apdex:
-      data = val / 10000;
+      data = (val / 10000).toFixed(2);
       break;
     case Calculations.ConvertSeconds:
       data = dayjs(val * 1000).format("YYYY-MM-DD HH:mm:ss");
@@ -414,6 +414,9 @@ export function aggregation(
     case Calculations.SecondToDay:
       data = (val / 86400).toFixed(2);
       break;
+    case Calculations.NanosecondToMillisecond:
+      data = (val / 1000 / 1000).toFixed(2);
+      break;
     default:
       data;
       break;

src/layout/components/NavBar.vue

@@ -18,7 +18,7 @@ limitations under the License. -->
     <div class="app-config">
       <span class="red" v-show="timeRange">{{ t("timeTips") }}</span>
       <TimePicker
-        :value="time"
+        :value="[appStore.durationRow.start, appStore.durationRow.end]"
         position="bottom"
         format="YYYY-MM-DD HH:mm"
         @input="changeTimeRange"
@@ -55,17 +55,12 @@ import { useI18n } from "vue-i18n";
 import timeFormat from "@/utils/timeFormat";
 import { useAppStoreWithOut } from "@/store/modules/app";
 import { ElMessage } from "element-plus";
-import getLocalTime from "@/utils/localtime";
 
 const { t } = useI18n();
 const appStore = useAppStoreWithOut();
 const route = useRoute();
 const pageName = ref<string>("");
 const timeRange = ref<number>(0);
-const time = ref<Date[]>([
-  appStore.durationRow.start,
-  appStore.durationRow.end,
-]);
 
 resetDuration();
 getVersion();
@@ -73,15 +68,13 @@ const setConfig = (value: string) => {
   pageName.value = value || "";
 };
 
-const handleReload = () => {
+function handleReload() {
   const gap =
     appStore.duration.end.getTime() - appStore.duration.start.getTime();
-  const dates: Date[] = [
+  const dates: Date[] = [new Date(new Date().getTime() - gap), new Date()];
-    getLocalTime(appStore.utc, new Date(new Date().getTime() - gap)),
-    getLocalTime(appStore.utc, new Date()),
-  ];
   appStore.setDuration(timeFormat(dates));
-};
+}
+
 function changeTimeRange(val: Date[] | any) {
   timeRange.value =
     val[1].getTime() - val[0].getTime() > 60 * 24 * 60 * 60 * 1000 ? 1 : 0;
@@ -114,7 +107,6 @@ function resetDuration() {
       step: d.step,
     });
     appStore.updateUTC(d.utc);
-    time.value = [new Date(d.start), new Date(d.end)];
   }
 }
 </script>

src/locales/lang/en.ts

@@ -152,6 +152,7 @@ const msg = {
   text: "Text",
   query: "Query",
   postgreSQL: "PostgreSQL",
+  endpointTips: "The table shows up to 20 pieces of endpoints.",
   seconds: "Seconds",
   hourTip: "Select Hour",
   minuteTip: "Select Minute",

src/locales/lang/es.ts

@@ -152,6 +152,7 @@ const msg = {
   enableAssociate: "Activar asociación",
   query: "Consulta",
   postgreSQL: "PostgreSQL",
+  endpointTips: "Aquí, la tabla muestra hasta 20 punto final.",
   seconds: "Segundos",
   hourTip: "Seleccione Hora",
   minuteTip: "Seleccione Minuto",

src/locales/lang/zh.ts

@@ -149,6 +149,7 @@ const msg = {
   text: "文本",
   query: "查询",
   postgreSQL: "PostgreSQL",
+  endpointTips: "这里最多展示20条endpoints。",
   seconds: "秒",
   hourTip: "选择小时",
   minuteTip: "选择分钟",

src/views/dashboard/configuration/widget/AssociateOptions.vue

@@ -40,15 +40,16 @@ const widgetIds = ref<string[]>(
   associate.map((d: { widgetId: string }) => d.widgetId)
 );
 const widgets: any = computed(() => {
-  const all = getDashboard(dashboardStore.currentDashboard).widgets;
+  const widgetList = getDashboard(dashboardStore.currentDashboard).widgets;
-  const items = all.filter((d: any) => {
+  const items = [];
+  for (const d of widgetList) {
     const isLinear = ["Bar", "Line", "Area"].includes(
       (d.graph && d.graph.type) || ""
     );
     if (isLinear && d.id && dashboardStore.selectedGrid.id !== d.id) {
-      return { value: d.id, label: (d.widget && d.widget.name) || d.id };
+      items.push({ value: d.id, label: (d.widget && d.widget.name) || d.id });
     }
-  });
+  }
   return items;
 });
 function updateWidgetConfig(options: Option[]) {

src/views/dashboard/controls/NetworkProfiling.vue

@@ -30,7 +30,7 @@ limitations under the License. -->
         <span>{{ t("delete") }}</span>
       </div>
     </el-popover>
-    <Content />
+    <Content :config="props.data" />
   </div>
 </template>
 <script lang="ts" setup>

src/views/dashboard/controls/Tab.vue

@@ -194,6 +194,7 @@ export default defineComponent({
       editTabIndex.value = index;
     }
     function handleClick(el: any) {
+      el.stopPropagation();
       needQuery.value = true;
       if (["tab-name", "edit-tab"].includes(el.target.className)) {
         return;

src/views/dashboard/data.ts

@@ -297,4 +297,5 @@ export const CalculationOpts = [
   { label: "Precision is 2", value: "precision" },
   { label: "Milliseconds to seconds", value: "msTos" },
   { label: "Seconds to days", value: "secondToDay" },
+  { label: "Nanoseconds to milliseconds", value: "nanosecondToMillisecond" },
 ];

src/views/dashboard/graphs/EndpointList.vue

@@ -17,17 +17,17 @@ limitations under the License. -->
     <div class="search">
       <el-input
         v-model="searchText"
-        placeholder="Please input endpoint name"
+        placeholder="Search for more endpoints"
-        size="small"
         @change="searchList"
         class="inputs"
       >
         <template #append>
-          <el-button size="small" @click="searchList">
+          <el-button @click="searchList" class="btn">
-            <Icon size="sm" iconName="search" />
+            <Icon size="middle" iconName="search" />
           </el-button>
         </template>
       </el-input>
+      <span class="ml-5 tips">{{ t("endpointTips") }}</span>
     </div>
     <div class="list">
       <el-table v-loading="chartLoading" :data="endpoints" style="width: 100%">
@@ -56,6 +56,7 @@ limitations under the License. -->
 import { ref, watch, computed } from "vue";
 import { useSelectorStore } from "@/store/modules/selectors";
 import { ElMessage } from "element-plus";
+import { useI18n } from "vue-i18n";
 import type { PropType } from "vue";
 import { EndpointListConfig } from "@/types/dashboard";
 import { Endpoint } from "@/types/selector";
@@ -92,6 +93,7 @@ const props = defineProps({
   intervalTime: { type: Array as PropType<string[]>, default: () => [] },
 });
 
+const { t } = useI18n();
 const selectorStore = useSelectorStore();
 const dashboardStore = useDashboardStore();
 const chartLoading = ref<boolean>(false);
@@ -191,11 +193,7 @@ watch(
 <style lang="scss" scoped>
 @import "./style.scss";
 
-.chart {
+.tips {
-  height: 60px;
+  color: rgba(255, 0, 0, 0.5);
-}
-
-.inputs {
-  width: 300px;
 }
 </style>

src/views/dashboard/graphs/InstanceList.vue

@@ -18,12 +18,11 @@ limitations under the License. -->
       <el-input
         v-model="searchText"
         placeholder="Please input instance name"
-        size="small"
         @change="searchList"
         class="inputs"
       >
         <template #append>
-          <el-button size="small" @click="searchList">
+          <el-button class="btn" @click="searchList">
             <Icon size="sm" iconName="search" />
           </el-button>
         </template>
@@ -243,14 +242,6 @@ watch(
 <style lang="scss" scoped>
 @import "./style.scss";
 
-.chart {
-  height: 60px;
-}
-
-.inputs {
-  width: 300px;
-}
-
 .attributes {
   max-height: 400px;
   overflow: auto;

src/views/dashboard/graphs/ServiceList.vue

@@ -18,12 +18,11 @@ limitations under the License. -->
       <el-input
         v-model="searchText"
         placeholder="Please input service name"
-        size="small"
         @change="searchList"
         class="inputs mt-5"
       >
         <template #append>
-          <el-button size="small" @click="searchList">
+          <el-button class="btn" @click="searchList">
             <Icon size="sm" iconName="search" />
           </el-button>
         </template>
@@ -286,8 +285,4 @@ watch(
 </script>
 <style lang="scss" scoped>
 @import "./style.scss";
-
-.inputs {
-  width: 300px;
-}
 </style>

src/views/dashboard/graphs/style.scss

@@ -23,6 +23,7 @@
 .list {
   margin-top: 10px;
   margin-bottom: 10px;
+  height: calc(100% - 90px);
 }
 
 .pagination {
@@ -40,9 +41,21 @@
 }
 
 .search {
-  text-align: right;
+  margin-top: 5px;
 }
 
 .input-with-search {
   width: 400px;
 }
+
+.btn {
+  margin-top: -12px;
+}
+
+.chart {
+  height: 60px;
+}
+
+.inputs {
+  width: 300px;
+}

src/views/dashboard/related/network-profiling/Content.vue

@@ -15,24 +15,31 @@ limitations under the License. -->
 <template>
   <div class="flex-h content">
     <Tasks />
-    <div
+    <div class="vis-graph ml-5" v-loading="networkProfilingStore.loadNodes">
-      class="vis-graph ml-5"
+      <process-topology
-      v-if="networkProfilingStore.nodes.length"
+        v-if="networkProfilingStore.nodes.length"
-      v-loading="networkProfilingStore.loadNodes"
+        :config="config"
-    >
+      />
-      <process-topology />
+      <div class="text" v-else>
-    </div>
+        {{ t("noData") }}
-    <div class="text" v-else v-loading="networkProfilingStore.loadNodes">
+      </div>
-      {{ t("noData") }}
     </div>
   </div>
 </template>
 <script lang="ts" setup>
+import type { PropType } from "vue";
 import { useI18n } from "vue-i18n";
 import Tasks from "./components/Tasks.vue";
 import ProcessTopology from "./components/ProcessTopology.vue";
 import { useNetworkProfilingStore } from "@/store/modules/network-profiling";
 
+/*global defineProps */
+defineProps({
+  config: {
+    type: Object as PropType<any>,
+    default: () => ({ graph: {} }),
+  },
+});
 const networkProfilingStore = useNetworkProfilingStore();
 const { t } = useI18n();
 </script>
@@ -52,7 +59,7 @@ const { t } = useI18n();
 }
 
 .text {
-  width: calc(100% - 330px);
+  width: 100%;
   text-align: center;
   margin-top: 30px;
 }

src/views/dashboard/related/network-profiling/components/ProcessTopology.vue

@@ -98,12 +98,7 @@ limitations under the License. -->
   </div>
   <el-popover placement="bottom" :width="295" trigger="click">
     <template #reference>
-      <div
+      <div class="switch-icon-edit ml-5" title="Settings" @click="setConfig">
-        class="switch-icon-edit ml-5"
-        title="Settings"
-        @click="setConfig"
-        v-if="dashboardStore.editMode"
-      >
         <Icon size="middle" iconName="setting_empty" />
       </div>
     </template>
@@ -157,7 +152,7 @@ const link = ref<any>(null);
 const anchor = ref<any>(null);
 const arrow = ref<any>(null);
 const oldVal = ref<{ width: number; height: number }>({ width: 0, height: 0 });
-const config = ref<any>({});
+const config = ref<any>(props.config || {});
 const diff = ref<number[]>([220, 200]);
 const radius = 210;
 const dates = ref<Nullable<{ start: number; end: number }>>(null);

src/views/dashboard/related/network-profiling/components/Settings.vue

@@ -15,7 +15,7 @@ limitations under the License. -->
 <template>
   <div class="label">{{ t("linkDashboard") }}</div>
   <Selector
-    :value="linkDashboard"
+    :value="dashboardStore.selectedGrid.linkDashboard || ''"
     :options="linkDashboards"
     size="small"
     placeholder="Please input a dashboard name for calls"
@@ -37,8 +37,6 @@ const dashboardStore = useDashboardStore();
 const linkDashboards = ref<
   (DashboardItem & { label: string; value: string })[]
 >([]);
-const { selectedGrid } = dashboardStore;
-const linkDashboard = ref<string>(selectedGrid.linkDashboard || "");
 
 onMounted(() => {
   getDashboards();
@@ -64,10 +62,10 @@ function getDashboards() {
 }
 
 function changeLinkDashboard(opt: { value: string }[]) {
-  linkDashboard.value = opt[0].value;
+  const linkDashboard = opt.length ? opt[0].value : "";
   const p = {
     ...dashboardStore.selectedGrid,
-    linkDashboard: opt[0].value,
+    linkDashboard,
   };
   dashboardStore.selectWidget(p);
   dashboardStore.setConfigs(p);