refactor: update js to ts for browser logs and style change (#476)
* fix: update lists style of browser logs
* fix: update logs
diff --git a/src/assets/lang/en.ts b/src/assets/lang/en.ts
index 04b36fe..4848d1a 100644
--- a/src/assets/lang/en.ts
+++ b/src/assets/lang/en.ts
@@ -220,6 +220,7 @@
tableValues: 'Table Values',
show: 'Show',
hide: 'Hide',
+ message: 'Message',
};
export default m;
diff --git a/src/assets/lang/zh.ts b/src/assets/lang/zh.ts
index 812a31b..570ef7d 100644
--- a/src/assets/lang/zh.ts
+++ b/src/assets/lang/zh.ts
@@ -218,6 +218,7 @@
tableValues: '表值',
show: '展示',
hide: '隐藏',
+ message: '信息',
};
export default m;
diff --git a/src/views/components/log/log-bar.vue b/src/views/components/log/log-bar.vue
index 7de635a..5e4f5d8 100644
--- a/src/views/components/log/log-bar.vue
+++ b/src/views/components/log/log-bar.vue
@@ -107,7 +107,7 @@
private pageNum: number = 1;
private cateGoryBrowser = 'browser';
private showConditionsBox = true;
- private pageSize = 20;
+ private pageSize = 22;
private beforeMount() {
this.MIXHANDLE_GET_OPTION({
diff --git a/src/views/components/log/log-browser-detail.vue b/src/views/components/log/log-browser-detail.vue
index 6173669..5fc2aef 100644
--- a/src/views/components/log/log-browser-detail.vue
+++ b/src/views/components/log/log-browser-detail.vue
@@ -27,12 +27,8 @@
<div class="mb-10 clear rk-flex" v-for="(item, index) in columns" :key="index">
<template>
<span class="g-sm-4 grey">{{ $t(item.value) }}:</span>
- <span
- v-if="['message', 'stack'].includes(item.label)"
- class="text"
- v-html="lineBreak(currentLog[item.label]) || '-'"
- ></span>
- <span v-else-if="item.label === 'time'" class="g-sm-8 wba">{{ currentLog[item.label] | dateformat }}</span>
+ <span v-if="item.label === 'time'" class="g-sm-8 wba">{{ currentLog[item.label] | dateformat }}</span>
+ <span v-else-if="item.label === 'errorUrl'">{{ currentLog.pagePath }}</span>
<span v-else class="g-sm-8 wba">{{ currentLog[item.label] || '-' }}</span>
</template>
</div>
@@ -43,7 +39,6 @@
<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
- import { Mutation, State } from 'vuex-class';
import LogTable from './log-table/log-table.vue';
import { BrowserLogConstants } from './log-table/log-constant';
@@ -51,22 +46,13 @@
components: { LogTable },
})
export default class LogBrowserDetail extends Vue {
- @State('rocketLog') private logState: any;
@Prop() private data: any;
@Prop() private loading!: true;
private columns = BrowserLogConstants;
private showDetail = false;
- private list = [];
private currentLog = {};
- private lineBreak(str = '') {
- const s = str
- .replace(/</g, '<')
- .replace(/>/g, '>')
- .replace(/\r\n/g, '<br />')
- .replace(/\n/g, '<br />');
- return s;
- }
+
private handleSelectLog(data: any) {
this.currentLog = data;
this.showDetail = true;
diff --git a/src/views/components/log/log-content.vue b/src/views/components/log/log-content.vue
index 4df6217..8923507 100644
--- a/src/views/components/log/log-content.vue
+++ b/src/views/components/log/log-content.vue
@@ -19,7 +19,6 @@
</template>
<script lang="ts">
- import { Duration, Option } from '@/types/global';
import { Component, Vue } from 'vue-property-decorator';
import { State } from 'vuex-class';
import LogBrowserDetail from './log-browser-detail.vue';
diff --git a/src/views/components/log/log-table/log-browser-item.vue b/src/views/components/log/log-table/log-browser-item.vue
index 1df1b0b..8394d03 100644
--- a/src/views/components/log/log-table/log-browser-item.vue
+++ b/src/views/components/log/log-table/log-browser-item.vue
@@ -24,78 +24,39 @@
width: `${item.drag ? item.method : ''}px`,
}"
>
- <span v-if="['message', 'stack'].includes(item.label)" class="text" v-html="lineBreak(data[item.label])"></span>
- <template v-else-if="item.label === 'time'">
- {{ data.time | dateformat }}
- </template>
- <span v-else class="" v-tooltip:bottom="data[item.label] || '-'">{{ data[item.label] || '-' }}</span>
+ <span v-if="item.label === 'time'">{{ data.time | dateformat }}</span>
+ <span v-else-if="item.label === 'errorUrl'">{{ data.pagePath }}</span>
+ <span v-else v-tooltip:bottom="data[item.label] || '-'">{{ data[item.label] || '-' }}</span>
</div>
</div>
</template>
-<script lang="js">
+<script lang="ts">
+ import { Component, Prop, Vue } from 'vue-property-decorator';
import { BrowserLogConstants } from './log-constant';
- export default {
- name: 'item',
- props: ['data', 'method'],
- watch: {
- data: {
- handler() {
- this.setLogItemHeight();
- },
- deep: true,
- immediate: true,
- },
- },
- data() {
- return {
- columns: BrowserLogConstants,
- displayChildren: true,
- selectedSpan: 0,
- };
- },
- computed: {},
- methods: {
- lineBreak(str = '') {
- const param = str
- .replace(/</g, '<')
- .replace(/>/g, '>')
- .replace(/\r\n/g, '<br />')
- .replace(/\n/g, '<br />');
- return param;
- },
- setLogItemHeight() {
- this.$nextTick(() => {
- const heights = [];
- this.$refs.logItem.childNodes.forEach((item) => {
- if (item.getAttribute('class').indexOf('autoHeight') > -1) {
- const autoHeightChild = item.childNodes[0];
- const height = autoHeightChild.getBoundingClientRect().height;
- heights.push(height + 11);
- }
- });
- const max = Math.max(...heights);
- this.$refs.logItem.style.height = max + 'px';
- });
+ @Component
+ export default class ServiceItem extends Vue {
+ @Prop() private data: any;
- },
- showSelectSpan() {
- const items = document.querySelectorAll('.log-item');
- for (const item of items) {
- item.style.background = '#fff';
- }
- this.$refs.logItem.style.background = 'rgba(0, 0, 0, 0.1)';
- this.$eventBus.$emit('HANDLE-SELECT-LOG', this.data);
- },
- },
- };
+ private columns = BrowserLogConstants;
+ private showSelectSpan() {
+ const items: NodeListOf<any> = document.querySelectorAll('.log-item');
+
+ for (const item of items) {
+ item.style.background = '#fff';
+ }
+ const logItem: any = this.$refs.logItem;
+
+ logItem.style.background = 'rgba(0, 0, 0, 0.1)';
+ this.$eventBus.$emit('HANDLE-SELECT-LOG', this.data);
+ }
+ }
</script>
<style lang="scss" scoped>
.log-item {
white-space: nowrap;
position: relative;
cursor: pointer;
- /*height: 100px;*/
}
.log-item.selected {
@@ -124,7 +85,6 @@
.log-item .text {
width: 100% !important;
- /*padding: 0 5px;*/
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
@@ -132,7 +92,7 @@
}
.log-item > div.method {
- height: 100%;
- padding: 3px 8px;
+ padding: 7px 5px;
+ line-height: 30px;
}
</style>
diff --git a/src/views/components/log/log-table/log-constant.ts b/src/views/components/log/log-table/log-constant.ts
index 157f082..079d65a 100644
--- a/src/views/components/log/log-table/log-constant.ts
+++ b/src/views/components/log/log-table/log-constant.ts
@@ -78,26 +78,10 @@
// The order of columns should be time, service, error, stack, version, url, catalog, and grade.
export const BrowserLogConstants = [
{
- label: 'time',
- value: 'time',
- },
- {
label: 'service',
value: 'service',
},
{
- label: 'message',
- value: 'errorInfo',
- drag: true,
- method: 350,
- },
- {
- label: 'stack',
- value: 'stack',
- drag: true,
- method: 350,
- },
- {
label: 'serviceVersion',
value: 'serviceVersion',
},
@@ -105,6 +89,22 @@
label: 'errorUrl',
value: 'errorPage',
},
+ {
+ label: 'time',
+ value: 'time',
+ },
+ {
+ label: 'message',
+ value: 'message',
+ drag: true,
+ method: 350,
+ },
+ {
+ label: 'stack',
+ value: 'stack',
+ drag: true,
+ method: 350,
+ },
// {
// label: 'pagePath',
// value: 'Page Path',
diff --git a/src/views/components/log/log-table/log-service-item.vue b/src/views/components/log/log-table/log-service-item.vue
index 06a75da..a4601fa 100644
--- a/src/views/components/log/log-table/log-service-item.vue
+++ b/src/views/components/log/log-table/log-service-item.vue
@@ -82,7 +82,6 @@
}
.log-item > div {
- line-height: 1.3;
width: 140px;
padding: 0 5px;
display: inline-block;
diff --git a/src/views/components/log/log-table/log-table.vue b/src/views/components/log/log-table/log-table.vue
index cc2cbfe..887d607 100644
--- a/src/views/components/log/log-table/log-table.vue
+++ b/src/views/components/log/log-table/log-table.vue
@@ -29,10 +29,10 @@
</template>
</div>
<div v-if="type === 'browser'">
- <BrowserItem :method="method" v-for="(item, index) in tableData" :data="item" :key="'key' + index" />
+ <BrowserItem v-for="(item, index) in tableData" :data="item" :key="'browser' + index" />
</div>
<div v-else>
- <ServiceItem v-for="(item, index) in tableData" :data="item" :key="'key' + index" :noLink="noLink" />
+ <ServiceItem v-for="(item, index) in tableData" :data="item" :key="'service' + index" :noLink="noLink" />
</div>
<slot></slot>
</div>
