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

<template>
  <div>
    <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>
      <q-tab-panel name="view">
        <div class="row q-pt-sm">
          <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')" @click="refresh" />
          </div>
        </div>
        <div class="row q-pt-sm">
          <div class="col-12">
            <q-input v-model="logContent" type="textarea" outlined input-style="height:500px;font-size:12px" />
          </div>
        </div>
      </q-tab-panel>
      <q-tab-panel name="download">
        <w-grid
          ref="downloadGridRef"
          :title="$t('system.monitor.log.download.grid.title')"
          selection="multiple"
          :data-url="Environment.apiContextPath('/api/monitor/logger/getLogFiles')"
          :toolbar-configure="{ noIcon: false }"
          :toolbar-actions="[
            'refresh',
            'separator',
            {
              name: 'download',
              label: t('download'),
              icon: 'bi-download',
              click: () => {
                let url = Environment.apiContextPath('/api/monitor/logger/downloadLogFile?');
                url += 'fileName=' + encodeURIComponent(downloadGridRef.getSelectedRows()[0].name);
                downloadIframe.src = url;
              },
            },
          ]"
          :pageable="false"
          dense-body
          :pagination="{
            sortBy: 'startDate',
            descending: true,
          }"
          :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">
        <w-grid
          ref="levelGridRef"
          :title="$t('system.monitor.log.level.grid.title')"
          selection="multiple"
          :data-url="Environment.apiContextPath('/api/monitor/logger/getLogConfigurationLevels')"
          :toolbar-configure="{ noIcon: false }"
          :toolbar-actions="['query', 'refresh', 'separator', 'edit']"
          dense-body
          :pagination="{
            sortBy: 'startDate',
            descending: true,
          }"
          :query-form-fields="[
            { name: 'name', label: $t('name'), type: 'text' },
            { name: 'configuredLevel', label: $t('system.monitor.log.level.entity.configuredLevel'), type: 'select' },
            { name: 'effectiveLevel', label: $t('system.monitor.log.level.entity.effectiveLevel'), type: 'select' },
          ]"
          :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' }],
            },
          }"
        >
        </w-grid>
      </q-tab-panel>
    </q-tab-panels>
    <iframe ref="downloadIframe" src="javascript:;" style="width: 0px; height: 0px"></iframe>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useI18n } from 'vue-i18n';
import { Environment, axios } from 'platform-core';

const { t } = useI18n();

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

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

const refresh = () => {
  axios
    .post(Environment.apiContextPath('/api/monitor/logger/getLogFileContents'), {
      rows: logRows.value,
    })
    .then((response) => {
      logContent.value = response.data;
    });
};

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