UTI: Display HDRH Latency for chosen sample

Change-Id: Ia0cf83c3aa789ce5a0a9e0c1b8d86144226827a7
Signed-off-by: Tibor Frank <tifrank@cisco.com>

5 files changed, 243 insertions, 64 deletions

diff --git a/resources/tools/dash/Dockerfile b/resources/tools/dash/Dockerfile
index cd7eab7772..ee4ae1edd9 100644
--- a/resources/tools/dash/Dockerfile
+++ b/resources/tools/dash/Dockerfile
@@ -1,4 +1,4 @@
-ARG PYTHON_VERSION=3.10
+ARG PYTHON_VERSION=3.8
 FROM python:${PYTHON_VERSION}-buster
 
 WORKDIR /app
diff --git a/resources/tools/dash/app/pal/trending/graphs.py b/resources/tools/dash/app/pal/trending/graphs.py
index b71c3271a0..0760d9cc80 100644
--- a/resources/tools/dash/app/pal/trending/graphs.py
+++ b/resources/tools/dash/app/pal/trending/graphs.py
@@ -14,11 +14,13 @@
 """
 """
 
-
 import plotly.graph_objects as go
 import pandas as pd
 import re
 
+import hdrh.histogram
+import hdrh.codec
+
 from datetime import datetime
 from numpy import isnan
 
@@ -26,29 +28,10 @@ from ..jumpavg import classify
 
 
 _COLORS = (
-    u"#1A1110",
-    u"#DA2647",
-    u"#214FC6",
-    u"#01786F",
-    u"#BD8260",
-    u"#FFD12A",
-    u"#A6E7FF",
-    u"#738276",
-    u"#C95A49",
-    u"#FC5A8D",
-    u"#CEC8EF",
-    u"#391285",
-    u"#6F2DA8",
-    u"#FF878D",
-    u"#45A27D",
-    u"#FFD0B9",
-    u"#FD5240",
-    u"#DB91EF",
-    u"#44D7A8",
-    u"#4F86F7",
-    u"#84DE02",
-    u"#FFCFF1",
-    u"#614051"
+    u"#1A1110", u"#DA2647", u"#214FC6", u"#01786F", u"#BD8260", u"#FFD12A",
+    u"#A6E7FF", u"#738276", u"#C95A49", u"#FC5A8D", u"#CEC8EF", u"#391285",
+    u"#6F2DA8", u"#FF878D", u"#45A27D", u"#FFD0B9", u"#FD5240", u"#DB91EF",
+    u"#44D7A8", u"#4F86F7", u"#84DE02", u"#FFCFF1", u"#614051"
 )
 _ANOMALY_COLOR = {
     u"regression": 0.0,
@@ -85,6 +68,44 @@ _UNIT = {
     "pdr": "result_pdr_lower_rate_unit",
     "pdr-lat": "result_latency_forward_pdr_50_unit"
 }
+_LAT_HDRH = (  # Do not change the order
+    "result_latency_forward_pdr_0_hdrh",
+    "result_latency_reverse_pdr_0_hdrh",
+    "result_latency_forward_pdr_10_hdrh",
+    "result_latency_reverse_pdr_10_hdrh",
+    "result_latency_forward_pdr_50_hdrh",
+    "result_latency_reverse_pdr_50_hdrh",
+    "result_latency_forward_pdr_90_hdrh",
+    "result_latency_reverse_pdr_90_hdrh",
+)
+# This value depends on latency stream rate (9001 pps) and duration (5s).
+# Keep it slightly higher to ensure rounding errors to not remove tick mark.
+PERCENTILE_MAX = 99.999501
+
+_GRAPH_LAT_HDRH_DESC = {
+    u"result_latency_forward_pdr_0_hdrh": u"No-load.",
+    u"result_latency_reverse_pdr_0_hdrh": u"No-load.",
+    u"result_latency_forward_pdr_10_hdrh": u"Low-load, 10% PDR.",
+    u"result_latency_reverse_pdr_10_hdrh": u"Low-load, 10% PDR.",
+    u"result_latency_forward_pdr_50_hdrh": u"Mid-load, 50% PDR.",
+    u"result_latency_reverse_pdr_50_hdrh": u"Mid-load, 50% PDR.",
+    u"result_latency_forward_pdr_90_hdrh": u"High-load, 90% PDR.",
+    u"result_latency_reverse_pdr_90_hdrh": u"High-load, 90% PDR."
+}
+
+
+def _get_hdrh_latencies(row: pd.Series, name: str) -> dict:
+    """
+    """
+
+    latencies = {"name": name}
+    for key in _LAT_HDRH:
+        try:
+            latencies[key] = row[key]
+        except KeyError:
+            return None
+
+    return latencies
 
 
 def _classify_anomalies(data):
@@ -137,8 +158,8 @@ def _classify_anomalies(data):
     return classification, avgs, stdevs
 
 
-def trending_tput(data: pd.DataFrame, sel:dict, layout: dict, start: datetime,
-    end: datetime):
+def graph_trending_tput(data: pd.DataFrame, sel:dict, layout: dict,
+    start: datetime, end: datetime) -> tuple:
     """
     """
 
@@ -146,7 +167,7 @@ def trending_tput(data: pd.DataFrame, sel:dict, layout: dict, start: datetime,
         return None, None
 
     def _generate_traces(ttype: str, name: str, df: pd.DataFrame,
-        start: datetime, end: datetime, color: str):
+        start: datetime, end: datetime, color: str) -> list:
 
         df = df.dropna(subset=[_VALUE[ttype], ])
         if df.empty:
@@ -159,6 +180,7 @@ def trending_tput(data: pd.DataFrame, sel:dict, layout: dict, start: datetime,
         )
 
         hover = list()
+        customdata = list()
         for _, row in df.iterrows():
             hover_itm = (
                 f"date: {row['start_time'].strftime('%d-%m-%Y %H:%M:%S')}<br>"
@@ -178,6 +200,8 @@ def trending_tput(data: pd.DataFrame, sel:dict, layout: dict, start: datetime,
                 "<prop>", "latency" if ttype == "pdr-lat" else "average"
             ).replace("<stdev>", stdev)
             hover.append(hover_itm)
+            if ttype == "pdr-lat":
+                customdata.append(_get_hdrh_latencies(row, name))
 
         hover_trend = list()
         for avg, stdev in zip(trend_avg, trend_stdev):
@@ -207,6 +231,7 @@ def trending_tput(data: pd.DataFrame, sel:dict, layout: dict, start: datetime,
                 hoverinfo=u"text+name",
                 showlegend=True,
                 legendgroup=name,
+                customdata=customdata
             ),
             go.Scatter(  # Trend line
                 x=x_axis,
@@ -259,9 +284,9 @@ def trending_tput(data: pd.DataFrame, sel:dict, layout: dict, start: datetime,
                             u"len": 0.8,
                             u"title": u"Circles Marking Data Classification",
                             u"titleside": u"right",
-                            u"titlefont": {
-                                u"size": 14
-                            },
+                            # u"titlefont": {
+                            #     u"size": 14
+                            # },
                             u"tickmode": u"array",
                             u"tickvals": [0.167, 0.500, 0.833],
                             u"ticktext": _TICK_TEXT_LAT \
@@ -319,8 +344,7 @@ def trending_tput(data: pd.DataFrame, sel:dict, layout: dict, start: datetime,
         if traces:
             if not fig_tput:
                 fig_tput = go.Figure()
-            for trace in traces:
-                fig_tput.add_trace(trace)
+            fig_tput.add_traces(traces)
 
         if itm["testtype"] == "pdr":
             traces = _generate_traces(
@@ -329,8 +353,7 @@ def trending_tput(data: pd.DataFrame, sel:dict, layout: dict, start: datetime,
             if traces:
                 if not fig_lat:
                     fig_lat = go.Figure()
-                for trace in traces:
-                    fig_lat.add_trace(trace)
+                fig_lat.add_traces(traces)
 
     if fig_tput:
         fig_tput.update_layout(layout.get("plot-trending-tput", dict()))
@@ -338,3 +361,79 @@ def trending_tput(data: pd.DataFrame, sel:dict, layout: dict, start: datetime,
         fig_lat.update_layout(layout.get("plot-trending-lat", dict()))
 
     return fig_tput, fig_lat
+
+
+def graph_hdrh_latency(data: dict, layout: dict) -> go.Figure:
+    """
+    """
+
+    fig = None
+
+    try:
+        name = data.pop("name")
+    except (KeyError, AttributeError):
+        return None
+
+    traces = list()
+    for idx, (lat_name, lat_hdrh) in enumerate(data.items()):
+        try:
+            decoded = hdrh.histogram.HdrHistogram.decode(lat_hdrh)
+        except (hdrh.codec.HdrLengthException, TypeError) as err:
+            continue
+        previous_x = 0.0
+        prev_perc = 0.0
+        xaxis = list()
+        yaxis = list()
+        hovertext = list()
+        for item in decoded.get_recorded_iterator():
+            # The real value is "percentile".
+            # For 100%, we cut that down to "x_perc" to avoid
+            # infinity.
+            percentile = item.percentile_level_iterated_to
+            x_perc = min(percentile, PERCENTILE_MAX)
+            xaxis.append(previous_x)
+            yaxis.append(item.value_iterated_to)
+            hovertext.append(
+                f"<b>{_GRAPH_LAT_HDRH_DESC[lat_name]}</b><br>"
+                f"Direction: {(u'W-E', u'E-W')[idx % 2]}<br>"
+                f"Percentile: {prev_perc:.5f}-{percentile:.5f}%<br>"
+                f"Latency: {item.value_iterated_to}uSec"
+            )
+            next_x = 100.0 / (100.0 - x_perc)
+            xaxis.append(next_x)
+            yaxis.append(item.value_iterated_to)
+            hovertext.append(
+                f"<b>{_GRAPH_LAT_HDRH_DESC[lat_name]}</b><br>"
+                f"Direction: {(u'W-E', u'E-W')[idx % 2]}<br>"
+                f"Percentile: {prev_perc:.5f}-{percentile:.5f}%<br>"
+                f"Latency: {item.value_iterated_to}uSec"
+            )
+            previous_x = next_x
+            prev_perc = percentile
+
+        traces.append(
+            go.Scatter(
+                x=xaxis,
+                y=yaxis,
+                name=_GRAPH_LAT_HDRH_DESC[lat_name],
+                mode=u"lines",
+                legendgroup=_GRAPH_LAT_HDRH_DESC[lat_name],
+                showlegend=bool(idx % 2),
+                line=dict(
+                    color=_COLORS[int(idx/2)],
+                    dash=u"solid",
+                    width=1 if idx % 2 else 2
+                ),
+                hovertext=hovertext,
+                hoverinfo=u"text"
+            )
+        )
+    if traces:
+        fig = go.Figure()
+        fig.add_traces(traces)
+        layout_hdrh = layout.get("plot-hdrh-latency", None)
+        if lat_hdrh:
+            layout_hdrh["title"]["text"] = f"<b>{name}</b>"
+            fig.update_layout(layout_hdrh)
+
+    return fig
diff --git a/resources/tools/dash/app/pal/trending/layout.py b/resources/tools/dash/app/pal/trending/layout.py
index 377621425c..bd8dd8b240 100644
--- a/resources/tools/dash/app/pal/trending/layout.py
+++ b/resources/tools/dash/app/pal/trending/layout.py
@@ -15,7 +15,6 @@
 """
 
 
-import json
 import pandas as pd
 
 from dash import dcc
@@ -27,7 +26,7 @@ from yaml import load, FullLoader, YAMLError
 from datetime import datetime, timedelta
 
 from ..data.data import Data
-from .graphs import trending_tput
+from .graphs import graph_trending_tput, graph_hdrh_latency
 
 
 class Layout:
@@ -35,8 +34,12 @@ class Layout:
     """
 
     STYLE_HIDEN = {"display": "none"}
-    STYLE_BLOCK = {"display": "block"}
-    STYLE_INLINE ={"display": "inline-block", "width": "50%"}
+    STYLE_BLOCK = {"display": "block", "vertical-align": "top"}
+    STYLE_INLINE ={
+        "display": "inline-block",
+        "vertical-align": "top",
+        "width": "33%"
+    }
     NO_GRAPH = {"data": [], "layout": {}, "frames": []}
 
     def __init__(self, app, html_layout_file, spec_file, graph_layout_file,
@@ -190,13 +193,10 @@ class Layout:
                         html.Div(
                             id="div-tput-metadata",
                             children=[
-                                dcc.Markdown("""
-                                **Metadata**
-
-                                Click on data points in the graph.
-                                """),
+                                dcc.Markdown("**Throughput**"),
                                 html.Pre(
-                                    id="tput-metadata"
+                                    id="tput-metadata",
+                                    children="Click on data points in the graph"
                                 )
                             ],
                             style=self.STYLE_HIDEN
@@ -204,13 +204,25 @@ class Layout:
                         html.Div(
                             id="div-latency-metadata",
                             children=[
-                                dcc.Markdown("""
-                                **Metadata**
-
-                                Click on data points in the graph.
-                                """),
+                                dcc.Markdown("**Latency**"),
                                 html.Pre(
-                                    id="latency-metadata"
+                                    id="latency-metadata",
+                                    children="Click on data points in the graph"
+                                )
+                            ],
+                            style=self.STYLE_HIDEN
+                        ),
+                        html.Div(
+                            id="div-latency-hdrh",
+                            children=[
+                                dcc.Loading(
+                                    id="loading-hdrh-latency-graph",
+                                    children=[
+                                        dcc.Graph(
+                                            id="graph-latency-hdrh"
+                                        )
+                                    ],
+                                    type="circle"
                                 )
                             ],
                             style=self.STYLE_HIDEN
@@ -615,7 +627,7 @@ class Layout:
                 })
 
             elif trigger_id in ("btn-sel-display", "dpr-period"):
-                fig_tput, fig_lat = trending_tput(
+                fig_tput, fig_lat = graph_trending_tput(
                     self.data, store_sel, self.layout, d_start, d_end
                 )
                 output.set_values({
@@ -641,7 +653,7 @@ class Layout:
                             new_store_sel.append(item)
                     store_sel = new_store_sel
                 if store_sel:
-                    fig_tput, fig_lat = trending_tput(
+                    fig_tput, fig_lat = graph_trending_tput(
                         self.data, store_sel, self.layout, d_start, d_end
                     )
                     output.set_values({
@@ -681,13 +693,24 @@ class Layout:
         def _show_tput_metadata(hover_data):
             if not hover_data:
                 raise PreventUpdate
-            return json.dumps(hover_data, indent=2)
+            return hover_data["points"][0]["text"].replace("<br>", "\n"),
 
         @app.callback(
             Output("latency-metadata", "children"),
+            Output("graph-latency-hdrh", "figure"),
+            Output("div-latency-hdrh", "style"),
             Input("graph-latency", "clickData")
         )
         def _show_latency_metadata(hover_data):
             if not hover_data:
                 raise PreventUpdate
-            return json.dumps(hover_data, indent=2)
+            graph = graph_hdrh_latency(
+                hover_data["points"][0]["customdata"], self.layout
+            )
+            if not graph:
+                graph = no_update
+            return (
+                hover_data["points"][0]["text"].replace("<br>", "\n"),
+                graph,
+                self.STYLE_INLINE if graph else self.STYLE_HIDEN
+            )
diff --git a/resources/tools/dash/app/pal/trending/layout.yaml b/resources/tools/dash/app/pal/trending/layout.yaml
index 86a9f19a70..27294a3551 100644
--- a/resources/tools/dash/app/pal/trending/layout.yaml
+++ b/resources/tools/dash/app/pal/trending/layout.yaml
@@ -1,11 +1,11 @@
 plot-trending-tput:
-  title: ""
-  titlefont:
-    size: 16
+  # title: ""
+  # titlefont:
+  #   size: 16
   autosize: True
   showlegend: True
   # width: 1100
-  height: 600
+  height: 400
   yaxis:
     showticklabels: True
     tickformat: ".3s"
@@ -77,17 +77,17 @@ plot-trending-tput:
     namelength: -1
 
 plot-trending-lat:
-  title: ""
-  titlefont:
-    size: 16
+  # title: ""
+  # titlefont:
+  #   size: 16
   autosize: True
   showlegend: True
   # width: 1100
-  height: 600
+  height: 400
   yaxis:
     showticklabels: True
     tickformat: ".3s"
-    title: "Latency [us]"
+    title: "Average Latency at 50% PDR [us]"
     hoverformat: ".5s"
     gridcolor: "rgb(238, 238, 238)"
     linecolor: "rgb(238, 238, 238)"
@@ -153,3 +153,59 @@ plot-trending-lat:
   plot_bgcolor: "#fff"
   hoverlabel:
     namelength: -1
+
+plot-hdrh-latency:
+    title:
+      text: "Latency by Percentile Distribution"
+      xanchor: "center"
+      x: 0.5
+      font:
+        size: 10
+    showlegend: True
+    legend:
+      traceorder: "normal"
+      orientation: "h"
+      # font:
+      #   size: 16
+      xanchor: "left"
+      yanchor: "top"
+      x: 0
+      y: -0.25
+      bgcolor: "rgba(255, 255, 255, 0)"
+      bordercolor: "rgba(255, 255, 255, 0)"
+    xaxis:
+      type: "log"
+      title: "Percentile [%]"
+      # titlefont:
+      #   size: 14
+      autorange: False
+      fixedrange: True
+      gridcolor: "rgb(230, 230, 230)"
+      linecolor: "rgb(220, 220, 220)"
+      linewidth: 1
+      showgrid: True
+      showline: True
+      showticklabels: True
+      tickcolor: "rgb(220, 220, 220)"
+      tickvals: [1, 2, 1e1, 20, 1e2, 1e3, 1e4, 1e5, 1e6]
+      ticktext: [0, 50, 90, 95, 99, 99.9, 99.99, 99.999, 99.9999]
+      # tickfont:
+      #   size: 14
+    yaxis:
+      title: "One-Way Latency per Direction [uSec]"
+      # titlefont:
+      #   size: 14
+      gridcolor: "rgb(230, 230, 230)"
+      linecolor: "rgb(220, 220, 220)"
+      linewidth: 1
+      showgrid: True
+      showline: True
+      showticklabels: True
+      tickcolor: "rgb(220, 220, 220)"
+      # tickfont:
+      #   size: 14
+    autosize: False
+    # width: 700
+    # height: 700
+    paper_bgcolor: "white"
+    plot_bgcolor: "white"
diff --git a/resources/tools/dash/app/requirements.txt b/resources/tools/dash/app/requirements.txt
index 5c3a5488f0..90965371d4 100644
--- a/resources/tools/dash/app/requirements.txt
+++ b/resources/tools/dash/app/requirements.txt
@@ -10,6 +10,7 @@ dash-table==5.0.0
 Flask==2.0.2
 Flask-Assets==2.0
 Flask-Compress==1.10.1
+hdrhistogram==0.9.1
 future==0.18.2
 intervaltree==3.1.0
 itsdangerous==2.0.1