ui/src/components/view/VgpuProfilesTab.vue - cloudstack - Git at Google

 // Licensed to the Apache Software Foundation (ASF) under one
 // or more contributor license agreements. See the NOTICE file
 // distributed with this work for additional information
 // regarding copyright ownership. The ASF licenses this file
 // to you under the Apache License, Version 2.0 (the
 // "License"); you may not use this file except in compliance
 // with the License. You may obtain a copy of the License at
 //
 // http://www.apache.org/licenses/LICENSE-2.0
 //
 // Unless required by applicable law or agreed to in writing,
 // software distributed under the License is distributed on an
 // "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 // KIND, either express or implied. See the License for the
 // specific language governing permissions and limitations
 // under the License.

 <template>
   <div>
     <a-button
       type="primary"
       @click="createVgpuProfile"
     >
       {{ $t('label.add.vgpu.profile') }}
     </a-button>
     <list-view
       :tabLoading="tabLoading"
       :columns="columns"
       :items="items"
       :columnKeys="columnKeys"
       :selectedColumns="selectedColumnKeys"
       ref="listview"
       @update-selected-columns="updateSelectedColumns"
       @refresh="this.fetchData"
     >
       <template #actionButtons="{ record }">
         <a-space>
           <!-- Edit Action -->
           <a-tooltip :title="$t('label.edit')">
             <a-button
               type="primary"
               size="small"
               shape="circle"
               @click="editVgpuProfile(record)"
             >
               <template #icon><edit-outlined /></template>
             </a-button>
           </a-tooltip>

           <!-- Delete Action -->
           <a-popconfirm
             :title="$t('message.confirm.delete.vgpu.profile')"
             @confirm="deleteVgpuProfile(record)"
             okText="Yes"
             cancelText="No"
           >
             <a-tooltip :title="$t('label.delete')">
               <a-button
                 type="primary"
                 danger
                 size="small"
                 shape="circle"
               >
                 <template #icon><delete-outlined /></template>
               </a-button>
             </a-tooltip>
           </a-popconfirm>
         </a-space>
       </template>
     </list-view>

     <!-- Create/Update VGPU Profile Modal -->
     <a-modal
       :visible="showModal"
       :title="isEditing ? $t('label.update.vgpu.profile') : $t('label.add.vgpu.profile')"
       :closable="true"
       :maskClosable="false"
       :footer="null"
       @cancel="closeModal"
       centered
       width="450px"
     >
       <a-spin
         :spinning="actionLoading"
         v-ctrl-enter="handleSubmit"
       >
         <a-form
           ref="vgpuForm"
           :model="form"
           :rules="rules"
           layout="vertical"
           @finish="handleSubmit"
         >
           <a-form-item
             v-for="field in formFields"
             :key="field.key"
             :name="field.key"
             :ref="field.key"
             :label="field.label"
           >
             <!-- Input field -->
             <a-input
               v-if="field.type === 'input'"
               v-model:value="form[field.key]"
               :placeholder="field.placeholder"
               :v-focus="field.key === 'name'"
             />

             <!-- Number input field -->
             <a-input-number
               v-else-if="field.type === 'number'"
               style="width: 100%"
               v-model:value="form[field.key]"
               :min="field.min"
               :placeholder="field.placeholder"
             />
           </a-form-item>

           <div
             :span="24"
             class="action-button"
           >
             <a-button @click="closeModal">{{ $t('label.cancel') }}</a-button>
             <a-button
               type="primary"
               ref="submit"
               @click="handleSubmit"
             >{{ $t('label.ok') }}</a-button>
           </div>
         </a-form>
       </a-spin>
     </a-modal>
   </div>
 </template>

 <script>
 import { reactive, toRaw } from 'vue'
 import { getAPI, postAPI } from '@/api'
 import { genericCompare } from '@/utils/sort.js'
 import ListView from '@/components/view/ListView'
 import { EditOutlined, DeleteOutlined } from '@ant-design/icons-vue'

 export default {
   name: 'VgpuProfilesTab',
   components: {
     ListView,
     EditOutlined,
     DeleteOutlined
   },
   props: {
     resource: {
       type: Object,
       required: true
     },
     loading: {
       type: Boolean,
       required: true
     }
   },
   data () {
     return {
       tabLoading: false,
       columnKeys: ['name', 'videoram', 'maxheads', 'resolution', 'maxvgpuperphysicalgpu'],
       selectedColumnKeys: [],
       columns: [],
       cols: [],
       items: [],
       showModal: false,
       isEditing: false,
       selectedVgpuProfile: null,
       actionLoading: false,
       form: {},
       rules: {},
       formFields: [],
       createApiParams: {},
       updateApiParams: {}
     }
   },
   computed: {
     isAdmin () {
       return this.$store.getters.userInfo.roletype === 'Admin'
     }
   },
   created () {
     this.fetchApiParams()
     this.selectedColumnKeys = this.columnKeys
     this.updateColumns()
     this.fetchData()
   },
   methods: {
     fetchApiParams () {
       this.createApiParams = this.$getApiParams('createVgpuProfile') || {}
       this.updateApiParams = this.$getApiParams('updateVgpuProfile') || {}
     },
     generateFormFields (isEdit = false) {
       const apiParams = isEdit ? this.updateApiParams : this.createApiParams
       const fields = []
       const fieldOrder = ['name', 'description', 'videoram', 'maxheads', 'maxresolutionx', 'maxresolutiony', 'maxvgpuperphysicalgpu']

       fieldOrder.forEach(paramName => {
         if (paramName === 'gpucardid' && !isEdit) return // Skip gpucardid for create as it's auto-populated

         const param = apiParams[paramName]
         if (!param && !isEdit) return // For create, only include params that exist in API

         const field = {
           key: paramName,
           label: this.$t(`label.${paramName}`),
           required: param?.required || (paramName === 'name' || paramName === 'maxvgpuperphysicalgpu'),
           placeholder: param?.description || this.$t(`label.${paramName}`),
           type: this.getFieldType(paramName, param)
         }

         fields.push(field)
       })

       this.formFields = fields
     },
     getFieldType (paramName, param) {
       const numberFields = ['maxvgpuperphysicalgpu']
       const selectFields = []

       if (numberFields.includes(paramName)) {
         return 'number'
       } else if (selectFields.includes(paramName)) {
         return 'select'
       } else {
         return 'input'
       }
     },
     initForm (isEdit = false, record = null) {
       const formData = {
         name: '',
         description: '',
         maxvgpuperphysicalgpu: 1
       }

       if (isEdit && record) {
         formData.name = record.name || ''
         formData.description = record.description || ''
         formData.maxvgpuperphysicalgpu = record.maxvgpuperphysicalgpu || 1
         formData.videoram = record.videoram || 0
         formData.maxheads = record.maxheads || 0
         formData.maxresolutionx = record.maxresolutionx || 0
         formData.maxresolutiony = record.maxresolutiony || 0
       }

       this.form = reactive(formData)

       const validationRules = {
         name: [{ required: true, message: this.$t('message.error.required.input') }],
         maxvgpuperphysicalgpu: [{ required: true, message: this.$t('message.error.required.input') }]
       }

       this.rules = reactive(validationRules)
     },
     createVgpuProfile () {
       this.isEditing = false
       this.selectedVgpuProfile = null
       this.generateFormFields(false)
       this.initForm(false)
       this.showModal = true
     },
     editVgpuProfile (record) {
       this.isEditing = true
       this.selectedVgpuProfile = record
       this.generateFormFields(true)
       this.initForm(true, record)
       this.showModal = true
     },
     closeModal () {
       this.showModal = false
       this.isEditing = false
       this.selectedVgpuProfile = null
       this.actionLoading = false
     },
     filterOption (input, option) {
       return option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
     },
     handleSubmit (e) {
       if (e) {
         e.preventDefault()
       }
       if (this.actionLoading) return

       this.$refs.vgpuForm.validate().then(() => {
         this.actionLoading = true
         const formRaw = toRaw(this.form)

         if (this.isEditing) {
           this.updateVgpuProfile(formRaw)
         } else {
           this.createVgpuProfileSubmit(formRaw)
         }
       }).catch((error) => {
         this.$message.error(error)
       })
     },
     createVgpuProfileSubmit (formRaw) {
       const params = {
         name: formRaw.name,
         gpucardid: this.resource.id,
         maxvgpuperphysicalgpu: formRaw.maxvgpuperphysicalgpu
       }

       if (formRaw.description) {
         params.description = formRaw.description
       }

       postAPI('createVgpuProfile', params).then(response => {
         this.$message.success(this.$t('message.success.create.vgpu.profile'))
         this.closeModal()
         this.fetchData()
       }).catch(error => {
         console.error('Error creating vGPU profile:', error)
         this.$notifyError(error)
       }).finally(() => {
         this.actionLoading = false
       })
     },
     updateVgpuProfile (formRaw) {
       const params = {
         id: this.selectedVgpuProfile.id
       }

       // Add only fields that have values
       if (formRaw.name) {
         params.name = formRaw.name
       }
       if (formRaw.description) {
         params.description = formRaw.description
       }
       if (formRaw.maxvgpuperphysicalgpu) {
         params.maxvgpuperphysicalgpu = formRaw.maxvgpuperphysicalgpu
       }

       postAPI('updateVgpuProfile', params).then(() => {
         this.$message.success(this.$t('message.success.update.vgpu.profile'))
         this.closeModal()
         this.fetchData()
       }).catch(error => {
         console.error('Error updating vGPU profile:', error)
         this.$notifyError(error)
       }).finally(() => {
         this.actionLoading = false
       })
     },
     deleteVgpuProfile (record) {
       postAPI('deleteVgpuProfile', {
         id: record.id
       }).then(() => {
         this.$message.success(this.$t('message.success.delete.vgpu.profile'))
         this.fetchData()
       }).catch(error => {
         console.error('Error deleting vGPU profile:', error)
         this.$notifyError(error)
       })
     },
     fetchData () {
       this.fetchVgpuProfiles()
     },
     updateSelectedColumns (key) {
       if (this.selectedColumnKeys.includes(key)) {
         this.selectedColumnKeys = this.selectedColumnKeys.filter(x => x !== key)
       } else {
         this.selectedColumnKeys.push(key)
       }
       this.updateColumns()
     },
     updateColumns () {
       this.columns = []
       for (var columnKey of this.columnKeys) {
         if (!this.selectedColumnKeys.includes(columnKey)) continue
         this.columns.push({
           key: columnKey,
           title: columnKey === 'name' ? this.$t('label.vgpu.profile') : this.$t('label.' + String(columnKey).toLowerCase()),
           dataIndex: columnKey,
           sorter: (a, b) => { return genericCompare(a[columnKey] || '', b[columnKey] || '') }
         })
       }

       // Add actions column for admin users
       if (this.isAdmin) {
         this.columns.push({
           key: 'vgpuActions',
           title: this.$t('label.actions'),
           width: 120,
           fixed: 'right'
         })
       }

       if (this.columns.length > 0) {
         this.columns[this.columns.length - 1].customFilterDropdown = true
       }
     },
     fetchVgpuProfiles () {
       getAPI('listVgpuProfiles', {
         gpucardid: this.resource.id
       }).then(res => {
         this.items = res?.listvgpuprofilesresponse?.vgpuprofile || []
       })
     }
   }
 }
 </script>
	// Licensed to the Apache Software Foundation (ASF) under one
	// or more contributor license agreements. See the NOTICE file
	// distributed with this work for additional information
	// regarding copyright ownership. The ASF licenses this file
	// to you under the Apache License, Version 2.0 (the
	// "License"); you may not use this file except in compliance
	// with the License. You may obtain a copy of the License at
	//
	// http://www.apache.org/licenses/LICENSE-2.0
	//
	// Unless required by applicable law or agreed to in writing,
	// software distributed under the License is distributed on an
	// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
	// KIND, either express or implied. See the License for the
	// specific language governing permissions and limitations
	// under the License.

	<template>
	<div>
	<a-button
	type="primary"
	@click="createVgpuProfile"
	>
	{{ $t('label.add.vgpu.profile') }}
	</a-button>
	<list-view
	:tabLoading="tabLoading"
	:columns="columns"
	:items="items"
	:columnKeys="columnKeys"
	:selectedColumns="selectedColumnKeys"
	ref="listview"
	@update-selected-columns="updateSelectedColumns"
	@refresh="this.fetchData"
	>
	<template #actionButtons="{ record }">
	<a-space>
	<!-- Edit Action -->
	<a-tooltip :title="$t('label.edit')">
	<a-button
	type="primary"
	size="small"
	shape="circle"
	@click="editVgpuProfile(record)"
	>
	<template #icon><edit-outlined /></template>
	</a-button>
	</a-tooltip>

	<!-- Delete Action -->
	<a-popconfirm
	:title="$t('message.confirm.delete.vgpu.profile')"
	@confirm="deleteVgpuProfile(record)"
	okText="Yes"
	cancelText="No"
	>
	<a-tooltip :title="$t('label.delete')">
	<a-button
	type="primary"
	danger
	size="small"
	shape="circle"
	>
	<template #icon><delete-outlined /></template>
	</a-button>
	</a-tooltip>
	</a-popconfirm>
	</a-space>
	</template>
	</list-view>

	<!-- Create/Update VGPU Profile Modal -->
	<a-modal
	:visible="showModal"
	:title="isEditing ? $t('label.update.vgpu.profile') : $t('label.add.vgpu.profile')"
	:closable="true"
	:maskClosable="false"
	:footer="null"
	@cancel="closeModal"
	centered
	width="450px"
	>
	<a-spin
	:spinning="actionLoading"
	v-ctrl-enter="handleSubmit"
	>
	<a-form
	ref="vgpuForm"
	:model="form"
	:rules="rules"
	layout="vertical"
	@finish="handleSubmit"
	>
	<a-form-item
	v-for="field in formFields"
	:key="field.key"
	:name="field.key"
	:ref="field.key"
	:label="field.label"
	>
	<!-- Input field -->
	<a-input
	v-if="field.type === 'input'"
	v-model:value="form[field.key]"
	:placeholder="field.placeholder"
	:v-focus="field.key === 'name'"
	/>

	<!-- Number input field -->
	<a-input-number
	v-else-if="field.type === 'number'"
	style="width: 100%"
	v-model:value="form[field.key]"
	:min="field.min"
	:placeholder="field.placeholder"
	/>
	</a-form-item>

	<div
	:span="24"
	class="action-button"
	>
	<a-button @click="closeModal">{{ $t('label.cancel') }}</a-button>
	<a-button
	type="primary"
	ref="submit"
	@click="handleSubmit"
	>{{ $t('label.ok') }}</a-button>
	</div>
	</a-form>
	</a-spin>
	</a-modal>
	</div>
	</template>

	<script>
	import { reactive, toRaw } from 'vue'
	import { getAPI, postAPI } from '@/api'
	import { genericCompare } from '@/utils/sort.js'
	import ListView from '@/components/view/ListView'
	import { EditOutlined, DeleteOutlined } from '@ant-design/icons-vue'

	export default {
	name: 'VgpuProfilesTab',
	components: {
	ListView,
	EditOutlined,
	DeleteOutlined
	},
	props: {
	resource: {
	type: Object,
	required: true
	},
	loading: {
	type: Boolean,
	required: true
	}
	},
	data () {
	return {
	tabLoading: false,
	columnKeys: ['name', 'videoram', 'maxheads', 'resolution', 'maxvgpuperphysicalgpu'],
	selectedColumnKeys: [],
	columns: [],
	cols: [],
	items: [],
	showModal: false,
	isEditing: false,
	selectedVgpuProfile: null,
	actionLoading: false,
	form: {},
	rules: {},
	formFields: [],
	createApiParams: {},
	updateApiParams: {}
	}
	},
	computed: {
	isAdmin () {
	return this.$store.getters.userInfo.roletype === 'Admin'
	}
	},
	created () {
	this.fetchApiParams()
	this.selectedColumnKeys = this.columnKeys
	this.updateColumns()
	this.fetchData()
	},
	methods: {
	fetchApiParams () {
	this.createApiParams = this.$getApiParams('createVgpuProfile') \|\| {}
	this.updateApiParams = this.$getApiParams('updateVgpuProfile') \|\| {}
	},
	generateFormFields (isEdit = false) {
	const apiParams = isEdit ? this.updateApiParams : this.createApiParams
	const fields = []
	const fieldOrder = ['name', 'description', 'videoram', 'maxheads', 'maxresolutionx', 'maxresolutiony', 'maxvgpuperphysicalgpu']

	fieldOrder.forEach(paramName => {
	if (paramName === 'gpucardid' && !isEdit) return // Skip gpucardid for create as it's auto-populated

	const param = apiParams[paramName]
	if (!param && !isEdit) return // For create, only include params that exist in API

	const field = {
	key: paramName,
	label: this.$t(`label.${paramName}`),
	required: param?.required \|\| (paramName === 'name' \|\| paramName === 'maxvgpuperphysicalgpu'),
	placeholder: param?.description \|\| this.$t(`label.${paramName}`),
	type: this.getFieldType(paramName, param)
	}

	fields.push(field)
	})

	this.formFields = fields
	},
	getFieldType (paramName, param) {
	const numberFields = ['maxvgpuperphysicalgpu']
	const selectFields = []

	if (numberFields.includes(paramName)) {
	return 'number'
	} else if (selectFields.includes(paramName)) {
	return 'select'
	} else {
	return 'input'
	}
	},
	initForm (isEdit = false, record = null) {
	const formData = {
	name: '',
	description: '',
	maxvgpuperphysicalgpu: 1
	}

	if (isEdit && record) {
	formData.name = record.name \|\| ''
	formData.description = record.description \|\| ''
	formData.maxvgpuperphysicalgpu = record.maxvgpuperphysicalgpu \|\| 1
	formData.videoram = record.videoram \|\| 0
	formData.maxheads = record.maxheads \|\| 0
	formData.maxresolutionx = record.maxresolutionx \|\| 0
	formData.maxresolutiony = record.maxresolutiony \|\| 0
	}

	this.form = reactive(formData)

	const validationRules = {
	name: [{ required: true, message: this.$t('message.error.required.input') }],
	maxvgpuperphysicalgpu: [{ required: true, message: this.$t('message.error.required.input') }]
	}

	this.rules = reactive(validationRules)
	},
	createVgpuProfile () {
	this.isEditing = false
	this.selectedVgpuProfile = null
	this.generateFormFields(false)
	this.initForm(false)
	this.showModal = true
	},
	editVgpuProfile (record) {
	this.isEditing = true
	this.selectedVgpuProfile = record
	this.generateFormFields(true)
	this.initForm(true, record)
	this.showModal = true
	},
	closeModal () {
	this.showModal = false
	this.isEditing = false
	this.selectedVgpuProfile = null
	this.actionLoading = false
	},
	filterOption (input, option) {
	return option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
	},
	handleSubmit (e) {
	if (e) {
	e.preventDefault()
	}
	if (this.actionLoading) return

	this.$refs.vgpuForm.validate().then(() => {
	this.actionLoading = true
	const formRaw = toRaw(this.form)

	if (this.isEditing) {
	this.updateVgpuProfile(formRaw)
	} else {
	this.createVgpuProfileSubmit(formRaw)
	}
	}).catch((error) => {
	this.$message.error(error)
	})
	},
	createVgpuProfileSubmit (formRaw) {
	const params = {
	name: formRaw.name,
	gpucardid: this.resource.id,
	maxvgpuperphysicalgpu: formRaw.maxvgpuperphysicalgpu
	}

	if (formRaw.description) {
	params.description = formRaw.description
	}

	postAPI('createVgpuProfile', params).then(response => {
	this.$message.success(this.$t('message.success.create.vgpu.profile'))
	this.closeModal()
	this.fetchData()
	}).catch(error => {
	console.error('Error creating vGPU profile:', error)
	this.$notifyError(error)
	}).finally(() => {
	this.actionLoading = false
	})
	},
	updateVgpuProfile (formRaw) {
	const params = {
	id: this.selectedVgpuProfile.id
	}

	// Add only fields that have values
	if (formRaw.name) {
	params.name = formRaw.name
	}
	if (formRaw.description) {
	params.description = formRaw.description
	}
	if (formRaw.maxvgpuperphysicalgpu) {
	params.maxvgpuperphysicalgpu = formRaw.maxvgpuperphysicalgpu
	}

	postAPI('updateVgpuProfile', params).then(() => {
	this.$message.success(this.$t('message.success.update.vgpu.profile'))
	this.closeModal()
	this.fetchData()
	}).catch(error => {
	console.error('Error updating vGPU profile:', error)
	this.$notifyError(error)
	}).finally(() => {
	this.actionLoading = false
	})
	},
	deleteVgpuProfile (record) {
	postAPI('deleteVgpuProfile', {
	id: record.id
	}).then(() => {
	this.$message.success(this.$t('message.success.delete.vgpu.profile'))
	this.fetchData()
	}).catch(error => {
	console.error('Error deleting vGPU profile:', error)
	this.$notifyError(error)
	})
	},
	fetchData () {
	this.fetchVgpuProfiles()
	},
	updateSelectedColumns (key) {
	if (this.selectedColumnKeys.includes(key)) {
	this.selectedColumnKeys = this.selectedColumnKeys.filter(x => x !== key)
	} else {
	this.selectedColumnKeys.push(key)
	}
	this.updateColumns()
	},
	updateColumns () {
	this.columns = []
	for (var columnKey of this.columnKeys) {
	if (!this.selectedColumnKeys.includes(columnKey)) continue
	this.columns.push({
	key: columnKey,
	title: columnKey === 'name' ? this.$t('label.vgpu.profile') : this.$t('label.' + String(columnKey).toLowerCase()),
	dataIndex: columnKey,
	sorter: (a, b) => { return genericCompare(a[columnKey] \|\| '', b[columnKey] \|\| '') }
	})
	}

	// Add actions column for admin users
	if (this.isAdmin) {
	this.columns.push({
	key: 'vgpuActions',
	title: this.$t('label.actions'),
	width: 120,
	fixed: 'right'
	})
	}

	if (this.columns.length > 0) {
	this.columns[this.columns.length - 1].customFilterDropdown = true
	}
	},
	fetchVgpuProfiles () {
	getAPI('listVgpuProfiles', {
	gpucardid: this.resource.id
	}).then(res => {
	this.items = res?.listvgpuprofilesresponse?.vgpuprofile \|\| []
	})
	}
	}
	}
	</script>