From 3ccb605e678878ffdb474a58fc2b0349f6ac4aed Mon Sep 17 00:00:00 2001
From: Fine <fanxue0830@gmail.com>
Date: Sat, 20 Aug 2022 14:46:19 +0800
Subject: [PATCH] update components

---
 src/assets/icons/setting_empty.svg            | 16 ++++++
 src/assets/icons/time_range.svg               |  6 ++-
 .../related/network-profiling/Content.vue     | 23 ++-------
 .../components/ProcessTopology.vue            | 50 +++++++++----------
 .../components/Schedules.vue                  | 12 +----
 .../network-profiling/components/Settings.vue |  1 +
 .../network-profiling/components/Tasks.vue    |  2 +-
 7 files changed, 51 insertions(+), 59 deletions(-)
 create mode 100644 src/assets/icons/setting_empty.svg

diff --git a/src/assets/icons/setting_empty.svg b/src/assets/icons/setting_empty.svg
new file mode 100644
index 00000000..5384b35d
--- /dev/null
+++ b/src/assets/icons/setting_empty.svg
@@ -0,0 +1,16 @@
+
+<!-- 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. -->
+<svg t="1660977691229" class="icon" viewBox="0 0 1078 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2710" width="48" height="48"><path d="M538.947368 656.976842a147.402105 147.402105 0 0 1-147.240421-147.294316A147.348211 147.348211 0 0 1 538.947368 362.549895a147.348211 147.348211 0 0 1 147.240421 147.132631A147.402105 147.402105 0 0 1 538.947368 656.976842m0-345.465263a198.440421 198.440421 0 0 0-198.224842 198.224842A198.440421 198.440421 0 0 0 538.947368 707.907368a198.440421 198.440421 0 0 0 198.224843-198.224842A198.440421 198.440421 0 0 0 538.947368 311.511579m483.759158 269.473684c-2.694737 15.413895-21.557895 36.971789-42.199579 41.714526l-17.084631 4.149895a162.492632 162.492632 0 0 0-93.776842 75.237053 165.618526 165.618526 0 0 0-16.222316 123.79621l3.449263 11.210106c6.090105 22.258526-0.754526 45.756632-17.084632 60.631579-1.616842 1.293474-16.922947 13.904842-56.751157 36.971789-39.127579 22.635789-57.559579 30.019368-60.631579 31.151158a43.277474 43.277474 0 0 1-15.629474 2.533053c-16.437895 0-34.492632-7.006316-43.924211-17.300211l-12.018526-12.719158c-29.696-28.348632-69.685895-42.522947-110.160842-42.522947-42.361263 0-85.315368 15.521684-117.652211 46.672842l-7.922526 8.677053c-13.904842 15.198316-44.193684 20.372211-59.607579 14.713263-0.215579 0-18.432-6.790737-60.254316-31.097263-37.510737-21.719579-53.894737-34.384842-56.158315-36.163369-16.168421-13.850947-24.360421-41.229474-18.108632-61.224421l5.497263-18.701474a165.241263 165.241263 0 0 0-117.867789-193.42821l-11.425684-2.479158c-19.671579-4.527158-39.235368-25.276632-43.331369-47.696842-1.077895-5.012211-2.802526-31.258947-2.802526-65.536 0-50.122105 3.449263-68.769684 3.772631-70.332632 3.179789-18.054737 23.174737-38.426947 42.253474-42.792421l19.671579-4.688842a161.037474 161.037474 0 0 0 91.405474-74.590316 165.025684 165.025684 0 0 0 16.330105-123.957894l-3.772632-11.964632c-6.036211-19.402105 1.724632-46.672842 16.707369-59.284211 2.802526-2.317474 18.755368-15.090526 57.451789-37.564631 42.199579-24.468211 59.769263-30.72 60.038737-30.82779 16.168421-6.090105 44.948211-1.940211 60.146526 14.551579l13.312 14.174316c57.775158 54.864842 164.864 53.032421 226.034527-5.01221l8.461473-9.377685c15.306105-16.491789 45.594947-19.671579 59.176421-14.874947 2.048 0.808421 20.48 7.922526 60.847158 31.258947 37.079579 21.557895 54.433684 34.708211 58.799158 38.750316 12.449684 10.617263 21.773474 37.834105 15.36 58.47579l-5.658947 19.078737a164.378947 164.378947 0 0 0 18.32421 116.682105c21.180632 36.864 54.810947 63.164632 99.004632 76.422737l11.802947 2.586947c19.671579 4.581053 39.235368 25.330526 43.385264 47.319579 0.700632 4.096 2.910316 27.109053 2.96421 65.751579 0 44.840421-2.856421 65.913263-4.149895 71.57221m50.714948-148.318315h0.053894c-7.060211-39.882105-42.145684-76.853895-81.758315-86.016l-10.24-2.15579a114.256842 114.256842 0 0 1-67.637895-52.601263 112.801684 112.801684 0 0 1-13.150316-78.524632l5.12-16.869052c11.856842-38.157474-1.940211-87.417263-29.803789-110.969263-6.844632-6.790737-28.725895-22.689684-67.69179-45.325474-41.876211-24.252632-62.895158-32.821895-68.769684-34.977684-32.444632-11.641263-84.075789-4.257684-114.256842 28.294737l-7.27579 8.192c-40.043789 37.834105-116.574316 39.720421-153.49221 4.850526L452.500211 33.468632C429.756632 8.892632 395.048421 0 370.202947 0c-11.695158 0-22.312421 1.832421-32.444631 5.497263-3.610947 1.293474-23.983158 8.946526-68.446316 34.762105-40.097684 23.174737-58.421895 37.349053-64.673684 42.576843-30.558316 25.977263-44.570947 74.805895-32.606316 113.55621l3.395368 10.617263c7.383579 28.833684 3.233684 58.960842-11.641263 84.938105a109.514105 109.514105 0 0 1-60.685473 50.661053l-17.51579 4.096C46.888421 355.705263 11.317895 392.407579 4.850526 429.002105 2.694737 438.595368 0 465.434947 0 509.574737c0 18.324211 0.431158 58.906947 4.311579 76.746105H4.257684c7.006316 40.043789 42.037895 77.069474 81.812211 86.231579l10.24 2.15579c57.559579 16.168421 92.860632 74.805895 80.842105 131.503157l-4.958316 16.384c-12.180211 39.289263 2.048 87.578947 34.384842 115.334737 6.144 4.850526 24.468211 18.647579 63.056842 41.06779 46.349474 26.785684 66.721684 34.223158 68.608 34.869894 9.539368 3.449263 20.156632 5.281684 31.528421 5.281685 24.037053 0 60.092632-8.784842 82.997895-33.576421l6.844632-7.653053c42.307368-40.421053 115.119158-41.660632 155.001263-3.664842l10.886737 11.587368c19.294316 20.911158 50.014316 32.606316 82.189473 33.522527 10.994526 0 21.827368-1.886316 32.498527-5.766737 7.168-2.694737 28.025263-11.371789 68.392421-34.708211 41.606737-24.198737 59.499789-38.426947 64.673684-42.792421a111.993263 111.993263 0 0 0 32.606316-113.286737l-3.395369-10.778947a114.149053 114.149053 0 0 1 11.425685-84.776421c14.282105-24.899368 37.187368-43.223579 62.949052-51.30779l15.306106-3.664842c38.858105-8.946526 74.374737-45.271579 80.141473-80.087579 3.395368-11.749053 5.605053-44.301474 5.605053-82.944-0.053895-18.216421-0.538947-58.475789-4.473263-76.638315" p-id="2711"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/time_range.svg b/src/assets/icons/time_range.svg
index 5b5238ba..7fe09afd 100644
--- a/src/assets/icons/time_range.svg
+++ b/src/assets/icons/time_range.svg
@@ -12,4 +12,8 @@ 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 t="1660294515307" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1020" width="48" height="48"><path d="M240 512h64c9.6 0 16-6.4 16-16v-32c0-9.6-6.4-16-16-16h-64c-9.6 0-16 6.4-16 16v32c0 9.6 6.4 16 16 16z m160 0h384c9.6 0 16-6.4 16-16v-32c0-9.6-6.4-16-16-16H400c-9.6 0-16 6.4-16 16v32c0 9.6 6.4 16 16 16z m384 256h-64c-9.6 0-16 6.4-16 16v32c0 9.6 6.4 16 16 16h64c9.6 0 16-6.4 16-16v-32c0-9.6-6.4-16-16-16z" p-id="1021"></path><path d="M896 128H768V96c0-16-12.8-32-32-32s-32 12.8-32 32v32H320V96c0-16-12.8-32-32-32s-32 12.8-32 32v32H128c-35.2 0-64 28.8-64 64v704c0 35.2 28.8 64 64 64h768c35.2 0 64-28.8 64-64V192c0-35.2-28.8-64-64-64z m0 736c0 19.2-12.8 32-32 32H160c-19.2 0-32-12.8-32-32V384h768v480z m0-544H128v-96c0-19.2 12.8-32 32-32h96v32c0 16 12.8 32 32 32s32-12.8 32-32v-32h384v32c0 16 12.8 32 32 32s32-12.8 32-32v-32h96c19.2 0 32 12.8 32 32v96z" p-id="1022"></path><path d="M240 832h384c9.6 0 16-6.4 16-16v-32c0-9.6-6.4-16-16-16H240c-9.6 0-16 6.4-16 16v32c0 9.6 6.4 16 16 16z m0-160h544c9.6 0 16-6.4 16-16v-32c0-9.6-6.4-16-16-16H240c-9.6 0-16 6.4-16 16v32c0 9.6 6.4 16 16 16z" p-id="1023"></path></svg>
\ No newline at end of file
+<svg t="1660976558460" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="813" width="48" height="48">
+<path d="M498.596 482.29H345.42v57.308h210.478V274.197h-57.301V482.29z m0 0M577.685 644.985h379.88v57.302h-379.88v-57.302z m0 0M577.685 773.765h379.88v57.307h-379.88v-57.307z m0 0M577.685 902.55h379.88v57.307h-379.88V902.55z m0 0" p-id="814"></path>
+<path d="M102.523 382.29a28.668 28.668 0 0 0 23.367 2.56l190.81-61.886c15.053-4.883 23.298-21.04 18.415-36.09-4.882-15.052-21.04-23.297-36.093-18.415l-123.346 40c15.994-26.117 35.17-50.538 57.37-72.745 73.768-73.767 171.847-114.388 276.169-114.388 104.32 0 202.395 40.622 276.161 114.388S899.77 407.56 899.77 511.882c0 26.428-2.616 52.45-7.71 77.78h58.303c4.465-25.499 6.709-51.47 6.709-77.78 0-60.45-11.846-119.102-35.205-174.336-22.56-53.335-54.85-101.227-95.969-142.35-41.122-41.122-89.017-73.408-142.348-95.968-55.233-23.361-113.89-35.207-174.334-35.207-60.45 0-119.107 11.846-174.337 35.208-53.335 22.56-101.23 54.846-142.35 95.969-23.98 23.98-44.933 50.278-62.727 78.6l-20.738-105.654c-3.043-15.528-18.105-25.642-33.632-22.6-15.528 3.048-25.643 18.105-22.6 33.637l36.103 183.932a28.666 28.666 0 0 0 13.588 19.178z m0 0M126.02 587.942H67.768c5.76 33.679 15.368 66.544 28.79 98.278 22.56 53.334 54.85 101.225 95.972 142.348 41.123 41.123 89.014 73.409 142.349 95.969 54.112 22.888 111.518 34.711 170.668 35.182v-57.324c-102.95-0.941-199.595-41.446-272.5-114.349-55.501-55.502-92.237-124.77-107.027-200.104z m0 0" p-id="815">
+</path>
+</svg>
\ No newline at end of file
diff --git a/src/views/dashboard/related/network-profiling/Content.vue b/src/views/dashboard/related/network-profiling/Content.vue
index 026fae12..3493d2d5 100644
--- a/src/views/dashboard/related/network-profiling/Content.vue
+++ b/src/views/dashboard/related/network-profiling/Content.vue
@@ -15,19 +15,13 @@ limitations under the License. -->
 <template>
   <div class="flex-h content">
     <Tasks />
-    <div class="vis-graph ml-5">
-      <div class="schedules">
-        <Schedules />
-      </div>
-      <div class="item" v-show="networkProfilingStore.nodes.length">
-        <process-topology />
-      </div>
+    <div class="vis-graph ml-5" v-show="networkProfilingStore.nodes.length">
+      <process-topology />
     </div>
   </div>
 </template>
 <script lang="ts" setup>
 import Tasks from "./components/Tasks.vue";
-import Schedules from "./components/Schedules.vue";
 import ProcessTopology from "./components/ProcessTopology.vue";
 import { useNetworkProfilingStore } from "@/store/modules/network-profiling";
 
@@ -44,18 +38,7 @@ const networkProfilingStore = useNetworkProfilingStore();
   flex-grow: 2;
   min-width: 700px;
   overflow: auto;
-}
-
-.item {
-  width: 100%;
-  height: calc(100% - 50px);
-  // background-color: #333840;
   position: relative;
-}
-
-.schedules {
-  height: 40px;
-  border-bottom: 1px solid #ccc;
-  padding: 8px;
+  width: calc(100% - 300px);
 }
 </style>
diff --git a/src/views/dashboard/related/network-profiling/components/ProcessTopology.vue b/src/views/dashboard/related/network-profiling/components/ProcessTopology.vue
index 99132543..de66345a 100644
--- a/src/views/dashboard/related/network-profiling/components/ProcessTopology.vue
+++ b/src/views/dashboard/related/network-profiling/components/ProcessTopology.vue
@@ -14,17 +14,27 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <div ref="chart" class="process-topo"></div>
-  <div
-    class="switch-icon-edit ml-5"
-    title="Settings"
-    @click="setConfig"
-    v-if="dashboardStore.editMode"
-  >
-    <Icon size="middle" iconName="settings" />
-  </div>
-  <div class="process-setting" v-if="showSettings && dashboardStore.editMode">
+  <el-popover placement="bottom" :width="295" trigger="click">
+    <template #reference>
+      <div
+        class="switch-icon-edit ml-5"
+        title="Settings"
+        @click="setConfig"
+        v-if="dashboardStore.editMode"
+      >
+        <Icon size="middle" iconName="setting_empty" />
+      </div>
+    </template>
     <Settings @update="updateSettings" />
-  </div>
+  </el-popover>
+  <el-popover placement="bottom" :width="600" trigger="click">
+    <template #reference>
+      <div class="range switch-icon-edit">
+        <Icon size="middle" iconName="time_range" />
+      </div>
+    </template>
+    <Schedules />
+  </el-popover>
 </template>
 <script lang="ts" setup>
 import type { PropType } from "vue";
@@ -47,6 +57,7 @@ import Settings from "./Settings.vue";
 import { EntityType } from "@/views/dashboard/data";
 import getDashboard from "@/hooks/useDashboardsSession";
 import { Layout } from "./Graph/layout";
+import Schedules from "./Schedules.vue";
 
 /*global Nullable, defineProps */
 const props = defineProps({
@@ -70,7 +81,6 @@ 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 showSettings = ref<boolean>(false);
 const config = ref<any>({});
 const diff = ref<number[]>([220, 200]);
 const radius = 210;
@@ -369,7 +379,6 @@ function updateSettings(param: any) {
 }
 
 function setConfig() {
-  showSettings.value = !showSettings.value;
   dashboardStore.selectWidget(props.config);
 }
 
@@ -408,8 +417,7 @@ watch(
 </script>
 <style lang="scss">
 .process-topo {
-  width: calc(100% - 10px);
-  margin: 0 5px 5px 0;
+  width: 100%;
   height: 100%;
   min-height: 150px;
   min-width: 300px;
@@ -435,18 +443,8 @@ watch(
   right: 10px;
 }
 
-.process-setting {
-  position: absolute;
-  top: 45px;
-  right: 10px;
-  width: 300px;
-  height: 160px;
-  background-color: #666;
-  overflow: auto;
-  padding: 15px;
-  border-radius: 3px;
-  color: #fff;
-  transition: all 0.5ms linear;
+.range {
+  right: 50px;
 }
 
 .topo-line-anchor {
diff --git a/src/views/dashboard/related/network-profiling/components/Schedules.vue b/src/views/dashboard/related/network-profiling/components/Schedules.vue
index 0e76c915..1977e2cf 100644
--- a/src/views/dashboard/related/network-profiling/components/Schedules.vue
+++ b/src/views/dashboard/related/network-profiling/components/Schedules.vue
@@ -13,17 +13,7 @@ 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-button class="mr-10" type="primary" size="small">
-    {{ t("start") }}
-  </el-button> -->
-  <el-popover placement="bottom" :width="600" trigger="click">
-    <template #reference>
-      <span>
-        <el-button size="small"> Set time range </el-button>
-      </span>
-    </template>
-    <div ref="timeRange" class="time-ranges"></div>
-  </el-popover>
+  <div ref="timeRange" class="time-ranges"></div>
 </template>
 <script lang="ts" setup>
 import { ref, onMounted, watch } from "vue";
diff --git a/src/views/dashboard/related/network-profiling/components/Settings.vue b/src/views/dashboard/related/network-profiling/components/Settings.vue
index 6fd6ea03..b0cb5aaa 100644
--- a/src/views/dashboard/related/network-profiling/components/Settings.vue
+++ b/src/views/dashboard/related/network-profiling/components/Settings.vue
@@ -83,5 +83,6 @@ function changeLinkDashboard(opt: { value: string }[]) {
 .inputs {
   margin-top: 8px;
   width: 270px;
+  margin-bottom: 30px;
 }
 </style>
diff --git a/src/views/dashboard/related/network-profiling/components/Tasks.vue b/src/views/dashboard/related/network-profiling/components/Tasks.vue
index e2d6fcd3..1ba4a05d 100644
--- a/src/views/dashboard/related/network-profiling/components/Tasks.vue
+++ b/src/views/dashboard/related/network-profiling/components/Tasks.vue
@@ -200,7 +200,7 @@ async function fetchTasks() {
 </script>
 <style lang="scss" scoped>
 .profile-task-list {
-  width: 280px;
+  width: 300px;
   height: calc(100% - 10px);
   overflow: auto;
   border-right: 1px solid rgba(0, 0, 0, 0.1);