Technical Assessment UI

Introduction

Hello and welcome to your angular coding excercise! During the following process you will be creating a small dashboard using Angular 14.

Procedure

To ensure your privacy, please download the Github repository and submit your work in your own Github repository. Once finished, kindly send us the link to the repository for review.

Duration

You have 5 days to complete this assessment. But do not spend that much! Spend at max 4 hours for the work. It's okay, if you couldn't complete all tasks.

Background

A public JSON REST-API is available that returns a list of target assets from our postman mock server on the endpoint /targetAsset.

What is a target asset? A target asset can be referred to as a remote system such as a hardware or virtual machine.

For the purposes of this task, this API will be referred to as the "TargetAsset-API". A GET-request to that resource will return some sample data in the following format:

REST-API: https://adb47d56-1aa9-4aa7-8ec2-77a923b80a5b.mock.pstmn.io/targetasset

    {
        "id": number,
        "isStartable": boolean,
        "location": string,
        "owner": string,
        "createdBy": string,
        "name": string,
        "status": string,
        "tags": string[],
        "cpu": number,
        "ram": number,
        "createdAt": string,
        "parentId": number
    }

You will create a simple target assets dashboard given by the above data. The user should be able to see all target assets in a minimal view (show only related data), search/filter target assets and see some nice statistics (e.g. total CPU, total Memory).

Following some general advice/tips:

Look and feel (UI/UX): Do some basic UI stylings. But don't overdo it! You can also add any UI library you are comfortable with.
State Management: Apps need to manage state and react to state changes in order to provide an engaging user experience. If you have expirience in state management, don't hesitate to show us!
Unit testing: Create a few meaningful unit tests. Jest is preinstalled and ready to use.

Tasks

Create a new lazy-loaded dashboard module which is accessible by the route /dashboard. For simplicity, we want that all other routes are being redirected to this module.
In this module, create a service, which fetches all target assets from the end point /targetasset.

Note: Since we do not trust our fellow backend engineers to actually return the data in the correct format, remember to make use of Typescripts language features to make sure the data fits your applications needs.
Render all target assets. You don't need to display all data. Just some important ones! vCloud Example
Add a loading indicator when the data are being loaded.
Use the target asset status property to highlight the target asset.
Add an input field where the user is able to filter the target assets by the name and status property.
Above the input field, add some nice statistics calculated by all target assets. e.g. Total of CPUs.
Add a target asset details page. This page is accessible by the route /dashboard/assets/{:id}. List all information in a meaningful way. You might have noticed, the target assets are bound together in a hierarchical order via their parentId property. Use the parentId information to show the name of the parent target asset and create a hyperlink to get to the next target asset.

Armand902 / technical-assessment-ui