github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-05-13 08:17:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add process topology

Browse Source
This commit is contained in:
Fine 2023-05-29 16:22:23 +08:00
parent 8e654decba
commit 7313a11ee3
3 changed files with 30 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/types/components.d.ts vendored
View File

@ -22,7 +22,6 @@ declare module '@vue/runtime-core' {
ElMenuItemGroup: typeof import('element-plus/es')['ElMenuItemGroup'] ElMenuItemGroup: typeof import('element-plus/es')['ElMenuItemGroup']
ElOption: typeof import('element-plus/es')['ElOption'] ElOption: typeof import('element-plus/es')['ElOption']
ElPagination: typeof import('element-plus/es')['ElPagination'] ElPagination: typeof import('element-plus/es')['ElPagination']
ElPopconfirm: typeof import('element-plus/es')['ElPopconfirm']
ElPopover: typeof import('element-plus/es')['ElPopover'] ElPopover: typeof import('element-plus/es')['ElPopover']
ElProgress: typeof import('element-plus/es')['ElProgress'] ElProgress: typeof import('element-plus/es')['ElProgress']
ElRadio: typeof import('element-plus/es')['ElRadio'] ElRadio: typeof import('element-plus/es')['ElRadio']

5
src/views/dashboard/related/continuous-profiling/Content.vue
View File

@ -18,15 +18,15 @@ limitations under the License. -->
<PolicyList /> <PolicyList />
<TaskList /> <TaskList />
</div> </div>
<GraphPanel /> <GraphPanel :config="config" />
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import type { PropType } from "vue"; import type { PropType } from "vue";
import { useI18n } from "vue-i18n";
import PolicyList from "./components/PolicyList.vue"; import PolicyList from "./components/PolicyList.vue";
import TaskList from "./components/TaskList.vue"; import TaskList from "./components/TaskList.vue";
import GraphPanel from "./components/GraphPanel.vue"; import GraphPanel from "./components/GraphPanel.vue";
/*global defineProps */ /*global defineProps */
defineProps({ defineProps({
config: { config: {
@ -34,7 +34,6 @@ limitations under the License. -->
default: () => ({ graph: {} }), default: () => ({ graph: {} }),
}, },
}); });
const { t } = useI18n();
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.content { .content {

30
src/views/dashboard/related/continuous-profiling/components/GraphPanel.vue
View File

@ -34,20 +34,42 @@ limitations under the License. -->
placeholder="Select a process" placeholder="Select a process"
@change="changeProcess" @change="changeProcess"
/> />
<el-button type="primary" size="small"> <el-button type="primary" size="small" @click="analyzeTask">
{{ t("analysis") }} {{ t("analysis") }}
</el-button> </el-button>
</div> </div>
<div class="graph"> graph </div> <div
class="vis-graph ml-5"
v-loading="networkProfilingStore.loadNodes"
v-if="continousProfilingStore.selectedContinousTask.type === TargetTypes[2].value"
>
<process-topology v-if="networkProfilingStore.nodes.length" :config="config" />
<div class="text" v-else>
{{ t("noData") }}
</div>
</div>
<div v-else class="vis-graph ml-5"> ebpf </div>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref, watch } from "vue"; import { ref, watch } from "vue";
import type { PropType } from "vue";
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
import { useSelectorStore } from "@/store/modules/selectors"; import { useSelectorStore } from "@/store/modules/selectors";
import { useContinousProfilingStore } from "@/store/modules/continous-profiling"; import { useContinousProfilingStore } from "@/store/modules/continous-profiling";
import { useNetworkProfilingStore } from "@/store/modules/network-profiling";
import ProcessTopology from "@/views/dashboard/related/network-profiling/components/ProcessTopology.vue";
import { TargetTypes } from "../data";
/*global defineProps */
defineProps({
config: {
type: Object as PropType<any>,
default: () => ({ graph: {} }),
},
});
const continousProfilingStore = useContinousProfilingStore(); const continousProfilingStore = useContinousProfilingStore();
const networkProfilingStore = useNetworkProfilingStore();
const selectorStore = useSelectorStore(); const selectorStore = useSelectorStore();
const { t } = useI18n(); const { t } = useI18n();
const processId = ref<string>(""); const processId = ref<string>("");
@ -61,6 +83,10 @@ limitations under the License. -->
processId.value = opt[0].id; processId.value = opt[0].id;
} }
function analyzeTask() {
networkProfilingStore.setSelectedNetworkTask(continousProfilingStore.selectedContinousTask);
}
async function getSelectors() { async function getSelectors() {
const serviceId = (selectorStore.currentService && selectorStore.currentService.id) || ""; const serviceId = (selectorStore.currentService && selectorStore.currentService.id) || "";