9.1 Users Management and RBAC

9.2 Authentication and Security

9.3 Data Management and Data Model Handling 

9.3.1 Storage

9.3.2 Retention

9.3.3 Export/Import 

Resource Management

Import Data

9.3.4 Working with Data Model
9.3.5 Data Extraction

9.4 Control Center

9.4.1 License Entitlements

9.5 Platform Settings

9.5.1 Definitions

9.5.2 Preferences

9.5.3 About

1. Introduction to vuSmartMaps™

2. Getting Started with vuSmartMaps™

3. Installing vuSmartMaps™

4. Configuring vuSmartMaps™

Observability Sources

Data Pipeline and Parser Configuration

Data Enrichment Techniques

Onboarding Applications and Business Journeys
Configuring RCABot and ML Models

Tuning Hyperparameters and Model Training

5. Observability Through vuSmartMaps™

Dashboards and Visualization 

Business and Operational Storyboard
RCA Storyboard

Alert Console and Correlation

Alerts and Notification

Rule-based and Dynamic threshold-based Alerts

Programmable Alerts

Notifications and Triggers

Alert Customization Notification

RCABot and ChatBot Interactions

Ved – Gen AI Bot

Comprehensive Reporting

Log Management and Analysis

Application Observability

Journey Observability

6. Understanding vuSmartMaps™

Platform Architecture and Key Services
Insights from Logs, Traces and Metrics
How domain-centric approach enables better RCA and ML insights?
Security and Compliance

7. Administering vuSmartMaps™

Dashboard Creation

Visualizations 

Panels

Custom Panels

• UTM Visualization

• Matrix Visualization

• Insights

Alert Creation

Data Source Management

Report Generation

Data Onboarding and Instrumentation

Mobile Dashboard Configuration

9. Managing vuSmartMaps™

Users Management and RBAC

Authentication and Security

• Data Management and Data Model Handling 

Storage

Retention

• Export/Import 

• Resource Management

• Import Data

Working with Data Model
Data Extraction

• Control Center

License Entitlements

• Platform Settings

Definitions

Preferences

About

10. Glossary

11. Support and Troubleshooting

Insights Viz – Code Snippets

Table Viz Code Snippet

HTML Template

<style>

  .table-container{

      width: 100%;

      overflow-x: auto;

      box-shadow: 0 0 10px rgba(0,0,0,0.25);

      border-radius: 10px;

      font-family: ‘Inter-Medium’, sans-serif;

  }

 

  .insight_table{

      width: 100%;

      border-collapse: collapse;

      table-layout: fixed;

  }

  .insight_table th, .insight_table td{

      text-align: left;

  }

  .insight_table td {

      text-align: left;

      border-bottom: 1px solid #f2f2f2;

      color: #000000;

      font-size: 14px;

      color: #666;

      line-height: 1rem;

      font-weight: unset!important;

      padding-top: 10px;

      padding-bottom: 10px;

      padding-left: 10px;

      border-bottom: 1px solid #f2f2f2;

      word-wrap: break-word;

  }

  .insight_table th {

      text-align: left;

      color: #fff;

      line-height: 1rem;

      font-weight: unset!important;

      padding-top: 10px;

      padding-bottom: 10px;

      padding-left: 10px;

      padding-right: 5px;

      background-color: #0b132b;

      border-bottom: 3px solid #0b132b;

      border-top: 3px solid #0b132b;

      font-size: 14px;

      height: 5px;

      word-wrap: break-word;

  }

 

  .insight_table tbody tr:hover {

      background-color: #ECECFF;

  }

 

  .error_div {

    color: #ba3939;

    background: #ffe0e0;

    border: 1px solid #a33a3a;

    padding: 5px;

  }

 

  .no_data_div {

    color: #204a8e;

    background: #c9ddff;

    border: 1px solid #4c699b;

    padding: 5px;

    text-align: center;

  }

</style>

{{^error}}

<div class=”table-container”>

  <table class=”insight_table”>

    <thead>

      <tr>

        {{#table_heading}}

          <th>{{column_name}}</th>

        {{/table_heading}}

      </tr>

    </thead>

    <tbody>

      {{#table_data}}

      <tr>

        {{#row}}

        <td>{{cell_value}}</td>

        {{/row}}

      </tr>

      {{/table_data}}  

    </tbody>

  </table>

</div>

{{^is_data}}

  <div class=”no_data_div”>

    <span style=”font-weight: bold;”>No Data</span><br>

  </div>

{{/is_data}}

{{/error}}

{{#error}}

  <div class=”error_div”>

    <span style=”font-weight: bold;”>Error:</span><br>

    {{error_msg}}

  </div>

{{/error}}

 

Sample Python Script

error = False

error_msg = “”

if len(DM) > 0:

    is_data = True

    if “dm1” in DM:

        dm = DM[‘dm1’]

        no_of_rows = VAR.get(‘no_of_rows’, len(dm))

        table_data = []

        column_names = [VAR[key] for key in sorted(VAR.keys()) if key.startswith(‘col’)]

        if len(column_names) == 0:

            error = True

            dm_columns = []

            if len(dm) > 0:

                dm_columns = list(dm[0].keys())

            error_msg = “No columns are given in variables. Please provide at least one column name in variables; All column variables are of string format and should start with ‘col’; Data model columns are ” + ‘, ‘.join(dm_columns)

        elif len(column_names) > 5:

            error = True

            error_msg = “More than 5 columns are not allowed. Given columns are ” + ‘, ‘.join(column_names)

        else:

            if len(dm) > 0:

                is_data = True

                dm_columns = list(dm[0].keys())

                dm_keys_len = len(dm_columns)

                if dm_keys_len >= len(column_names):

                    miss_ele = []

                    for elem in column_names:

                        if elem not in dm_columns:

                            miss_ele.append(elem)

                    if len(miss_ele) == 0:

                        for i in range(len(dm)):

                            if i < no_of_rows:

                                cell_data = []

                                for column in column_names:

                                    cell_data.append({

                                        “cell_value”: dm[i][column] if dm[i][column] is not None else “-“

                                    })

                                table_data.append({

                                    “row”: cell_data

                                })

                            else:

                                break

                    else:

                        error = True

                        error_msg = “Column names given in varaibles do not match with the names in Data model. Data model columns are ” + ‘, ‘.join(dm_columns) + “; Unknown column name in variable is ” + ‘, ‘.join(miss_ele)

                else:

                    error = True

                    error_msg = “Data model has less columns when comapared to given columns in variables. Data model columns are ” + ‘, ‘.join(dm_columns) + “; Given columns in variables are ” + ‘, ‘.join(column_names)

            else:

                is_data = False

        table_heading = [{“column_name”: column} for column in column_names]

        VALUE[‘table_heading’] = table_heading

        VALUE[‘table_data’] = table_data

        VALUE[‘is_data’] = is_data

    else:

        error = True

        error_msg = “Data model is expected to be having label name as dm1”

else:

    is_data = False

 

VALUE[‘is_data’] = is_data

VALUE[‘error’] = error

VALUE[‘error_msg’] = error_msg

 

Distribution Viz Code Snippet

HTML Template

<style>

  .bargraph_data{

         padding-top:1px;

     }

     .bargraph_table{

         padding-top:10px;

         width:100%;

         align-items:left;

         text-align:left;

         border-collapse:seperate;

         border-spacing:10px;

     }

 

     .bargraph_label{

          text-align:left;

          padding-left:10px;

          width:10%;

          padding-bottom:3px;

          padding-top:3px;

          font-size: 13px;

     }

   

     .bargraph_bar{

         border-radius:5px;

         text-align:right;

         padding-right:2px;

         float:left;

         background:#19499d;

     }

     .bargraph_barchart{

         width:90%;

         border-radius: 5px;

         padding-right:20px;

         color:white;

     }

   

     .bargraph_pct{

         width:15%;

         text-align:left;

     }

 

     .bargraph_background{

         display:block;

         background-color:#dddbde;

         border-radius: 5px;

         text-align:left;

         color:black;

     }

     

     .error_div {

      color: #ba3939;

      background: #ffe0e0;

      border: 1px solid #a33a3a;

      padding: 5px;

    }

</style>

{{^error}}

<div style=”position: absolute;inset: 0; border-radius: 5px; font-family: ‘Inter-Medium’, sans-serif;”>

  <div style = “height:45px”>

      <div style=”display: flex;margin-top: 2px; padding-left: 10px; margin-bottom: 5px;”>

          <span style=” color: black; font-size:16px; font-weight: bold; padding-top: 7px;”> {{panel_heading}} </span>

      </div>

      {{#is_data}}

      <div>

          <div style = “padding-left:10px;”>

              <span style = “font-size:14px; “>{{{top_msg}}}</span>

          </div>

      </div>

      {{/is_data}}

      {{^is_data}}

      <div style=”font-style:italic;padding-left: 10px;”>No data found in the selected time period</div>

      {{/is_data}}

  </div>

  <div style=”padding-left: 5px; padding-top:10px; height:70px”>

      <div style=”display: flex; “>

          <?xml version=”1.0″ encoding=”UTF-8″?><svg id=”a” xmlns=”http://www.w3.org/2000/svg” viewBox=”0 0 24 24″ style=”width: 25px; height: 25px; fill: #ffc000″>

              <path d=”m15.82,12.17l-4.65-1.96c-.06-.02-.1-.07-.12-.12l-1.92-4.56c-.08-.18-.34-.19-.42,0l-2.04,4.29s-.06.09-.11.11l-4.42,2.17c-.18.09-.17.35.02.43l4.67,1.74c.06.02.11.07.14.14l1.74,4.63c.08.2.36.2.43,0l1.7-4.59c.02-.06.07-.11.14-.14l4.84-1.82c.14-.05.14-.24,0-.3Z”/>

              <path d=”m19.56,17.54s-.05-.03-.06-.06l-.99-2.35c-.04-.1-.17-.1-.22,0l-1.05,2.21s-.03.04-.06.06l-2.28,1.12c-.09.05-.09.18.01.22l2.41.9s.06.04.07.07l.9,2.38c.04.1.19.1.22,0l.87-2.36s.04-.06.07-.07l2.49-.94c.07-.03.07-.13,0-.15l-2.4-1.01Z”/>

              <path d=”m14.91,5.52l2.41.9s.06.04.07.07l.9,2.38c.04.1.19.1.22,0l.87-2.36s.04-.06.07-.07l2.49-.94c.07-.03.07-.13,0-.15l-2.4-1.01s-.05-.03-.06-.06l-.99-2.35c-.04-.1-.17-.1-.22,0l-1.05,2.21s-.03.04-.06.06l-2.28,1.12c-.09.05-.09.18.01.22Z”/>

          </svg>

          <div style=”margin-top: 3px; padding-left: 10px; color: #19499d; font-weight: bold; font-family: Inter-Medium;”>INSIGHTS</div>

      </div>

      {{#is_data}}

      <ul style=”font-size: 13px;”>

          {{#insight_data}}

          <li>

              {{{msg}}}

          </li>

          {{/insight_data}}

      </ul>

      {{/is_data}}

      {{^is_data}}

      <div style=” text-align: left; font-family: ‘Inter-Medium’, sans-serif; font-style:italic;padding-left: 30px;”>No insights observed </div>

      {{/is_data}}

  </div>

  <div style=” text-align: left; font-family: ‘Inter-Medium’, sans-serif; padding-top: 15px;”>      

      <div style = “padding-left:10px;font-size:13px; “><b>Distribution</b></div>

          <table class = “bargraph_table”>

              {{#bar_data}}

              <tr class = “bargraph_data” style=”opacity: {{opacity}};”>

                  <td class=”bargraph_label”> {{bar_title}} </td>

                      <td class = “bargraph_barchart”>

                          <div class = “bargraph_background”>                                        

                              <div class = “bargraph_bar” style=” width:{{bar_pct}}% ; color:white;”>

                                  {{#disp_in}}

                                      <span style =”padding-right:15px”>{{bar_pct}}%</span>

                                  {{/disp_in}}

                                  {{^disp_in}}

                                      &nbsp;

                                  {{/disp_in}}                    

                              </div>

                              {{#disp_out}}

                              <span style =”padding-left:5px”>{{bar_pct}}%</span>

                              {{/disp_out}}

                              {{^disp_out}}

                              {{^pct_100}}

                                  &nbsp;

                              {{/pct_100}}

                              {{/disp_out}}                                                

                          </div>

                      </td>

              </tr>

              {{/bar_data}}

          </table>

      </div>

</div>

{{/error}}

{{#error}}

<div class=”error_div”>

    <span style=”font-weight: bold;”>Error:</span><br>

    {{error_msg}}

  </div>

{{/error}}

Sample Python Script

error = False

error_msg = “”

heading = “”

top_msg = “”

top_sum = 0

least_sum = 0

others = 0

top_bottom_n = VAR.get(‘top_bottom_n’, 5)

heading = VAR.get(‘heading’, None)

if len(DM) > 0:

    is_data = True

    if “dm1” in DM:

        data = DM[‘dm1’]

        category_column = VAR.get(‘category_column’, None)

        count_column = VAR.get(‘count_column’, None)

        if category_column is None and count_column is None:

            error = True

            error_msg = “Variables category_column and count_column is to be added.”

        elif category_column is None:

            error = True

            error_msg = “Variables category_column is to be added.”

        elif count_column is None:

            error = True

            error_msg = “Variables count_column is to be added.”

        else:

            if category_column == count_column:

                error = True

                error_msg = “Variables category_column and count_column are the same.”

            else:

                dm_columns = []

                if len(data) > 0:

                    dm_columns = list(data[0].keys())

                    if category_column not in dm_columns and count_column not in dm_columns:

                        error = True

                        error_msg = “Coulumns ” + category_column +  ” and ” + count_column + ” is not in the data model; Available Columns are ” + “, “.join(dm_columns)

                    elif category_column not in dm_columns:

                        error = True

                        error_msg = “Coulumn ” + category_column + ” is not in the data model; Available Columns are ” + “, “.join(dm_columns)

                    elif count_column not in dm_columns:

                        error = True

                        error_msg = “Coulumn ” + count_column + ” is not in the data model; Available Columns are ” + “, “.join(dm_columns)

                    else:

                        dm0 = data[0]

                        if not isinstance(dm0[category_column], str) and isinstance(dm0[count_column], str):

                            error = True

                            error_msg = “Coulumn ” + category_column + ” is not a string, expected to be a string column; Column ” + count_column + ” is a string, expcted to be a numeric.”

                        elif not isinstance(dm0[category_column], str):

                            error = True

                            error_msg = “Coulumn ” + category_column + ” is not a string, expected to be a string column.”

                        elif isinstance(dm0[count_column], str):

                            error = True

                            error_msg = “Coulumn ” + count_column + ” is a string, expected to be a numeric.”

                        else:

                            data_arr = []

                            total = 0

                            for i in range(len(data)):

                                data_arr.append([data[i][category_column], data[i][count_column]])

                                total += data[i][count_column]

 

                            if len(data_arr) > 0:

                                is_data = True

                                data_arr.sort(key=lambda x: x[1], reverse = True)

 

                                data_pct_arr = []

                                topn_pct = 0

                                for i in range(len(data_arr)):

                                    pct = round((data_arr[i][1]/total)*100, 2)

                                    data_pct_arr.append([data_arr[i][0], data_arr[i][1], pct])

                                    if i < top_bottom_n:

                                        topn_pct += pct

                               

                                top_msg = “Out of the total <b>%s</b>, the <b>top %s</b> account for <b>%s</b>” % (total, top_bottom_n, str(100.00 if topn_pct>=100 else round(topn_pct, 2))+”%”)

 

                                insight_data =[]

                                for i in range(len(data_pct_arr)):

                                    if i < 2:

                                        insight_data.append({

                                            “msg”: “<b>%s</b> contributes to <b>%s</b>” % (data_pct_arr[i][0],str(data_pct_arr[i][2])+”%”)

                                        })

                                VALUE[‘insight_data’] = insight_data

 

                                top_l = top_bottom_n

                                bottom_l = top_bottom_n*2

 

                                #bar graph data

                               

                                if(len(data_pct_arr)<top_l and len(data_pct_arr)>0):  

                                    for i in range(len(data_pct_arr)):

                                        if i< top_l:

                                            top_sum = top_sum + data_pct_arr[i][2]

                                    top_sum = round(top_sum,2)

                                    least_sum = 0

                                    others = 0

 

                                if (len(data_pct_arr)>=top_l and len(data_pct_arr)<bottom_l):

                                    top = data_pct_arr[:top_l]

                                    for i in range(len(top)):

                                        top_sum = top_sum + data_pct_arr[i][2]

                                   

                                    least = data_pct_arr[top_l:]

                                    for i in range(len(least)):

                                        least_sum = least_sum + least[i][2]

                                    top_sum = round(top_sum,2)

                                    least_sum = round(least_sum,2)

                                    others = 0

 

                                if (len(data_pct_arr)>=bottom_l):

                                    for i in range(len(data_pct_arr)):

                                        if i < top_l:

                                            top_sum = top_sum + data_pct_arr[i][2]

 

                                    least = data_pct_arr[-top_l:]

                                    for i in range(len(least)):

                                        least_sum = least_sum + least[i][2]

                                    top_sum = round(top_sum,2)

                                    least_sum = round(least_sum,2)

                                    others = round(100-(top_sum+least_sum),2)

 

                            else:

                                is_data = False

                                top_msg = “No data found in the selected time period”

    else:

        error = True

        error_msg = “Data model is expected to be having label name as dm1”

else:

    is_data = False

 

if heading is None:

    error = True

    error_msg = “Variable heading missing. Add heading varaible to add a heading to this pannel”

 

VALUE[‘is_data’] = is_data

VALUE[‘error’] = error

VALUE[‘error_msg’] = error_msg

 

 

def inputfunction(bar_title,bar_pct, check_other=False, others = 0):

    if round(bar_pct,2) >= 100:

        bar_pct = 100.00

    elif round(bar_pct,2) <= 0.00:

        bar_pct = 0.00

    else:

        bar_pct = round(bar_pct,2)

   

    if round(bar_pct,2)<80:

        disp_out= True

        disp_in = False

    else:

        disp_out = False

        disp_in = True

    if round(bar_pct,2) >=99 :

        pct_100 = True

    else:

        pct_100 = False

    if round(bar_pct,2) ==0 :

        opacity = 1.0 if check_other and others > 0 else 0.3

    else:

        opacity = 1.0

 

    return {

        “bar_title”:bar_title,

        “bar_pct”:bar_pct,

        “disp_in”: disp_in,

        “disp_out”:disp_out,

        “pct_100”: pct_100,

        “opacity”: opacity

    }

 

bar_data = []

bar_data.append(inputfunction(“Top “+str(top_bottom_n),top_sum))

bar_data.append(inputfunction(“Least “+str(top_bottom_n),least_sum, True, others))

bar_data.append(inputfunction(“Others”,others))

 

VALUE[‘bar_data’]=bar_data

VALUE[‘top_msg’]=top_msg

VALUE[‘bar_data’]=bar_data

VALUE[‘panel_heading’] = heading

 

Bar Insight Code Snippet

HTML Template

<style>

    .bar-card{

        position:absolute;

        top: 0;

        left: 0;

        padding-top: 10px;

        padding-left: 15px;

        inset: 0;

        font-family: ‘Inter-Medium’, sans-serif;

    }

    .decline_heading {

        font-size: 15px;

    }

    .bar_table{

        padding-top: 6px;

        width:100%;

        align-items: left;

        text-align: left;

        border-collapse: separate;

        border-spacing: 10px

    }

    .bar_table_head, .bar_distribution_data{

        padding-top: 2px;

    }

    .bar_distribution{

        text-align: right;

        padding-right: 5px;

        width: 10%;

        white-space: nowrap;

        overflow: hidden;

        text-overflow: ellipsis;

    }

    .uei_cat_bar{

        border-radius: 20px;

        text-align: right;

        padding-right: 5px;

    }

 

    .error_div {

      color: #ba3939;

      background: #ffe0e0;

      border: 1px solid #a33a3a;

      padding: 5px;

    }

   

    .no_data_div {

      color: #204a8e;

      background: #c9ddff;

      border: 1px solid #4c699b;

      padding: 5px;

      text-align: center;

    }

    .bar_title {

        font-size: 16px;

        font-weight: bold;

    }

</style>

{{^error}}

<div class=”bar-card”>

    <div class=”bar_title”>

        {{title}}

    </div>

    <table class=”bar_table”>

        {{#out_data}}

        <tr class=”bar_distribution_data”>

            <td class=”bar_distribution”>{{category}}</td>

            <td style=”width: 80%; background-color: #c9ddff; border-radius: 10px;”>

                <div style=”display: flex;”>

                    <div class=”uei_cat_bar” style=”background-color:#4075C5 ; width:{{pct}};”>

                        &nbsp;

                    </div>

                    <!– <div style=”float: left; padding-left: 5px; font-weight: bold;”>

                        {{pct}}

                    </div> –>

                </div>

            </td>

            <td>

                <div style=”float: left; padding-left: 5px; font-weight: bold;”>

                    {{pct}}

                </div>

            </td>

        </tr>

        {{/out_data}}

    </table>

</div>

{{^is_data}}

<div class=”no_data_div”>

  <span style=”font-weight: bold;”>No Data</span><br>

</div>

{{/is_data}}

{{/error}}

{{#error}}

<div class=”error_div”>

  <span style=”font-weight: bold;”>Error:</span><br>

  {{error_msg}}

</div>

{{/error}}

Sample Python Script

error = False

error_msg = “”

 

if len(DM) > 0:

    is_data = True

    if “dm1” in DM:

        data = DM[‘dm1’]

        category_column = VAR.get(‘category_column’, None)

        count_column = VAR.get(‘count_column’, None)

        if category_column is None and count_column is None:

            error = True

            error_msg = “Variables category_column and count_column is to be added.”

        elif category_column is None:

            error = True

            error_msg = “Variables category_column is to be added.”

        elif count_column is None:

            error = True

            error_msg = “Variables count_column is to be added.”

        else:

            if category_column == count_column:

                error = True

                error_msg = “Variables category_column and count_column are the same.”

            else:

                dm_columns = []

                if len(data) > 0:

                    dm_columns = list(data[0].keys())

                    if category_column not in dm_columns and count_column not in dm_columns:

                        error = True

                        error_msg = “Coulumns ” + category_column +  ” and ” + count_column + ” is not in the data model; Available Columns are ” + “, “.join(dm_columns)

                    elif category_column not in dm_columns:

                        error = True

                        error_msg = “Coulumn ” + category_column + ” is not in the data model; Available Columns are ” + “, “.join(dm_columns)

                    elif count_column not in dm_columns:

                        error = True

                        error_msg = “Coulumn ” + count_column + ” is not in the data model; Available Columns are ” + “, “.join(dm_columns)

                    else:

                        dm0 = data[0]

                        if not isinstance(dm0[category_column], str) and isinstance(dm0[count_column], str):

                            error = True

                            error_msg = “Coulumn ” + category_column + ” is not a string, expected to be a string column; Column ” + count_column + ” is a string, expcted to be a numeric.”

                        elif not isinstance(dm0[category_column], str):

                            error = True

                            error_msg = “Coulumn ” + category_column + ” is not a string, expected to be a string column.”

                        elif isinstance(dm0[count_column], str):

                            error = True

                            error_msg = “Coulumn ” + count_column + ” is a string, expected to be a numeric.”

                        else:

                            no_of_bars = VAR.get(‘no_of_category_to_show’, None)

                            bar_data = []

                            total = 0

                            for i in range(len(data)):

                                bar_data.append([data[i][category_column], data[i][count_column]])

                                total += data[i][count_column]

                           

                            bar_data.sort(key=lambda x: x[1], reverse = True)

 

                            if no_of_bars is None:

                                no_of_bars = len(bar_data)

                                title = category_column.title() + ” distribution”

                            else:

                                title = “Top ” + str(no_of_bars) + ” ” + category_column.title() + ” distribution”

 

                            out_data = []

                            for i in range(len(bar_data)):

                                if i < no_of_bars:

                                    out_data.append({

                                        “category”: bar_data[i][0].title(),

                                        “pct”: str(round((bar_data[i][1]/total)*100, 2)) + “%”

                                    })

                                else:

                                    break

                            VALUE[‘out_data’] = out_data

                            VALUE[‘title’] = title

    else:

        error = True

        error_msg = “Data model is expected to have ‘dm1’ key”

else:

    is_data = False

 

 

VALUE[‘is_data’] = is_data

VALUE[‘error’] = error

VALUE[‘error_msg’] = error_msg

Info Insight Code Snippet

HTML Template

<style>

  .insight_card{

      position: absolute;

      inset: 0;

      font-family: ‘Inter-Medium’, sans-serif;

      padding: 10px 20px;

  }

 

  .insight_heading {

      color: white;

      font-size: 20px;

      margin-bottom: 10px;

      display: none;

  }

 

  .insight_value {

      font-size: 40px;

      margin-bottom: 10px;

      text-align: center;

      color: white;

  }

 

  .insight_link {

      color: #373A3C;

  }

 

  .insight_link:hover {

      opacity: 0.7;

      cursor: pointer;

  }

 

  .insight_info {

      font-size: 14px;

      margin-bottom: 10px;

      padding-top: 10px;

      display: flex;

      width: 100%;

      border-top: 1px solid black;

      /* align-items: center; */

      justify-content: center;

      /* border-radius: 8px; */

      /* background-color: #E9EFFA; */

      /* padding: 8px; */

  }

  .svg_div {

      width: 30px;

  }

  .insight_message {

      margin-left: 8px;

      color: white;

      display: flex;

      align-items: center;

      justify-content: center;

      text-align: center;

  }

 

  .error_div {

    color: #ba3939;

    background: #ffe0e0;

    border: 1px solid #a33a3a;

    padding: 5px;

  }

</style>

<div class=”insight_card”  style=”background-color:{{color}}”>

  {{^error}}

  <div class=”insight_heading”>

      {{title}}

  </div>

  <div class=”insight_value”>

        {{metric_value}}

  </div>

  <div class=”insight_info”>

      <div class=”insight_message”>

          {{{message}}}

      </div>

  </div>

  {{/error}}

  {{#error}}

  <div class=”error_div”>

      <span style=”font-weight: bold;”>Error:</span><br>

      {{error_msg}}

    </div>

  {{/error}}

</div>

Sample Python Script

data = DM.get(“DM1”,[])

prefix = VAR.get(“data_prefix”,None)

good_message = VAR.get(“good_message”,None)

error_message = VAR.get(“error_message”,None)

 

if len(data)>0:

    value = data[0][f'{prefix}_pct’]

    actual = data[0][f'{prefix}_actual’]

    expected = data[0][f'{prefix}_expected’]

    diff = expected-actual

 

    good_threshold = VAR.get(“good_threshold”,95)

    fair_threshold = VAR.get(“fair_threshold”,85)

 

    if value == 100:

        status = “Excellent”

        color = “#73BF69”

    elif value >= good_threshold:

        status = “Good”

        color = “#73BF69”

    elif value < good_threshold and value >= fair_threshold:

        status = “Fair”

        color = “#FA6400”

    else:

        status = “Poor”

        color = “#C4162A”

   

    if value == 100:

        good_message = good_message.replace(‘{_value_}’, str(expected))

        description = f'{good_message}’

    else:

        description = f'{diff} out of {expected} {error_message}’

 

else:

    status = “N.A.”

    color = “grey”

    description = “No data available for the selected time period”

 

VALUE[‘metric_value’] = status

VALUE[‘message’] = description

VALUE[‘color’] = color

RUM arrow Viz Code Snippet

HTML Template

<style>

.flex-container {

  display: flex;

  flex-wrap: nowrap;

  text-align: center;

  font-family: Heebo, Inter, Helvetica, Arial, sans-serif;

  font-size: 1.2rem;

  font-weight: 400;

  margin-left: 260px

 

}

 

.top-row {

  display: block;

  position: relative;

  float: left;

  width: calc(100% / 7 – 11px);

  height: 30px; /* Use the variable value directly */

  line-height: 40px; /* Use the variable value directly */

  margin-right: 10px; /* Use the variable value directly */

  padding: 0 20px;

}

 

.box-item {

  display: block;

  position: relative;

  float: left;

  width: calc(100% / 7 – 11px);

  height: 40px; /* Use the variable value directly */

  line-height: 40px; /* Use the variable value directly */

  margin-right: 10px; /* Use the variable value directly */

  padding: 0 20px;

  background-color: #fcc; /* Use the variable value directly */

  border-radius: 4px;

  color: white;

}

 

.box-item:before {

  content: ”;

  position: absolute;

  right: -8px;

  height: 0;

  width: 0;

  border-top: 20px solid transparent; /* Use the variable value directly */

  border-bottom: 20px solid transparent; /* Use the variable value directly */

  /*border-left: 10px solid #fcc; /* Use the variable value directly */

  border-radius: 4px;

  border-left: var(–before-border-left);

 

}

 

.box-item:after {

  content: ”;

  position: absolute;

  left: -1px;

  height: 0;

  width: 0;

  border-top: 20px solid transparent; /* Use the variable value directly */

  border-bottom: 20px solid transparent; /* Use the variable value directly */

  border-left: 10px solid #fff; /* Use the variable value directly */

  border-radius: 4px;

 

}

 

</style>

<div class=”flex-container”>

  {{#value_data}}

  <div class=”top-row” style=”width:{{width}}”>{{value}}</div>

  {{/value_data}}

</div>

<div class=”flex-container”>

  {{#label_data}}

  <div class=”box-item” style=”background-color: {{color}}; –before-border-left: 10px solid {{color}}; width:{{width}}”>{{name}}</div>

 {{/label_data}}

</div>

 

Sample Python Script

data = DM[‘dm1’]

data_list = []

 

for item in data:

    for key, value in item.items():

        if key in [‘DNS’, ‘TCP’, ‘Req’, ‘SSL’, ‘Resp’, ‘Processing’, ‘OnLoad’]:

            value = round((value / 1_000_000), 2)

 

            if key in [‘DNS’, ‘TCP’, ‘Req’, ‘SSL’]:

                # Updated conditions for DNS, TCP, Req, and SSL

                if value < 1000:

                    color = ‘#58a44c’

                    width = ‘8%’

                elif value >= 1000 and value <= 3000:

                    color = ‘#ff780a’

                    width = ‘12%’

                else:

                    color = ‘#e02f44’

                    width = ‘17%’

            elif key in [‘Resp’, ‘Processing’]:

                # Updated conditions for Resp and Processing

                if value < 3000:

                    color = ‘#58a44c’

                    width = ‘8%’

                elif value >= 3000 and value <= 5000:

                    color = ‘#ff780a’

                    width = ‘12%’

                else:

                    color = ‘#e02f44’

                    width = ‘17%’

            elif key == ‘OnLoad’:

                # Updated conditions for OnLoad

                if value < 1000:

                    color = ’58a44c’

                    width = ‘8%’

                elif value >= 1000 and value <= 3000:

                    color = ‘#ff780a’

                    width = ‘12%’

                else:

                    color = ‘#e02f44’

                    width = ‘17%’

 

            data_list.append({

                ‘name’: key,

                ‘value’: str(value) + (‘ms’ if key in [‘DNS’, ‘TCP’, ‘Req’, ‘SSL’, ‘Resp’, ‘Processing’, ‘OnLoad’] else ”),

                ‘color’: color,

                ‘width’: width

            })

 

VALUE[‘label_data’] = data_list

VALUE[‘value_data’] = data_list

 

Resources

Browse through our resources to learn how you can accelerate digital transformation within your organisation.

Unveiling our all powerful IBMB Observability ExperienceCenter. Click Here