refactoring log layout

src/views/components/ConditionTags.vue

@@ -14,12 +14,13 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <div class="flex-h" :class="{ light: theme === 'light' }">
-    <div class="mr-5">
+    <div class="flex-h items-center mr-5">
       <span class="sm grey" v-show="theme === 'dark'">{{ t("tags") }}: </span>
       <span
+        v-if="tagsList.length"
         class="trace-tags"
-        :style="type === 'LOG' ? `min-width: 122px;` : ''"
       >
+        <!-- :style="type === 'LOG' ? `min-width: 122px;` : ''" -->
         <span class="selected" v-for="(item, index) in tagsList" :key="index">
           <span>{{ item }}</span>
           <span class="remove-icon" @click="removeTags(index)">×</span>
@@ -98,6 +99,9 @@ function updateTags() {
 }
 </script>
 <style lang="scss" scoped>
+.items-center{
+  align-items: center;
+}
 .trace-tags {
   padding: 1px 5px 0 0;
   border-radius: 3px;

src/views/dashboard/controls/Log.vue

@@ -30,7 +30,7 @@ limitations under the License. -->
       </div>
     </el-popover>
     <div class="header">
-      <Header />
+      <!-- <Header /> -->
     </div>
     <div class="log">
       <List />
@@ -40,7 +40,7 @@ limitations under the License. -->
 <script lang="ts" setup>
 import { useI18n } from "vue-i18n";
 import { useDashboardStore } from "@/store/modules/dashboard";
-import Header from "../related/log/Header.vue";
+// import Header from "../related/log/Header.vue";
 import List from "../related/log/List.vue";
 
 /*global defineProps */

src/views/dashboard/panel/Tool.vue

@@ -172,7 +172,7 @@ limitations under the License. -->
         </div>
       </div>
     </div>
-    <!-- Trace Details tools here -->
+    <Header v-if="showLogHeader" />
     <TraceDetailsTools
       v-if="showFilter && currentTraceView === 'traceDetails'"
     />
@@ -181,6 +181,8 @@ limitations under the License. -->
 </template>
 <script lang="ts" setup>
 import Filter from "../related/trace/Filter.vue";
+import Header from "../related/log/Header.vue";
+
 import { reactive, ref, computed, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { useDashboardStore } from "@/store/modules/dashboard";
@@ -212,6 +214,9 @@ const selectedSelector = ref<string>("");
 const showFilter = computed(
   () => dashboardStore.layout[0]?.activedTabIndex === 2
 );
+const showLogHeader = computed(
+  () => dashboardStore.layout[0]?.activedTabIndex === 3
+);
 const currentTraceView = computed(() => traceStore.currentView)
 const { query } = useRoute();
 dashboardStore.setViewMode(query["fullview"] === "true");

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

@@ -13,8 +13,13 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
+  <div class="flex-h log-wrapper">
     <div class="flex-h row">
-    <div class="mr-5" v-if="dashboardStore.entity === EntityType[1].value">
+      <!-- <h1>{{EntityType[3].value}}</h1> -->
+      <!-- <div
+        class="mr-5 flex-h"
+        v-if="dashboardStore.entity === EntityType[1].value"
+      >
         <span class="grey mr-5">{{ t("service") }}:</span>
         <Selector
           size="small"
@@ -23,8 +28,11 @@ limitations under the License. -->
           placeholder="Select a service"
           @change="changeField('service', $event)"
         />
-    </div>
-    <div class="mr-5" v-if="dashboardStore.entity !== EntityType[3].value">
+      </div> -->
+      <!-- <div
+        class="mr-5 flex-h"
+        v-if="dashboardStore.entity !== EntityType[3].value"
+      >
         <span class="grey mr-5">
           {{ isBrowser ? t("version") : t("instance") }}:
         </span>
@@ -35,8 +43,11 @@ limitations under the License. -->
           placeholder="Select a instance"
           @change="changeField('instance', $event)"
         />
-    </div>
-    <div class="mr-5" v-if="dashboardStore.entity !== EntityType[2].value">
+      </div> -->
+      <!-- <div
+        class="mr-5 flex-h"
+        v-if="dashboardStore.entity !== EntityType[2].value"
+      >
         <span class="grey mr-5"
           >{{ isBrowser ? t("page") : t("endpoint") }}:</span
         >
@@ -49,20 +60,41 @@ limitations under the License. -->
           :isRemote="true"
           @query="searchEndpoints"
         />
+      </div> -->
     </div>
-  </div>
-  <div class="row tips">
+    <!-- <div class="row tips">
       <b>{{ t("conditionNotice") }}</b>
-  </div>
-  <div class="flex-h row">
-    <div class="mr-5 traceId" v-show="!isBrowser">
+    </div> -->
+    <div class="flex-h items-center">
+      <div class="mr-5 flex-h items-center traceId" v-show="!isBrowser">
+        <el-button
+          type="success"
+          class="toggle-btn mx-3"
+          @click="setSearchTerm('traceId')"
+        >
+          {{ t("traceID") }}
+        </el-button>
+        <div class="flex-h items-center" v-if="currentSearchTerm === 'traceId'">
           <span class="grey mr-5">{{ t("traceID") }}:</span>
           <el-input v-model="traceId" class="inputs-max" size="small" />
         </div>
-    <ConditionTags :type="'LOG'" @update="updateTags" />
       </div>
+      <el-button
+        type="success"
+        class="toggle-btn mx-3"
+        @click="setSearchTerm('tags')"
+      >
+        Tags
+      </el-button>
+      <ConditionTags
+        v-if="currentSearchTerm === 'tags'"
+        :type="'LOG'"
+        @update="updateTags"
+      />
+    </div>
+
     <div class="flex-h" v-show="!isBrowser">
-    <div class="mr-5" v-show="logStore.supportQueryLogsByKeywords">
+      <div class="mr-5 flex-h" v-show="logStore.supportQueryLogsByKeywords">
         <span class="mr-5 grey">{{ t("keywordsOfContent") }}:</span>
         <span class="log-tags">
           <span
@@ -82,7 +114,7 @@ limitations under the License. -->
           @change="addLabels('keywordsOfContent')"
         />
       </div>
-    <div class="mr-5" v-show="logStore.supportQueryLogsByKeywords">
+      <div class="mr-5 flex-h" v-show="logStore.supportQueryLogsByKeywords">
         <span class="grey mr-5"> {{ t("excludingKeywordsOfContent") }}: </span>
         <span class="log-tags">
           <span
@@ -118,6 +150,7 @@ limitations under the License. -->
         {{ t("search") }}
       </el-button>
     </div>
+  </div>
 </template>
 <script lang="ts" setup>
 import { ref, reactive, watch } from "vue";
@@ -139,6 +172,7 @@ const logStore = useLogStore();
 const traceId = ref<string>("");
 const keywordsOfContent = ref<string[]>([]);
 const excludingKeywordsOfContent = ref<string[]>([]);
+const currentSearchTerm = ref<string>("");
 const tagsList = ref<string[]>([]);
 const tagsMap = ref<Option[]>([]);
 const contentStr = ref<string>("");
@@ -293,6 +327,9 @@ function removeExcludeContent(index: number) {
   });
   excludingContentStr.value = "";
 }
+function setSearchTerm(term: string) {
+  currentSearchTerm.value = term;
+}
 watch(
   () => selectorStore.currentService,
   () => {
@@ -320,6 +357,12 @@ watch(
 );
 </script>
 <style lang="scss" scoped>
+// .log-wrapper {
+//   width: 600px;
+//   padding-left: 40px;
+//   overflow-x: scroll;
+//   align-items: center;
+// }
 .inputs {
   width: 120px;
 }
@@ -378,4 +421,22 @@ watch(
   margin-left: 3px;
   cursor: pointer;
 }
+
+/* buttons*/
+.el-button span {
+  font-size: 10px !important;
+}
+.toggle-btn {
+  height: 18px;
+  margin: 0 5px;
+}
+.active-toggle.toggle-btn {
+  background: #276c04 !important;
+  span {
+    color: #275410 !important;
+  }
+}
+.items-center {
+  align-items: center;
+}
 </style>