基于蓝鲸 Magicbox 和 Vue 的前端任务日志组件
npm install @blueking/task-log用于查看任务执行的具体日志文件,方便排查问题。任何任务执行历史,都需要保留任务日志,比如:执行作业、安装插件等。
!效果图
``shell`
npm i @blueking/task-log
// vue2项目需要安装如下库
npm i @blueking/bkui-library
`vue`
:title="title"
:type="type"
:data="data"
:loading="loading"
:height="height"
:enable-statistics="enableStatistics"
:enable-minimap="enableMinimap"
:statistics="statistics"
:rolling-loading="rollingLoading"
:modules="modules"
:enable-rolling-loading="enableRollingLoading"
:show-step-skip-fn="showStepSkipFn"
:show-step-retry-fn="showStepRetryFn"
@refresh="refresh"
@auto-refresh="autoRefresh"
@download="download"
@retry="handleRetry"
@skip="handleSkip" />
`vue``
:clearable="false"
:list="statusList"
prefix="状态"
/>
v-model="logConfig.title"
prefix="标题"
clearable
/>
v-model="count"
:min="0"
prefix="数据量"
suffix="条"
type="number"
@change="handleAddData"
/>
v-model="logConfig.type"
:clearable="false"
:list="typeList"
prefix="日志类型"
/>
v-model="logConfig.enableStatistics"
>统计搜索 >
v-model="logConfig.enableMinimap"
>启用 MiniMap >
@change="handleClearData"
>清空数据 >
v-model="logConfig.enableRollingLoading"
>
:enable-rolling-loading="logConfig.enableRollingLoading"
:enable-statistics="logConfig.enableStatistics"
:enable-minimap="logConfig.enableMinimap"
:loading="logConfig.loading"
:modules="logConfig.modules"
:rolling-loading="logConfig.rollingLoading"
:statistics="logConfig.statistics"
:status="logConfig.status"
:title="logConfig.title"
:type="logConfig.type"
:show-step-skip-fn="showStepSkipFn"
:show-step-retry-fn="showStepRetryFn"
@download="download"
@load-more="loadMore"
@refresh="handleAddData"
@skip="handleSkip"
@retry="handleRetry"
>
自定义模块: {{ activeModule }}
| 名称 | 描述 | 类型 | 可选值 | 默认值 |
| ---- | ---- | ---- | ---- | ---- |
| 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 |
| enableMinimap | 是否开启 minimap | boolean | true,false | true |
| enableRollingLoading | 是否开启滚动加载 | boolean | true,false | false |
| rollingLoading | 滚动加载loading | boolean | true,false | false |
| showStepSkipFn | 控制跳过按钮显示和隐藏的回调,回调参数为对应步骤的数据 | function | -- | () => false |
| showStepRetryFn | 控制重试按钮显示和隐藏的回调,回调参数为对应步骤的数据 | function | -- | () => false |
| 名称 | 描述 | 参数 |
| ---- | ---- | ---- |
| download | 日志下载 | -- |
| refresh | 刷新 | -- |
| auto-refresh | 开启自动刷新 | true/false |
| load-more | 加载更多 | -- |
| skip | 跳过 | -- |
| retry | 重试 | -- |