platform/io.sc.platform.system.frontend/src/views/monitor/Log.vue

<template>
  <div style="height: 100%">
    <q-tabs v-model="selectedTabRef" inline-label align="left" :breakpoint="0">
      <q-tab name="view" icon="bi-receipt" :label="$t('system.monitor.log.tab.view')" />
      <q-tab name="download" icon="bi-download" :label="$t('system.monitor.log.tab.download')" />
      <q-tab name="level" icon="bi-sort-numeric-up" :label="$t('system.monitor.log.tab.level')" />
    </q-tabs>

    <q-tab-panels v-model="selectedTabRef" animated swipeable keep-alive style="height: calc(100% - 48px)">
      <q-tab-panel name="view" class="px-0 pb-0" style="height: 100%; padding-left: 0px; padding-right: 0px; padding-bottom: 0px">
        <div class="row q-pt-sm items-center" style="height: 50px">
          <div class="col-2">
            <q-input v-model="logRows" :label="$t('system.monitor.log.viewer.logRows')" outlined dense />
          </div>
          <div class="col-5 q-pl-sm">
            <q-checkbox v-model="autoRefresh" :label="$t('system.monitor.log.viewer.autoRefresh')" outlined dense />
          </div>
          <div class="col-4"></div>
          <div class="col-1">
            <q-btn :label="$t('system.monitor.log.viewer.action.refreshNow')" color="primary" @click="refresh" />
          </div>
        </div>
        <div class="row q-pt-sm" style="height: calc(100% - 52px)">
          <div
            v-dompurify-html="logContent"
            contenteditable="true"
            class="col-12 border overflow-auto text-nowrap rounded-md p-2 text-sm"
            style="height: 100%"
          ></div>
        </div>
      </q-tab-panel>
      <q-tab-panel name="download" class="px-0 pb-0" style="height: 100%; padding-left: 0px; padding-right: 0px; padding-bottom: 0px">
        <w-grid
          ref="downloadGridRef"
          :title="$t('system.monitor.log.download.grid.title')"
          :config-button="true"
          selection="multiple"
          :checkbox-selection="false"
          :data-url="Environment.apiContextPath('/api/monitor/logger/getLogFiles')"
          :pagination="{
            sortBy: 'lastModifyDate',
            descending: true,
          }"
          :toolbar-configure="{ noIcon: false }"
          :toolbar-actions="[
            'refresh',
            'separator',
            {
              name: 'download',
              label: $t('download'),
              icon: 'bi-download',
              enableIf: (arg) => {
                return arg.selected;
              },
              click: (arg) => {
                Downloader.get(Environment.apiContextPath('/api/monitor/logger/downloadLogFile?fileName=' + encodeURIComponent(arg.selected.name)));
              },
            },
          ]"
          :columns="[
            { width: '100%', name: 'name', label: $t('name') },
            { width: 150, name: 'lastModifyDate', label: $t('lastModifyDate') },
            {
              width: 200,
              name: 'size',
              label: $t('size'),
              align: 'right',
              format: (value, row) => {
                return row.commaSize;
              },
            },
          ]"
        >
        </w-grid>
      </q-tab-panel>
      <q-tab-panel name="level" class="px-0 pb-0" style="height: 100%; padding-left: 0px; padding-right: 0px; padding-bottom: 0px">
        <w-grid
          ref="levelGridRef"
          :title="$t('system.monitor.log.level.grid.title')"
          :config-button="true"
          selection="multiple"
          :checkbox-selection="false"
          :data-url="Environment.apiContextPath('/api/monitor/logger/getLogConfigurationLevels')"
          :pagination="{
            sortBy: 'name',
            descending: false,
          }"
          :toolbar-configure="{ noIcon: false }"
          :toolbar-actions="['query', 'refresh', 'separator', 'edit']"
          :query-form-fields="[
            { name: 'name', label: $t('name'), type: 'text' },
            { name: 'configuredLevel', label: $t('system.monitor.log.level.entity.configuredLevel'), type: 'select', options: Options.enum(LogLevelEnum) },
            { name: 'effectiveLevel', label: $t('system.monitor.log.level.entity.effectiveLevel'), type: 'select', options: Options.enum(LogLevelEnum) },
          ]"
          :columns="[
            { width: 700, name: 'name', label: $t('name') },
            { width: 100, name: 'configuredLevel', label: $t('system.monitor.log.level.entity.configuredLevel') },
            { width: 100, name: 'effectiveLevel', label: $t('system.monitor.log.level.entity.effectiveLevel') },
          ]"
          :editor="{
            dialog: {
              width: '600px',
              height: '210px',
            },
            form: {
              colsNum: 1,
              fields: [
                { name: 'effectiveLevel', label: $t('system.monitor.log.level.entity.effectiveLevel'), type: 'select', options: Options.enum(LogLevelEnum) },
              ],
            },
          }"
        >
        </w-grid>
      </q-tab-panel>
    </q-tab-panels>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { Environment, axios, EnumTools, Options, Downloader } from 'platform-core';

const LogLevelEnum = await EnumTools.fetch('io.sc.platform.core.enums.LogLevel');

const selectedTabRef = ref('view');
const logRows = ref(20);
const autoRefresh = ref(false);
const logContent = ref('');

const downloadGridRef = ref();
const levelGridRef = ref();

const refresh = () => {
  axios
    .post(Environment.apiContextPath('/api/monitor/logger/getLogFileContents'), {
      rows: logRows.value,
    })
    .then((response) => {
      if (response.data) {
        let content = response.data;
        content = content.replace(/\n/g, '<div></div>');
        content = content.replace(/\r/g, '<div></div>');
        logContent.value = content;
      } else {
        logContent.value = '';
      }
    });
};

onMounted(() => {
  refresh();
});
</script>