log column state is properly setup and works fine

This commit is contained in:
Peter Olu 2022-05-21 00:06:02 +01:00
parent 72ab1534ae
commit f4d93591c6
2 changed files with 24 additions and 7 deletions

View File

@ -15,7 +15,11 @@ limitations under the License. -->
<template> <template>
<div @click="showSelectSpan" class="log-item"> <div @click="showSelectSpan" class="log-item">
<div v-for="(item, index) in visibleColumns" :key="index" :class="item.label"> <div
v-for="(item, index) in visibleColumns"
:key="index"
:class="item.label"
>
<span v-if="item.label === 'timestamp'"> <span v-if="item.label === 'timestamp'">
{{ dateFormat(data.timestamp) }} {{ dateFormat(data.timestamp) }}
</span> </span>
@ -33,17 +37,22 @@ limitations under the License. -->
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { computed } from "vue"; import { computed, ref } from "vue";
import dayjs from "dayjs"; import dayjs from "dayjs";
import { ServiceLogConstants } from "./data"; import { ServiceLogConstants } from "./data";
import { logStore } from "@/store/modules/log";
/*global defineProps, defineEmits */ /*global defineProps, defineEmits */
const props = defineProps({ const props = defineProps({
data: { type: Object as any, default: () => ({}) }, data: { type: Object as any, default: () => ({}) },
noLink: { type: Boolean, default: true }, noLink: { type: Boolean, default: true },
}); });
const useLogStore = logStore();
const columns = ref<any[]>(useLogStore.serviceLogColumn);
const emit = defineEmits(["select"]); const emit = defineEmits(["select"]);
const columns = ServiceLogConstants; // const columns = ServiceLogConstants;
const visibleColumns = computed(() => columns.filter(column => column.isVisible)) const visibleColumns = computed(() =>
columns.value.filter((column) => column.isVisible)
);
const tags = computed(() => { const tags = computed(() => {
if (!props.data.tags) { if (!props.data.tags) {
return ""; return "";

View File

@ -29,7 +29,7 @@ export const ServiceLogConstants = [
{ {
label: "endpointName", label: "endpointName",
value: "endpoint", value: "endpoint",
isVisible: false isVisible: true
}, },
{ {
label: "timestamp", label: "timestamp",
@ -44,7 +44,7 @@ export const ServiceLogConstants = [
{ {
label: "tags", label: "tags",
value: "tags", value: "tags",
isVisible: false isVisible: true
}, },
{ {
label: "content", label: "content",
@ -54,7 +54,7 @@ export const ServiceLogConstants = [
{ {
label: "traceId", label: "traceId",
value: "traceID", value: "traceID",
isVisible: false isVisible: true
}, },
]; ];
export const ServiceLogDetail = [ export const ServiceLogDetail = [
@ -92,37 +92,45 @@ export const BrowserLogConstants = [
{ {
label: "service", label: "service",
value: "service", value: "service",
isVisble: true,
}, },
{ {
label: "serviceVersion", label: "serviceVersion",
value: "serviceVersion", value: "serviceVersion",
isVisble: true,
}, },
{ {
label: "errorUrl", label: "errorUrl",
value: "errorPage", value: "errorPage",
isVisble: true,
}, },
{ {
label: "time", label: "time",
value: "time", value: "time",
isVisble: true,
}, },
{ {
label: "message", label: "message",
value: "message", value: "message",
isVisble: true,
// drag: true, // drag: true,
method: 350, method: 350,
}, },
{ {
label: "stack", label: "stack",
value: "stack", value: "stack",
isVisble: true,
// drag: true, // drag: true,
method: 350, method: 350,
}, },
{ {
label: "category", label: "category",
value: "category", value: "category",
isVisble: true,
}, },
{ {
label: "grade", label: "grade",
value: "grade", value: "grade",
isVisble: true,
}, },
]; ];