From dc28d6ba2adc598699a71fc5757f08325840d358 Mon Sep 17 00:00:00 2001 From: Tibor Frank Date: Thu, 3 Mar 2022 14:38:47 +0100 Subject: [PATCH] UTI: PoC - Dash application for Trending - functional UI without styling - uses csv files as a source of data for graphs Change-Id: I0b7b67cdf928aec6a668b3e151e84ecfd600f959 Signed-off-by: Tibor Frank --- resources/tools/dash/app/pal/trending/data.py | 6 +- resources/tools/dash/app/pal/trending/layout.py | 531 ++++++++++++++++----- resources/tools/dash/app/pal/trending/layout.yaml | 77 +++ .../dash/app/pal/trending/spec_test_selection.yaml | 8 +- resources/tools/dash/app/pal/trending/trending.py | 29 +- 5 files changed, 492 insertions(+), 159 deletions(-) create mode 100644 resources/tools/dash/app/pal/trending/layout.yaml diff --git a/resources/tools/dash/app/pal/trending/data.py b/resources/tools/dash/app/pal/trending/data.py index 298a40542e..a4f183be96 100644 --- a/resources/tools/dash/app/pal/trending/data.py +++ b/resources/tools/dash/app/pal/trending/data.py @@ -17,13 +17,13 @@ import pandas as pd -def create_dataframe(): +def read_data(): """Create Pandas DataFrame from local CSV. - DEMO + Only for DEMO """ return pd.read_csv( u"https://s3-docs.fd.io/csit/master/trending/_static/vpp/" - u"csit-vpp-perf-mrr-daily-master-2n-zn2-trending.csv" + u"csit-vpp-perf-mrr-weekly-master-2n-aws-trending.csv" ) diff --git a/resources/tools/dash/app/pal/trending/layout.py b/resources/tools/dash/app/pal/trending/layout.py index 69ce0c416d..9153081cc3 100644 --- a/resources/tools/dash/app/pal/trending/layout.py +++ b/resources/tools/dash/app/pal/trending/layout.py @@ -14,20 +14,27 @@ """Plotly Dash HTML layout override. """ -import logging + +import plotly.graph_objects as go from dash import dcc from dash import html -from dash import Input, Output, callback +from dash import callback_context, no_update +from dash import Input, Output, State, callback from dash.exceptions import PreventUpdate from yaml import load, FullLoader, YAMLError +from datetime import datetime, timedelta + +from pprint import pformat + +from .data import read_data class Layout: """ """ - def __init__(self, app, html_layout_file, spec_file): + def __init__(self, app, html_layout_file, spec_file, graph_layout_file): """ """ @@ -35,26 +42,50 @@ class Layout: self._app = app self._html_layout_file = html_layout_file self._spec_file = spec_file + self._graph_layout_file = graph_layout_file + + # Read the data: + self._data = read_data() # Read from files: self._html_layout = "" - self._spec_test = None + self._spec_tbs = None + self._graph_layout = None try: - with open(self._html_layout_file, "r") as layout_file: - self._html_layout = layout_file.read() + with open(self._html_layout_file, "r") as file_read: + self._html_layout = file_read.read() except IOError as err: - logging.error(f"Not possible to open the file {layout_file}\n{err}") + raise RuntimeError( + f"Not possible to open the file {self._html_layout_file}\n{err}" + ) try: with open(self._spec_file, "r") as file_read: - self._spec_test = load(file_read, Loader=FullLoader) + self._spec_tbs = load(file_read, Loader=FullLoader) + except IOError as err: + raise RuntimeError( + f"Not possible to open the file {self._spec_file,}\n{err}" + ) + except YAMLError as err: + raise RuntimeError( + f"An error occurred while parsing the specification file " + f"{self._spec_file,}\n" + f"{err}" + ) + + try: + with open(self._graph_layout_file, "r") as file_read: + self._graph_layout = load(file_read, Loader=FullLoader) except IOError as err: - logging.error(f"Not possible to open the file {spec_file}\n{err}") + raise RuntimeError( + f"Not possible to open the file {self._graph_layout_file}\n" + f"{err}" + ) except YAMLError as err: - logging.error( + raise RuntimeError( f"An error occurred while parsing the specification file " - f"{spec_file}\n" + f"{self._graph_layout_file}\n" f"{err}" ) @@ -62,41 +93,26 @@ class Layout: if self._app is not None and hasattr(self, 'callbacks'): self.callbacks(self._app) - # User choice (one test): - self._test_selection = { - "phy": "", - "area": "", - "test": "", - "core": "", - "frame-size": "", - "test-type": "" - } - @property def html_layout(self): return self._html_layout @property - def spec_test(self): - return self._spec_test - - def _reset_test_selection(self): - self._test_selection = { - "phy": "", - "area": "", - "test": "", - "core": "", - "frame-size": "", - "test-type": "" - } + def spec_tbs(self): + return self._spec_tbs + + @property + def data(self): + return self._data def add_content(self): """ """ - if self._html_layout and self._spec_test: + if self.html_layout and self.spec_tbs: return html.Div( id="div-main", children=[ + dcc.Store(id="selected-tests"), self._add_ctrl_div(), self._add_plotting_div() ] @@ -134,19 +150,19 @@ class Layout: return html.Div( id="div-plotting-area", children=[ - # Only a visible note. - # TODO: Add content. - html.H3( - "Graphs and Tables", - style={ - "vertical-align": "middle", - "text-align": "center" - } + dcc.Loading( + id="loading-graph", + children=[ + dcc.Graph( + id="graph" + ) + ], + type="circle" ) ], style={ - "vertical-align": "middle", - "display": "inline-block", + "vertical-align": "top", + "display": "none", "width": "80%", "padding": "5px" } @@ -157,7 +173,32 @@ class Layout: """ return html.Div( id="div-ctrl-shown", - children="List of selected tests" + children=[ + html.H5("Selected tests"), + html.Div( + id="container-selected-tests", + children=[ + dcc.Checklist( + id="cl-selected", + options=[], + labelStyle={"display": "block"} + ), + html.Button( + id="btn-sel-remove", + children="Remove Selected", + disabled=False + ), + html.Button( + id="btn-sel-display", + children="Display", + disabled=False + ) + ] + ), + # Debug output, TODO: Remove + html.H5("Debug output"), + html.Pre(id="div-ctrl-info") + ] ) def _add_ctrl_select(self): @@ -166,23 +207,17 @@ class Layout: return html.Div( id="div-ctrl-select", children=[ - html.Br(), - html.Div( - children="Physical Test Bed Topology, NIC and Driver" - ), + html.H5("Physical Test Bed Topology, NIC and Driver"), dcc.Dropdown( id="dd-ctrl-phy", placeholder="Select a Physical Test Bed Topology...", multi=False, clearable=False, options=[ - {"label": k, "value": k} for k in self._spec_test.keys() + {"label": k, "value": k} for k in self.spec_tbs.keys() ], ), - html.Br(), - html.Div( - children="Area" - ), + html.H5("Area"), dcc.Dropdown( id="dd-ctrl-area", placeholder="Select an Area...", @@ -190,10 +225,7 @@ class Layout: multi=False, clearable=False, ), - html.Br(), - html.Div( - children="Test" - ), + html.H5("Test"), dcc.Dropdown( id="dd-ctrl-test", placeholder="Select a Test...", @@ -201,50 +233,67 @@ class Layout: multi=False, clearable=False, ), - - # Change to radio buttons: - html.Br(), html.Div( - children="Number of Cores" - ), - dcc.Dropdown( - id="dd-ctrl-core", - placeholder="Select a Number of Cores...", - disabled=True, - multi=False, - clearable=False, + id="div-ctrl-core", + children=[ + html.H5("Number of Cores"), + dcc.Checklist( + id="cl-ctrl-core-all", + options=[{"label": "All", "value": "all"}, ], + labelStyle={"display": "inline-block"} + ), + dcc.Checklist( + id="cl-ctrl-core", + labelStyle={"display": "inline-block"} + ) + ], + style={"display": "none"} ), - html.Br(), html.Div( - children="Frame Size" - ), - dcc.Dropdown( - id="dd-ctrl-framesize", - placeholder="Select a Frame Size...", - disabled=True, - multi=False, - clearable=False, + id="div-ctrl-framesize", + children=[ + html.H5("Frame Size"), + dcc.Checklist( + id="cl-ctrl-framesize-all", + options=[{"label": "All", "value": "all"}, ], + labelStyle={"display": "inline-block"} + ), + dcc.Checklist( + id="cl-ctrl-framesize", + labelStyle={"display": "inline-block"} + ) + ], + style={"display": "none"} ), - html.Br(), html.Div( - children="Test Type" - ), - dcc.Dropdown( - id="dd-ctrl-testtype", - placeholder="Select a Test Type...", - disabled=True, - multi=False, - clearable=False, + id="div-ctrl-testtype", + children=[ + html.H5("Test Type"), + dcc.Checklist( + id="cl-ctrl-testtype-all", + options=[{"label": "All", "value": "all"}, ], + labelStyle={"display": "inline-block"} + ), + dcc.Checklist( + id="cl-ctrl-testtype", + labelStyle={"display": "inline-block"} + ) + ], + style={"display": "none"} ), - html.Br(), html.Button( id="btn-ctrl-add", children="Add", disabled=True ), html.Br(), - html.Div( - id="div-ctrl-info" + dcc.DatePickerRange( + id="dpr-period", + min_date_allowed=datetime(2021, 1, 1), + max_date_allowed=datetime.utcnow(), + initial_visible_month=datetime.utcnow(), + start_date=datetime.utcnow() - timedelta(days=180), + end_date=datetime.utcnow() ) ] ) @@ -265,85 +314,317 @@ class Layout: try: options = [ - {"label": self._spec_test[phy][v]["label"], "value": v} - for v in [v for v in self._spec_test[phy].keys()] + {"label": self.spec_tbs[phy][v]["label"], "value": v} + for v in [v for v in self.spec_tbs[phy].keys()] ] + disable = False except KeyError: options = list() + disable = True - return options, False + return options, disable @app.callback( Output("dd-ctrl-test", "options"), Output("dd-ctrl-test", "disabled"), - Input("dd-ctrl-phy", "value"), + State("dd-ctrl-phy", "value"), Input("dd-ctrl-area", "value"), ) def _update_dd_test(phy, area): """ """ - if not all((phy, area, )): + if not area: raise PreventUpdate try: options = [ {"label": v, "value": v} - for v in self._spec_test[phy][area]["test"] + for v in self.spec_tbs[phy][area]["test"] ] + disable = False except KeyError: options = list() + disable = True - return options, False + return options, disable @app.callback( + Output("div-ctrl-core", "style"), + Output("cl-ctrl-core", "options"), + Output("div-ctrl-framesize", "style"), + Output("cl-ctrl-framesize", "options"), + Output("div-ctrl-testtype", "style"), + Output("cl-ctrl-testtype", "options"), Output("btn-ctrl-add", "disabled"), - Input("dd-ctrl-phy", "value"), - Input("dd-ctrl-area", "value"), + State("dd-ctrl-phy", "value"), + State("dd-ctrl-area", "value"), Input("dd-ctrl-test", "value"), ) def _update_btn_add(phy, area, test): """ """ - if all((phy, area, test, )): - self._test_selection["phy"] = phy - self._test_selection["area"] = area - self._test_selection["test"] = test - return False + if test is None: + raise PreventUpdate + + core_style = {"display": "none"} + core_opts = [] + framesize_style = {"display": "none"} + framesize_opts = [] + testtype_style = {"display": "none"} + testtype_opts = [] + add_disabled = True + if phy and area and test: + core_style = {"display": "block"} + core_opts = [ + {"label": v, "value": v} + for v in self.spec_tbs[phy][area]["core"] + ] + framesize_style = {"display": "block"} + framesize_opts = [ + {"label": v, "value": v} + for v in self.spec_tbs[phy][area]["frame-size"] + ] + testtype_style = {"display": "block"} + testtype_opts = [ + {"label": v, "value": v} + for v in self.spec_tbs[phy][area]["test-type"] + ] + add_disabled = False + + return ( + core_style, core_opts, + framesize_style, framesize_opts, + testtype_style, testtype_opts, + add_disabled + ) + + def _sync_checklists(opt, sel, all, id): + """ + """ + options = {v["value"] for v in opt} + input_id = callback_context.triggered[0]["prop_id"].split(".")[0] + if input_id == id: + all = ["all"] if set(sel) == options else list() else: - return True + sel = list(options) if all else list() + return sel, all + + @app.callback( + Output("cl-ctrl-core", "value"), + Output("cl-ctrl-core-all", "value"), + State("cl-ctrl-core", "options"), + Input("cl-ctrl-core", "value"), + Input("cl-ctrl-core-all", "value"), + prevent_initial_call=True + ) + def _sync_cl_core(opt, sel, all): + return _sync_checklists(opt, sel, all, "cl-ctrl-core") @app.callback( - Output("div-ctrl-info", "children"), + Output("cl-ctrl-framesize", "value"), + Output("cl-ctrl-framesize-all", "value"), + State("cl-ctrl-framesize", "options"), + Input("cl-ctrl-framesize", "value"), + Input("cl-ctrl-framesize-all", "value"), + prevent_initial_call=True + ) + def _sync_cl_framesize(opt, sel, all): + return _sync_checklists(opt, sel, all, "cl-ctrl-framesize") + + @app.callback( + Output("cl-ctrl-testtype", "value"), + Output("cl-ctrl-testtype-all", "value"), + State("cl-ctrl-testtype", "options"), + Input("cl-ctrl-testtype", "value"), + Input("cl-ctrl-testtype-all", "value"), + prevent_initial_call=True + ) + def _sync_cl_testtype(opt, sel, all): + return _sync_checklists(opt, sel, all, "cl-ctrl-testtype") + + @app.callback( + Output("graph", "figure"), + Output("div-ctrl-info", "children"), # Debug output TODO: Remove + Output("selected-tests", "data"), # Store + Output("cl-selected", "options"), # User selection Output("dd-ctrl-phy", "value"), Output("dd-ctrl-area", "value"), Output("dd-ctrl-test", "value"), - Output("btn-ctrl-add", "n_clicks"), - Input("btn-ctrl-add", "n_clicks") + Output("div-plotting-area", "style"), + State("selected-tests", "data"), # Store + State("cl-selected", "value"), + State("dd-ctrl-phy", "value"), + State("dd-ctrl-area", "value"), + State("dd-ctrl-test", "value"), + State("cl-ctrl-core", "value"), + State("cl-ctrl-framesize", "value"), + State("cl-ctrl-testtype", "value"), + Input("btn-ctrl-add", "n_clicks"), + Input("btn-sel-display", "n_clicks"), + Input("btn-sel-remove", "n_clicks"), + Input("dpr-period", "start_date"), + Input("dpr-period", "end_date"), + prevent_initial_call=True ) - def _print_user_selection(n_clicks): + def _process_list(store_sel, list_sel, phy, area, test, cores, + framesizes, testtypes, btn_add, btn_display, btn_remove, + d_start, d_end): """ """ - logging.info(f"\n\n{n_clicks}\n\n") - - if not n_clicks: + if not (btn_add or btn_display or btn_remove or d_start or d_end): raise PreventUpdate - selected = ( - f"{self._test_selection['phy']} # " - f"{self._test_selection['area']} # " - f"{self._test_selection['test']} # " - f"{n_clicks}\n" - ) + def _list_tests(): + # Display selected tests with checkboxes: + if store_sel: + return [ + {"label": v["id"], "value": v["id"]} for v in store_sel + ] + else: + return list() - self._reset_test_selection() + trigger_id = callback_context.triggered[0]["prop_id"].split(".")[0] - return ( - selected, - None, - None, - None, - 0, + d_start = datetime( + int(d_start[0:4]), int(d_start[5:7]), int(d_start[8:10]) + ) + d_end = datetime( + int(d_end[0:4]), int(d_end[5:7]), int(d_end[8:10]) ) + + if trigger_id == "btn-ctrl-add": + # Add selected test to the list of tests in store: + if phy and area and test and cores and framesizes and testtypes: + + # TODO: Add validation + + if store_sel is None: + store_sel = list() + + for core in cores: + for framesize in framesizes: + for ttype in testtypes: + tid = ( + f"{phy}-" + f"{area}-" + f"{framesize.lower()}-" + f"{core.lower()}-" + f"{test}-" + f"{ttype.lower()}" + ) + if tid not in [itm["id"] for itm in store_sel]: + store_sel.append({ + "id": tid, + "phy": phy, + "area": area, + "test": test, + "framesize": framesize.lower(), + "core": core.lower(), + "testtype": ttype.lower() + }) + return (no_update, no_update, store_sel, _list_tests(), None, + None, None, no_update) + + elif trigger_id in ("btn-sel-display", "dpr-period"): + fig, style = _update_graph(store_sel, d_start, d_end) + return (fig, pformat(store_sel), no_update, no_update, + no_update, no_update, no_update, style) + + elif trigger_id == "btn-sel-remove": + if list_sel: + new_store_sel = list() + for item in store_sel: + if item["id"] not in list_sel: + new_store_sel.append(item) + store_sel = new_store_sel + fig, style = _update_graph(store_sel, d_start, d_end) + return (fig, pformat(store_sel), store_sel, _list_tests(), + no_update, no_update, no_update, style) + + def _update_graph(sel, start, end): + """ + """ + + if not sel: + return no_update, no_update + + def _is_selected(label, sel): + for itm in sel: + phy = itm["phy"].split("-") + if len(phy) == 4: + topo, arch, nic, drv = phy + else: + continue + if nic not in label: + continue + if drv != "dpdk" and drv not in label: + continue + if itm["test"] not in label: + continue + if itm["framesize"] not in label: + continue + if itm["core"] not in label: + continue + if itm["testtype"] not in label: + continue + return ( + f"{itm['phy']}-{itm['framesize']}-{itm['core']}-" + f"{itm['test']}-{itm['testtype']}" + ) + else: + return None + + style={ + "vertical-align": "top", + "display": "inline-block", + "width": "80%", + "padding": "5px" + } + + fig = go.Figure() + dates = self.data.iloc[[0], 1:].values.flatten().tolist()[::-1] + x_data = [ + datetime( + int(date[0:4]), int(date[4:6]), int(date[6:8]), + int(date[9:11]), int(date[12:]) + ) for date in dates + ] + x_data_range = [ + date for date in x_data if date >= start and date <= end + ] + vpp = self.data.iloc[[1], 1:].values.flatten().tolist()[::-1] + csit = list(self.data.columns[1:])[::-1] + labels = list(self.data["Build Number:"][3:]) + for i in range(3, len(self.data)): + name = _is_selected(labels[i-3], sel) + if not name: + continue + y_data = [ + float(v) / 1e6 for v in \ + self.data.iloc[[i], 1:].values.flatten().tolist()[::-1] + ] + hover_txt = list() + for x_idx, x_itm in enumerate(x_data): + hover_txt.append( + f"date: {x_itm}
" + f"average [Mpps]: {y_data[x_idx]}
" + f"vpp-ref: {vpp[x_idx]}
" + f"csit-ref: {csit[x_idx]}" + ) + fig.add_trace( + go.Scatter( + x=x_data_range, + y= y_data, + name=name, + mode="markers+lines", + text=hover_txt, + hoverinfo=u"text+name" + ) + ) + layout = self._graph_layout.get("plot-trending", dict()) + fig.update_layout(layout) + + return fig, style diff --git a/resources/tools/dash/app/pal/trending/layout.yaml b/resources/tools/dash/app/pal/trending/layout.yaml new file mode 100644 index 0000000000..be69d83aa1 --- /dev/null +++ b/resources/tools/dash/app/pal/trending/layout.yaml @@ -0,0 +1,77 @@ +plot-trending: + title: "" + titlefont: + size: 16 + autosize: True + showlegend: True + # width: 1100 + height: 800 + yaxis: + showticklabels: True + tickformat: ".3s" + title: "Throughput [Mpps]" + hoverformat: ".5s" + gridcolor: "rgb(238, 238, 238)" + linecolor: "rgb(238, 238, 238)" + showline: True + zeroline: False + tickcolor: "rgb(238, 238, 238)" + linewidth: 1 + showgrid: True + xaxis: + title: 'Date [MMDD]' + type: "date" + autorange: True + fixedrange: False + showgrid: True + gridcolor: "rgb(238, 238, 238)" + showline: True + linecolor: "rgb(238, 238, 238)" + zeroline: False + linewidth: 1 + showticklabels: True + tickcolor: "rgb(238, 238, 238)" + tickmode: "auto" + tickformat: "%m%d" + rangeselector: + buttons: + - count: 14 + label: "2w" + step: "day" + stepmode: "backward" + - count: 1 + label: "1m" + step: "month" + stepmode: "backward" + - count: 2 + label: "2m" + step: "month" + stepmode: "backward" + - count: 3 + label: "3m" + step: "month" + stepmode: "backward" + - count: 4 + label: "4m" + step: "month" + stepmode: "backward" + - count: 5 + label: "5m" + step: "month" + stepmode: "backward" + - step: "all" + margin: + r: 20 + b: 0 + t: 5 + l: 70 + legend: + orientation: "h" + y: -0.2 + xanchor: "auto" + traceorder: "normal" + bordercolor: "rgb(238, 238, 238)" + paper_bgcolor: "#fff" + plot_bgcolor: "#fff" + hoverlabel: + namelength: -1 diff --git a/resources/tools/dash/app/pal/trending/spec_test_selection.yaml b/resources/tools/dash/app/pal/trending/spec_test_selection.yaml index dae902203a..fe99801afe 100644 --- a/resources/tools/dash/app/pal/trending/spec_test_selection.yaml +++ b/resources/tools/dash/app/pal/trending/spec_test_selection.yaml @@ -1,4 +1,4 @@ -2n-aws-nitro-50g-ena: +2n-aws-50ge1p1ena-dpdk: ip4-base: label: IPv4 Routing Base test: @@ -32,7 +32,7 @@ # 2n-clx-cx556a-rdma: # 2n-clx-x710-avf: # 2n-clx-x710-dpdk: -# 2n-clx-xxv710-af-xdp: +# 2n-clx-xxv710-af_xdp: # 2n-clx-xxv710-avf: # l2-base: # l2-scale: @@ -64,7 +64,7 @@ # 2n-skx-x710-dpdk: # 2n-skx-xxv710-avf: # 2n-skx-xxv710-dpdk: -# 2n-tx2-xl710-af-xdp: +# 2n-tx2-xl710-af_xdp: # 2n-tx2-xl710-avf: # 2n-tx2-xl710-dpdk: # 2n-zn2-x710-avf: @@ -72,7 +72,7 @@ # 2n-zn2-cx556a-rdma: # 2n-zn2-xxv710-avf: # 2n-zn2-xxv710-dpdk: -3n-aws-nitro-50g-ena: +3n-aws-50ge1p1ena-dpdk: ip4-base: label: IPv4 Routing Base test: diff --git a/resources/tools/dash/app/pal/trending/trending.py b/resources/tools/dash/app/pal/trending/trending.py index 4edf831045..dd323c5895 100644 --- a/resources/tools/dash/app/pal/trending/trending.py +++ b/resources/tools/dash/app/pal/trending/trending.py @@ -14,13 +14,7 @@ """Instantiate the Trending Dash applocation. """ import dash -from dash import dcc -from dash import html -from dash import dash_table -import numpy as np -import pandas as pd -from .data import create_dataframe from .layout import Layout @@ -42,33 +36,14 @@ def init_trending(server): ], ) - # Load DataFrame - df = create_dataframe() - # Custom HTML layout layout = Layout( app=dash_app, html_layout_file="pal/trending/html_layout.txt", - spec_file="pal/trending/spec_test_selection.yaml" + spec_file="pal/trending/spec_test_selection.yaml", + graph_layout_file="pal/trending/layout.yaml" ) dash_app.index_string = layout.html_layout dash_app.layout = layout.add_content() return dash_app.server - - -def create_data_table(df): - """Create Dash datatable from Pandas DataFrame. - - DEMO - """ - - table = dash_table.DataTable( - id=u"database-table", - columns=[{u"name": i, u"id": i} for i in df.columns], - data=df.to_dict(u"records"), - sort_action=u"native", - sort_mode=u"native", - page_size=10, - ) - return table -- 2.16.6