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

<div flex ng-if="!loading && globalRuleSet == 'ruleset' && globalsubmenuNavItem2 == 'rules'" ng-controller="rulesController"
    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="start stretch" layout-align="center start" class="manager-ruleset-rules-top-row">
        <md-card flex>
            <md-card-content class="wazuh-column">
                <span class="md-headline-small">Top 24h - Rule ID</span>
                <kbn-vis vis-id="'Wazuh-App-Manager-Ruleset-Rules-Top-24h-Rule-ID'" id="Wazuh-App-Manager-Ruleset-Rules-Top-24h-Rule-ID"></kbn-vis>
            </md-card-content>
        </md-card>
        <md-card flex>
            <md-card-content class="wazuh-column">
                <span class="md-headline-small">Top 24h - Groups</span>
                <kbn-vis vis-id="'Wazuh-App-Manager-Ruleset-Rules-Top-24h-Groups'" id="Wazuh-App-Manager-Ruleset-Rules-Top-24h-Groups"></kbn-vis>
            </md-card-content>
        </md-card>
        <md-card flex>
            <md-card-content class="wazuh-column">
                <span class="md-headline-small">Top 24h - PCI DSS requirements</span>
                <kbn-vis vis-id="'Wazuh-App-Manager-Ruleset-Rules-Top-24h-PCI-DSS-requirements'" id="Wazuh-App-Manager-Ruleset-Rules-Top-24h-PCI-DSS-requirements"></kbn-vis>
            </md-card-content>
        </md-card>
        <md-card flex>
            <md-card-content class="wazuh-column">
                <span class="md-headline-small">Top 24h - Level</span>
                <kbn-vis vis-id="'Wazuh-App-Manager-Ruleset-Rules-Top-24h-Level'" id="Wazuh-App-Manager-Ruleset-Rules-Top-24h-Level"></kbn-vis>
            </md-card-content>
        </md-card>
    </div>

    <div ng-show="!loading" flex layout="column">
        <div id="content" layout="row" layout-align="start start" class="manager-ruleset-rules-button-bar">
            <span layout="row" class="manager-ruleset-rules-button-bar-span" flex layout-align="space-between center">
                <md-autocomplete flex 
                id="Auto"
                md-input-id="autocomplete"
                md-select-on-match="true" 
                md-no-cache="noCache" 
                md-selected-item="filter" 
                md-selected-item-change="rules.addFilter('search', filter.description)"
                md-search-text="searchTerm" 
                md-items="rule in analizeRules(searchTerm)" 
                md-item-text="rule.file + ' - ' + rule.description" 
                md-min-length="0"
                md-no-asterisk="false" 
                md-menu-class="autocomplete-custom-agents-bar" 
                md-search-text-change="analizeRules(searchTerm)"
                placeholder="Search..." 
                lazy-load-data="rulesAutoComplete.nextPage()"
                md-autofocus=""
                my-enter="checkEnter(searchTerm)">
                    <md-item-template>
                        <span class="item-title">
                            <strong md-highlight-text="search" md-highlight-flags="i"> {{rule.file}} - {{rule.description}} </strong>
                        </span>
                        <span class="item-metadata">
                            <span class="item-metastat" ng-if="rule.type != 'pci'"> {{rule.type}} </span>
                            <span class="item-metastat" ng-if="rule.type == 'pci'">PCI control</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-rules-rulbtn">
                Rules
            </md-button>
            <md-button flex="10" ng-class="(globalsubmenuNavItem2 == 'decoders') ? 'button-active' : 'buttonBlueLightRuleset'"
                ng-click="setRulesTab('decoders')" class="md-primary manager-ruleset-rules-decbtn">
                Decoders
            </md-button>
        </div>

        <md-chips readonly="true" ng-show="rules.hasFilter('level') || rules.hasFilter('search') || rules.hasFilter('file') || rules.hasFilter('group') || rules.hasFilter('pci')">
            <md-chip class="wazuh-chip" ng-click="rules.removeFilter('search', true)" ng-if="rules.hasFilter('search') && rules.getFilter('search')">
                <span class="bold">Search: {{rules.getFilter('search')}}
                    <i class="fa fa-times" aria-hidden="true"></i>
                </span>
            </md-chip>
            <md-chip class="wazuh-chip" ng-click="rules.removeFilter('file', true)" ng-if="rules.hasFilter('file')">
                <span class="bold">File: {{rules.getFilter('file')}}
                    <i class="fa fa-times" aria-hidden="true"></i>
                </span>
            </md-chip>
            <md-chip class="wazuh-chip" ng-click="rules.removeFilter('level', true)" ng-if="rules.hasFilter('level')">
                <span class="bold">Level: {{rules.getFilter('level')}}
                    <i class="fa fa-times" aria-hidden="true"></i>
                </span>
            </md-chip>
            <md-chip class="wazuh-chip" ng-click="rules.removeFilter('group', true)" ng-if="rules.hasFilter('group')">
                <span class="bold">Group: {{rules.getFilter('group')}}
                    <i class="fa fa-times" aria-hidden="true"></i>
                </span>
            </md-chip>
            <md-chip class="wazuh-chip" ng-click="rules.removeFilter('pci', true)" ng-if="rules.hasFilter('pci')">
                <span>PCI control: {{rules.getFilter('pci')}}
                    <i class="fa fa-times" aria-hidden="true"></i>
                </span>
            </md-chip>
        </md-chips>

        <md-toolbar layout="row" class="md-toolbar-tools manager-ruleset-rules-mdtoolbar">
            <span flex="5" ng-click="rules.sort('id')">ID
                <i class="fa" ng-class="rules.sortValue === 'id' ? (rules.sortDir ? 'fa-sort-asc' : 'fa-sort-desc') : 'fa-sort'" aria-hidden="true"></i>
            </span>
            <span flex="15" ng-click="rules.sort('file')">File
                <i class="fa" ng-class="rules.sortValue === 'file' ? (rules.sortDir ? 'fa-sort-asc' : 'fa-sort-desc') : 'fa-sort'" aria-hidden="true"></i>
            </span>
            <span flex="35" ng-click="rules.sort('description')">Description
                <i class="fa" ng-class="rules.sortValue === 'description' ? (rules.sortDir ? 'fa-sort-asc' : 'fa-sort-desc') : 'fa-sort'"
                    aria-hidden="true"></i>
            </span>
            <span flex="25">Groups</span>
            <span flex="15">Requirement</span>
            <span flex="5" ng-click="rules.sort('level')">Level
                <i class="fa" ng-class="rules.sortValue === 'level' ? (rules.sortDir ? 'fa-sort-asc' : 'fa-sort-desc') : 'fa-sort'" aria-hidden="true"></i>
            </span>
        </md-toolbar>

        <md-content flex layout="column" class="manager-ruleset-rules-col-300" when-scrolled="rules.nextPage('')">
            <md-list ng-repeat='rule in rules.items | orderBy : rules.sortValue : rules.sortDir' ng-class-odd="'odd'" ng-class-even="'even'"
                class="agents-preview-table" ng-class="activeItem === rule.id ? 'ruleset_rules_row_active' : ''">
                <md-list-item class="rules-item-list" ng-click="closeOther(rule.id)" ng-class="activeItem === rule.id ? 'ruleset_rules_row_active' : ''">
                    <span flex="5">{{rule.id}}</span>
                    <span flex="15">{{rule.file}}</span>
                    <span flex="35">{{rule.description}}</span>
                    <span flex="25">
                        <span ng-repeat="group in rule.groups">{{ group }}
                            <span ng-if="!$last">, </span>
                        </span>
                    </span>
                    <span flex="15">
                        <span ng-repeat="pci in rule.pci">{{ pci }}
                            <span ng-if="!$last">, </span>
                        </span>
                    </span>
                    <span flex="5">{{rule.level}}</span>
                </md-list-item>

                <div layout="row"  ng-if="activeItem === rule.id" class="ruleset_card_info manager-ruleset-rules-card-info">
                    <md-card flex>
                        <md-card-content>
                            <div layout="column">
                                <span layout="row">
                                    <p class="manager-status-subtitle">ID</p>
                                    <p>{{rule.id}}</p>
                                </span>
                                <span layout="row">
                                    <p class="manager-status-subtitle">Description</p>
                                    <p>{{rule.description}}</p>
                                </span>
                                <span layout="row">
                                    <p class="manager-status-subtitle">Level</p>
                                    <p class="listHover" ng-click="rules.addFilter('level', rule.level); $event.stopPropagation();">{{rule.level}}</p>
                                </span>
                                <span layout="row">
                                    <p class="manager-status-subtitle">File</p>
                                    <p class="listHover" ng-click="rules.addFilter('file', rule.file); $event.stopPropagation();">{{rule.file}}</p>
                                </span>
                             </div>
                        </md-card-content>
                    </md-card>
                    <md-card flex>
                        <md-card-content>
                            <h3 class="wazuh-h3" ng-if="rule.groups.length > 0">Groups</h3>
                            <span ng-repeat="group in rule.groups" ng-if="rule.groups.length > 0">
                                <span layout="row" layout-align="space-between center" ng-click="rules.addFilter('group', group)">
                                    <p class="listHover">{{group}}</p>
                                </span>
                                <md-divider ng-if="!$last"></md-divider>
                            </span>
                            <h3 class="wazuh-h3" ng-if="rule.pci.length > 0">PCI DSS</h3>
                            <span ng-repeat="pci in rule.pci" ng-if="rule.pci.length > 0">
                                <span layout="row" layout-align="space-between center" ng-click="rules.addFilter('pci', pci)">
                                    <p class="listHover">{{pci}}</p>
                                </span>
                                <md-divider ng-if="!$last"></md-divider>
                            </span>
                        </md-card-content>
                    </md-card>
                    <md-card flex>
                        <md-card-content>
                            <h3 class="wazuh-h3">Extra settings</h3>
                            <span ng-repeat="(detailk, detailv) in rule.details">
                                <span layout="row" layout-align="space-between center">
                                    <p>{{detailk}}</p>
                                    <p class="right-text">{{detailv}}</p>
                                </span>
                                <md-divider ng-if="!$last"></md-divider>
                            </span>
                        </md-card-content>
                    </md-card>
                </div>
            </md-list>
        </md-content>
        <md-divider></md-divider>
        <md-content>
            <md-progress-linear class="md-accent" md-mode="indeterminate" ng-show="rules.busy"></md-progress-linear>
        </md-content>
    </div>
</div>