fix: update query conditions for the browser logs (#106)

src/locales/lang/en.ts

@@ -161,7 +161,7 @@ const msg = {
   dashboard: "Dashboard",
   topology: "Topology",
   trace: "Trace",
-  alarm: "Alarms",
+  alarm: "Alerting",
   auto: "Auto",
   reload: "Reload",
   version: "Version",

src/locales/lang/es.ts

@@ -161,7 +161,7 @@ const msg = {
   dashboard: "Panel",
   topology: "Topología",
   trace: "Traza",
-  alarm: "Alarmas",
+  alarm: "Recordatorio en curso",
   auto: "Auto",
   reload: "Recargar",
   version: "Versión",

src/router/alarm.ts

@@ -30,13 +30,13 @@ export const routesAlarm: Array<RouteRecordRaw> = [
     component: Layout,
     children: [
       {
-        path: "/alarm",
+        path: "/alerting",
         name: "Alarm",
         meta: {
           exact: false,
         },
         component: () =>
-          import(/* webpackChunkName: "alarms" */ "@/views/Alarm.vue"),
+          import(/* webpackChunkName: "alerting" */ "@/views/Alarm.vue"),
       },
     ],
   },

src/views/Alarm.vue

@@ -24,7 +24,7 @@ import Header from "./alarm/Header.vue";
 import Content from "./alarm/Content.vue";
 
 const appStore = useAppStoreWithOut();
-appStore.setPageTitle("Alarm");
+appStore.setPageTitle("Alerting");
 </script>
 <style lang="scss" scoped>
 .alarm {

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

@@ -50,6 +50,16 @@ limitations under the License. -->
         @query="searchEndpoints"
       />
     </div>
+    <div class="mr-5" v-if="isBrowser">
+      <span class="grey mr-5"> {{ t("category") }}: </span>
+      <Selector
+        size="small"
+        :value="state.category.value"
+        :options="ErrorCategory"
+        placeholder="Select a category"
+        @change="changeField('category', $event)"
+      />
+    </div>
     <el-button
       class="search-btn"
       size="small"
@@ -59,14 +69,14 @@ limitations under the License. -->
       {{ t("search") }}
     </el-button>
   </div>
-  <div class="flex-h row">
-    <div class="mr-5 traceId" v-show="!isBrowser">
+  <div class="flex-h row" v-show="!isBrowser">
+    <div class="mr-5 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>
-  <div class="row tips">
+  <div class="row tips" v-show="!isBrowser">
     <b>{{ t("conditionNotice") }}</b>
   </div>
   <div class="flex-h" v-show="!isBrowser">
@@ -130,6 +140,7 @@ import { useSelectorStore } from "@/store/modules/selectors";
 import ConditionTags from "@/views/components/ConditionTags.vue";
 import { ElMessage } from "element-plus";
 import { EntityType } from "../../data";
+import { ErrorCategory } from "./data";
 
 const { t } = useI18n();
 const appStore = useAppStoreWithOut();
@@ -148,6 +159,7 @@ const state = reactive<any>({
   instance: { value: "0", label: "All" },
   endpoint: { value: "0", label: "All" },
   service: { value: "", label: "" },
+  category: { value: "ALL", label: "All" },
 });
 
 init();
@@ -219,25 +231,32 @@ function searchLogs() {
   if (dashboardStore.entity === EntityType[3].value) {
     instance = selectorStore.currentPod.id;
   }
-  logStore.setLogCondition({
-    serviceId: selectorStore.currentService
-      ? selectorStore.currentService.id
-      : state.service.id,
-    endpointId: endpoint || state.endpoint.id || undefined,
-    serviceInstanceId: instance || state.instance.id || undefined,
-    queryDuration: appStore.durationTime,
-    keywordsOfContent:
-      dashboardStore.layerId === "BROWSER"
-        ? undefined
-        : keywordsOfContent.value,
-    excludingKeywordsOfContent:
-      dashboardStore.layerId === "BROWSER"
-        ? undefined
-        : excludingKeywordsOfContent.value,
-    tags: tagsMap.value.length ? tagsMap.value : undefined,
-    paging: { pageNum: 1, pageSize: 15 },
-    relatedTrace: traceId.value ? { traceId: traceId.value } : undefined,
-  });
+  if (dashboardStore.layerId === "BROWSER") {
+    logStore.setLogCondition({
+      serviceId: selectorStore.currentService
+        ? selectorStore.currentService.id
+        : state.service.id,
+      pagePathId: endpoint || state.endpoint.id || undefined,
+      serviceVersionId: instance || state.instance.id || undefined,
+      paging: { pageNum: 1, pageSize: 15 },
+      queryDuration: appStore.durationTime,
+      category: state.category.value,
+    });
+  } else {
+    logStore.setLogCondition({
+      serviceId: selectorStore.currentService
+        ? selectorStore.currentService.id
+        : state.service.id,
+      endpointId: endpoint || state.endpoint.id || undefined,
+      serviceInstanceId: instance || state.instance.id || undefined,
+      queryDuration: appStore.durationTime,
+      keywordsOfContent: keywordsOfContent.value,
+      excludingKeywordsOfContent: excludingKeywordsOfContent.value,
+      tags: tagsMap.value.length ? tagsMap.value : undefined,
+      paging: { pageNum: 1, pageSize: 15 },
+      relatedTrace: traceId.value ? { traceId: traceId.value } : undefined,
+    });
+  }
   queryLogs();
 }
 async function queryLogs() {

src/views/dashboard/related/log/data.ts

@@ -0,0 +1,26 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * 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.
+ */
+
+export const ErrorCategory = [
+  { label: "All", value: "ALL" },
+  { label: "AJAX", value: "AJAX" },
+  { label: "Resource", value: "RESOURCE" },
+  { label: "Vue", value: "VUE" },
+  { label: "Promise", value: "PROMISE" },
+  { label: "JS", value: "JS" },
+  { label: "Unknown", value: "UNKNOWN" },
+];