Unable to access exact web ui to delete SSH Key Pair Button

[apraba05]

I'm currently looking to find where the SSH Key Pair Button can be removed from the UI as our customers don't need this. I've dug through the chunk files but there is no clear indication as to where the exact file or where I can delete the UI is.

Thanks!

[boring-cyborg[bot]]

Thanks for opening your first issue here! Be sure to follow the issue template!

[apraba05]

This is the current view but we are unable to find the exact source code as to where we remove these components as the user doesn't need access to this or needs to view this. Thanks!

[bernardodemarco]

Hello, @apraba05

This is the source code that controls the display of the SSH key pairs section:

cloudstack/ui/src/config/section/compute.js

Lines 827 to 910 in 39c5641

	{
	name: 'ssh',
	title: 'label.ssh.key.pairs',
	icon: 'key-outlined',
	docHelp: 'adminguide/virtual_machines.html#using-ssh-keys-for-authentication',
	permission: ['listSSHKeyPairs'],
	searchFilters: ['name', 'domainid', 'account', 'fingerprint'],
	columns: () => {
	var fields = ['name', 'fingerprint']
	if (['Admin', 'DomainAdmin'].includes(store.getters.userInfo.roletype)) {
	fields.push('account')
	if (store.getters.listAllProjects) {
	fields.push('project')
	}
	fields.push('domain')
	} else if (store.getters.listAllProjects) {
	fields.push('project')
	}
	return fields
	},
	resourceType: 'SSHKeyPair',
	details: ['id', 'name', 'fingerprint', 'account', 'domain', 'project'],
	related: [{
	name: 'vm',
	title: 'label.instances',
	param: 'keypair'
	}],
	tabs: [
	{
	name: 'details',
	component: shallowRef(defineAsyncComponent(() => import('@/components/view/DetailsTab.vue')))
	},
	{
	name: 'comments',
	component: shallowRef(defineAsyncComponent(() => import('@/components/view/AnnotationsTab.vue')))
	}
	],
	actions: [
	{
	api: 'createSSHKeyPair',
	icon: 'plus-outlined',
	label: 'label.create.ssh.key.pair',
	docHelp: 'adminguide/virtual_machines.html#creating-the-ssh-keypair',
	listView: true,
	popup: true,
	component: shallowRef(defineAsyncComponent(() => import('@/views/compute/CreateSSHKeyPair.vue')))
	},
	{
	api: 'deleteSSHKeyPair',
	icon: 'delete-outlined',
	label: 'label.remove.ssh.key.pair',
	message: 'message.please.confirm.remove.ssh.key.pair',
	dataView: true,
	args: ['name', 'account', 'domainid', 'projectid'],
	mapping: {
	name: {
	value: (record, params) => { return record.name }
	},
	projectid: {
	value: (record, params) => { return record.projectid }
	},
	account: {
	value: (record, params) => { return record.account }
	},
	domainid: {
	value: (record, params) => { return record.domainid }
	}
	},
	groupAction: true,
	popup: true,
	groupMap: (selection, values, record) => {
	return selection.map(x => {
	const data = record.filter(y => { return y.id === x })
	return {
	name: data[0].name,
	account: data[0].account,
	domainid: data[0].domainid,
	projectid: data[0].projectid
	}
	})
	}
	}
	]
	},

The best approach to hide it from end users is by revoking access to the APIs that manage SSH key pairs, which essentially are: listSSHKeyPairs, createSSHKeyPair and deleteSSHKeyPair. To revoke the APIs access, I'd recommend creating a custom role based on the existing role that is in use by the end user accounts.

[apraba05]

I'm actually just looking to remove it completely from the UI. This would then ensure that the user is unable to view it all. It's fine even if the Administrators are unable to view it too. I needed to do it for the Affinity Groups and User Data.

Thanks for your help @bernardodemarco!

[bernardodemarco]

@apraba05, as far as I know, it’s currently only possible to hide UI sections by denying access to the APIs associated with those sections. For example, the image below shows the Compute menu for an account that does not have access to the listSSHKeyPairs API:

To completely remove sections from the UI, you would need to modify the source code. The UI development docs explain how the menu sections are configured and can be used as a reference for removing specific sections.