[Update] 更改作业中心/任务列表 卡片

This commit is contained in:
xinwen
2020-06-16 11:32:52 +08:00
parent b92d47e5ad
commit bfddc20a16
5 changed files with 63 additions and 90 deletions

View File

@@ -1,7 +1,7 @@
<template> <template>
<IBox :fa="icon" :type="type" :title="title" v-bind="$attrs"> <IBox :fa="icon" :type="type" :title="title" v-bind="$attrs">
<table class="run-info"> <table class="run-info">
<tr> <tr v-for="content in contents" :key="content.hostname">
<td>{{ content.hostname }}</td> <td>{{ content.hostname }}</td>
<td>{{ content.result }}</td> <td>{{ content.result }}</td>
</tr> </tr>
@@ -26,9 +26,9 @@ export default {
type: String, type: String,
default: '' default: ''
}, },
content: { contents: {
type: Object, type: Array,
default: () => ({}) default: () => ([])
}, },
url: { url: {
type: String, type: String,

View File

@@ -4,8 +4,8 @@
<DetailCard :title="cardTitle" :items="detailCardItems" /> <DetailCard :title="cardTitle" :items="detailCardItems" />
</el-col> </el-col>
<el-col :span="10"> <el-col :span="10">
<RunInfoCard v-for="config in RunSuccessConfigs" :key="config.host" type="info" v-bind="config" /> <RunInfoCard type="danger" style="margin-top: 15px" v-bind="RunFailedConfig" />
<RunInfoCard v-for="config in RunFailedConfigs" :key="config.host" type="danger" style="margin-top: 15px" v-bind="config" /> <RunInfoCard type="info" v-bind="RunSuccessConfig" />
</el-col> </el-col>
</el-row> </el-row>
</template> </template>
@@ -29,30 +29,17 @@ export default {
} }
}, },
data() { data() {
const last_success = toLastSucessDisplay(this.object.latest_execution)
const last_failure = toLastFailureDisplay(this.object.latest_execution)
return { return {
RunSuccessConfigs: last_success.map(host => { RunSuccessConfig: {
return { icon: 'fa-info',
icon: 'fa-info', title: this.$t('ops.lastRunSuccessHosts'),
title: this.$t('ops.lastRunSuccessHosts'), contents: toLastSucessDisplay(this.object.latest_execution)
content: { },
hostname: host, RunFailedConfig: {
result: '' icon: 'fa-info',
} title: this.$t('ops.lastRunFailedHosts'),
} contents: toLastFailureDisplay(this.object.latest_execution)
}), }
RunFailedConfigs: last_failure.map(([host, msg]) => {
return {
icon: 'fa-info',
title: this.$t('ops.lastRunFailedHosts'),
content: {
hostname: host,
result: msg
}
}
})
} }
}, },
computed: { computed: {

View File

@@ -4,8 +4,8 @@
<DetailCard :title="cardTitle" :items="detailCardItems" /> <DetailCard :title="cardTitle" :items="detailCardItems" />
</el-col> </el-col>
<el-col :span="10"> <el-col :span="10">
<RunInfoCard v-for="config in RunSuccessConfigs" :key="config.host" type="info" v-bind="config" /> <RunInfoCard type="danger" style="margin-top: 15px" v-bind="RunFailedConfig" />
<RunInfoCard v-for="config in RunFailedConfigs" :key="config.host" type="danger" style="margin-top: 15px" v-bind="config" /> <RunInfoCard type="info" v-bind="RunSuccessConfig" />
</el-col> </el-col>
</el-row> </el-row>
</template> </template>
@@ -29,30 +29,17 @@ export default {
} }
}, },
data() { data() {
const last_success = toLastSucessDisplay(this.object)
const last_failure = toLastFailureDisplay(this.object)
return { return {
RunSuccessConfigs: last_success.map(host => { RunSuccessConfig: {
return { icon: 'fa-info',
icon: 'fa-info', title: this.$t('ops.lastRunSuccessHosts'),
title: this.$t('ops.lastRunSuccessHosts'), contents: toLastSucessDisplay(this.object)
content: { },
hostname: host, RunFailedConfig: {
result: '' icon: 'fa-info',
} title: this.$t('ops.lastRunFailedHosts'),
} contents: toLastFailureDisplay(this.object)
}), }
RunFailedConfigs: last_failure.map(([host, msg]) => {
return {
icon: 'fa-info',
title: this.$t('ops.lastRunFailedHosts'),
content: {
hostname: host,
result: msg
}
}
})
} }
}, },
computed: { computed: {

View File

@@ -4,8 +4,8 @@
<DetailCard :title="cardTitle" :items="detailCardItems" /> <DetailCard :title="cardTitle" :items="detailCardItems" />
</el-col> </el-col>
<el-col :span="10"> <el-col :span="10">
<RunInfoCard v-for="config in RunSuccessConfigs" :key="config.host" type="info" v-bind="config" /> <RunInfoCard type="danger" style="margin-top: 15px" v-bind="RunFailedConfig" />
<RunInfoCard v-for="config in RunFailedConfigs" :key="config.host" type="danger" style="margin-top: 15px" v-bind="config" /> <RunInfoCard type="info" v-bind="RunSuccessConfig" />
</el-col> </el-col>
</el-row> </el-row>
</template> </template>
@@ -28,30 +28,17 @@ export default {
} }
}, },
data() { data() {
const last_success = toLastSucessDisplay(this.object.latest_execution)
const last_failure = toLastFailureDisplay(this.object.latest_execution)
return { return {
RunSuccessConfigs: last_success.map(host => { RunSuccessConfig: {
return { icon: 'fa-info',
icon: 'fa-info', title: this.$t('ops.lastRunSuccessHosts'),
title: this.$t('ops.lastRunSuccessHosts'), contents: toLastSucessDisplay(this.object.latest_execution)
content: { },
hostname: host, RunFailedConfig: {
result: '' icon: 'fa-info',
} title: this.$t('ops.lastRunFailedHosts'),
} contents: toLastFailureDisplay(this.object.latest_execution)
}), },
RunFailedConfigs: last_failure.map(([host, msg]) => {
return {
icon: 'fa-info',
title: this.$t('ops.lastRunFailedHosts'),
content: {
hostname: host,
result: msg
}
}
}),
taskData: {} taskData: {}
} }
}, },

View File

@@ -1,24 +1,36 @@
export const toLastSucessDisplay = function(object) { export const toLastSucessDisplay = function(object) {
if (!object) return [''] const last_success = object && object.last_success
const last_success = object.last_success
last_success.length || last_success.push('') if (!(last_success instanceof Array)) return []
return last_success return last_success.map(host => {
return {
hostname: host,
result: ''
}
})
} }
export const toLastFailureDisplay = function(object) { export const toLastFailureDisplay = function(object) {
if (!object) return [['', '']] const last_failure = object && object.last_failure
const last_failure = [] if (!(last_failure instanceof Object)) return []
for (const host in object.last_failure) {
const task = object.last_failure[host] const ret = []
for (const host in last_failure) {
const task = last_failure[host]
const msgs = [] const msgs = []
for (const name in task) { for (const name in task) {
msgs.push(`${name} => ${task[name].msg}`) msgs.push(`${name} => ${task[name].msg}`)
} }
last_failure.push([host, msgs.join('\n')]) ret.push(
{
hostname: host,
result: msgs.join('\n')
}
)
} }
last_failure.length || last_failure.push(['', '']) return ret
return last_failure
} }