wazuh-kibana-app/public/templates/management/groups/groups.html

<div flex layout="column" class="mozilla-table-size-85" ng-class="{'cursor-wait': multipleSelectorLoading}"
    ng-controller="groupsPreviewController" ng-if="mctrl.tab == 'groups'">
    <md-content flex layout="column" class="wz-content overflow-hidden" ng-init="lookingGroup=false">

        <!-- Loading ring -->
        <div class='uil-ring-css' ng-show="load">
            <div></div>
        </div>

        <!-- Headline -->
        <div ng-show="!load" layout="column" layout-padding ng-if="!currentGroup || !currentGroup.name">
            <div layout="row">
                <span class="font-size-18">
                    <i class="fa fa-fw fa-object-group" aria-hidden="true"></i> Groups</span>
                <span ng-if='adminMode' class="font-size-18 wz-text-link" ng-click="switchAddingGroup()"> <i class="fa fa-fw fa-plus-circle"></i></span>
            </div>
            <div layout="row" ng-if="addingGroup" ng-if='adminMode' class="wz-padding-bottom-0">
                <input placeholder="Group name..." ng-model="groupToBeAdded" type="text" class="kuiLocalSearchInput addGroupInput ng-empty ng-pristine ng-scope ng-touched ng-valid"
                    aria-invalid="false">
                <button type="submit" aria-label="Search" class="kuiLocalSearchButton addGroupBtn" ng-click="createGroup(groupToBeAdded)">
                    <span class="fa fa-save fa-fw" aria-hidden="true"></span>
                </button>
            </div>
            <div layout="row" ng-if="!addingGroup">
                <span class="md-subheader">List and check your groups, its agents and files</span>
            </div>
        </div>
        <!-- End headline -->

        <div flex layout="column" layout-align="start stretch" ng-show="!load" ng-init="groupsSelectedTab='agents'">
            <!-- Back button and title -->
            <div layout="row" layout-align="start center" ng-if="lookingGroup">
                <!-- Back button -->
                <md-button class="md-icon-button wz-circle-back-button" style="margin: 5px 15px!important;" aria-label="Back to rules list"
                    tooltip="Back" tooltip-placement="bottom" ng-click="goBackGroups()"><i class="fa fa-fw fa-arrow-left"
                        aria-hidden="true"></i></md-button>
                <!-- Group name -->
                <div>
                    <h5 class="titleSectionIdentifier">Group</h5>
                    <h1 class="font-size-18">{{currentGroup.name}}</h1>
                </div>
            </div>
            <!-- End back button, title and status indicator -->
            <!-- MD5 Sums and Details cards -->
            <div layout="row" class="md-padding-h" ng-if="lookingGroup">
                <!-- Group MD5 sums section -->
                <md-card flex class="no-margin-left no-margin-right wz-margin-top-0 wz-md-card">
                    <md-card-content>
                        <span class="wz-headline-title"><i class="fa fa-fw fa-info" aria-hidden="true"></i> Details</span>
                        <md-divider class="wz-margin-top-10"></md-divider>
                        <div layout="row" class="wz-padding-top-10">
                            <span flex="15">Agents</span>
                            <span class="wz-text-right color-grey">{{ currentGroup.count }}</span>
                        </div>
                        <div layout="row" class="wz-padding-top-10">
                            <span flex="15">Content</span>
                            <span class="wz-text-right color-grey">{{ totalFiles }} files</span>
                        </div>
                        <div layout="row" class="wz-padding-top-10">
                            <span flex="15">Configuration sum</span>
                            <span class="wz-text-right color-grey">{{ currentGroup.configSum }}</span>
                        </div>
                        <div layout="row" class="wz-padding-top-10">
                            <span flex="15">Merged sum</span>
                            <span class="wz-text-right color-grey">{{ currentGroup.mergedSum }}</span>
                        </div>
                    </md-card-content>
                </md-card>
            </div>

            <!-- End group actions -->
            <md-nav-bar ng-if="lookingGroup && currentGroup && !addingAgents && !editingFile" class="wz-nav-bar"
                md-selected-nav-item="groupsSelectedTab">
                <md-nav-item class="wz-nav-item" md-nav-click="goBackToAgents()" name="agents">Agents</md-nav-item>
                <md-nav-item class="wz-nav-item" md-nav-click="goBackFiles()" name="files">Content</md-nav-item>
            </md-nav-bar>

            <!-- XML editor for group agents -->
            <div ng-show="editingFile">
                <div layout="row" class="md-padding">
                    <span ng-click='closeEditingFile()' class='btn btn-info'>Cancel</span>
                    <button ng-disabled='xmlHasErrors' ng-click='doSaveGroupAgentConfig()' class='btn btn-primary pull-right wz-margin-left-8'>
                        <span ng-show='!xmlHasErrors'><i aria-hidden='true' class='fa fa-fw fa-save'></i>Save file</span>
                        <span ng-show='xmlHasErrors' class='btn-danger'><i aria-hidden='true' class='fa fa-fw fa-exclamation-triangle'></i>
                            XML format error</span>
                    </button>
                </div>
                <div class="md-padding md-padding-top-10" ng-if="fetchedXML">
                    <wz-xml-file-editor file-name='agent.conf' data="fetchedXML" target-name="currentGroup.name + ' group'"
                        valid-fn='xmlIsValid(valid)'>
                    </wz-xml-file-editor>
                </div>
            </div>
            <!-- XML editor for group agents -->

            <div ng-if="!editingFile">
                <div layout="row" class="md-padding" ng-if="lookingGroup && currentGroup && addingAgents">
                    <span ng-click='addMultipleAgents(false)' class='btn btn-info'>
                        Cancel</span>
                    <span ng-hide='moreThan500' ng-click='saveAddAgents()' class='btn btn-primary wz-margin-left-8'><i
                            aria-hidden='true' class='fa fa-fw fa-save'></i>
                        Apply changes</span>
                    <span class='error-msg' ng-show='moreThan500'><i class="fa fa-exclamation-triangle"></i> It is not
                        possible to apply changes of more than 500 additions or deletions</span>
                </div>

                <div layout="row" class="md-padding wz-padding-bottom-0" ng-if="lookingGroup && currentGroup && !addingAgents && !editingFile && !file && adminMode">
                    <button ng-if="lookingGroup && groupsSelectedTab==='files'" ng-click='editGroupAgentConfig(currentGroup)'
                        class='btn btn-primary'><i aria-hidden='true' class='fa fa-fw fa-pencil'></i>
                        Edit group configuration
                    </button>
                    <button ng-if="lookingGroup && groupsSelectedTab==='agents'" ng-disabled="currentGroup.name === 'default'"
                        ng-click='addMultipleAgents(true)' class='btn btn-primary'><i aria-hidden='true' class='fa fa-fw fa-tv'></i>
                        Add or remove agents
                    </button>
                </div>

                <!-- Search bar -->
                <div layout="row" class="md-padding" ng-if="!addingAgents && !file">
                    <input placeholder="{{groupsSelectedTab==='files' ? 'Filter files...' : lookingGroup ? 'Filter agents...' : 'Filter groups...'}}"
                        ng-model="custom_search" type="text" class="kuiLocalSearchInput ng-empty ng-pristine ng-scope ng-touched ng-valid"
                        aria-invalid="false" wz-enter="search(custom_search)">
                    <button type="submit" aria-label="Search" class="kuiLocalSearchButton height-40" ng-click="search(custom_search)">
                        <span class="fa fa-search" aria-hidden="true"></span>
                    </button>
                </div>
                <!-- End search bar -->

                <!-- Groups table -->
                <md-card flex class="wz-md-card _md flex md-margin-h" ng-if="!lookingGroup">
                    <md-card-content>
                        <div layout="row">
                            <wz-table flex extra-limit="true" path="'/agents/groups'" keys="['name','count','mergedSum']"
                                allow-click="true" row-sizes="[14,12,10]">
                            </wz-table>
                        </div>
                    </md-card-content>
                </md-card>
                <!-- End groups table -->

                <!-- CSV Download button section for groups -->
                <div layout="row" class="md-padding" ng-if="!lookingGroup">
                    <span flex></span>
                    <a class="small" id="btnDownload" ng-click="downloadCsv('/agents/groups')">Formatted
                        <i aria-hidden="true" class="fa fa-fw fa-download"></i>
                    </a>
                </div>
                <!-- End CSV Download button section for groups -->

                <div ng-if='!addingAgents'>
                    <!-- Group agents table -->
                    <md-card flex class="wz-md-card _md flex md-margin-h" ng-if="lookingGroup && groupsSelectedTab==='agents' && currentGroup">
                        <md-card-content>
                            <div layout="row">
                                <wz-table flex path="'/agents/groups/' + currentGroup.name" keys="['id','name','ip','status','os.name','os.version','version']"
                                    allow-click="true" row-sizes="[14,12,10]" empty-results="'No agents were added to this group.'" />
                            </div>
                        </md-card-content>
                    </md-card>
                    <!-- End Group agents table -->

                    <!-- CSV Download button section for group agents -->
                    <div layout="row" class="md-padding" ng-if="lookingGroup && groupsSelectedTab==='agents'">
                        <span flex></span>
                        <a class="small" id="btnDownload" ng-click="downloadCsv('/agents/groups/' + currentGroup.name)">Formatted
                            <i aria-hidden="true" class="fa fa-fw fa-download"></i>
                        </a>
                    </div>
                    <!-- End CSV Download button section for group agents -->

                    <!-- Group files table -->
                    <md-card flex class="wz-md-card _md flex md-margin-h" ng-if="lookingGroup && groupsSelectedTab==='files' && !fileViewer && currentGroup">
                        <md-card-content>
                            <div layout="row">
                                <wz-table extra-limit="true" flex path="'/agents/groups/' + currentGroup.name + '/files'"
                                    keys="[{value:'filename',size:2},{value:'hash',size:6}]" allow-click="true"
                                    row-sizes="[10,8,6,4]">
                                </wz-table>
                            </div>
                        </md-card-content>
                    </md-card>
                    <!-- End Group files table -->

                    <!-- CSV Download button section for group files-->
                    <div layout="row" class="md-padding" ng-if="lookingGroup && groupsSelectedTab==='files' && !file">
                        <span flex></span>
                        <a class="small" id="btnDownload" ng-click="downloadCsv('/agents/groups/' + currentGroup.name + '/files')">Formatted
                            <i aria-hidden="true" class="fa fa-fw fa-download"></i>
                        </a>
                    </div>
                    <!-- End CSV Download button section for group files -->

                    <!-- File JSON viewer section -->
                    <div flex layout="column" class="md-padding" ng-if="lookingGroup && groupsSelectedTab==='files' && file">
                        <div flex layout="column">
                            <div layout="row" class="wz-padding-bottom-14">
                                <span flex class="wz-headline-title">{{ filename }}</span>
                                <button class="md-icon-button" ng-if="lookingGroup" aria-label="Back" tooltip="Close file"
                                    tooltip-placement="left" ng-click="goBackFiles()"><i class="fa fa-fw fa-close"
                                        aria-hidden="true"></i></button>
                                <!--<span flex class="wz-text-right cursor-pointer color-grey" ng-click="goBackFiles()">close</span>-->
                            </div>
                            <div flex layout="column">
                                <pre flex class="wz-pre groupContentViewer wzXmlEditor wz-overflow-y-auto"><code wz-dynamic="file"></code></pre>
                            </div>
                        </div>
                    </div>
                    <!-- End File JSON viewer section -->
                </div>

                <div layout="row" class="md-padding" ng-if="addingAgents">
                    <span ng-show='!multipleSelectorLoading' class="wzMultipleSelectorCounter"><span style='color:green'>+{{currentAdding}}</span>&nbsp;<span
                            style='color:red'>-{{currentDeleting}}</span></span>
                    <wz-multiple-selector class='wzMultipleSelector' available-items="availableAgents.data"
                        selected-items="selectedAgents.data" title-available-items="Available agents"
                        title-selected-items="Current agents in the group" total-selected-items="totalSelectedAgents"
                        reload-scroll='reload(element, searchTerm, 499, start)' limit="checkLimit()">
                    </wz-multiple-selector>
                </div>
            </div>
        </div>
    </md-content>
</div>