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

implemeted both flexibility for both table header and columns to be responsive to available space

Browse Source
This commit is contained in:
Peter Olu 2022-05-24 16:51:21 +01:00
parent 157f60dee1
commit 15a55a04ce
2 changed files with 19 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/views/dashboard/related/components/LogTable/Index.vue
View File

@ -15,7 +15,7 @@ limitations under the License. -->
<template> <template>
<div class="log"> <div class="log">
<div class="log-header"> <div :class="{ 'd-flex': visibleColumns.length < 6 }" class="log-header">
<template v-for="(item, index) in columns"> <template v-for="(item, index) in columns">
<template v-if="item.isVisible"> <template v-if="item.isVisible">
<div <div
@ -85,14 +85,16 @@ const currentLog = ref<any>({});
const showDetail = ref<boolean>(false); const showDetail = ref<boolean>(false);
const dragger = ref<Nullable<HTMLSpanElement>>(null); const dragger = ref<Nullable<HTMLSpanElement>>(null);
// const method = ref<number>(380); // const method = ref<number>(380);
// props.type === "browser" ? BrowserLogConstants : ServiceLogConstants;
const columns = ref<any[]>( const columns = ref<any[]>(
props.type === "browser" props.type === "browser"
? useLogStore.browserLogColumn ? useLogStore.browserLogColumn
: useLogStore.serviceLogColumn : useLogStore.serviceLogColumn
); );
// const portalVisibleDefaultCols:string[] = ['Service', 'Instance','Content']
const visibleColumns = computed(() =>
columns.value.filter((column) => column.isVisible)
);
function setCurrentLog(log: any) { function setCurrentLog(log: any) {
showDetail.value = true; showDetail.value = true;
currentLog.value = log; currentLog.value = log;
@ -143,4 +145,11 @@ function setCurrentLog(log: any) {
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
.d-flex{
display: flex;
div{
flex-grow: 1;
}
}
</style> </style>

7
src/views/dashboard/related/components/LogTable/LogService.vue
View File

@ -131,4 +131,11 @@ function showSelectSpan() {
height: 100%; height: 100%;
padding: 3px 8px; padding: 3px 8px;
} }
.d-flex{
display: flex;
div{
flex-grow: 1;
}
}
</style> </style>