scripts/dashboard/templates/memoryreport.html

<!--
Copyright (c) Qualcomm Technologies, Inc. and/or its subsidiaries.

SPDX-License-Identifier: Apache-2.0
-->

{% extends "base.html" %}

{% block head %}

{% if include_plotly_js %}
<script src="static/js/plotly.js"></script>
{% endif %}
<link href="static/css/treetable.css" rel="stylesheet">
<script src="static/js/treetable.js"></script>
<script src="static/js/memoryreport.js"></script>

<script>
  // Create Javascript variables with all the report data in it.
  let ramReport = {% if ram_report %}{{ram_report|safe}}{% else %}null{% endif %};
  let romReport = {% if rom_report %}{{rom_report|safe}}{% else %}null{% endif %};
  let allReport = {% if all_report %}{{all_report|safe}}{% else %}null{% endif %};
  let regionReports = {
    {% for r in memory_regions %}
    "{{ r.tab_id }}": {% if r.report %}{{ r.report|safe }}{% else %}null{% endif %}{% if not loop.last %},{% endif %}
    {% endfor %}
  };
</script>

{% endblock %}

{% block content %}

<div class="card callout mb-4">
  <div class="card-body" style="font-size:smaller">
    The memory report is split into three main sections (Total, RAM, and ROM)
    plus any additional memory-sections found in the build.
    The <b>RAM report</b> includes all writeable data: variables, stacks,
    and heaps. It does not include code.
    The <b>ROM report</b> includes all symbols that can be part of a ROM
    image: code and statically initialized data.
    The <b>total memory</b> report shows the total memory used, helpful
    for optimizing the total RAM requirement when ROM is not used.
    <br/>
    <span class="bold-lt">Note</span> that the sum of the RAM and ROM reports
    may not equal the size in the total report since statically initialized
    variables can appear in both RAM and ROM reports (but only count once for
    the total). <span class="bold-lt">Also note</span> that the symbols in the
    additional <b>memory-section</b> tabs are also included in the main reports
    as appropriate. The <b>(hidden)</b> size is memory allocated in an elf
    section but not associated with any symbol.
  </div>
</div>

<ul class="nav nav-underline mb-3" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="combined-tab" data-bs-toggle="tab"
        data-bs-target="#combinedReport" type="button" role="tab"
        aria-controls="combined" aria-selected="true">
      <h5>Total Memory</h5>
    </button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="ram-tab" data-bs-toggle="tab"
        data-bs-target="#ramReport" type="button" role="tab"
        aria-controls="ramReport" aria-selected="false">
      <h5>RAM Report</h5>
    </button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="rom-tab" data-bs-toggle="tab"
        data-bs-target="#romReport" type="button" role="tab"
        aria-controls="romReport" aria-selected="false">
      <h5>ROM Report</h5>
    </button>
  </li>
  {% for r in memory_regions %}
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="{{ r.tab_id }}-tab" data-bs-toggle="tab"
        data-bs-target="#{{ r.tab_id }}Report" type="button" role="tab"
        aria-controls="{{ r.tab_id }}Report" aria-selected="false">
      <h5>{{ r.name }}</h5>
    </button>
  </li>
  {% endfor %}
</ul>

<div class="tab-content mb-5">

  <div class="tab-pane fade show active" id="combinedReport" role="tabpanel">
    <div class="row mb-2">
      <div class="col-auto ms-auto">
        <input class="form-control table-search-input" type="search" id="searchAll" placeholder="Search...">
      </div>
    </div>
    <table id="allTree" class="table table-sm table-hover table-bordered table-light mb-5">
      <colgroup>
        <col width="*"/>
        <col width="100px"/>
        <col width="100px"/>
      </colgroup>
      <thead>
        <tr>
          <th>Path</th>
          <th>Size</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td></td> <td class="text-end"></td> <td class="text-end"></td>
        </tr>
      </tbody>
    </table>

    <h5>Top Ten Symbols by Size</h5>

    <table class="table table-sm table-hover table-bordered table-light mb-5">
      <thead>
        <tr>
          <th>Symbol</th>
          <th>Size</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        {% for symbol in top_ten %}
        <tr>
          <td>{{symbol.identifier}}
            <span class="memory-type">
              {% for loc in symbol.loc %}
              {{loc|upper}}{% if not loop.last %},{%endif%}
              {% endfor %}
            </span>
          </td>
          <td class="text-end">{{symbol.size|display_size}}</td>
          <td class="text-end">{{"%.2f" % (symbol.size * 100 / all_report_size)}}%</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>

    {% if all_plot %}
    <div class="table-light memory-plot">
      {{all_plot|safe}}
    </div>
    {% endif %}
  </div>

  <div class="tab-pane fade" id="ramReport" role="tabpanel" aria-labelledby="ram-tab">
    <div class="row mb-2">
      <div class="col-auto ms-auto">
        <input class="form-control table-search-input" type="search" id="searchRam" placeholder="Search...">
      </div>
    </div>
    <table id="ramTree" class="table table-sm table-hover table-bordered table-light mb-5">
      <colgroup>
        <col width="*"/>
        <col width="100px"/>
        <col width="100px"/>
      </colgroup>
      <thead>
        <tr>
          <th>Path</th>
          <th>Size</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
      </tbody>
    </table>

    {% if ram_plot %}
    <div class="table-light memory-plot">
      {{ram_plot|safe}}
    </div>
    {% endif %}
  </div>

  <div class="tab-pane fade" id="romReport" role="tabpanel" aria-labelledby="rom-tab">
    <div class="row mb-2">
      <div class="col-auto ms-auto">
        <input class="form-control table-search-input" type="search" id="searchRom" placeholder="Search...">
      </div>
    </div>
    <table id="romTree" class="table table-sm table-hover table-bordered table-light mb-5">
      <colgroup>
        <col width="*"/>
        <col width="100px"/>
        <col width="100px"/>
      </colgroup>
      <thead>
        <tr>
          <th>Path</th>
          <th>Size</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td></td> <td class="text-end"></td> <td class="text-end"></td>
        </tr>
      </tbody>
    </table>

    {% if rom_plot %}
    <div class="table-light memory-plot">
      {{rom_plot|safe}}
    </div>
    {% endif %}
  </div>

  {% for r in memory_regions %}
  <div class="tab-pane fade" id="{{ r.tab_id }}Report" role="tabpanel" aria-labelledby="{{ r.tab_id }}-tab">
    <div class="row mb-2 align-items-center">
      <div class="col text-muted small">
        <span class="font-monospace">{{ r.path }}</span> | Region Size: {{ r.region_size | display_size }}
      </div>
      <div class="col-auto">
        <input class="form-control table-search-input" type="search" id="search_{{ r.tab_id }}" placeholder="Search...">
      </div>
    </div>
    <table id="{{ r.tab_id }}Tree"
        class="table table-sm table-hover table-bordered table-light mb-5">
      <colgroup>
        <col width="*"/>
        <col width="100px"/>
        <col width="100px"/>
      </colgroup>
      <thead>
        <tr>
          <th>Path</th>
          <th>Size</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
      </tbody>
    </table>
    {% if r.plot %}
    <div class="table-light memory-plot">
      {{r.plot|safe}}
    </div>
    {% endif %}
  </div>
  {% endfor %}

</div>

{% endblock %}