Webjive Architecture, Technologies & Demo
W
e
b
j
i
v
e
A
r
c
h
i
t
e
c
t
u
r
e
,
T
e
c
h
n
o
l
o
g
i
e
s
&
D
e
m
o
November status update meeting
1
8
N
o
v
e
m
b
e
r
2
0
2
0
M
a
t
t
e
o
C
a
n
z
a
r
i
,
A
j
a
y
D
u
b
e
y
,
H
è
l
d
e
r
R
i
b
e
i
r
o
,
E
l
i
s
a
b
e
t
t
a
G
i
a
n
i
SKA Cream Team
I
n
t
r
o
d
u
c
t
i
o
n
Webjive tutorial:
•
Architecture & Technologies intro (Matteo Canzari)
•
Demo Webjive Overview (Ajay Dubey)
•
Demo Webjive Dashboard (Hèlder Ribeiro)
•
Demo Complex Dashboard (Elisabetta Giani)
•
Demo TangoGQL (MaxIV team)
After lunch
G
e
n
e
r
a
l
A
r
c
h
i
t
e
c
t
u
r
e
T
a
n
g
o
C
o
n
t
r
o
l
F
r
a
m
e
w
o
r
k
P
y
T
a
n
g
o
G
r
a
p
h
Q
L
A
P
I
(
H
T
T
P
+
W
e
b
s
o
c
k
e
t
s
)
W
e
b
S
e
r
v
e
r
-
A
i
o
h
t
t
p
W
e
b
j
i
v
e
D
a
s
h
b
o
a
r
d
R
e
p
o
s
i
t
o
r
y
A
u
t
h
e
n
t
i
c
a
t
i
o
n
&
A
u
t
h
o
r
i
z
a
t
i
o
n
W
e
b
j
i
v
e
s
u
i
t
e
B
a
c
k
e
n
d
•
GraphQL
is a query language for APIs. Unlike to REST, it
offers smarter & a lot more elastic data fetching
•
Graphene
is a library for building GraphQL APIs in
Python
•
Aiohttp
is an asynchronous HTTP Client/Server
•
Events from Tango through
websockets
G
r
a
p
h
Q
L
A
P
I
(
H
T
T
P
+
W
e
b
s
o
c
k
e
t
s
)
W
e
b
S
e
r
v
e
r
-
A
i
o
h
t
t
p
F
r
o
n
t
e
n
d
W
e
b
j
i
v
e
•
Frontend built using React, Redux, and TypeScript
•
Based on modern development techniques and best
practice recommended using React
•
Bunch of utility libraries for API calls, plotting and so
on..
D
e
v
i
c
e
s
W
e
b
j
i
v
e
D
e
v
i
c
e
s
•
Device controls of all the devices in the control system
in treelike hierarchy (attributes, commands and
properties)
•
Automatic detection for inputs
•
Search Bar for devices
•
Generic implementation for all the devices
D
a
s
h
b
o
a
r
d
D
e
v
i
c
e
s
D
a
s
h
b
o
a
r
d
W
i
d
g
e
t
W
i
d
g
e
t
W
i
d
g
e
t
W
i
d
g
e
t
•
Customizable, intuitive and shareable views
•
Drag-and-drop from default widgets and connect them
to devices and/or attributes.
•
21 widgets developed and available. Each device is a
React component
•
Import/export/share dashboards with the community
C
o
m
m
o
n
l
i
b
r
a
r
i
e
s
D
e
v
i
c
e
s
D
a
s
h
b
o
a
r
d
W
i
d
g
e
t
W
i
d
g
e
t
W
i
d
g
e
t
W
i
d
g
e
t
N
o
t
i
f
i
c
a
t
i
o
n
A
P
I
•
Common libraries shared between views
•
Provide function such as: Notification system, library to
access data, subscribe/unsubscribe attribute and so on
…
.
S
e
r
v
i
c
e
s
•
Dashboard Repository
•
Based on MongoDB
•
Store, share dashboard with users and groups
•
Authentication & Authorization
•
Provides A&A service through JSON web tokens (JWT)
•
Currently use Active directory (MaxIV) or JSON conf file (SKA)
W
e
b
j
i
v
e
D
a
s
h
b
o
a
r
d
R
e
p
o
s
i
t
o
r
y
A
u
t
h
e
n
t
i
c
a
t
i
o
n
&
A
u
t
h
o
r
i
z
a
t
i
o
n
G
i
t
L
a
b
a
n
d
d
o
c
u
m
e
n
t
a
t
i
o
n
T
a
n
g
o
C
o
n
t
r
o
l
F
r
a
m
e
w
o
r
k
P
y
T
a
n
g
o
G
r
a
p
h
Q
L
A
P
I
(
H
T
T
P
+
W
e
b
s
o
c
k
e
t
s
)
W
e
b
S
e
r
v
e
r
-
A
i
o
h
t
t
p
W
e
b
j
i
v
e
D
a
s
h
b
o
a
r
d
R
e
p
o
s
i
t
o
r
y
A
u
t
h
e
n
t
i
c
a
t
i
o
n
&
A
u
t
h
o
r
i
z
a
t
i
o
n
h
t
t
p
s
:
/
/
w
e
b
j
i
v
e
.
r
e
a
d
t
h
e
d
o
c
s
.
i
o
/
e
n
/
l
a
t
e
s
t
/
i
n
d
e
x
.
h
t
m
l
h
t
t
p
s
:
/
/
g
i
t
l
a
b
.
c
o
m
/
M
a
x
I
V
/
w
e
b
j
i
v
e
h
t
t
p
s
:
/
/
w
e
b
-
m
a
x
i
v
-
t
a
n
g
o
g
q
l
.
r
e
a
d
t
h
e
d
o
c
s
.
i
o
/
e
n
/
l
a
t
e
s
t
/
i
n
d
e
x
.
h
t
m
l
h
t
t
p
s
:
/
/
g
i
t
l
a
b
.
c
o
m
/
M
a
x
I
V
/
w
e
b
-
m
a
x
i
v
-
t
a
n
g
o
g
q
l
h
t
t
p
s
:
/
/
w
e
b
j
i
v
e
-
d
a
s
h
b
o
a
r
d
s
.
r
e
a
d
t
h
e
d
o
c
s
.
i
o
/
e
n
/
l
a
t
e
s
t
/
h
t
t
p
s
:
/
/
g
i
t
l
a
b
.
c
o
m
/
M
a
x
I
V
/
d
a
s
h
b
o
a
r
d
-
r
e
p
o
h
t
t
p
s
:
/
/
w
e
b
j
i
v
e
-
a
u
t
h
.
r
e
a
d
t
h
e
d
o
c
s
.
i
o
/
e
n
/
l
a
t
e
s
t
/
h
t
t
p
s
:
/
/
g
i
t
l
a
b
.
c
o
m
/
M
a
x
I
V
/
w
e
b
j
i
v
e
-
a
u
t
h
h
t
t
p
s
:
/
/
g
i
t
l
a
b
.
c
o
m
/
M
a
x
I
V
/
w
e
b
j
i
v
e
-
d
e
v
e
l
o
p
D
e
m
o
Planning a status update meeting on 18th November 2020 for the SKA Cream Team led by Matteo Canzari, Ajay Dubey, Holder Ribeiro, and Elisabetta Giani to discuss Webjive architecture, technologies, and demo progress.
Download Presentation
Please find below an Image/Link to download the presentation.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author.If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.
You are allowed to download the files provided on this website for personal or commercial use, subject to the condition that they are used lawfully. All files are the property of their respective owners.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author.
E N D
Presentation Transcript
Webjive Architecture, Technologies & Demo November status update meeting 18 November 2020 Matteo Canzari, Ajay Dubey, H lder Ribeiro, Elisabetta Giani SKA Cream Team
Introduction Webjive tutorial: Architecture & Technologies intro (Matteo Canzari) Demo Webjive Overview (Ajay Dubey) Demo Webjive Dashboard (H lder Ribeiro) Demo Complex Dashboard (Elisabetta Giani) Demo TangoGQL (MaxIV team) After lunch 2
General Architecture Webjive suite Dashboard Repository Webjive Authentication & Authorization WebServer - Aiohttp GraphQL API (HTTP + Websockets) PyTango Tango Control Framework 3
Backend GraphQL is a query language for APIs. Unlike to REST, it offers smarter & a lot more elastic data fetching Graphene is a library for building GraphQL APIs in Python Aiohttp is an asynchronous HTTP Client/Server Events from Tango through websockets WebServer - Aiohttp GraphQL API (HTTP + Websockets) 4
Frontend Frontend built using React, Redux, and TypeScript Based on modern development techniques and best practice recommended using React Bunch of utility libraries for API calls, plotting and so on.. Webjive 5
Devices Device controls of all the devices in the control system in treelike hierarchy (attributes, commands and properties) Automatic detection for inputs Search Bar for devices Generic implementation for all the devices Devices Webjive 6
Dashboard Customizable, intuitive and shareable views Drag-and-drop from default widgets and connect them to devices and/or attributes. 21 widgets developed and available. Each device is a React component Import/export/share dashboards with the community Devices Widget Widget Widget Dashboard Widget 7
Common libraries Common libraries shared between views Provide function such as: Notification system, library to access data, subscribe/unsubscribe attribute and so on Devices Notification API . Widget Widget Widget Dashboard Widget 8
Services Dashboard Repository Based on MongoDB Store, share dashboard with users and groups Authentication & Authorization Provides A&A service through JSON web tokens (JWT) Currently use Active directory (MaxIV) or JSON conf file (SKA) Dashboard Repository Webjive Authentication & Authorization 9
GitLab and documentation https://gitlab.com/MaxIV/dashboard-repo https://webjive-dashboards.readthedocs.io/en/latest/ https://gitlab.com/MaxIV/webjive-develop Dashboard Repository https://gitlab.com/MaxIV/webjive Webjive https://webjive.readthedocs.io/en/latest/index.html Authentication & Authorization WebServer - Aiohttp https://gitlab.com/MaxIV/web-maxiv-tangogql https://gitlab.com/MaxIV/webjive-auth https://web-maxiv-tangogql.readthedocs.io/en/latest/index.html GraphQL API (HTTP + Websockets) https://webjive-auth.readthedocs.io/en/latest PyTango Tango Control Framework 10
Demo 11
