Skip to content

UI Reference

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

Table of contents

Structure

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

components_structure

Navigation bar

Navigation bar is implemented so that each page can be entered.

navigation_bar

Used Component : src/Navigation.tsx

HOME

User can see Kibana Dashboard at here.

home_tab

Used Component : src/Home.tsx

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/ManagementComponents DIR.

navbar_management

1. Sensor

Major Components : src/ManagemetComponents/SensorManagement.tsx, src/ManagemetComponents/Register/RegisterSensor.tsx, src/ManagemetComponents/Table/SensorTable

1.1. SensorManagement.tsx

This component manage sensor tab.
Used components : src/ManagemetComponents/Register/RegisterSensor.tsx, src/ManagemetComponents/Table/SensorTable

1.2. 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?

1.3. SensorTable.tsx

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

sensor_table

Used Component : src/ManagementComponents/Pagination.tsx

2. Node

Major Components : src/ManagemetComponents/NodeManagement.tsx, src/ManagemetComponents/Register/RegisterNode.tsx, src/ManagemetComponents/Table/NodeTable.tsx, src/ManagemetComponents/NodeMap.tsx, src/ManagemetComponents/Table/MapNodeTable.tsx

2.1. NodeManagement.tsx

This component manage node tab.
Used components : src/ManagemetComponents/Register/RegisterNode.tsx, src/ManagemetComponents/Table/NodeTable.tsx, src/ManagemetComponents/NodeMap.tsx

2.2. 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
  • 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 select more than a sensor?
    3. Did user select the sink?

Used components : src/ManagemetComponents/LatLngPicker.tsx

2.3. NodeTable.tsx

There are two options user can see the table. If user click All option and default, user can see the node table per sink.
User can see nodes' informations.
User can delete nodes by click wastebasket img.

node_table_all

2.4. NodeMap.tsx, MapNodeTable.tsx

If user click Map option, user can see the node table at map.
Node table show nodes inside of map field.

node_table_map

User can see the node's informations by click the marker.

node_table_map_ex1

If user move map to none marker place, table show anything.
If user move map to marker place, table show marker in that map.

node_table_map_ex2

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

health_state

3. Sink

Major Components : src/Managementcomponents/SinkManagement.tsx, src/Managementcomponents/Register/RegisterSink.tsx, src/Managementcomponents/Table/SinkTable

3.1. SinkManagement.tsx

This component manage sink tab. Used components : src/Managementcomponents/Register/RegisterSink.tsx, src/Managementcomponents/Table/SinkTable

3.2. 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
  • topic : User should select topic.
  • ip:port : User should type sink's ip:port info.
  • valid check
    1. Did user enter the sink name?
    2. Did user select the topic?
    3. Did user enter valid ip:port?

3.3. SinkTable.tsx

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

sink_table

KAFKA

1. Topic

Major Components : src/KafkaComponents/Topic/TopicManagement.tsx, src/KafkaComponents/Topic/RegisterTopic.tsx, src/KafkaComponents/Topic/TopicTable.tsx

1.1. TopicManagement.tsx

This component manage topic tab.
Used components : src/KafkaComponents/Topic/RegisterTopic.tsx, src/KafkaComponents/Topic/TopicTable.tsx

1.2. RegisterTopic.tsx

User can register topic by using this component.
When user click register topic button, a modal will show up.
User enter topic's informations( topic name, partitions, replications ).

For example...

register_topic_ex

1.3. TopicTable.tsx

User can see topics' informations.

topic_table

SERVICE

navbar_service

1. Logic Core

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

Major Components : src/LogicCoreComponents/LogicCoreManagement.tsx, src/LogicCoreComponents/RegisterLogic.tsx, src/LogicCoreComponents/LogicTable.tsx

1.1. LogicCoreManagement.tsx

This component manage Logic Core.

1.2. 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, time scope, value scopes, actions ).
Each element is considered as card at this page.

For example...

show_logic_ex

  • logic name

  • sensor : A logic should be registered with a sensor.

  • 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.

  • Value card and action card can be multiple.

  • Value card and time card can have multiple scopes.

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

1.3. LogicTable.tsx

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

logic_table

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

show_logic_ex

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

KIBANA

User can make and control visulization.

navbar_kibana

1. Visualize

User can make and control visulization.

visualize_tab

Used Component : src/KibanaVisulize.tsx

2. Dashboard

User can make dashboard.

dashboard_tab

Used Component : src/KibanaDashboard.tsx

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