can toggle trace detials when click on trace list and added a back button to go back to trace list

This commit is contained in:
Peter Olu 2022-05-04 13:31:46 +01:00
parent de2f5c093b
commit 9a0359bbba
3 changed files with 23 additions and 5 deletions

View File

@ -269,6 +269,7 @@ const msg = {
contentType: "Content Type", contentType: "Content Type",
content: "Content", content: "Content",
viewLogs: "View Logs", viewLogs: "View Logs",
back: "Back",
logsTagsTip: `Only tags defined in the core/default/searchableLogsTags are searchable. logsTagsTip: `Only tags defined in the core/default/searchableLogsTags are searchable.
Check more details on the Configuration Vocabulary page`, Check more details on the Configuration Vocabulary page`,
keywordsOfContentLogTips: keywordsOfContentLogTips:

View File

@ -35,7 +35,10 @@ limitations under the License. -->
<div class="trace flex-h"> <div class="trace flex-h">
<TraceList @show:trace="showTraceDetails" v-if="traceListActive" /> <TraceList @show:trace="showTraceDetails" v-if="traceListActive" />
<TraceDetail v-if="!traceListActive" /> <TraceDetail
@show:list="traceListActive = true"
v-if="!traceListActive"
/>
</div> </div>
</div> </div>
</template> </template>
@ -62,7 +65,7 @@ function removeWidget() {
dashboardStore.removeControls(props.data); dashboardStore.removeControls(props.data);
} }
function showTraceDetails() { function showTraceDetails() {
traceListActive.value = false traceListActive.value = false;
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

View File

@ -24,6 +24,14 @@ limitations under the License. -->
/> />
<span class="vm">{{ traceStore.currentTrace.endpointNames[0] }}</span> <span class="vm">{{ traceStore.currentTrace.endpointNames[0] }}</span>
<div class="trace-log-btn"> <div class="trace-log-btn">
<el-button
size="small"
class="mr-10"
type="primary"
@click="showTraceList"
>
{{ t("back") }}
</el-button>
<el-button <el-button
size="small" size="small"
class="mr-10" class="mr-10"
@ -163,7 +171,7 @@ export default defineComponent({
List, List,
LogTable, LogTable,
}, },
setup() { setup(props, ctx) {
const { t } = useI18n(); const { t } = useI18n();
const traceStore = useTraceStore(); const traceStore = useTraceStore();
const loading = ref<boolean>(false); const loading = ref<boolean>(false);
@ -175,6 +183,11 @@ export default defineComponent({
dayjs(date).format(pattern); dayjs(date).format(pattern);
const showTraceLogs = ref<boolean>(false); const showTraceLogs = ref<boolean>(false);
// const emit = defineEmits(["show:list"])
function showTraceList() {
ctx.emit("show:list");
}
function handleClick(ids: string[] | any) { function handleClick(ids: string[] | any) {
let copyValue = null; let copyValue = null;
if (ids.length === 1) { if (ids.length === 1) {
@ -215,6 +228,7 @@ export default defineComponent({
searchTraceLogs(); searchTraceLogs();
} }
return { return {
showTraceList,
traceStore, traceStore,
displayMode, displayMode,
dateFormat, dateFormat,