@blueking/log

2.1.4 • Public • Published

说明

蓝鲸日志组件

引入方法

全量引入

import log from '@blueking/log'
Vue.use(log)

按需引入

import { bkLog, bkLogSearch, bkMultipleLog, bkStagLog } from '@blueking/log'
export default {
  components: {
    BkLog,
    BkLogSearch
  }
}

单任务日志使用方法

搜索组件bkLogSearch和日志组件bkLog需要分别引入,引入后的样式布局由需求自行确定。搜索组件可以传入下载链接,执行次数,修改执行次数会清空日志数据,并触发改变执行次数回调change-execute。打开日志组件以后,需要使用$ref调用日志组件的添加日志方法,日志数据需要message字段展示内容,需要timestamp字段展示时间。日志本身是100%的高度,如果100%不能定高,那么需要给日志组件一个确定的高度,可以是100%或者是固定的px。

<template>
   <section class="bk-magic-main">
        <section class="bk-log-head">
            <span>Bash</span>
            <bk-log-search :execute-count="executeCount" @change-execute="changeExecute">
                <template v-slot:tool>
                    <li class="more-button" @click="toggleShowDebugLog">{{ showDebug ? 'Hide Debug Log' : 'Show Debug Log' }}</li>
                </template>
            </bk-log-search>
        </section>

        <bk-log class="bk-log" ref="bkLog"></bk-log>
    </section>
</template>

<script>
    export default {
        data () {
            return {
                executeCount: 2,
                showDebug: false
            }
        },

        mounted () {
            this.initLog()
        },

        methods: {
            initLog () {
                const list = [
                    { timestamp: 1587523483701, message: 'command file path: /tmp/script/dev.sh' },
                    { timestamp: 1587523483716, message: 'command file content: export WORKSPACE=/data/dev/workspace' },
                    { timestamp: 1587523483717, message: '##[error] <file version=\"8.0\"></file>' }
                ]
                this.$refs.bkLog.addLogData(list)
            },

            changeExecute (execute) {
                console.log(execute)
                const list = this.getLogs()
                this.$refs.bkLog.addLogData(list)
            },

            toggleShowDebugLog () {
                this.showDebug = !this.showDebug
            }
        }
    }
</script>
<style lang="postcss">
    .bk-magic-main {
        height: 700px;
        width: 100%;
        display: flex;
        flex-direction: column;
        background: #1e1e1e;
        .bk-log-head {
            line-height: 48px;
            padding: 5px 20px;
            border-bottom: 1px solid;
            border-bottom-color: #2b2b2b;
            display: flex;
            align-items: center;
            justify-content: space-between;
            color: #d4d4d4;
        }
        .bk-log {
            height: calc(100% - 60px)
        }
    }
</style>

多任务日志使用方法

如果页面有多个搜索组件和日志组件,那么需要给搜索组件和日志组件传入相同的searchId,来让他们对应起来,否则会搜索失败。多任务日志需要传入任务列表log-list,列表每一项需要包含id字段。多任务日志打开的时候会展示所有的任务,当点击任务的时候,会触发打开任务回调open-log,并把当前任务作为参数传入,在回调里面可以给该任务添加数据,也是调用组件的addLogData方法,需要传入日志列表和任务id。关闭任务的时候,也会触发关闭任务回调close-log。任务标题可以使用默认slot展示标题,否则会展示任务的name字段。

<template>
    <section class="bk-magic-main">
        <section class="bk-log-head">
            <span>Bash</span>
            <bk-log-search :execute-count="executeCount" search-id="multipleLog" @change-execute="changeMultipleExecute"></bk-log-search>
        </section>

        <bk-multiple-log ref="multipleLog"
            search-id="multipleLog"
            class="bk-log"
            :log-list="logs"
            @open-log="openLog"
            @close-log="closeLog"
        >
            <template slot-scope="log">
                {{ log.data.name }}
            </template>
        </bk-multiple-log>
    </section>
</template>
<script>
    export default {
        data () {
            return {
                logs: [
                    { name: 'Set up job', id: 'SetUpJob' },
                    { name: 'Pull Git', id: 'PullGit' },
                    { name: 'Start Build', id: 'StartBuild' },
                    { name: 'Start Deploy', id: 'StartDeploy' },
                    { name: 'End job', id: 'EndJob' }
                ],
                executeCount: 2
            }
        },

        methods: {
            openLog (plugin) {
                const list = [
                    { timestamp: 1587523483701, message: 'command file path: /tmp/script/dev.sh' },
                    { timestamp: 1587523483716, message: 'command file content: export WORKSPACE=/data/dev/workspace' },
                    { timestamp: 1587523483717, message: '##[error] <file version=\"8.0\"></file>' }
                ]
                this.$refs.multipleLog.addLogData(list, plugin.id)
            },

            closeLog (id) {
                console.log(`${id} close`)
            },

            changeMultipleExecute (execute) {
                console.log(execute)
            }
        }
    }
</script>

<style lang="postcss">
    .bk-magic-main {
        height: 700px;
        width: 100%;
        display: flex;
        flex-direction: column;
        background: #1e1e1e;
        .bk-log-head {
            line-height: 48px;
            padding: 5px 20px;
            border-bottom: 1px solid;
            border-bottom-color: #2b2b2b;
            display: flex;
            align-items: center;
            justify-content: space-between;
            color: #d4d4d4;
        }
        .bk-log {
            height: calc(100% - 60px)
        }
    }
</style>

:::

搜索组件属性

参数 说明 类型 可选值 默认值
execute-count 执行次数 Number -- 0
search-id 与日志组件对应 String -- bk-log-search
ext-cls 配置自定义样式类名,传入的类会被加在组件最外层的 DOM .log-tools String -- --

单任务日志组件属性

参数 说明 类型 可选值 默认值
search-id 与搜索组件对应 String -- bk-log-search
ext-cls 配置自定义样式类名,传入的类会被加在组件最外层的 DOM .plugin-log String -- --

多任务日志组件属性

参数 说明 类型 可选值 默认值
search-id 与搜索组件对应 String -- bk-log-search
log-list 任务列表,每一项需要有id字段 Array -- --
ext-cls 配置自定义样式类名,传入的类会被加在组件最外层的 DOM .multiple-log String -- --

日志组件方法

参数 说明 参数
addLogData 添加日志数据 单任务日志传入日志列表,多任务日志还需再传入任务id

搜索组件事件

事件名称 说明 回调参数
change-execute 改变执行回调 新的执行次数

搜索组件插槽

说明 回调参数
tool 右侧下拉框工具插槽

多任务日志组件事件

事件名称 说明 回调参数
open-log 打开任务回调 当前操作的任务
close-log 关闭任务回调 当前操作的任务

多任务日志组件插槽

name 说明
-- 匿名作用域插槽,自定义任务的title展示,参数为当前任务

Readme

Keywords

none

Package Sidebar

Install

npm i @blueking/log

Weekly Downloads

95

Version

2.1.4

License

ISC

Unpacked Size

157 kB

Total Files

5

Last publish

Collaborators

  • blueking