8 |
9 | Several screenshots can be found in the [`docs`](./docs/).
10 |
11 | # Features List
12 |
13 | - [x] manage devices to connect to
14 | - [ ] manage devices groupings for bulk configuration
15 | - [x] manage YANG schemas stored in GUI to represent received data
16 | - [ ] interaction with user by asking unknown module used by the connected device
17 | - [x] display configuration and data of the connected device (data tree view)
18 | - [x] edit configuration data of the device
19 | - [ ] bulk configuration (set configuration of multiple device at once)
20 | - [x] YANG explorer to display/browse YANG schema (currently just basic textual information)
21 | - [ ] receive NETCONF notifications and present them to user
22 | - [ ] accept NETCONF Call Home connections
23 | - [ ] plugin interface for schema-specific applications
24 |
25 | # Dependencies
26 | The application is created as a module to the [liberouter-gui](https://github.com/CESNET/liberouter-gui)
27 | framework, so to install it, follow the [liberouter-gui instructions](https://github.com/CESNET/liberouter-gui/wiki/Deploying-LiberouterGUI). When you decide to deploy production version, there is pre-built Netopeer2GUI as a [release package](https://github.com/CESNET/Netopeer2GUI/releases). To configure your web server, please follow the mentioned liberouter-gui instructions or have a look at [`*-release` vagrant image(s)](./vagrant/).
28 |
29 | The backend is a Flask server written in Python 3 and utilizing [libyang](https://github.com/CESNET/libyang)
30 | and [libnetconf2](https://github.com/CESNET/libnetconf2) Python bindings.
31 | Unfortunatelly, the code of the bindings is not yet finished, so please use
32 | the devel branches of the mentioned libraries:
33 | ```
34 | $ git clone -b devel https://github.com/CESNET/libyang
35 | $ mkdir -p libyang/build && cd libyang/build
36 | $ cmake -DGEN_LANGUAGE_BINDINGS=ON ..
37 | $ make
38 | # make install
39 | ```
40 | ```
41 | $ git clone -b devel https://github.com/CESNET/libnetconf2
42 | $ mkdir -p libnetconf2/build && cd libnetconf2/build
43 | $ cmake -DENABLE_PYTHON=ON ..
44 | $ make
45 | # make install
46 | ```
47 |
48 | Or alternatively install binary packages of [libyang](https://software.opensuse.org//download.html?project=home%3Aliberouter&package=libyang-experimental) and [libnetconf2](https://software.opensuse.org//download.html?project=home%3Aliberouter&package=libnetconf2-experimental).
49 |
50 | # Vagrant
51 | For fast and simple testing/development deployment, you can use the prepared
52 | Vagrantfiles for instantiating virtual machine. More information can be found
53 | [here](./vagrant/).
54 |
55 |
--------------------------------------------------------------------------------
/app.config.json:
--------------------------------------------------------------------------------
1 | {
2 | "logo" : "assets/netopeer/logo.png",
3 | "name" : "Netopeer",
4 | "colorTheme" : {
5 | "colorMain" : "#354b68",
6 | "colorHighlight" : "#3d5676",
7 | "colorSelected" : "#3d5676",
8 | "colorSelected2" : "#6888b1"
9 | },
10 | "api" : {
11 | "url" : "/libapi",
12 | "host" : null,
13 | "port" : null,
14 | "proto" : null
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/backend/__init__.py:
--------------------------------------------------------------------------------
1 | """
2 | Netopeer2 GUI backend
3 | File: __init__.py
4 | Author: Radek Krejci
19 | 
20 |
--------------------------------------------------------------------------------
/frontend/config/config.component.scss:
--------------------------------------------------------------------------------
1 | @import '../netopeer-common';
2 | @import '../inventory/inventory.component';
3 | @import './tree.component';
4 |
5 | #config-data {
6 | cursor: default;
7 | width: 100%;
8 | }
9 |
10 | .item_action_expand,
11 | .item_action_collapse {
12 | height: 1em;
13 | }
14 |
15 | .item_action_collapse:hover {
16 | color: $red;
17 | }
18 |
19 | .item_action_expand:hover {
20 | color: $green;
21 | }
22 |
23 | .modifications-status {
24 | margin-bottom: 2em;
25 | margin-right: 2em;
26 | padding: 0.5em 1em;
27 |
28 | >div {
29 | position: fixed;
30 | bottom: 2em;
31 | right: 2em;
32 | background-color: $colorChanged;
33 | border: 2px solid $colorChangedBorder;
34 | padding: 0 1em;
35 | div {
36 | padding: 0.5em 0;
37 | }
38 | }
39 | }
40 |
41 | .loading {
42 | text-align: center;
43 | margin: auto;
44 | width: 10em;
45 | div {
46 | margin: auto;
47 | width: 50px;
48 | }
49 | }
50 |
--------------------------------------------------------------------------------
/frontend/config/session.ts:
--------------------------------------------------------------------------------
1 | import { Device } from '../inventory/device';
2 |
3 | import { SessionsService } from './sessions.service';
4 |
5 | export enum NodeType {
6 | container = 1,
7 | leaf = 4,
8 | leaflist = 8,
9 | list = 16
10 | }
11 |
12 | export class Session {
13 | constructor (
14 | public key: string,
15 | public device: Device,
16 | public loading = false,
17 | public data: Node = null,
18 | public treeFilters = [],
19 | public modifications = null,
20 | public cpblts: string = "",
21 | public dataPresence: string = 'none',
22 | public statusVisibility: boolean = true,
23 | public cpbltsVisibility: boolean = false,
24 | ) {}
25 | }
26 |
27 | export class NodeSchema {
28 | /*
29 | * type: NodeType;
30 | * path: string;
31 | */
32 | }
33 |
34 | export class Node {
35 | /*
36 | * path: string;
37 | * info: NodeSchema;
38 | *
39 | * === container ===
40 | * children: Node[]
41 | * newChildren: Node[]
42 | *
43 | * === leaf ===
44 | * value: string;
45 | *
46 | * === leaf-list ===
47 | * value: string;
48 | *
49 | * === list ===
50 | * children: Node[]
51 | * newChildren: Node[]
52 | */
53 | }
54 |
--------------------------------------------------------------------------------
/frontend/config/tree-create.html:
--------------------------------------------------------------------------------
1 |
2 |
20 |
21 |
23 |
45 |
46 |
47 |
52 |
57 |
65 |
78 |
79 |
80 | 
{{err_msg}}
25 | 
29 | 
33 | |
34 | Capability / Module | 35 |Version | 36 |
|---|---|---|
| 40 | | {{parseCapabilityName(cap)}} | 41 |{{parseCapabilityRevision(cap)}} | 42 |
| 49 | | Data | 50 |
|---|
53 | Retrieving data ...
54 |
56 |
66 |
77 |
67 |
73 |
75 |
76 | Configuration data were changed. Do you wish to
68 | /
69 |
70 | all changes?
71 |
72 | x{{err['message']}}
74 |
5 |
6 |
15 |
16 |
20 |
--------------------------------------------------------------------------------
/frontend/config/tree-edit.html:
--------------------------------------------------------------------------------
1 |
2 |
17 | xThere is no element to create at {{node['path']}}.
18 |
19 |
3 | 
14 |
22 |
27 |
28 |
--------------------------------------------------------------------------------
/frontend/config/tree-indent.html:
--------------------------------------------------------------------------------
1 |
9 |
14 |
22 |
27 | 
3 |
10 |
16 |
24 |
29 | 
36 |
37 |
68 |
69 |
42 |
43 | cancel reordering
44 |
45 |
43 | cancel reordering
44 |
49 |
50 | delete
51 |
52 |
50 | delete
51 |
56 | 
57 | create sibling
58 |
59 |
57 | create sibling
58 |
64 |
65 | create children
66 |
67 |
65 | create children
66 | 
73 |
74 |
77 | 
78 |
79 | 
80 |
82 | 
83 |
9 | 
13 |
14 |
15 |
16 |
17 |
18 | 
19 |
20 |
21 | 
26 |
27 |
28 |
29 |
30 |
31 |
32 | 
36 | 
40 | 
44 |
45 |
46 |
73 |
74 |
75 |
13 |
14 |
15 |
16 |
19 |
26 |
27 |
36 |
40 |
44 | {{node['info']['name']}}
47 |
48 | * [{{node['keys']}}]
49 |
50 |
51 | :
52 |
53 |
54 |
55 | {{node['value']}}
57 | info
59 | {{node['info']['datatype']}}
60 | ({{node['info']['datatypebase']}})
61 |
62 |
63 |
64 | {{node['info']['datatype']}}
65 | ({{node['info']['datatypebase']}})
66 |
67 |
68 |
69 |
70 |
71 | {{treeService.moduleName(node)}}
72 |
81 |
83 |
84 |
85 |
87 |
88 |
89 |
90 |
4 |
5 |
27 |
6 |
18 |
12 |
17 |
19 |
20 |
22 |
23 |
24 |
25 |
29 |
30 |
48 |
49 |
53 |
54 |
55 |
56 |
--------------------------------------------------------------------------------
/frontend/config/tree.component.scss:
--------------------------------------------------------------------------------
1 | @import '../netopeer-common';
2 |
3 | $colorChanged: #fafad2;
4 | $colorChangedBorder: #e4e4a4;
5 | $colorLineHover: #e1e1e1;
6 |
7 | .subtree {
8 | display: flex;
9 | flex-direction: column;
10 | width: 100%;
11 |
12 | .indentation{
13 | height: 100%;
14 | }
15 | }
16 |
17 | .node {
18 | width: 100%;
19 | overflow: hidden;
20 |
21 | &:hover {
22 | background-color: $colorLineHover;
23 | }
24 |
25 | > div {
26 | display: inline-block;
27 | }
28 | }
29 |
30 | .node_edit {
31 | display: flex;
32 | width: 100%;
33 | overflow: hidden;
34 |
35 | img,
36 | input {
37 | display: inline-table;
38 | margin-right: 0.25em;
39 | }
40 | input {
41 | height: 2em;
42 | padding-left: 0.3em;
43 | background-color: $colorSuccess;
44 |
45 | &.invalid {
46 | background-color: $colorFailure;
47 | }
48 | }
49 |
50 | &.indentation {
51 | height:2.1em;
52 | }
53 |
54 | > .msg-failure {
55 | margin: 0.5em 0;
56 | }
57 |
58 | }
59 | .node_edit.dialog {
60 | background-color: $colorChanged;;
61 | }
62 |
63 | .editable {
64 | cursor: pointer;
65 | }
66 |
67 | .status,
68 | .keys {
69 | color: grey;
70 | }
71 |
72 | .dirty {
73 | background-color: $colorChanged;
74 | }
75 |
76 | .moved {
77 | background-color: #d8e8f8;
78 | }
79 |
80 | .deleted {
81 | background-color: $colorFailure;
82 | color: $colorFailureBorder;
83 | }
84 |
85 | .icon,
86 | .icon_action {
87 | font-size: xx-small;
88 | height: 2em;
89 | }
90 |
91 | .icon_action {
92 | cursor: pointer;
93 | }
94 |
95 | .icon_hidden {
96 | visibility: hidden;
97 | }
98 |
99 | .module_name {
100 | cursor: pointer;
101 | float: right;
102 | text-align: right;
103 | max-width: 25em;
104 | word-wrap: break-word;
105 | }
106 |
107 | .children {
108 | padding-left: 0;
109 | }
110 |
111 | .node_info {
112 | display: inline-block;
113 | word-wrap: break-word;
114 | margin-left: 3px;
115 | flex-grow: 1;
116 |
117 | .node_name {
118 | cursor: pointer;
119 | text-decoration: none;
120 | font-weight: normal;
121 | }
122 | }
123 |
124 | .value_inline {
125 | margin-left: 1.5em;
126 | }
127 |
128 | .indentation.value {
129 | width: 0.8em;
130 | height: 100%;
131 | }
132 |
133 | .indentation {
134 | width: 1.7em;
135 | height: 100%;
136 | }
137 |
138 |
139 | .editmenu {
140 | visibility: hidden;
141 | background-color: $colorBackground;
142 | border: 1px solid $black;
143 |
144 | position: fixed;
145 | z-index: 1;
146 | }
147 |
148 | .button_action {
149 | cursor: pointer;
150 | padding: 0.3em 1em 0.3em 0.5em;
151 |
152 | &:hover {
153 | background-color: $colorHighlight;
154 | color: $colorTextInverse;
155 | }
156 | }
157 |
158 | .loading {
159 | margin-top: 0.5em;
160 | }
161 |
162 | .yang-leaflist {
163 | display: flex;
164 | align-items: center;
165 | flex-direction: row;
166 | }
167 |
168 | .yang-leaflist-value {
169 | display: flex;
170 | }
171 |
172 | .yang-container,
173 | .yang-list {
174 | display:flex;
175 | align-items: center;
176 | }
177 |
178 | .yang-leaf {
179 | display: flex;
180 | align-items: center;
181 | }
182 |
183 |
184 | .value_standalone {
185 | flex-grow:1;
186 | word-break: break-all;
187 | }
188 |
189 | .ordered {
190 | cursor: move;
191 | }
192 |
193 | tree-indent {
194 |
195 | display: inline-flex;
196 | align-items: stretch;
197 | flex-direction: row;
198 |
199 | img{
200 | display: inline-block;
201 | }
202 | }
--------------------------------------------------------------------------------
/frontend/dashboard.component.html:
--------------------------------------------------------------------------------
1 |
31 |
37 |
38 |
40 |
46 |
47 |
32 |
36 |
33 |
35 |
41 |
45 |
42 |
44 |
2 |
3 |
19 |
20 |
--------------------------------------------------------------------------------
/frontend/dashboard.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import {Router} from '@angular/router';
3 |
4 | import {SessionsService} from './config/sessions.service';
5 |
6 | @Component({
7 | selector : 'netopeer-dashboard',
8 | templateUrl : './dashboard.component.html',
9 | styleUrls : ['./netopeer.scss', 'inventory/inventory.component.scss']
10 | })
11 |
12 | export class DashboardComponent implements OnInit {
13 |
14 | constructor(public sessionsService: SessionsService,
15 | private router: Router) {}
16 |
17 | gotoConfig(session) {
18 | this.sessionsService.changeActiveSession(session.key);
19 | this.router.navigateByUrl('/netopeer/config');
20 | }
21 |
22 | ngOnInit(): void {
23 | this.sessionsService.checkSessions();
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/frontend/inventory/device.ts:
--------------------------------------------------------------------------------
1 | export class Device {
2 | constructor (
3 | public id: number,
4 | public name:string = '',
5 | public hostname: string = '',
6 | public port: number = 830,
7 | public autoconnect: boolean = false,
8 | public username: string = '',
9 | public password: string = '',
10 | public fingerprint: string = '',
11 | ) {}
12 | }
13 | /*
14 | export class Device {
15 | id: number;
16 | hostname: string;
17 | port: number = 830;
18 | username: string;
19 | password: string;
20 | }
21 | */
22 |
--------------------------------------------------------------------------------
/frontend/inventory/devices.component.html:
--------------------------------------------------------------------------------
1 | | 5 | | Currently connected devices | 6 |autoconnect | 7 |
|---|---|---|
|
10 |
13 | |
14 | {{session.device.name}} | 15 |17 | |
2 |
64 |
87 |
88 |
89 |
--------------------------------------------------------------------------------
/frontend/inventory/devices.service.ts:
--------------------------------------------------------------------------------
1 | import { Injectable } from '@angular/core';
2 | import { HttpClient } from '@angular/common/http';
3 | import { Observable } from 'rxjs/Observable';
4 | import { catchError } from 'rxjs/operators';
5 |
6 | import { Device } from './device';
7 |
8 | @Injectable()
9 | export class DevicesService {
10 | constructor(private http: HttpClient) {}
11 |
12 | getDevices(): Observable
3 |
4 |
5 |
60 |
61 |
62 |
6 |
7 | 58 |
59 | 7 | 58 |
60 |
x{{err_msg}}
63 || 66 | | name | 67 |hostname : port | 68 |fingerprint | 69 |username | 70 |autoconnect | 71 |
|---|---|---|---|---|---|
|
74 |
78 | |
79 | {{device.name}} | 80 |{{device.hostname}} : {{device.port}} | 81 |{{device.fingerprint}} | 82 |{{device.username}} | 83 |85 | |