update components

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>
+<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>

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="vis-graph ml-5" v-show="networkProfilingStore.nodes.length">
-      <div class="schedules">
-        <Schedules />
-      </div>
-      <div class="item" v-show="networkProfilingStore.nodes.length">
       <process-topology />
     </div>
   </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;
-}
+  width: calc(100% - 300px);
-
-.schedules {
-  height: 40px;
-  border-bottom: 1px solid #ccc;
-  padding: 8px;
 }
 </style>

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>
+  <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="settings" />
+        <Icon size="middle" iconName="setting_empty" />
       </div>
-  <div class="process-setting" v-if="showSettings && dashboardStore.editMode">
+    </template>
     <Settings @update="updateSettings" />
+  </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);
+  width: 100%;
-  margin: 0 5px 5px 0;
   height: 100%;
   min-height: 150px;
   min-width: 300px;
@@ -435,18 +443,8 @@ watch(
   right: 10px;
 }
 
-.process-setting {
+.range {
-  position: absolute;
+  right: 50px;
-  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;
 }
 
 .topo-line-anchor {

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>
 </template>
 <script lang="ts" setup>
 import { ref, onMounted, watch } from "vue";

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>

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);