mirror of
https://github.com/crawlab-team/crawlab.git
synced 2026-01-29 18:00:51 +01:00
updated frontend
This commit is contained in:
marvzhang
@@ -1,165 +0,0 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<!--tour-->
|
||||
<v-tour
|
||||
name="node-detail"
|
||||
:steps="tourSteps"
|
||||
:callbacks="tourCallbacks"
|
||||
:options="$utils.tour.getOptions(true)"
|
||||
/>
|
||||
<!--./tour-->
|
||||
|
||||
<!--selector-->
|
||||
<div class="selector">
|
||||
<label class="label">{{ $t('Node') }}: </label>
|
||||
<el-select v-model="nodeForm._id" size="small" @change="onNodeChange">
|
||||
<el-option v-for="op in nodeList" :key="op._id" :value="op._id" :label="op.name" />
|
||||
</el-select>
|
||||
</div>
|
||||
|
||||
<!--tabs-->
|
||||
<el-tabs v-model="activeTabName" type="border-card" @tab-click="onTabClick">
|
||||
<el-tab-pane :label="$t('Overview')" name="overview">
|
||||
<node-overview />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="$t('Installation')" name="installation">
|
||||
<node-installation />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane v-if="false" :label="$t('Deployed Spiders')" name="spiders">
|
||||
{{ $t('Deployed Spiders') }}
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
mapState
|
||||
} from 'vuex'
|
||||
import NodeOverview from '../../components/Overview/NodeOverview'
|
||||
import NodeInstallation from '../../components/Node/NodeInstallation'
|
||||
|
||||
export default {
|
||||
name: 'NodeDetail',
|
||||
components: {
|
||||
NodeOverview,
|
||||
NodeInstallation
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeTabName: 'overview',
|
||||
tourSteps: [
|
||||
// overview
|
||||
{
|
||||
target: '.selector',
|
||||
content: this.$t('Switch between different nodes.')
|
||||
},
|
||||
{
|
||||
target: '.latest-tasks-wrapper',
|
||||
content: this.$t('You can view the latest executed spider tasks.'),
|
||||
params: {
|
||||
placement: 'right'
|
||||
}
|
||||
},
|
||||
{
|
||||
target: '.node-info-view-wrapper',
|
||||
content: this.$t('This is the detailed node info.'),
|
||||
params: {
|
||||
placement: 'left'
|
||||
}
|
||||
},
|
||||
// installation
|
||||
{
|
||||
target: '#tab-installation',
|
||||
content: this.$t('Here you can install<br> dependencies and modules<br> that are required<br> in your spiders.')
|
||||
},
|
||||
{
|
||||
target: '.search-box',
|
||||
content: this.$t('You can search dependencies in the search box and install them by clicking the "Install" button below.')
|
||||
}
|
||||
],
|
||||
tourCallbacks: {
|
||||
onStop: () => {
|
||||
this.$utils.tour.finishTour('node-detail')
|
||||
},
|
||||
onPreviousStep: (currentStep) => {
|
||||
if (currentStep === 3) {
|
||||
this.activeTabName = 'overview'
|
||||
}
|
||||
this.$utils.tour.prevStep('node-detail', currentStep)
|
||||
},
|
||||
onNextStep: (currentStep) => {
|
||||
if (currentStep === 2) {
|
||||
this.activeTabName = 'installation'
|
||||
}
|
||||
this.$utils.tour.nextStep('node-detail', currentStep)
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState('node', [
|
||||
'nodeList',
|
||||
'nodeForm'
|
||||
])
|
||||
},
|
||||
created() {
|
||||
// get list of nodes
|
||||
this.$store.dispatch('node/getNodeList')
|
||||
|
||||
// get node basic info
|
||||
this.$store.dispatch('node/getNodeData', this.$route.params.id)
|
||||
|
||||
// get node task list
|
||||
this.$store.dispatch('node/getTaskList', this.$route.params.id)
|
||||
},
|
||||
mounted() {
|
||||
if (!this.$utils.tour.isFinishedTour('node-detail')) {
|
||||
this.$utils.tour.startTour(this, 'node-detail')
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onTabClick(tab) {
|
||||
this.$st.sendEv('节点详情', '切换标签', tab.name)
|
||||
},
|
||||
onNodeChange(id) {
|
||||
this.$router.push(`/nodes/${id}`)
|
||||
this.$st.sendEv('节点详情', '切换节点')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.selector {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
right: 30px;
|
||||
margin-top: 4px;
|
||||
/*float: right;*/
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.selector .el-select {
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.label {
|
||||
color: #909399;
|
||||
font-weight: 100;
|
||||
width: 100px;
|
||||
text-align: right;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
.selector {
|
||||
.el-select {
|
||||
.el-input {
|
||||
.el-input_inner {
|
||||
height: 26px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,417 +0,0 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-dialog
|
||||
:visible.sync="isShowAddNodeInstruction"
|
||||
:title="$t('Notification')"
|
||||
width="720px"
|
||||
>
|
||||
<div
|
||||
class="content markdown-body"
|
||||
v-html="addNodeInstructionHtml"
|
||||
/>
|
||||
</el-dialog>
|
||||
|
||||
<el-tabs v-model="activeTab" type="border-card">
|
||||
<el-tab-pane :label="$t('Node List')">
|
||||
<!--filter-->
|
||||
<div class="filter-wrapper">
|
||||
<el-button
|
||||
size="small"
|
||||
type="success"
|
||||
icon="el-icon-plus"
|
||||
@click="onAddNode"
|
||||
>
|
||||
{{ $t('Add Node') }}
|
||||
</el-button>
|
||||
</div>
|
||||
<!--./filter-->
|
||||
<!--table list-->
|
||||
<el-table
|
||||
:data="filteredTableData"
|
||||
class="table"
|
||||
:header-cell-style="{background:'rgb(48, 65, 86)',color:'white'}"
|
||||
border
|
||||
@row-click="onRowClick"
|
||||
@expand-change="onRowExpand"
|
||||
>
|
||||
<el-table-column type="expand">
|
||||
<template slot-scope="scope">
|
||||
<el-form class="node-detail" :model="scope.row" label-width="120px" inline>
|
||||
<el-form-item :label="$t('OS')">
|
||||
<span>{{ scope.row.systemInfo ? getOSName(scope.row.systemInfo.os) : '' }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('ARCH')">
|
||||
<span>{{ scope.row.systemInfo ? scope.row.systemInfo.arch : '' }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('Number of CPU')">
|
||||
<span>{{ scope.row.systemInfo ? scope.row.systemInfo.num_cpu : '' }}</span>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-form class="node-detail executable" :model="scope.row" label-width="120px">
|
||||
<el-form-item :label="$t('Executables')">
|
||||
<ul v-if="true" class="executable-list">
|
||||
<li
|
||||
v-for="(ex, index) in getExecutables(scope.row)"
|
||||
:key="index"
|
||||
class="executable-item"
|
||||
>
|
||||
<el-tooltip :content="ex.path">
|
||||
<div>
|
||||
<template v-if="ex.file_name.match(/^python/)">
|
||||
<font-awesome-icon :icon="['fab','python']" />
|
||||
</template>
|
||||
<template v-else-if="ex.file_name.match(/^java/)">
|
||||
<font-awesome-icon :icon="['fab','java']" />
|
||||
</template>
|
||||
<template v-else-if="ex.file_name.match(/^bash$|^sh$/)">
|
||||
<font-awesome-icon :icon="['fab','linux']" />
|
||||
</template>
|
||||
<template v-else-if="ex.file_name.match(/^node/)">
|
||||
<font-awesome-icon :icon="['fab','node-js']" />
|
||||
</template>
|
||||
<template v-else-if="ex.file_name.match(/^php/)">
|
||||
<font-awesome-icon :icon="['fab','php']" />
|
||||
</template>
|
||||
<template v-else>
|
||||
<font-awesome-icon :icon="['fas', 'terminal']" />
|
||||
</template>
|
||||
<span class="executable-label">{{ ex.display_name }}</span>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
</li>
|
||||
</ul>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template v-for="col in columns">
|
||||
<el-table-column
|
||||
v-if="col.name === 'status'"
|
||||
:key="col.name"
|
||||
:label="$t(col.label)"
|
||||
:sortable="col.sortable"
|
||||
:width="col.width"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-tag v-if="scope.row.status === 'offline'" type="info">{{ $t('Offline') }}</el-tag>
|
||||
<el-tag v-else-if="scope.row.status === 'online'" type="success">{{ $t('Online') }}</el-tag>
|
||||
<el-tag v-else type="danger">{{ $t('Unavailable') }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
v-else-if="col.name === 'type'"
|
||||
:key="col.name"
|
||||
:label="$t(col.label)"
|
||||
:sortable="col.sortable"
|
||||
:width="col.width"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-tag v-if="scope.row.is_master" type="primary">{{ $t('Master') }}</el-tag>
|
||||
<el-tag v-else type="warning">{{ $t('Worker') }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
v-else
|
||||
:key="col.name"
|
||||
:property="col.name"
|
||||
:label="$t(col.label)"
|
||||
:sortable="col.sortable"
|
||||
:align="col.align || 'left'"
|
||||
:width="col.width"
|
||||
/>
|
||||
</template>
|
||||
<el-table-column :label="$t('Action')" align="left" width="160" fixed="right">
|
||||
<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>
|
||||
<el-tooltip :content="$t('Remove')" placement="top">
|
||||
<el-button
|
||||
v-if="scope.row.status !== 'online'"
|
||||
type="danger"
|
||||
icon="el-icon-delete"
|
||||
size="mini"
|
||||
@click="onRemove(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="nodeList.length"
|
||||
@current-change="onPageChange"
|
||||
@size-change="onPageChange"
|
||||
/>
|
||||
</div>
|
||||
<!--./table list-->
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="$t('Installation')">
|
||||
<node-installation-matrix :active-tab="activeTab" />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="$t('Network')">
|
||||
<node-network :active-tab="activeTab" />
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import showdown from 'showdown'
|
||||
import {
|
||||
mapState
|
||||
} from 'vuex'
|
||||
import 'github-markdown-css/github-markdown.css'
|
||||
import NodeNetwork from '../../components/Node/NodeNetwork'
|
||||
import NodeInstallationMatrix from '../../components/Node/NodeInstallationMatrix'
|
||||
|
||||
export default {
|
||||
name: 'NodeList',
|
||||
components: { NodeInstallationMatrix, NodeNetwork },
|
||||
data() {
|
||||
return {
|
||||
pagination: {
|
||||
pageNum: 0,
|
||||
pageSize: 10
|
||||
},
|
||||
isEditMode: false,
|
||||
dialogVisible: false,
|
||||
filter: {
|
||||
keyword: ''
|
||||
},
|
||||
// tableData,
|
||||
columns: [
|
||||
{ name: 'name', label: 'Name', width: '220' },
|
||||
{ name: 'ip', label: 'IP', width: '160' },
|
||||
{ name: 'type', label: 'nodeList.type', width: '120' },
|
||||
// { name: 'port', label: 'Port', width: '80' },
|
||||
{ name: 'status', label: 'Status', width: '120' },
|
||||
{ name: 'description', label: 'Description', width: 'auto' }
|
||||
],
|
||||
nodeFormRules: {
|
||||
name: [{ required: true, message: 'Required Field', trigger: 'change' }]
|
||||
},
|
||||
activeTab: undefined,
|
||||
isButtonClicked: false,
|
||||
isShowAddNodeInstruction: false,
|
||||
converter: new showdown.Converter(),
|
||||
addNodeInstructionMarkdown: 'addNodeInstruction'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState('node', [
|
||||
'nodeList',
|
||||
'nodeForm'
|
||||
]),
|
||||
filteredTableData() {
|
||||
return this.nodeList.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
|
||||
})
|
||||
},
|
||||
addNodeInstructionHtml() {
|
||||
if (!this.converter) return
|
||||
return this.converter.makeHtml(this.$t(this.addNodeInstructionMarkdown))
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.$store.dispatch('node/getNodeList')
|
||||
},
|
||||
methods: {
|
||||
onSearch() {
|
||||
},
|
||||
onAddNode() {
|
||||
this.isShowAddNodeInstruction = true
|
||||
},
|
||||
// onAdd () {
|
||||
// this.$store.commit('node/SET_NODE_FORM', [])
|
||||
// this.isEditMode = false
|
||||
// this.dialogVisible = true
|
||||
// },
|
||||
onRefresh() {
|
||||
this.$store.dispatch('node/getNodeList')
|
||||
this.$st.sendEv('节点列表', '刷新')
|
||||
},
|
||||
onSubmit() {
|
||||
const vm = this
|
||||
const formName = 'nodeForm'
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
if (this.isEditMode) {
|
||||
vm.$store.dispatch('node/editNode')
|
||||
} else {
|
||||
vm.$store.dispatch('node/addNode')
|
||||
}
|
||||
vm.dialogVisible = false
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
onCancel() {
|
||||
this.$store.commit('node/SET_NODE_FORM', {})
|
||||
this.dialogVisible = false
|
||||
},
|
||||
onDialogClose() {
|
||||
this.$store.commit('node/SET_NODE_FORM', {})
|
||||
this.dialogVisible = false
|
||||
},
|
||||
onEdit(row) {
|
||||
this.isEditMode = true
|
||||
this.$store.commit('node/SET_NODE_FORM', row)
|
||||
this.dialogVisible = true
|
||||
},
|
||||
onRemove(row) {
|
||||
this.isButtonClicked = true
|
||||
setTimeout(() => {
|
||||
this.isButtonClicked = false
|
||||
}, 100)
|
||||
|
||||
this.$confirm(this.$t('Are you sure to delete this node?'), this.$t('Notification'), {
|
||||
confirmButtonText: this.$t('Confirm'),
|
||||
cancelButtonText: this.$t('Cancel'),
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.$store.dispatch('node/deleteNode', row._id)
|
||||
.then(() => {
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: 'Deleted successfully'
|
||||
})
|
||||
})
|
||||
this.$st.sendEv('节点列表', '删除节点')
|
||||
})
|
||||
},
|
||||
onView(row) {
|
||||
this.isButtonClicked = true
|
||||
setTimeout(() => {
|
||||
this.isButtonClicked = false
|
||||
}, 100)
|
||||
|
||||
this.$router.push(`/nodes/${row._id}`)
|
||||
|
||||
this.$st.sendEv('节点列表', '查看节点')
|
||||
},
|
||||
onPageChange() {
|
||||
this.$store.dispatch('node/getNodeList')
|
||||
},
|
||||
onRowExpand(row) {
|
||||
this.$store.dispatch('node/getNodeSystemInfo', row._id)
|
||||
},
|
||||
onRowClick(row) {
|
||||
if (this.isButtonClicked) return
|
||||
this.onView(row)
|
||||
},
|
||||
getExecutables(row) {
|
||||
if (!row.systemInfo || !row.systemInfo.executables) return []
|
||||
return row.systemInfo.executables
|
||||
},
|
||||
getOSName(os) {
|
||||
if (os === 'linux') {
|
||||
return 'Linux'
|
||||
} else if (os === 'windows') {
|
||||
return 'Windows'
|
||||
} else if (os === 'darwin') {
|
||||
return 'Mac OS (darwin)'
|
||||
} else {
|
||||
return os
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</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;
|
||||
}
|
||||
|
||||
.filter-wrapper {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.content {
|
||||
word-break: break-word;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.node-detail .el-form-item {
|
||||
height: 25px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.node-detail .el-form-item .el-form-item__label {
|
||||
line-height: 25px;
|
||||
height: 25px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.node-detail .el-form-item .el-form-item__content {
|
||||
line-height: 25px;
|
||||
height: 25px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.node-detail.executable .el-form-item,
|
||||
.node-detail.executable .el-form-item .el-form-item__label,
|
||||
.node-detail.executable .el-form-item .el-form-item__content {
|
||||
line-height: 25px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.node-detail .executable-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.node-detail .executable-list .executable-item {
|
||||
margin-right: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.node-detail .executable-list .executable-item:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.node-detail .executable-list .executable-label {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.table.el-table tr {
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
21
frontend/src/views/node/detail/NodeDetail.vue
Normal file
21
frontend/src/views/node/detail/NodeDetail.vue
Normal file
@@ -0,0 +1,21 @@
|
||||
<template>
|
||||
<DetailLayout store-namespace="node">
|
||||
</DetailLayout>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import {defineComponent} from 'vue';
|
||||
import DetailLayout from '@/layouts/DetailLayout.vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'NodeDetail',
|
||||
components: {DetailLayout},
|
||||
setup(props, {emit}) {
|
||||
return {};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,24 @@
|
||||
<template>
|
||||
<div class="node-detail-tab-overview">
|
||||
<NodeForm readonly/>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import {defineComponent} from 'vue';
|
||||
import NodeForm from '@/components/node/NodeForm.vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'NodeDetailTabOverview',
|
||||
components: {
|
||||
NodeForm,
|
||||
},
|
||||
setup() {
|
||||
return {};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.node-detail-tab-overview {
|
||||
margin: 20px;
|
||||
}
|
||||
</style>
|
||||
56
frontend/src/views/node/detail/tabs/NodeDetailTabTasks.vue
Normal file
56
frontend/src/views/node/detail/tabs/NodeDetailTabTasks.vue
Normal file
@@ -0,0 +1,56 @@
|
||||
<template>
|
||||
<div class="node-detail-tab-tasks">
|
||||
<TaskList no-actions/>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import {computed, defineComponent, onBeforeMount, onBeforeUnmount} from 'vue';
|
||||
import TaskList from '@/views/task/list/TaskList.vue';
|
||||
import {useStore} from 'vuex';
|
||||
import {useRoute} from 'vue-router';
|
||||
import {FILTER_OP_EQUAL} from '@/constants/filter';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'NodeDetailTabTasks',
|
||||
components: {
|
||||
TaskList
|
||||
},
|
||||
setup() {
|
||||
// route
|
||||
const route = useRoute();
|
||||
|
||||
// store
|
||||
const store = useStore();
|
||||
|
||||
// id
|
||||
const id = computed<string>(() => route.params.id as string);
|
||||
|
||||
onBeforeMount(() => {
|
||||
// set filter
|
||||
store.commit(`task/setTableListFilter`, [{
|
||||
key: 'node_id',
|
||||
op: FILTER_OP_EQUAL,
|
||||
value: id.value,
|
||||
}]);
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
store.commit(`task/resetTableListFilter`);
|
||||
store.commit(`task/resetTableData`);
|
||||
});
|
||||
|
||||
return {};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.node-detail-tab-overview {
|
||||
margin: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
.node-detail-tab-tasks >>> .el-table {
|
||||
border: none;
|
||||
}
|
||||
</style>
|
||||
41
frontend/src/views/node/list/NodeList.vue
Normal file
41
frontend/src/views/node/list/NodeList.vue
Normal file
@@ -0,0 +1,41 @@
|
||||
<template>
|
||||
<ListLayout
|
||||
:action-functions="actionFunctions"
|
||||
:nav-actions="navActions"
|
||||
:pagination="tablePagination"
|
||||
:table-columns="tableColumns"
|
||||
:table-data="tableData"
|
||||
:table-total="tableTotal"
|
||||
class="node-list"
|
||||
>
|
||||
<template #extra>
|
||||
<!-- Dialogs (handled by store) -->
|
||||
<CreateEditNodeDialog/>
|
||||
<!-- ./Dialogs -->
|
||||
</template>
|
||||
</ListLayout>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import {defineComponent} from 'vue';
|
||||
import ListLayout from '@/layouts/ListLayout.vue';
|
||||
import useNodeList from '@/views/node/list/nodeList';
|
||||
import CreateEditNodeDialog from '@/components/node/CreateEditNodeDialog.vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'NodeList',
|
||||
components: {
|
||||
ListLayout,
|
||||
CreateEditNodeDialog,
|
||||
},
|
||||
setup() {
|
||||
return {
|
||||
...useNodeList(),
|
||||
};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
230
frontend/src/views/node/list/nodeList.ts
Normal file
230
frontend/src/views/node/list/nodeList.ts
Normal file
@@ -0,0 +1,230 @@
|
||||
import useList from '@/layouts/list';
|
||||
import {useStore} from 'vuex';
|
||||
import {getDefaultUseListOptions, setupListComponent} from '@/utils/list';
|
||||
import {computed, h} from 'vue';
|
||||
import NodeType from '@/components/node/NodeType.vue';
|
||||
import {TABLE_COLUMN_NAME_ACTIONS} from '@/constants/table';
|
||||
import {ElMessageBox} from 'element-plus';
|
||||
import useNodeService from '@/services/node/nodeService';
|
||||
import NavLink from '@/components/nav/NavLink.vue';
|
||||
import TagList from '@/components/tag/TagList.vue';
|
||||
import {useRouter} from 'vue-router';
|
||||
import NodeRunners from '@/components/node/NodeRunners.vue';
|
||||
import Switch from '@/components/switch/Switch.vue';
|
||||
import NodeStatus from '@/components/node/NodeStatus.vue';
|
||||
import {
|
||||
NODE_STATUS_OFFLINE,
|
||||
NODE_STATUS_ONLINE,
|
||||
NODE_STATUS_REGISTERED,
|
||||
NODE_STATUS_UNREGISTERED
|
||||
} from '@/constants/node';
|
||||
|
||||
type Node = CNode;
|
||||
|
||||
const useNodeList = () => {
|
||||
// router
|
||||
const router = useRouter();
|
||||
|
||||
// store
|
||||
const ns = 'node';
|
||||
const store = useStore<RootStoreState>();
|
||||
const {commit} = store;
|
||||
|
||||
// services
|
||||
const {
|
||||
getList,
|
||||
deleteById,
|
||||
} = useNodeService(store);
|
||||
|
||||
// nav actions
|
||||
const navActions = computed<ListActionGroup[]>(() => [
|
||||
{
|
||||
name: 'common',
|
||||
children: [
|
||||
{
|
||||
buttonType: 'label',
|
||||
label: 'New Node',
|
||||
tooltip: 'New Node',
|
||||
icon: ['fa', 'plus'],
|
||||
type: 'success',
|
||||
onClick: () => {
|
||||
commit(`${ns}/showDialog`, 'create');
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]);
|
||||
|
||||
// table columns
|
||||
const tableColumns = computed<TableColumns<Node>>(() => [
|
||||
{
|
||||
key: 'n', // name
|
||||
label: 'Name',
|
||||
icon: ['fa', 'font'],
|
||||
width: '150',
|
||||
value: (row: Node) => h(NavLink, {
|
||||
path: `/nodes/${row._id}`,
|
||||
label: row.name,
|
||||
}),
|
||||
hasSort: true,
|
||||
hasFilter: true,
|
||||
allowFilterSearch: true,
|
||||
},
|
||||
{
|
||||
key: 'im', // is_master
|
||||
label: 'Node Type',
|
||||
icon: ['fa', 'list'],
|
||||
width: '150',
|
||||
value: (row: Node) => {
|
||||
return h(NodeType, {isMaster: row.is_master} as NodeTypeProps);
|
||||
},
|
||||
hasFilter: true,
|
||||
allowFilterItems: true,
|
||||
filterItems: [
|
||||
{label: 'Master', value: true},
|
||||
{label: 'Worker', value: false},
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 's', // status
|
||||
label: 'Status',
|
||||
icon: ['fa', 'heartbeat'],
|
||||
width: '150',
|
||||
value: (row: Node) => {
|
||||
return h(NodeStatus, {status: row.status} as NodeStatusProps);
|
||||
},
|
||||
hasFilter: true,
|
||||
allowFilterItems: true,
|
||||
filterItems: [
|
||||
{label: 'Unregistered', value: NODE_STATUS_UNREGISTERED},
|
||||
{label: 'Registered', value: NODE_STATUS_REGISTERED},
|
||||
{label: 'Online', value: NODE_STATUS_ONLINE},
|
||||
{label: 'Offline', value: NODE_STATUS_OFFLINE},
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 'ip',
|
||||
label: 'IP',
|
||||
icon: ['fa', 'map-marker-alt'],
|
||||
width: '150',
|
||||
defaultHidden: true,
|
||||
},
|
||||
{
|
||||
key: 'mac',
|
||||
label: 'MAC Address',
|
||||
icon: ['fa', 'map-marker-alt'],
|
||||
width: '150',
|
||||
defaultHidden: true,
|
||||
},
|
||||
{
|
||||
key: 'hostname',
|
||||
label: 'Hostname',
|
||||
icon: ['fa', 'map-marker-alt'],
|
||||
width: '150',
|
||||
defaultHidden: true,
|
||||
},
|
||||
{
|
||||
key: 'runners',
|
||||
label: 'Runners',
|
||||
icon: ['fa', 'play'],
|
||||
width: '160',
|
||||
value: (row: Node) => {
|
||||
if (row.max_runners === undefined ||
|
||||
!row.status ||
|
||||
![NODE_STATUS_ONLINE, NODE_STATUS_OFFLINE].includes(row.status)
|
||||
) return;
|
||||
return h(NodeRunners, {available: row.available_runners, max: row.max_runners} as NodeRunnersProps);
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'en', // enabled
|
||||
label: 'Enabled',
|
||||
icon: ['fa', 'toggle-on'],
|
||||
width: '120',
|
||||
value: (row: Node) => {
|
||||
return h(Switch, {
|
||||
modelValue: row.enabled,
|
||||
'onUpdate:modelValue': async (value: boolean) => {
|
||||
row.enabled = value;
|
||||
await store.dispatch(`${ns}/updateById`, {id: row._id, form: row});
|
||||
},
|
||||
} as SwitchProps);
|
||||
},
|
||||
hasFilter: true,
|
||||
allowFilterItems: true,
|
||||
filterItems: [
|
||||
{label: 'Enabled', value: true},
|
||||
{label: 'Disabled', value: false},
|
||||
]
|
||||
},
|
||||
{
|
||||
key: 'tags',
|
||||
label: 'Tags',
|
||||
icon: ['fa', 'hashtag'],
|
||||
value: ({tags}: Node) => {
|
||||
return h(TagList, {tags});
|
||||
},
|
||||
width: '150',
|
||||
},
|
||||
{
|
||||
key: 'description',
|
||||
label: 'Description',
|
||||
icon: ['fa', 'comment-alt'],
|
||||
width: 'auto',
|
||||
hasFilter: true,
|
||||
allowFilterSearch: true,
|
||||
},
|
||||
{
|
||||
key: TABLE_COLUMN_NAME_ACTIONS,
|
||||
label: 'Actions',
|
||||
fixed: 'right',
|
||||
width: '200',
|
||||
buttons: [
|
||||
{
|
||||
type: 'primary',
|
||||
icon: ['fa', 'search'],
|
||||
tooltip: 'View',
|
||||
onClick: (row) => {
|
||||
router.push(`/nodes/${row._id}`);
|
||||
},
|
||||
},
|
||||
// {
|
||||
// type: 'info',
|
||||
// size: 'mini',
|
||||
// icon: ['fa', 'clone'],
|
||||
// tooltip: 'Clone',
|
||||
// onClick: (row) => {
|
||||
// console.log('clone', row);
|
||||
// }
|
||||
// },
|
||||
{
|
||||
type: 'danger',
|
||||
size: 'mini',
|
||||
icon: ['fa', 'trash-alt'],
|
||||
tooltip: 'Delete',
|
||||
disabled: (row: Node) => !!row.active,
|
||||
onClick: async (row: Node) => {
|
||||
const res = await ElMessageBox.confirm('Are you sure to delete?', 'Delete');
|
||||
if (res) {
|
||||
await deleteById(row._id as string);
|
||||
}
|
||||
await getList();
|
||||
},
|
||||
},
|
||||
],
|
||||
disableTransfer: true,
|
||||
}
|
||||
]);
|
||||
|
||||
// options
|
||||
const opts = getDefaultUseListOptions<Node>(navActions, tableColumns);
|
||||
|
||||
// init
|
||||
setupListComponent(ns, store, []);
|
||||
|
||||
return {
|
||||
...useList<Node>(ns, store, opts)
|
||||
};
|
||||
};
|
||||
|
||||
export default useNodeList;
|
||||
Reference in New Issue
Block a user