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

column toggleable test 1

Browse Source
This commit is contained in:
Peter Olu 2022-05-20 22:57:16 +01:00
parent 0ae9c8f969
commit 890c97a7b2
1 changed files with 70 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -19,19 +19,24 @@ limitations under the License. -->
<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
class="method" class="method"
:style="`width: ${item.method}px`" :style="`width: ${item.method}px`"
v-if="item.drag" v-if="item.drag"
:key="index" :key="index"
> >
<span class="r cp" ref="dragger" :data-index="index"> <span class="r cp" ref="dragger" :data-index="index">
<Icon iconName="settings_ethernet" size="sm" /> <Icon iconName="settings_ethernet" size="sm" />
</span> </span>
{{ t(item.value) }} {{ t(item.value) }}
</div> </div>
<div v-else :class="item.label" :key="`col${index}`"> <div
{{ t(item.value) }} v-else
</div> :class="item.label"
:key="`col${index}`"
@click="logColumn(item, index)"
>
{{ t(item.value) }}
</div>
</template> </template>
</template> </template>
</div> </div>
@ -65,7 +70,7 @@ limitations under the License. -->
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from "vue"; import { ref, computed } from "vue";
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
import { ServiceLogConstants, BrowserLogConstants } from "./data"; import { ServiceLogConstants, BrowserLogConstants } from "./data";
import LogBrowser from "./LogBrowser.vue"; import LogBrowser from "./LogBrowser.vue";
@ -83,13 +88,62 @@ 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);
const columns: any[] = // props.type === "browser" ? BrowserLogConstants : ServiceLogConstants;
props.type === "browser" ? BrowserLogConstants : ServiceLogConstants; const columns = ref<any[]> ([
{
label: "serviceName",
value: "service",
isVisible: true,
},
{
label: "serviceInstanceName",
value: "instance",
isVisible: true,
},
{
label: "endpointName",
value: "endpoint",
isVisible: false,
},
{
label: "timestamp",
value: "time",
isVisible: true,
},
{
label: "contentType",
value: "contentType",
isVisible: true,
},
{
label: "tags",
value: "tags",
isVisible: false,
},
{
label: "content",
value: "content",
isVisible: true,
},
{
label: "traceId",
value: "traceID",
isVisible: false,
},
]);
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;
} }
function logColumn(item: any, index: number) {
console.log(index, item, visibleColumns.value[index]);
columns.value[index].isVisible = false;
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.log { .log {