path: root/examples/py-flow-dashboard/plotly_dash.py

import math

import dash

try:
    from dash import dcc
except ImportError:
    import dash_core_components as dcc

try:
    from dash import html
except ImportError:
    import dash_html_components as html

try:
    from dash import dash_table as dt
except ImportError:
    import dash_table as dt

from dash.dependencies import Input, Output, State

import dash_daq as daq

import plotly.graph_objects as go

global shared_flow_dict

app = dash.Dash(__name__)

def generate_box():
    return {
        'display': 'flex', 'flex-direction': 'row',
        'background-color': '#082255'
    }

def generate_led_display(div_id, label_name):
    return daq.LEDDisplay(
        id=div_id,
        label={'label': label_name, 'style': {'color': '#C4CDD5'}},
        labelPosition='bottom',
        value='0',
        backgroundColor='#082255',
        color='#C4CDD5',
    )

def generate_gauge(div_id, label_name, max_value=10):
    return daq.Gauge(
        id=div_id,
        value=0,
        label={'label': label_name, 'style': {'color': '#C4CDD5'}},
        max=max_value,
        min=0,
    )

def build_gauge(key, max_value=100):
    gauge_max = int(max(max_value,
                        shared_flow_dict[key]))
    grad_green  = [0,                    int(gauge_max * 1/3)]
    grad_yellow = [int(gauge_max * 1/3), int(gauge_max * 2/3)]
    grad_red    = [int(gauge_max * 2/3), gauge_max]

    grad_dict   = {
        "gradient":True,
        "ranges":{
            "green":grad_green,
            "yellow":grad_yellow,
            "red":grad_red
        }
    }

    return shared_flow_dict[key], gauge_max, grad_dict

def build_piechart(labels, values, color_map=None):
    lay = dict(
        plot_bgcolor = '#082255',
        paper_bgcolor = '#082255',
        font={"color": "#fff"},
        uirevision=True,
        autosize=True,
        height=250,
        margin = {'autoexpand': True, 'b': 0, 'l': 0, 'r': 0, 't': 0, 'pad': 0},
        width = 500,
        uniformtext_minsize = 12,
        uniformtext_mode = 'hide',
    )

    return go.Figure(layout=lay, data=[go.Pie(labels=labels, values=values, sort=False, marker_colors=color_map, textinfo='percent', textposition='inside')])

COLOR_MAP = {
    'piechart-flows': ['rgb(153, 153, 255)', 'rgb(153, 204, 255)', 'rgb(255, 204, 153)', 'rgb(255, 255, 255)'],
    'piechart-midstream-flows': ['rgb(255, 255, 153)', 'rgb(153, 153, 255)'],
    'piechart-risky-flows': ['rgb(255, 0, 0)', 'rgb(255, 128, 0)', 'rgb(255, 255, 0)', 'rgb(128, 255, 0)', 'rgb(153, 153, 255)'],
    'graph-flows': {'Current Active Flows': {'color': 'rgb(153, 153, 255)', 'width': 1},
                    'Current Risky Flows': {'color': 'rgb(255, 153, 153)', 'width': 3},
                    'Current Midstream Flows': {'color': 'rgb(255, 255, 153)', 'width': 3},
                    'Current Guessed Flows': {'color': 'rgb(153, 204, 255)', 'width': 1},
                    'Current Not-Detected Flows': {'color': 'rgb(255, 204, 153)', 'width': 1},
                    'Current Unclassified Flows': {'color': 'rgb(255, 255, 255)', 'width': 1},
                   },
}

def generate_tab_flow():
    return html.Div([
    html.Div(children=[
        dcc.Interval(id="tab-flow-default-interval", interval=1 * 2000, n_intervals=0),

        html.Div(children=[

            dt.DataTable(
                id='table-info',
                columns=[{'id': c.lower(), 'name': c, 'editable': False}
                         for c in ['Name', 'Total']],
                style_header={
                    'backgroundColor': '#082233',
                    'color': 'white'
                },
                style_data={
                    'backgroundColor': '#082244',
                    'color': 'white'
                },
            )

        ], style={'display': 'flex', 'flex-direction': 'row'}),

        html.Div(children=[
            dcc.Graph(
                id='piechart-flows',
                config={
                    'displayModeBar': False,
                },
                figure=build_piechart(['Detected', 'Guessed', 'Not-Detected', 'Unclassified'],
                                      [0, 0, 0, 0], COLOR_MAP['piechart-flows']),
            ),
        ], style={'padding': 10, 'flex': 1}),

        html.Div(children=[
            dcc.Graph(
                id='piechart-midstream-flows',
                config={
                    'displayModeBar': False,
                },
                figure=build_piechart(['Midstream', 'Not Midstream'],
                                      [0, 0], COLOR_MAP['piechart-midstream-flows']),
            ),
        ], style={'padding': 10, 'flex': 1}),

        html.Div(children=[
            dcc.Graph(
                id='piechart-risky-flows',
                config={
                    'displayModeBar': False,
                },
                figure=build_piechart(['Severy Risk', 'High Risk', 'Medium Risk', 'Low Risk', 'No Risk'],
                                      [0, 0], COLOR_MAP['piechart-risky-flows']),
            ),
        ], style={'padding': 10, 'flex': 1}),
    ], style=generate_box()),

    html.Div(children=[
        dcc.Interval(id="tab-flow-graph-interval", interval=4 * 1000, n_intervals=0),
        dcc.Store(id="graph-traces"),

        html.Div(children=[
            dcc.Graph(
                id="graph-flows",
                config={
                    'displayModeBar': True,
                    'displaylogo': False,
                },
                style={'height':'60vh'},
            ),
        ], style={'padding': 10, 'flex': 1})
    ], style=generate_box())
    ])

def generate_tab_other():
    return html.Div([
    html.Div(children=[
        dcc.Interval(id="tab-other-default-interval", interval=1 * 2000, n_intervals=0),

        html.Div(children=[
            dcc.Graph(
                id='piechart-events',
                config={
                    'displayModeBar': False,
                },
            ),
        ], style={'padding': 10, 'flex': 1}),
    ], style=generate_box())
    ])

TABS_STYLES = {
    'height': '34px'
}
TAB_STYLE = {
    'borderBottom': '1px solid #d6d6d6',
    'backgroundColor': '#385285',
    'padding': '6px',
    'fontWeight': 'bold',
}
TAB_SELECTED_STYLE = {
    'borderTop': '1px solid #d6d6d6',
    'borderBottom': '1px solid #d6d6d6',
    'backgroundColor': '#119DFF',
    'color': 'white',
    'padding': '6px'
}

app.layout = html.Div([
    dcc.Tabs(id="tabs-flow-dash", value="tab-flows", children=[
        dcc.Tab(label="Flow", value="tab-flows", style=TAB_STYLE,
                                                 selected_style=TAB_SELECTED_STYLE,
                                                 children=generate_tab_flow()),
        dcc.Tab(label="Other", value="tab-other", style=TAB_STYLE,
                                                  selected_style=TAB_SELECTED_STYLE,
                                                  children=generate_tab_other()),
    ], style=TABS_STYLES),
    html.Div(id="tabs-content")
])

def prettifyBytes(bytes_received):
    size_names = ['B', 'KB', 'MB', 'GB', 'TB']
    if bytes_received == 0:
        i = 0
    else:
        i = min(int(math.floor(math.log(bytes_received, 1024))), len(size_names) - 1)
    p = math.pow(1024, i)
    s = round(bytes_received / p, 2)
    return '{:.2f} {}'.format(s, size_names[i])

@app.callback(output=[Output('table-info', 'data'),
                      Output('piechart-flows', 'figure'),
                      Output('piechart-midstream-flows', 'figure'),
                      Output('piechart-risky-flows', 'figure')],

              inputs=[Input('tab-flow-default-interval', 'n_intervals')])
def tab_flow_update_components(n):
    return [[{'name': 'JSON Events',        'total': shared_flow_dict['total-events']},
             {'name': 'JSON Bytes',         'total': prettifyBytes(shared_flow_dict['total-json-bytes'])},
             {'name': 'Layer4 Bytes',       'total': prettifyBytes(shared_flow_dict['total-l4-bytes'])},
             {'name': 'Flows',              'total': shared_flow_dict['total-flows']},
             {'name': 'Risky Flows',        'total': shared_flow_dict['total-risky-flows']},
             {'name': 'Midstream Flows',    'total': shared_flow_dict['total-midstream-flows']},
             {'name': 'Guessed Flows',      'total': shared_flow_dict['total-guessed-flows']},
             {'name': 'Not Detected Flows', 'total': shared_flow_dict['total-not-detected-flows']}],
            build_piechart(['Detected', 'Guessed', 'Not-Detected', 'Unclassified'],
                           [shared_flow_dict['current-detected-flows'],
                            shared_flow_dict['current-guessed-flows'],
                            shared_flow_dict['current-not-detected-flows'],
                            shared_flow_dict['current-flows']
                                - shared_flow_dict['current-detected-flows']
                                - shared_flow_dict['current-guessed-flows']
                                - shared_flow_dict['current-not-detected-flows']],
                           COLOR_MAP['piechart-flows']),
            build_piechart(['Midstream', 'Not Midstream'],
                           [shared_flow_dict['current-midstream-flows'],
                            shared_flow_dict['current-flows'] -
                            shared_flow_dict['current-midstream-flows']],
                           COLOR_MAP['piechart-midstream-flows']),
            build_piechart(['Severe', 'High', 'Medium', 'Low', 'No Risk'],
                           [shared_flow_dict['current-risky-flows-severe'],
                            shared_flow_dict['current-risky-flows-high'],
                            shared_flow_dict['current-risky-flows-medium'],
                            shared_flow_dict['current-risky-flows-low'],
                            shared_flow_dict['current-flows'] -
                            shared_flow_dict['current-risky-flows']],
                           COLOR_MAP['piechart-risky-flows'])]

@app.callback(output=[Output('graph-flows', 'figure'),
                      Output('graph-traces', 'data')],
              inputs=[Input('tab-flow-graph-interval', 'n_intervals'),
                      Input('tab-flow-graph-interval', 'interval')],
              state=[State('graph-traces', 'data')])
def tab_flow_update_graph(n, i, traces):
    if traces is None:
        traces = ([], [], [], [], [], [])

    max_bins = 75

    traces[0].append(shared_flow_dict['current-flows'])
    traces[1].append(shared_flow_dict['current-risky-flows'])
    traces[2].append(shared_flow_dict['current-midstream-flows'])
    traces[3].append(shared_flow_dict['current-guessed-flows'])
    traces[4].append(shared_flow_dict['current-not-detected-flows'])
    traces[5].append(shared_flow_dict['current-flows']
                        - shared_flow_dict['current-detected-flows']
                        - shared_flow_dict['current-guessed-flows']
                        - shared_flow_dict['current-not-detected-flows'])
    if len(traces[0]) > max_bins:
        traces[0] = traces[0][1:]
        traces[1] = traces[1][1:]
        traces[2] = traces[2][1:]
        traces[3] = traces[3][1:]
        traces[4] = traces[4][1:]
        traces[5] = traces[5][1:]

    i /= 1000.0
    x = list(range(max(n - max_bins, 0) * int(i), n * int(i), max(int(i), 0)))
    if len(x) > 0 and x[0] > 60:
        x = [round(t / 60, 2) for t in x]
        x_div = 60
        x_axis_title = 'Time (min)'
    else:
        x_div = 1
        x_axis_title = 'Time (sec)'
    min_x = max(0, x[0] if len(x) >= max_bins else 0)
    max_x = max((max_bins * i) / x_div, x[max_bins - 1] if len(x) >= max_bins else 0)

    lay = dict(
        plot_bgcolor = '#082255',
        paper_bgcolor = '#082255',
        font={"color": "#fff"},
        xaxis = {
            'title': x_axis_title,
            "showgrid": False,
            "showline": False,
            "fixedrange": True,
            "tickmode": 'linear',
            "tick0": round(max_bins / x_div, 2),
            "dtick": round(max_bins / x_div, 2),
        },
        yaxis = {
            'title': 'Flow Count',
            "showgrid": False,
            "showline": False,
            "zeroline": False,
            "fixedrange": True,
            "tickmode": 'linear',
            "dtick": 10,
        },
        uirevision=True,
        autosize=True,
        bargap=0.01,
        bargroupgap=0,
        hovermode="closest",
        margin = {'b': 0, 'l': 0, 'r': 0, 't': 30, 'pad': 0},
        legend = {'borderwidth': 0},
    )

    fig = go.Figure(layout=lay)
    fig.update_xaxes(showgrid=True, gridwidth=1, gridcolor='#004D80', zeroline=True, zerolinewidth=1, range=[min_x, max_x])
    fig.update_yaxes(showgrid=True, gridwidth=1, gridcolor='#004D80', zeroline=True, zerolinewidth=1)
    fig.add_trace(go.Scatter(
        x=x,
        y=traces[0],
        name='Current Active Flows',
        mode='lines+markers',
        line=COLOR_MAP['graph-flows']['Current Active Flows'],
    ))
    fig.add_trace(go.Scatter(
        x=x,
        y=traces[1],
        name='Current Risky Flows',
        mode='lines+markers',
        line=COLOR_MAP['graph-flows']['Current Risky Flows'],
    ))
    fig.add_trace(go.Scatter(
        x=x,
        y=traces[2],
        name='Current Midstream Flows',
        mode='lines+markers',
        line=COLOR_MAP['graph-flows']['Current Midstream Flows'],
    ))
    fig.add_trace(go.Scatter(
        x=x,
        y=traces[3],
        name='Current Guessed Flows',
        mode='lines+markers',
        line=COLOR_MAP['graph-flows']['Current Guessed Flows'],
    ))
    fig.add_trace(go.Scatter(
        x=x,
        y=traces[4],
        name='Current Not-Detected Flows',
        mode='lines+markers',
        line=COLOR_MAP['graph-flows']['Current Not-Detected Flows'],
    ))
    fig.add_trace(go.Scatter(
        x=x,
        y=traces[5],
        name='Current Unclassified Flows',
        mode='lines+markers',
        line=COLOR_MAP['graph-flows']['Current Unclassified Flows'],
    ))

    return [fig, traces]

@app.callback(output=[Output('piechart-events', 'figure')],
              inputs=[Input('tab-other-default-interval', 'n_intervals')])
def tab_other_update_components(n):
    return [build_piechart(['Base', 'Daemon', 'Packet',
                            'Flow New', 'Flow Update', 'Flow Analyse', 'Flow End', 'Flow Idle',
                            'Flow Detection', 'Flow Detection-Updates', 'Flow Guessed', 'Flow Not-Detected'],
                           [shared_flow_dict['total-base-events'],
                            shared_flow_dict['total-daemon-events'],
                            shared_flow_dict['total-packet-events'],
                            shared_flow_dict['total-flow-new-events'],
                            shared_flow_dict['total-flow-update-events'],
                            shared_flow_dict['total-flow-analyse-events'],
                            shared_flow_dict['total-flow-end-events'],
                            shared_flow_dict['total-flow-idle-events'],
                            shared_flow_dict['total-flow-detected-events'],
                            shared_flow_dict['total-flow-detection-update-events'],
                            shared_flow_dict['total-flow-guessed-events'],
                            shared_flow_dict['total-flow-not-detected-events']])]

def web_worker(mp_shared_flow_dict, listen_host, listen_port):
    global shared_flow_dict

    shared_flow_dict = mp_shared_flow_dict

    try:
        app.run_server(debug=False, host=listen_host, port=listen_port)
    except KeyboardInterrupt:
        pass