index.html

{% extends "base.html" %}

{% block title %}Regression tests {{ super() }}{% endblock %}
{% block body %}
    {{ super() }}
    <br />
    <div class="grid-x">
        <div class="column medium-9">
            <h1>Regression tests</h1>
            {% if tests|length > 0 %}
                <div class="grid-x">
                    <label for="category" class="column medium-4">Select a category:</label>
                    <select id="category" style="background-position: right 0 center" onchange="selectedCategoryChange();" class="column small-6">
                        {% for category in categories %}
                            <option value="{{ category.id }}">{{ category.name }}</option>
                        {% endfor %}
                        <option value="0">All Categories</option>
                    </select>&nbsp;
                    {% if user is not none and user.is_admin %}
                        <span class="medium-2">
                            <a href="{{ url_for(".category_edit", category_id=categories[0].id) }}" title="Edit category" id="category_edit"><i class="fa fa-edit"></i></a>&nbsp;
                            <a href="{{ url_for(".category_delete", category_id=categories[0].id) }}" title="Delete category" id="category_delete"><i class="fa fa-remove"></i></a>&nbsp;
                        </span>
                    {% endif %}
                </div>
                <div class="grid-x">
                    <label class="column medium-4">Category description:</label>
                    <span id="category-descriptions" class="column medium-8">
                        {% for category in categories %}
                            <span {% if not loop.first %}class="hide" {% endif %}data-category="{{ category.id }}">{{ category.description }}</span>
                        {% endfor %}
                        <span class="hide" data-category="0">{{ 'All Categories' }}</span>
                    </span>&nbsp;
                </div>&nbsp;
                <div class="grid-x">
                    <label class="column medium-4" for="tag">Filter Tags:</label>
                    <select id="tag" style="background-position: right 0 center;" class="column medium-5" onchange="selectedTagsChange('add');" >
                        {% if tags|length %}
                            <option value="0">Select Tags</option>
                        {% else %}
                            <option value="0">No Tags Available</option>
                        {% endif %}
                        {% for tag in tags %}
                            <option id="tag-option" value="{{ tag.id }}">{{ tag.name }}</option>
                        {% endfor %}
                    </select>&nbsp;
                    <span class="medium-2">
                        <button id="searchButton" class="button" onclick="searchRegressionTests();">Search</button>
                    </span>
                    <span class="medium-2">
                        <button id="resetButton" class="button" onclick="selectedTagsChange('reset');">Reset</button>
                    </span>
                </div>
                <div class="grid-x">
                    <label class="column medium-3" for="tag">Selected Tags</label>
                    <div id="selected_tags" class="column medium-8">
                    </div>&nbsp;
                </div>&nbsp;
                <div class="grid-x callout alert" style="display:none;" id="message"></div>
                <table id="regression_tests" class="sortable tight striped">
                    <thead>
                    <tr>
                        <th>ID</th>
                        <th>Command</th>
                        <th>Active</th>
                        <th>Actions</th>
                        <th>Tags</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for test in tests %}
                        {% if test.categories|length == 0 %}
                            {% continue %}
                        {% endif %}
                        <tr data-category="[{{ test.categories|join(', ', attribute='id') }}]">
                            <td>{{ test.id }}</td>
                            <td>{{ test.command }}{% if test.never_worked %} <span class="label secondary" title="This test has been marked as never having produced correct output">Never worked</span>{% endif %}</td>
                            <td id="status-toggle-{{test.id}}">{{ test.active }}</td>
                            <td>
                                <a href="{{ url_for('.test_view', regression_id=test.id) }}" title="View details"><i class="fa fa-info-circle"></i></a>&nbsp;
                                {% if user is not none and user.has_role('contributor') %}
                                    <a id="toggle-active-{{test.id}}" title="Toggle Active Status" onclick="toggleactive({{test.id}})"><i class="fa fa-support"></i></a>
                                    <div id="loader-toggle-{{test.id}}" class="loader" style="display:none;"></div>
                                    <a href="{{ url_for('.test_edit', regression_id=test.id) }}" title="Edit regression test"><i class="fa fa-edit"></i></a>&nbsp;
                                    <a href="{{ url_for('.test_delete', regression_id=test.id) }}" title="Delete regression test"><i class="fa fa-remove"></i></a>&nbsp;
                                {% endif %}
                            </td>
                            <td class="tags">
                                {% set sample = test.sample %}
                                {% set visible_tags_count = 3 %}
                                {% for tag in sample.tags[:visible_tags_count] %}
                                    <span class="tag regression_test_tag" title="{{tag.description or tag.name}}" data-id="{{tag.id}}">{{ tag.name }}</span>
                                {% endfor %}
                                {% if sample.tags|length > visible_tags_count %}
                                    <a href="{{ url_for('sample.sample_by_hash', sample_hash=sample.sha) }}#tags" title="View details">
                                        <span>+{{ sample.tags|length - visible_tags_count }} more</span>
                                    </a>
                                {% endif %}
                            </td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            {% else %}
                <p>There are no regression tests available</p>
            {% endif %}
        </div>
        <div class="column medium-3">
            {% if user is not none and user.has_role('contributor') %}
            <h5>Regression tests</h5>
            <ul class="no-bullet">
                <li><i class="fa fa-plus-circle"></i> <a href="{{ url_for(".test_add") }}">Add new regression test</a></li>
                {% if user.is_admin %}
                    <li><i class="fa fa-object-group"></i> <a href="{{ url_for(".category_add") }}">Add regression category</a></li>
                {% endif %}
            </ul>
            {% endif %}
        </div>
    </div>
{% endblock %}

{% block scripts %}
    {{ super() }}
    <script type="text/javascript">
        function selectedTagsChange(mode, id=0){
            if(mode === "add"){
                let tagId = $("#tag").val();
                let selectedTagName = $("#tag").find("option:selected").text();
                if(!selectedTagName){
                    $("#tag").val("0");
                    return;
                }

                let newTag = $("<span>").addClass("tag selected_tag").attr("title", selectedTagName).attr("data-id", tagId).html(`${selectedTagName}&nbsp;`);
                let removeButton = $("<button>").html('<i class="fa fa-remove"></i>').click(function() {
                    $(this).parent().remove();
                    selectedTagsChange('remove', tagId); 
                });
                newTag.append(removeButton);

                $("#selected_tags").append(newTag);

                $(`#tag option[value=${tagId}]`).prop("disabled", true);
                $("#tag").val("0");
                searchRegressionTests();
            }
            else if(mode === "remove"){
                $(`#tag option[value=${id}]`).prop("disabled", false);
                searchRegressionTests();
            }
            else if(mode === "reset"){
                $("#tag option").prop("disabled", false);
                $("#selected_tags").empty();
                searchRegressionTests();
            }
        }

        function areTagsPresent(search_tags, available_tags){
            const elementSet = {};
            available_tags.forEach(tagId => {
                elementSet[tagId] = true;
            });
            for (const tagId of search_tags){
                if(elementSet[tagId] !== true) return false;
            }
            return true;
        }

        function selectedCategoryChange(){
            searchRegressionTests()
        }

        function updateUrlWithQueryParam(paramName, paramValue) {
            const url = new URL(window.location.href);
            url.searchParams.set(paramName, paramValue);
            window.history.replaceState({}, "", url.toString());
        }

        function searchRegressionTests(){
            selected_tags = []
            $(".selected_tag").each(function() {
                selected_tags.push($(this).data("id"))
            });

            var id = $("#category").val();
            $("tbody tr[data-category]").each(function(idx, elm){
                let array = JSON.parse(elm.getAttribute("data-category"));
                category_id = parseInt(id)
                let regression_test_tags = []
                $(elm).find('.tags > .regression_test_tag').each(function() {
                    regression_test_tags.push($(this).data("id"))
                })
                let are_tags_present = areTagsPresent(selected_tags, regression_test_tags)
                let is_element_visible = (are_tags_present && (category_id===0 || array.indexOf(category_id) > -1))
                elm.setAttribute("class", is_element_visible ? "" : "hide");
            });
            var cat_desc = $("#category-descriptions");
            cat_desc.find("span[data-category='"+id+"']").each(function(idx, elm){
                elm.setAttribute("class","");
            });
            cat_desc.find("span[data-category!='"+id+"']").each(function(idx, elm){
                elm.setAttribute("class","hide");
            });
            {% if user.is_admin %}
            var cat_edit = $("#category_edit");
            var cat_delete = $("#category_delete");
            var cat_parts = cat_edit.attr("href").split("/");
            cat_edit.attr("href",cat_parts[cat_parts.length-3]+"/"+id+"/"+cat_parts[cat_parts.length-1]);
            cat_parts = cat_delete.attr("href").split("/");
            cat_delete.attr("href",cat_parts[cat_parts.length-3]+"/"+id+"/"+cat_parts[cat_parts.length-1]);
            {% endif %}

            updateUrlWithQueryParam("tags", selected_tags.join(","))
            updateUrlWithQueryParam("category", id)
        }

        $(document).ready(function(){
            const urlParams = new URLSearchParams(window.location.search);
            const hash = urlParams.get("category");
            if(hash === "") hash = "1";
            $("#category").find("option").each(function(idx, elm){
                if($(elm).val() === hash){
                    $(elm).attr("selected",true);
                }
            });

            query_tags = (urlParams.get("tags") || "").split(",");
            query_tags.forEach(tagId => {
                if(isNaN(parseInt(tagId))) return;
                $("#tag").val(tagId);
                selectedTagsChange('add');
            })

            searchRegressionTests();
        });

        function toggleactive(test_id) {
            $.ajax({
                type: "GET",
                url: ("{{ url_for('.toggle_active_status', regression_id='test_id') }}").replace('test_id', test_id),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                beforeSend:function()
                {
                    var toggle_active = "#toggle-active-" + test_id;
                    var toggle_loader = "#loader-toggle-" + test_id;
                    $(toggle_active).hide();
                    $(toggle_loader).show();
                },
                success:function(data){
                    var message = "#message";
                    var $div = $(message);
                    if(data.status === "success")
                    {
                        var toggle_td = "#status-toggle-" + test_id;
                        var toggle_active = "#toggle-active-" + test_id;
                        var toggle_loader = "#loader-toggle-" + test_id;
                        $(toggle_td).html(data.active);
                        $(toggle_loader).hide();
                        $(toggle_active).show();
                        $div.html("Status updated for Regression Test " + test_id);
                    }
                    else{
                        $div.html("Error updating status for Regression Test " + test_id);
                    }
                    $div.show();
                    /* hide message after 5 seconds */
                    setTimeout(function() {
                            $div.hide();
                    }, 5000);
                }
                });
            }
    </script>
{% endblock %}