github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-05-12 15:52:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add topology

Browse Source
This commit is contained in:
Fine 2024-01-12 20:27:07 +08:00
parent cc80cb577a
commit a1d9d4d4b4
2 changed files with 19 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/store/modules/topology.ts
View File

@ -600,12 +600,16 @@ export const topologyStore = defineStore({
return res.data;
},
async getHierarchyServiceTopology() {
if (!(this.node.id && this.node.layer)) {
const dashboardStore = useDashboardStore();
const { currentService } = useSelectorStore();
const id = this.node ? this.node.id : (currentService || {}).id;
const layer = this.node ? this.node.layer : dashboardStore.layerId;
if (!(id && layer)) {
return new Promise((resolve) => resolve({}));
}
const res: AxiosResponse = await graphql
.query("getHierarchyServiceTopology")
.params({ serviceId: this.node.id, layer: this.node.layer });
.params({ serviceId: id, layer: layer });
if (res.data.errors) {
return res.data;
}

15
src/views/dashboard/panel/Tool.vue
View File

@ -26,6 +26,9 @@ limitations under the License. -->
@change="changeService"
class="selectors"
/>
<span class="ml-5 cp hierarchy-btn" v-if="dashboardStore.entity === 'Service'" @click="viewTopology">
<Icon size="small" iconName="hierarchy_topology" />
</span>
</div>
<div class="selectors-item" v-if="key === 3 || key === 4 || key === 5 || key === 6">
<span class="label">
@ -135,7 +138,8 @@ limitations under the License. -->
</div>
<el-dialog v-model="showHierarchy" :destroy-on-close="true" @closed="showHierarchy = false" width="640px">
<div class="hierarchy-related">
<instance-map />
<instance-map v-if="dashboardStore.entity === 'ServiceInstance'" />
<hierarchy-map v-else />
</div>
</el-dialog>
</template>
@ -159,13 +163,16 @@ limitations under the License. -->
WidgetType,
} from "@/views/dashboard/data";
import { useSelectorStore } from "@/store/modules/selectors";
import { useTopologyStore } from "@/store/modules/topology";
import { ElMessage } from "element-plus";
import type { Option } from "@/types/app";
import InstanceMap from "@/views/dashboard/related/topology/pod/InstanceMap.vue";
import HierarchyMap from "@/views/dashboard/related/topology/service/HierarchyMap.vue";
const { t } = useI18n();
const dashboardStore = useDashboardStore();
const selectorStore = useSelectorStore();
const topologyStore = useTopologyStore();
const appStore = useAppStoreWithOut();
const params = useRoute().params;
const toolIcons = ref<{ name: string; content: string; id: WidgetType }[]>(AllTools);
@ -651,6 +658,10 @@ limitations under the License. -->
};
fetchPods(EntityType[6].value, selectorStore.currentDestService.id, false, param);
}
function viewTopology() {
showHierarchy.value = true;
topologyStore.setNode(null);
}
watch(
() => dashboardStore.entity,
(newVal, oldVal) => {
@ -730,7 +741,7 @@ limitations under the License. -->
}
.hierarchy-related {
height: 400px;
height: 600px;
width: 600px;
overflow: auto;
}