sprinteins / oscd-plugins

Built OpenSCD Plugins

OpenSCD Plugins

This repository contains plugins for the OpenSCD ↗ project.

Documentation

A high-level overview of how the documentation is organized will help you know where to look for certain things:

• ☑ How-Tos guide you through the steps involved in addressing key problems and use-cases. They are more advanced than tutorials and assume some knowledge of how the plugins work.
• 👷 Guides describe best practices and principles we follow.
• 🗃 References contain technical reference for APIs and other aspects of the plugins. They describe how it works and how to use it but assume that you have a basic understanding of key concepts.
• 👩‍🏫 Explanations about the architecture and general design of the project

☑ How-Tos

• Setup Project

👷 Guides

• Documentation Guidelines
• Documentation Style Guide

👩‍🏫 Explanations

• 1. Record architecture decisions
• 2. Use Monorepo-Polypackage Setup
• 3. Release Process

🗃 References

• Release Process

oscd-plugins's Issues

Documentation PDF Content

As a user I want to be able to see all details in the documentation pdf.

ACs:
List with all available details regarding IEDs and Connections:
Basic details in the MVP:

• IED Typ
• Hersteller
• IED name
• IP adress

Further details in the next ticket:

• Subnet Mask
• IP Gateway (Switch)
• MAC adress
• VLAN ID

Setup Diagram

As a user I want an overview over the whole network to be aware of all IEDs and connections between them.

ACs:

• setup zoomable and movable diagram
• create diagramm design based on OpenSCD styling
• create IED design based on OpenSCD styling

Sidebar Selection

As a user I want to be able to see details in a sidebar next to the diagram.

ACs:

• 1) add a sidebar similar to the one in the "Communication Explorer"
• 2) add a possibility to select devices (IEDs) via dropdown in top right corner
  Selection via dropdown and map should be synced:
• 3) when a device in the dropdown is selected it should be selected in the left "overview / map" too
• 4) when a device in the left "overview / map" is selected it should be selected in the dropdown too

Documentation PDF Download

As a user I want to be able to download the "Network Explorer Documentation" as a pdf file to have a offline version or print the file.

ACs:

• add a fourth "Area" directly under the empty space
• headline: "Network Explorer Documentation"
• change the headline "Documentation" to "Communication Explorer Documentation"
• description: "Downloading the Network Explorer Documentation including all available details in the whole network"
• add a download button in the bottom right corner similar to the other ones

Diagram Connections

As a user, I want to be able to select connections to view details.

ACs:

• 1) it is possible to select "lines / wires" to see details in sidebar (via click)
• 2) display connected IED details similar to IED selection

Hints:

• there are often two cables for a connection
• sometimes there are more than two cables (which we can ignore for now)

Blocker Questions:

• Which messages run over which cables?

Design & Grid

As a user, I want the design of the Network Explorer to be similar to the UI of the Communication Explorer so that I can orientate myself quickly.

ACs:

• use a similar design and grid like in the "Communication Explorer"
• size, width, height for overview area, sidebar, ...

Edit SCL Elements based on Network Explorer interactions

As a user I want to edit the SCL structure via the the Network Explorer to avoid switching to an other one to edit the network details.

ACs:

• whenever I change following interactions in the network explorer diagram the SCD file should be adjusted based on the interaction:
• deleting a cable: the cable will be removed from the SCD
• connecting IEDs be a new cable: the cable will be added to the SCD
• visible elements in Network Explorer and SCD File should be in sync
• when connecting an IED by a cable to an other IED the next free port will be used automatically
• when connecting a IED by a cable to an other IED the cable will be named with a random ID

Editing the connection:

• #28

UI:

• use elements from other SprintEins plugins in OpenSCD (IED sytyling, text)
• the whole "editing" UI will be displayed whenever you select a cable by clicking on it

Example:

Generated cable name
IED
Dropdown to change port

IED
Dropdown to change port

Plugin Setup

As a user, I want to get an overview of the network including the IEDs and connections and gain insight.

ACs:

• check attached options of possible network plans
• create new plugin and name it "Network Explorer"

Diagram PDF Download

As a user I want to be able to download the "Network Explorer Diagram" as a pdf file to have a offline version or print the file.

ACs:

• add a third "area" directly under the empty space
• add a headline: "Network Explorer Diagram"
• change the headline "Communication Explorer" to "Communication Explorer Diagram"
• description: "Downloading the Network Explorer including an overview about the whole network"
• add a download button in the bottom right corner similar to the other ones that triggers the download

IED Further Details - Pt.2

As a user, I want to be able to select IEDs to view details.

ACs:

• it is possible to select "devices" to see details in sidebar (via click)
• you can see details information of ports

The following information will be available in each port:

• IP Address
• Subnet Mask
• IP Gateway (Switch)
• MAC adress
• VLAN ID
• Connected AP's name
• Plug
• Type

Select multiple IEDs

IEDs and Connections

As a user, I want to get an overview of the network including the IEDs and connections and gain insight.

ACs:

• add IEDs to the network plan
• add the bus / network
• add connections based on physical wires between the IEDs

Sidebar Connection Filters

As a user, I want to be able to filter the connections to only see relevant ones.

ACs:

• add filters (similar to communitcation explorer) to filter for different types of connections
• e.g. cable type or cable name

Diagram and Sidebar Reset / Deselect through Button

As a user I want to be able to reset the view quickly.

ACs:

• 1) add a "clear all" button in the top right corner of the sidebar
• 2) pressing "clear all" deselect all selected devices in the sidebar and also in the left overview / map

All Ports directly visible in sidebar

As a user, I want to see all used and available ports directly.

ACs:

• all ports will be directly visible in the sidebar after selecting IEDs or Bays

Quickwin: When there are more then two connections -> open all IED Dropdowns in the sidebar to see the ports

Screenshot UI Concept added

Hints:

• Review Feedback
• e.g. It is possible to see all used and available ports from a switch
• Idea: Display ports directly if there are more than two connections (reach switches)
  - UI Concept needed!

Select bay and all IEDs in it

As a user I want to select all IEDs in the whole bay by by clicking on the area around the bay.

ACs:

• it is possible to click on the bay-area and select all IEDs in it
• the bay and all IEDs in it will be highlited
• all IED details will be selected in the sidebar

Hints:

• Review Feedback

Diagram and Sidebar Reset / Deselect

As a user I want to be able to reset the view quickly.

ACs:

• 1) add a "clear all" button in the top right corner of the sidebar
• 2) pressing "clear all" deselect all selected devices in the sidebar and also in the left overview / map
• 3) clicking somewhere in the "empty area of the overview/map" deselects all selected devices in the sidebar and also in the left overview / map

Edit Cable

Users can edit a cable by selecting it. They will be able to see and change the followings:

• name of the cable
• both IEDs and their ports will be displayed in the sidebar
• each of those IEDs will have a dropdown to change the ports used for the connection

Cable Name UU-ID Check (Sidebar)

The new created cable UU-ID should be unique to avoid redundant names for cables.

ACs:

• unique UU-ID
• automatically check wether there is already an existing cable name with the entered name
• only check new cable names created in the Network Explorer (older cable names should not be checked)
• show a error dialog if there is already a same-named cable name

IED Details - Pt.1

As a user, I want to be able to select IEDs to view details.

ACs:

• it is possible to select "devices" to see details in sidebar (via click)

Basic details in the MVP:

• IED Typ
• Hersteller
• IED name
• IP adress
• IP gateway
• IP submit
• cable name
• connected IEDs
• connected IED names

Further details in the next ticket:

• #6

UI: (siehe Sidebar Details in Communication Explorer)
IED Name (in Petrol Button)

• IP Adress (in Textform)
• IP Gateway (in Textform)
• IP Submit (in Textform)
• Cable Name (Dropdown Bereich)
  • Connected IED (Text Headline)
  • IED Name (in White Box)

Setup Sidebar

Diagram Bays

As a user, I want to see which IEDs are in which bars and, for example, in which control cabinets.

ACs:

• display bays in the diagram

Hints:

• it is possible to add switch cabinets as bays

UI Improvements

UI-Improvements

ACs:

• adjust sidebar with based on the width from plugin communication explorer
• the elements in the sidebar should be left aligned (see screenshot)

Diagram-Map-Legend in sidebar

As a user I want to have a "diagram-legend" that gives hints about the diagram content.

ACs:

• there is a info icon in the bottom right corner next to the sidebar that opens the map legend
• Info Icon: https://fonts.google.com/icons?selected=Material%20Icons%3Ainfo%3A