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; return res.data;
}, },
async getHierarchyServiceTopology() { 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({})); return new Promise((resolve) => resolve({}));
} }
const res: AxiosResponse = await graphql const res: AxiosResponse = await graphql
.query("getHierarchyServiceTopology") .query("getHierarchyServiceTopology")
.params({ serviceId: this.node.id, layer: this.node.layer }); .params({ serviceId: id, layer: layer });
if (res.data.errors) { if (res.data.errors) {
return res.data; return res.data;
} }

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

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