Giter VIP home page Giter VIP logo

pcs-remote-monitoring-webui's Introduction

Build Issues Gitter

Azure Remote Monitoring WebUI

Web app for Azure IoT Remote Monitoring Solution dotnet and java.

Prerequisites

1. Deploy a Remote Monitoring Solution

Deploy to Azure

The easiest way to test the Web UI is against a deployed remote monitoring solution. The solution can be deployed via the web interface or via the command line.

It is also possible to deploy the solution locally.

2. Setup Dependencies

  1. Install node.js
  2. For development, you can use your preferred editor

3. Environment variables required to run the Web UI

In order to run the Web UI, the following environment variables need to be created at least once. More information on configuring environment variables here.

  • REACT_APP_BASE_SERVICE_URL = {your-remote-monitoring-endpoint}

The endpoint given above is the base url you navigate to in order to see your deployed solution.

The Web UI configuration is stored in app.config.js. You can edit this file to update the endpoints.

Build, run and test locally

  • cd ~\pcs-remote-monitoring-webui\
  • npm install
  • npm start: Launches the project in browser - watches for code changes and refreshes the page.
  • npm run build: Creates a production ready build.
  • npm test: Runs test in watch mode, press q to quit

Project Structure

The Web UI contains the following sections under src:

  • assets: Contains assets used across the application. These include fonts, icons, images, etc.
  • components: Contains all the application react components. These in include containers and presentational components.
  • services: Contains the logic for making ajax calls as well as mapping request/response objects to front end models.
  • store: Contains all logic related to the redux store.
  • styles: Contains sass used across the application mixins, theming, variables, etc.
  • utilities: Contains helper scripts used across the application.

Contributing to the solution

Please follow our contribution guildelines and the code style conventions.

Customizing the solution

Please see our developer walkthroughs for more information on customizing and adding to the application.

References

This project was bootstrapped with Create React App.

You can find a guide to using it here.

Core technologies overview

pcs-remote-monitoring-webui's People

Contributors

aayush848484 avatar abuentello avatar ashdonaldson14 avatar avneet723 avatar darrenchuang avatar dependabot[bot] avatar dianehu avatar dluc avatar dominicbetts avatar elvinm avatar franji avatar isaac-dasan avatar jillcary avatar maple10001 avatar matrixlice avatar mechaffin avatar microsoftopensource avatar msftgits avatar mujin323 avatar ppathan avatar sakimsft avatar spryor avatar sushilraje avatar swetha571 avatar tiagoshibata avatar timlaverty avatar vishwam avatar xzsheng avatar zhang-hua avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

pcs-remote-monitoring-webui's Issues

Design Auth experience

Type of issue

  • Bug
  • New feature
  • Improvement

Description

We need to design the auth experience for MVP.

Flyout Behavior

Type of issue

  • Bug
  • New feature
  • Improvement

Description

Click on the right side of the screen, controls slide over, push items to left
Click on the left side of the screen, flyout overlays content pane

Dashboard : unit test

Type of issue

  • Bug
  • New feature
  • Improvement

Description

Please add your own issue for unit test

Use ag-grid for data table

Type of issue

  • Bug
  • New feature
  • Improvement

Description

...

Steps to reproduce

  1. [First step]
  2. [Second step]
  3. [and so on...]

Expected behavior

...

Current behavior

...

Known workarounds

...

Possible solution

...

Context and Environment

  • Operating System: ...
  • GitHub branch: ...
  • .NET Runtime: ...

Code to reproduce the bug

using Xunit;

public class MyTest
{
    [Fact]
    public void TestToReproduceIssue()
    {
        // Arrange
        ...

        // Act
        ...

        // Assert
        ...
    }
}

Dashboard Customization UI

Type of issue

  • Bug
  • [x ] New feature
  • Improvement

Description

Implement the dashboard customization UI.

Allows customization of: solution name, solution description, simulated device types, solution logo.

Also allows the creation of a "demo" experience. This demo experience creates a default set of simulated device types/instances (using the simulation microservice) and rules (using the rules microservice).

Device Center: device list

Type of issue

  • Bug
  • [x ] New feature
  • Improvement

Description

This react component includes:

  1. Search box
  2. Device list with pagination
  3. Device groups
  4. "Action on devices" button
  5. "Add devices" button

Dependency

  1. [Hub Manager] API to retrieve device twin with page support
  2. [UI Config] device group query
  3. "Action on devices" flyout
  4. "Add devices" flyout

User Settings

Type of issue

  • Bug
  • New feature
  • Improvement

Description

Need to define all the settings details, currently:

  • timezone

<outside of MVP?>

  • simulation on\off
  • modify project details
  • user profile add/edit/delete

...

Steps to reproduce

  1. [First step]
  2. [Second step]
  3. [and so on...]

Expected behavior

...

Current behavior

...

Known workarounds

...

Possible solution

...

Context and Environment

  • Operating System: ...
  • GitHub branch: ...
  • .NET Runtime: ...

Code to reproduce the bug

using Xunit;

public class MyTest
{
    [Fact]
    public void TestToReproduceIssue()
    {
        // Arrange
        ...

        // Act
        ...

        // Assert
        ...
    }
}

[API Integration] device center components

Type of issue

  • Bug
  • New feature
  • Improvement

Description

...

Steps to reproduce

  1. [First step]
  2. [Second step]
  3. [and so on...]

Expected behavior

...

Current behavior

...

Known workarounds

...

Possible solution

...

Context and Environment

  • Operating System: ...
  • GitHub branch: ...
  • .NET Runtime: ...

Code to reproduce the bug

using Xunit;

public class MyTest
{
    [Fact]
    public void TestToReproduceIssue()
    {
        // Arrange
        ...

        // Act
        ...

        // Assert
        ...
    }
}

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.