Start Working With CloudStack-UI

This page is aimed to help you to make first steps at CloudStack-UI. If you have never worked with CloudStack before, you should start with installing the CloudStack platform. Follow the instruction in the official documentation.

Then deploy CloudStack-UI (see the instructions for deployment).

Logging In

To enter the platform use your credentials provided by an administrator:

Note

Required fields are marked with asterisks (*).

  • User name * - The user ID of your account.

  • Password * - The password associated with the user ID.

  • Domain - Specify domain when you log in. CloudStak-UI supports three ways to do it. Choose the one which is more convenient for you:

    1. Enter a domain in the field under the “Show advanced options” button adv icon.
    2. Administrator can set a domain in configurations. Domain field will be prepopulated with the specified value. It is more convenient for a user as he/she does not need to enter the domain every time at logging in. In this case the domain field can be hidden by clicking adv icon. Find more information on the feature configuration at the configuration guide.
    3. Another way to log in is to enter a URL in the format http://<ip-address>/login?domain=<domain>. The domain will be prepopulated in the logging in form with the value that is specified in the URL. Please, note, the domain value in URL will override the domain set in the configurations by Administrator.
_images/LoginScreen.png

Push “Login” to proceed to CloudStack. You will see the first section - Virtual Machines.

To the left you can see the main navigation bar. It shows the user name and allows moving from section to section.

_images/NavBar_AccDetails.png

When entering the system, a user sees the Virtual Machines section at the second level of the menu. At the first level, the main navigation bar has two expandable sections with the following nested menu items:

  • Virtual Machines
    • Virtual machines
    • Storage
    • Images
    • Snapshots
    • Firewall
    • SSH keys
    • Logout
  • Accounts
    • Accounts
    • Activity log
    • Settings
    • Logout

Note

The Logout section is placed at both levels.

To move between levels, click menu icon and then one of the two levels.

_images/NavBar_2level.png

Resource Usage

In this section you can see the resource statistics: used and free VMs, computational resources, volumes and storage space.

Unfold Resource Usage panel in the upper part of the screen. It provides information on the following resources:

  1. Virtual machines;
  2. Computational resources - CPU, RAM;
  3. Volumes and snapshots;
  4. Storage - primary and secondary.

You can switch between used or free resources by clicking the option you need above the resource data list.

A user can see the resource usage statistics for his/her user only.

_images/VMs_ResourceUsage_User1.png

A Domain Administrator can view resources for his/her account and for the whole domain.

Notifications on Pending Operations

In the upper-right corner of the screen, you can see the list of pending operations by clicking a bell button bell icon. It informs you of the latest operations in the system. You can clear the list after its reviewing by deleting every notification one by one or by clicking “CLEAR ALL” at the list bottom.

_images/VMs_Alerts2.png

Alongside with the notification panel, the action completion confirmation additionally appears in the snackbar notification at the page bottom.

_images/Snackbar.png

In case of errors at data loading the snackbar also notifies of them. In this case it has a refresh button that refreshes the whole app.

_images/VMs_Snackbar2.png

Support Information in Error Messages

A user can add the information on support services to all error messages to let users get assistance faster in case of a failure. Support information may include contacts e.g. phone numbers, emails or any other details. It should be specified in the support-info.md file stored in a special folder of the project. We support localization of the file to Russian. As you see, there are two files in the folder:

  • support-info.md - the main file that contains contact details of the technical support team in English,
  • support-info.ru.md - contains a Russian version of the main file.

If you use the prepared Docker image to deploy the project, you should map your custom support information files via Docker-volume when running the container. For example:

docker run -d -p 80:80 --name cloudstack-ui \
          -e CLIENT_ENDPOINT=http://cloudstack/client \
          -e BASE_HREF=base_href \
          -v /path/to/config.json:/static/config/config.json \
          -v /path/to/support-info.md:/static/support/support-info.md \
          -v /path/to/support-info.ru.md:/static/support/support-info.ru.md \
          bitworks.software:8443/cloudstack-ui:1.411.29

The support details specified in the file will display under a drop-down menu. Click it in the error message window to expand.

_images/RN_Supportinfo.png

Adding Custom Scripts

We support adding custom JavaScript scripts to extend the UI functionality with the services necessary for a user. For example, using custom scripts a user can add JivoSite or Google Analytics widgets to the interface.

Custom scripts are added at running the CloudStack-UI Docker-container. All that a user should do is to define the /scripts/custom.js custom script content and map it via a Docker-volume. By default, the /scripts/custom.js file is empty.

As a result, you can see the added service in the UI:

_images/RN_CustomScr.png