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

<md-content style="height: 100%;" id="rulesContainer" layout="column" flex layout-padding ng-if="!loading && globalRuleSet == 'ruleset' && globalsubmenuNavItem2 == 'rules'" ng-controller="rulesController" layout-align="start space-around" >
	<div class='uil-ring-css' ng-show="loading"><div></div></div>
    <div ng-if="!loading" layout="row" layout-align="center stretch">
        <md-card flex="25" style="margin: 0">
            <md-card-content>
                <span class="md-headline-small">Top 24h - Rule ID</span>
                <kbn-vis vis-height="160px" vis-timefilter="24h" vis-index-pattern="wazuh-alerts-*" vis-a="(filters:!(),linked:!f,query:(query_string:(analyze_wildcard:!t,query:'*')),uiState:(),vis:(aggs:!((enabled:!t,id:'1',params:(),schema:metric,type:count),(enabled:!t,id:'2',params:(field:rule.id,order:desc,orderBy:'1',size:5),schema:segment,type:terms)),listeners:(),params:(addLegend:!t,addTooltip:!t,isDonut:!f,legendPosition:right,shareYAxis:!t),title:'New%20Visualization',type:pie))"
                    vis-g="(refreshInterval:(display:Off,pause:!f,value:0),time:(from:now-24h,mode:quick,to:now))" vis-filter="*" vis-clickable="false">
                </kbn-vis>
            </md-card-content>
        </md-card>
    
        <md-card flex="25" style="margin: 0">
            <md-card-content>
                <span class="md-headline-small">Top 24h - Groups</span>
                <kbn-vis vis-height="160px" vis-index-pattern="wazuh-alerts-*" vis-a="(filters:!(),linked:!f,query:(query_string:(analyze_wildcard:!t,query:'*')),uiState:(),vis:(aggs:!((enabled:!t,id:'1',params:(),schema:metric,type:count),(enabled:!t,id:'2',params:(field:rule.groups,order:desc,orderBy:'1',size:5),schema:segment,type:terms)),listeners:(),params:(addLegend:!t,addTooltip:!t,isDonut:!f,legendPosition:right,shareYAxis:!t),title:'New%20Visualization',type:pie))"
                    vis-g="(refreshInterval:(display:Off,pause:!f,value:0),time:(from:now-24h,mode:quick,to:now))" vis-filter="*" vis-clickable="false">
                </kbn-vis>
            </md-card-content>
        </md-card>
        
        <md-card flex="25" style="margin: 0">
            <md-card-content>
                <span class="md-headline-small">Top 24h - PCI DSS requirements</span>
                <kbn-vis vis-height="160px" vis-index-pattern="wazuh-alerts-*" vis-a="(filters:!(),linked:!f,query:(query_string:(analyze_wildcard:!t,query:'*')),uiState:(),vis:(aggs:!((enabled:!t,id:'1',params:(),schema:metric,type:count),(enabled:!t,id:'2',params:(field:rule.pci_dss,order:desc,orderBy:'1',size:5),schema:segment,type:terms)),listeners:(),params:(addLegend:!t,addTooltip:!t,isDonut:!f,legendPosition:right,shareYAxis:!t),title:'New%20Visualization',type:pie))"
                    vis-g="(refreshInterval:(display:Off,pause:!f,value:0),time:(from:now-24h,mode:quick,to:now))" vis-filter="*" vis-clickable="false">
                </kbn-vis>
            </md-card-content>
        </md-card>
        
        <md-card flex="25" style="margin: 0">
            <md-card-content>
                <span class="md-headline-small">Top 24h - Level</span>
                <kbn-vis vis-height="160px" vis-index-pattern="wazuh-alerts-*" vis-a="(filters:!(),linked:!f,query:(query_string:(analyze_wildcard:!t,query:'*')),uiState:(),vis:(aggs:!((enabled:!t,id:'1',params:(),schema:metric,type:count),(enabled:!t,id:'2',params:(field:rule.level,order:desc,orderBy:'1',size:5),schema:segment,type:terms)),listeners:(),params:(addLegend:!t,addTooltip:!t,isDonut:!f,legendPosition:right,shareYAxis:!t),title:'New%20Visualization',type:pie))"
                    vis-g="(refreshInterval:(display:Off,pause:!f,value:0),time:(from:now-24h,mode:quick,to:now))" vis-filter="*" vis-clickable="false">
                </kbn-vis>
            </md-card-content>
        </md-card>
    </div>
		
	<div ng-show="!loading" style="padding: 0">
		<div id="content" layout="row" layout-align="start start" style="padding-left: 0px; padding-right: 0px; min-height: 53px; height: 53px;padding-top: 5px; padding-bottom: 0px;  ">
			<span layout="row" style="padding-left: 0px;margin-top: 6px;margin-right: 5px; " 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="rules.addFilter(filter.type, filter.name)" md-search-text="searchTerm" md-items="rule in autoComplete | filter : searchTerm" md-item-text="rule.name" md-min-length="0" md-no-asterisk="false" md-menu-class="autocomplete-custom-agents-bar" md-search-text-change="analizeRules(searchTerm)" placeholder="Search for rule file, group or PCI requirement">
					<md-item-template>
						<span class="item-title">
							<span><strong md-highlight-text="search" md-highlight-flags="i"> {{rule.name}} </strong></span>
						</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 style="padding: 2px;" flex="10" ng-class="(globalsubmenuNavItem2 == 'rules') ? 'button-active' : 'button-disabled'" ng-class="button-disabled" ng-click="setRulesTab('rules')"
			class="md-primary">
				Rules
			</md-button>
			<md-button style="padding: 2px;" flex="10" ng-class="(globalsubmenuNavItem2 == 'decoders') ? 'button-active' : 'button-disabled'" 
			ng-class="button-disabled" ng-click="setRulesTab('decoders')" class="md-primary">
				Decoders
			</md-button>
		</div>

		<md-chips style="background-color: #f7f7f7; margin-top: 16px; " readonly="true" ng-show="rules.hasFilter('search') || rules.hasFilter('file') || rules.hasFilter('group') || rules.hasFilter('pci')">
		  <md-chip ng-click="rules.removeFilter('search', true)" ng-if="rules.hasFilter('search')">
			<span class="bold">Search: {{rules.getFilter('search')}} <i class="fa fa-times" aria-hidden="true"></i></span>
		  </md-chip>
		  <md-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 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 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" style=" margin-top: 13px; min-height: 38px;height: 38px; padding: 8px; padding-top: 10px; ">
			<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>
		<div flex style="overflow: auto; height:400px;" layout-fill 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="showDetails[rule.id] ? 'ruleset_rules_row_active' : ''">
			<md-list-item class="rules-item-list" ng-click="showDetails[rule.id] = !showDetails[rule.id]" ng-class="showDetails[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 class="ruleset_card_info" layout="column" flex layout-align="start stretch" ng-show="showDetails[rule.id]" style="margin-top: 19px; height: 100%;padding: 0px; padding-top: 3px; margin-top: 15px;">
				<md-content flex>	
					<div class="ruleset_card_info" layout="row" flex layout-align="center start" ng-show="showDetails[rule.id]" style="padding-left: 0px; padding-right: 0px; padding-bottom: 0px;">
						<md-card flex="10" layout="column">
							<md-card-content style="text-align: center;">
								<div class="ng-binding" style="font-weight: bold">ID</div>
								<div class="metric-value ng-binding" style="font-size: 12pt;">{{rule.id}}</div>
							</md-card-content>
						</md-card>
						<md-card flex layout="column">
							<md-card-content style="text-align: center;">
								<div class="ng-binding" style="font-weight: bold">Description</div>
								<div class="metric-value ng-binding" style="font-size: 12pt;">{{rule.description}}</div>
							</md-card-content>
						</md-card>
						<md-card flex="10" layout="column">
							<md-card-content style="text-align: center;">
								<div class="ng-binding" style="font-weight: bold">Level</div>
								<div class="metric-value ng-binding" style="font-size: 12pt;">{{rule.level}}</div>
							</md-card-content>
						</md-card>
						<md-card class="cardHover" ng-click="rules.addFilter('file', rule.file); $event.stopPropagation();" flex="20" layout="column">
							<md-card-content style="text-align: center;">
								<div class="ng-binding" style="font-weight: bold">File</div>
								<div class="metric-value ng-binding" style="font-size: 12pt;">{{rule.file}}</div>
							</md-card-content>
						</md-card>
					</div>
					
					<div class="ruleset_card_info" layout="row" flex layout-align="space-between stretch" ng-show="showDetails[rule.id]" style="padding-left: 0px; padding-right: 0px; padding-bottom: 0px; ">
						<md-card flex layout="column" ng-if="rule.groups.length  > 0">
							<md-card-content>
								<h3 class="wazuh-h3">Groups</h3>
								<span ng-repeat="group in rule.groups">
									<span class="listHover" ng-click="rules.addFilter('group', group)" layout="row" layout-align="space-between center"><p>{{ group }}</p></span>
									<md-divider ng-if="!$last"></md-divider>
								</span>
							</md-card-content>
						</md-card>
						
						<md-card flex layout="column" ng-if="rule.pci.length  > 0">
							<md-card-content>
								<h3 class="wazuh-h3">PCI DSS </h3>
								<span ng-repeat="pci in rule.pci">
									<span class="listHover" ng-click="rules.addFilter('pci', pci)" layout="row" layout-align="space-between center"><p>{{ pci }}</p></span>
									<md-divider ng-if="!$last"></md-divider>
								</span>
							</md-card-content>
						</md-card>
						
						<md-card flex layout="column">
							<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-content>	
			</div>
		</md-list>   
		</div>   
	</div>
	<md-content><md-progress-linear class="md-accent" md-mode="indeterminate" ng-show="rules.busy"></md-progress-linear></md-content>
</md-content>