@blueking/log

说明

蓝鲸日志组件

引入方法

全量引入

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展示，参数为当前任务