From bff5175674f7aec7050c104db81babacba8807e1 Mon Sep 17 00:00:00 2001
From: Peter Olu <pemeraldy@gmail.com>
Date: Wed, 4 May 2022 13:10:18 +0100
Subject: [PATCH] can toggle trace details when a list item is selected

---
 src/views/dashboard/controls/Trace.vue          | 16 +++++++++++-----
 src/views/dashboard/related/trace/TraceList.vue | 11 ++++++++---
 2 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/src/views/dashboard/controls/Trace.vue b/src/views/dashboard/controls/Trace.vue
index 9b91894a..738da5e1 100644
--- a/src/views/dashboard/controls/Trace.vue
+++ b/src/views/dashboard/controls/Trace.vue
@@ -29,17 +29,18 @@ limitations under the License. -->
         <span>{{ t("delete") }}</span>
       </div>
     </el-popover>
-    <div class="header">
     <!-- filter was here -->
-    </div>
+    <!-- <div class="header">
+    </div> -->
     <div class="trace flex-h">
-      <TraceList />
-      <TraceDetail />
+      <TraceList @show:trace="showTraceDetails" v-if="traceListActive" />
+      
+      <TraceDetail v-if="!traceListActive" />
     </div>
   </div>
 </template>
 <script lang="ts" setup>
-import type { PropType } from "vue";
+import type { PropType, ref } from "vue";
 // import Filter from "../related/trace/Filter.vue";
 import TraceList from "../related/trace/TraceList.vue";
 import TraceDetail from "../related/trace/Detail.vue";
@@ -56,9 +57,14 @@ const props = defineProps({
 });
 const { t } = useI18n();
 const dashboardStore = useDashboardStore();
+const traceListActive = ref<boolean>(true);
 function removeWidget() {
   dashboardStore.removeControls(props.data);
 }
+function showTraceDetails(){
+  console.log("SHow trace...")
+  traceListActive.value = false
+}
 </script>
 <style lang="scss" scoped>
 .trace-wrapper {
diff --git a/src/views/dashboard/related/trace/TraceList.vue b/src/views/dashboard/related/trace/TraceList.vue
index 9240e5de..8c30cb53 100644
--- a/src/views/dashboard/related/trace/TraceList.vue
+++ b/src/views/dashboard/related/trace/TraceList.vue
@@ -71,7 +71,7 @@ limitations under the License. -->
 
 <script lang="ts" setup>
 import dayjs from "dayjs";
-import { ref } from "vue";
+import { ref, defineEmits } from "vue";
 import { useI18n } from "vue-i18n";
 import { useTraceStore } from "@/store/modules/trace";
 import { ElMessage } from "element-plus";
@@ -88,6 +88,8 @@ const pageCount = ref<number>(5);
 const dateFormat = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") =>
   dayjs(date).format(pattern);
 
+const emit = defineEmits(["show:trace"]);
+
 function searchTrace() {
   loading.value = true;
   queryTraces();
@@ -110,6 +112,7 @@ function changeSort(opt: Option[] | any) {
 }
 
 async function selectTrace(i: Trace) {
+  emit("show:trace");
   traceStore.setCurrentTrace(i);
   selectedKey.value = i.key;
   if (i.traceIds.length) {
@@ -163,11 +166,13 @@ async function queryTraces() {
 }
 
 .trace-t {
-  width: 420px;
+  width: 100%;
+  // width: 420px;
 }
 
 .list {
-  width: 400px;
+  // width: 400px;
+  width: 100%;
 }
 
 .trace-tr {