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

fix image all problem

This commit is contained in:
ann 2022-04-28 17:26:24 +08:00
parent b27e978ecf
commit 3acb9e8b68
6 changed files with 90 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -283,7 +283,7 @@ export function getImages() {
export function createImages(data) {
return request({
url: '/virtual/v1/harvesterhci.io.virtualmachineimages',
url: '/virtual/v1/harvester/harvesterhci.io.virtualmachineimages',
method: 'post',
data: data
})
@ -301,9 +301,9 @@ export function editImage(name, data) {
data: data
})
}
export function getImagesYaml(name, isYaml = false) {
export function getImagesYaml(name, isYaml = false, namespace = 'default') {
return request({
url: '/virtual/apis/harvesterhci.io/v1beta1/namespaces/default/virtualmachineimages/' + name,
url: `/virtual/apis/harvesterhci.io/v1beta1/namespaces/${namespace}/virtualmachineimages/${name}`,
method: 'get',
headers: {
'Accept': isYaml ? 'application/yaml' : 'application/json'
@ -311,9 +311,9 @@ export function getImagesYaml(name, isYaml = false) {
})
}
export function putImagesYaml(name, yaml) {
export function putImagesYaml(name, yaml, namespace = 'default') {
return request({
url: '/virtual/apis/harvesterhci.io/v1beta1/namespaces/default/virtualmachineimages/' + name,
url: `/virtual/apis/harvesterhci.io/v1beta1/namespaces/${namespace}/virtualmachineimages/${name}`,
method: 'put',
data: yaml
})

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

@ -418,15 +418,14 @@ const getImagesList = () => {
obj.index = item
obj.displayName = res.data[item].spec.displayName
obj.name = res.data[item].metadata.name
obj.state = res.data[item].metadata.state.name
obj.message = res.data[item].status.conditions?.map(e => e.status === 'False' ? e.message : '').filter(e => e)[0] || ''
obj.state = obj.message ? 'Failed' : res.data[item].status.progress === 6 ? 'Downloading' : res.data[item].metadata.state.name
obj.namespace = res.data[item].metadata.namespace
obj.progress = res.data[item].status?.progress === 100 ? '已完成' : '未完成'
obj.creationTime = res.data[item].metadata.creationTimestamp
obj.aliveTime = res.data[item].metadata.fields[3]
obj.size = Number((res.data[item].status?.size / 1024 / 1024).toString().match(/^\d+(?:\.\d{0,2})?/)) + 'MB'
obj.aliveTime = obj.aliveTime.replace('d', '天')
obj.aliveTime = obj.aliveTime.replace('h', '小时')
obj.aliveTime = obj.aliveTime.replace('m', '分钟')
obj.aliveTime = obj.aliveTime.replace('d', '天').replace('h', '小时').replace('m', '分钟')
listResult[item] = obj
}
resolve({ total: res.data.length, rows: listResult })

20
src/views/virtualMachine/image/detail.vue
View File

@ -1,6 +1,6 @@
<template>
<div>
<el-card>
<el-card v-loading="loading">
<el-page-header content="详情" @back="goBack" />
<h2>镜像:{{ formData.displayName }} <el-tag type="success">{{ formData.state }} </el-tag> <el-dropdown @command="handleDropdown">
<el-button class-name="el-dropdown-link" size="mini" icon="el-icon-more" circle />
@ -14,12 +14,13 @@
</el-dropdown-menu>
</el-dropdown> </h2>
<h6>标签： {{ formData.labels }}</h6>
<h6>命名空间：{{ formData.namespace }}</h6>
<h6>存活时间：{{ formData.aliveTime }}</h6>
<h5>基本信息</h5>
<el-text v-if="formData.message" type="warning">{{ formData.message }}</el-text>
<FormData :data="formData" :data-map="dataMap" />
</el-card>
<Yaml v-if="dialogYamlFormVisible" v-model="dialogYamlFormVisible" :name="yamlName" :is-edit="editYaml" :get-yaml="getImagesYaml" :put-yaml="putImagesYaml" />
<Yaml v-if="dialogYamlFormVisible" v-model="dialogYamlFormVisible" :name="yamlName" :namespace="yamlNamespace" :is-edit="editYaml" :get-yaml="getImagesYaml" :put-yaml="putImagesYaml" />
</div>
</template>
@ -55,7 +56,8 @@ export default {
resourceType: '镜像地址',
size: '大小',
description: '描述'
}
},
loading: false
}
},
computed: {
@ -73,6 +75,7 @@ export default {
this.$router.push({ path: '/virtual/images' })
},
getFormData() {
this.loading = true
getImages().then(res => {
for (let i = 0; i < res.data.length; i++) {
if (this.$route.query.name.toString() === res.data[i].metadata.name) {
@ -87,28 +90,31 @@ export default {
name: data.metadata.name,
state: data.metadata.state.name,
labels: data.metadata.labels,
namespace: data.metadata.namespace,
aliveTime: data.metadata.fields[3].replace('d', '天').replace('h', '小时').replace('m', '分钟'),
description: data.metadata.annotations ? data.metadata.annotations['field.cattle.io/description'] : '-',
size: Number((data.status.size / 1024 / 1024).toString().match(/^\d+(?:\.\d{0,2})?/)) + 'MB',
resourceType: data.spec.url
}
this.loading = false
})
},
handleDropdown(command) {
switch (command) {
case '1':
this.$refs.detail.disableConfig = false
this.$router.push({ path: `edit`, query: { name: this.$route.query.name, namespace: this.formData.namespace }})
break
case '2':
this.$router.push({ path: `edit`, query: { name: this.$route.query.name, namespace: this.formData.namespace, clone: true }})
break
case '6':
this.viewYamlFunc(this.$route.query.name)
this.viewYamlFunc(this.$route.query.name, this.formData.namespace)
break
case '3':
this.editYamlFunc(this.$route.query.name)
this.editYamlFunc(this.$route.query.name, this.formData.namespace)
break
case '4':
this.downloadYamlFunc(this.$route.query.name, getImagesYaml)
this.downloadYamlFunc(this.$route.query.name, getImagesYaml, this.formData.namespace)
break
case 5:
break

79
src/views/virtualMachine/image/edit.vue
View File

@ -8,7 +8,7 @@
<el-row :gutter="10">
<el-col :span="6">
<el-form-item label="命名空间" prop="namespace">
<el-select v-model="formData.namespace" :hide-required-asterisk="true" class="selectPro" placeholder="请选择命名空间">
<el-select v-model="formData.namespace" :disabled="isEdit&&!$route.query.clone" :hide-required-asterisk="true" class="selectPro" placeholder="请选择命名空间">
<el-option
v-for="item in namespaceList"
:key="item"
@ -23,6 +23,7 @@
<el-col :span="18">
<el-form-item label="名称" prop="name"><el-input
v-model="formData.name"
:disabled="isEdit&&!$route.query.clone"
:hide-required-asterisk="true"
placeholder="请输入名称"
/></el-form-item>
@ -37,6 +38,7 @@
<h6>基本信息</h6>
<el-form-item prop="url"><el-input
v-model="formData.url"
:disabled="isEdit&&!$route.query.clone"
:hide-required-asterisk="true"
placeholder="镜像地址"
/></el-form-item>
@ -65,13 +67,14 @@
</template>
<script>
import { createImages } from '@/api/one-class-page/virtualMachine'
import { createImages, getImagesYaml, putImagesYaml } from '@/api/one-class-page/virtualMachine'
import { set, get } from 'lodash'
export default {
data() {
return {
isEdit: false,
loading: false,
tagNum: 0,
formData: {
name: '',
description: '',
@ -79,21 +82,20 @@ export default {
labels: []
},
namespaceList: [],
imagesData: {},
// 校验规则
orginFormData: {},
rules: {
name: [
{
required: true, // 是否必填
message: '名称不能为空', // 规则提示
trigger: 'blur' // 何事件触发
required: true,
message: '名称不能为空',
trigger: 'blur'
}
],
url: [
{
required: true, // 是否必填
message: '地址不能为空', // 规则提示
trigger: 'blur' // 何事件触发
required: true,
message: '地址不能为空',
trigger: 'blur'
}
]
}
@ -112,9 +114,22 @@ export default {
},
mounted() {
this.isEdit = !!this.$route.query.name
this.$HandleFunc.getAllNamespace().then(e => {
this.namespaceList = e.rows.map(e => e.name)
})
if (this.isEdit) {
this.loading = true
getImagesYaml(this.$route.query.name, false, this.$route.query.namespace).then(res => {
this.orginFormData = res
this.loading = false
this.formData.name = this.$route.query.clone ? '' : get(res, 'spec.displayName')
this.formData.namespace = this.$route.query.namespace
this.formData.description = get(res, 'metadata.annotations') ? get(res, 'metadata.annotations')['field.cattle.io/description'] : ''
this.formData.url = get(res, 'spec.url')
this.formData.labels = Object.keys(get(res, 'metadata.labels')).map(e => ({ key: e, value: res.metadata.labels[e] }))
})
} else {
this.$HandleFunc.getAllNamespace().then(e => {
this.namespaceList = e.rows.map(e => e.name)
})
}
},
methods: {
goBack() {
@ -133,24 +148,30 @@ export default {
this.formData.labels.forEach(e => {
labels[e.key] = e.value
})
const data = {
type: 'harvesterhci.io.virtualmachineimage',
metadata: {
annotations: {
'field.cattle.io/description': this.formData.description
let data
if (!this.isEdit || this.$route.query.clone) {
data = {
type: 'harvesterhci.io.virtualmachineimage',
metadata: {
'generateName': 'image-'
},
labels: labels,
'namespace': this.formData.namespace,
'generateName': 'image-'
},
spec: {
'sourceType': 'download',
'displayName': this.formData.name,
'url': this.formData.url
spec: {
'sourceType': 'download'
}
}
} else {
data = this.orginFormData
}
createImages(data).then(res => {
this.$message.success('创建成功')
set(data, "metadata.annotations['field.cattle.io/description']", this.formData.description)
set(data, 'metadata.labels', labels)
set(data, 'spec.displayName', this.formData.name)
set(data, 'spec.url', this.formData.url)
set(data, 'metadata.namespace', this.formData.namespace)
this.isEdit && !this.$route.query.clone ? putImagesYaml(this.$route.query.name, data, this.$route.query.namespace).then(res => {
this.$message.success('修改成功！')
this.goBack()
}) : createImages(data).then(res => {
this.$message.success('创建成功！')
this.goBack()
})
} else {

70
src/views/virtualMachine/image/list.vue
View File

@ -6,7 +6,6 @@
class="multipleTable"
:columns="columns"
func-name="getImagesList"
:cluster-name="clusterName"
:pagination="false"
tooltip-effect="dark"
>
@ -24,10 +23,10 @@
<span>您试图删除 镜像 {{ clickrow.name }} </span>
<span slot="footer" class="dialog-footer">
<el-button @click="deleteDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="deleteDataImage(clickrow.name)">确 定</el-button>
<el-button type="primary" @click="deleteDataImage(clickrow.name, clickrow.namespace)">确 定</el-button>
</span>
</el-dialog>
<Yaml v-if="dialogYamlFormVisible" v-model="dialogYamlFormVisible" :name="yamlName" :is-edit="editYaml" :get-yaml="getImagesYaml" :put-yaml="putImagesYaml" />
<Yaml v-if="dialogYamlFormVisible" v-model="dialogYamlFormVisible" :name="yamlName" :namespace="yamlNamespace" :is-edit="editYaml" :get-yaml="getImagesYaml" :put-yaml="putImagesYaml" />
</div>
</template>
@ -37,7 +36,6 @@ import { getImagesYaml, putImagesYaml, deleteImage } from '@/api/one-class-page/
import yaml from '@/mixin/yaml'
export default {
name: 'PodForm',
components: { List },
mixins: [
yaml
@ -46,22 +44,15 @@ export default {
return {
getImagesYaml,
putImagesYaml,
timer: null,
timeInterval: 10000,
disabled: false,
deleteDialogVisible: false,
clickrow: '',
filterMap: {
// name: {
// label: '名称'
// },
// status: {
// label: '状态',
// type: 'select'
// }
},
columns: [
{ prop: 'state', label: '状态', width: '150', formatter: (row) => { return <el-tag type='info'>{row.state}</el-tag> } },
{ prop: 'state', label: '状态', width: '150', formatter: (row) => {
return <div>
<el-tag type='info'> {row.state} </el-tag>
{row.message ? <el-tooltip placement='top'><div slot='content'>{row.message}</div><i class='el-icon-info'></i></el-tooltip> : ''}
</div>
} },
{ prop: 'displayName', label: '名称', formatter: (row) => { return <a onClick={() => this.viewImagesDetail(row)}>{row.displayName}</a> } },
{ prop: 'namespace', label: '命名空间', width: '150' },
{ prop: 'size', label: '大小', width: '150' },
@ -88,23 +79,8 @@ export default {
]
}
},
computed: {
clusterName() {
// console.log(this.$store.getters)
// return this.$store.getters.clusterName
if (localStorage.getItem('clusterName') === 'default') {
return ''
} else {
return '/clusters/' + localStorage.getItem('clusterName')
}
}
},
created() {
},
beforeDestroy() {
// clearInterval(this.timer)
// this.timer = null
},
methods: {
viewImagesDetail(row) {
this.$router.push({ path: `images/detail`, query: { name: row.name }})
@ -112,28 +88,22 @@ export default {
creation() {
this.$router.push({ path: `images/create` })
},
// selectOption(a) {
// // console.log( this.$refs.sxx.value);
// console.log(a.target.value)
// }
clickOption(row, command) {
switch (command) {
case 1:
row.disableConfig = false
this.$router.push({ path: `images/edit`, query: row })
this.$router.push({ path: `images/edit`, query: { name: row.name, namespace: row.namespace }})
break
case 2:
row.clone = true
this.$router.push({ path: `images/detail/config`, query: row })
this.$router.push({ path: `images/edit`, query: { name: row.name, namespace: row.namespace, clone: true }})
break
case 6:
this.viewYamlFunc(row.name)
this.viewYamlFunc(row.name, row.namespace)
break
case 3:
this.editYamlFunc(row.name)
this.editYamlFunc(row.name, row.namespace)
break
case 4:
this.downloadYamlFunc(row.name, getImagesYaml)
this.downloadYamlFunc(row.name, getImagesYaml, row.namespace)
break
case 5:
this.deleteDialogVisible = true
@ -142,23 +112,13 @@ export default {
default:
}
},
async deleteDataImage(name) {
await deleteImage(name).then(() => {
async deleteDataImage(name, namespace) {
await deleteImage(name, namespace).then(() => {
this.deleteDialogVisible = false
this.$message.success('删除成功')
})
this.$refs.multipleTable.getList()
},
viewVMDetail(row) {
this.$router.push({ path: `virtual-machine/detail`, query: row })
}
}
}
</script>
<style scoped>
.btnBox {
display: flex;
align-items: center;
justify-content: center;
}
</style>

4
vue.config.js
View File

@ -100,8 +100,12 @@ module.exports = {
'^/virtual': {
ws: false,
target: 'https://jointcloud.net/',
// target: 'https://10.105.20.1/',
changeOrigin: true,
secure: false
// pathRewrite: {
// '^/virtual': ''
// }
},
'^/jcc-faas-manager': {
ws: false,