feat(uti): Dash demo

- displays the table with trending data downloaded from trending pages

Signed-off-by: Peter Mikus <pmikus@cisco.com>
Change-Id: Ic0d48290105ccd846c7de9ee4d8acb78e0b72f00

3 files changed, 136 insertions, 0 deletions

diff --git a/resources/tools/dash/app/pal/trending/dashboard.py b/resources/tools/dash/app/pal/trending/dashboard.py
new file mode 100644
index 0000000000..ee5ea5123f
--- /dev/null
+++ b/resources/tools/dash/app/pal/trending/dashboard.py
@@ -0,0 +1,69 @@
+# Copyright (c) 2022 Cisco and/or its affiliates.
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at:
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+"""Instantiate a Dash app."""
+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 html_layout
+
+
+def init_dashboard(server):
+    """Create a Plotly Dash dashboard.
+
+    :param server: Flask server.
+    :type server: Flask
+    :returns: Dash app server.
+    :rtype: Dash
+    """
+    dash_app = dash.Dash(
+        server=server,
+        routes_pathname_prefix="/trending/",
+        external_stylesheets=[
+            "/static/dist/css/styles.css",
+            "https://fonts.googleapis.com/css?family=Lato",
+        ],
+    )
+
+    # Load DataFrame
+    df = create_dataframe()
+
+    # Custom HTML layout
+    dash_app.index_string = html_layout
+
+    # Create Layout
+    dash_app.layout = html.Div(
+        children=[
+            create_data_table(df),
+        ],
+        id="dash-container",
+    )
+    return dash_app.server
+
+
+def create_data_table(df):
+    """Create Dash datatable from Pandas DataFrame."""
+    table = dash_table.DataTable(
+        id="database-table",
+        columns=[{"name": i, "id": i} for i in df.columns],
+        data=df.to_dict("records"),
+        sort_action="native",
+        sort_mode="native",
+        page_size=300,
+    )
+    return table
diff --git a/resources/tools/dash/app/pal/trending/data.py b/resources/tools/dash/app/pal/trending/data.py
new file mode 100644
index 0000000000..06466a9175
--- /dev/null
+++ b/resources/tools/dash/app/pal/trending/data.py
@@ -0,0 +1,24 @@
+# Copyright (c) 2022 Cisco and/or its affiliates.
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at:
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+"""Prepare data for Plotly Dash."""
+
+import pandas as pd
+
+
+def create_dataframe():
+    """Create Pandas DataFrame from local CSV."""
+    return pd.read_csv(
+        "https://s3-docs.fd.io/csit/master/trending/_static/vpp/"
+        "csit-vpp-perf-mrr-daily-master-2n-zn2-trending.csv"
+    )
diff --git a/resources/tools/dash/app/pal/trending/layout.py b/resources/tools/dash/app/pal/trending/layout.py
new file mode 100644
index 0000000000..1f60aecd83
--- /dev/null
+++ b/resources/tools/dash/app/pal/trending/layout.py
@@ -0,0 +1,43 @@
+# Copyright (c) 2022 Cisco and/or its affiliates.
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at:
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+"""Plotly Dash HTML layout override."""
+
+html_layout = """
+<!DOCTYPE html>
+    <html>
+        <head>
+            {%metas%}
+            <title>{%title%}</title>
+            {%favicon%}
+            {%css%}
+        </head>
+        <body class="dash-template">
+            <header>
+              <div class="nav-wrapper">
+                <a href="/">
+                    <h1>Continuous Performance Trending</h1>
+                  </a>
+                <nav>
+                </nav>
+            </div>
+            </header>
+            {%app_entry%}
+            <footer>
+                {%config%}
+                {%scripts%}
+                {%renderer%}
+            </footer>
+        </body>
+    </html>
+"""