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" @closed="showDetail = false"
:title="t('logDetail')" :title="t('logDetail')"
> >
<LogDetail :currentLog="currentLog" /> <LogDetail :currentLog="currentLog" :logTemplate="type === 'browser' ? BrowserLogConstants : ServiceLogDetail" />
</el-dialog> </el-dialog>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from "vue"; import { ref } from "vue";
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
import { ServiceLogConstants, BrowserLogConstants } from "./data"; import { ServiceLogConstants, BrowserLogConstants, ServiceLogDetail } from "./data";
import LogBrowser from "./LogBrowser.vue"; import LogBrowser from "./LogBrowser.vue";
import LogService from "./LogService.vue"; import LogService from "./LogService.vue";
import LogDetail from "./LogDetail.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); const logItem = ref<any>(null);
function showSelectSpan() { 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); emit("select", props.data);
} }
</script> </script>
@ -62,15 +55,15 @@ limitations under the License. -->
} }
.log-item.selected { .log-item.selected {
background: rgba(0, 0, 0, 0.04); background: rgb(0 0 0 / 4%);
} }
.log-item:not(.level0):hover { .log-item:not(.level0):hover {
background: rgba(0, 0, 0, 0.04); background: rgb(0 0 0 / 4%);
} }
.log-item:hover { .log-item:hover {
background: rgba(0, 0, 0, 0.04) !important; background: rgb(0 0 0 / 4%) !important;
} }
.log-item > div { .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. --> limitations under the License. -->
<template> <template>
<div class="log-detail"> <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 class="g-sm-4 grey">{{ t(item.value) }}:</span>
<span v-if="['timestamp', 'time'].includes(item.label)" class="g-sm-8 mb-10"> <span v-if="['timestamp', 'time'].includes(item.label)" class="g-sm-8 mb-10">
{{ dateFormat(currentLog[item.label]) }} {{ dateFormat(currentLog[item.label]) }}
@ -38,11 +38,11 @@ limitations under the License. -->
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
import { dateFormat } from "@/utils/dateFormat"; import { dateFormat } from "@/utils/dateFormat";
import { formatJson } from "@/utils/formatJson"; import { formatJson } from "@/utils/formatJson";
import { ServiceLogDetail } from "./data";
/*global defineProps */ /*global defineProps */
const props = defineProps({ const props = defineProps({
currentLog: { type: Object as PropType<any>, default: () => ({}) }, currentLog: { type: Object as PropType<any>, default: () => ({}) },
logTemplate: { type: Object as PropType<any>, default: () => ({}) },
}); });
const { t } = useI18n(); const { t } = useI18n();
const logTags = computed(() => { const logTags = computed(() => {