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

dynamic tab type

Browse Source
This commit is contained in:
Peter Olu 2022-05-10 05:19:05 +01:00
parent edf2e0f307
commit 4127378f84
3 changed files with 16 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/store/modules/dashboard.ts
View File

@ -212,7 +212,7 @@ export const dashboardStore = defineStore({
setCurrentTabItems(items: LayoutConfig[]) { setCurrentTabItems(items: LayoutConfig[]) {
this.currentTabItems = items; this.currentTabItems = items;
}, },
setCurrentTabName(name: string) { setCurrentTabType(name: string) {
this.currentTabName = name this.currentTabName = name
}, },
removeTab(item: LayoutConfig) { removeTab(item: LayoutConfig) {

8
src/views/dashboard/controls/Tab.vue
View File

@ -19,7 +19,7 @@ limitations under the License. -->
v-for="(child, idx) in data.children || []" v-for="(child, idx) in data.children || []"
:key="idx" :key="idx"
:class="{ active: activeTabIndex === idx }" :class="{ active: activeTabIndex === idx }"
@click="clickTabs($event, idx, child.name, child)" @click="clickTabs($event, idx, child)"
> >
<input <input
@click="editTabName($event, idx)" @click="editTabName($event, idx)"
@ -266,9 +266,9 @@ export default defineComponent({
} }
); );
function clickTabs(e: Event, idx: number, currentTabName:string, extra:any) { function clickTabs(e: Event, idx: number, extra:any) {
e.stopPropagation(); e.stopPropagation();
console.log(currentTabName, extra) console.log(extra.children[0].type)
activeTabIndex.value = idx; activeTabIndex.value = idx;
dashboardStore.activeGridItem(props.data.i); dashboardStore.activeGridItem(props.data.i);
dashboardStore.selectWidget(props.data); dashboardStore.selectWidget(props.data);
@ -279,7 +279,7 @@ export default defineComponent({
dashboardStore.setCurrentTabItems( dashboardStore.setCurrentTabItems(
dashboardStore.layout[l].children[activeTabIndex.value].children dashboardStore.layout[l].children[activeTabIndex.value].children
); );
dashboardStore.setCurrentTabName(currentTabName) dashboardStore.setCurrentTabType(extra.children[0].type)
needQuery.value = true; needQuery.value = true;
} }
function removeTab(e: Event) { function removeTab(e: Event) {

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

@ -13,7 +13,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and See the License for the specific language governing permissions and
limitations under the License. --> limitations under the License. -->
<template> <template>
<div class="dashboard-tool flex-h"> <div class="dashboard-tool flex-h">
<div class="flex-h"> <div class="flex-h">
<div class="flex-h"> <div class="flex-h">
<div <div
@ -56,7 +56,10 @@ limitations under the License. -->
<Icon iconSize="sm" iconName="cancel" /> <Icon iconSize="sm" iconName="cancel" />
</el-button> </el-button>
</div> </div>
<div class="selectors-item" v-if="(key === 3 || key === 4 ) && currentTraceView === 'traceList' " > <div
class="selectors-item"
v-if="(key === 3 || key === 4) && currentTraceView === 'traceList'"
>
<el-tooltip <el-tooltip
v-if="!selectedSelector.length || selectedSelector === '$endpoint'" v-if="!selectedSelector.length || selectedSelector === '$endpoint'"
class="box-item" class="box-item"
@ -191,9 +194,9 @@ import { useRoute, useRouter } from "vue-router";
import { useDashboardStore } from "@/store/modules/dashboard"; import { useDashboardStore } from "@/store/modules/dashboard";
import { useAppStoreWithOut } from "@/store/modules/app"; import { useAppStoreWithOut } from "@/store/modules/app";
import { useTraceStore } from "@/store/modules/trace"; import { useTraceStore } from "@/store/modules/trace";
onMounted(() =>{ onMounted(() => {
console.log(dashboardStore.layout,dashboardStore.currentDashboard) console.log(dashboardStore.layout, dashboardStore.currentDashboard);
}) });
import { import {
EntityType, EntityType,
AllTools, AllTools,
@ -217,13 +220,9 @@ const appStore = useAppStoreWithOut();
const traceStore = useTraceStore(); const traceStore = useTraceStore();
const params = useRoute().params; const params = useRoute().params;
const selectedSelector = ref<string>(""); const selectedSelector = ref<string>("");
const showFilter = computed( const showFilter = computed(() => dashboardStore.currentTabName === "Trace");
() => dashboardStore.layout[0]?.activedTabIndex === 2 const showLogHeader = computed(() => dashboardStore.currentTabName === "Log");
); const currentTraceView = computed(() => traceStore.currentView);
const showLogHeader = computed(
() => dashboardStore.layout[0]?.activedTabIndex === 3
);
const currentTraceView = computed(() => traceStore.currentView)
const { query } = useRoute(); const { query } = useRoute();
dashboardStore.setViewMode(query["fullview"] === "true"); dashboardStore.setViewMode(query["fullview"] === "true");