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

src/graphql/fragments/log.ts

@@ -54,7 +54,6 @@ export const QueryServiceLogs = {
             value
           }
         }
-        total
     }`,
 };
 

src/graphql/fragments/trace.ts

@@ -27,7 +27,6 @@ export const Traces = {
       isError
       traceIds
     }
-    total
   }`,
 };
 

src/store/modules/log.ts

@@ -31,7 +31,6 @@ interface LogState {
   selectorStore: any;
   supportQueryLogsByKeywords: boolean;
   logs: any[];
-  logsTotal: number;
   loadLogs: boolean;
 }
 
@@ -43,12 +42,11 @@ export const logStore = defineStore({
     endpoints: [{ value: "0", label: "All" }],
     conditions: {
       queryDuration: useAppStoreWithOut().durationTime,
-      paging: { pageNum: 1, pageSize: 15, needTotal: true },
+      paging: { pageNum: 1, pageSize: 15 },
     },
     supportQueryLogsByKeywords: true,
     selectorStore: useSelectorStore(),
     logs: [],
-    logsTotal: 0,
     loadLogs: false,
   }),
   actions: {
@@ -131,7 +129,6 @@ export const logStore = defineStore({
       }
 
       this.logs = res.data.data.queryLogs.logs;
-      this.logsTotal = res.data.data.queryLogs.total;
       return res.data;
     },
     async getBrowserLogs() {
@@ -145,7 +142,6 @@ export const logStore = defineStore({
         return res.data;
       }
       this.logs = res.data.data.queryBrowserErrorLogs.logs;
-      this.logsTotal = res.data.data.queryBrowserErrorLogs.total;
       return res.data;
     },
     async getLogTagKeys() {

src/store/modules/trace.ts

@@ -28,12 +28,10 @@ interface TraceState {
   instances: Instance[];
   endpoints: Endpoint[];
   traceList: Trace[];
-  traceTotal: number;
   traceSpans: Span[];
   currentTrace: Trace | any;
   conditions: any;
   traceSpanLogs: any[];
-  traceSpanLogsTotal: number;
   selectorStore: any;
 }
 
@@ -45,16 +43,14 @@ export const traceStore = defineStore({
     endpoints: [{ value: "0", label: "All" }],
     traceList: [],
     traceSpans: [],
-    traceTotal: 0,
     currentTrace: {},
     conditions: {
       queryDuration: useAppStoreWithOut().durationTime,
       traceState: "ALL",
       queryOrder: "BY_START_TIME",
-      paging: { pageNum: 1, pageSize: 15, needTotal: true },
+      paging: { pageNum: 1, pageSize: 20 },
     },
     traceSpanLogs: [],
-    traceSpanLogsTotal: 0,
     selectorStore: useSelectorStore(),
   }),
   actions: {
@@ -115,7 +111,6 @@ export const traceStore = defineStore({
         return res.data;
       }
       if (!res.data.data.data.traces.length) {
-        this.traceTotal = 0;
         this.traceList = [];
         this.setCurrentTrace({});
         this.setTraceSpans([]);
@@ -128,7 +123,6 @@ export const traceStore = defineStore({
         });
         return d;
       });
-      this.traceTotal = res.data.data.data.total;
       this.setCurrentTrace(res.data.data.data.traces[0] || {});
       return res.data;
     },
@@ -148,11 +142,9 @@ export const traceStore = defineStore({
         .params(params);
       if (res.data.errors) {
         this.traceSpanLogs = [];
-        this.traceSpanLogsTotal = 0;
         return res.data;
       }
       this.traceSpanLogs = res.data.data.queryLogs.logs || [];
-      this.traceSpanLogsTotal = res.data.data.queryLogs.total;
       return res.data;
     },
     async getTagKeys() {

src/types/ebpf.d.ts

@@ -52,7 +52,7 @@ export type Process = {
   instanceName: string;
   agentId: string;
   detectType: string;
-  attributes: { name: string; value: string };
+  attributes: { name: string; value: string }[];
   labels: string[];
 };
 export type StackElement = {

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

@@ -94,6 +94,8 @@ function setCurrentLog(log: any) {
   font-size: 12px;
   height: 100%;
   border-bottom: 1px solid #eee;
+  width: 100%;
+  overflow: auto;
 }
 
 .log-header {

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

@@ -16,7 +16,7 @@ limitations under the License. -->
   <div class="flex-h content">
     <TaskList />
     <div class="vis-graph ml-5">
-      <div class="item">
+      <div class="schedules">
         <EBPFSchedules />
       </div>
       <div class="item">
@@ -39,12 +39,18 @@ import EBPFStack from "./components/EBPFStack.vue";
 .vis-graph {
   height: 100%;
   width: calc(100% - 300px);
+  min-width: 700px;
+  overflow: auto;
 }
 
 .item {
   width: 100%;
   overflow: auto;
-  height: calc(50% - 10px);
+  height: calc(100% - 70px);
   padding-bottom: 10px;
 }
+
+.schedules {
+  height: 60px;
+}
 </style>

src/views/dashboard/related/ebpf/components/EBPFSchedules.vue

@@ -13,7 +13,7 @@ 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="filters">
+  <div class="filters flex-h">
     <Selector
       :value="selectedLabels"
       :options="labels"
@@ -23,6 +23,11 @@ limitations under the License. -->
       class="inputs mr-10"
       :multiple="true"
     />
+    <el-button type="primary" size="small">
+      <span>{{ duration[0] }}</span>
+      <span> ~ </span>
+      <span>{{ duration[1] }}</span>
+    </el-button>
     <el-popover placement="bottom" :width="680" trigger="click">
       <template #reference>
         <el-button type="primary" size="small">
@@ -34,7 +39,7 @@ limitations under the License. -->
         placeholder="Please input name"
         class="input-with-search"
         size="small"
-        @change="searchProcesses"
+        @change="searchProcesses(0)"
       >
         <template #append>
           <el-button size="small">
@@ -77,7 +82,6 @@ limitations under the License. -->
       {{ t("analyze") }}
     </el-button>
   </div>
-  <div ref="timeline" class="schedules"></div>
 </template>
 <script lang="ts" setup>
 import { ref, watch } from "vue";
@@ -87,25 +91,21 @@ import { Option } from "@/types/app";
 import { TableHeader } from "./data";
 import { useEbpfStore } from "@/store/modules/ebpf";
 import { EBPFProfilingSchedule, Process } from "@/types/ebpf";
-import { DataSet, Timeline } from "vis-timeline/standalone";
-import "vis-timeline/styles/vis-timeline-graph2d.css";
 import { ElMessage, ElTable } from "element-plus";
 
 const { t } = useI18n();
 const ebpfStore = useEbpfStore();
 const pageSize = 5;
-/*global Nullable */
 const multipleTableRef = ref<InstanceType<typeof ElTable>>();
 const selectedProcesses = ref<string[]>([]);
-const timeline = ref<Nullable<HTMLDivElement>>(null);
-const visGraph = ref<Nullable<any>>(null);
 const labels = ref<Option[]>([{ label: "All", value: "0" }]);
 const processes = ref<Process[]>([]);
 const currentProcesses = ref<Process[]>([]);
 const selectedLabels = ref<string[]>(["0"]);
 const searchText = ref<string>("");
+const duration = ref<string[]>([]);
 const dateFormat = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") =>
-  new Date(dayjs(date).format(pattern));
+  dayjs(date).format(pattern);
 
 function changeLabels(opt: any[]) {
   const arr = opt.map((d) => d.value);
@@ -160,56 +160,59 @@ async function analyzeEBPF() {
 }
 
 function visTimeline() {
-  if (visGraph.value) {
-    visGraph.value.destroy();
-  }
   labels.value = [{ label: "All", value: "0" }];
   selectedLabels.value = ["0"];
   processes.value = [];
-  const schedules = ebpfStore.eBPFSchedules.map(
-    (d: EBPFProfilingSchedule, index: number) => {
-      for (const l of d.process.labels) {
-        labels.value.push({ label: l, value: l });
-      }
-      processes.value.push(d.process);
-      return {
-        id: index + 1,
-        content: d.process.name,
-        start: dateFormat(d.startTime),
-        end: dateFormat(d.endTime),
-      };
+  const ranges = ebpfStore.eBPFSchedules.map((d: EBPFProfilingSchedule) => {
+    for (const l of d.process.labels) {
+      labels.value.push({ label: l, value: l });
     }
-  );
-  searchProcesses();
-  if (!timeline.value) {
-    return;
-  }
-  const h = timeline.value.getBoundingClientRect().height;
-  const items: any = new DataSet(schedules);
-  const options = {
-    height: h,
-    width: "100%",
-    locale: "en",
-  };
-  visGraph.value = new Timeline(timeline.value, items, options);
+    processes.value.push(d.process);
+    return [d.startTime / 10000, d.endTime / 10000];
+  });
+  const arr = ranges.flat(1);
+  const min = Math.min(...arr);
+  const max = Math.max(...arr);
+  duration.value = [dateFormat(min * 10000), dateFormat(max * 10000)];
+  searchProcesses(0);
 }
 
 function changePage(pageIndex: number) {
   searchProcesses(pageIndex);
 }
 
-function searchProcesses(pageIndex?: any) {
+function searchProcesses(pageIndex: number) {
   const arr = processes.value.filter(
-    (d: { name: string; instanceName: string }) =>
+    (d: {
+      name: string;
+      instanceName: string;
+      attributes: { name: string; value: string }[];
+    }) =>
       d.name.includes(searchText.value) ||
-      d.instanceName.includes(searchText.value)
+      d.instanceName.includes(searchText.value) ||
+      searchAttribute(d.attributes, searchText.value)
   );
-  currentProcesses.value = arr.splice(
-    (pageIndex - 1 || 0) * pageSize,
-    pageSize * (pageIndex || 1)
+  currentProcesses.value = arr.filter(
+    (d, index: number) =>
+      (pageIndex - 1 || 0) * pageSize <= index &&
+      pageSize * (pageIndex || 1) > index
   );
 }
 
+function searchAttribute(
+  attributes: { name: string; value: string }[],
+  text: string
+) {
+  const item = attributes.find(
+    (d: { name: string; value: string }) => d.name === "command_line"
+  );
+
+  if (!item) {
+    return false;
+  }
+  return item.value.includes(text);
+}
+
 watch(
   () => ebpfStore.eBPFSchedules,
   () => {

src/views/dashboard/related/ebpf/components/EBPFStack.vue

@@ -78,6 +78,7 @@ function drawGraph() {
     .sort(true)
     .title("")
     .selfValue(false)
+    .inverted(true)
     .setColorMapper((d, originalColor) =>
       d.highlight ? "#6aff8f" : originalColor
     );
@@ -86,8 +87,9 @@ function drawGraph() {
     .direction("w")
     .html(
       (d: { data: StackElement }) =>
-        `<div class="mb-5">Symbol: ${d.data.name}</div><div class="mb-5">Dump Count: ${d.data.dumpCount}</div>`
-    );
+        `<div class="mb-5 name">Symbol: ${d.data.name}</div><div class="mb-5">Dump Count: ${d.data.dumpCount}</div>`
+    )
+    .style("max-width", "500px");
   flameChart.value.tooltip(tip);
   d3.select("#graph-stack").datum(stackTree.value).call(flameChart.value);
 }
@@ -176,4 +178,8 @@ watch(
   color: red;
   margin-top: 20px;
 }
+
+.name {
+  word-wrap: break-word;
+}
 </style>

src/views/dashboard/related/ebpf/components/NewTask.vue

@@ -111,10 +111,6 @@ function changeType(opt: any[]) {
 }
 
 async function createTask() {
-  if (!labels.value.length) {
-    ElMessage.warning("no labels");
-    return;
-  }
   const date = monitorTime.value === "0" ? new Date() : time.value;
   const params = {
     serviceId: selectorStore.currentService.id,

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

@@ -229,7 +229,7 @@ function searchLogs() {
     keywordsOfContent: keywordsOfContent.value,
     excludingKeywordsOfContent: excludingKeywordsOfContent.value,
     tags: tagsMap.value.length ? tagsMap.value : undefined,
-    paging: { pageNum: 1, pageSize: 15, needTotal: true },
+    paging: { pageNum: 1, pageSize: 15 },
     relatedTrace: traceId.value ? { traceId: traceId.value } : undefined,
   });
   queryLogs();

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

@@ -26,8 +26,10 @@ limitations under the License. -->
       <el-pagination
         v-model:currentPage="logStore.conditions.paging.pageNum"
         v-model:page-size="pageSize"
-        layout="prev, pager, next, jumper"
-        :total="logStore.logsTotal"
+        :small="true"
+        layout="prev, pager, next"
+        :pager-count="5"
+        :total="total"
         @current-change="updatePage"
         :style="`float: right`"
       />
@@ -35,7 +37,7 @@ limitations under the License. -->
   </div>
 </template>
 <script lang="ts" setup>
-import { ref } from "vue";
+import { ref, computed } from "vue";
 import { useI18n } from "vue-i18n";
 import LogTable from "@/views/dashboard/related/components/LogTable/Index.vue";
 import { useLogStore } from "@/store/modules/log";
@@ -49,9 +51,14 @@ const type = ref<string>(
   dashboardStore.layerId === "BROWSER" ? "browser" : "service"
 );
 const pageSize = ref<number>(15);
+const total = computed(() =>
+  logStore.logs.length === pageSize.value
+    ? pageSize.value * logStore.conditions.paging.pageNum + 1
+    : pageSize.value * logStore.conditions.paging.pageNum
+);
 function updatePage(p: number) {
   logStore.setLogCondition({
-    paging: { pageNum: p, pageSize: pageSize.value, needTotal: true },
+    paging: { pageNum: p, pageSize: pageSize.value },
   });
   queryLogs();
 }

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

@@ -44,7 +44,9 @@ limitations under the License. -->
               v-model:currentPage="pageNum"
               v-model:page-size="pageSize"
               :small="true"
-              :total="traceStore.traceSpanLogsTotal"
+              layout="prev, pager, next"
+              :pager-count="5"
+              :total="total"
               @current-change="turnLogsPage"
             />
             <LogTable
@@ -146,7 +148,7 @@ limitations under the License. -->
 </template>
 <script lang="ts">
 import dayjs from "dayjs";
-import { ref, defineComponent } from "vue";
+import { ref, defineComponent, computed } from "vue";
 import { useI18n } from "vue-i18n";
 import { useTraceStore } from "@/store/modules/trace";
 import { Option } from "@/types/app";
@@ -171,6 +173,11 @@ export default defineComponent({
     const displayMode = ref<string>("List");
     const pageNum = ref<number>(1);
     const pageSize = 10;
+    const total = computed(() =>
+      traceStore.traceList.length === pageSize
+        ? pageSize * pageNum.value + 1
+        : pageSize * pageNum.value
+    );
     const dateFormat = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") =>
       dayjs(date).format(pattern);
     const showTraceLogs = ref<boolean>(false);
@@ -202,7 +209,7 @@ export default defineComponent({
           relatedTrace: {
             traceId: traceId.value || traceStore.currentTrace.traceIds[0].value,
           },
-          paging: { pageNum: pageNum.value, pageSize, needTotal: true },
+          paging: { pageNum: pageNum.value, pageSize },
         },
       });
       if (res.errors) {
@@ -227,6 +234,7 @@ export default defineComponent({
       pageSize,
       pageNum,
       loading,
+      total,
     };
   },
 });

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

@@ -72,9 +72,19 @@ limitations under the License. -->
     </div>
     <div class="mr-10">
       <span class="sm b grey mr-5">{{ t("duration") }}:</span>
-      <el-input size="small" class="inputs mr-5" v-model="minTraceDuration" />
+      <el-input
+        size="small"
+        class="inputs mr-5"
+        v-model="minTraceDuration"
+        type="number"
+      />
       <span class="grey mr-5">-</span>
-      <el-input size="small" class="inputs" v-model="maxTraceDuration" />
+      <el-input
+        size="small"
+        class="inputs"
+        v-model="maxTraceDuration"
+        type="number"
+      />
     </div>
   </div>
   <div class="flex-h">
@@ -100,8 +110,8 @@ const selectorStore = useSelectorStore();
 const dashboardStore = useDashboardStore();
 const traceStore = useTraceStore();
 const traceId = ref<string>("");
-const minTraceDuration = ref<string>("");
-const maxTraceDuration = ref<string>("");
+const minTraceDuration = ref<number>(NaN);
+const maxTraceDuration = ref<number>(NaN);
 const tagsList = ref<string[]>([]);
 const tagsMap = ref<Option[]>([]);
 const state = reactive<any>({
@@ -174,11 +184,11 @@ function searchTraces() {
     serviceInstanceId: instance || state.instance.id || undefined,
     traceState: state.status.value || "ALL",
     queryDuration: appStore.durationTime,
-    minTraceDuration: appStore.minTraceDuration || undefined,
-    maxTraceDuration: appStore.maxTraceDuration || undefined,
+    minTraceDuration: Number(minTraceDuration.value),
+    maxTraceDuration: Number(maxTraceDuration.value),
     queryOrder: "BY_DURATION",
     tags: tagsMap.value.length ? tagsMap.value : undefined,
-    paging: { pageNum: 1, pageSize: 15, needTotal: true },
+    paging: { pageNum: 1, pageSize: 20 },
   });
   queryTraces();
 }

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

@@ -17,9 +17,9 @@ limitations under the License. -->
         v-model:currentPage="traceStore.conditions.paging.pageNum"
         v-model:page-size="pageSize"
         :small="true"
-        layout="prev, pager, next, jumper"
-        :total="traceStore.traceTotal"
-        v-model:pager-count="pageCount"
+        layout="prev, pager, next"
+        :pager-count="5"
+        :total="total"
         @current-change="updatePage"
       />
       <div class="selectors">
@@ -71,7 +71,7 @@ limitations under the License. -->
 
 <script lang="ts" setup>
 import dayjs from "dayjs";
-import { ref } from "vue";
+import { ref, computed } from "vue";
 import { useI18n } from "vue-i18n";
 import { useTraceStore } from "@/store/modules/trace";
 import { ElMessage } from "element-plus";
@@ -83,8 +83,12 @@ const { t } = useI18n();
 const traceStore = useTraceStore();
 const loading = ref<boolean>(false);
 const selectedKey = ref<string>("");
-const pageSize = ref<number>(15);
-const pageCount = ref<number>(5);
+const pageSize = ref<number>(20);
+const total = computed(() =>
+  traceStore.traceList.length === pageSize.value
+    ? pageSize.value * traceStore.conditions.paging.pageNum + 1
+    : pageSize.value * traceStore.conditions.paging.pageNum
+);
 const dateFormat = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") =>
   dayjs(date).format(pattern);
 
@@ -96,7 +100,7 @@ function searchTrace() {
 
 function updatePage(p: number) {
   traceStore.setTraceCondition({
-    paging: { pageNum: p, pageSize: pageSize.value, needTotal: true },
+    paging: { pageNum: p, pageSize: pageSize.value },
   });
   searchTrace();
 }
@@ -104,7 +108,7 @@ function updatePage(p: number) {
 function changeSort(opt: Option[] | any) {
   traceStore.setTraceCondition({
     queryOrder: opt[0].value,
-    paging: { pageNum: 1, pageSize: pageSize.value, needTotal: true },
+    paging: { pageNum: 1, pageSize: pageSize.value },
   });
   searchTrace();
 }
@@ -167,7 +171,7 @@ async function queryTraces() {
 }
 
 .list {
-  width: 400px;
+  width: 300px;
 }
 
 .trace-tr {

src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue

@@ -91,7 +91,9 @@ limitations under the License. -->
       v-model:currentPage="pageNum"
       v-model:page-size="pageSize"
       :small="true"
-      :total="traceStore.traceSpanLogsTotal"
+      layout="prev, pager, next"
+      :pager-count="5"
+      :total="total"
       @current-change="turnPage"
     />
     <LogTable
@@ -106,7 +108,7 @@ limitations under the License. -->
   </el-dialog>
 </template>
 <script lang="ts" setup>
-import { ref } from "vue";
+import { ref, computed } from "vue";
 import { useI18n } from "vue-i18n";
 import type { PropType } from "vue";
 import dayjs from "dayjs";
@@ -124,6 +126,11 @@ const traceStore = useTraceStore();
 const pageNum = ref<number>(1);
 const showRelatedLogs = ref<boolean>(false);
 const pageSize = 10;
+const total = computed(() =>
+  traceStore.traceList.length === pageSize
+    ? pageSize * pageNum.value + 1
+    : pageSize * pageNum.value
+);
 const dateFormat = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") =>
   dayjs(date).format(pattern);
 async function getTaceLogs() {
@@ -135,7 +142,7 @@ async function getTaceLogs() {
         segmentId: props.currentSpan.segmentId,
         spanId: props.currentSpan.spanId,
       },
-      paging: { pageNum: pageNum.value, pageSize, needTotal: true },
+      paging: { pageNum: pageNum.value, pageSize },
     },
   });
   if (res.errors) {