| FazBrowse GitHub Viewer | Trending | | Home |
| Tools: [Download Repo ZIP] [View Raw Code] [Original HTTPS Page] |
The modern CloudStack UI is role-based progressive app that uses Vue.js and Ant Design.
JavaScript, Vue.js references:
All the source is in the src directory with its entry point at main.js. The following tree shows the basic UI codebase filesystem:
src
├── assests # sprites, icons, images
├── components # Shared vue files used to render various generic / widely used components
├── config # Contains the layout details of the various routes / sections available in the UI
├── locales # Custom translation keys for the various supported languages
├── store # A key-value storage for all the application level state information such as user info, etc
├── utils # Collection of custom libraries
├── views # Custom vue files used to render specific components
├── ...
└── main.js # Main entry-pointClone the repository:
git clone https://github.com/apache/cloudstack.git cd cloudstack/ui npm install
Override the default CS_URL to a running CloudStack management server:
cp .env.local.example .env.local
Change the CS_URL in the .env.local file To configure https, you may use .env.local.https.example. Build and run:
npm run serve
A new section may be added in src/config/section and in src/config/router.js, import the new section's (newconfig.js as example) configuration file and rules to asyncRouterMap as:
import newconfig from '@/config/section/newconfig' [ ... snipped ... ] generateRouterMap(newSection),
An existing or new section's config/js file must export the following parameters:
See src/config/section/compute.js and src/config/section/project.js for example.
The children should have:
The actions defined for children show up as group of buttons on the default autogen view (that shows tables, actions etc.). Each action item should define:
For Example:
{
api: 'startVirtualMachine',
icon: 'caret-right',
label: 'label.action.start.instance',
message: 'message.action.start.instance',
docHelp: 'adminguide/virtual_machines.html#stopping-and-starting-vms',
dataView: true,
groupAction: true,
groupMap: (selection) => { return selection.map(x => { return { id: x } }) },
show: (record) => { return ['Stopped'].includes(record.state) },
args: (record, store) => {
var fields = []
if (store.userInfo.roletype === 'Admin') {
fields = ['podid', 'clusterid', 'hostid']
}
if (record.hypervisor === 'VMware') {
if (store.apis.startVirtualMachine.params.filter(x => x.name === 'bootintosetup').length > 0) {
fields.push('bootintosetup')
}
}
return fields
},
response: (result) => { return result.virtualmachine && result.virtualmachine.password ? `Password of the VM is ${result.virtualmachine.password}` : null }
}
After having, defined a section and the actions that can be performed in the particular section; on navigating to the section, we can have a list of resources available, for example, on navigating to Compute > Instances section, we see a list of all the VM instances (each instance referred to as a resource).
The columns that should be made available while displaying the list of resources can be defined in the section's configuration file under the columns attribute (as mentioned above). columns maybe defined as an array or a function in case we need to selectively (i.e., based on certain conditions) restrict the view of certain columns.
It also contains router-links to the resource and other related data such as the account, domain, etc of the resource if present
For example:
...
// columns defined as an array
columns: ['name', 'state', 'displaytext', 'account', 'domain'],
// columns can also be defined as a function, so as to conditionally restrict view of certain columns
columns: () => {
var fields = ['name', 'hypervisor', 'ostypename']
if (['Admin', 'DomainAdmin'].includes(store.getters.userInfo.roletype)) {
fields.push('account')
}
...
}
From the List View of the resources, on can navigate to the individual resource's detail view, which in CloudStack UI we refer to as the Resource View by click on the specific resource. The Resource View has 2 sections:
Custom tabs to render custom details, additional information of the resource The list of fields to be displayed maybe defined as an array or a function in case we need to selectively (i.e., based on certain conditions) restrict the view of certain columns. The names specified in the details array should correspond to the api parameters
For example,
...
details: ['name', 'id', 'displaytext', 'projectaccountname', 'account', 'domain'],
...
// To render the above mentioned details in the right section of the Resource View, we must import the DetailsTab
tabs: [
{
name: 'details',
component: () => import('@/components/view/DetailsTab.vue')
},
...
]
Additional tabs can be defined by adding on to the tabs section.
| Back | FazBrowse Home | New Git URL |