Merge branch 'main' of github.com:apache/skywalking-booster-ui into feat/event

src/store/modules/log.ts

@@ -53,6 +53,12 @@ export const logStore = defineStore({
     setLogCondition(data: any) {
       this.conditions = { ...this.conditions, ...data };
     },
+    resetCondition() {
+      this.conditions = {
+        queryDuration: useAppStoreWithOut().durationTime,
+        paging: { pageNum: 1, pageSize: 15 },
+      };
+    },
     async getServices(layer: string) {
       const res: AxiosResponse = await graphql.query("queryServices").params({
         layer,

src/views/dashboard/controls/Ebpf.vue

@@ -29,7 +29,7 @@ limitations under the License. -->
         <span>{{ t("delete") }}</span>
       </div>
     </el-popover>
-    <Header />
+    <Header :needQuery="needQuery" />
     <Content />
   </div>
 </template>
@@ -47,6 +47,7 @@ const props = defineProps({
     default: () => ({ graph: {} }),
   },
   activeIndex: { type: String, default: "" },
+  needQuery: { type: Boolean, default: true },
 });
 const { t } = useI18n();
 const dashboardStore = useDashboardStore();

src/views/dashboard/controls/Log.vue

@@ -30,7 +30,7 @@ limitations under the License. -->
       </div>
     </el-popover>
     <div class="header">
-      <Header />
+      <Header :needQuery="needQuery" />
     </div>
     <div class="log">
       <List />
@@ -50,6 +50,7 @@ const props = defineProps({
     default: () => ({}),
   },
   activeIndex: { type: String, default: "" },
+  needQuery: { type: Boolean, default: true },
 });
 const { t } = useI18n();
 const dashboardStore = useDashboardStore();

src/views/dashboard/controls/Profile.vue

@@ -29,7 +29,7 @@ limitations under the License. -->
         <span>{{ t("delete") }}</span>
       </div>
     </el-popover>
-    <Header />
+    <Header :needQuery="needQuery" />
     <Content />
   </div>
 </template>
@@ -47,6 +47,7 @@ const props = defineProps({
     default: () => ({ graph: {} }),
   },
   activeIndex: { type: String, default: "" },
+  needQuery: { type: Boolean, default: true },
 });
 const { t } = useI18n();
 const dashboardStore = useDashboardStore();

src/views/dashboard/controls/Trace.vue

@@ -30,7 +30,7 @@ limitations under the License. -->
       </div>
     </el-popover>
     <div class="header">
-      <Filter />
+      <Filter :needQuery="needQuery" />
     </div>
     <div class="trace flex-h">
       <TraceList />
@@ -53,6 +53,7 @@ const props = defineProps({
     default: () => ({ graph: {} }),
   },
   activeIndex: { type: String, default: "" },
+  needQuery: { type: Boolean, default: true },
 });
 const { t } = useI18n();
 const dashboardStore = useDashboardStore();

src/views/dashboard/graphs/EndpointList.vue

@@ -46,6 +46,7 @@ limitations under the License. -->
           :intervalTime="intervalTime"
           :colMetrics="colMetrics"
           :config="config"
+          v-if="colMetrics.length"
         />
       </el-table>
     </div>
@@ -96,7 +97,9 @@ const dashboardStore = useDashboardStore();
 const chartLoading = ref<boolean>(false);
 const endpoints = ref<Endpoint[]>([]);
 const searchText = ref<string>("");
-const colMetrics = computed(() => props.config.metrics.map((d: string) => d));
+const colMetrics = computed(() =>
+  (props.config.metrics || []).filter((d: string) => d)
+);
 
 if (props.needQuery) {
   queryEndpoints();
@@ -119,7 +122,7 @@ async function queryEndpointMetrics(currentPods: Endpoint[]) {
   if (!currentPods.length) {
     return;
   }
-  const metrics = (props.config.metrics || []).filter((d: string) => d);
+  const metrics = props.config.metrics || [];
   const metricTypes = props.config.metricTypes || [];
   if (metrics.length && metrics[0] && metricTypes.length && metricTypes[0]) {
     const params = await useQueryPodsMetrics(

src/views/dashboard/graphs/InstanceList.vue

@@ -43,6 +43,7 @@ limitations under the License. -->
           </template>
         </el-table-column>
         <ColumnGraph
+          v-if="colMetrics.length"
           :intervalTime="intervalTime"
           :colMetrics="colMetrics"
           :config="config"
@@ -126,7 +127,9 @@ const chartLoading = ref<boolean>(false);
 const instances = ref<Instance[]>([]); // current instances
 const pageSize = 10;
 const searchText = ref<string>("");
-const colMetrics = computed(() => props.config.metrics.map((d: string) => d));
+const colMetrics = computed(() =>
+  (props.config.metrics || []).filter((d: string) => d)
+);
 if (props.needQuery) {
   queryInstance();
 }
@@ -151,7 +154,8 @@ async function queryInstanceMetrics(currentInstances: Instance[]) {
   if (!currentInstances.length) {
     return;
   }
-  const { metrics, metricTypes } = props.config;
+  const metrics = props.config.metrics || [];
+  const metricTypes = props.config.metricTypes || [];
 
   if (metrics.length && metrics[0] && metricTypes.length && metricTypes[0]) {
     const params = await useQueryPodsMetrics(

src/views/dashboard/graphs/ServiceList.vue

@@ -58,6 +58,7 @@ limitations under the License. -->
           :intervalTime="intervalTime"
           :colMetrics="colMetrics"
           :config="config"
+          v-if="colMetrics.length"
         />
       </el-table>
     </div>
@@ -117,7 +118,7 @@ const searchText = ref<string>("");
 const groups = ref<any>({});
 const sortServices = ref<(Service & { merge: boolean })[]>([]);
 const colMetrics = computed(() =>
-  props.config.metrics.filter((d: string) => d)
+  (props.config.metrics || []).filter((d: string) => d)
 );
 queryServices();
 
@@ -195,7 +196,8 @@ async function queryServiceMetrics(currentServices: Service[]) {
   if (!currentServices.length) {
     return;
   }
-  const { metrics, metricTypes } = props.config;
+  const metrics = props.config.metrics || [];
+  const metricTypes = props.config.metricTypes || [];
 
   if (metrics.length && metrics[0] && metricTypes.length && metricTypes[0]) {
     const params = await useQueryPodsMetrics(

src/views/dashboard/related/components/LogTable/Index.vue

@@ -15,20 +15,19 @@ limitations under the License. -->
 
 <template>
   <div class="log">
-    <div class="log-header">
+    <div
-      <template v-for="(item, index) in columns">
+      class="log-header"
+      :class="
+        type === 'browser' ? ['browser-header', 'flex-h'] : 'service-header'
+      "
+    >
+      <template v-for="(item, index) in columns" :key="`col${index}`">
         <div
-          class="method"
+          :class="[
-          :style="`width: ${item.method}px`"
+            item.label,
-          v-if="item.drag"
+            ['message', 'stack'].includes(item.label) ? 'max-item' : '',
-          :key="index"
+          ]"
         >
-          <span class="r cp" ref="dragger" :data-index="index">
-            <Icon iconName="settings_ethernet" size="sm" />
-          </span>
-          {{ t(item.value) }}
-        </div>
-        <div v-else :class="item.label" :key="`col${index}`">
           {{ t(item.value) }}
         </div>
       </template>
@@ -58,7 +57,7 @@ limitations under the License. -->
       @closed="showDetail = false"
       :title="t('logDetail')"
     >
-      <LogDetail :currentLog="currentLog" />
+      <LogDetail :currentLog="currentLog" :columns="columns" />
     </el-dialog>
   </div>
 </template>
@@ -70,7 +69,7 @@ import LogBrowser from "./LogBrowser.vue";
 import LogService from "./LogService.vue";
 import LogDetail from "./LogDetail.vue";
 
-/*global defineProps, Nullable */
+/*global defineProps */
 const props = defineProps({
   type: { type: String, default: "service" },
   tableData: { type: Array, default: () => [] },
@@ -79,8 +78,6 @@ const props = defineProps({
 const { t } = useI18n();
 const currentLog = ref<any>({});
 const showDetail = ref<boolean>(false);
-const dragger = ref<Nullable<HTMLSpanElement>>(null);
-// const method = ref<number>(380);
 const columns: any[] =
   props.type === "browser" ? BrowserLogConstants : ServiceLogConstants;
 
@@ -99,13 +96,12 @@ function setCurrentLog(log: any) {
 }
 
 .log-header {
-  /*display: flex;*/
   white-space: nowrap;
   user-select: none;
   border-left: 0;
   border-right: 0;
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-  /*background-color: #f3f4f9;*/
+
   .traceId {
     width: 390px;
   }
@@ -123,11 +119,8 @@ function setCurrentLog(log: any) {
 }
 
 .log-header div {
-  /*min-width: 140px;*/
-  width: 140px;
-  /*flex-grow: 1;*/
   display: inline-block;
-  padding: 0 4px;
+  padding: 0 5px;
   border: 1px solid transparent;
   border-right: 1px dotted silver;
   line-height: 30px;
@@ -136,4 +129,19 @@ function setCurrentLog(log: any) {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
+.browser-header {
+  div {
+    min-width: 140px;
+    width: 10%;
+  }
+
+  .max-item {
+    width: 20%;
+  }
+}
+
+.service-header div {
+  width: 140px;
+}
 </style>

src/views/dashboard/related/components/LogTable/LogBrowser.vue

@@ -14,18 +14,18 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 
 <template>
-  <div @click="showSelectSpan" :class="['log-item', 'clearfix']" ref="logItem">
+  <div
+    @click="showSelectSpan"
+    :class="['log-item', 'clearfix', 'flex-h']"
+    ref="logItem"
+  >
     <div
       v-for="(item, index) in columns"
       :key="index"
       :class="[
-        'method',
+        'log',
-        ['message', 'stack'].includes(item.label) ? 'autoHeight' : '',
+        ['message', 'stack'].includes(item.label) ? 'max-item' : '',
       ]"
-      :style="{
-        lineHeight: 1.3,
-        width: `${item.drag ? item.method : ''}px`,
-      }"
     >
       <span v-if="item.label === 'time'">{{ dateFormat(data.time) }}</span>
       <span v-else-if="item.label === 'errorUrl'">{{ data.pagePath }}</span>
@@ -44,7 +44,7 @@ import { BrowserLogConstants } from "./data";
 
 /*global defineProps, defineEmits, NodeListOf  */
 const props = defineProps({
-  data: { type: Array as any, default: () => [] },
+  data: { type: Object as any, default: () => ({}) },
 });
 const columns = BrowserLogConstants;
 const emit = defineEmits(["select"]);
@@ -84,7 +84,8 @@ function showSelectSpan() {
 }
 
 .log-item > div {
-  width: 140px;
+  width: 10%;
+  min-width: 140px;
   padding: 0 5px;
   display: inline-block;
   border: 1px solid transparent;
@@ -95,6 +96,10 @@ function showSelectSpan() {
   white-space: nowrap;
 }
 
+.max-item.log {
+  width: 20%;
+}
+
 .log-item .text {
   width: 100% !important;
   display: inline-block;
@@ -103,8 +108,7 @@ function showSelectSpan() {
   white-space: nowrap;
 }
 
-.log-item > div.method {
+.log-item > div.log {
-  padding: 7px 5px;
   line-height: 30px;
 }
 </style>

src/views/dashboard/related/components/LogTable/LogDetail.vue

@@ -20,7 +20,10 @@ limitations under the License. -->
       :key="index"
     >
       <span class="g-sm-4 grey">{{ t(item.value) }}:</span>
-      <span v-if="item.label === 'timestamp'" class="g-sm-8 mb-10">
+      <span
+        v-if="['timestamp', 'time'].includes(item.label)"
+        class="g-sm-8 mb-10"
+      >
         {{ dateFormat(currentLog[item.label]) }}
       </span>
       <textarea
@@ -41,14 +44,14 @@ import { computed } from "vue";
 import type { PropType } from "vue";
 import { useI18n } from "vue-i18n";
 import dayjs from "dayjs";
-import { ServiceLogDetail } from "./data";
+import { Option } from "@/types/app";
 
 /*global defineProps */
 const props = defineProps({
   currentLog: { type: Object as PropType<any>, default: () => ({}) },
+  columns: { type: Array as PropType<Option[]>, default: () => [] },
 });
 const { t } = useI18n();
-const columns = ServiceLogDetail;
 const logTags = computed(() => {
   if (!props.currentLog.tags) {
     return [];

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

@@ -39,6 +39,10 @@ import { useDashboardStore } from "@/store/modules/dashboard";
 import { useAppStoreWithOut } from "@/store/modules/app";
 import { EntityType } from "../../data";
 
+/*global defineProps */
+const props = defineProps({
+  needQuery: { type: Boolean, default: true },
+});
 const ebpfStore = useEbpfStore();
 const appStore = useAppStoreWithOut();
 const selectorStore = useSelectorStore();
@@ -46,7 +50,9 @@ const dashboardStore = useDashboardStore();
 const { t } = useI18n();
 const newTask = ref<boolean>(false);
 
-searchTasks();
+if (props.needQuery) {
+  searchTasks();
+}
 
 async function searchTasks() {
   const serviceId =

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

@@ -130,7 +130,7 @@ limitations under the License. -->
   </div>
 </template>
 <script lang="ts" setup>
-import { ref, reactive, watch } from "vue";
+import { ref, reactive, watch, onUnmounted } from "vue";
 import { useI18n } from "vue-i18n";
 import { Option } from "@/types/app";
 import { useLogStore } from "@/store/modules/log";
@@ -142,6 +142,10 @@ import { ElMessage } from "element-plus";
 import { EntityType } from "../../data";
 import { ErrorCategory } from "./data";
 
+/*global defineProps */
+const props = defineProps({
+  needQuery: { type: Boolean, default: true },
+});
 const { t } = useI18n();
 const appStore = useAppStoreWithOut();
 const selectorStore = useSelectorStore();
@@ -161,8 +165,9 @@ const state = reactive<any>({
   service: { value: "", label: "" },
   category: { value: "ALL", label: "All" },
 });
-
+if (props.needQuery) {
-init();
+  init();
+}
 async function init() {
   const resp = await logStore.getLogsByKeywords();
 
@@ -318,6 +323,9 @@ function removeExcludeContent(index: number) {
   });
   excludingContentStr.value = "";
 }
+onUnmounted(() => {
+  logStore.resetCondition();
+});
 watch(
   () => selectorStore.currentService,
   () => {

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

@@ -59,6 +59,10 @@ import { useDashboardStore } from "@/store/modules/dashboard";
 import { useAppStoreWithOut } from "@/store/modules/app";
 import { EntityType } from "../../data";
 
+/*global defineProps */
+const props = defineProps({
+  needQuery: { type: Boolean, default: true },
+});
 const profileStore = useProfileStore();
 const appStore = useAppStoreWithOut();
 const selectorStore = useSelectorStore();
@@ -67,8 +71,10 @@ const { t } = useI18n();
 const endpointName = ref<string>("");
 const newTask = ref<boolean>(false);
 
-searchTasks();
+if (props.needQuery) {
-searchEndpoints("");
+  searchTasks();
+  searchEndpoints("");
+}
 
 async function searchEndpoints(keyword: string) {
   if (!selectorStore.currentService) {
@@ -109,6 +115,7 @@ watch(
   () => selectorStore.currentService,
   () => {
     searchTasks();
+    console.log("service");
   }
 );
 watch(

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

@@ -104,6 +104,10 @@ import ConditionTags from "@/views/components/ConditionTags.vue";
 import { ElMessage } from "element-plus";
 import { EntityType } from "../../data";
 
+/*global defineProps */
+const props = defineProps({
+  needQuery: { type: Boolean, default: true },
+});
 const { t } = useI18n();
 const appStore = useAppStoreWithOut();
 const selectorStore = useSelectorStore();
@@ -121,7 +125,10 @@ const state = reactive<any>({
   service: { value: "", label: "" },
 });
 
-init();
+if (props.needQuery) {
+  init();
+}
+
 async function init() {
   if (dashboardStore.entity === EntityType[1].value) {
     await getServices();