You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: source/installguide/primate.rst
+238-8Lines changed: 238 additions & 8 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -146,18 +146,248 @@ Example nginx config:
146
146
}
147
147
}
148
148
149
+
Basic Customization in CloudStack Primate
150
+
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
151
+
Users can now customize the CloudStack's user interface by means of a configutaion file - config.json found at
152
+
https://github.com/apache/cloudstack-primate/tree/master/public. The public/config.json file (or correspondingly, the dist/config.json file, after build, which is available at /usr/share/cloudstack-management/webapp/primate/) can be used to modify the theme, logos, etc. to align to one's requirement.
153
+
154
+
To change the logo,login banner,error page icon, etc. the following details can be editted in config.json:
155
+
156
+
.. parsed-literal::
157
+
158
+
"logo": "assets/logo.svg",
159
+
"banner": "assets/banner.svg",
160
+
"error": {
161
+
"404": "assets/404.png",
162
+
"403": "assets/403.png",
163
+
"500": "assets/500.png"
164
+
}
165
+
166
+
where,
167
+
168
+
- logo changes the logo top-left side image.
169
+
- banner changes the login banner image.
170
+
- error.404 change the image of error Page not found.
171
+
- error.403 change the image of error Forbidden.
172
+
- error.500 change the image of error Internal Server Error.
173
+
174
+
Customization of themes is also possible, such as, modifying banner width, general color, etc. Thsi can be done by editting the "theme" section of the config.json file:
- @primary-color change the major background color of the page (background button, icon hover, etc).
204
+
- @success-color change success state color.
205
+
- @processing-color change processing state color. Exp: progress status.
206
+
- @warning-color change warning state color.
207
+
- @error-color change error state color.
208
+
- @heading-color change table header color.
209
+
- @text-color change in major text color.
210
+
- @text-color-secondary change of secondary text color (breadcrumb icon).
211
+
- @disabled-color change disable state color (disabled button, switch, etc).
212
+
- @border-color-base change in major border color.
213
+
- @logo-width change the width of the logo top-left side.
214
+
- @logo-height change the height of the logo top-left side.
215
+
- @banner-width changes the width of the login banner.
216
+
- @banner-height changes the height of the login banner.
217
+
- @error-width changes the width of the error image.
218
+
- @error-height changes the height of the error image.
219
+
220
+
Some assorted primary theme colours:
221
+
222
+
- Blue: #1890FF
223
+
- Red: #F5222D
224
+
- Yellow: #FAAD14
225
+
- Cyan: #13C2C2
226
+
- Green: #52C41A
227
+
- Purple: #722ED1
228
+
229
+
Also, to add other properties, we can use the theme.config.js file which based on the Ant Design Vue Less variable. Refer: https://www.antdv.com/docs/vue/customize-theme/#Ant-Design-Vue-Less-variables
230
+
These properties can then be modified or set in the config.json file. On refresh Vue's modify variable enables the run-time modification of Less variables. When called with new values, the Less file is recompiled without reloading.
231
+
232
+
CloudStack Primate also supports adding custom plugins, which can be defined in config.json. These plugins are then implemented as iframes in Primate.
233
+
234
+
.. parsed-literal ::
235
+
236
+
"plugins": [
237
+
{
238
+
"name": "ExamplePlugin",
239
+
"icon": "appstore",
240
+
"path": "example.html"
241
+
}
242
+
]
243
+
244
+
Advanced Customization
245
+
~~~~~~~~~~~~~~~~~~~~~~
246
+
247
+
CloudStack Primate has been developed in a way that makes it easy for one to add new features/components with minimal effort as most of the complexity has been abstracted by means of auto-generation of basic forms.
248
+
249
+
Defining a new Section
250
+
~~~~~~~~~~~~~~~~~~~~~~
251
+
252
+
A new section may be added by creating a javascript file in **src/config/section/** of the root directory. Correspondingly, this newly added configuration file (e.g., newSection.js), defining the section, needs to be imported in the **src/config/router.js** configuration file and rules need to be added to the *asyncRouterMap*, so as to render the matched component for the given path
253
+
254
+
.. code-block :: javascript
255
+
256
+
import newSection from '@/config/section/newSection'
257
+
258
+
[ ... snipped ... ]
259
+
260
+
generateRouterMap(newSection),
261
+
262
+
An existing or new section config/js file must export the following parameters:
263
+
264
+
- name: unique path in URL
265
+
- title: the name to be displayed in navigation and breadcrumb
266
+
- icon: the icon to be displayed, from AntD's icon set https://vue.ant.design/components/icon/
267
+
- children: (optional) array of resources sub-navigation under the parent group
268
+
- permission: when children are not defined, the array of API to check against allowed auto-discovered APIs
269
+
- columns: when children is not defined, list of column keys
270
+
- component: when children is not defined, the custom component for rendering the route view
271
+
272
+
For example, see src/config/section/compute.js and src/config/section/project.js.
273
+
274
+
The children should have:
275
+
276
+
- name: unique path in the URL
277
+
- title: the name to be displayed in navigation and breadcrumb
278
+
- icon: the icon to be displayed, from AntD's icon set https://vue.ant.design/components/icon/
279
+
- permission: the array of API to check against auto-discovered APIs
280
+
- columns: list of column keys for list view rendering
281
+
- details: list of keys for detail list rendering for a resource
282
+
- tabs: array of custom components that will get rendered as tabs in the resource view
283
+
- component: the custom component for rendering the route view default list view (table)
284
+
- actions: arrays of actions/buttons
285
+
286
+
Action API
287
+
~~~~~~~~~~
288
+
289
+
If a user wants to add an action button to perform as the name implies a specific action, without having to implement a custom component, one may use the Action API in the correspondins section's javascript file. The sections are defined under src/config/section path of the root directory.
290
+
The actions defined for a child shows up as a group of buttons on the default autogen view (that shows tables, actions etc.). Each action item should define:
291
+
292
+
293
+
- api: The CloudStack API for the action
294
+
- icon: the icon to be displayed from AntD's icon set https://vue.ant.design/components/icon/
295
+
- label: The action button's name
296
+
- docHelp: Allows to provide a link to a document to provide details on the action
297
+
- listView: (boolean) whether to show the action button in list view (table)
298
+
- dataView: (boolean) whether to show the action button in resource/data view
299
+
- groupAction: Whether the button supports groupable actions when multiple items are selected in the table
300
+
- args: list of API arguments to render/show on auto-generated action form
301
+
- show: function that takes in a records and returns a boolean to control if the action button needs to be shown or hidden
302
+
- popup: (boolean) when true, displays any custom component in a popup modal than in its separate route view
303
+
- component: the custom component to render the action (in a separate route view)
However, if one's requirement is to perform further operations as part of their form, then a custom Vue component must be defined under the src/views/ folder of the root directory and the defined component must them be imported in the corresponding section's javascript file.
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).
341
+
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.
// columns can also be defined as a function, so as to conditionally restrict view of certain columns
351
+
columns: () => {
352
+
var fields = ['name', 'hypervisor', 'ostypename']
353
+
if (['Admin', 'DomainAdmin'].includes(store.getters.userInfo.roletype)) {
354
+
fields.push('account')
355
+
}
356
+
...
357
+
}
358
+
359
+
Resource Detail View Customization
360
+
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
361
+
From the List View of the resources, on can navigate to the individual resource's detail view, which in CloudStack Primate we refer to as the *Resource View* by click on the specific resource.
362
+
The Resource View has 2 sections:
363
+
- InfoCard to the left that has basic/ minimal details of that resource
364
+
- and the tabs to the right that can be either defined as custom components or if we just want basic details of the resource to be displayed we may use the *DetailsTab* to render the required details of the resource. You can control what needs to be displayed by spcifying their names in the *details* array.
365
+
The names specified in the details array should correspond to the api parameters
0 commit comments