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

<div class="container" ng-controller="rulesetController">
    <div ng-if="load" style="text-align: center;">
        <img style="display: inline-block; width: auto;" src="/plugins/wazuh/img/loading.gif"></img>
    </div>
    <div class="row containerRuleset" ng-if="!load">
        <div id="messages" ng-show="message" class="settings-message-error" ng-bind-html="message">{{ message }}</div>
        <div class="leftCol">
            <h2 class="container_page_title">Ruleset</h2>
            <div style="width: 19%; height: 35px; border-radius: 4px; background-color: rgb(249, 249, 249); border: 1px solid rgb(204, 204, 204); float: left;"
                ng-show="isSetTab(1, 1)">
                <div style="float: left;">
                    <form class="form-inline ng-pristine ng-valid">
                        <div class="form-group" style="position: relative;">
                            <i class="fa fa-search input_search_icon"></i>
                            <input type="text" ng-model="$parent.search" ng-change="objGet('/rules', 'rules')" class="form-control ng-pristine ng-untouched ng-valid rulesetSearch" placeholder="Search...">
                        </div>
                    </form>
                </div>
            </div>
            <div style="width: 19%; height: 35px; border-radius: 4px; background-color: rgb(249, 249, 249); border: 1px solid rgb(204, 204, 204); float: left;"
                ng-show="isSetTab(2, 1)">
                <div style="float: left;">
                    <form class="form-inline ng-pristine ng-valid">
                        <div class="form-group" style="position: relative;">
                            <i class="fa fa-search input_search_icon"></i>
                            <input type="text" ng-model="$parent.decoder_search" ng-change="objGet('/decoders', 'decoders')" class="form-control ng-pristine ng-untouched ng-valid rulesetSearch" placeholder="Search...">
                        </div>
                    </form>
                </div>
            </div>
            <div style="margin-left: 10px; width: 202px; height: 35px; border-radius: 4px; background-color: rgb(249, 249, 249); border: 1px solid rgb(204, 204, 204); float: left; text-align: left;"
                ng-show="isSetTab(1, 1)">
                <div ng-class="{ ruleset_button_active: rfStatus == 'enabled' }" ng-click="setRulesFilter('status', 'enabled')"
                    style="font-weight: bold; border-radius: 0px; width: 100px;" class="rulesetFilter">Enabled </div>
                <div ng-class="{ ruleset_button_active: rfStatus == 'disabled' }" ng-click="setRulesFilter('status', 'disabled')"
                    style="font-weight: bold; border-radius: 0px; width: 100px;" class="rulesetFilter">Disabled </div>
            </div>
            <div style="margin-left: 10px; width: 202px; height: 35px; border-radius: 4px; background-color: rgb(249, 249, 249); border: 1px solid rgb(204, 204, 204); float: left; text-align: left;"
                ng-show="isSetTab(2, 1)">
                <div ng-class="{ ruleset_button_active: dfType == 'all' }" ng-click="setDecodersFilter('type', 'all')" style="font-weight: bold; border-radius: 0px; width: 100px;"
                    class="rulesetFilter">All decoders </div>
                <div ng-class="{ ruleset_button_active: dfType == 'parents' }" ng-click="setDecodersFilter('type', 'parents')"
                    style="font-weight: bold; border-radius: 0px; width: 100px;" class="rulesetFilter">Parents </div>
            </div>
            <div class="form-group ruleLevel_div" ng-show="isSetTab(1, 1)">
                <label class="ruleLevel_label">Alert level:</label>
                <input type="number" min="0" max="{{$parent.maxLevel}}" step="1" ng-model="$parent.minLevel" class="form-control ng-pristine ng-untouched ng-valid rulesetSearch ruleLevel_input">
                <label class="ruleLevel_label">-</label>
                <input type="number" min="{{$parent.minLevel}}" max="15" step="1" ng-model="$parent.maxLevel" class="form-control ng-pristine ng-untouched ng-valid rulesetSearch ruleLevel_input">
                <button type="submit" class="btn btn-primary btn-manager-restart ruleLevel_input ruleLevel_button" ng-click="setRulesFilter_level();"><span>Change</span></button>
            </div>
            </br>
            </br>
            <div class="filterActive_div" ng-if="hasRulesFilter('file');" ng-show="isSetTab(1, 1)">
                <span ng-click="setRulesFilter('file', rfFiles)" ng-class="{ textFilterActive_header: isSetTabRulesFilter('file', rfFiles) }"
                    class="bold">Selected file: {{rfFiles}}   <span class="glyphicon glyphicon-remove"></span>                </span>
                <a class="glyphicon glyphicon-download-alt textFilterActive_glyphicon" ng-init="downloadRuleFile(rfFiles)" ng-href="{{encodedFile}}"
                    download="file.xml"></a>
            </div>
            <div class="filterActive_div" ng-if="hasRulesFilter('group');" ng-show="isSetTab(1, 1)">
                <span ng-click="setRulesFilter('group', rfGroups)" ng-class="{ textFilterActive_header: isSetTabRulesFilter('group', rfGroups) }"
                    class="bold">Selected group: {{rfGroups}}   <span class="glyphicon glyphicon-remove"></span></span>
            </div>
            <div class="filterActive_div" ng-if="hasRulesFilter('pci');" ng-show="isSetTab(1, 1)">
                <span ng-click="setRulesFilter('pci', rfPci)" ng-class="{ textFilterActive_header: isSetTabRulesFilter('pci', rfPci) }"
                    class="bold">Selected PCI group: {{rfPci}}   <span class="glyphicon glyphicon-remove"></span></span>
            </div>
            <div class="filterActive_div" ng-if="hasDecodersFilter('file');" ng-show="isSetTab(2, 1)">
                <span ng-click="setDecodersFilter('file', dfFile)" ng-class="{ textFilterActive_header: isSetTabDecodersFilter('file', dfFile) }"
                    class="bold" tooltips tooltip-size="large" tooltip-side="left" tooltip-template="{{dfFile}}">Selected file: {{formatFile(dfFile)}}   <span class="glyphicon glyphicon-remove"></span></span>
            </div>
            <div class="filterActive_div" ng-if="hasDecodersFilter('id');" ng-show="isSetTab(2, 1)">
                <span ng-click="setDecodersFilter('id', dfId)" ng-class="{ textFilterActive_header: isSetTabDecodersFilter('id', dfId) }"
                    class="bold">Selected parent: {{dfId}}   <span class="glyphicon glyphicon-remove"></span></span>
            </div>
            <ul id="rulesetTabs">
                <li><a ng-class="{ active: isSetTab(1, 1) }" href ng-click="setTab(1, 1)">Rules</a></li>
                <li><a ng-class="{ active: isSetTab(2, 1) }" href ng-click="setTab(2, 1)" ng-disabled="!decoderLoad">Decoders</a></li>
                <li><a ng-class="{ active: isSetTab(3, 1) }" href ng-click="setTab(3, 1)">Update</a></li>
            </ul>
            <div class="rulesetContentTabs">
                <div id="rulesTab" ng-show="isSetTab(1, 1)">
                    <div class="rules_card_list" ng-repeat="rule in rules">
                        <div class="rule_card" ng-class="{ rule_card_active: showDetails }" ng-click=" showDetails = ! showDetails; ">
                            <div class="id"> {{rule.id}} </div>
                            <div class="float_left">
                                <div class="text" style="width: 535px; height: 45px; overflow: hidden;">{{rule.description}}</div>
                            </div>
                            <div class="float_right">
                                <div ng-class='getRuleStatusClass(rule);' class="status" ng-style="{ 'border-bottom-right-radius' : (showDetails) ? '0px' : '4px' }"
                                    tooltips tooltip-size="large" tooltip-side="left" tooltip-template="{{getStatusTooltip(rule)}}"></div>
                            </div>
                            <div class="float_right">
                                <div class="level" tooltips tooltip-template="Alert level">{{rule.level}}</div>
                            </div>

                        </div>
                        <div style="" class="rule_card_detail" ng-show="showDetails">
                            <div class="ruleTabs-container">
                                <div class="ruleTabs-info">
                                    <div class="ruleTabs-box">
                                        <table class="table-rule-information">
                                            <tbody>
                                                <tr>
                                                    <td class="table-rule-information-td-title">ID</td>
                                                    <td class="table-rule-information-td-value ng-binding">{{rule.id}}</td>
                                                </tr>
                                                <tr>
                                                    <td class="table-rule-information-td-title">Description</td>
                                                    <td class="table-rule-information-td-value ng-binding" colspan="2">{{rule.description}}</td>
                                                </tr>
                                                <tr>
                                                    <td class="table-rule-information-td-title">Level</td>
                                                    <td class="table-rule-information-td-value ng-binding ng-clickable" ng-click="setRulesFilter_level_selected(rule.level);">{{rule.level}}</td>
                                                </tr>
                                                <tr>
                                                    <td class="table-rule-information-td-title">File</td>
                                                    <td class="table-rule-information-td-value ng-binding ng-clickable" ng-click="setRulesFilter_outside('file', rule.file);">{{rule.file}}</td>
                                                </tr>
                                                <tr>
                                                    <td class="table-rule-information-td-title">Groups</td>
                                                </tr>
                                                <tr ng-repeat="group in rule.groups">
                                                    <td class="table-rule-information-td-title"> </td>
                                                    <td class="table-rule-information-td-value ng-binding ng-clickable" ng-click="setRulesFilter_outside('group', group);">{{group}}</td>
                                                </tr>
                                                <tr>
                                                    <td class="table-rule-information-td-title" ng-if="rule.pci.length > 0">PCI groups</td>
                                                </tr>
                                                <tr ng-repeat="pci in rule.pci">
                                                    <td class="table-rule-information-td-title"> </td>
                                                    <td class="table-rule-information-td-value ng-binding ng-clickable" ng-click="setRulesFilter_outside('pci', pci);">{{pci}}</td>
                                                </tr>
                                                <tr>
                                                    <td class="table-rule-information-td-title">Advanced details</td>
                                                </tr>
                                                <tr ng-repeat="(detailk, detailv) in rule.details">
                                                    <td class="table-rule-information-td-title"><span class="glyphicon glyphicon-question-sign" tooltips tooltip-size="large"
                                                            tooltip-side="auto" tooltip-template="{{rulesTooltips(detailk)}}"></span></td>
                                                    <td class="table-rule-information-td-title">{{detailk}}</td>
                                                    <td class="table-rule-information-td-value ng-binding">{{detailv}}</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <span class="glyphicon glyphicon-chevron-left" ng-click="objPrev('/rules', 'rules')" ng-show="objHasPrev('/rules')"></span>
                    <span
                        class="glyphicon glyphicon-chevron-right" ng-click="objNext('/rules', 'rules')" ng-show="objHasNext('/rules')"></span>
                </div>
                <div id="decodersTab" ng-show="isSetTab(2, 1)">
                    <div class="rules_card_list" ng-repeat="decoder in decoders">
                        <div class="rule_card" ng-class="{ rule_card_active: showDetails }" ng-click=" showDetails = ! showDetails; ">
                            <div class="float_left">
                                <div class="text" style="width: 535px; height: 45px; overflow: hidden;">{{decoder.name}}</div>
                            </div>
                            <div class="float_right">
                                <div class="level" tooltips tooltip-template="Position">{{decoder.position}}</div>
                            </div>
                        </div>
                        <div style="" class="rule_card_detail" ng-show="showDetails">
                            <div class="ruleTabs-container">
                                <div class="ruleTabs-info">
                                    <div class="ruleTabs-box">
                                        <table class="table-rule-information">
                                            <tbody>
                                                <tr>
                                                    <td class="table-rule-information-td-title">Name</td>
                                                    <td class="table-rule-information-td-value ng-binding" colspan="2">{{decoder.name}}</td>
                                                </tr>
                                                <tr>
                                                    <td class="table-rule-information-td-title">File</td>
                                                    <td class="table-rule-information-td-value ng-binding ng-clickable" colspan="2" ng-click="setDecodersFilter('file', decoder.file);">{{decoder.file}}</td>
                                                </tr>
                                                <tr>
                                                    <td class="table-rule-information-td-title">Full path</td>
                                                    <td class="table-rule-information-td-value ng-binding" colspan="2">{{decoder.full_path}}</td>
                                                </tr>
                                                <tr>
                                                    <td class="table-rule-information-td-title">Position</td>
                                                    <td class="table-rule-information-td-value ng-binding">{{decoder.position}}</td>
                                                    <td class="table-rule-information-td-value ng-binding" tooltips tooltip-size="large" tooltip-side="auto" tooltip-template="<div style='width: 300px;'>Place occupied by the decoder in the file.</div>"><span class="glyphicon glyphicon-question-sign"></span></td>
                                                </tr>
                                                <tr>
                                                    <td class="table-rule-information-td-title" ng-if="decoder.details.parent">Parent</td>
                                                    <td class="table-rule-information-td-value ng-binding ng-clickable" colspan="2" ng-if="decoder.details.parent" ng-click="setDecodersFilter('id', decoder.details.parent);">{{decoder.details.parent}}</td>
                                                </tr>
                                                <tr>
                                                    <td class="table-rule-information-td-title">Advanced details</td>
                                                </tr>
                                                <tr ng-repeat="(detailk, detailv) in decoder.details" ng-if="detailk != 'parent'">
                                                    <td class="table-rule-information-td-title"><span class="glyphicon glyphicon-question-sign" tooltips tooltip-size="large"
                                                            tooltip-side="auto" tooltip-template="{{decoderTooltips(detailk)}}"></span></td>
                                                    <td class="table-rule-information-td-title">{{detailk}}</td>
                                                    <td class="table-rule-information-td-value ng-binding" ng-if="(detailk !== 'regex') && (detailk !== 'order')">{{detailv}}</td>
                                                    <td class="table-rule-information-td-value ng-binding" ng-if="(detailk === 'regex')" ng-bind-html="colorRegex(detailv)">{{colorRegex(detailv)}}</td>
                                                    <td class="table-rule-information-td-value ng-binding" ng-if="(detailk === 'order')" ng-bind-html="colorOrder(detailv)">{{colorOrder(detailv)}}</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <span class="glyphicon glyphicon-chevron-left" ng-click="objPrev('/decoders', 'decoders')" ng-show="objHasPrev('/decoders')"></span>
                    <span
                        class="glyphicon glyphicon-chevron-right" ng-click="objNext('/decoders', 'decoders')" ng-show="objHasNext('/decoders')"></span>
                </div>
                <div id="updaterTab" ng-show="isSetTab(3, 1)">
                    <table class="updateGuideTable">
                        <tbody>
                            <tr>
                                <td colspan="2">1. Select what you want to update:</td>
                            </tr>
                            <tr>
                                <td colspan="2">
                                    <div ng-class="{ ruleset_button_active: $parent.updateType == 'r' }" ng-click="selectUpdateType('r')" style="font-weight: bold; border-radius: 0px; width: 100px; margin-right: 5px;"
                                        class="rulesetFilter">Rules </div>
                                    <div ng-class="{ ruleset_button_active: $parent.updateType == 'c' }" ng-click="selectUpdateType('c')" style="font-weight: bold; border-radius: 0px; width: 100px; margin-right: 5px;"
                                        class="rulesetFilter">Rootcheck </div>
                                    <div ng-class="{ ruleset_button_active: $parent.updateType == 'b' }" ng-click="selectUpdateType('b')" style="font-weight: bold; border-radius: 0px; width: 100px;"
                                        class="rulesetFilter">Both </div>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2">2. Do you want to force it?</td>
                            </tr>
                            <tr>
                                <td style="padding-right: 5px;">
                                    <div ng-class="{ ruleset_button_active: !$parent.updateForce }" ng-click="$parent.updateForce = false" style="font-weight: bold; border-radius: 0px; width: 100px;"
                                        class="rulesetFilter">No </div>
                                </td>
                                <td>Update the outdated rules (Manager will be restarted only if enabled rules are updated)</td>
                            </tr>
                            <tr>
                                <td style="padding-right: 5px;">
                                    <div ng-class="{ ruleset_button_active: $parent.updateForce }" ng-click="$parent.updateForce = true" style="font-weight: bold; border-radius: 0px; width: 100px;"
                                        class="rulesetFilter">Yes </div>
                                </td>
                                <td>Overwrite all the rules (OSSEC manager is going to be restarted)</td>
                            </tr>
                            <tr>
                                <td colspan="2" style="padding-top: 10px;"><button type="submit" class="btn btn-primary btn-manager-restart ruleLevel_input ruleLevel_button"
                                        style="margin-left: 100px; width: 150px !important;" ng-click="updateRuleset();"><span>Update ruleset</span></button></td>
                            </tr>
                        </tbody>
                    </table>
                    <div style="display: inline-block; border-top: 1px solid #cccccc; margin-top: 15px;">
                        <label style="margin-top: 15px; margin-right: 15px;">Backups:</label>
                        <div ng-model="$parent.selectedBackup" custom-select="backup for backup in $parent.backups | filter:$searchTerm"></div>
                        <button type="submit" class="btn btn-primary btn-manager-restart ruleLevel_input ruleLevel_button" style="margin-left: 15px; width: 150px !important;"
                            ng-click="restoreBackup();"><span>Restore backup</span></button>
                    </div>
                </div>
            </div>
        </div>
        <div class="rightCol" ng-show="isSetTab(1, 1)">
            <div class="tabBlock">
                <ul id="rulesetTabsFilters">
                    <li><a ng-class="{ active: isSetTab(1, 2) }" href ng-click="setTab(1, 2)">Files</a></li>
                    <li><a ng-class="{ active: isSetTab(2, 2) }" href ng-click="setTab(2, 2)">Groups</a></li>
                    <li><a ng-class="{ active: isSetTab(3, 2) }" href ng-click="setTab(3, 2)">PCI</a></li>
                </ul>
            </div>
            <div class="filesBlock">
                <table class="table-files" ng-show="isSetTab(1, 1) && isSetTab(1, 2)">
                    <tr class="table-files-list-tr">
                        <td class="table-files-list-td"><input type="text" ng-model="$parent.$parent.searchFilesRules" ng-change="objGet('/rules/files', 'filesRules')" class="form-control ng-pristine ng-valid rulesetSearch ng-touched"
                                placeholder="Search..."></td>
                    </tr>
                    <tr ng-class="" class="table-files-list-tr" ng-repeat="file in filesRules">
                        <td class="table-files-list-td"><span ng-click="setRulesFilter('file', file.name)" ng-class="{ textFilterActive: isSetTabRulesFilter('file', file.name) }"
                                class="bold">{{file.name}}</span></td>
                    </tr>
                    <tr class="table-files-list-tr">
                        <td class="table-files-list-td">
                            <span class="glyphicon glyphicon-chevron-left" ng-click="objPrev('/rules/files', 'filesRules')" ng-show="objHasPrev('/rules/files')"></span>
                            <span
                                class="glyphicon glyphicon-chevron-right" ng-click="objNext('/rules/files', 'filesRules')" ng-show="objHasNext('/rules/files')"></span>
                        </td>
                    </tr>
                </table>
                <table class="table-files" ng-show="isSetTab(1, 1) && isSetTab(2, 2)">
                    <tr class="table-files-list-tr">
                        <td class="table-files-list-td"><input type="text" ng-model="$parent.$parent.searchGroupsRules" ng-change="objGet('/rules/groups', 'groupsRules')" class="form-control ng-pristine ng-valid rulesetSearch ng-touched"
                                placeholder="Search..."></td>
                    </tr>
                    <tr ng-class="" class="table-files-list-tr" ng-repeat="group in groupsRules">
                        <td class="table-files-list-td"><span ng-click="setRulesFilter('group', group)" ng-class="{ textFilterActive: isSetTabRulesFilter('group', group) }"
                                class="bold">{{group}}</span></td>
                    </tr>
                    <tr class="table-files-list-tr">
                        <td class="table-files-list-td">
                            <span class="glyphicon glyphicon-chevron-left" ng-click="objPrev('/rules/groups', 'groupsRules')" ng-show="objHasPrev('/rules/groups')"></span>
                            <span
                                class="glyphicon glyphicon-chevron-right" ng-click="objNext('/rules/groups', 'groupsRules')" ng-show="objHasNext('/rules/groups')"></span>
                        </td>
                    </tr>
                </table>
                <table class="table-files" ng-show="isSetTab(1, 1) && isSetTab(3, 2)">
                    <tr class="table-files-list-tr">
                        <td class="table-files-list-td"><input type="text" ng-model="$parent.$parent.searchFilesPci" ng-change="objGet('/rules/pci', 'pciGroupsRules')" class="form-control ng-pristine ng-valid rulesetSearch ng-touched"
                                placeholder="Search..."></td>
                    </tr>
                    <tr ng-class="" class="table-files-list-tr" ng-repeat="pci in pciGroupsRules">
                        <td class="table-files-list-td"><span ng-click="setRulesFilter('pci', pci)" ng-class="{ textFilterActive: isSetTabRulesFilter('pci', pci) }"
                                class="bold">{{pci}}</span></td>
                    </tr>
                    <tr class="table-files-list-tr">
                        <td class="table-files-list-td">
                            <span class="glyphicon glyphicon-chevron-left" ng-click="objPrev('/rules/pci', 'pciGroupsRules')" ng-show="objHasPrev('/rules/pci')"></span>
                            <span
                                class="glyphicon glyphicon-chevron-right" ng-click="objNext('/rules/pci', 'pciGroupsRules')" ng-show="objHasNext('/rules/pci')"></span>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="rightCol" ng-show="isSetTab(2, 1)">
            <div class="filesBlock" style="margin-top: 35px;">
                <table class="table-files" ng-show="isSetTab(2, 1)">
                    <tr class="table-files-list-tr">
                        <td class="table-files-list-td"><input type="text" ng-model="$parent.$parent.searchFilesDecoders" ng-change="objGet('/decoders/files', 'filesDecoders')" class="form-control ng-pristine ng-valid rulesetSearch ng-touched"
                                placeholder="Search..."></td>
                    </tr>
                    <tr ng-class="" class="table-files-list-tr" ng-repeat="file in filesDecoders">
                        <td class="table-files-list-td"><span ng-click="setDecodersFilter('file', formatFile(file))" ng-class="{ textFilterActive: isSetTabDecodersFilter('file', formatFile(file)) }"
                                class="bold" tooltips tooltip-size="large" tooltip-side="left" tooltip-template="{{file}}">{{formatFile(file)}}</span></td>
                    </tr>
                    <tr class="table-files-list-tr">
                        <td class="table-files-list-td">
                            <span class="glyphicon glyphicon-chevron-left" ng-click="objPrev('/decoders/files', 'filesDecoders')" ng-show="objHasPrev('/decoders/files')"></span>
                            <span
                                class="glyphicon glyphicon-chevron-right" ng-click="objNext('/decoders/files', 'filesDecoders')"
                                ng-show="objHasNext('/decoders/files')"></span>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</div>