2.0.22 • Published 20 days ago
@blueking/log v2.0.22
说明
蓝鲸日志组件
引入方法
全量引入
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展示,参数为当前任务 |
2.0.22
20 days ago
2.0.21
27 days ago
2.0.20
1 month ago
2.0.19
1 month ago
2.0.18
2 months ago
2.0.17
2 months ago
2.0.15
8 months ago
2.0.16
8 months ago
2.0.13
11 months ago
2.0.14
11 months ago
2.0.12-beta.1
1 year ago
2.0.12-beta.2
1 year ago
2.0.12-beta.3
1 year ago
2.0.11
1 year ago
2.0.12
1 year ago
2.0.10
1 year ago
2.0.7
1 year ago
2.0.9
1 year ago
2.0.8
1 year ago
2.0.4-beta01
2 years ago
2.0.5
2 years ago
2.0.6
2 years ago
2.0.3
3 years ago
2.0.2
3 years ago
2.0.4
3 years ago
2.0.1
3 years ago
2.0.0
3 years ago
1.1.9
3 years ago
1.1.8
3 years ago
1.1.7
3 years ago
1.1.6
4 years ago
1.1.5
4 years ago
1.1.4
4 years ago
1.1.3
4 years ago
1.1.2
4 years ago
1.1.1
4 years ago
1.1.0
4 years ago
1.0.3
4 years ago
1.0.2
4 years ago
1.0.1
4 years ago
1.0.0
4 years ago
0.0.4
4 years ago
0.0.3
4 years ago
0.0.2
4 years ago
0.0.1
4 years ago