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

fix: browser log display (#396)

Browse Source
This commit is contained in:
Starry 2024-05-21 23:11:23 +08:00 committed by GitHub
parent 88dbee311c
commit 21fe455fd6
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 7 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/views/dashboard/related/log/LogTable/Index.vue
View File

@ -42,14 +42,14 @@ limitations under the License. -->
@closed="showDetail = false"
:title="t('logDetail')"
>
<LogDetail :currentLog="currentLog" />
<LogDetail :currentLog="currentLog" :logTemplate="type === 'browser' ? BrowserLogConstants : ServiceLogDetail" />
</el-dialog>
</div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import { useI18n } from "vue-i18n";
import { ServiceLogConstants, BrowserLogConstants } from "./data";
import { ServiceLogConstants, BrowserLogConstants, ServiceLogDetail } from "./data";
import LogBrowser from "./LogBrowser.vue";
import LogService from "./LogService.vue";
import LogDetail from "./LogDetail.vue";

13
src/views/dashboard/related/log/LogTable/LogBrowser.vue
View File

@ -44,13 +44,6 @@ limitations under the License. -->
const logItem = ref<any>(null);
function showSelectSpan() {
const items: NodeListOf<any> = document.querySelectorAll(".log-item");
for (const item of items) {
item.style.background = "#fff";
}
logItem.value.style.background = "rgba(0, 0, 0, 0.1)";
emit("select", props.data);
}
</script>
@ -62,15 +55,15 @@ limitations under the License. -->
}
.log-item.selected {
background: rgba(0, 0, 0, 0.04);
background: rgb(0 0 0 / 4%);
}
.log-item:not(.level0):hover {
background: rgba(0, 0, 0, 0.04);
background: rgb(0 0 0 / 4%);
}
.log-item:hover {
background: rgba(0, 0, 0, 0.04) !important;
background: rgb(0 0 0 / 4%) !important;
}
.log-item > div {

4
src/views/dashboard/related/log/LogTable/LogDetail.vue
View File

@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License. -->
<template>
<div class="log-detail">
<div class="mb-10 clear rk-flex" v-for="(item, index) in ServiceLogDetail" :key="index">
<div class="mb-10 clear rk-flex" v-for="(item, index) in logTemplate" :key="index">
<span class="g-sm-4 grey">{{ t(item.value) }}:</span>
<span v-if="['timestamp', 'time'].includes(item.label)" class="g-sm-8 mb-10">
{{ dateFormat(currentLog[item.label]) }}
@ -38,11 +38,11 @@ limitations under the License. -->
import { useI18n } from "vue-i18n";
import { dateFormat } from "@/utils/dateFormat";
import { formatJson } from "@/utils/formatJson";
import { ServiceLogDetail } from "./data";
/*global defineProps */
const props = defineProps({
currentLog: { type: Object as PropType<any>, default: () => ({}) },
logTemplate: { type: Object as PropType<any>, default: () => ({}) },
});
const { t } = useI18n();
const logTags = computed(() => {