Skip to content

UI Reference

Jump to bottom
Hae Gyeong Im edited this page Sep 13, 2020 · 9 revisions

Introduction to UI

Table of contents

Structure

All components are routed at src/App.tsx.
Simple components' structure...
components_structure

1. Navigation bar

Navigation bar is implemented so that each page can be entered.
Used Compoponent : src/Navigation.tsx
navigation_bar

2. HOME

User can see Kibana Dashboard at here.
Used Component : src/Home.tsx
home_tab

3. MANAGEMENT

MANAGEMENT tab's components consist of Sensor, Node, and Sink tab.
Basically, components consist of sensor, node, and sink. User can manage each sensor, node, and sink at MANAGEMENT tab.
These components are placed in src/components DIR.
navbar_management

3.1. Sensor

Used Components : src/components/SensorManagement.tsx, src/components/Register/RegisterSensor.tsx, src/components/Table/SensorTable

SensorManagement.tsx

This component manage sensor tab.

RegisterSensor.tsx

User can register sensor by using this component.
When user click register sensor button, a modal will show up.
User enter sensor's informations( sensor name, sensor's values' name ).
For example...
register_sensor_ex

  • sensor name
  • sensor's values : Sensor can have more than two values, so user can register all values' name.
  • valid check
    1. Did user enter the sensor name?
    2. Did user enter more than a value name?

SensorTable.tsx

User can see sensors' informations.
User can delete sensors by click wastebasket img.
sensor_table

3.2. Node

Used Components : src/components/NodeManagement.tsx, src/components/Register/RegisterNode.tsx, src/components/Table/NodeTable

NodeManagement.tsx

This component manage node tab.

RegisterNode.tsx

User can register node by using this component.
When user click register node button, a modal will show up.
User enter node's informations( node name, group, location, sensors, sink ).
For example...
register_node_ex

  • node name
  • group : The group of nodes is then used to group when registering logics. (e.g.location info(Seoul, Busan, ...))
  • location : User should type latitude and longitude.
  • sensors : User should select sensors which want to make belong to this node.
  • sink : User should select sink which want to connect.
  • valid check
    1. Did user enter the node name?
    2. Did user enter the group?
    3. Did user select more than a sensor?
    4. Did user select the sink?

NodeTable.tsx

User can see nodes' informations.
User can delete nodes by click wastebasket img.
node_table

User can check nodes' health by color immediatly. Each color represent state of nodes.
health_state

3.3. Sink

Used Components : src/components/SinkManagement.tsx, src/components/Register/RegisterSink.tsx, src/components/Table/SinkTable

SinkManagement.tsx

This component manage sink tab.

RegisterSink.tsx

User can register sink by using this component.
When user click register sink button, a modal will show up.
User enter sink's informations( sink name, location, ip:port ).
For example...
register_sink_ex

  • sink name
  • location
  • ip:port : User should type sink's ip:port info.
  • valid check
    1. Did user enter the sink name?
    2. Did user enter valid ip:port?

SinkTable.tsx

User can see sinks' informations.
User can delete sinks by click wastebasket img.
sink_table

4. SERVICE

navbar_service

4.1. Logic Core

SERVICE tab's component is only Logic core yet.
Components of this are placed in src/LogicCoreComponents DIR.
navbar_management

Used Components (major) : src/LogicCoreComponents/LogicCoreManagement.tsx, src/LogicCoreComponents/RegisterLogic.tsx, src/LogicCoreComponents/LogicCoreTable.tsx

LogicCoreManagement.tsx

This component manage Logic Core.

RegisterLogic.tsx

User can register logic by using this component.
When user click register logic button, a page will show up.
User enter logic's element( logic name, sensor, groups, time scope, value scopes, actions ).
Each element is considered as card at this page.
For example...
register_logic_ex

  • logic name
  • sensor : A logic should be registered with a sensor.
  • group : These groups are that user enters at registering nodes.
  • time scope : User sets time scope when this logic does action.
  • value scope : User sets value scope when this logic does action.
  • action : User sets action which user wants this logic to do.
  • valid check
    1. Did user enter the logic name?
    2. Did user select sensor?
    3. Did user set more than a action.

Used Components : InputActionCard.tsx, InputGroupCard.tsx, InputSensorCard.tsx, InputTimeCard.tsx, InputValueCard.tsx in /src/LogicCoreComponents/InputCards DIR

  • Value card and action card can be multiple.
  • Value card and time card can have multiple scopes.

LogicCoreTable.tsx

User can see logic core here.
User can delete logics by click wastebasket img.
logicCore_table

User can see logic's structure by click show logic button.
show_logic

Used Components : ShowActionCard.tsx, ShowGroupCard.tsx, ShowSensorCard.tsx, ShowTimeCard.tsx, ShowValueCard.tsx in /src/LogicCoreComponents/ShowCards DIR

5. KIBANA

User can make and control visulization. navbar_kibana

5.1. Visualize

User can make and control visulization.
visualize_tab

Used Component : src/KibanaVisulize.tsx

5.2. Dashboard

User can make dashboard.
dashboard_tab

Used Component : src/KibanaDashboard.tsx

6. Alarm

Alerting alarm should be service all time, so this function is implemented by 'web socket'.
This service can be registered by registering logic.

Used Component : src/components/AlertAlarm.tsx

Clone this wiki locally