feat: add config

src/assets/icons/settings.svg

@@ -12,6 +12,6 @@ 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. -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
 <path d="M12 15.516q1.453 0 2.484-1.031t1.031-2.484-1.031-2.484-2.484-1.031-2.484 1.031-1.031 2.484 1.031 2.484 2.484 1.031zM19.453 12.984l2.109 1.641q0.328 0.234 0.094 0.656l-2.016 3.469q-0.188 0.328-0.609 0.188l-2.484-0.984q-0.984 0.703-1.688 0.984l-0.375 2.625q-0.094 0.422-0.469 0.422h-4.031q-0.375 0-0.469-0.422l-0.375-2.625q-0.891-0.375-1.688-0.984l-2.484 0.984q-0.422 0.141-0.609-0.188l-2.016-3.469q-0.234-0.422 0.094-0.656l2.109-1.641q-0.047-0.328-0.047-0.984t0.047-0.984l-2.109-1.641q-0.328-0.234-0.094-0.656l2.016-3.469q0.188-0.328 0.609-0.188l2.484 0.984q0.984-0.703 1.688-0.984l0.375-2.625q0.094-0.422 0.469-0.422h4.031q0.375 0 0.469 0.422l0.375 2.625q0.891 0.375 1.688 0.984l2.484-0.984q0.422-0.141 0.609 0.188l2.016 3.469q0.234 0.422-0.094 0.656l-2.109 1.641q0.047 0.328 0.047 0.984t-0.047 0.984z"></path>
 </svg>

src/locales/lang/en.ts

@@ -400,5 +400,7 @@ const msg = {
   uriList: "URI List",
   processes: "Processes",
   monitorInstances: "Monitor Instances",
+  processDashboards: "Process Dashboards",
+  instanceDashboards: "Instance Dashboards",
 };
 export default msg;

src/locales/lang/es.ts

@@ -399,5 +399,7 @@ const msg = {
   processes: "Proceso",
   attributes: "Atributos",
   monitorInstances: "Ejemplo de Monitor",
+  processDashboards: "Tablero de proceso",
+  instanceDashboards: "Tablero de ejemplo",
 };
 export default msg;

src/locales/lang/zh.ts

@@ -397,5 +397,7 @@ const msg = {
   processes: "进程",
   attributes: "属性",
   monitorInstances: "监视实例",
+  processDashboards: "进程仪表板",
+  instanceDashboards: "实例仪表板",
 };
 export default msg;

src/views/dashboard/configuration/ContinuousProfiling.vue

@@ -0,0 +1,108 @@
+<!-- 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. -->
+<template>
+  <div class="item">
+    <div>{{ t("instanceDashboards") }}</div>
+    <Selector
+      :value="instanceDashboardName || ''"
+      :options="instanceDashboards"
+      size="small"
+      placeholder="Please select a dashboard name"
+      @change="changeDashboard({ instanceDashboardName: $event[0].value })"
+      class="selectors"
+      :clearable="true"
+    />
+  </div>
+  <div class="item">
+    <div>{{ t("processDashboards") }}</div>
+    <Selector
+      :value="processDashboardName || ''"
+      :options="processDashboards"
+      size="small"
+      placeholder="Please select a dashboard name"
+      @change="changeDashboard({ processDashboardName: $event[0].value })"
+      class="selectors"
+      :clearable="true"
+    />
+  </div>
+  <div class="footer">
+    <el-button size="small">
+      {{ t("cancel") }}
+    </el-button>
+    <el-button size="small" type="primary" @click="applyConfig">
+      {{ t("apply") }}
+    </el-button>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { ref } from "vue";
+  import { useI18n } from "vue-i18n";
+  import { useDashboardStore } from "@/store/modules/dashboard";
+  import { EntityType } from "../data";
+  import type { DashboardItem } from "@/types/dashboard";
+
+  const { t } = useI18n();
+  const dashboardStore = useDashboardStore();
+  const instanceDashboardName = ref<boolean>(dashboardStore.selectedGrid.instanceDashboardName);
+  const processDashboardName = ref<number>(dashboardStore.selectedGrid.processDashboardName);
+  const list = JSON.parse(sessionStorage.getItem("dashboards") || "[]");
+  const instanceDashboards: Array<DashboardItem & { label: string; value: string }> = [];
+  const processDashboards: Array<DashboardItem & { label: string; value: string }> = [];
+
+  for (const item of list) {
+    if (item.layer === dashboardStore.layerId) {
+      const i = {
+        ...item,
+        label: item.name,
+        value: item.name,
+      };
+      if (item.entity === EntityType[8].value) {
+        processDashboards.push(i);
+      }
+      if (item.entity === EntityType[3].value) {
+        instanceDashboards.push(i);
+      }
+    }
+  }
+
+  function applyConfig() {
+    dashboardStore.setConfigs(dashboardStore.selectedGrid);
+    dashboardStore.setConfigPanel(false);
+  }
+  function changeDashboard(param: { [key: string]: unknown }) {
+    dashboardStore.selectWidget({
+      ...dashboardStore.selectedGrid,
+      ...param,
+    });
+  }
+</script>
+<style lang="scss" scoped>
+  .footer {
+    position: fixed;
+    bottom: 0;
+    right: 0;
+    border-top: 1px solid #eee;
+    padding: 10px;
+    text-align: right;
+    width: 100%;
+    background-color: #fff;
+  }
+
+  .item {
+    margin: 10px 0;
+  }
+
+  .selectors {
+    width: 500px;
+  }
+</style>

src/views/dashboard/configuration/index.ts

@@ -21,6 +21,7 @@ import Topology from "./Topology.vue";
 import Event from "./Event.vue";
 import TimeRange from "./TimeRange.vue";
 import ThirdPartyApp from "./ThirdPartyApp.vue";
+import ContinuousProfiling from "./ContinuousProfiling.vue";
 
 export default {
   Text,
@@ -29,4 +30,5 @@ export default {
   Event,
   TimeRange,
   ThirdPartyApp,
+  ContinuousProfiling,
 };

src/views/dashboard/controls/ContinuousProfiling.vue

@@ -21,6 +21,9 @@ limitations under the License. -->
           <Icon iconName="ellipsis_v" size="middle" />
         </span>
       </template>
+      <div class="tools" @click="editConfig">
+        <span>{{ t("edit") }}</span>
+      </div>
       <div class="tools" @click="removeWidget">
         <span>{{ t("delete") }}</span>
       </div>
@@ -49,6 +52,11 @@ limitations under the License. -->
   function removeWidget() {
     dashboardStore.removeControls(props.data);
   }
+
+  function editConfig() {
+    dashboardStore.setConfigPanel(true);
+    dashboardStore.selectWidget(props.data);
+  }
 </script>
 <style lang="scss" scoped>
   .profile-wrapper {

src/views/dashboard/graphs/style.scss

@@ -38,6 +38,7 @@
   color: #409eff;
   display: inline-block;
   width: 100%;
+  text-decoration: underline;
 }
 
 .search {

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

@@ -15,11 +15,8 @@ limitations under the License. -->
 <template>
   <div class="flex-h content">
     <policy-list />
-    <div class="flex-v list">
+    <div class="flex-v list" v-loading="continousProfilingStore.instancesLoading">
-      <div class="title">{{ t("monitorInstances") }}</div>
+      <instance-list />
-      <div class="instance-list" v-loading="continousProfilingStore.instancesLoading">
-        <instance-list />
-      </div>
     </div>
   </div>
 </template>
@@ -53,18 +50,4 @@ limitations under the License. -->
     min-width: 600px;
     overflow: hidden;
   }
-
-  .instance-list {
-    height: 100%;
-    width: 100%;
-    overflow: auto;
-  }
-
-  .title {
-    font-size: 13px;
-    font-weight: bold;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
-    padding: 10px 20px;
-    background-color: #f3f4f9;
-  }
 </style>

src/views/dashboard/related/continuous-profiling/components/InstanceList.vue

@@ -13,7 +13,10 @@ 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. -->
 <template>
-  <el-table :data="currentInstances" style="width: 99%">
+  <div class="header">
+    {{ t("monitorInstances") }}
+  </div>
+  <el-table :data="currentInstances" style="width: 99%" height="440">
     <el-table-column type="expand">
       <template #default="props">
         <div class="child">
@@ -23,6 +26,13 @@ limitations under the License. -->
           </div>
           <div class="title mt-10">{{ t("processes") }}</div>
           <el-table :data="props.row.processes" size="small" max-height="300">
+            <el-table-column prop="name" label="Name">
+              <template #default="scope">
+                <span class="link">
+                  {{ scope.row.name }}
+                </span>
+              </template>
+            </el-table-column>
             <el-table-column
               v-for="item in HeaderChildLabels"
               :key="item.value"
@@ -34,6 +44,13 @@ limitations under the License. -->
         </div>
       </template>
     </el-table-column>
+    <el-table-column prop="name" label="Name">
+      <template #default="scope">
+        <span class="link">
+          {{ scope.row.name }}
+        </span>
+      </template>
+    </el-table-column>
     <el-table-column
       v-for="item in HeaderLabels"
       :key="item.value"
@@ -108,4 +125,28 @@ limitations under the License. -->
   .child {
     padding-left: 20px;
   }
+
+  .header {
+    font-size: 13px;
+    font-weight: bold;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
+    padding: 10px 20px;
+    background-color: #f3f4f9;
+  }
+
+  .settings {
+    padding: 1px 0;
+    border: 1px solid #666;
+    border-radius: 3px;
+    color: #666;
+    cursor: pointer;
+  }
+
+  .link {
+    cursor: pointer;
+    color: #409eff;
+    display: inline-block;
+    width: 100%;
+    text-decoration: underline;
+  }
 </style>

src/views/dashboard/related/continuous-profiling/data.ts

@@ -32,13 +32,11 @@ export const TargetTypes = [
 export const ComponentType = "CONTINOUS_PROFILING";
 
 export const HeaderLabels = [
-  { value: "name", label: "Name" },
   { value: "triggeredCount", label: "Triggered Count", width: 150 },
   { value: "lastTriggerTime", label: "Last Trigger Time", width: 170 },
 ];
 
 export const HeaderChildLabels = [
-  { value: "name", label: "Name" },
   { value: "detectType", label: "Detect Type", width: 100 },
   { value: "triggeredCount", label: "Triggered Count", width: 120 },
   { value: "lastTriggerTime", label: "Last Trigger Time", width: 160 },