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,110 +13,143 @@ 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 row">
+  <div class="flex-h log-wrapper">
-    <div class="mr-5" v-if="dashboardStore.entity === EntityType[1].value">
+    <div class="flex-h row">
-      <span class="grey mr-5">{{ t("service") }}:</span>
+      <!-- <h1>{{EntityType[3].value}}</h1> -->
-      <Selector
+      <!-- <div
-        size="small"
+        class="mr-5 flex-h"
-        :value="state.service.value"
+        v-if="dashboardStore.entity === EntityType[1].value"
-        :options="logStore.services"
-        placeholder="Select a service"
-        @change="changeField('service', $event)"
-      />
-    </div>
-    <div class="mr-5" v-if="dashboardStore.entity !== EntityType[3].value">
-      <span class="grey mr-5">
-        {{ isBrowser ? t("version") : t("instance") }}:
-      </span>
-      <Selector
-        size="small"
-        :value="state.instance.value"
-        :options="logStore.instances"
-        placeholder="Select a instance"
-        @change="changeField('instance', $event)"
-      />
-    </div>
-    <div class="mr-5" v-if="dashboardStore.entity !== EntityType[2].value">
-      <span class="grey mr-5"
-        >{{ isBrowser ? t("page") : t("endpoint") }}:</span
       >
-      <Selector
+        <span class="grey mr-5">{{ t("service") }}:</span>
-        size="small"
+        <Selector
-        :value="state.endpoint.value"
+          size="small"
-        :options="logStore.endpoints"
+          :value="state.service.value"
-        placeholder="Select a endpoint"
+          :options="logStore.services"
-        @change="changeField('endpoint', $event)"
+          placeholder="Select a service"
-        :isRemote="true"
+          @change="changeField('service', $event)"
-        @query="searchEndpoints"
+        />
-      />
+      </div> -->
-    </div>
+      <!-- <div
-  </div>
+        class="mr-5 flex-h"
-  <div class="row tips">
+        v-if="dashboardStore.entity !== EntityType[3].value"
-    <b>{{ t("conditionNotice") }}</b>
+      >
-  </div>
+        <span class="grey mr-5">
-  <div class="flex-h row">
+          {{ isBrowser ? t("version") : t("instance") }}:
-    <div class="mr-5 traceId" v-show="!isBrowser">
-      <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>
-  <div class="flex-h" v-show="!isBrowser">
-    <div class="mr-5" v-show="logStore.supportQueryLogsByKeywords">
-      <span class="mr-5 grey">{{ t("keywordsOfContent") }}:</span>
-      <span class="log-tags">
-        <span
-          class="selected"
-          v-for="(item, index) in keywordsOfContent"
-          :key="`keywordsOfContent${index}`"
-        >
-          <span>{{ item }}</span>
-          <span class="remove-icon" @click="removeContent(index)">×</span>
         </span>
-      </span>
+        <Selector
-      <el-input
+          size="small"
-        size="small"
+          :value="state.instance.value"
-        class="inputs-max"
+          :options="logStore.instances"
-        :placeholder="t('addKeywordsOfContent')"
+          placeholder="Select a instance"
-        v-model="contentStr"
+          @change="changeField('instance', $event)"
-        @change="addLabels('keywordsOfContent')"
+        />
+      </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
+        >
+        <Selector
+          size="small"
+          :value="state.endpoint.value"
+          :options="logStore.endpoints"
+          placeholder="Select a endpoint"
+          @change="changeField('endpoint', $event)"
+          :isRemote="true"
+          @query="searchEndpoints"
+        />
+      </div> -->
+    </div>
+    <!-- <div class="row tips">
+      <b>{{ t("conditionNotice") }}</b>
+    </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>
+      </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="mr-5" v-show="logStore.supportQueryLogsByKeywords">
+
-      <span class="grey mr-5"> {{ t("excludingKeywordsOfContent") }}: </span>
+    <div class="flex-h" v-show="!isBrowser">
-      <span class="log-tags">
+      <div class="mr-5 flex-h" v-show="logStore.supportQueryLogsByKeywords">
-        <span
+        <span class="mr-5 grey">{{ t("keywordsOfContent") }}:</span>
-          class="selected"
+        <span class="log-tags">
-          v-for="(item, index) in excludingKeywordsOfContent"
+          <span
-          :key="`excludingKeywordsOfContent${index}`"
+            class="selected"
-        >
+            v-for="(item, index) in keywordsOfContent"
-          <span>{{ item }}</span>
+            :key="`keywordsOfContent${index}`"
-          <span class="remove-icon" @click="removeExcludeContent(index)">
+          >
-            ×
+            <span>{{ item }}</span>
+            <span class="remove-icon" @click="removeContent(index)">×</span>
           </span>
         </span>
-      </span>
+        <el-input
-      <el-input
+          size="small"
-        class="inputs-max"
+          class="inputs-max"
-        size="small"
+          :placeholder="t('addKeywordsOfContent')"
-        :placeholder="t('addExcludingKeywordsOfContent')"
+          v-model="contentStr"
-        v-model="excludingContentStr"
+          @change="addLabels('keywordsOfContent')"
-        @change="addLabels('excludingKeywordsOfContent')"
+        />
-      />
+      </div>
-      <el-tooltip :content="t('keywordsOfContentLogTips')">
+      <div class="mr-5 flex-h" v-show="logStore.supportQueryLogsByKeywords">
-        <span class="log-tips" v-show="!logStore.supportQueryLogsByKeywords">
+        <span class="grey mr-5"> {{ t("excludingKeywordsOfContent") }}: </span>
-          <Icon icon="help" class="mr-5" />
+        <span class="log-tags">
+          <span
+            class="selected"
+            v-for="(item, index) in excludingKeywordsOfContent"
+            :key="`excludingKeywordsOfContent${index}`"
+          >
+            <span>{{ item }}</span>
+            <span class="remove-icon" @click="removeExcludeContent(index)">
+              ×
+            </span>
+          </span>
         </span>
-      </el-tooltip>
+        <el-input
+          class="inputs-max"
+          size="small"
+          :placeholder="t('addExcludingKeywordsOfContent')"
+          v-model="excludingContentStr"
+          @change="addLabels('excludingKeywordsOfContent')"
+        />
+        <el-tooltip :content="t('keywordsOfContentLogTips')">
+          <span class="log-tips" v-show="!logStore.supportQueryLogsByKeywords">
+            <Icon icon="help" class="mr-5" />
+          </span>
+        </el-tooltip>
+      </div>
+      <el-button
+        class="search-btn"
+        size="small"
+        type="primary"
+        @click="searchLogs"
+      >
+        {{ t("search") }}
+      </el-button>
     </div>
-    <el-button
-      class="search-btn"
-      size="small"
-      type="primary"
-      @click="searchLogs"
-    >
-      {{ t("search") }}
-    </el-button>
   </div>
 </template>
 <script lang="ts" setup>
@@ -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>