wazuh-kibana-app/public/templates/ruleset-decoders.html

<div flex ng-if="!loading && globalsubmenuNavItem2 == 'decoders'" ng-controller="decodersController" layout="column" id="rulesContainer" layout-padding layout-align="start space-around">

    <div class='uil-ring-css' ng-show="loading"><div></div></div>

    <div ng-show="!loading" layout="row" layout-align="center start">
        <md-card flex class="manager-ruleset-decoders-top-24">
            <md-card-content class="wazuh-column">
                <span class="md-headline-small">Top 24h - Decoder name</span>
                <kbn-vis vis-id="'Wazuh-App-Manager-Ruleset-Decoders-Top-24h-Decoder-name'" id="Wazuh-App-Manager-Ruleset-Decoders-Top-24h-Decoder-name"></kbn-vis>
            </md-card-content>
        </md-card>
    </div>

    <div ng-show="!loading" flex layout="column" class="manager-ruleset-decoders-no-padding">
        <div id="content" layout="row" layout-align="start start" class="manager-ruleset-decoders-top-content">
            <span layout="row" class="manager-ruleset-decoders-top-span" flex layout-align="space-between center">
                <md-autocomplete flex md-select-on-match="true" md-no-cache="true" md-selected-item="filter" md-selected-item-change="decoders.addFilter(filter.type, filter.name)" md-search-text="searchTerm" md-items="decoder in autoComplete | filter : searchTerm" md-item-text="decoder.name" md-min-length="0" md-no-asterisk="false" md-menu-class="autocomplete-custom-agents-bar" md-search-text-change="analizeDecoders(searchTerm)" placeholder="Search file">
                    <md-item-template>
                        <span class="item-title">
                            <span><strong md-highlight-text="search" md-highlight-flags="i"> {{decoder.name}} </strong></span>
                        </span>
                        <span class="item-metadata">
                            <span class="item-metastat"> {{decoder.type}} </span>
                        </span>
                    </md-item-template>
                    <md-not-found> No results matching "{{searchTerm}}" were found. </md-not-found>
                </md-autocomplete>
            </span>

            <md-button flex="10" ng-class="(globalsubmenuNavItem2 == 'rules') ? 'button-active' : 'buttonBlueLightRuleset'" ng-click="setRulesTab('rules')" class="md-primary manager-ruleset-decoders-btn">
                Rules
            </md-button>
            <md-button flex="10" ng-class="(globalsubmenuNavItem2 == 'decoders') ? 'button-active' : 'buttonBlueLightRuleset'" ng-click="setRulesTab('decoders')" class="md-primary manager-ruleset-decoders-btn">
                Decoders
            </md-button>

            <md-input-container flex="20" class="md-whiteframe-z1 manager-ruleset-decoders-selector">
                <md-select ng-model="typeFilter" ng-change="applyFilter(typeFilter)" aria-label="Filter by type" ng-init="'All'">
                    <md-option value="all">All</md-option>
                    <md-option value="parents">Parents only</md-option>
                </md-select>
            </md-input-container>
        </div>

        <md-chips readonly="true" ng-show="decoders.hasFilter('search') || decoders.hasFilter('file')">
            <md-chip class="wazuh-chip" ng-click="decoders.removeFilter('search', true)" ng-if="decoders.hasFilter('search')">
                <span class="bold">Search: {{filter.name}} <i class="fa fa-times" aria-hidden="true"></i></span>
            </md-chip>
            <md-chip class="wazuh-chip" ng-click="decoders.removeFilter('file', true)" ng-if="decoders.hasFilter('file');">
                <span class="bold">File: {{filter.name}} <i class="fa fa-times" aria-hidden="true"></i></span>
            </md-chip>
        </md-chips>

        <md-toolbar layout="row" class="md-toolbar-tools manager-ruleset-decoders-mdtoolbar">
            <span flex="20" ng-click="decoders.sort('name')">Name <i class="fa" ng-class="decoders.sortValue === 'name' ? (decoders.sortDir ? 'fa-sort-asc' : 'fa-sort-desc') : 'fa-sort'" aria-hidden="true"></i></span>
            <span flex="20">Program name</span>
            <span flex="40">Fields</span>
            <span flex="20" ng-click="decoders.sort('file')">File <i class="fa" ng-class="decoders.sortValue === 'file' ? (decoders.sortDir ? 'fa-sort-asc' : 'fa-sort-desc') : 'fa-sort'" aria-hidden="true"></i></span>
        </md-toolbar>

        <md-content flex layout="column" class="manager-ruleset-decoders-300" when-scrolled="decoders.nextPage('')">
	            <md-list class="agents-preview-table" ng-class-odd="'odd'" ng-class-even="'even'" ng-repeat='decoder in decoders.items | orderBy : decoders.sortValue : decoders.sortDir' ng-class="activeItem === decoder.name+decoder.file+decoder.position ? 'ruleset_rules_row_active' : ''">
	                <md-list-item class="rules-item-list" ng-click="closeOther(decoder.name+decoder.file+decoder.position)" ng-class="activeItem === decoder.name+decoder.file+decoder.position ? 'ruleset_rules_row_active' : ''">
	                    <span flex="20">{{decoder.name}}</span>
	                    <span flex="20">{{decoder.details["program_name"]}}</span>
	                    <span flex="40">{{ decoder.details["order"] | limitTo: 80 }}{{decoder.details["order"].length > 80 ? '...' : ''}}</span>
	                    <md-button md-no-ink class="invisibleButton" flex="20" ng-if="$parent.typeFilter == 'all'" ng-click="decodersApplyFilter({type: 'file', value: decoder.file}); $event.stopPropagation();">{{decoder.file}}</md-button>
	                    <span flex="20" ng-if="$parent.typeFilter != 'all'">{{decoder.file}}</span>
	                </md-list-item>

                        <div layout="row" ng-if="activeItem === decoder.name+decoder.file+decoder.position" ng-class="activeItem === decoder.name+decoder.file+decoder.position ? 'ruleset_rules_row_active' : ''">
                            <md-card flex>
                                <md-card-content>
                                    <div layout="column">
                                        <span layout="row">
                                            <p class="manager-status-subtitle">Full path</p>
                                            <p class="right-text">{{decoder.path}}</p>
                                        </span>
                                        <span layout="row">
                                            <p class="manager-status-subtitle">Position</p>
                                            <p class="right-text">{{decoder.position}}</p>
                                        </span>
                                        <span layout="row">
                                            <p class="manager-status-subtitle">Parent</p>
                                            <p class="right-text">{{decoder.details.parent}}</p>
                                        </span>
                                    </div>
                                </md-card-content>
                            </md-card>
                            <md-card flex>
                                <md-card-content>
                                        <div layout="column" ng-repeat="(detailk, detailv) in decoder.details" ng-if="detailk != 'parent'">
                                            <span layout="row">
                                                <p class="manager-status-subtitle">{{detailk}}</p>
                                                <p class="right-text" ng-if="(detailk !== 'regex') && (detailk !== 'order')">{{detailv}}</p>
                                                <p class="right-text" ng-if="(detailk === 'regex')" ng-bind-html="colorRegex(detailv)">{{colorRegex(detailv)}}</p>
                                                <p class="right-text" ng-if="(detailk === 'order')" ng-bind-html="colorOrder(detailv)">{{colorOrder(detailv)}}</p>
                                            </span>
                                        </div>
                                   </md-card-content>
                            </md-card>
	                </md-list>
	            </md-list>
	        </md-content>
        <md-divider></md-divider>
    	<md-content><md-progress-linear class="md-accent" md-mode="indeterminate" ng-show="decoders.busy"></md-progress-linear></md-content>
    </div>
</div>