feat: visualize a on-demand log widget (#99)

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

@@ -0,0 +1,78 @@
+<!-- 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. -->
+<template>
+  <div
+    v-loading="demandLogStore.loadLogs"
+    class="log-content"
+    ref="logContent"
+    style="width: calc(100% - 10px); height: calc(100% - 140px)"
+  >
+    <span v-if="demandLogStore.message">{{ demandLogStore.message }}</span>
+  </div>
+</template>
+<script lang="ts" setup>
+import { onMounted, ref, onUnmounted, watch, toRaw } from "vue";
+import { useDemandLogStore } from "@/store/modules/demand-log";
+
+/*global Nullable */
+const demandLogStore = useDemandLogStore();
+const monacoInstance = ref();
+const logContent = ref<Nullable<HTMLDivElement>>(null);
+
+onMounted(async () => {
+  const monaco = await import("monaco-editor");
+  monacoInstanceGen(monaco);
+  window.addEventListener("resize", () => {
+    editorLayout();
+  });
+});
+function monacoInstanceGen(monaco: any) {
+  monacoInstance.value = monaco.editor.create(logContent.value, {
+    value: "",
+    language: "text",
+    wordWrap: true,
+    minimap: { enabled: false },
+  });
+}
+function editorLayout() {
+  if (!logContent.value) {
+    return;
+  }
+  const { width, height } = logContent.value.getBoundingClientRect();
+  toRaw(monacoInstance.value).layout({
+    height: height,
+    width: width,
+  });
+}
+onUnmounted(() => {
+  if (!toRaw(monacoInstance.value)) {
+    return;
+  }
+  toRaw(monacoInstance.value).dispose();
+  monacoInstance.value = null;
+});
+watch(
+  () => demandLogStore.logs,
+  () => {
+    toRaw(monacoInstance.value).setValue(demandLogStore.logs);
+  }
+);
+</script>
+<style lang="scss" scoped>
+.log-content {
+  min-width: 600px;
+  min-height: 400px;
+}
+</style>

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

@@ -0,0 +1,412 @@
+<!-- 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. -->
+<template>
+  <div class="flex-h row">
+    <div class="mr-5 mb-5" v-if="dashboardStore.entity !== EntityType[3].value">
+      <span class="grey mr-5"> {{ t("instance") }}: </span>
+      <Selector
+        size="small"
+        :value="state.instance.value"
+        :options="demandLogStore.instances"
+        placeholder="Select a instance"
+        @change="changeField('instance', $event)"
+        class="selectors"
+      />
+    </div>
+    <div class="mr-5 mb-5" v-if="state.container">
+      <span class="grey mr-5">{{ t("container") }}:</span>
+      <Selector
+        size="small"
+        :value="state.container.value"
+        :options="demandLogStore.containers"
+        placeholder="Select a container"
+        @change="changeField('container', $event)"
+        class="selectors"
+      />
+    </div>
+    <!-- <div class="mr-5">
+      <span class="grey mr-5">{{ t("limit") }}:</span>
+      <el-input-number
+        v-model="limit"
+        :min="1"
+        :max="1000"
+        size="small"
+        controls-position="right"
+        @change="changeField('limit', $event)"
+      />
+    </div> -->
+    <div class="mr-5">
+      <span class="grey mr-5">{{ t("duration") }}:</span>
+      <Selector
+        size="small"
+        :value="state.duration.value"
+        :options="TimeRanges"
+        placeholder="Select a time range"
+        @change="changeField('duration', $event)"
+        class="duration-range"
+      />
+    </div>
+    <div class="mr-5">
+      <span class="grey mr-5">{{ t("interval") }}:</span>
+      <Selector
+        size="small"
+        :value="state.interval.value"
+        :options="IntervalOpts"
+        @change="changeField('interval', $event)"
+      />
+    </div>
+  </div>
+  <div class="flex-h row">
+    <div class="mr-5">
+      <span class="mr-5 grey">{{ t("keywordsOfContent") }}:</span>
+      <span class="log-tags">
+        <span
+          class="selected"
+          v-for="(item, index) in keywordsOfContent"
+          :key="`keywordsOfContent${index}`"
+        >
+          <span>{{ item }}</span>
+          <span class="remove-icon" @click="removeContent(index)">×</span>
+        </span>
+      </span>
+      <el-input
+        size="small"
+        class="inputs-max"
+        :placeholder="t('addKeywordsOfContent')"
+        v-model="contentStr"
+        @change="addLabels('keywordsOfContent')"
+      />
+    </div>
+    <div class="mr-5">
+      <span class="grey mr-5"> {{ t("excludingKeywordsOfContent") }}: </span>
+      <span class="log-tags">
+        <span
+          class="selected"
+          v-for="(item, index) in excludingKeywordsOfContent"
+          :key="`excludingKeywordsOfContent${index}`"
+        >
+          <span>{{ item }}</span>
+          <span class="remove-icon" @click="removeExcludeContent(index)">
+            ×
+          </span>
+        </span>
+      </span>
+      <el-input
+        class="inputs-max"
+        size="small"
+        :placeholder="t('addExcludingKeywordsOfContent')"
+        v-model="excludingContentStr"
+        @change="addLabels('excludingKeywordsOfContent')"
+      />
+      <el-tooltip :content="t('keywordsOfContentLogTips')">
+        <span class="log-tips">
+          <Icon size="middle" iconName="help" class="ml-5 help" />
+        </span>
+      </el-tooltip>
+    </div>
+  </div>
+  <div class="flex-h row btn-row">
+    <el-button
+      class="search-btn mt-10"
+      size="small"
+      type="primary"
+      @click="runInterval"
+    >
+      <Icon
+        size="middle"
+        iconName="retry"
+        :loading="!!intervalFn"
+        class="mr-5"
+      />
+      {{ intervalFn ? t("pause") : t("start") }}
+    </el-button>
+  </div>
+</template>
+<script lang="ts" setup>
+import { ref, reactive, watch, computed, onMounted, onUnmounted } from "vue";
+import { useI18n } from "vue-i18n";
+import { useDemandLogStore } from "@/store/modules/demand-log";
+import { useDashboardStore } from "@/store/modules/dashboard";
+import { useAppStoreWithOut } from "@/store/modules/app";
+import { useSelectorStore } from "@/store/modules/selectors";
+import { ElMessage } from "element-plus";
+import { EntityType } from "../../data";
+import { TimeRanges, IntervalOpts } from "./data";
+import getLocalTime from "@/utils/localtime";
+import dateFormatStep from "@/utils/dateFormat";
+
+const { t } = useI18n();
+const appStore = useAppStoreWithOut();
+const selectorStore = useSelectorStore();
+const dashboardStore = useDashboardStore();
+const demandLogStore = useDemandLogStore();
+const keywordsOfContent = ref<string[]>([]);
+const excludingKeywordsOfContent = ref<string[]>([]);
+const contentStr = ref<string>("");
+const excludingContentStr = ref<string>("");
+// const limit = ref<number>(20);
+const state = reactive<any>({
+  instance: { value: "", label: "" },
+  container: { value: "", label: "" },
+  duration: { label: "From 30 minutes ago", value: 1800 },
+  interval: { label: "30 seconds", value: 30 },
+});
+/*global Nullable */
+const intervalFn = ref<Nullable<any>>(null);
+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,
+  };
+});
+
+onMounted(() => {
+  fetchSelectors();
+});
+
+async function fetchSelectors() {
+  if (dashboardStore.entity !== EntityType[3].value) {
+    await getInstances();
+  }
+  getContainers();
+  if (intervalFn.value) {
+    clearTimer();
+  }
+}
+async function getContainers() {
+  const resp = await demandLogStore.getContainers(
+    state.instance.id || selectorStore.currentPod.id || ""
+  );
+  if (resp.errors) {
+    ElMessage.error(resp.errors);
+    return;
+  }
+  if (demandLogStore.containers.length) {
+    state.container = demandLogStore.containers[0];
+  }
+}
+async function getInstances() {
+  const resp = await demandLogStore.getInstances();
+  if (resp.errors) {
+    ElMessage.error(resp.errors);
+    return;
+  }
+  state.instance = demandLogStore.instances[0];
+}
+function runInterval() {
+  if (intervalFn.value) {
+    clearTimer();
+    return;
+  }
+  searchLogs();
+  if (state.interval.value === 0) {
+    return;
+  }
+  intervalFn.value = setInterval(searchLogs, state.interval.value * 1000);
+  setTimeout(() => {
+    clearTimer();
+  }, state.duration.value * 1000);
+}
+function searchLogs() {
+  let instance = state.instance.id;
+  if (dashboardStore.entity === EntityType[3].value) {
+    instance = selectorStore.currentPod.id;
+  }
+  demandLogStore.setLogCondition({
+    serviceInstanceId: instance || state.instance.id || "",
+    container: state.container.value,
+    duration: rangeTime.value,
+    keywordsOfContent: keywordsOfContent.value.length
+      ? keywordsOfContent.value
+      : undefined,
+    excludingKeywordsOfContent: excludingKeywordsOfContent.value.length
+      ? excludingKeywordsOfContent.value
+      : undefined,
+  });
+  queryLogs();
+}
+async function queryLogs() {
+  const res = await demandLogStore.getDemandLogs();
+  if (res && res.errors) {
+    ElMessage.error(res.errors);
+  }
+}
+function changeField(type: string, opt: any) {
+  clearTimer();
+  // if (["limit"].includes(type)) {
+  //   state[type] = opt;
+  //   return;
+  // }
+  state[type] = opt[0];
+  if (type === "instance") {
+    getContainers();
+  }
+}
+function removeContent(index: number) {
+  const keywordsOfContentList = keywordsOfContent.value || [];
+  keywordsOfContentList.splice(index, 1);
+  demandLogStore.setLogCondition({
+    keywordsOfContent: keywordsOfContentList,
+  });
+  contentStr.value = "";
+  clearTimer();
+}
+function addLabels(type: string) {
+  if (type === "keywordsOfContent" && !contentStr.value) {
+    return;
+  }
+  if (type === "excludingKeywordsOfContent" && !excludingContentStr.value) {
+    return;
+  }
+  if (type === "keywordsOfContent") {
+    keywordsOfContent.value.push(contentStr.value);
+    demandLogStore.setLogCondition({
+      [type]: keywordsOfContent.value,
+    });
+    contentStr.value = "";
+  } else if (type === "excludingKeywordsOfContent") {
+    excludingKeywordsOfContent.value.push(excludingContentStr.value);
+    demandLogStore.setLogCondition({
+      [type]: excludingKeywordsOfContent.value,
+    });
+    excludingContentStr.value = "";
+  }
+  clearTimer();
+}
+function removeExcludeContent(index: number) {
+  excludingKeywordsOfContent.value.splice(index, 1);
+  demandLogStore.setLogCondition({
+    excludingKeywordsOfContent: excludingKeywordsOfContent.value,
+  });
+  excludingContentStr.value = "";
+  clearTimer();
+}
+function clearTimer() {
+  if (!intervalFn.value) {
+    return;
+  }
+  clearInterval(intervalFn.value);
+  intervalFn.value = null;
+}
+onUnmounted(() => {
+  clearTimer();
+});
+watch(
+  () => selectorStore.currentService,
+  () => {
+    if (dashboardStore.entity === EntityType[0].value) {
+      fetchSelectors();
+      demandLogStore.setLogs("");
+    }
+  }
+);
+watch(
+  () => [selectorStore.currentPod],
+  () => {
+    if (dashboardStore.entity === EntityType[3].value) {
+      fetchSelectors();
+      demandLogStore.setLogs("");
+    }
+  }
+);
+</script>
+<style lang="scss" scoped>
+.inputs {
+  width: 120px;
+}
+
+.row {
+  margin-bottom: 5px;
+  position: relative;
+  flex-wrap: wrap;
+}
+
+.inputs-max {
+  width: 270px;
+}
+
+.traceId {
+  margin-top: 2px;
+}
+
+.search-btn {
+  cursor: pointer;
+  width: 120px;
+}
+
+.tips {
+  color: #888;
+}
+
+.log-tag {
+  width: 30%;
+  border-style: unset;
+  outline: 0;
+  border: 1px solid #ccc;
+  height: 30px;
+  padding: 0 5px;
+}
+
+.log-tags {
+  padding: 1px 5px 0 0;
+  border-radius: 3px;
+  height: 24px;
+  display: inline-block;
+  vertical-align: top;
+}
+
+.selected {
+  display: inline-block;
+  padding: 0 3px;
+  border-radius: 3px;
+  overflow: hidden;
+  color: #3d444f;
+  border: 1px dashed #aaa;
+  font-size: 12px;
+  margin: 0 2px;
+}
+
+.remove-icon {
+  display: inline-block;
+  margin-left: 3px;
+  cursor: pointer;
+}
+
+.selectors {
+  width: 250px;
+}
+
+.duration-range {
+  width: 210px;
+}
+
+.btn-row {
+  justify-content: flex-end;
+}
+
+.help {
+  color: #999;
+  cursor: pointer;
+}
+</style>

src/views/dashboard/related/demand-log/data.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 TimeRanges = [
+  { label: "From 5 seconds ago -- Now", value: 5 },
+  { label: "From 10 seconds ago -- Now", value: 10 },
+  { label: "From 15 seconds ago -- Now", value: 15 },
+  { label: "From 30 seconds ago -- Now", value: 30 },
+  { label: "From 45 seconds ago -- Now", value: 45 },
+  { label: "From 1 minute ago -- Now", value: 60 },
+  { label: "From 5 minutes ago -- Now", value: 300 },
+  { label: "From 15 minutes ago -- Now", value: 900 },
+  { label: "From 30 minutes ago -- Now", value: 1800 },
+];
+export const IntervalOpts = [
+  { label: "None", value: 0 },
+  { label: "5 seconds", value: 5 },
+  { label: "10 seconds", value: 10 },
+  { label: "15 seconds", value: 15 },
+  { label: "30 seconds", value: 30 },
+  { label: "45 seconds", value: 45 },
+  { label: "1 minute", value: 60 },
+];

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

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