X-Git-Url: https://gerrit.fd.io/r/gitweb?p=csit.git;a=blobdiff_plain;f=resources%2Ftools%2Fdash%2Fapp%2Fpal%2Ftrending%2Flayout.py;h=ac866cfe40c6d9febeb079be4740eae14e304fdb;hp=11900c68fe2c3cf7518f5eb5b17c2f8e4591a87b;hb=05cb018450ac15bcfa59f2a10ffd08607eee8f97;hpb=a26be9497d6c268f135d81bc3ad5572e16b23f19 diff --git a/resources/tools/dash/app/pal/trending/layout.py b/resources/tools/dash/app/pal/trending/layout.py index 11900c68fe..ac866cfe40 100644 --- a/resources/tools/dash/app/pal/trending/layout.py +++ b/resources/tools/dash/app/pal/trending/layout.py @@ -19,12 +19,13 @@ import dash_bootstrap_components as dbc from dash import dcc from dash import html -from dash import callback_context, no_update +from dash import callback_context, no_update, ALL from dash import Input, Output, State from dash.exceptions import PreventUpdate from yaml import load, FullLoader, YAMLError from datetime import datetime, timedelta from copy import deepcopy +from json import loads, JSONDecodeError from ..data.data import Data from .graphs import graph_trending, graph_hdrh_latency, \ @@ -35,14 +36,14 @@ class Layout: """ """ - NO_GRAPH = {"data": [], "layout": {}, "frames": []} + STYLE_DISABLED = {"display": "none"} + STYLE_ENABLED = {"display": "inherit"} CL_ALL_DISABLED = [{ "label": "All", "value": "all", "disabled": True }] - CL_ALL_ENABLED = [{ "label": "All", "value": "all", @@ -67,12 +68,12 @@ class Layout: data_mrr = Data( data_spec_file=self._data_spec_file, debug=True - ).read_trending_mrr(days=5) + ).read_trending_mrr(days=180) data_ndrpdr = Data( data_spec_file=self._data_spec_file, debug=True - ).read_trending_ndrpdr(days=14) + ).read_trending_ndrpdr(days=180) self._data = pd.concat([data_mrr, data_ndrpdr], ignore_index=True) @@ -154,6 +155,7 @@ class Layout: ), dcc.Loading( dbc.Offcanvas( + class_name="w-50", id="offcanvas-metadata", title="Throughput And Latency", placement="end", @@ -264,48 +266,54 @@ class Layout: class_name="g-0 p-2", children=[ dbc.Row( - class_name="gy-1", + class_name="g-0", children=[ - dbc.Label( - "Physical Test Bed Topology, NIC and Driver", - class_name="p-0" - ), - dbc.Select( - id="dd-ctrl-phy", - placeholder="Select a Physical Test Bed Topology...", - options=[ - {"label": k, "value": k} for k in self.spec_tbs.keys() + dbc.InputGroup( + [ + dbc.InputGroupText("Infra"), + dbc.Select( + id="dd-ctrl-phy", + placeholder="Select a Physical Test Bed Topology...", + options=[ + {"label": k, "value": k} for k in self.spec_tbs.keys() + ], + ), ], + class_name="mb-3", size="sm", ), ] ), dbc.Row( - class_name="gy-1", + class_name="g-0", children=[ - dbc.Label( - "Area", - class_name="p-0" - ), - dbc.Select( - id="dd-ctrl-area", - placeholder="Select an Area...", - disabled=True, + dbc.InputGroup( + [ + dbc.InputGroupText("Area"), + dbc.Select( + id="dd-ctrl-area", + placeholder="Select an Area...", + disabled=True, + ), + ], + class_name="mb-3", size="sm", ), ] ), dbc.Row( - class_name="gy-1", + class_name="g-0", children=[ - dbc.Label( - "Test", - class_name="p-0" - ), - dbc.Select( - id="dd-ctrl-test", - placeholder="Select a Test...", - disabled=True, + dbc.InputGroup( + [ + dbc.InputGroupText("Test"), + dbc.Select( + id="dd-ctrl-test", + placeholder="Select a Test...", + disabled=True, + ), + ], + class_name="mb-3", size="sm", ), ] @@ -401,14 +409,15 @@ class Layout: ] ), dbc.Row( - class_name="gy-1", + class_name="gy-1 p-0", children=[ dbc.ButtonGroup( [ dbc.Button( id="btn-ctrl-add", children="Add Selected", - color="secondary", + class_name="me-1", + color="info" ) ], size="md", @@ -420,6 +429,7 @@ class Layout: children=[ dcc.DatePickerRange( id="dpr-period", + className="d-flex justify-content-center", min_date_allowed=\ datetime.utcnow()-timedelta(days=180), max_date_allowed=datetime.utcnow(), @@ -431,54 +441,47 @@ class Layout: ] ), dbc.Row( + id="row-card-sel-tests", class_name="gy-1", + style=self.STYLE_DISABLED, children=[ - dbc.Card( - class_name="p-0", - children=[ - dbc.Label( - "Selected tests", - class_name="p-0" - ), - dbc.Checklist( - id="cl-selected", - options=[], - inline=False - ) - ], - color="light", - outline=True + dbc.Label( + "Selected tests", + class_name="p-0" + ), + dbc.Checklist( + class_name="overflow-auto", + id="cl-selected", + options=[], + inline=False, + style={"max-height": "12em"}, ) - ] + ], ), dbc.Row( + id="row-btns-sel-tests", + style=self.STYLE_DISABLED, children=[ dbc.ButtonGroup( - [ - dbc.Button( - id="btn-sel-remove-all", - children="Remove All", - class_name="w-100", - color="secondary", - disabled=False - ), + class_name="gy-2", + children=[ dbc.Button( id="btn-sel-remove", children="Remove Selected", - class_name="w-100", - color="secondary", + class_name="w-100 me-1", + color="info", disabled=False ), dbc.Button( - id="btn-sel-display", - children="Display", - class_name="w-100", - color="secondary", + id="btn-sel-remove-all", + children="Remove All", + class_name="w-100 me-1", + color="info", disabled=False - ) + ), ], size="md", - ), + ) ] ), ] @@ -582,7 +585,7 @@ class Layout: row_fig_tput = [ dcc.Loading( dcc.Graph( - id="graph-tput", + id={"type": "graph", "index": "tput"}, figure=fig_tput ) ), @@ -591,7 +594,9 @@ class Layout: dcc.Loading(children=[ dbc.Button( id="btn-download-data", - children=["Download Data"] + children=["Download Data"], + class_name="me-1", + color="info" ), dcc.Download(id="download-data") ]), @@ -600,7 +605,7 @@ class Layout: row_fig_lat = [ dcc.Loading( dcc.Graph( - id="graph-latency", + id={"type": "graph", "index": "lat"}, figure=fig_lat ) ) @@ -614,6 +619,8 @@ class Layout: Output("row-graph-tput", "children"), Output("row-graph-lat", "children"), Output("row-btn-download", "children"), + Output("row-card-sel-tests", "style"), + Output("row-btns-sel-tests", "style"), Output("dd-ctrl-phy", "value"), Output("dd-ctrl-area", "options"), Output("dd-ctrl-area", "disabled"), @@ -650,7 +657,6 @@ class Layout: Input("btn-ctrl-add", "n_clicks"), Input("dpr-period", "start_date"), Input("dpr-period", "end_date"), - Input("btn-sel-display", "n_clicks"), Input("btn-sel-remove", "n_clicks"), Input("btn-sel-remove-all", "n_clicks"), ) @@ -658,7 +664,7 @@ class Layout: dd_phy: str, dd_area: str, dd_test: str, cl_core: list, cl_core_all: list, cl_framesize: list, cl_framesize_all: list, cl_testtype: list, cl_testtype_all: list, btn_add: int, - d_start: str, d_end: str, btn_display: int, btn_remove: int, + d_start: str, d_end: str, btn_remove: int, btn_remove_all: int) -> tuple: """ """ @@ -670,6 +676,8 @@ class Layout: row_fig_tput = no_update row_fig_lat = no_update row_btn_dwnld = no_update + row_card_sel_tests = no_update + row_btns_sel_tests = no_update ctrl_panel = self.ControlPanel(cp_data) @@ -870,12 +878,19 @@ class Layout: "core": core.lower(), "testtype": ttype.lower() }) + row_card_sel_tests = self.STYLE_ENABLED + row_btns_sel_tests = self.STYLE_ENABLED ctrl_panel.set(ctrl_panel.defaults) ctrl_panel.set({ "cl-selected-options": self._list_tests(store_sel) }) - elif trigger_id in ("btn-sel-display", "dpr-period"): - _ = btn_display + row_fig_tput, row_fig_lat, row_btn_dwnld = \ + _generate_plotting_arrea( + graph_trending( + self.data, store_sel, self.layout, d_start, d_end + ) + ) + elif trigger_id == "dpr-period": row_fig_tput, row_fig_lat, row_btn_dwnld = \ _generate_plotting_arrea( graph_trending( @@ -887,6 +902,8 @@ class Layout: row_fig_tput = self.PLACEHOLDER row_fig_lat = self.PLACEHOLDER row_btn_dwnld = self.PLACEHOLDER + row_card_sel_tests = self.STYLE_DISABLED + row_btns_sel_tests = self.STYLE_DISABLED store_sel = list() ctrl_panel.set({ "cl-selected-options": list() @@ -913,6 +930,8 @@ class Layout: row_fig_tput = self.PLACEHOLDER row_fig_lat = self.PLACEHOLDER row_btn_dwnld = self.PLACEHOLDER + row_card_sel_tests = self.STYLE_DISABLED + row_btns_sel_tests = self.STYLE_DISABLED store_sel = list() ctrl_panel.set({ "cl-selected-options": list() @@ -920,7 +939,8 @@ class Layout: ret_val = [ ctrl_panel.panel, store_sel, - row_fig_tput, row_fig_lat, row_btn_dwnld + row_fig_tput, row_fig_lat, row_btn_dwnld, + row_card_sel_tests, row_btns_sel_tests ] ret_val.extend(ctrl_panel.values()) return ret_val @@ -929,30 +949,38 @@ class Layout: Output("metadata-tput-lat", "children"), Output("metadata-hdrh-graph", "children"), Output("offcanvas-metadata", "is_open"), - Input("graph-tput", "clickData"), - Input("graph-latency", "clickData") + Input({"type": "graph", "index": ALL}, "clickData"), + prevent_initial_call=True ) - def _show_metadata_from_graphs( - tput_data: dict, lat_data: dict) -> tuple: + def _show_metadata_from_graphs(graph_data: dict) -> tuple: """ """ - if not (tput_data or lat_data): + try: + trigger_id = loads( + callback_context.triggered[0]["prop_id"].split(".")[0] + )["index"] + idx = 0 if trigger_id == "tput" else 1 + graph_data = graph_data[idx]["points"][0] + except (JSONDecodeError, IndexError, KeyError, ValueError, + TypeError): raise PreventUpdate metadata = no_update graph = list() - trigger_id = callback_context.triggered[0]["prop_id"].split(".")[0] - if trigger_id == "graph-tput": + children = [ + dbc.ListGroupItem( + [dbc.Badge(x.split(":")[0]), x.split(": ")[1]] + ) for x in graph_data.get("text", "").split("
") + ] + if trigger_id == "tput": title = "Throughput" - txt = tput_data["points"][0]["text"].replace("
", "\n") - elif trigger_id == "graph-latency": + elif trigger_id == "lat": title = "Latency" - txt = lat_data["points"][0]["text"].replace("
", "\n") - hdrh_data = lat_data["points"][0].get("customdata", None) + hdrh_data = graph_data.get("customdata", None) if hdrh_data: graph = [dbc.Card( - class_name="g-0", + class_name="gy-2 p-0", children=[ dbc.CardHeader(hdrh_data.pop("name")), dbc.CardBody(children=[ @@ -967,7 +995,7 @@ class Layout: ] metadata = [ dbc.Card( - class_name="g-0", + class_name="gy-2 p-0", children=[ dbc.CardHeader(children=[ dcc.Clipboard( @@ -979,7 +1007,8 @@ class Layout: ]), dbc.CardBody( id="tput-lat-metadata", - children=[txt] + class_name="p-0", + children=[dbc.ListGroup(children, flush=True), ] ) ] )