git-sync/crawlab
1
0
Fork 0
mirror of https://github.com/crawlab-team/crawlab.git synced 2026-01-22 17:31:03 +01:00
Code Issues Packages Projects Releases Wiki Activity

code cleanup

Browse Source
This commit is contained in:
marvzhang
2020-07-15 11:17:07 +08:00
parent a3d82c40c0
commit 061fed4bbd
10 changed files with 33 additions and 405 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/src/App.vue
View File

@@ -1,6 +1,5 @@
<template>
<div id="app">
<dialog-view />
<router-view />
</div>
</template>
@@ -9,14 +8,10 @@
import {
mapState
} from 'vuex'
import DialogView from './components/Common/DialogView'
import { getToken } from '@/utils/auth'
export default {
name: 'App',
components: {
DialogView
},
data() {
return {
msgPopup: undefined

2
frontend/src/api/request.js
View File

@@ -16,7 +16,7 @@ const put = (path, data) => {
const del = (path, data) => {
return service.delete(path, {
params: data
data
})
}
const request = service.request

164
frontend/src/components/Common/DialogView.vue
View File

@@ -1,164 +0,0 @@
<template>
<div class="dialog-view">
<el-dialog
class="deploy-dialog"
:title="title"
:visible.sync="dialogVisible"
width="40%"
>
<!--message-->
<label>{{ message }}</label>
<!--selection for node-->
<el-select v-if="type === 'node'" v-model="activeSpider._id">
<el-option v-for="op in spiderList" :key="op._id" :value="op._id" :label="op.name" />
</el-select>
<!--selection for spider-->
<el-select v-else-if="type === 'spider'" v-model="activeNode._id">
<el-option v-for="op in nodeList" :key="op._id" :value="op._id" :label="op.name" />
</el-select>
<!--action buttons-->
<span slot="footer" class="dialog-footer">
<el-button @click="onCancel">Cancel</el-button>
<el-button type="danger" @click="onConfirm">Confirm</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import {
mapState
} from 'vuex'
export default {
name: 'DialogView',
computed: {
...mapState('spider', [
'spiderList',
'spiderForm'
]),
...mapState('node', [
'nodeList'
]),
...mapState('dialogView', [
'dialogType'
]),
type() {
if (this.dialogType === 'nodeDeploy') {
return 'node'
} else if (this.dialogType === 'nodeRun') {
return 'node'
} else if (this.dialogType === 'spiderDeploy') {
return 'spider'
} else if (this.dialogType === 'spiderRun') {
return 'spider'
} else {
return ''
}
},
activeNode: {
get() {
return this.$store.state.spider.activeNode
},
set() {
this.$store.commit('spider/SET_ACTIVE_NODE')
}
},
activeSpider: {
get() {
return this.$store.state.node.activeSpider
},
set() {
this.$store.commit('node/SET_ACTIVE_SPIDER')
}
},
dialogVisible: {
get() {
return this.$store.state.dialogView.dialogVisible
},
set(value) {
this.$store.commit('dialogView/SET_DIALOG_VISIBLE', value)
}
},
title() {
if (this.dialogType === 'nodeDeploy') {
return 'Deploy'
} else if (this.dialogType === 'nodeRun') {
return 'Run'
} else if (this.dialogType === 'spiderDeploy') {
return 'Deploy'
} else if (this.dialogType === 'spiderRun') {
return 'Run'
} else {
return ''
}
},
message() {
if (this.dialogType === 'nodeDeploy') {
return 'Please select spider you would like to deploy'
} else if (this.dialogType === 'nodeRun') {
return 'Please select spider you would like to run'
} else if (this.dialogType === 'spiderDeploy') {
return 'Please select node you would like to deploy'
} else if (this.dialogType === 'spiderRun') {
return 'Please select node you would like to run'
} else {
return ''
}
}
},
mounted() {
// if (!this.spiderList || !this.spiderList.length) this.$store.dispatch('spider/getSpiderList')
if (!this.nodeList || !this.nodeList.length) this.$store.dispatch('node/getNodeList')
},
methods: {
onCancel() {
this.$store.commit('dialogView/SET_DIALOG_VISIBLE', false)
},
onConfirm() {
if (this.dialogType === 'nodeDeploy') {
return
} else if (this.dialogType === 'nodeRun') {
return
} else if (this.dialogType === 'spiderDeploy') {
this.$store.dispatch('spider/deploySpider', {
id: this.spiderForm._id,
nodeId: this.activeNode._id
})
.then(() => {
this.$message.success(`Spider "${this.spiderForm.name}" has been deployed on node "${this.activeNode._id}" successfully`)
})
.finally(() => {
// get spider deploys
this.$store.dispatch('spider/getDeployList', this.$route.params.id)
// close dialog
this.$store.commit('dialogView/SET_DIALOG_VISIBLE', false)
})
} else if (this.dialogType === 'spiderRun') {
this.$store.dispatch('spider/crawlSpider', this.spiderForm._id)
.then(() => {
this.$message.success(`Spider "${this.spiderForm.name}" started to run on node "${this.activeNode._id}"`)
})
.finally(() => {
// get spider tasks
setTimeout(() => {
this.$store.dispatch('spider/getTaskList', this.$route.params.id)
}, 500)
// close dialog
this.$store.commit('dialogView/SET_DIALOG_VISIBLE', false)
})
}
}
}
}
</script>
<style scoped>
</style>

12
frontend/src/store/modules/spider.js
View File

@@ -4,6 +4,7 @@ import request from '../../api/request'
const state = {
// list of spiders
spiderList: [],
allSpiderList: [],
spiderTotal: 0,
@@ -71,6 +72,9 @@ const mutations = {
SET_SPIDER_LIST(state, value) {
state.spiderList = value
},
SET_ALL_SPIDER_LIST(state, value) {
state.allSpiderList = value
},
SET_ACTIVE_NODE(state, value) {
state.activeNode = value
},
@@ -135,6 +139,14 @@ const actions = {
commit('SET_SPIDER_TOTAL', response.data.data.total)
})
},
getAllSpiderList({ state, commit }, params = {}) {
params.page_num = 1
params.page_size = 99999999
return request.get('/spiders', params)
.then(response => {
commit('SET_ALL_SPIDER_LIST', response.data.data.list)
})
},
editSpider({ state, dispatch }) {
return request.post(`/spiders/${state.spiderForm._id}`, state.spiderForm)
},

15
frontend/src/views/deploy/DeployDetail.vue
View File

@@ -1,15 +0,0 @@
<template>
<div class="">
NodeDetail
</div>
</template>
<script>
export default {
name: 'NodeDetail'
}
</script>
<style scoped>
</style>

197
frontend/src/views/deploy/DeployList.vue
View File

@@ -1,197 +0,0 @@
<template>
<div class="app-container">
<!--filter-->
<div class="filter">
<el-input
v-model="filter.keyword"
prefix-icon="el-icon-search"
:placeholder="$t('Search')"
class="filter-search"
@change="onSearch"
/>
<div class="right">
<el-button
type="success"
icon="el-icon-refresh"
class="refresh"
@click="onRefresh"
>
{{ $t('Refresh') }}
</el-button>
</div>
</div>
<!--table list-->
<el-table
:data="filteredTableData"
class="table"
:header-cell-style="{background:'rgb(48, 65, 86)',color:'white'}"
border
>
<template v-for="col in columns">
<el-table-column
v-if="col.name === 'spider_name'"
:key="col.name"
:label="$t(col.label)"
:sortable="col.sortable"
align="center"
:width="col.width"
>
<template slot-scope="scope">
<a class="a-tag" href="javascript:" @click="onClickSpider(scope.row)">{{ scope.row[col.name] }}</a>
</template>
</el-table-column>
<el-table-column
v-else-if="col.name === 'node_id'"
:key="col.name"
:label="$t(col.label)"
:sortable="col.sortable"
align="center"
:width="col.width"
>
<template slot-scope="scope">
<a class="a-tag" href="javascript:" @click="onClickNode(scope.row)">{{ scope.row[col.name] }}</a>
</template>
</el-table-column>
<el-table-column
v-else
:key="col.name"
:property="col.name"
:label="$t(col.label)"
:sortable="col.sortable"
align="center"
:width="col.width"
/>
</template>
<el-table-column :label="$t('Action')" align="center" width="160">
<template slot-scope="scope">
<el-tooltip :content="$t('View')" placement="top">
<el-button type="primary" icon="el-icon-search" size="mini" @click="onView(scope.row)" />
</el-tooltip>
</template>
</el-table-column>
</el-table>
<div class="pagination">
<el-pagination
:current-page.sync="pagination.pageNum"
:page-sizes="[10, 20, 50, 100]"
:page-size.sync="pagination.pageSize"
layout="sizes, prev, pager, next"
:total="deployList.length"
@current-change="onPageChange"
@size-change="onPageChange"
/>
</div>
</div>
</template>
<script>
import {
mapState
} from 'vuex'
export default {
name: 'DeployList',
data() {
return {
pagination: {
pageNum: 0,
pageSize: 10
},
filter: {
keyword: ''
},
// tableData,
columns: [
// { name: 'version', label: 'Version', width: '180' },
// { name: 'ip', label: 'IP', width: '160' },
// { name: 'port', label: 'Port', width: '80' },
{ name: 'finish_ts', label: 'Time', width: '180' },
{ name: 'spider_name', label: 'Spider', width: '180', sortable: true },
{ name: 'node_id', label: 'Node', width: 'auto' }
],
nodeFormRules: {
name: [{ required: true, message: 'Required Field', trigger: 'change' }]
}
}
},
computed: {
...mapState('deploy', [
'deployList',
'deployForm'
]),
filteredTableData() {
return this.deployList.filter(d => {
if (!this.filter.keyword) return true
for (let i = 0; i < this.columns.length; i++) {
const colName = this.columns[i].name
if (d[colName] && d[colName].toLowerCase().indexOf(this.filter.keyword.toLowerCase()) > -1) {
return true
}
}
return false
})
.filter((d, index) => {
// pagination
const { pageNum, pageSize } = this.pagination
return (pageSize * (pageNum - 1) <= index) && (index < pageSize * pageNum)
})
}
},
created() {
this.$store.dispatch('deploy/getDeployList')
},
methods: {
onSearch(value) {
console.log(value)
},
onRefresh() {
this.$store.dispatch('deploy/getDeployList')
this.$st.sendEv('部署', '刷新')
},
onView(row) {
this.$router.push(`/deploys/${row._id}`)
},
onClickSpider(row) {
this.$router.push(`/spiders/${row.spider_id}`)
},
onClickNode(row) {
this.$router.push(`/nodes/${row.node_id}`)
},
onPageChange() {
this.$store.dispatch('deploy/getDeployList')
}
}
}
</script>
<style scoped lang="scss">
.filter {
display: flex;
justify-content: space-between;
.filter-search {
width: 240px;
}
.add {
}
}
.table {
margin-top: 20px;
border-radius: 5px;
}
.delete-confirm {
background-color: red;
}
.el-table .el-button {
padding: 7px;
}
.el-table .a-tag {
text-decoration: underline;
}
</style>

17
frontend/src/views/schedule/ScheduleList.vue
View File

@@ -68,7 +68,7 @@
@change="onSpiderChange"
>
<el-option
v-for="op in spiderList"
v-for="op in allSpiderList"
:key="op._id"
:value="op._id"
:label="`${op.display_name} (${op.name})`"
@@ -84,7 +84,7 @@
:disabled="isDisabledSpiderSchedule"
>
<el-option
v-for="op in spiderList"
v-for="op in allSpiderList"
:key="op._id"
:value="op._id"
:label="`${op.display_name} (${op.name})`"
@@ -368,7 +368,6 @@
dialogVisible: false,
cronDialogVisible: false,
expression: '',
spiderList: [],
nodeList: [],
isShowCron: false,
isLoading: false,
@@ -496,6 +495,7 @@
},
computed: {
...mapState('spider', [
'allSpiderList',
'spiderForm'
]),
...mapState('schedule', [
@@ -512,9 +512,9 @@
return this.scheduleList
},
spider() {
for (let i = 0; i < this.spiderList.length; i++) {
if (this.spiderList[i]._id === this.scheduleForm.spider_id) {
return this.spiderList[i]
for (let i = 0; i < this.allSpiderList.length; i++) {
if (this.allSpiderList[i]._id === this.scheduleForm.spider_id) {
return this.allSpiderList[i]
}
}
return {}
@@ -540,10 +540,7 @@
})
// 爬虫列表
request.get('/spiders', { owner_type: 'all' })
.then(response => {
this.spiderList = response.data.data.list || []
})
this.$store.dispatch('spider/getAllSpiderList')
},
mounted() {
if (!this.isDisabledSpiderSchedule) {

6
frontend/src/views/spider/SpiderDetail.vue
View File

@@ -13,7 +13,7 @@
<div class="selector">
<label class="label">{{ $t('Spider') }}: </label>
<el-select id="spider-select" v-model="spiderForm._id" @change="onSpiderChange">
<el-option v-for="op in spiderList" :key="op._id" :value="op._id" :label="op.name" />
<el-option v-for="op in allSpiderList" :key="op._id" :value="op._id" :label="op.name" />
</el-select>
</div>
@@ -167,10 +167,10 @@
redirectType: ''
}
},
computed: {
...mapState('spider', [
'spiderList',
'allSpiderList',
'spiderForm',
'configListTs'
]),
@@ -209,7 +209,7 @@
await this.$store.dispatch('spider/getTaskList', this.$route.params.id)
// get spider list
await this.$store.dispatch('spider/getSpiderList', { owner_type: 'all' })
await this.$store.dispatch('spider/getAllSpiderList', { owner_type: 'all' })
},
mounted() {
if (!this.$utils.tour.isFinishedTour('spider-detail')) {

14
frontend/src/views/spider/SpiderSchedules.vue
View File

@@ -1,10 +1,16 @@
<script>
import {
mapState
} from 'vuex'
import ScheduleList from '../schedule/ScheduleList'
export default {
name: 'SpiderSchedules',
extends: ScheduleList,
computed: {
...mapState('spider', [
'allSpiderList'
]),
isDisabledSpiderSchedule() {
return true
},
@@ -22,7 +28,7 @@
this.getNodeList()
// 爬虫列表
this.getSpiderList()
this.$store.dispatch('spider/getAllSpiderList')
},
methods: {
getNodeList() {
@@ -38,12 +44,6 @@
})
})
},
getSpiderList() {
this.$request.get('/spiders', {})
.then(response => {
this.spiderList = response.data.data.list || []
})
},
onAdd() {
this.isEdit = false
this.dialogVisible = true

6
frontend/src/views/task/TaskList.vue
View File

@@ -29,7 +29,7 @@
@change="onFilterChange"
>
<el-option value="" :label="$t('All')" />
<el-option v-for="spider in spiderList" :key="spider._id" :value="spider._id" :label="spider.name" />
<el-option v-for="spider in allSpiderList" :key="spider._id" :value="spider._id" :label="spider.name" />
</el-select>
</el-form-item>
<el-form-item prop="status" :label="$t('Status')">
@@ -310,7 +310,7 @@
'taskForm'
]),
...mapState('spider', [
'spiderList'
'allSpiderList'
]),
...mapState('node', [
'nodeList'
@@ -350,7 +350,7 @@
},
created() {
this.$store.dispatch('task/getTaskList')
this.$store.dispatch('spider/getSpiderList')
this.$store.dispatch('spider/getAllSpiderList')
this.$store.dispatch('node/getNodeList')
},
mounted() {