蓝鲸任务日志组件

用于查看任务执行的具体日志文件，方便排查问题。任何任务执行历史，都需要保留任务日志，比如：执行作业、安装插件等。

效果图

如何使用

npm i @blueking/task-log
// vue2项目需要安装如下库
npm i @blueking/bkui-library

<template>
   <TaskLog
    :status="status"
    :title="title"
    :type="type"
    :data="data"
    :loading="loading"
    :height="height"
    :enable-statistics="enableStatistics"
    :statistics="statistics"
    :rolling-loading="rollingLoading"
    :modules="modules"
    :enable-rolling-loading="enableRollingLoading"
    @refresh="refresh"
    @auto-refresh="autoRefresh"
    @download="download" />
</template>
<script lang="ts" setup>
import { PropType } from 'vue';

import { IStatisticsItem, IStep, LogType } from '@blueking/task-log/src/lib/@types/index';
// vue2.7 导入方式
import TaskLog from '@blueking/task-log/vue2';
import '@blueking/task-log/vue2/vue2.css';
// vue3导入方式
// import TaskLog from '@blueking/task-log';

defineProps({
  // 状态
  status: {
    type: String,// FAILED,HALFSUCCESS,LOADING,SUCCESS,TERMINATE,WAITING
  },
  // 标题
  title: {
    type: String,
    default: '',
  },
  // 自定义模块
  modules: {
    type: Array as PropType<IModule[]>,
    default: () => [],
  },
  // 日志类型
  type: {
    type: String as PropType<LogType>,
    default: 'default',
  },
  // 日志数据
  data: {
    type: [Array, Object] as PropType<IStep | IStep[]>,
    default: () => [],
  },
  // 日志加载loading
  loading: {
    type: Boolean,
    default: false,
  },
  // 高度
  height: {
    type: [String, Number],
    default: 560,
  },
  // 开启右侧统计状态栏
  enableStatistics: {
    type: Boolean,
    default: true,
  },
  // 自定义统计规则
  statistics: {
    type: Array as PropType<IStatisticsItem[]>,
    default: () => [],
  },
  // 滚动加载loading
  rollingLoading: {
    type: Boolean,
    default: false,
  },
  // 是否开启滚动加载
  enableRollingLoading: {
    type: [Boolean, String] as PropType<'manual' | boolean>,
    default: false,
  },
});

const emits = defineEmits(['download', 'refresh', 'auto-refresh']);

function refresh() {
  emits('refresh');// 刷新按钮
}

function autoRefresh(v: boolean) {
  emits('auto-refresh', v);// 启动自动刷新
}

function download() {
  emits('download');// 下载
}
</script>

完整案例

<template>
  <div class="task-log">
    <div class="flex items-center mb-[16px]">
      <bk-select
        v-model="logConfig.status"
        :clearable="false"
        :list="statusList"
        prefix="状态"
      />
      <bk-input
        class="ml-[8px] !w-[210px]"
        v-model="logConfig.title"
        prefix="标题"
        clearable
      />
      <bk-input
        class="ml-[8px] !w-[210px]"
        v-model="count"
        :min="0"
        prefix="数据量"
        suffix="条"
        type="number"
        @change="handleAddData"
      />
      <bk-select
        class="ml-[8px]"
        v-model="logConfig.type"
        :clearable="false"
        :list="typeList"
        prefix="日志类型"
      />
      <bk-checkbox
        class="ml-[8px]"
        v-model="logConfig.enableStatistics"
        >统计搜索</bk-checkbox
      >
      <bk-checkbox
        class="ml-[8px]"
        @change="handleClearData"
        >清空数据</bk-checkbox
      >
      <bk-radio-group
        class="ml-[8px]"
        v-model="logConfig.enableRollingLoading"
      >
        <bk-radio :label="true">滚动加载</bk-radio>
        <bk-radio label="manual">滚动加载(手动)</bk-radio>
      </bk-radio-group>
    </div>
    <BkTaskLog
      :data="stepData"
      :enable-rolling-loading="logConfig.enableRollingLoading"
      :enable-statistics="logConfig.enableStatistics"
      :loading="logConfig.loading"
      :modules="logConfig.modules"
      :rolling-loading="logConfig.rollingLoading"
      :statistics="logConfig.statistics"
      :status="logConfig.status"
      :title="logConfig.title"
      :type="logConfig.type"
      @download="download"
      @load-more="loadMore"
      @refresh="handleAddData"
    >
      <template #content="{ activeModule }">
        <div class="text-[#fff] h-[360px] flex items-center justify-center">自定义模块: {{ activeModule }}</div>
      </template>
    </BkTaskLog>
  </div>
</template>
<script lang="ts" setup>
  import { onBeforeMount, ref } from 'vue';

  import { Message } from 'bkui-vue';

  import { IModule, IStatisticsItem, IStep, LogType } from '../src/lib/@types';
  import { Status } from '../src/lib/common/constants';
  import BkTaskLog from '../src/lib/index';

  const statusList = ref(Object.keys(Status).map(key => ({ label: key, value: key })));
  const typeList = ref([
    {
      label: '默认',
      value: 'default',
    },
    {
      label: '日志步骤',
      value: 'multi-task-anchor',
    },
    {
      label: '日志步骤（不带锚点）',
      value: 'multi-task',
    },
  ]);

  interface ILogProps {
    status: Status;
    title: string;
    type: LogType;
    loading: boolean;
    enableStatistics: boolean;
    statistics: Array<IStatisticsItem>;
    modules: IModule[];
    enableRollingLoading: 'manual' | boolean;
    rollingLoading: boolean;
  }

  const count = ref(100);
  const stepData = ref<IStep[]>([
    {
      id: '1',
      name: '1. 创建计算平台数据开发任务',
      status: 'SUCCESS',
      startTime: '2023-09-20 18:17:35',
      endTime: '2023-09-21 18:17:30',
      data: [
        { log: '[2023-09-20 18:17:35 INFO] 开始 初始化进程状态.', timestamp: '2023-09-20 18:17:35', level: 'ERROR' },
        { log: '[2023-09-20 18:17:35 INFO] 初始化进程状态 成功', groupStart: true, timestamp: '2023-09-20 18:17:35' },
        { log: '[2023-09-20 18:17:35 INFO] 开始 更新插件部署状态为UNKNOWN.', timestamp: '2023-09-20 18:17:35' },
        { log: '[2023-09-20 18:17:35 INFO] 更新插件部署状态为UNKNOWN 成功', timestamp: '2023-09-20 18:17:35' },
        { log: '[2023-09-20 18:17:35 INFO] 开始 下发脚本.', groupEnd: true, timestamp: '2023-09-20 18:17:35' },
        { log: '[2023-09-20 22:47:38 INFO] 开始 初始化进程状态.', timestamp: '2023-09-20 18:17:35' },
        { log: '[2023-09-20 22:47:39 INFO] 初始化进程状态 成功', timestamp: '2023-09-20 18:17:35' },
        { log: '[2023-09-20 22:47:39 INFO] 开始 切换订阅启用状态.', timestamp: '2023-09-20 18:17:35' },
        { log: '[2023-09-20 22:47:39 INFO] 策略 -> 1597「奇怪的策略」切换为：启用', timestamp: '2023-09-20 18:17:35' },
        { log: '[2023-09-20 22:47:39 INFO] 切换订阅启用状态 成功', timestamp: '2023-09-20 18:17:35' },
        { log: '[2023-09-20 22:47:39 INFO] 开始 更新插件部署状态为UNKNOWN.', timestamp: '2023-09-20 18:17:35' },
        { log: '[2023-09-20 22:47:39 INFO] 更新插件部署状态为UNKNOWN 成功', timestamp: '2023-09-20 18:17:35' },
        { log: '[2023-09-20 22:47:39 INFO] 开始 下发脚本.', timestamp: '2023-09-20 18:17:35' },
        { log: '[2023-09-20 22:47:45 INFO] 下发脚本 成功', timestamp: '2023-09-20 18:17:35' },
        { log: '[2023-09-20 22:47:46 INFO] 开始 启动进程.' },
      ],
    },
    {
      id: '2',
      name: '2. 发布API',
      status: 'WAITING',
      data: [],
    },
  ]);

  const logConfig = ref<ILogProps>({
    status: Status.SUCCESS,
    title: '安装插件',
    type: 'default',
    enableStatistics: true,
    enableRollingLoading: false,
    loading: false,
    rollingLoading: false,
    modules: [
      {
        text: '模块A',
        value: 'moduleA',
      },
      {
        text: '模块B',
        value: 'moduleB',
      },
    ],
    statistics: [
      {
        id: 'agent',
        regex: 'agent',
        desc: '点击搜索agent',
      },
    ],
  });

  const download = () => {
    Message({
      theme: 'warning',
      message: '请配置下载链接',
    });
  };

  const loadMore = () => {
    logConfig.value.rollingLoading = true;
    setTimeout(() => {
      const newData = new Array(count.value).fill(undefined).map(() => ({
        log: '[2023-09-20 22:47:39 INFO] 开始 切换订阅启用状态.',
        timestamp: '2023-09-20 18:17:35',
      }));
      stepData.value[0].data.push(...newData);
      logConfig.value.rollingLoading = false;
    }, 2000);
  };

  const handleClearData = (v: boolean) => {
    if (v) {
      stepData.value[0].data = [];
    } else {
      handleAddData();
    }
  };

  const handleAddData = () => {
    const newData = new Array(count.value).fill(undefined).map(() => ({
      log: '[2023-09-20 22:47:39 INFO] 开始 切换订阅启用状态.',
      timestamp: '2023-09-20 18:17:35',
    }));

    stepData.value[0].data = newData;
    loading();
  };

  const loading = () => {
    logConfig.value.loading = true;

    setTimeout(() => {
      logConfig.value.loading = false;
    }, 2000);
  };

  onBeforeMount(() => {
    new Array(count.value).fill(undefined).forEach(() => {
      stepData.value[0].data.push({
        log: '[2023-09-20 22:47:39 INFO] 开始 切换订阅启用状态.',
        timestamp: '2023-09-20 18:17:35',
      });
    });
    loading();
  });
</script>

属性

| 名称 | 描述 | 类型 | 可选值 | 默认值 | | ---- | ---- | ---- | ---- | ---- | | status | 状态 | 枚举 | FAILED,HALFSUCCESS,LOADING,SUCCESS,TERMINATE,WAITING | -- | | title | 标题 | string | -- | -- | | modules | 自定义模块 | Array | -- | [] | | type | 类型 | 枚举 | 'default'， 'multi-task'， 'multi-task-anchor' | default | | data | 数据 | [Array, Object] | -- | -- | | loading | 是否加载中 | boolean | true,false | false | | height | 高度 | number | -- | -- | | statistics | 自定义右侧统计规则 | Array | -- | [] | | enableStatistics | 是否开启右侧统计状态栏 | boolean | true,false | false | | enableRollingLoading | 是否开启滚动加载 | boolean | true,false | false | | rollingLoading | 滚动加载loading | boolean | true,false | false |

事件

| 名称 | 描述 | 参数 | | ---- | ---- | ---- | | download | 日志下载 | -- | | refresh | 刷新 | -- | | auto-refresh | 开启自动刷新 | true/false | | load-more | 加载更多 | -- |