General UI flow
Last updated
Last updated
This is a description of some general UI components used throughout the system.
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.
The grid provides several administrative actions.
To add an entry, select the "+" button at the top of the display.
To edit an entry, select the pencil button at the right side of the corresponding grid row.
Above the grid, an input control accepts regular expressions for finding matching entries in the grid.
By default, all the grid columns are sortable. Just select the corresponding column header (the cursor view changes to a pointer when hovering).
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.
The component header includes the following 3 blocks:
The entry's main info (on the left: the entry's name and id)
Entry selector (the dropdown on the right)
Actions block (a set of buttons on the right)
Each entry has a user-defined name, and an auto-generated id for internal use.
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.
The actions block usually consists of at least 3 buttons:
Close the details page and go back to the grid page
Delete the entry usually after confirming the deletion via a modal confirmation window. Sometimes this button is unavailable, depending on the specific entry type.
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.
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:
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.
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:
503 Service Unavailable
Challenge
Tag Only
Redirect
Request Header
Response
Ban (not available in Tag Rules)
The request will be blocked with a 503 error. This is the default action for Rate Limits, and is also available for Tag Rules.
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.
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.
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:
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.
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:
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.
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:
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.
This action is only available for Rate Limits. When selected, the component changes as follows:
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.
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.)
