finding loader

src/views/dashboard/panel/component/TraceDetailsTools.vue

@@ -10,22 +10,37 @@
         class="red mr-5 sm"
       />
       <div class="trace-log-btn">
-        <el-button
+        <el-tooltip
-          size="small"
+          class="box-item"
-          class="mr-10"
+          effect="dark"
-          type="primary"
+          content="Back"
-          @click="showTraceList"
+          placement="bottom-start"
         >
-          {{ t("back") }}
+          <el-button
-        </el-button>
+            size="small"
-        <el-button
+            class="mr-10 filter-btn"
-          size="small"
+            type="primary"
-          class="mr-10"
+            @click="showTraceList"
-          type="primary"
+          >
-          @click="searchTraceLogs"
+            <Icon iconSize="sm" iconName="chevron-left" />
+          </el-button>
+        </el-tooltip>
+
+        <el-tooltip
+          class="box-item"
+          effect="dark"
+          :content="t('viewLogs')"
+          placement="bottom-start"
         >
-          {{ t("viewLogs") }}
+          <el-button
-        </el-button>
+            size="small"
+            class="mr-10 filter-btn"
+            type="primary"
+            @click="searchTraceLogs"
+          >
+            <Icon iconSize="sm" iconName="folder_open" />
+          </el-button>
+        </el-tooltip>
       </div>
       <el-dialog
         v-model="showTraceLogs"
@@ -73,48 +88,74 @@
         @click="handleClick"
       />
     </div>
-    <div class="flex-h item">     
+    <div class="flex-h item">
       <div>
-        <el-button
+        <el-tooltip
-          class="grey"
+          class="box-item"
-          size="small"
+          effect="dark"
-          :class="{ ghost: displayMode !== 'List' }"
+          :content="t('list')"
-          @click="changeDisplayMode('List')"
+          placement="bottom-start"
         >
-          <Icon class="mr-5" size="sm" iconName="list-bulleted" />
+          <el-button
-          {{ t("list") }}
+            class="filter-btn"
-        </el-button>
+            size="small"
-        <el-button
+            :class="{ ghost: displayMode === 'List' }"
-          class="grey"
+            @click="changeDisplayMode('List')"
-          size="small"
+          >
-          :class="{ ghost: displayMode !== 'Tree' }"
+            <Icon class="mr-5" size="sm" iconName="list-bulleted" />
-          @click="changeDisplayMode('Tree')"
+          </el-button>
+        </el-tooltip>
+
+        <el-tooltip
+          class="box-item"
+          effect="dark"
+          :content="t('tree')"
+          placement="bottom-start"
         >
-          <Icon class="mr-5" size="sm" iconName="issue-child" />
+          <el-button
-          {{ t("tree") }}
+            class="filter-btn"
-        </el-button>
+            size="small"
-        <el-button
+            :class="{ ghost: displayMode === 'Tree' }"
-          class="grey"
+            @click="changeDisplayMode('Tree')"
-          size="small"
+          >
-          :class="{ ghost: displayMode !== 'Table' }"
+            <Icon class="mr-5" size="sm" iconName="issue-child" />
-          @click="changeDisplayMode('Table')"
+          </el-button>
+        </el-tooltip>
+
+        <el-tooltip
+          class="box-item"
+          effect="dark"
+          :content="t('table')"
+          placement="bottom-start"
         >
-          <Icon class="mr-5" size="sm" iconName="table" />
+          <el-button
-          {{ t("table") }}
+            class="filter-btn"
-        </el-button>
+            size="small"
-        <el-button
+            :class="{ ghost: displayMode === 'Table' }"
-          class="grey"
+            @click="changeDisplayMode('Table')"
-          size="small"
+          >
-          :class="{ ghost: displayMode !== 'Statistics' }"
+            <Icon class="mr-5" size="sm" iconName="table" />
-          @click="changeDisplayMode('Statistics')"
+          </el-button>
+        </el-tooltip>
+        <el-tooltip
+          class="box-item"
+          effect="dark"
+          :content="t('statistics')"
+          placement="bottom-start"
         >
-          <Icon class="mr-5" size="sm" iconName="statistics-bulleted" />
+          <el-button
-          {{ t("statistics") }}
+            class="filter-btn"
-        </el-button>
+            size="small"
+            :class="{ ghost: displayMode === 'Statistics' }"
+            @click="changeDisplayMode('Statistics')"
+          >
+            <Icon class="mr-5" size="sm" iconName="statistics-bulleted" />
+          </el-button>
+        </el-tooltip>
       </div>
     </div>
   </div>
-  <div class="no-data" v-else>{{ t("noData") }}</div>
+  <div class="no-data" v-else>t("noData")</div>
 </template>
 
 <script lang="ts">
@@ -222,15 +263,12 @@ export default defineComponent({
   overflow: auto;
   padding-bottom: 20px;
 }
-.trace-chart.full-view{
+.trace-chart.full-view {
   height: calc(100% - 1px) !important;
 }
 
 .trace-detail-wrapper {
   font-size: 12px;
-  //   padding: 5px 10px;
-  //   height: 95px;
-  //   border-bottom: 1px solid #eee;
   width: 100%;
   justify-content: space-between;
   align-items: center;
@@ -242,7 +280,7 @@ export default defineComponent({
 
   .ghost {
     cursor: pointer;
-    background: rgba(0, 0, 0, 0.3);
+    background: rgba(4, 147, 114, 1);    
   }
 }
 
@@ -277,7 +315,11 @@ export default defineComponent({
   width: 100%;
   text-align: center;
 }
-.vm{
+.vm {
   margin-right: 4px;
 }
+.filter-btn {
+  height: 18px;
+  margin: 0 5px;
+}
 </style>

src/views/dashboard/related/log/Header.vue

@@ -508,7 +508,7 @@ watch(
   margin: 0 5px;
 }
 .active-toggle.toggle-btn {
-  background: #276c04 !important;
+  background: rgba(4, 147, 114, 1) !important;
   span {
     color: #275410 !important;
   }

src/views/dashboard/related/trace/Filter.vue

@@ -363,7 +363,7 @@ watch(
   margin: 0 5px;
 }
 .active-filter.filter-btn {
-  background: #276c04 !important;
+  background: rgba(4, 147, 114, 1) !important;
   span {
     color: #275410 !important;
   }