add graphql

src/graphql/fragments/demand-log.ts

@@ -0,0 +1,37 @@
+/**
+ * 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 queryContainers = {
+  variable: "$condition: ContainerQueryCondition",
+  query: `
+  containers: queryContainers(condition: $condition) {
+    containers
+  }`,
+};
+
+export const queryStreamingLogs = {
+  variable: "$condition: StreamingLogQueryCondition!",
+  query: `
+  logs: queryStreamingLogs(condition: $condition) {
+    logs {
+      timestamp
+      contentType
+      content
+    }
+    total
+  }`,
+};

src/graphql/index.ts

@@ -26,6 +26,7 @@ import * as profile from "./query/profile";
 import * as alarm from "./query/alarm";
 import * as event from "./query/event";
 import * as ebpf from "./query/ebpf";
+import * as demandLog from "./query/demand-log";
 
 const query: { [key: string]: string } = {
   ...app,
@@ -38,6 +39,7 @@ const query: { [key: string]: string } = {
   ...alarm,
   ...event,
   ...ebpf,
+  ...demandLog,
 };
 class Graphql {
   private queryData = "";

src/graphql/query/demand-log.ts

@@ -0,0 +1,22 @@
+/**
+ * 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.
+ */
+
+import { queryContainers, queryStreamingLogs } from "../fragments/demand-log";
+
+export const fetchContainers = `query queryContainers(${queryContainers.variable}) {${queryContainers.query}}`;
+
+export const fetchStreamingLogs = `query queryStreamingLogs(${queryStreamingLogs.variable}) {${queryStreamingLogs.query}}`;

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

@@ -47,25 +47,24 @@ limitations under the License. -->
     </div>
     <div class="mr-5">
       <span class="grey mr-5">{{ t("duration") }}:</span>
-      <el-input-number
-        v-model="limit"
-        :min="1"
-        :max="100"
-        size="small"
-        controls-position="right"
-        @change="changeField('limit', $event)"
-      />
+      <!-- <TimePicker
+        :value="duration"
+        position="bottom"
+        format="YYYY-MM-DD HH:mm:ss"
+        @input="changeDuration"
+      /> -->
     </div>
     <div class="mr-5">
       <span class="grey mr-5">{{ t("interval") }}:</span>
       <el-input-number
-        v-model="limit"
+        v-model="intervalTime"
         :min="1"
-        :max="100"
+        :max="120"
         size="small"
         controls-position="right"
-        @change="changeField('limit', $event)"
+        @change="changeField('interval', $event)"
       />
+      Seconds
     </div>
     <el-button
       class="search-btn"
@@ -146,6 +145,7 @@ const excludingKeywordsOfContent = ref<string[]>([]);
 const contentStr = ref<string>("");
 const excludingContentStr = ref<string>("");
 const limit = ref<number>(1);
+const intervalTime = ref<number>(1);
 const state = reactive<any>({
   instance: { value: "", label: "" },
   container: { value: "", label: "" },

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

@@ -260,7 +260,7 @@ watch(
 }
 
 .inputs {
-  width: 350px;
+  width: 400px;
 }
 
 .input-with-search {

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

@@ -67,6 +67,7 @@ function drawGraph() {
   );
   root.value = param[0];
   root.dumpCount = param[1];
+  console.log(root);
   stackTree.value = root;
   const w = (graph.value && graph.value.getBoundingClientRect().width) || 10;
   flameChart.value = flamegraph()
@@ -116,7 +117,7 @@ function processTree(arr: StackElement[]) {
     delete item.id;
     obj[item.originId] = item;
   }
-  const scale = d3.scaleLinear().domain([min.value, max.value]).range([1, 200]);
+  const scale = d3.scaleLinear().domain([min.value, max.value]).range([1, 100]);
   for (const item of copyArr) {
     if (item.parentId === "1") {
       const val = Number(scale(item.dumpCount).toFixed(4));
@@ -127,7 +128,7 @@ function processTree(arr: StackElement[]) {
       if (item.originId === obj[key].parentId) {
         const val = Number(scale(obj[key].dumpCount).toFixed(4));
 
-        obj[key].value = val;
+        obj[key].value = val < 10 ? 10 : val;
         if (item.children) {
           item.children.push(obj[key]);
         } else {