Customizing the MaDDash Web Interface¶

Web Server¶

The maddash-webui is a web application that runs under Apache. The web scripts and resources are installed in /usr/lib/maddash/maddash-webui. In addition, an Apache configuration file is installed at /etc/httpd/conf.d/apache-maddash.conf that sets-up the /maddash-webui URL. It also creates a reverse proxy for request to the URL /maddash to localhost port 8881. If you modify the server port for maddash, you will also need to update this configuration.

Visual Customizations¶

The interface provides some customization options in the JSON config file /etc/maddash/maddash-webui/config.json. It provides the following options:

Name	Type	Required	Description
title	String	Yes	The title displayed at the very top of the web page
defaultDashboard	String	Yes	The name of the default dashboard to display when someone visits /maddash-webui. It MUST match the name of a dashboard defined in your maddash-server.yaml file.
colors	JSON object	No	The default color profile for grids. See Customizing Dashboard Colors
alternateColors	JSON object array	No	A list of color profile objects describing alternate color options that are seletcable under the Settings > Colors menu. See Customizing Dashboard Colors
enableAdminUI	Boolean	No	A ‘true’ or ‘false’ value indicating you want Server Settings… to appear in the Settings menu of the web interface. Note this does NOT disable direct access to the administrator UI, just removes it from the menu.
addNodeURL	String	No	A URL where users may find more information about adding a node to your dashboard(s). If populated an extra item will be added to the menu bar displayed for users.
externalLinksMenu	JSON object	No	See Adding a Custom List of External Links
privacyPolicyLink	String	No	Sets the URL used in the “Privacy Policy” link at the bottom of each page. Default is the perfSONAR project privacy policy.
grids	JSON object	No	Custom layout features for individual grids. See grids properties section.

Customizing Dashboard Colors¶

Customizing the Default Color Profile¶

Note

Color customization was added in version 1.2 of MaDDash and not supported in previous versions.

You may customize the colors used by the dashboards for each check state using the colors option. This option takes the form of an object consisting of key/value pairs. The key is the state value and the value is the color to be displayed for that state value. See Status-Codes for a complete listing of status codes and their meanings. The value is the color as a CSS color name (e.g. black) or hexadecimal (e.g. #000000). For example, the default value looks like the following:

"colors": {
    "0": "#009E73",
    "1": "#F0E442",
    "2": "#CC79A7",
    "3": "#E69F00",
    "4": "#56B4E9",
    "5": "#000000"
}

If you wanted to change everything in the UNKNOWN state to be shade of gray instead of orange you could provide something like the following:

"colors": {
    "0": "#009E73",
    "1": "#F0E442",
    "2": "#CC79A7",
    "3": "#A2A2A2",
    "4": "#56B4E9",
    "5": "#000000"
}

Note

It should be noted you must define states 0-5 every time you provide the colors. It is not enough to just define the subset you want to change. In addition, some checks may have custom states greater than 5. You may optionally include any states greater than five in the configuration, but 0-5 are always required. See documentation for a specific check if you are unsure if it has any custom states.

Customizing User Selectable Color Profiles¶

Note

User selectable color profiles were added in version 2.0 of MaDDash and not supported in previous versions.

You can also add a list of color options from which users can select via the Settings > Colors menu. Selecting an item from this menu will set a cookie that saves the choice for future visits as well. An example configuration is show below:

"alternateColors": [
    {
        "name": "Classic",
        "colors": {
            "0": "green",
            "1": "yellow",
            "2": "red",
            "3": "orange",
            "4": "gray",
            "5": "black"
        }
    },
    {
        "name": "Gray Unknown",
        "colors": {
            "0": "#009E73",
            "1": "#F0E442",
            "2": "#CC79A7",
            "3": "#A2A2A2",
            "4": "#56B4E9",
            "5": "#000000"
        }
    },
    {
        "name": "Forest Rain",
        "colors": {
            "0": "#33a02c",
            "1": "#b2df8a",
            "2": "#1f78b4",
            "3": "#a6cee3",
            "4": "#eeeeee",
            "5": "black"
        }
    },
    {
        "name": "Heatwave",
        "colors": {
            "0": "#fecc5c",
            "1": "#fd8d3c",
            "2": "#e31a1c",
            "3": "#ffffb2",
            "4": "#eeeeee",
            "5": "black"
        }
    },
    {
        "name": "Old Movie",
        "colors": {
            "0": "#cccccc",
            "1": "#969696",
            "2": "#525252",
            "3": "#f7f7f7",
            "4": "#eeeeee",
            "5": "black"
        }
    },
    {
        "name": "Pastel",
        "colors": {
            "0": "#8dd3c7",
            "1": "#ffffb3",
            "2": "#fb8072",
            "3": "#bebada",
            "4": "#eeeeee",
            "5": "black"
        }
    },
    {
        "name": "Sea Breeze",
        "colors": {
            "0": "#bae4bc",
            "1": "#7bccc4",
            "2": "#2b8cbe",
            "3": "#f0f9e8",
            "4": "#eeeeee",
            "5": "black"
        }
    }
 ]

In the example each object has a name and a colors array. The name is how the profile will be displayed in the Colors menu. The colors is exactly the same form as when you define the color set, essentially an object mapping states to CSS color names or hexadecimal colors values.

Note

If no alternateColors are listed then the Colors menu will not be displayed under the Settings menu

Adding a Custom List of External Links¶

Note

The External Links menu was added in version 1.2 of MaDDash and not supported in previous versions.

You may define a list of links that will appear in the top navigation menu of all MaDDash pages. You may add links to anything with a URL including items such as your organization’s homepage, links to other MaDDash instances or other monitoring tools. The block contains a list of objects with a label and a URL. The label is the text displayed in the drop-down menu and the URL is the hyperlink to be opened when that text is clicked. An example of the configuration block is below:

"externalLinksMenu": {
    "menuLinks": [
        {
           "label": "ESnet",
            "url": "http://www.es.net"
        },
        {
           "label": "perfSONAR",
           "url": "http://www.perfsonar.net"
        }
    ]
}

By default the dopdown appear as External Links” in the top menu. If you would like to change this you can customize the label with the **menuLabel* property:

"externalLinksMenu": {
    "menuLabel": "Other Resources",
    "menuLinks": [
        {
           "label": "ESnet",
            "url": "http://www.es.net"
        },
        {
           "label": "perfSONAR",
           "url": "http://www.perfsonar.net"
        }
    ]
}

A table with a full listing of the properties detailed above can be seen below:

Name	Type	Required	Description
menuLabel	String	No	Optional label that appears in menu bar for external links menu. Default is “External Links”
menuLinks	Array	Yes	Array of objects describing each link you want displayed in the menu.
menuLinks[n].label	String	Yes	The text to appear in the menu for an individual link
menuLinks[n].url	String	Yes	The URL to open when a link is clicked

grids properties¶

grids are specified as follows (where gridName is the name of the grid you want to adjust):

"grids":{
        "gridName":{
            ...properties...
        },
    }

The following properties are available:

Name	Type	Required	Description
cellSize	Integer	No	The height and width in pixels of one cell in the grid
cellPadding	Integer	No	The space between cells of the grid
textBlockSize	Integer	No	NO LONGER SUPPORTED in 2.0 This option as been obsoleted by auto-sizing and is ignored