Commit 1c0bfd4d authored by Lluis Gifre Renom's avatar Lluis Gifre Renom
Browse files

Merge branch 'feat/84-tid-prettify-device-inventory-items-in-the-webui' into 'develop' 

Resolve "(TID) Prettify device inventory items in the WebUI"

Closes #84

See merge request !167
parents eeb16213 d510a286

src/webui/service/templates/device/inventory.html

+36 −54
Original line number Diff line number Diff line
@@ -73,20 +73,40 @@ 
        </button>

    </div>

</div>



<br>



{% macro render_item(item, components, depth=0) %}

    {% if depth < 10 %} 

        {%if item.type != 'CHASSIS' %}

            <li><span class="caret">{{ item.name }}</span>

                <ul class="nested">

                    <li><span><b>Component UUID:</b> {{item.component_uuid.uuid}}</span></li>

                    <li><span><b>Attributes:</b> {{item.attributes}}</span></li>

                    {% for comp in components | sort(reverse = false, attribute='name') %}

                        {% if item.name == comp.parent %}

                            {{ render_item(comp, components, depth + 1) }}

                        {% endif %}

                    {% endfor %}

                </ul>

            </li>

        {% endif %}

    {% endif %}

{% endmacro %}



<div class="row mb-3">

    <div class="col-sm-3">

    <div>

        <ul id="myUL">

            <li><span class="caret"></span>Components</span>

            <li><span class="caret">Components</span>

                <ul class="nested">

                    {% for item in (device.components|sort(true, attribute='name')) %}

                    {% for item in device.components | sort(reverse = false, attribute='name') %}

                        {% if item.parent | length < 1 or item.type == 'CHASSIS' %}

                    <li><span class="caret"></span>{{item.name}}</span>

                            <li><span class="caret">{{ item.name }}</span>

                                <ul class="nested">

                            {% for comp in (device.components|sort(true, attribute='name')) %}

                                    <li><span><b>Component UUID:</b> {{item.component_uuid.uuid}}</span></li>

                                    <li><span><b>Attributes:</b> {{item.attributes}}</span></li>

                                    {% for comp in device.components | sort(reverse = false, attribute='name') %}

                                        {% if item.name == comp.parent %}

                            <li>{{comp.name}}</li>

                                            {{ render_item(comp, device.components) }}

                                        {% endif %}

                                    {% endfor %}

                                </ul>
@@ -100,7 +120,6 @@ 
        <script>

            var toggler = document.getElementsByClassName("caret");

            var i;

            

            for (i = 0; i < toggler.length; i++) {

              toggler[i].addEventListener("click", function() {

                this.parentElement.querySelector(".nested").classList.toggle("active");
@@ -108,44 +127,7 @@ 
              });

            }

        </script>



    </div>

    {% if device.components|length > 1 %}

    <div class="col-sm-8">

        <table class="table table-striped table-hover">

            <thead>

                <tr>

                    <th scope="col">Component UUID</th>

                    <th scope="col">Name</th>

                    <th scope="col">Type</th>

                    <th scope="col">Parent</th>

                    <th scope="col">Attributes</th>

                </tr>

            </thead>

            <tbody>

                {% for component in (device.components|sort(true, attribute='name')) %}

                <tr>

                    <td>

                        {{ component.component_uuid.uuid }}

                    </td>

                    <td>

                        {{ component.name }}

                    </td>

                    <td>

                        {{ component.type }}

                    </td>

                    <td>

                        {{ component.parent }}

                    </td>

                    <td>

                        {{ component.attributes }}

                    </td>

                </tr>

                {% endfor %}

            </tbody>

        </table>

    </div>

    {% endif %}

</div>



{% endblock %}