General UI flow

This is a description of some general UI components used throughout the system.

Common grid-based administration

Pages such as Tag Rules, Rate Limiting, Cloud Functions, and Backend Services are based on a common grid component that displays all the entries of the specified type in the system. For example, here is the grid in use on the Cloud Functions page.

Fig. 1. Grid component on the cloud functions page

The grid provides several administrative actions.

Add entry

To add an entry, select the "+" button at the top of the display.

Edit entry

To edit an entry, select the pencil button at the right side of the corresponding grid row.

Find entries

Above the grid, an input control accepts regular expressions for finding matching entries in the grid.

Sort entries

By default, all the grid columns are sortable. Just select the corresponding column header (the cursor view changes to a pointer when hovering).

Grid details page

This component appears after selecting a pencil button within the grid component. It consists of different fields depending on the displayed data type (cloud function, tag rule, etc.), but the common element is a fixed header. Consider the example of a tag rule details page.

Fig. 2. Tag rule details

The component header includes the following 3 blocks:

1. The entry's main info (on the left: the entry's name and id)

2. Entry selector (the dropdown on the right)

3. Actions block (a set of buttons on the right)

Main info

Each entry has a user-defined name, and an auto-generated id for internal use.

Entry selection

The entry selector dropdown allows you to change the entry currently being displayed and go directly to another without going back to the grid page. Also, since this selector is based on the autocomplete dropdown component (see below), it's possible to fast-search for a desired entry in the dropdown list using regular expressions.

Actions block

The actions block usually consists of at least 3 buttons:

1. Close the details page and go back to the grid page

2. Delete the entry usually after confirming the deletion via a modal confirmation window. Sometimes this button is unavailable, depending on the specific entry type.

3. Save the entry, which means it's possible to change the entry details and save those changes. Sometimes this button is unavailable due to validation issues, depending on the specific entry type.

As shown on fig. 2 above, the actions block may include additional buttons depending on the entry type.

Autocomplete dropdowns

Some pages (such as Web Proxy and individual grid details pages) as well as some general UI components are using an autocomplete dropdown component. It's a dropdown list with a capability of quickly searching for a desired entry using regular expressions. Consider the example of a tag rules details page:

Fig. 3. Autocomplete dropdown

Initially the component looks like an ordinary dropdown, but after it is selected, it splits into 2 parts: a text input and, below it, an entries list. By typing in the text input, it's possible to filter the entries list, leaving only those entries which names contain the typed letters; regular-expressions notation also works here.

When there are a large number of entries, the dropdown list becomes scrollable. If the selected entry is hidden at the bottom of the list, it automatically scrolls down to make this entry visible when the list is opened. When an entry in the list is selected, it gets highlighted in blue and the parent component catches this change; in the example move, the details page will change to display the selected entry.

Action Response

This component is used on the Rate Limiting and Tag Rules details pages. Initially, it's an ordinary dropdown labeled as "Action" with several options available:

1. 503 Service Unavailable

2. Challenge

3. Tag Only

4. Redirect

5. Request Header

6. Response

7. Ban (not available in Tag Rules)

503 Service Unavailable

Fig. 4. Action response component in its initial state on the rate limiting page

The request will be blocked with a 503 error. This is the default action for Rate Limits, and is also available for Tag Rules.

Challenge

For a browser-based web application, a bot challenge will be issued to verify that the requestor is a human using a browser, and not a bot using a headless browser or emulator. If the challenge is failed, the request is blocked.

Tag Only

One or more tags are attached to the request, and processing continues (i.e., it is not blocked).

• For a Tag Rule, the tags are those specified in the Tag Rule.

• For a Rate Limit, the tag is the name of the Rate Limit.

This is the default action for Tag Rules.

Redirect

This action blocks the request with the specified error code, and redirects the requestor to a specified URL. For example, the URL might be a page that says, "Your activity appears suspicious, and your access has been restricted. Contact support if you think this decision was made in error."

When this action is selected, the component changes as follows:

Fig. 5. Action response component with "Redirect" option selected

The component now has a Redirect Status dropdown, with five options for error codes: 301, 302, 303, 307, and 308.

The focus is automatically placed on the Location input, which is a mandatory entry with a regular expression format ^https?://.+$. Until this contains a valid entry, the Save entry button at the top of the page will be disabled, and the control will be highlighted in red.

Request Header

This action does not block the request; it merely adds a header to it for receipt and evaluation by the customer's backend.

When this action is selected, the component changes as follows:

Fig. 6. Action response component with "Request Header" option selected

Both input controls use regular expressions (^[0-9a-zA-Z-_]+$), and are mandatory. Until they contain valid entries, the Save entry button at the top of the page will be disabled, and the invalid control(s) will be highlighted in red.

Response

This action blocks the request, and responds with a custom error code (0-999) and response.

When this action is selected, the component changes as follows:

Fig. 7. Action response component with "Response" option selected

The Status field (which should be a regular expression ^[1-5][0-9][0-9]$) and both Header fields (as regular expressions ^[0-9a-zA-Z-_]+$) are mandatory. Until they contain valid entries, the Save entry button at the top of the page will be disabled, and the invalid control(s) will be highlighted in red.

Ban

This action is only available for Rate Limits. When selected, the component changes as follows:

Fig. 8. Action response component with "Ban" option selected

The Time Frame field is mandatory. Until it contains a valid value (an integer less than 86,400), the Save entry button at the top of the page will be disabled, and the control will be highlighted in red.

The Ban action dropdown is an instance of the Ban Action component, except that it does not contain a "Ban" option.

Common uses for Ban are described in the documentation for the Rate Limiting page.

Links to URLs

This component is used on Rate Limiting, Cloud Functions, and Backend Services details pages. It consists of 2 sections: Add New Link and a list of linked sites. (In Backend Services, Add New Link is unavailable.)

Fig. 9. Links to URLs component