[Moai] Secret listing page

[ledongthuc]

Breaking from #1, this ticket focuses on the secret listing page to convert VueJS to Next using Moai.

1. Summary

• Secret listing page is the first page when access AWS Secrets Manager UI
• The page will show secrets from the selected region.
• The page supports a simple searching box to filter result

2. Features

2.1. Mockup UI

2.2. Region selector

• Region selector show list of AWS region we support to show secrets in.
• The content data is loaded from the following API the first time when the page is loaded.

Connection type	HTTP request
Method	GET
Route	/api/aws/regions

• When the user navigates between screens (list -> detail -> list), don't need to send the request to re-get the regions.

2.3. Secrets listing

• The table secrets will show all secrets in the selected region (2.2)
• If the region is not selected, show a message to the user about the selected region.
• The secrets are loaded from the following API every time the region is changed

Connection type	HTTP request
Method	GET
Route	/api/secrets
Query parameters	?region=eu-north-1 ( get from region API )

• Columns:

Column	Example
Name	test_string
Accessed at	2021-06-28T00:00:00Z
Created at	2021-06-28T00:00:00Z
Updated at	2021-06-28T00:00:00Z
Rotated	✓
Rotated at	2021-06-28T00:00:00Z
Deleted at	2021-06-28T00:00:00Z

• When the user clicks on the column name, it sort asc/desc by this column. It will be good if we can show which column is sorted and which direction.
• When the user clicks on secrets, go to the Detail page. The list will send a field ARN from the secret, to the detail page. ARN shouldn't attach on the query string to avoid tracing/log.

2.4. Input filter

• Only support client filter
• If the input filter is empty, show all secrets
• Filter on "Name", if any secrets contain input filter content
• Cached the last filter on local storage and reload it when they access this page again.