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
The CloudStack UI helps the CloudStack administrator provision, view,
69
79
and manage the cloud infrastructure, domains, user accounts, projects,
70
80
and configuration settings. The first time you start the UI after a
@@ -168,94 +178,121 @@ new, unique value.
168
178
169
179
#. Type the new password, and click OK.
170
180
181
+
Basic UI Customization
182
+
~~~~~~~~~~~~~~~~~~~~~~
171
183
172
-
Modifying the UI
173
-
----------------
174
-
175
-
Root Administrators can modify some aspect of the UI, like:
176
-
177
-
- Changing the keyboard names/labels (in the "Add Instance" wizard only)
178
-
- Changing the text and the title in the "About" dialog box
179
-
- Changing the Help link
180
-
- Changing the application title on the browser tab
181
-
- Hiding some columns in the Instance Metrics and Volume Metrics tables/views
182
-
183
-
This can be done by editing the file "/usr/share/cloudstack-management/webapp/config.js" on your management server(s).
184
-
After the file change, you do need to clear your browser cache. Hiding columns in Instance Metrics and Volume Metrics tables/views is only applicable to end users - i.e. those are always visible to Root Administrators.
185
-
186
-
This is the default config.js content (comments ommitted for brevity):
187
-
188
-
.. code:: javascript
189
-
190
-
cloudStackOptions = {
191
-
aboutText:"label.app.name", // This is the text shown in the 'About' box
192
-
aboutTitle:"label.about.app", // This is the Application 'Title' shown in the 'About' box
193
-
docTitle:"label.app.name", // This is the Application 'Title' shown on browser tab.
194
-
helpURL:"http://docs.cloudstack.apache.org/", // This is the URL that opens when users click Help
195
-
keyboardOptions: {
196
-
"us":"label.standard.us.keyboard",
197
-
"uk":"label.uk.keyboard",
198
-
"fr":"label.french.azerty.keyboard",
199
-
"jp":"label.japanese.keyboard",
200
-
"sc":"label.simplified.chinese.keyboard"
201
-
},
202
-
hiddenFields: { // Fields to be hidden only for users in the tables below
Example of a changed config.js file is given bellow, as well as the apropriate screenshots which reflect (most of) those changes. Make sure that you are logged in as end user account.
209
-
210
-
.. code:: javascript
211
-
212
-
cloudStackOptions = {
213
-
aboutText:"Custom About text!", // This is the text shown in the 'About' box
214
-
aboutTitle:"Custom About Title!", // This is the Application 'Title' shown in the 'About' box
215
-
docTitle:"MyCloud", // This is the Application 'Title' shown on browser tab.
216
-
helpURL:"http://help.mycloud.com/", // This is the URL that opens when users click Help
217
-
keyboardOptions: {
218
-
"us":"US",
219
-
"uk":"UK",
220
-
"fr":"FR",
221
-
"jp":"JP",
222
-
"sc":"CN"
223
-
},
224
-
hiddenFields: { // Fields to be hidden only for users in the tables below
Users can now customize the CloudStack's user interface by means of a configuration file at /usr/share/cloudstack-management/webapp/config.json which can be used to modify the theme, logos, etc. to align to one's requirement.
233
185
186
+
To change the logo, login banner, error page icon, etc. the following details can be edited in config.json:
234
187
235
-
|add-instance-keyboards-customized.JPG|
188
+
.. parsed-literal::
236
189
237
-
Notice short keyboard names (based on country code)
190
+
"logo": "assets/logo.svg",
191
+
"banner": "assets/banner.svg",
192
+
"error": {
193
+
"404": "assets/404.png",
194
+
"403": "assets/403.png",
195
+
"500": "assets/500.png"
196
+
}
238
197
198
+
where,
239
199
240
-
|instance-metrics-customized-view.JPG|
200
+
- logo: changes the logo top-left side image.
201
+
- banner: changes the login banner image.
202
+
- error.404: changes the image of error Page not found.
203
+
- error.403: changes the image of error Forbidden.
204
+
- error.500: changes the image of error Internal Server Error.
241
205
242
-
Notice "Zone" column is hidden
206
+
Customization of themes is also possible, such as, modifying banner width, general color, etc. This can be done by editing the "theme" section of the config.json file:
- @logo-background-color changes the logo background color.
243
+
- @project-nav-background-color changes the navigation menu background color of the project.
244
+
- @project-nav-text-color changes the navigation menu background color of the project view.
245
+
- @navigation-background-color changes the navigation menu background color.
246
+
- @navigation-text-color changes the navigation text color.
247
+
- @primary-color: changes the major background color of the page (background button, icon hover, etc).
248
+
- @link-color changes the link color.
249
+
- @link-hover-color changes the link hover color.
250
+
- @loading-color changes the message loading color and page loading bar at the top page.
251
+
- @success-color: changes success state color.
252
+
- @processing-color: changes processing state color. Exp: progress status.
253
+
- @warning-color: changes warning state color.
254
+
- @error-color: changes error state color.
255
+
- @heading-color: changes table header color.
256
+
- @text-color: change in major text color.
257
+
- @text-color-secondary: change of secondary text color (breadcrumb icon).
258
+
- @disabled-color: disable state color (disabled button, switch, etc).
259
+
- @border-color-base: change in major border color.
260
+
- @logo-width: change the width of the logo top-left side.
261
+
- @logo-height: change the height of the logo top-left side.
262
+
- @banner-width: changes the width of the login banner.
263
+
- @banner-height: changes the height of the login banner.
264
+
- @error-width: changes the width of the error image.
265
+
- @error-height: changes the height of the error image.
266
+
267
+
Some assorted primary theme colours:
268
+
269
+
- Blue: #1890FF
270
+
- Red: #F5222D
271
+
- Yellow: #FAAD14
272
+
- Cyan: #13C2C2
273
+
- Green: #52C41A
274
+
- Purple: #722ED1
275
+
276
+
Advanced Customisation
277
+
~~~~~~~~~~~~~~~~~~~~~~
246
278
247
-
Notice "Utilisation" column is hidden
279
+
The advanced UI customisation is possible only by changing JavaScript based config
280
+
files which define rules for sections, names, icons, actions and components and by
281
+
building the UI from the source available on `github.com/apache/cloudstack
282
+
<https://github.com/apache/cloudstack>`_ repository. Advanced customisation may
283
+
require some experience in JavaScript and VueJS, a development and customisation
284
+
guide in the source repository.
248
285
286
+
Known Limitations
287
+
~~~~~~~~~~~~~~~~~
249
288
289
+
The following features are no longer supported or available:
250
290
291
+
- Deployment of a basic zone is not supported. However, existing basic zones will continue to be supported as well as all the actions and views of various resources within the existing basic zone.
292
+
- Support for S3 based secondary storage.
293
+
- NFS secondary staging storage list/resource view and add/update actions.
0 commit comments