fix: set dropdown for the Tab widget, init instance relation selectors, update sankey graph (#79)

src/components/Graph.vue

@@ -53,9 +53,6 @@ const available = computed(
     (Array.isArray(props.option.series.data) && props.option.series.data[0])
 );
 onMounted(async () => {
-  if (!available.value) {
-    return;
-  }
   await setOptions(props.option);
   chartRef.value && addResizeListener(unref(chartRef), resize);
   setTimeout(() => {

src/layout/components/SideBar.vue

@@ -118,7 +118,7 @@ const theme = ["VirtualMachine", "Kubernetes"].includes(name.value || "")
   ? ref("light")
   : ref("black");
 const routes = ref<any>(useRouter().options.routes);
-if (/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
+if (/Android|webOS|iPhone|iPod|iPad|BlackBerry/i.test(navigator.userAgent)) {
   appStore.setIsMobile(true);
 } else {
   appStore.setIsMobile(false);

src/views/dashboard/controls/Tab.vue

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <div class="flex-h tab-header">
-    <div class="tabs scroll_bar_style">
+    <div class="tabs scroll_bar_style" @click="handleClick">
       <span
         v-for="(child, idx) in data.children || []"
         :key="idx"
@@ -26,15 +26,15 @@ limitations under the License. -->
           v-model="child.name"
           placeholder="Please input"
           class="tab-name"
-          :readonly="isNaN(editTabIndex)"
+          :readonly="isNaN(editTabIndex) && !canEditTabName"
-          :class="{ view: isNaN(editTabIndex) }"
+          :class="{ view: !canEditTabName }"
         />
         <Icon
           v-show="activeTabIndex === idx"
           size="sm"
           iconName="cancel"
           @click="deleteTabItem($event, idx)"
-          v-if="dashboardStore.editMode"
+          v-if="dashboardStore.editMode && canEditTabName"
         />
       </span>
       <span class="tab-icons" v-if="dashboardStore.editMode">
@@ -46,35 +46,21 @@ limitations under the License. -->
       </span>
     </div>
     <div class="operations" v-if="dashboardStore.editMode">
-      <el-popover
+      <el-dropdown placement="bottom" trigger="click" :width="200">
-        placement="bottom"
+        <span class="icon-operation">
-        trigger="click"
+          <Icon iconName="ellipsis_v" size="middle" />
-        :width="200"
+        </span>
-        v-model:visible="showTools"
+        <template #dropdown>
-      >
+          <el-dropdown-menu>
-        <template #reference>
+            <el-dropdown-item @click="canEditTabName = true">
-          <span>
+              <span class="edit-tab">{{ t("editTab") }}</span>
-            <Icon
+            </el-dropdown-item>
-              iconName="ellipsis_v"
+            <el-dropdown-item @click="removeTab">
-              size="middle"
+              <span>{{ t("delete") }}</span>
-              class="operation"
+            </el-dropdown-item>
-              @click="showTools = true"
+          </el-dropdown-menu>
-            />
-          </span>
         </template>
-        <div
+      </el-dropdown>
-          class="tools"
-          @click="
-            canEditTabName = true;
-            showTools = false;
-          "
-        >
-          <span class="edit-tab">{{ t("editTab") }}</span>
-        </div>
-        <div class="tools" @click="removeTab">
-          <span>{{ t("delete") }}</span>
-        </div>
-      </el-popover>
     </div>
   </div>
   <div class="tab-layout" @click="handleClick">
@@ -144,7 +130,6 @@ export default defineComponent({
     const editTabIndex = ref<number>(NaN); // edit tab item name
     const canEditTabName = ref<boolean>(false);
     const needQuery = ref<boolean>(false);
-    const showTools = ref<boolean>(false);
     const l = dashboardStore.layout.findIndex(
       (d: LayoutConfig) => d.i === props.data.i
     );
@@ -248,7 +233,6 @@ export default defineComponent({
       editTabIndex,
       needQuery,
       canEditTabName,
-      showTools,
       t,
       dragIgnoreFrom,
     };
@@ -316,6 +300,11 @@ export default defineComponent({
   padding-right: 10px;
 }
 
+.icon-operation {
+  display: inline-block;
+  margin-top: 8px;
+}
+
 .tab-header {
   justify-content: space-between;
   width: 100%;
@@ -349,17 +338,4 @@ export default defineComponent({
   padding-top: 30px;
   color: #888;
 }
-
-.tools {
-  padding: 5px 0;
-  color: #999;
-  cursor: pointer;
-  position: relative;
-  text-align: center;
-
-  &:hover {
-    color: #409eff;
-    background-color: #eee;
-  }
-}
 </style>

src/views/dashboard/panel/Tool.vue

@@ -342,7 +342,12 @@ async function getServices() {
   states.currentService = selectorStore.currentService.value;
   const e = dashboardStore.entity.split("Relation")[0];
   if (
-    [EntityType[2].value, EntityType[3].value].includes(dashboardStore.entity)
+    [
+      EntityType[2].value,
+      EntityType[3].value,
+      EntityType[5].value,
+      EntityType[6].value,
+    ].includes(dashboardStore.entity)
   ) {
     fetchPods(e, selectorStore.currentService.id, true);
   }
@@ -361,7 +366,10 @@ async function changeService(service: any) {
   if (service[0]) {
     states.currentService = service[0].value;
     selectorStore.setCurrentService(service[0]);
-    fetchPods(dashboardStore.entity, selectorStore.currentService.id, true);
+    const e = dashboardStore.entity.split("Relation")[0];
+    selectorStore.setCurrentPod(null);
+    states.currentPod = "";
+    fetchPods(e, selectorStore.currentService.id, true);
   } else {
     selectorStore.setCurrentService(null);
   }
@@ -371,6 +379,9 @@ function changeDestService(service: any) {
   if (service[0]) {
     states.currentDestService = service[0].value;
     selectorStore.setCurrentDestService(service[0]);
+    selectorStore.setCurrentDestPod(null);
+    states.currentDestPod = "";
+    fetchPods(dashboardStore.entity, selectorStore.currentDestService.id, true);
   } else {
     selectorStore.setCurrentDestService(null);
   }
@@ -532,11 +543,11 @@ async function fetchPods(
       if (setPod) {
         let p;
         if (states.currentDestPod) {
-          p = selectorStore.pods.find(
+          p = selectorStore.destPods.find(
             (d: { label: string }) => d.label === states.currentDestPod
           );
         } else {
-          p = selectorStore.pods.find(
+          p = selectorStore.destPods.find(
             (d: { label: string }, index: number) => index === 0
           );
         }
@@ -552,11 +563,11 @@ async function fetchPods(
       if (setPod) {
         let p;
         if (states.currentDestPod) {
-          p = selectorStore.pods.find(
+          p = selectorStore.destPods.find(
             (d: { label: string }) => d.label === states.currentDestPod
           );
         } else {
-          p = selectorStore.pods.find(
+          p = selectorStore.destPods.find(
             (d: { label: string }, index: number) => index === 0
           );
         }

src/views/dashboard/related/topology/components/PodTopology.vue

@@ -178,8 +178,6 @@ function goDashboard() {
     layer: dashboardStore.layerId,
     entity,
   });
-  dashboardStore.setEntity(entity);
-  dashboardStore.setCurrentDashboard(d);
   const path = `/dashboard/${d.layer}/${entity}/${topologyStore.node.serviceId}/${topologyStore.node.id}/${d.name}`;
   const routeUrl = router.resolve({ path });
   window.open(routeUrl.href, "_blank");
@@ -218,7 +216,6 @@ function selectNodeLink(d: any) {
       layer: dashboardStore.layerId,
       entity,
     });
-    dashboardStore.setEntity(entity);
     const path = `/dashboard/${p.layer}/${entity}/${sourceObj.serviceId}/${sourceObj.id}/${targetObj.serviceId}/${targetObj.id}/${p.name}`;
     const routeUrl = router.resolve({ path });
     window.open(routeUrl.href, "_blank");