wazuh-kibana-app/public/templates/manager-osseclog.html

<div flex ng-cloak ng-if="!loading && submenuNavItem == 'logs'" layout="column" ng-controller="managerLogController" class="manager-background">
    
    <div layout="row" layout-align="start start" class="manager-log-top-row">
        <md-input-container class="md-whiteframe-z1 manager-log-input-1" flex="20">
            <md-select id="categoryBox" ng-model="category" ng-change="category == 'all' ? logs.removeFilter('category', true) : logs.addFilter('category', category)"
                aria-label="Logs category">
                <md-option selected value="all">Choose daemon</md-option>
                <md-option ng-repeat="(key, value) in summary" value="{{key}}">{{key}}</md-option>
            </md-select>
        </md-input-container>

        <md-input-container class="md-whiteframe-z1 manager-log-input-2" flex="20">
            <md-select id="levelBox" ng-model="type_log" ng-change="type_log == 'all' ? logs.removeFilter('type_log', true) : logs.addFilter('type_log', type_log)"
                aria-label="Logs level">
                <md-option selected value="all">Choose log level</md-option>
                <md-option value="info">Info</md-option>
                <md-option value="error">Error</md-option>
                <md-option value="warning">Warning</md-option>
            </md-select>
        </md-input-container>
        <span flex></span>
        <md-button ng-if="!realtime" class="md-primary md-whiteframe-z1 buttonMenu manager-log-buttonplay" ng-click="playRealtime()">
            <i class="fa fa-play manager-log-buttonplay-i" aria-hidden="true"></i>
            Play realtime
        </md-button>
        <md-button ng-if="realtime" class="md-primary md-whiteframe-z1 buttonMenu manager-log-buttonplay" ng-click="playRealtime()">
            <i class="fa fa-stop manager-log-buttonplay-i" aria-hidden="true"></i>
            Stop realtime
        </md-button>
    </div>

    <div layout="row">
        <input flex placeholder="Filter" type="text" ng-model="searchTerm" ng-change="logs.addFilter('search', searchTerm)" class="input-filter-box manager-log-filter-box">
    </div>


    <div flex layout="column" class="md-padding">

        <md-toolbar flex layout="row" class="md-toolbar-tools">
            <span flex=10>Timestamp</span>
            <span flex=10>Tag</span>
            <span flex=10>Level</span>
            <span flex>Description</span>
        </md-toolbar>

        <div layout="column" flex>
            <md-content flex class="manager-log-list" id="groups-id" when-scrolled="logs.nextPage('')">
                <md-list>
                    <md-list-item ng-repeat="log in logs.items | filter : searchTerm" ng-mouseover="log.hovered=true" ng-mouseleave="log.hovered=false"
                        layout="row" class="groups-button">
                        <span flex=10>{{log.timestamp}}</span>
                        <span flex=10>{{log.tag}}</span>
                        <span flex=10>{{log.level}}</span>
                        <span flex>{{log.description}}</span>
                        <div flex layout="row" layout-align="end center"></div>
                    </md-list-item>
                </md-list>
            </md-content>
        </div>
    </div>
</div>

<style>
    .manager-log-buttonplay {
        margin-top: 20px; 
        width: 180px;
    }
    .manager-log-top-row {
        height: 70px;
        padding-right: 8px;
    }
    .manager-log-buttonplay-i {
        margin-top: 0px; 
        margin-right: 15px; 
        margin-bottom: 5px;
    }
    .manager-log-input-1 {
        margin-right: 15px;
        margin-left: 15px;
        padding: 3px
    }
    .manager-log-input-2 {
        margin-right: 0px;
        margin-left: 20px;
        padding: 3px;
        margin-right: 10px;
    }
    .manager-log-filter-box {
        height: 35px; 
        width:auto; 
        margin-right: 15px;
        margin-left: 15px;
        padding: 3px;
    }
    .manager-log-list {
        overflow: auto; 
        height:400px;
    }
</style>