Chaged representation for machine locations to tables

1 files changed, 50 insertions, 27 deletions

diff --git a/pages/machines.py b/pages/machines.py
index 0bac558..3f38ef1 100644
--- a/pages/machines.py
+++ b/pages/machines.py
@@ -3,6 +3,7 @@
 import dash_core_components as dcc
 import dash_html_components as html
 import dash_bootstrap_components as dbc
+import dash_table as dtbl
 from dash.dependencies import Input, Output
 
 import plotly.graph_objects as go
@@ -57,13 +58,43 @@ def layout():
             dbc.Col(width=12, md=6, xl=4, children=[
                 dcc.Loading(dcc.Graph(id='machines-graph-kvmstate'))
             ]),
-            dbc.Col(width=12, xl=6, children=[
+            dbc.Col(width=12, xl=8, children=[
+                dcc.Loading(dcc.Graph(id='machines-graph-systemmodel')),
+            ]),
+            dbc.Col(width=12, xl=4, id='machines-graph-systemmodel-locations-container', children=[
+                html.H3(id='machines-graph-systemmodel-locations-head', style=dict(fontWeight='normal', fontSize='25px', fontFamily='Open Sans', marginTop='20px')),
+                dcc.Loading(dtbl.DataTable(
+                    id='machines-graph-systemmodel-locations',
+                    columns=[
+                        {'id': 'ip', 'name': 'Location', 'type': 'text'},
+                        {'id': 'count', 'name': 'Count', 'type': 'numeric'}
+                    ],
+                    style_cell_conditional=[
+                        {
+                            'if': {'column_type': 'text'},
+                            'textAlign': 'left'
+                        }
+                    ]
+                ))
+            ]),
+            dbc.Col(width=12, xl=8, children=[
                 dcc.Loading(dcc.Graph(id='machines-graph-cpumodel')),
-                dcc.Loading(dcc.Graph(id='machines-graph-cpumodel-locations')),
             ]),
-            dbc.Col(width=12, xl=6, children=[
-                dcc.Loading(dcc.Graph(id='machines-graph-systemmodel')),
-                dcc.Loading(dcc.Graph(id='machines-graph-systemmodel-locations')),
+            dbc.Col(width=12, xl=4, id='machines-graph-cpumodel-locations-container', children=[
+                html.H3(id='machines-graph-cpumodel-locations-head', style=dict(fontWeight='normal', fontSize='25px', fontFamily='Open Sans', marginTop='20px')),
+                dcc.Loading(dtbl.DataTable(
+                    id='machines-graph-cpumodel-locations',
+                    columns=[
+                        {'id': 'ip', 'name': 'Location', 'type': 'text'},
+                        {'id': 'count', 'name': 'Count', 'type': 'numeric'}
+                    ],
+                    style_cell_conditional=[
+                        {
+                            'if': {'column_type': 'text'},
+                            'textAlign': 'left'
+                        }
+                    ]
+                ))
             ])
         ])
     ])
@@ -140,25 +171,27 @@ def make_graph_systemmodel(days, date, satellites):
 def make_graph_kvmstate(days, date, satellites):
     return make_graph(days, date, satellites, 'kvmstate', 'KVM State')
 
-@app.callback([Output('machines-graph-cpumodel-locations', 'style'),
-               Output('machines-graph-cpumodel-locations', 'figure')],
-              [Input('machines-days', 'value'),
-               Input('machines-date', 'date'),
-               Input('machines-graph-cpumodel', 'clickData')])
-def make_graph_cpumodel_locations(days, date, clickData):
-    return make_graph_locations(days, date, clickData, 'cpumodel')
-
-@app.callback([Output('machines-graph-systemmodel-locations', 'style'),
-               Output('machines-graph-systemmodel-locations', 'figure')],
+@app.callback([Output('machines-graph-systemmodel-locations-container', 'style'),
+               Output('machines-graph-systemmodel-locations', 'data'),
+               Output('machines-graph-systemmodel-locations-head', 'children')],
               [Input('machines-days', 'value'),
                Input('machines-date', 'date'),
                Input('machines-graph-systemmodel', 'clickData')])
 def make_graph_systemmodel_locations(days, date, clickData):
     return make_graph_locations(days, date, clickData, 'systemmodel')
 
+@app.callback([Output('machines-graph-cpumodel-locations-container', 'style'),
+               Output('machines-graph-cpumodel-locations', 'data'),
+               Output('machines-graph-cpumodel-locations-head', 'children')],
+              [Input('machines-days', 'value'),
+               Input('machines-date', 'date'),
+               Input('machines-graph-cpumodel', 'clickData')])
+def make_graph_cpumodel_locations(days, date, clickData):
+    return make_graph_locations(days, date, clickData, 'cpumodel')
+
 def make_graph_locations(days, date, clickData, prop):
     if clickData == None:
-        return dict(display='none'), dict()
+        return dict(display='none'), [], ''
 
     dbcon = db.getConnection()
     cursor = dbcon.cursor()
@@ -181,17 +214,7 @@ def make_graph_locations(days, date, clickData, prop):
 
     db.closeConnection(dbcon)
 
-    figure = go.Figure()
-    figure.add_trace(go.Bar(
-        x=[item['ip'] for item in data],
-        y=[item['count'] for item in data]
-    ))
-    figure.update_layout(
-        height = 400,
-        title_text = item
-    )
-
-    return dict(display='block'), figure
+    return dict(display='block'), data, item
 
 
 def make_graph(days, date, satellites, prop, title, unit='', typ='pie'):