Scada-LTS icon indicating copy to clipboard operation
Scada-LTS copied to clipboard

Published 20 hours ago • verified publisher icon SCADA-LTS

DataSources as new Vue.js page for all types

Open Limraj opened this issue 2 years ago • 0 comments

Expected Behavior

Create DataSource for Scada-LTS using dedicated Vue.js page. That will help to migrate to REST API that will be able to handle the requests.

Actual Behavior

Creation of DataSource using DWR mechanism

Current status

Most of the business logic has been created in the frontend side. There is still a need to create a DataSource API and the reliable endpoint that will serve and receive data from User Interface. Diagram with component relations is provided below.

Continuation of #1641

3 of all 31 DataSource type definitions were implemented on the new UI.

  • [ ] 1-wire
  • [ ] ASCII File Reader
  • [ ] ASCII Serial
  • [ ] BACnet I/P
  • [ ] DNP3 IP
  • [ ] DNP3 Serial
  • [ ] Dr.Storage HT-5B
  • [ ] Galil DMC-21x2
  • [ ] HTTP Image
  • [ ] HTTP Receiver
  • [ ] HTTP Retriever
  • #2353
  • #2354
  • [ ] IEC101 Ethernet
  • [ ] IEC101 Serial
  • [ ] Internal Data Source
  • #2355
  • #2356
  • [ ] JMX
  • #2357
  • #2358
  • [ ] M Bus
  • [ ] Meta Data Source
  • #2351
  • #2352
  • [ ] Mitsubishi Alpha2
  • [x] Modbus IP
  • [ ] Modbus Serial
  • [ ] NMEA listener
  • [ ] OPC DA
  • [ ] OpenV4J
  • [ ] Pachube
  • [ ] POP3 Email
  • [ ] Serotonin Persistent TCP
  • [x] SNMP
  • [ ] SQL Data Source
  • [ ] Tango
  • [x] Virtual Data Source
  • [ ] VMStat Data Source

DataSourceVueMap

Main View with DataSource table:

overview It is sortable so it is easy to find a specific DataSource. On the top right corner there is a "Add" button to create a new Data source.

Data Source creation:

When that button is clicked the Dialog is showing up. This is dynamic component that depending on the selected Data Source type from the select-box in the up-right corner of that dialog change the configuration. This example present the Virtual Data Source settings: ds_creation

Data Source edit

Next screen show us the Edit Data Source panel from SNMP Data Source. It base on the same "config.vue" template but it has different behaviour and labels. Adding a new type of Data Source is quite easy becouse it require only adding a new module inside vue components and import it in a specific location. ds_edit

Data Point creation

Each data source after creation contains no data. So there is another pop-up that is responsible for creating a Data Point. On that example is presented the Virtual Data Point with Numeric value type that has opened Change Type select box. You can see that there is a validation on Data Point Name field marked. Until it is empty user will not be able to save that Data Point dp_creation

Data Point edition

This picture presents the Data Point Creation dialog much better. But this time this dialog is responisble for editing component data. It has plenty of combinations inside but that is only a brief summary how it looks like now. dp_edit

Limraj avatar Mar 22 '22 22:03 Limraj