feat: Move topology to widgets (#29)

src/views/dashboard/controls/Tab.vue

@@ -97,6 +97,7 @@ limitations under the License. -->
         :key="item.i"
         @click="clickTabGrid($event, item)"
         :class="{ active: activeTabWidget === item.i }"
+        drag-ignore-from="svg.d3-trace-tree, .dragger, .micro-topo-chart"
       >
         <component
           :is="item.type"

src/views/dashboard/controls/Topology.vue

@@ -13,58 +13,28 @@ 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="topology">
-    <div class="header flex-h">
-      <div>{{ data.widget?.title || "" }}</div>
-      <div>
-        <el-tooltip :content="data.widget?.tips">
-          <span>
-            <Icon
-              iconName="info_outline"
-              size="sm"
-              class="operation"
-              v-show="data.widget?.tips"
-            />
-          </span>
-        </el-tooltip>
-        <el-popover
-          placement="bottom"
-          trigger="click"
-          :width="100"
-          v-if="routeParams.entity"
-        >
-          <template #reference>
-            <span>
-              <Icon iconName="ellipsis_v" size="middle" class="operation" />
-            </span>
-          </template>
-          <div class="tools" @click="editConfig">
-            <span>{{ t("edit") }}</span>
-          </div>
-          <div class="tools" @click="removeTopo">
-            <span>{{ t("delete") }}</span>
-          </div>
-        </el-popover>
-      </div>
-    </div>
-    <div
-      class="body"
-      @click="ViewTopology"
-      :style="{ backgroundColor: Colors[data.graph.backgroundColor] }"
-    >
-      <Icon
-        :iconName="data.graph.iconTheme ? 'topology-light' : 'topology-dark'"
-        size="middle"
-      />
-      <div
-        :style="{
-          color: Colors[data.graph.fontColor],
-          fontSize: data.graph.fontSize + 'px',
-        }"
+  <div class="topology flex-v">
+    <div class="operation">
+      <el-popover
+        placement="bottom"
+        trigger="click"
+        :width="100"
+        v-if="routeParams.entity"
       >
-        {{ data.graph.content }}
-      </div>
+        <template #reference>
+          <span>
+            <Icon iconName="ellipsis_v" size="middle" />
+          </span>
+        </template>
+        <div class="tools" @click="editConfig">
+          <span>{{ t("edit") }}</span>
+        </div>
+        <div class="tools" @click="removeTopo">
+          <span>{{ t("delete") }}</span>
+        </div>
+      </el-popover>
     </div>
+    <Topology :config="props.data" />
   </div>
 </template>
 <script lang="ts" setup>
@@ -72,7 +42,8 @@ import type { PropType } from "vue";
 import { useRoute } from "vue-router";
 import { useI18n } from "vue-i18n";
 import { useDashboardStore } from "@/store/modules/dashboard";
-import { Colors } from "../data";
+import Topology from "../related/topology/Index.vue";
+
 /*global defineProps */
 const props = defineProps({
   data: {
@@ -85,32 +56,27 @@ const { t } = useI18n();
 const routeParams = useRoute().params;
 const dashboardStore = useDashboardStore();
 
+function removeTopo() {
+  dashboardStore.removeControls(props.data);
+}
 function editConfig() {
   dashboardStore.setConfigPanel(true);
   dashboardStore.selectWidget(props.data);
 }
-function ViewTopology() {
-  dashboardStore.setTopology(true);
-}
-function removeTopo() {
-  dashboardStore.removeControls(props.data);
-}
 </script>
 <style lang="scss" scoped>
 .topology {
-  font-size: 12px;
-  height: 100%;
-}
-
-.header {
-  height: 30px;
-  padding: 5px;
+  background-color: #333840;
   width: 100%;
-  border-bottom: 1px solid #eee;
-  justify-content: space-between;
+  height: 100%;
+  font-size: 12px;
+  position: relative;
 }
 
 .operation {
+  position: absolute;
+  top: 5px;
+  right: 3px;
   cursor: pointer;
 }
 
@@ -127,19 +93,6 @@ function removeTopo() {
   }
 }
 
-.body {
-  text-align: center;
-  width: 100%;
-  height: calc(100% - 30px);
-  cursor: pointer;
-  box-sizing: border-box;
-  color: #333;
-  display: -webkit-box;
-  -webkit-box-orient: horizontal;
-  -webkit-box-pack: center;
-  -webkit-box-align: center;
-}
-
 .no-data {
   font-size: 14px;
   color: #888;

src/views/dashboard/controls/Widget.vue

@@ -108,11 +108,7 @@ export default defineComponent({
     const dashboardStore = useDashboardStore();
     const selectorStore = useSelectorStore();
 
-    if (
-      dashboardStore.entity === EntityType[1].value ||
-      props.needQuery ||
-      !dashboardStore.currentDashboard.id
-    ) {
+    if (props.needQuery || !dashboardStore.currentDashboard.id) {
       queryMetrics();
     }
 
@@ -165,11 +161,7 @@ export default defineComponent({
       }
     );
     watch(
-      () => [
-        selectorStore.currentService,
-        selectorStore.currentDestService,
-        appStore.durationTime,
-      ],
+      () => [selectorStore.currentService, selectorStore.currentDestService],
       () => {
         if (
           dashboardStore.entity === EntityType[0].value ||
@@ -188,6 +180,14 @@ export default defineComponent({
         queryMetrics();
       }
     );
+    watch(
+      () => appStore.durationTime,
+      () => {
+        if (dashboardStore.entity === EntityType[1].value) {
+          queryMetrics();
+        }
+      }
+    );
 
     return {
       state,