265 lines
11 KiB
HTML
265 lines
11 KiB
HTML
<!doctype html>
|
|
<html lang="zh-cn">
|
|
<head>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Deploy Service</title>
|
|
<link rel="stylesheet"
|
|
href="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/element-ui/2.15.7/theme-chalk/index.css">
|
|
<style>
|
|
#app {
|
|
max-width: 1200px;
|
|
margin: auto;
|
|
}
|
|
</style>
|
|
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js"
|
|
type="application/javascript"></script>
|
|
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/element-ui/2.15.7/index.js"
|
|
type="application/javascript"></script>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
<div id="app">
|
|
<h1>Deploy Service</h1>
|
|
<el-button @click="dialogVisible = true">新建</el-button>
|
|
<el-dialog :close-on-click-modal="false" title="新建部署项目" :visible.sync="dialogVisible" width="600">
|
|
<div>
|
|
<el-row>
|
|
<el-input v-model="project.name" placeholder="请输入项目名称"/>
|
|
</el-row>
|
|
<div style="margin-top:20px">
|
|
<el-input type="textarea" :autosize="{ minRows: 3, maxRows: 10}" placeholder="请输入待执行shell内容"
|
|
v-model="project.shell"/>
|
|
</div>
|
|
</div>
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button @click="dialogVisible = false">取 消</el-button>
|
|
<el-button type="primary" @click="handleCreate">确 定</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
<el-dialog :close-on-click-modal="false" title="项目运行日志" :visible.sync="historyVisible" width="500">
|
|
<div>
|
|
<el-table :data="currentHistories" stripe style="width: 100%;">
|
|
<el-table-column prop="time" label="创建时间"></el-table-column>
|
|
<el-table-column prop="useTime" label="执行时长" width="100">
|
|
<template slot-scope="scope">
|
|
<span>{{scope.row.useTime}} ms</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="状态" width="100">
|
|
<template slot-scope="scope">
|
|
<span>{{formatStatus(scope.row, true)}}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="lastUpdate" label="" width="100">
|
|
<template slot-scope="scope">
|
|
<a target="_blank"
|
|
:href="'./project/history?id=' + currentProject.id
|
|
+ '&time='+(scope.row.timestamp||scope.row.time)">查看记录</a>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
<el-pagination style="text-align: center;padding-top: 20px;"
|
|
:hide-on-single-page="true"
|
|
:total="currentHistory.list.length"
|
|
:page-size="currentHistory.size"
|
|
@current-change="onPageChange"
|
|
layout="prev, pager, next">
|
|
</el-pagination>
|
|
</el-dialog>
|
|
|
|
<el-dialog :close-on-click-modal="false" title="编辑脚本内容" :visible.sync="shellModify.visible" width="600">
|
|
<div>
|
|
<el-input type="textarea" :autosize="{ minRows: 3, maxRows: 10}" placeholder="请输入待执行shell内容"
|
|
v-model="shellModify.shell"/>
|
|
</div>
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button @click="shellModify.visible = false">取 消</el-button>
|
|
<el-button :loading="shellModify.loading" type="primary" @click="handleModifyShell">确 定</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
<div class="data-list">
|
|
<el-table :data="projects" stripe border style="width: 100%;margin-top:20px;" size="small">
|
|
<el-table-column prop="id" label="ID" width="80"></el-table-column>
|
|
<el-table-column prop="name" label="名称"></el-table-column>
|
|
<el-table-column prop="create" label="创建时间" width="180"></el-table-column>
|
|
<el-table-column prop="lastUpdate" label="更新时间" width="220"></el-table-column>
|
|
<el-table-column label="执行状态" width="100">
|
|
<template slot-scope="scope">
|
|
<span>{{formatStatus(scope.row)}}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="操作" width="250">
|
|
<template slot-scope="scope">
|
|
<el-button @click="showProjectInfo(scope.row)" type="text" size="small">执行历史</el-button>
|
|
<el-button @click="execShell(scope.row)" type="text" size="small">执行</el-button>
|
|
<el-button @click="editShell(scope.row)" type="text" size="small">编辑脚本</el-button>
|
|
<el-button @click="showHook(scope.row)" type="text" size="small">Hook地址</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<div class="log-list">
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
|
|
const app = new Vue({
|
|
el: '#app',
|
|
async mounted() {
|
|
let data = await this.requestData('./project/');
|
|
console.log(data);
|
|
this.projects = data
|
|
},
|
|
methods: {
|
|
/**
|
|
*
|
|
* @param {ProjectInfo} data
|
|
*/
|
|
formatStatus(data, isHistory = false) {
|
|
if (!isHistory && data.running) return '正在执行中';
|
|
else if ((data.lastStatus || data.status) == 'success') return '成功';
|
|
return (data.lastStatus || data.status);
|
|
},
|
|
requestData(url, data) {
|
|
return new Promise((resolve, reject) => {
|
|
let option = {}
|
|
if (data) {
|
|
option = {
|
|
method: 'POST',
|
|
mode: 'cors',
|
|
credentials: 'include',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify(data)
|
|
}
|
|
}
|
|
const loading = this.$loading({
|
|
lock: true,
|
|
text: '加载中',
|
|
spinner: 'el-icon-loading',
|
|
background: 'rgba(0, 0, 0, 0.7)'
|
|
});
|
|
fetch(url, option).then(response => response.json())
|
|
.then(data => {
|
|
loading.close()
|
|
if (data && data.code && data.code != 0) {
|
|
this.$message.error(data.message);
|
|
reject()
|
|
return;
|
|
}
|
|
resolve(data)
|
|
})
|
|
.catch(() => {
|
|
loading.close()
|
|
this.$message.error('加载数据失败')
|
|
reject()
|
|
})
|
|
})
|
|
},
|
|
async showProjectInfo(rowData) {
|
|
this.currentProject = rowData;
|
|
let histories = await this.requestData('./project/' + rowData.id);
|
|
this.currentHistory.list = histories;
|
|
this.historyVisible = true;
|
|
},
|
|
async handleCreate() {
|
|
let projects = await this.requestData('./project/create', this.project);
|
|
this.projects = projects;
|
|
this.project = {name: '', shell: ''};
|
|
this.dialogVisible = false;
|
|
},
|
|
getExecUrl(rowData) {
|
|
return location.href.replace(new RegExp('\\/$', 'g'), '') + '/project/hook/' + rowData.id + '?param=test';
|
|
},
|
|
execShell(rowData) {
|
|
this.$confirm('此操作会执行脚本, 是否继续?', '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
}).then(async () => {
|
|
let data = await this.requestData(this.getExecUrl(rowData));
|
|
this.$message.info(data.message);
|
|
}).catch();
|
|
},
|
|
/**
|
|
*
|
|
* @param {ProjectInfo} rowData
|
|
* @returns {Promise<void>}
|
|
*/
|
|
async editShell(item) {
|
|
// this.$message.info('开发中...')
|
|
try {
|
|
const data = await this.requestData('./project/shell/' + item.id);
|
|
this.shellModify = {
|
|
visible: true,
|
|
loading: false,
|
|
shell: data.shell,
|
|
id: item.id
|
|
}
|
|
} catch (e) {
|
|
}
|
|
|
|
},
|
|
async handleModifyShell() {
|
|
this.shellModify.loading = true;
|
|
try {
|
|
const {id, shell} = this.shellModify
|
|
const data = await this.requestData('./project/shell/' + id, {shell});
|
|
this.$message.info('保存脚本内容成功')
|
|
this.shellModify.visible = false;
|
|
} catch (e) {
|
|
} finally {
|
|
this.shellModify.loading = false
|
|
}
|
|
},
|
|
showHook(rowData) {
|
|
this.$alert(this.getExecUrl(rowData), '请自行复制一下链接', {confirmButtonText: '关闭'});
|
|
},
|
|
onPageChange(page){
|
|
this.currentHistory.page = page;
|
|
}
|
|
},
|
|
computed: {
|
|
currentHistories() {
|
|
const {list, page, size} = this.currentHistory
|
|
const _list = [];
|
|
for (let start = 0, i = (page - 1) * size; i < list.length && start < size; i++, start++) {
|
|
_list.push(list[i]);
|
|
}
|
|
return _list;
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
shellModify: {
|
|
visible: false,
|
|
shell: '',
|
|
loading: false,
|
|
id: 0,
|
|
},
|
|
dialogVisible: false,
|
|
historyVisible: false,
|
|
histories: [],
|
|
currentHistory: {
|
|
list: [],
|
|
size: 10,
|
|
page: 1
|
|
},
|
|
currentProject: {id: 0},
|
|
project: {
|
|
name: '',
|
|
shell: ''
|
|
},
|
|
projects: [],
|
|
}
|
|
}
|
|
})
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|