github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-05-01 18:53:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: update lists

Browse Source
This commit is contained in:
Qiuxia Fan 2022-01-17 23:16:16 +08:00
parent 652b3f2bbc
commit ff29b1314e
3 changed files with 57 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/views/dashboard/configuration/ConfigEdit.vue
View File

@ -38,7 +38,23 @@ limitations under the License. -->
v-model="states.activeNames"
:style="{ '--el-collapse-header-font-size': '15px' }"
>
<el-collapse-item :title="t('metricName')" name="1">
<el-collapse-item :title="t('selectVisualization')" name="1">
<div class="chart-types">
<span
v-for="(type, index) in states.visType"
:key="index"
@click="changeChartType(type)"
:class="{ active: type.value === states.graph.type }"
>
{{ type.label }}
</span>
</div>
</el-collapse-item>
<el-collapse-item
:title="t('metricName')"
name="2"
v-show="states.graph.type !== 'InstanceList'"
>
<div>
<Selector
:value="states.metrics"
@ -61,18 +77,6 @@ limitations under the License. -->
/>
</div>
</el-collapse-item>
<el-collapse-item :title="t('selectVisualization')" name="2">
<div class="chart-types">
<span
v-for="(type, index) in states.visType"
:key="index"
@click="changeChartType(type)"
:class="{ active: type.value === states.graph.type }"
>
{{ type.label }}
</span>
</div>
</el-collapse-item>
<el-collapse-item :title="t('graphStyles')" name="3">
<component
:is="`${states.graph.type}Config`"

21
src/views/dashboard/graphs/EndpointList.vue
View File

@ -17,13 +17,20 @@ limitations under the License. -->
:data="selectorStore.endpoints"
style="width: 100%; height: 100%; overflow: auto"
>
<el-table-column prop="label" label="Endpoints" />
<el-table-column label="Endpoints">
<template #default="scope">
<span class="link" @click="linkInstance(scope.row)">
{{ scope.row.label }}
</span>
</template>
</el-table-column>
</el-table>
</template>
<script setup lang="ts">
import { defineProps, onBeforeMount } from "vue";
import { useSelectorStore } from "@/store/modules/selectors";
import { ElMessage } from "element-plus";
import router from "@/router";
defineProps({
data: {
@ -43,4 +50,16 @@ onBeforeMount(async () => {
ElMessage.error(resp.errors);
}
});
function linkInstance(row: any) {
const path = `/dashboard/view/${row.layer}/endpoint/${selectorStore.currentService}/${row.value}`;
router.push(path);
}
</script>
<style lang="scss" scoped>
.link {
cursor: pointer;
color: #409eff;
display: inline-block;
width: 100%;
}
</style>

21
src/views/dashboard/graphs/InstanceList.vue
View File

@ -17,13 +17,20 @@ limitations under the License. -->
:data="selectorStore.instances"
style="width: 100%; height: 100%; overflow: auto"
>
<el-table-column prop="label" label="Service Instances" />
<el-table-column label="Service Instances">
<template #default="scope">
<span class="link" @click="linkInstance(scope.row)">
{{ scope.row.label }}
</span>
</template>
</el-table-column>
</el-table>
</template>
<script setup lang="ts">
import { defineProps, onBeforeMount } from "vue";
import { useSelectorStore } from "@/store/modules/selectors";
import { ElMessage } from "element-plus";
import router from "@/router";
defineProps({
data: {
@ -43,4 +50,16 @@ onBeforeMount(async () => {
ElMessage.error(resp.errors);
}
});
function linkInstance(row: any) {
const path = `/dashboard/view/${row.layer}/serviceInstance/${selectorStore.currentService}/${row.value}`;
router.push(path);
}
</script>
<style lang="scss" scoped>
.link {
cursor: pointer;
color: #409eff;
display: inline-block;
width: 100%;
}
</style>