.. index:: settings file, constants.js ================= Frontend settings ================= Besides the :doc:`backend settings `, several frontend configuration options are available to customize your Fleio installation. .. contents:: :local: .. _constants-js: .. _frontend-config: How to edit frontend configuration files ======================================== Frontend configuration files format is JSON. There is one configuration file for each file panel: * ``enduser.config.json`` * ``staff.config.json`` When editing a JSON configuration file, make sure you do not add a comma (``,``) after the last item in a JavaScript dictionary, otherwise it will lead to a syntax error. E.g.: .. code-block:: javascript { "urls": { "backendApiUrl": "//localhost:8000/api/", // comma, since other items follow "homeName": "enduser", "enduserUrl": "/" // last item, no comma }, // more items after this one, so comma is required // .. Edit frontend config files with ``fleio edit`` ---------------------------------------------- To edit these files, you can use the shortcut command ``fleio edit``: .. code-block:: bash fleio edit enduser.config.json # or fleio edit staff.config.json Alternatively, access config files with ``fleio bash`` ------------------------------------------------------ The three JSON files are stored in docker volumes and can also be accessed with the utility command ``fleio bash`` (which launches a temporary docker container, just to allow you to edit docker volume contents). After you run ``fleio bash``, you can access the frontend configuration files in the following paths: * ``/var/webapps/fleio/frontend/enduser/assets/config/enduser.config.json`` * ``/var/webapps/fleio/frontend/staff/assets/config/staff.config.json`` How to see all available frontend settings ========================================== To see all available frontend settings (documented or undocumented), enter the ``frontend`` docker container and print the content of the following files. .. important:: Do not edit the files mentioned below. These are base configuration files and docker containers should be :ref:`treated as immutable`. Use the content of these files just for your reference and overwrite properties as described in :ref:`frontend-config`. .. code-block:: bash # launch bash in the frontend container docker exec -it fleio-frontend-1 bash # list all available end-user settings cat /var/webapps/fleio/frontend/enduser/assets/config-base/enduser.config.json # staff settings cat /var/webapps/fleio/frontend/staff/assets/config-base/staff.config.json # press CTRL + D to exit a docker container .. _top-logo: How to change the top logo ========================== Depending on which panel's logo you want to customize, place the logo files in one of the following paths in the frontend docker container: .. code-block:: bash /var/webapps/fleio/frontend/staff/assets/img/staff/ /var/webapps/fleio/frontend/enduser/assets/img/enduser/ .. note:: The logo image should be 140 x 70 pixels in size, otherwise the browser resizes the image to this dimension and the logo may get distorted. It's recommended that the logo image has a transparent background. To preserve you changes on upgrades or restarts, you need to :ref:`create a custom Docker image`. The next step is to change the ``logoDark`` and ``logoLight`` in the following files: * ``fleio edit staff.config.json`` * ``fleio edit enduser.config.json`` You will have to replace ``null`` with ``"REPLACE_ME_WITH_THE_CORRECT_FILENAME.png"`` .. _default-language: How to change default language ============================== In order to change the default language for Angular panels, you need to change the ``defaultLanguage`` variable from the :ref:`end-user or staff panels`. .. code-block:: javascript { // ... "settings": { // .. "defaultLanguage": "en", } } Change the page size ==================== Fleio uses infinite scroll to display objects list. By default, 20 objects are loaded at once and you can change this default value for end-user or staff by :ref:`editing the corresponding configuration file`. .. code-block:: javascript { // ... "settings": { // .. "paginateBy": 20 } } Customize page title ==================== In order to customize the page title of a certain panel, be it end-user or staff, you will have to :ref:`edit the configuration file` and add the following line: .. code-block:: javascript { // ... "settings": { // .. "baseTitle": "Fleio", // This is the prefix that is added the HTML of each page } } How to change instance create form display ========================================== Instance create form display can be changed using the ``flavorsAsCards`` property from :ref:`the config file<frontend-config>`. When set to false, the instance create form will look like this: .. image:: /_static/images/enduser/cloud/instances/create-instance-dropdown.png When the setting is set to true, the flavors will be displayed as cards. Their description will appear in each card's body: .. image:: /_static/images/enduser/cloud/instances/create-instance-flavor-cards.png .. code-block:: javascript { // ... "settings": { // .. "instanceForm": { // .. "flavorsAsCards": false, // .. }, // .. } Root password related settings ============================== By default the **Root password** field is displayed and optional in the create instance form. You can make the field mandatory or hide it with these settings in :ref:`the config file<frontend-config>`: .. code-block:: javascript { // ... "settings": { // .. "instanceForm": { // ... "showRootPasswordField": true, "rootPasswordFieldMandatory": false, // note that the trailing comma must be present ONLY if there is another item after it. // Last item must be without a comma // ... } } } Show/hide cloud-init user data ============================== The **Cloud-init user data** field allows the user to fill in a ``cloud-init`` script when creating a compute instance: .. image:: /_static/images/enduser/cloud/instances/cloud-init-user-data.png By default, this field is displayed, but you can change that by adding/changing the ``showUserData`` property in one of the :ref:`frontend configuration files<frontend-config>`. .. code-block:: javascript { // ... "settings": { // .. "instanceForm": { // ... "showUserData": true, // ... } } } .. _frontend-volume-settings: Volume related setting ====================== If you set ``hideVolumeSelectionForFlavorsWithDisk`` property from :ref:`the config file<frontend-config>` to ``true``, the volume create options on instance create dialog will be hidden when the flavor local disk space is greater than 0. If you want to set a default volume type you will need to add a dictionary for ``defaultVolumeType`` property, as shown in the following example: .. code-block:: javascript { // ... "settings": { // .. "instanceForm": { // .. "hideVolumeSelectionForFlavorsWithDisk": false, "defaultVolumeType":{ 'Region one': 'VOLUME_TYPE1', 'Region two': 'VOLUME_TYPE2' // note that last item in a JavaScript dictionary is not ended with a comma } // last item, no comma }, // .. } } .. _storage-related-options: Storage realated option ======================= The following OpenStack principles are applied regarding the storage options: * local storage option does not show if the selected flavor has 0 disk space * local storage option will be displayed if the flavor has more than 0 disk space * if ``hideVolumeSelectionForFlavorsWithDisk`` is enabled, then only the local storage option will be available (the previous condition must be satisfied) .. _hide-volume-options: Hide volume options for flavors with disk size ============================================== Set property ``hideVolumeSelectionForFlavorsWithDisk``. See :ref:`frontend-volume-settings`. Global setting for card or table items display ============================================== By default, most of the list views in Fleio show items as cards, you can make all show as lists/tables by using the ``itemsDisplayAsList`` property in the :ref:`frontend configuration files<frontend-config>`. Note that the user will still be able to change the display mode for a page using the top-right of a page. The ``itemsDisplayAsList`` property only defines the **default** display mode. .. code-block:: javascript { // ... "settings": { // .. "itemsDisplayAsList": false, // only use a comma if there are other items after this one // .. } } Add/remove menu items or categories =================================== See :ref:`add-custom-menu-items`. .. _frontend-add-credit-url: How to set a custom add credit URL ================================== The **Add credit** button from the end-user's dashboard can be customized to any link. You can for instance set an external link, if you are using another system (like WHMCS) to handle invoicing and credit card payments. .. image:: /_static/images/enduser/billing/add-credit-button.png More on that on :ref:`settings.py ADD_CREDIT_URLS setting documentation <backend-add-credit-url>`. The Billing panel that shows client's credit and the **Add credit** button can be hidden completely through an :ref:`end-user feature toggle <enduser-feature-toggle>`. .. _logout-url: How to set custom logout URL ============================ By default your customers will be redirected to the login page when they log out. If you want to set a custom URL you need to set the ``logoutRedirect`` property :ref:`in the config file<frontend-config>`. .. code-block:: javascript { // ... "settings": { // .. "logoutRedirect": null, // null is the default value and it redirect to the standard Login page // .. } } Changing text editor on tickets plugin, etc. ============================================ The rich text editor found on tickets plugin, notification templates edit page, etc. can be customized by adding/editing the ``tinyMCEOptions`` dictionary in the :ref:`JSON config files<frontend-config>`. .. code-block:: javascript { // ... "settings": { // .. // Add the tinyMCEOptions section if it's missing from your file. You don't need to add all properties below, but // only the ones that you want to customize. "tinyMCEOptions": { "base_url": "/tinymce", "height" : "390", "relative_urls": true, "convert_urls": false, "browser_spellcheck": true, "inline": false, "plugins": "link code lists autolink", "toolbar": [ "undo redo | styleselect | bold italic underline | alignleft aligncenter alignright alignjustify | link code | bullist numlist | removeformat" ], "skin": "oxide", "theme": "silver", "menubar": "", "branding": false, "contextmenu": false // last item in a JSON/JavaScript dictionary must be without a trailing comma }, // .. } } White label =========== If you want to remove the small Fleio link that appears at the bottom of the login screen and at the bottom of the left menu, you have to purchase the white-label option. Changing the :ref:`top logo is a simple setting <top-logo>` and does not require you to pay the white-label fee. Custom favicon ============== See :ref:`frontend customization with docker below<docker-custom-frontend>`. Adding new custom themes ======================== To define new Angular themes see :doc:`/developer/angular-frontend-customization`. Adding custom headers in requests ================================= See :ref:`customizing-headers`. Add HTML head or body tags ========================== See :ref:`docker-custom-frontend`. Include custom JavaScript/CSS code ================================== See :ref:`docker-custom-frontend`. See :doc:`/developer/angular-frontend-customization`.