storj/satellite/admin/ui
Ivan Fraixedes 583cdc6e0e satellite/admin/ui: Create Web UI v1
This commit crate the Satellite Admin Web UI v1

* Bootstrap the files installing the project template:
  https://github.com/sveltejs/template
* Add the prettier prettier-plugin-svelte NPM packages as dev
  dependencies.
* Add an empty prettierrc.toml.
* Transform the project template to use Typescript rather than
  Javasript. See: https://github.com/sveltejs/template#using-typescript
* Replace the default favicon by the Storj logo.
* Create components in companion of some Typescript code which allows to
  generate a simple HTML page based on an opinionated definition of API.
* Implement all the Admin API client calls in the format that the UI
  generator components requires for rendering the UI from them.

Change-Id: I58fa586d68dc8998e5d89db169b8e90204f0a96d
2021-11-09 09:59:35 +00:00
..
.vscode satellite/admin/ui: Create Web UI v1 2021-11-09 09:59:35 +00:00
public satellite/admin/ui: Create Web UI v1 2021-11-09 09:59:35 +00:00
src satellite/admin/ui: Create Web UI v1 2021-11-09 09:59:35 +00:00
.gitignore satellite/admin/ui: Create Web UI v1 2021-11-09 09:59:35 +00:00
.prettierrc.toml satellite/admin/ui: Create Web UI v1 2021-11-09 09:59:35 +00:00
package-lock.json satellite/admin/ui: Create Web UI v1 2021-11-09 09:59:35 +00:00
package.json satellite/admin/ui: Create Web UI v1 2021-11-09 09:59:35 +00:00
README.md satellite/admin/ui: Create Web UI v1 2021-11-09 09:59:35 +00:00
rollup.config.js satellite/admin/ui: Create Web UI v1 2021-11-09 09:59:35 +00:00
tsconfig.json satellite/admin/ui: Create Web UI v1 2021-11-09 09:59:35 +00:00

Admin UI

Implementation details

This is a project based on the Svelte template for apps.

The project templated was converted to Typescript following the instructions on its README.

The Web App is currently straightforward as we specified that v1 would be.

The v1 is just a simple web page that exposes the Admin API through some forms and allow to a call the API without needing to use some HTTP REST clients (e.g. Postman, cURL, etc.). It doesn't offer any user authentication; the user has to know the API authorization token for using it.

The UI has a set of Svelte components that collaborate together to render an HTML form with input elements from the Admin API client. The Svelte components expect some values of a certain Typescript interfaces, types, and classes, for being able to dynamically render the HTML form and elements.

Each source has a brief doc comment about its functionality.

Development

Install the dependencies...

npm install

...then start Rollup:

npm run dev

Navigate to localhost:5000. You should see your app running.

By default, the server will only respond to requests from localhost. To allow connections from other computers, edit the sirv commands in package.json to include the option --host 0.0.0.0.

Building for production mode

To create an optimised version of the app:

npm run build