devad
/
JCC-RIP
forked from JointCloud/JCC-RIP
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改虚拟机卷显示

This commit is contained in:
lirui 2021-08-10 22:57:57 +08:00
parent c59e4e2348
commit e8fe967f44
14 changed files with 428 additions and 252 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/api/one-class-page/virtualMachine.js
View File

@ -185,3 +185,11 @@ export function virtualMachineACtion(name, action) {
data: {}
})
}
export function hostACtion(name, action) {
return request({
url: '/v1/nodes/' + name + '?action=' + action,
method: 'post',
data: {}
})
}

2
src/utils/get-Kube-List.js
View File

@ -269,7 +269,7 @@ const getSystemProjectList = (clusterName, params) => {
}
// TODO: 主机详情页面的虚拟机列表
const getHostVirtualMachineList = (clusterName, params) => {
return new Promise()
return new Promise(function(resolve) {})
}
const getVirtualMachineList = (clusterName, params) => {
return new Promise(function(resolve) {

10
src/views/virtualMachine/hostConfig.vue
View File

@ -127,7 +127,11 @@ export default {
},
mounted() {
if (this.$route.query.disableConfig != null && typeof (this.$route.query.disableConfig) !== 'undefined') {
this.disableConfig = this.$route.query.disableConfig
if (this.$route.query.disableConfig === 'true') {
this.disableConfig = true
} else {
this.disableConfig = false
}
}
getHostYaml(this.$route.query.name).then(res => {
this.formData.name = res.metadata.name
@ -153,7 +157,9 @@ export default {
this.vlanData.spec.type = this.formData.type
this.vlanData.spec.nic = this.formData.physicalNIC
putHostYaml(this.formData.name, this.yamlData).then(res => {
this.$notify({
message: '成功'
})
})
putHostNetwork(this.formData.name, this.vlanData).then(res => {

37
src/views/virtualMachine/virtualHost.vue
View File

@ -17,12 +17,23 @@
tooltip-effect="dark"
/>
</el-card>
<el-dialog
title="开启节点维护模式"
:visible.sync="maintainDialogVisible"
width="30%"
>
<p>注意!此操作会迁移当前节点上的所有虚拟机!</p>
<span slot="footer" class="dialog-footer">
<el-button @click="maintainDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="maintainEnable()">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import List from '@/components/list'
import { getHostYaml } from '@/api/one-class-page/virtualMachine'
import { getHostYaml, hostACtion } from '@/api/one-class-page/virtualMachine'
export default {
components: { List },
@ -30,13 +41,11 @@ export default {
return {
timer: null,
timeInterval: 10000,
maintainName: '',
maintainDialogVisible: false,
filterMap: {
name: {
label: '名称'
},
project: {
label: '项目',
type: 'select'
}
},
columns: [
@ -54,6 +63,7 @@ export default {
</el-button>
<el-dropdown-menu slot='dropdown'>
<span onClick={() => this.clickOption(row, 1)}> <el-dropdown-item> 开启维护模式 </el-dropdown-item> </span>
<span onClick={() => this.clickOption(row, 6)}> <el-dropdown-item> 关闭维护模式 </el-dropdown-item> </span>
<span onClick={() => this.clickOption(row, 2)}> <el-dropdown-item> 编辑设置 </el-dropdown-item> </span>
<span onClick={() => this.clickOption(row, 3)}> <el-dropdown-item> 编辑YAML </el-dropdown-item> </span>
<span onClick={() => this.clickOption(row, 4)}> <el-dropdown-item> 下载YAML </el-dropdown-item> </span>
@ -85,9 +95,26 @@ export default {
console.log(row)
this.$router.push({ path: `host/detail`, query: row })
},
maintainEnable() {
this.maintainDialogVisible = false
hostACtion(this.maintainName, 'enableMaintenanceMode').then(res => {
alert('成功')
})
},
maintainDisable() {
hostACtion(this.maintainName, 'disableMaintenanceMode').then(res => {
alert('成功')
})
},
clickOption(row, command) {
switch (command) {
case 1:
this.maintainDialogVisible = true
this.maintainName = row.name
break
case 6:
this.maintainName = row.name
this.maintainDisable()
break
case 2:
row.disableConfig = false

11
src/views/virtualMachine/virtualMachine.vue
View File

@ -41,8 +41,8 @@
<el-checkbox label="复选框 C" />
</el-checkbox-group>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
<el-button @click="deleteDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="deleteDialogVisible = false">确 定</el-button>
</span>
</el-dialog>
</div>
@ -64,10 +64,6 @@ export default {
filterMap: {
name: {
label: '名称'
},
project: {
label: '项目',
type: 'select'
}
},
columns: [
@ -140,11 +136,12 @@ export default {
clickOption(row, command) {
switch (command) {
case 1:
alert('hha')
virtualMachineACtion(row.name, 'stop').then(res => {})
row.state = 'Off'
break
case 2:
virtualMachineACtion(row.name, 'start').then(res => {})
row.state = 'Starting'
break
case 9:
this.deleteName = row.name

101
src/views/virtualMachine/virtualMachineConfig.vue
View File

@ -44,7 +44,7 @@
</el-tab-pane>
<el-tab-pane label="卷">
<h4>卷</h4>
<component :is="item" v-for="(item, index) in allComponents" :key="index" :index="index" :disable-config="disableConfig" @delete="deletePanel" />
<component :is="item" v-for="(item, index) in allComponents" :key="index" :index="index" :disable-config="disableConfig" :child-list="childLists[index]" @delete="deletePanel" />
<el-button type="primary" align="left" :disabled="disableConfig" @click="addVolume">添加卷</el-button>
<el-button type="primary" :disabled="disableConfig" @click="addExistedVolumn">添加已存在的卷</el-button>
<el-button type="primary" :disabled="disableConfig" @click="addImage">添加VM镜像</el-button>
@ -168,7 +168,7 @@
</template>
<script>
import { getVirtualMachines, postSSHKey } from '@/api/one-class-page/virtualMachine'
import { getImages, getVirtualMachines, postSSHKey, getDataVolume } from '@/api/one-class-page/virtualMachine'
import ConfigVolume from './virtualMachineConfig/configVolume'
import ConfigImage from './virtualMachineConfig/configImage'
import ConfigExistedVolume from './virtualMachineConfig/configExistedVolume'
@ -183,7 +183,8 @@ export default {
},
data() {
return {
allComponents: ['com1', 'com2'],
childLists: [],
allComponents: [],
dialogFormVisible: false,
checkList: '',
machineTypeOptions: ['q35', 'pc', 'None'],
@ -336,18 +337,88 @@ export default {
this.disableConfig = this.$route.query.disableConfig
}
this.$route.query.disableConfig = null
this.volumePanel.push({})
this.imagePanel.push({})
getVirtualMachines().then(res => {
var data = res.data[this.$route.query.index]
this.formData.name = data.metadata.name
this.formData.description = data.metadata.annotations['field.cattle.io/description']
this.formData.customName = data.metadata.annotations['harvesterhci.io/host-custom-name']
this.formData.machineType = data.spec.template.spec.domain.machine.type
this.formData.cpu = data.spec.template.spec.domain.cpu.cores
this.formData.memory = data.spec.template.spec.domain.resources.requests.memory
this.formData.memory = this.formData.memory.replace('Gi', '')
this.formData.hostname = data.spec.template.spec.hostname
var images = null
var dataVolumeData = null
getImages().then(res => {
images = res.data
getDataVolume().then(res => {
dataVolumeData = res.data
getVirtualMachines().then(res => {
var data = res.data[this.$route.query.index]
this.formData.name = data.metadata.name
this.formData.description = data.metadata.annotations['field.cattle.io/description']
this.formData.customName = data.metadata.annotations['harvesterhci.io/host-custom-name']
this.formData.machineType = data.spec.template.spec.domain.machine.type
this.formData.cpu = data.spec.template.spec.domain.cpu.cores
this.formData.memory = data.spec.template.spec.domain.resources.requests.memory
this.formData.memory = this.formData.memory.replace('Gi', '')
this.formData.hostname = data.spec.template.spec.hostname
for (let item = 0; item < data.spec.template.spec.volumes.length; item++) {
var dataVolumeTemplate = data.spec.template.spec.volumes[item]
var volumeName = dataVolumeTemplate.name
var dataImageName = null
var bus = null
var bootOrder = null
var type = null
var size = null
var componentType = null
var dataVolumeName = null
if (dataVolumeTemplate.dataVolume != null) {
dataVolumeName = dataVolumeTemplate.dataVolume.name
} else {
dataVolumeName = dataVolumeTemplate.containerDisk.image
componentType = 'com4'
}
for (let item1 = 0; item1 < dataVolumeData.length; item1++) {
if (dataVolumeName === dataVolumeData[item1].metadata.fields[0]) {
size = dataVolumeData[item1].spec.pvc.resources.requests.storage
break
}
}
for (let item1 = 0; item1 < data.spec.template.spec.domain.devices.disks.length; item1++) {
var disk = data.spec.template.spec.domain.devices.disks[item1]
if (volumeName === disk.name) {
if (disk.cdrom != null && typeof (disk.cdrom) !== 'undefined') {
type = 'cd-rom'
bus = disk.cdrom.bus
} else {
type = 'disk'
bus = disk.disk.bus
}
bootOrder = disk.bootOrder
break
}
}
for (let item1 = 0; item1 < data.spec.dataVolumeTemplates.length; item1++) {
if (data.spec.dataVolumeTemplates[item1].metadata.name !== dataVolumeName) {
continue
}
if (data.spec.dataVolumeTemplates[item1].metadata.annotations != null && typeof (data.spec.dataVolumeTemplates[item1].metadata.annotations) !== 'undefined') {
var imageId = data.spec.dataVolumeTemplates[item1].metadata.annotations['harvesterhci.io/imageId']
for (let item1 = 0; item1 < images.length; item1++) {
if (imageId === images[item1].id) {
dataImageName = images[item1].spec.displayName
break
}
}
componentType = 'com2'
} else {
componentType = 'com1'
}
}
this.childLists.push([volumeName, type, dataImageName, size, bus, bootOrder, dataVolumeName])
this.allComponents.push(componentType)
}
this.formData.name = data.metadata.name
this.formData.description = data.metadata.annotations['field.cattle.io/description']
this.formData.customName = data.metadata.annotations['harvesterhci.io/host-custom-name']
this.formData.machineType = data.spec.template.spec.domain.machine.type
this.formData.cpu = data.spec.template.spec.domain.cpu.cores
this.formData.memory = data.spec.template.spec.domain.resources.requests.memory
this.formData.memory = this.formData.memory.replace('Gi', '')
this.formData.hostname = data.spec.template.spec.hostname
})
})
})
},
methods: {

73
src/views/virtualMachine/virtualMachineConfig/configContainerMirror.vue
View File

@ -25,12 +25,6 @@
placeholder=""
:disabled="disableConfig"
/></el-form-item>
<el-form-item label="大小" prop="size"><el-input
v-model="formData2.Size"
placeholder=""
:disabled="disableConfig"
:hide-required-asterisk="true"
><template slot="append">GiB</template></el-input></el-form-item>
<el-form-item label="总线" prop="bus"><br>
<el-select v-model="formData2.Bus" :disabled="disableConfig">
<el-option
@ -54,38 +48,39 @@
</template>
<script>
import { getVirtualMachines, postSSHKey } from '@/api/one-class-page/virtualMachine'
import { postSSHKey } from '@/api/one-class-page/virtualMachine'
export default {
name: 'VirtualMachineConfigImage',
props: ['index', 'disableConfig'],
props: {
childList: {
type: Array, // type为Array,default为函数
default() {
return [
'hahaxixihehe'// 默认初始值
]
} },
index: {
type: Number,
default() {
return [
'hahaxixihehe'// 默认初始值
]
} },
disableConfig: {
type: Boolean,
default() {
return [
true// 默认初始值
]
}
}
},
data() {
return {
dialogFormVisible: false,
checkList: '',
machineTypeOptions: ['q35', 'pc', 'None'],
formData: {
name: '',
description: '',
customName: '',
machineType: 'q35',
cpu: '',
memory: '',
sshkey: '',
hostname: '',
userData: '',
networkData: ''
},
sshKeyFormData: {
sshKeyName: '',
sshKey: ''
},
filterMap: {
project: {
label: '项目',
type: 'select'
}
},
formData2: {
Name: 'cdrom-disk',
Type: 'cd-rom',
@ -109,18 +104,14 @@ export default {
if (this.$route.query.disableConfig != null && typeof (this.$route.query.disableConfig) !== 'undefined') {
this.disableConfig = this.$route.query.disableConfig
}
console.log(this.childList)
this.$route.query.disableConfig = null
getVirtualMachines().then(res => {
var data = res.data[this.$route.query.index]
this.formData.name = data.metadata.name
this.formData.description = data.metadata.annotations['field.cattle.io/description']
this.formData.customName = data.metadata.annotations['harvesterhci.io/host-custom-name']
this.formData.machineType = data.spec.template.spec.domain.machine.type
this.formData.cpu = data.spec.template.spec.domain.cpu.cores
this.formData.memory = data.spec.template.spec.domain.resources.requests.memory
this.formData.memory = this.formData.memory.replace('Gi', '')
this.formData.hostname = data.spec.template.spec.hostname
})
this.formData2.Name = this.childList[0]
this.formData2.Type = this.childList[1]
this.formData2.dockerMirror = this.childList[6]
this.formData2.Size = this.childList[3]
this.formData2.Bus = this.childList[4]
this.formData2.BootOrder = this.childList[5]
},
methods: {
createSSHKey() {

51
src/views/virtualMachine/virtualMachineConfig/configExistedVolume.vue
View File

@ -57,11 +57,34 @@
</template>
<script>
import { getVirtualMachines, postSSHKey } from '@/api/one-class-page/virtualMachine'
import { postSSHKey } from '@/api/one-class-page/virtualMachine'
export default {
name: 'VirtualMachineConfigVolume',
props: ['index', 'disableConfig'],
props: {
childList: {
type: Array, // type为Array,default为函数
default() {
return [
'hahaxixihehe'// 默认初始值
]
} },
index: {
type: Number,
default() {
return [
'hahaxixihehe'// 默认初始值
]
} },
disableConfig: {
type: Boolean,
default() {
return [
true// 默认初始值
]
}
}
},
data() {
return {
dialogFormVisible: false,
@ -75,13 +98,6 @@ export default {
BootOrder: '1',
volume: ''
},
formData4: {
Name: 'default',
Model: 'virtio',
Network: 'management Network',
Type: 'masquerade',
MACAddress: ''
},
imageList: ['ubuntu-18.04.5-live-server-amd64.iso', 'k3os-amd64.iso'],
sshkeyList: [],
vmImageTypeList: ['disk', 'cd-rom'],
@ -97,18 +113,13 @@ export default {
if (this.$route.query.disableConfig != null && typeof (this.$route.query.disableConfig) !== 'undefined') {
this.disableConfig = this.$route.query.disableConfig
}
console.log(this.childList)
this.$route.query.disableConfig = null
getVirtualMachines().then(res => {
var data = res.data[this.$route.query.index]
this.formData.name = data.metadata.name
this.formData.description = data.metadata.annotations['field.cattle.io/description']
this.formData.customName = data.metadata.annotations['harvesterhci.io/host-custom-name']
this.formData.machineType = data.spec.template.spec.domain.machine.type
this.formData.cpu = data.spec.template.spec.domain.cpu.cores
this.formData.memory = data.spec.template.spec.domain.resources.requests.memory
this.formData.memory = this.formData.memory.replace('Gi', '')
this.formData.hostname = data.spec.template.spec.hostname
})
this.formData3.Name = this.childList[0]
this.formData3.Type = this.childList[1]
this.formData3.Size = this.childList[3]
this.formData3.Bus = this.childList[4]
this.formData3.BootOrder = this.childList[5]
},
methods: {
createSSHKey() {

109
src/views/virtualMachine/virtualMachineConfig/configImage.vue
View File

@ -57,32 +57,40 @@
</template>
<script>
import { getVirtualMachines, postSSHKey } from '@/api/one-class-page/virtualMachine'
import { postSSHKey } from '@/api/one-class-page/virtualMachine'
export default {
name: 'VirtualMachineConfigImage',
props: ['index', 'disableConfig'],
props: {
childList: {
type: Array, // type为Array,default为函数
default() {
return [
'hahaxixihehe'// 默认初始值
]
} },
index: {
type: Number,
default() {
return [
'hahaxixihehe'// 默认初始值
]
} },
disableConfig: {
type: Boolean,
default() {
return [
true// 默认初始值
]
}
}
},
data() {
return {
dialogFormVisible: false,
checkList: '',
machineTypeOptions: ['q35', 'pc', 'None'],
formData: {
name: '',
description: '',
customName: '',
machineType: 'q35',
cpu: '',
memory: '',
sshkey: '',
hostname: '',
userData: '',
networkData: ''
},
sshKeyFormData: {
sshKeyName: '',
sshKey: ''
},
rules1: {
sshKeyName: [
{
@ -144,38 +152,6 @@ export default {
}
]
},
columns: [
{ prop: 'state', label: '状态', formatter: (row) => { return <el-tag type='success'>{row.state}</el-tag> } },
{ prop: 'name', label: '名称', formatter: (row) => { return <a onClick={() => this.viewDetail(row)}>{row.name}</a> } },
{ prop: 'cpu', label: 'CPU' },
{ prop: 'memory', label: '内存' },
{ prop: 'ipAddress', label: 'IP地址' },
{ prop: 'aliveTime', label: '存活时间' },
{ prop: 'more', label: '更多操作', formatter: (row) => {
return <div>
<el-dropdown>
<el-button className='el-dropdown-link' type='primary' icon='el-icon-more' circle>
</el-button>
<el-dropdown-menu slot='dropdown'>
<span onClick={() => this.clickOption(row)}> <el-dropdown-item> 暂停 </el-dropdown-item> </span>
<span onClick={() => this.clickOption(row)}> <el-dropdown-item> 开始 </el-dropdown-item> </span>
<span onClick={() => this.clickOption(row)}> <el-dropdown-item> 备份 </el-dropdown-item> </span>
<span onClick={() => this.clickOption(row)}> <el-dropdown-item> 恢复 </el-dropdown-item> </span>
<span onClick={() => this.clickOption(row)}> <el-dropdown-item> 生成模板 </el-dropdown-item> </span>
<span onClick={() => this.clickOption(row)}> <el-dropdown-item> 编辑设置 </el-dropdown-item> </span>
<span onClick={() => this.clickOption(row)}> <el-dropdown-item> 编辑YAML </el-dropdown-item> </span>
<span onClick={() => this.clickOption(row)}> <el-dropdown-item> 下载YAML </el-dropdown-item> </span>
</el-dropdown-menu>
</el-dropdown>
</div>
} }
],
filterMap: {
project: {
label: '项目',
type: 'select'
}
},
formData2: {
Name: 'cdrom-disk',
Type: 'cd-rom',
@ -184,20 +160,7 @@ export default {
Bus: 'sata',
BootOrder: '2'
},
formData3: {
Name: 'rootdisk',
Type: 'disk',
Size: '10Gi',
Bus: 'virtio',
BootOrder: '1'
},
formData4: {
Name: 'default',
Model: 'virtio',
Network: 'management Network',
Type: 'masquerade',
MACAddress: ''
},
imageList: ['ubuntu-18.04.5-live-server-amd64.iso', 'k3os-amd64.iso'],
sshkeyList: [],
vmImageTypeList: ['disk', 'cd-rom'],
@ -212,18 +175,14 @@ export default {
if (this.$route.query.disableConfig != null && typeof (this.$route.query.disableConfig) !== 'undefined') {
this.disableConfig = this.$route.query.disableConfig
}
console.log(this.childList)
this.$route.query.disableConfig = null
getVirtualMachines().then(res => {
var data = res.data[this.$route.query.index]
this.formData.name = data.metadata.name
this.formData.description = data.metadata.annotations['field.cattle.io/description']
this.formData.customName = data.metadata.annotations['harvesterhci.io/host-custom-name']
this.formData.machineType = data.spec.template.spec.domain.machine.type
this.formData.cpu = data.spec.template.spec.domain.cpu.cores
this.formData.memory = data.spec.template.spec.domain.resources.requests.memory
this.formData.memory = this.formData.memory.replace('Gi', '')
this.formData.hostname = data.spec.template.spec.hostname
})
this.formData2.Name = this.childList[0]
this.formData2.Type = this.childList[1]
this.formData2.Image = this.childList[2]
this.formData2.Size = this.childList[3]
this.formData2.Bus = this.childList[4]
this.formData2.BootOrder = this.childList[5]
},
methods: {
createSSHKey() {

103
src/views/virtualMachine/virtualMachineConfig/configVolume.vue
View File

@ -47,28 +47,39 @@
</template>
<script>
import { getVirtualMachines, postSSHKey } from '@/api/one-class-page/virtualMachine'
import { postSSHKey } from '@/api/one-class-page/virtualMachine'
export default {
name: 'VirtualMachineConfigVolume',
props: ['index', 'disableConfig'],
props: {
childList: {
type: Array, // type为Array,default为函数
default() {
return [
'hahaxixihehe'// 默认初始值
]
} },
index: {
type: Number,
default() {
return [
'hahaxixihehe'// 默认初始值
]
} },
disableConfig: {
type: Boolean,
default() {
return [
true// 默认初始值
]
}
}
},
data() {
return {
dialogFormVisible: false,
checkList: '',
machineTypeOptions: ['q35', 'pc', 'None'],
formData: {
name: '',
description: '',
customName: '',
machineType: 'q35',
cpu: '',
memory: '',
sshkey: '',
hostname: '',
userData: '',
networkData: ''
},
sshKeyFormData: {
sshKeyName: '',
sshKey: ''
@ -134,46 +145,6 @@ export default {
}
]
},
columns: [
{ prop: 'state', label: '状态', formatter: (row) => { return <el-tag type='success'>{row.state}</el-tag> } },
{ prop: 'name', label: '名称', formatter: (row) => { return <a onClick={() => this.viewDetail(row)}>{row.name}</a> } },
{ prop: 'cpu', label: 'CPU' },
{ prop: 'memory', label: '内存' },
{ prop: 'ipAddress', label: 'IP地址' },
{ prop: 'aliveTime', label: '存活时间' },
{ prop: 'more', label: '更多操作', formatter: (row) => {
return <div>
<el-dropdown>
<el-button className='el-dropdown-link' type='primary' icon='el-icon-more' circle>
</el-button>
<el-dropdown-menu slot='dropdown'>
<span onClick={() => this.clickOption(row)}> <el-dropdown-item> 暂停 </el-dropdown-item> </span>
<span onClick={() => this.clickOption(row)}> <el-dropdown-item> 开始 </el-dropdown-item> </span>
<span onClick={() => this.clickOption(row)}> <el-dropdown-item> 备份 </el-dropdown-item> </span>
<span onClick={() => this.clickOption(row)}> <el-dropdown-item> 恢复 </el-dropdown-item> </span>
<span onClick={() => this.clickOption(row)}> <el-dropdown-item> 生成模板 </el-dropdown-item> </span>
<span onClick={() => this.clickOption(row)}> <el-dropdown-item> 编辑设置 </el-dropdown-item> </span>
<span onClick={() => this.clickOption(row)}> <el-dropdown-item> 编辑YAML </el-dropdown-item> </span>
<span onClick={() => this.clickOption(row)}> <el-dropdown-item> 下载YAML </el-dropdown-item> </span>
</el-dropdown-menu>
</el-dropdown>
</div>
} }
],
filterMap: {
project: {
label: '项目',
type: 'select'
}
},
formData2: {
Name: 'cdrom-disk',
Type: 'cd-rom',
Image: 'harvester-amd64.iso',
Size: '10Gi',
Bus: 'sata',
BootOrder: '2'
},
formData3: {
Name: 'rootdisk',
Type: 'disk',
@ -181,13 +152,6 @@ export default {
Bus: 'virtio',
BootOrder: '1'
},
formData4: {
Name: 'default',
Model: 'virtio',
Network: 'management Network',
Type: 'masquerade',
MACAddress: ''
},
imageList: ['ubuntu-18.04.5-live-server-amd64.iso', 'k3os-amd64.iso'],
sshkeyList: [],
vmImageTypeList: ['disk', 'cd-rom'],
@ -202,18 +166,13 @@ export default {
if (this.$route.query.disableConfig != null && typeof (this.$route.query.disableConfig) !== 'undefined') {
this.disableConfig = this.$route.query.disableConfig
}
console.log(this.childList)
this.$route.query.disableConfig = null
getVirtualMachines().then(res => {
var data = res.data[this.$route.query.index]
this.formData.name = data.metadata.name
this.formData.description = data.metadata.annotations['field.cattle.io/description']
this.formData.customName = data.metadata.annotations['harvesterhci.io/host-custom-name']
this.formData.machineType = data.spec.template.spec.domain.machine.type
this.formData.cpu = data.spec.template.spec.domain.cpu.cores
this.formData.memory = data.spec.template.spec.domain.resources.requests.memory
this.formData.memory = this.formData.memory.replace('Gi', '')
this.formData.hostname = data.spec.template.spec.hostname
})
this.formData3.Name = this.childList[0]
this.formData3.Type = this.childList[1]
this.formData3.Size = this.childList[3]
this.formData3.Bus = this.childList[4]
this.formData3.BootOrder = this.childList[5]
},
methods: {
createSSHKey() {

43
src/views/virtualMachine/virtualMachineConfig/virtualMachineDetailCard.vue Normal file
View File

@ -0,0 +1,43 @@
<template>
<el-card>
<h5>{{ cardName }}</h5>
<FormData :data="formData" :data-map="dataMap" />
</el-card>
</template>
<script>
import { FormData } from '@/components/FormData'
export default {
name: 'VirtualMachineDetailCard',
components: { FormData },
props: {
formData: {
type: Object, // type为Array,default为函数
default() {
return [
'hahaxixihehe'// 默认初始值
]
} },
dataMap: {
type: Object, // type为Array,default为函数
default() {
return [
'hahaxixihehe'// 默认初始值
]
} },
cardName: {
type: String,
default() {
return [
''// 默认初始值
]
}
}
}
}
</script>
<style scoped>
</style>

128
src/views/virtualMachine/virtualMachineDetail.vue
View File

@ -1,6 +1,6 @@
<template>
<div>
<el-tabs type="border-card" tab-position="left" style="height: 600px;">
<el-tabs type="border-card" tab-position="left">
<el-tab-pane key="1" label="基本信息">
<el-card shadow="never">
<h5>概览</h5>
@ -13,14 +13,7 @@
</el-tab-pane>
<el-tab-pane key="2" label="卷信息">
<h4>卷</h4>
<el-card>
<h5>虚拟机映像</h5>
<FormData :data="formData2" :data-map="dataMap3" />
</el-card>
<el-card>
<h5>卷</h5>
<FormData :data="formData3" :data-map="dataMap4" />
</el-card>
<VirtualMachineDetailCard v-for="(item, index) in allDetailCard" :key="index" :card-name="item.name" :data-map="item.dataMap" :form-data="item.formData" />
</el-tab-pane>
<el-tab-pane key="3" label="网络">
<h4>网络</h4>
@ -75,13 +68,14 @@
<script>
import { FormData } from '@/components/FormData'
import List from '@/components/list'
import { getVirtualMachines, getVirtualMachineImage } from '@/api/one-class-page/virtualMachine'
import { getVirtualMachines, getVirtualMachineImage, getImages, getDataVolume } from '@/api/one-class-page/virtualMachine'
import VirtualMachineDetailCard from './virtualMachineConfig/virtualMachineDetailCard'
export default {
components: { FormData, List },
components: { FormData, List, VirtualMachineDetailCard },
data() {
return {
index: '',
allDetailCard: [],
formData: {
name: '',
image: '',
@ -166,6 +160,13 @@ export default {
Started: '开始',
Ended: '结束'
},
dataMap7: {
dockerMirror: 'Docker镜像',
Name: '名称',
Type: '类型',
Bus: '总线',
BootOrder: '驱动顺序'
},
columns: [
{ prop: 'reason', label: '原因' },
{ prop: 'resource', label: '资源' },
@ -212,6 +213,109 @@ export default {
},
mounted() {
this.getFormData()
var images = null
var dataVolumeData = null
getImages().then(res => {
images = res.data
getDataVolume().then(res => {
dataVolumeData = res.data
getVirtualMachines().then(res => {
var data = res.data[this.$route.query.index]
for (let item = 0; item < data.spec.template.spec.volumes.length; item++) {
var dataVolumeTemplate = data.spec.template.spec.volumes[item]
var volumeName = dataVolumeTemplate.name
var dataImageName = null
var bus = null
var bootOrder = null
var type = null
var size = null
var componentType = null
var dataVolumeName = null
if (dataVolumeTemplate.dataVolume != null) {
dataVolumeName = dataVolumeTemplate.dataVolume.name
} else {
dataVolumeName = dataVolumeTemplate.containerDisk.image
componentType = '容器镜像'
}
for (let item1 = 0; item1 < dataVolumeData.length; item1++) {
if (dataVolumeName === dataVolumeData[item1].metadata.fields[0]) {
size = dataVolumeData[item1].spec.pvc.resources.requests.storage
break
}
}
for (let item1 = 0; item1 < data.spec.template.spec.domain.devices.disks.length; item1++) {
var disk = data.spec.template.spec.domain.devices.disks[item1]
if (volumeName === disk.name) {
if (disk.cdrom != null && typeof (disk.cdrom) !== 'undefined') {
type = 'cd-rom'
bus = disk.cdrom.bus
} else {
type = 'disk'
bus = disk.disk.bus
}
bootOrder = disk.bootOrder
break
}
}
for (let item1 = 0; item1 < data.spec.dataVolumeTemplates.length; item1++) {
if (data.spec.dataVolumeTemplates[item1].metadata.name !== dataVolumeName) {
continue
}
if (data.spec.dataVolumeTemplates[item1].metadata.annotations != null && typeof (data.spec.dataVolumeTemplates[item1].metadata.annotations) !== 'undefined') {
var imageId = data.spec.dataVolumeTemplates[item1].metadata.annotations['harvesterhci.io/imageId']
for (let item1 = 0; item1 < images.length; item1++) {
if (imageId === images[item1].id) {
dataImageName = images[item1].spec.displayName
break
}
}
componentType = 'VM镜像'
} else {
componentType = '卷'
}
}
var formData2 = {
Name: volumeName,
Type: type,
Image: dataImageName,
Size: size,
Bus: bus,
BootOrder: bootOrder,
dockerMirror: dataVolumeName
}
var itemObjct = null
if (componentType === 'VM镜像') {
itemObjct = {
formData: formData2,
name: componentType,
dataMap: this.dataMap3
}
} else if (componentType === '卷') {
itemObjct = {
formData: formData2,
name: componentType,
dataMap: this.dataMap4
}
} else if (componentType === '容器镜像') {
itemObjct = {
formData: formData2,
name: componentType,
dataMap: this.dataMap7
}
}
this.allDetailCard.push(itemObjct)
}
this.formData.name = data.metadata.name
this.formData.description = data.metadata.annotations['field.cattle.io/description']
this.formData.customName = data.metadata.annotations['harvesterhci.io/host-custom-name']
this.formData.machineType = data.spec.template.spec.domain.machine.type
this.formData.cpu = data.spec.template.spec.domain.cpu.cores
this.formData.memory = data.spec.template.spec.domain.resources.requests.memory
this.formData.memory = this.formData.memory.replace('Gi', '')
this.formData.hostname = data.spec.template.spec.hostname
})
})
})
},
methods: {
switchTab(e) {

2
src/views/virtualMachine/virtualMachineDetailPanel.vue
View File

@ -2,7 +2,7 @@
<div>
<el-card shadow="never">
<el-page-header content="详情" @back="goBack" />
<h2>主机:{{ $route.query.name }} <el-tag type="success">{{ $route.query.state }} </el-tag> <el-dropdown @command="handleDropdown">
<h2>虚拟机:{{ $route.query.name }} <el-tag type="success">{{ $route.query.state }} </el-tag> <el-dropdown @command="handleDropdown">
<el-button class-name="el-dropdown-link" type="primary" icon="el-icon-more" circle />
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="1"> 暂停 </el-dropdown-item>

2
vue.config.js
View File

@ -81,7 +81,7 @@ module.exports = {
},
'^/apis/': {
ws: false,
target: 'http://119.45.100.73:30881/', /* Host */
target: 'http://119.45.git100.73:30881/', /* Host */
// changeOrigin: true,
},
'^/virtual': {