From ebef339cdf7c4bc3c505902270632ff8fa727eb0 Mon Sep 17 00:00:00 2001
From: Qiuxia Fan <fine0830@outlook.com>
Date: Thu, 14 Apr 2022 12:39:59 +0800
Subject: [PATCH] set trend for avg

---
 src/assets/icons/timeline.svg              |  1 -
 src/hooks/useListConfig.ts                 |  1 -
 src/types/dashboard.ts                     |  1 +
 src/views/dashboard/graphs/ServiceList.vue | 74 +++++++++++++++-------
 src/views/dashboard/panel/Layout.vue       |  1 +
 5 files changed, 53 insertions(+), 25 deletions(-)

diff --git a/src/assets/icons/timeline.svg b/src/assets/icons/timeline.svg
index c7a074f0..64b37e5c 100644
--- a/src/assets/icons/timeline.svg
+++ b/src/assets/icons/timeline.svg
@@ -13,6 +13,5 @@ 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">
-<title>timeline</title>
 <path d="M23.016 8.016q0 0.797-0.609 1.383t-1.406 0.586h-0.047q-0.328 0-0.469-0.047l-3.563 3.563q0.094 0.281 0.094 0.516 0 0.797-0.609 1.383t-1.406 0.586-1.406-0.586-0.609-1.383q0-0.234 0.094-0.516l-2.578-2.578q-0.281 0.094-0.516 0.094t-0.516-0.094l-4.547 4.547q0.094 0.281 0.094 0.516 0 0.797-0.609 1.406t-1.406 0.609-1.406-0.609-0.609-1.406 0.609-1.383 1.406-0.586q0.375 0 0.516 0.047l4.547-4.547q-0.047-0.141-0.047-0.516 0-0.797 0.586-1.406t1.383-0.609 1.406 0.609 0.609 1.406q0 0.375-0.047 0.516l2.531 2.531q0.141-0.047 0.516-0.047t0.516 0.047l3.563-3.516q-0.094-0.281-0.094-0.516 0-0.797 0.609-1.406t1.406-0.609 1.406 0.609 0.609 1.406z"></path>
 </svg>
diff --git a/src/hooks/useListConfig.ts b/src/hooks/useListConfig.ts
index 08e7456b..e48e9edd 100644
--- a/src/hooks/useListConfig.ts
+++ b/src/hooks/useListConfig.ts
@@ -26,7 +26,6 @@ export function useListConfig(config: any, index: number) {
   const isAvg =
     config.metricTypes[index] === MetricQueryTypes.ReadMetricsValues &&
     calculation === Calculations.Average;
-
   return {
     isLinear: line,
     isAvg,
diff --git a/src/types/dashboard.ts b/src/types/dashboard.ts
index f4086d9d..6f60b6a0 100644
--- a/src/types/dashboard.ts
+++ b/src/types/dashboard.ts
@@ -73,6 +73,7 @@ export interface LineConfig extends AreaConfig {
   showXAxis?: boolean;
   showYAxis?: boolean;
   smallTips?: boolean;
+  showlabels?: boolean;
 }
 
 export interface AreaConfig {
diff --git a/src/views/dashboard/graphs/ServiceList.vue b/src/views/dashboard/graphs/ServiceList.vue
index 30046556..c8e53466 100644
--- a/src/views/dashboard/graphs/ServiceList.vue
+++ b/src/views/dashboard/graphs/ServiceList.vue
@@ -76,35 +76,44 @@ limitations under the License. -->
                   showlabels: false,
                 }"
               />
-              <el-popover
+              <span
+                class="item flex-h"
                 v-else-if="useListConfig(config, index).isAvg"
-                placement="left"
-                :width="400"
-                trigger="click"
               >
-                <template #reference>
+                <el-popover placement="left" :width="400" trigger="click">
+                  <template #reference>
+                    <span class="trend">
+                      <Icon
+                        iconName="timeline"
+                        size="middle"
+                        style="color: #409eff"
+                      />
+                    </span>
+                  </template>
+                  <div class="view-line">
+                    <Line
+                      :data="{
+                        [metric]: scope.row[metric] && scope.row[metric].values,
+                      }"
+                      :intervalTime="intervalTime"
+                      :config="{
+                        showXAxis: true,
+                        showYAxis: true,
+                        smallTips: false,
+                        showlabels: true,
+                      }"
+                    />
+                  </div>
+                </el-popover>
+                <span class="value">
                   <Card
                     :data="{
                       [metric]: scope.row[metric] && scope.row[metric].avg,
                     }"
                     :config="{ textAlign: 'left' }"
                   />
-                </template>
-                <div class="view-line">
-                  <Line
-                    :data="{
-                      [metric]: scope.row[metric] && scope.row[metric].values,
-                    }"
-                    :intervalTime="intervalTime"
-                    :config="{
-                      showXAxis: false,
-                      showYAxis: false,
-                      smallTips: true,
-                      showlabels: false,
-                    }"
-                  />
-                </div>
-              </el-popover>
+                </span>
+              </span>
               <Card
                 v-else
                 :data="{ [metric]: scope.row[metric] }"
@@ -272,7 +281,7 @@ async function queryServiceMetrics(currentServices: Service[]) {
     });
     return;
   }
-  console.log(services.value);
+
   services.value = currentServices;
 }
 function objectSpanMethod(param: any): any {
@@ -360,7 +369,26 @@ watch(
 }
 
 .view-line {
-  width: 300px;
+  width: 380px;
   height: 200px;
 }
+
+.item {
+  display: inline-block;
+  width: 100%;
+  height: 100%;
+}
+
+.trend {
+  width: 30px;
+  display: inline-block;
+  height: 100%;
+  cursor: pointer;
+}
+
+.value {
+  display: inline-block;
+  width: calc(100% - 30px);
+  height: 100%;
+}
 </style>
diff --git a/src/views/dashboard/panel/Layout.vue b/src/views/dashboard/panel/Layout.vue
index 409df42b..39eb8a6d 100644
--- a/src/views/dashboard/panel/Layout.vue
+++ b/src/views/dashboard/panel/Layout.vue
@@ -66,6 +66,7 @@ export default defineComponent({
       selectorStore.setCurrentService(null);
       selectorStore.setCurrentPod(null);
       dashboardStore.setEntity("");
+      dashboardStore.setConfigPanel(false);
     });
     return {
       dashboardStore,