diff --git a/docs/03-getting-started/02-admin-dashboard.mdx b/docs/03-getting-started/02-admin-dashboard.mdx index d11be578..b1dba225 100644 --- a/docs/03-getting-started/02-admin-dashboard.mdx +++ b/docs/03-getting-started/02-admin-dashboard.mdx @@ -6,50 +6,220 @@ title: Admin Dashboard Node is gated with authentication. In order to interact with the node from any app, you need to register a decentralized identity. We have build an Admin Dashboard which is a web application designed to streamline the management of -node states within your system. Seamlessly connected with the API provided by -the Admin Client API, this user interface offers a user-friendly platform for -overseeing and controlling various aspects of your node infrastructure. +node states within your system. Connected with the API provided by the Admin +Client API, this user interface offers a user-friendly platform for overseeing +and controlling various aspects of your node infrastructure. ### Access Admin Dashboard -Admin Dashboard is published to GitHub pages so you can access it directly from -the browser. +The node operates as a server for the Admin Dashboard and can be accessed +directly through a web browser. -Admin dashboard is available at -https://calimero-network.github.io/admin-dashboard/. +The Admin Dashboard is locally available at +`http://localhost:NODE_PORT/admin-dashboard/` but you can also use application +deployed on Github Pages at +`https://calimero-network.github.io/admin-dashboard/`. > **_NOTE:_** Update `NODE_PORT` in the placeholder `http://localhost:NODE_PORT` > with the `--server-port` value defined during node setup in > [Getting-started](./01-setup.mdx) -After the initial setup yourou will see login page. On the first login, your -selected wallet will be used as a root key to use further functionalities. +### Setup -### Admin Dashboard functionalities: +After the initial setup you will see the setup page where you need to enter node +URL. -#### Identity +![SetupPage](/admin-dashboard-functions/1setup-node-url.png) -Preview added root keys or add new root key. +> **NOTE**: Error occurs if the entered URL is not valid node url or the node is +> not running -![Identity](/admin-dashboard/identity.png) +![SetupPageError](/admin-dashboard-functions/setup-node-url-error.png) -#### Contexts +### Login + +After button "Set node url" is clicked you will be redirected to select wallet +page. + +![WalletSelector](/admin-dashboard-functions/2select-wallet.png) + +In this example we will be using Metamask with Ethereum Mainnet. + +Press "Connect wallet" button to invoke Metamask extension which is needed to +continue login process. + +![ConnectWallet](/admin-dashboard-functions/3connect-wallet.png) + +When wallet is connected you will be shown the next screen with displayed +connected wallet address. + +![ConnectedAccount](/admin-dashboard-functions/4logged-in-acc.png) + +To finish login process press "Sign authentication transaction" which will +envoke Metamask to sign transaction. + +![SignLoginTxn](/admin-dashboard-functions/5metamask-sign-msg-login.png) + +> **NOTE**: Displayed "BNB 2" text is just a wallet name and this is configued +> in Metamask. You might have default wallet name "Account" or "Account 1" + +On the first login, your selected wallet will be used as a root key to use +further functionalities. + +> **NOTE**: If you logout and try to login with different wallet that is not the +> root key you will get the next error + +![SinginError](/admin-dashboard-functions/7no-root-key-login.png) + +After this request is confimed you will be redirected to the Identity page of +the Admin Dashboard where you can see your root key. + +![IdentityPage](/admin-dashboard-functions/6identity.png) + +### Add new root key + +To add new root key press the "Add new root key" button and you will go through +the same process. + +In this example we will be using Metamask again but this time we will use BNB +Chain network with different wallet. + +![AddNewRootKey](/admin-dashboard-functions/8add-new-root-key.png) + +Again, sign the transaction. + +![ConfirmNewRootKey](/admin-dashboard-functions/9add-root-key-txn.png) + +You will be redirected back the Identity page and in the list you can see that +the new root key with BNB network was added. + +![NewRootkeyList](/admin-dashboard-functions/10new-root-key-added.png) + +### Applications + +Navigate to "Applications" tab to view table of available, owned or installed +applications. + +![Applications](/admin-dashboard-functions/12applications.png) + +#### Publish new application + +To publish new application click on the "Publish new application" button and you +will be redirected to next page. + +> **NOTE**: For this step you will need a NEAR blockchain account because the +> Package Manager application is a smart contract deployed on the NEAR +> blockchain. + +> This is needed because from your account you interact with the smart contract +> deployed on the NEAR blockchain + +> You can create NEAR blockchain account with +> [MyNEARWallet](https://testnet.mynearwallet.com/) + +> Package Manager contains metadata of applications used by the node + +Metadata for each application contains: + +- Package name `String` +- Description `String` - optional and can be set to "-" +- Repository URL `String` - optional and can be set to "-" +- Path `String` - IPFS URL to the application binary, filled automatically when + application wasm is uploaded +- Version `String` - has "X.X.X" format (e.g. 0.0.1 or 1.0.0) +- Noted `String` - optional and can be set to "-" +- Hash `String` - Hash value of application wasm, filled automatically when + application wasm is uploaded + +![PublishApp](/admin-dashboard-functions/13upload-new-app.png) + +After you fill in the Package name, Description, Repository URL click on the +"Upload wasm" button and select your application `.wasm` file (e.g. only-peers +application wasm). + +![SelectWasmFile](/admin-dashboard-functions/13select-wasm.png) + +After file was uploaded to IPFS, Path and Hash field will be filled +automatically and only thing left is to fill in version and notes. + +![UploadedWasm](/admin-dashboard-functions/13filled-in-fields.png) + +After you click the "Publish" button, application will be published in the +Package Manager contract and it will be available in the available applications +list. + +You will get a status popup message. + +![ApplicationPublished](/admin-dashboard-functions/13published-application.png) + +#### Install available application + +To install one of the available application from the Package Manager click on +the "install new application" button. + +![Applications](/admin-dashboard-functions/12applications.png) + +You will be redirected to install page where you can browse available +applications or upload a new one. + +![InstallApplication](/admin-dashboard-functions/14install-application.png) + +On "Browse" button click you will get a available application list where you can +select application you want to install. + +![BrowseApplications](/admin-dashboard-functions/14browse-applications.png) + +On selection the application Metadata will be displayed and you can press +"install application" button to install the application. + +![BrowseApplications](/admin-dashboard-functions/15install-application.png) + +On sucessfull installation you will get status popup. + +![ApplicationInstalled](/admin-dashboard-functions/16application-installed.png) + +### Context Preview context which you have already joined or invited. You can also create a new context. -![Contexts](/admin-dashboard/contexts.png) +![ContextList](/admin-dashboard-functions/18context-list.png) + +#### Start new context + +To start new context press the "Start new context" button on previous page. + +You can select application with which you want to create a new context or you +can upload a new application. + +![StartContextSelect](/admin-dashboard-functions/19start-context-select.png) + +If your application requires initialization parameters, you can select the +'Initialize application state' option during startup. + +> **NOTE**: To understand this lets take two examples. +> +> 1. Consider a JavaScript class MyClass. In some cases, you can create an +> instance using `new MyClass()` if there are no initialization parameters +> required. +> 2. However, if your class requires specific parameters for initialization, you +> need to pass them like this: `new MyClass({ application_name: name })`. +> This is similar to your WASM application's requirement for initialization +> parameters during its startup process. + +![StartContextSelected](/admin-dashboard-functions/20start-context-selected.png) + +On button "Start" click the new context will be created and you will get status +popup. -#### Applications +![Context installed](/admin-dashboard-functions/21context-installed.png) -Preview available applications from other developers or applications you -published. You can also publish new application +You can now see created context in the context list. -![Applications](/admin-dashboard/applications.png) +![ContextListInstalled](/admin-dashboard-functions/22context-list.png) -#### Export +### Export -Allows you to export you identity on current device and import it on new device -so you have seamless experience while onboarding to another device. +Allows you to export you identity on current device and import it on new device. -![Export](/admin-dashboard/export-identity.png) +![ContextList](/admin-dashboard-functions/23export-identity.png) diff --git a/static/admin-dashboard-functions/10new-root-key-added.png b/static/admin-dashboard-functions/10new-root-key-added.png new file mode 100644 index 00000000..95c14109 Binary files /dev/null and b/static/admin-dashboard-functions/10new-root-key-added.png differ diff --git a/static/admin-dashboard-functions/12applications.png b/static/admin-dashboard-functions/12applications.png new file mode 100644 index 00000000..55e87044 Binary files /dev/null and b/static/admin-dashboard-functions/12applications.png differ diff --git a/static/admin-dashboard-functions/13filled-in-fields.png b/static/admin-dashboard-functions/13filled-in-fields.png new file mode 100644 index 00000000..f621bea4 Binary files /dev/null and b/static/admin-dashboard-functions/13filled-in-fields.png differ diff --git a/static/admin-dashboard-functions/13published-application.png b/static/admin-dashboard-functions/13published-application.png new file mode 100644 index 00000000..3e7995df Binary files /dev/null and b/static/admin-dashboard-functions/13published-application.png differ diff --git a/static/admin-dashboard-functions/13select-wasm.png b/static/admin-dashboard-functions/13select-wasm.png new file mode 100644 index 00000000..3ba15d11 Binary files /dev/null and b/static/admin-dashboard-functions/13select-wasm.png differ diff --git a/static/admin-dashboard-functions/13upload-new-app.png b/static/admin-dashboard-functions/13upload-new-app.png new file mode 100644 index 00000000..bee60339 Binary files /dev/null and b/static/admin-dashboard-functions/13upload-new-app.png differ diff --git a/static/admin-dashboard-functions/14Install-application.png b/static/admin-dashboard-functions/14Install-application.png new file mode 100644 index 00000000..1d38976a Binary files /dev/null and b/static/admin-dashboard-functions/14Install-application.png differ diff --git a/static/admin-dashboard-functions/14browse-applications.png b/static/admin-dashboard-functions/14browse-applications.png new file mode 100644 index 00000000..996cdac3 Binary files /dev/null and b/static/admin-dashboard-functions/14browse-applications.png differ diff --git a/static/admin-dashboard-functions/15Install-application.png b/static/admin-dashboard-functions/15Install-application.png new file mode 100644 index 00000000..03f9b923 Binary files /dev/null and b/static/admin-dashboard-functions/15Install-application.png differ diff --git a/static/admin-dashboard-functions/16application-installed.png b/static/admin-dashboard-functions/16application-installed.png new file mode 100644 index 00000000..eb5be802 Binary files /dev/null and b/static/admin-dashboard-functions/16application-installed.png differ diff --git a/static/admin-dashboard-functions/17application-installed-list.png b/static/admin-dashboard-functions/17application-installed-list.png new file mode 100644 index 00000000..d2067071 Binary files /dev/null and b/static/admin-dashboard-functions/17application-installed-list.png differ diff --git a/static/admin-dashboard-functions/18context-list.png b/static/admin-dashboard-functions/18context-list.png new file mode 100644 index 00000000..c2f02e85 Binary files /dev/null and b/static/admin-dashboard-functions/18context-list.png differ diff --git a/static/admin-dashboard-functions/19start-context-select.png b/static/admin-dashboard-functions/19start-context-select.png new file mode 100644 index 00000000..842415b9 Binary files /dev/null and b/static/admin-dashboard-functions/19start-context-select.png differ diff --git a/static/admin-dashboard-functions/1setup-node-url.png b/static/admin-dashboard-functions/1setup-node-url.png new file mode 100644 index 00000000..1b41ecd5 Binary files /dev/null and b/static/admin-dashboard-functions/1setup-node-url.png differ diff --git a/static/admin-dashboard-functions/20start-context-selected.png b/static/admin-dashboard-functions/20start-context-selected.png new file mode 100644 index 00000000..127c95ee Binary files /dev/null and b/static/admin-dashboard-functions/20start-context-selected.png differ diff --git a/static/admin-dashboard-functions/21context-installed.png b/static/admin-dashboard-functions/21context-installed.png new file mode 100644 index 00000000..87cda26d Binary files /dev/null and b/static/admin-dashboard-functions/21context-installed.png differ diff --git a/static/admin-dashboard-functions/22context-list.png b/static/admin-dashboard-functions/22context-list.png new file mode 100644 index 00000000..4668af71 Binary files /dev/null and b/static/admin-dashboard-functions/22context-list.png differ diff --git a/static/admin-dashboard-functions/23export-identity.png b/static/admin-dashboard-functions/23export-identity.png new file mode 100644 index 00000000..778a7733 Binary files /dev/null and b/static/admin-dashboard-functions/23export-identity.png differ diff --git a/static/admin-dashboard-functions/2select-wallet.png b/static/admin-dashboard-functions/2select-wallet.png new file mode 100644 index 00000000..1ae42334 Binary files /dev/null and b/static/admin-dashboard-functions/2select-wallet.png differ diff --git a/static/admin-dashboard-functions/3connect-wallet.png b/static/admin-dashboard-functions/3connect-wallet.png new file mode 100644 index 00000000..361db1fa Binary files /dev/null and b/static/admin-dashboard-functions/3connect-wallet.png differ diff --git a/static/admin-dashboard-functions/4logged-in-acc.png b/static/admin-dashboard-functions/4logged-in-acc.png new file mode 100644 index 00000000..2e4ae95a Binary files /dev/null and b/static/admin-dashboard-functions/4logged-in-acc.png differ diff --git a/static/admin-dashboard-functions/5metamask-sign-msg-login.png b/static/admin-dashboard-functions/5metamask-sign-msg-login.png new file mode 100644 index 00000000..7cc91648 Binary files /dev/null and b/static/admin-dashboard-functions/5metamask-sign-msg-login.png differ diff --git a/static/admin-dashboard-functions/6identity.png b/static/admin-dashboard-functions/6identity.png new file mode 100644 index 00000000..e9a335fb Binary files /dev/null and b/static/admin-dashboard-functions/6identity.png differ diff --git a/static/admin-dashboard-functions/7no-root-key-login.png b/static/admin-dashboard-functions/7no-root-key-login.png new file mode 100644 index 00000000..45b1d70b Binary files /dev/null and b/static/admin-dashboard-functions/7no-root-key-login.png differ diff --git a/static/admin-dashboard-functions/8add-new-root-key.png b/static/admin-dashboard-functions/8add-new-root-key.png new file mode 100644 index 00000000..d2eb52b0 Binary files /dev/null and b/static/admin-dashboard-functions/8add-new-root-key.png differ diff --git a/static/admin-dashboard-functions/9add-root-key-txn.png b/static/admin-dashboard-functions/9add-root-key-txn.png new file mode 100644 index 00000000..ed98eaf6 Binary files /dev/null and b/static/admin-dashboard-functions/9add-root-key-txn.png differ diff --git a/static/admin-dashboard-functions/setup-node-url-error.png b/static/admin-dashboard-functions/setup-node-url-error.png new file mode 100644 index 00000000..3b10a795 Binary files /dev/null and b/static/admin-dashboard-functions/setup-node-url-error.png differ