update graphql and add namespace

src/graphql/fragments/demand-log.ts

@@ -14,19 +14,20 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+export const queryNamespaces = {
+  query: `namespaces: listNamespaces`,
+};
 
 export const queryContainers = {
   variable: "$condition: ContainerQueryCondition",
   query: `
-  containers: queryContainers(condition: $condition) {
-    containers
-  }`,
+  containers: queryContainers(condition: $condition)`,
 };
 
 export const queryStreamingLogs = {
-  variable: "$condition: StreamingLogQueryCondition!",
+  variable: "$condition: OndemandLogQueryCondition!",
   query: `
-  logs: queryStreamingLogs(condition: $condition) {
+  logs: ondemandPodLogs(condition: $condition) {
     logs {
       timestamp
       contentType

src/graphql/query/demand-log.ts

@@ -15,8 +15,14 @@
  * limitations under the License.
  */
 
-import { queryContainers, queryStreamingLogs } from "../fragments/demand-log";
+import {
+  queryContainers,
+  queryStreamingLogs,
+  queryNamespaces,
+} from "../fragments/demand-log";
 
 export const fetchContainers = `query queryContainers(${queryContainers.variable}) {${queryContainers.query}}`;
 
-export const fetchStreamingLogs = `query queryStreamingLogs(${queryStreamingLogs.variable}) {${queryStreamingLogs.query}}`;
+export const fetchDemandPodLogs = `query queryStreamingLogs(${queryStreamingLogs.variable}) {${queryStreamingLogs.query}}`;
+
+export const fetchNamespaces = `query queryContainers {${queryNamespaces.query}}`;

src/locales/lang/en.ts

@@ -140,6 +140,7 @@ const msg = {
   limit: "Limit",
   page: "Page",
   interval: "Refresh Interval",
+  namespace: "Namespace",
   hourTip: "Select Hour",
   minuteTip: "Select Minute",
   secondTip: "Select Second",

src/locales/lang/es.ts

@@ -140,6 +140,7 @@ const msg = {
   processSelect: "Click para seleccionar proceso",
   page: "Página",
   interval: "Intervalo de actualización",
+  namespace: "Espacio de nombres",
   hourTip: "Seleccione Hora",
   minuteTip: "Seleccione Minuto",
   secondTip: "Seleccione Segundo",

src/locales/lang/zh.ts

@@ -138,6 +138,7 @@ const msg = {
   limit: "范围",
   page: "页面",
   interval: "刷新间隔时间",
+  namespace: "命名空间",
   hourTip: "选择小时",
   minuteTip: "选择分钟",
   secondTip: "选择秒数",

src/store/modules/demand-log.ts

@@ -15,6 +15,7 @@
  * limitations under the License.
  */
 import { defineStore } from "pinia";
+import { Option } from "@/types/app";
 import { Instance } from "@/types/selector";
 import { store } from "@/store";
 import graphql from "@/graphql";
@@ -30,6 +31,7 @@ interface DemandLogState {
   selectorStore: any;
   logs: DemandLog[];
   loadLogs: boolean;
+  namespaces: Option[];
 }
 
 export const demandLogStore = defineStore({
@@ -38,6 +40,7 @@ export const demandLogStore = defineStore({
     containers: [{ label: "Detail", value: "Detail" }],
     instances: [{ value: "", label: "" }],
     conditions: {
+      namespace: "",
       container: "",
       serviceId: "",
       serviceInstanceId: "",
@@ -47,6 +50,7 @@ export const demandLogStore = defineStore({
     selectorStore: useSelectorStore(),
     logs: [],
     loadLogs: false,
+    namespaces: [],
   }),
   actions: {
     setLogCondition(data: Conditions) {
@@ -67,21 +71,35 @@ export const demandLogStore = defineStore({
       this.instances = res.data.data.pods || [];
       return res.data;
     },
-    async getContainers(instanceId?: string) {
-      const serviceId =
-        this.selectorStore.currentService &&
-        this.selectorStore.currentService.id;
-      const serviceInstanceId =
-        instanceId ||
-        (this.selectorStore.currentInstance &&
-          this.selectorStore.currentInstance.id);
+    async getNamespaces() {
+      const res: AxiosResponse = await graphql
+        .query("fetchNamespaces")
+        .params({});
+
+      if (res.data.errors) {
+        return res.data;
+      }
+      this.namespaces = (res.data.data.namespaces || []).map((d: string) => {
+        return {
+          label: d,
+          value: d,
+        };
+      });
+      return res.data;
+    },
+    async getContainers(namespace: string, serviceInstanceId: string) {
+      if (!this.selectorStore.currentService) {
+        return new Promise((resolve) => resolve({ errors: "No service" }));
+      }
+      const serviceId = this.selectorStore.currentService.id;
       const condition = {
         serviceId,
         serviceInstanceId,
+        namespace,
       };
-      const res: AxiosResponse = await graphql.query("fetchContainers").params({
-        condition,
-      });
+      const res: AxiosResponse = await graphql
+        .query("fetchContainers")
+        .params({ condition });
 
       if (res.data.errors) {
         return res.data;
@@ -95,7 +113,7 @@ export const demandLogStore = defineStore({
     async getDemandLogs() {
       this.loadLogs = true;
       const res: AxiosResponse = await graphql
-        .query("fetchStreamingLogs")
+        .query("fetchDemandPodLogs")
         .params({ condition: this.conditions });
       this.loadLogs = false;
       if (res.data.errors) {

src/types/demand-log.ts

@@ -17,6 +17,7 @@
 import { DurationTime, Paging } from "./app";
 
 export interface Conditions {
+  namespace: string;
   container: string;
   serviceId: string;
   serviceInstanceId: string;

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

@@ -25,6 +25,17 @@ limitations under the License. -->
         class="selectors"
       />
     </div>
+    <div class="mr-5 mb-5">
+      <span class="grey mr-5">{{ t("namespace") }}:</span>
+      <Selector
+        size="small"
+        :value="state.namespace.value"
+        :options="demandLogStore.namespaces"
+        placeholder="Select a namespace"
+        @change="changeField('namespace', $event)"
+        class="selectors"
+      />
+    </div>
     <div class="mr-5 mb-5">
       <span class="grey mr-5">{{ t("container") }}:</span>
       <Selector
@@ -131,7 +142,7 @@ limitations under the License. -->
   </div>
 </template>
 <script lang="ts" setup>
-import { ref, reactive, watch } from "vue";
+import { ref, reactive, watch, computed } from "vue";
 import { useI18n } from "vue-i18n";
 import { useDemandLogStore } from "@/store/modules/demand-log";
 import { useDashboardStore } from "@/store/modules/dashboard";
@@ -140,6 +151,8 @@ import { useSelectorStore } from "@/store/modules/selectors";
 import { ElMessage } from "element-plus";
 import { EntityType } from "../../data";
 import { TimeRanges } from "./data";
+import getLocalTime from "@/utils/localtime";
+import dateFormatStep from "@/utils/dateFormat";
 
 const { t } = useI18n();
 const appStore = useAppStoreWithOut();
@@ -155,8 +168,24 @@ const intervalTime = ref<number>(1);
 const state = reactive<any>({
   instance: { value: "", label: "" },
   container: { value: "", label: "None" },
+  namespace: { value: "", label: "None" },
   duration: { label: "Last 30 min", value: 1800 },
 });
+const rangeTime = computed(() => {
+  const times = {
+    start: getLocalTime(
+      appStore.utc,
+      new Date(new Date().getTime() - state.duration.value * 1000)
+    ),
+    end: getLocalTime(appStore.utc, new Date()),
+    step: "SECOND",
+  };
+  return {
+    start: dateFormatStep(times.start, times.step, false),
+    end: dateFormatStep(times.end, times.step, false),
+    step: times.step,
+  };
+});
 
 init();
 async function init() {
@@ -164,13 +193,30 @@ async function init() {
   await searchLogs();
 }
 async function fetchSelectors() {
-  if (dashboardStore.entity !== EntityType[3].value) {
+  if (dashboardStore.entity === EntityType[3].value) {
+    state.instance = this.selectorStore.currentInstance || {};
+  } else {
     await getInstances();
-    const resp = await demandLogStore.getContainers(state.instance.id);
+  }
+  await getNamespaces();
+  getContainers();
+}
+async function getNamespaces() {
+  const resp = await demandLogStore.getNamespaces();
   if (resp.errors) {
     ElMessage.error(resp.errors);
     return;
   }
+  state.namespace = demandLogStore.namespaces[0];
+}
+async function getContainers() {
+  const resp = await demandLogStore.getContainers(
+    state.namespace,
+    state.instance.id || ""
+  );
+  if (resp.errors) {
+    ElMessage.error(resp.errors);
+    return;
   }
   state.container = demandLogStore.containers[0];
 }
@@ -191,10 +237,11 @@ function searchLogs() {
     serviceId:
       (selectorStore.currentService && selectorStore.currentService.id) || "",
     serviceInstanceId: instance || state.instance.id || "",
-    queryDuration: appStore.durationTime,
+    namespace: state.namespace.value,
+    container: state.container.value,
+    queryDuration: rangeTime.value,
     keywordsOfContent: keywordsOfContent.value,
     excludingKeywordsOfContent: excludingKeywordsOfContent.value,
-    paging: { pageNum: 1, pageSize: -1 },
   });
   queryLogs();
 }