wazuh-kibana-app/public/templates/overview/overview-fim.html

<md-content flex layout="column" ng-if="octrl.tab === 'fim' && octrl.tabView === 'panels'" ng-class="{'no-opacity': resultState !== 'ready' || !rendered}">

    <div layout="row" class="height-400">
        <md-card flex class="wz-md-card" ng-class="{'fullscreen': octrl.expandArray[0]}">
            <md-card-actions layout="row" class="wz-card-actions-vis" ng-dblclick="octrl.expand(0)">
                <span class="wz-headline-title">Alerts by action over time</span>
                <span flex></span>
                <span class="cursor-pointer" ng-click="octrl.expand(0)">
                    <react-component name="EuiIcon" props="{type:'expand'}" />
                </span>
            </md-card-actions>
            <md-card-content class="wazuh-column">
                <kbn-vis id="Wazuh-App-Agents-FIM-Alerts-by-action-over-time" vis-id="'Wazuh-App-Agents-FIM-Alerts-by-action-over-time'"></kbn-vis>
            </md-card-content>
        </md-card>
    </div>
    <div layout="row" class="height-300">
        <md-card flex="25" class="wz-md-card" ng-class="{'fullscreen': octrl.expandArray[1]}">
            <md-card-actions layout="row" class="wz-card-actions-vis" ng-dblclick="octrl.expand(1)">
                <span class="wz-headline-title">Top 5 agents</span>
                <span flex></span>
                <span class="cursor-pointer" ng-click="octrl.expand(1)">
                    <react-component name="EuiIcon" props="{type:'expand'}" />
                </span>
            </md-card-actions>
            <md-card-content class="wazuh-column">
                <kbn-vis id="Wazuh-App-Overview-FIM-Top-5-agents-pie" vis-id="'Wazuh-App-Overview-FIM-Top-5-agents-pie'"></kbn-vis>
            </md-card-content>
        </md-card>
        <md-card flex class="wz-md-card" ng-class="{'fullscreen': octrl.expandArray[2]}">
            <md-card-actions layout="row" class="wz-card-actions-vis" ng-dblclick="octrl.expand(2)">
                <span class="wz-headline-title">Events summary</span>
                <span flex></span>
                <span class="cursor-pointer" ng-click="octrl.expand(2)">
                    <react-component name="EuiIcon" props="{type:'expand'}" />
                </span>
            </md-card-actions>
            <md-card-content class="wazuh-column">
                <kbn-vis id="Wazuh-App-Overview-FIM-Events-summary" vis-id="'Wazuh-App-Overview-FIM-Events-summary'">
                </kbn-vis>
            </md-card-content>
        </md-card>
    </div>

    <div layout="row" class="height-300">
        <md-card flex class="wz-md-card" ng-class="{'fullscreen': octrl.expandArray[3]}">
            <md-card-actions layout="row" class="wz-card-actions-vis" ng-dblclick="octrl.expand(3)">
                <span class="wz-headline-title">Rule distribution</span>
                <span flex></span>
                <span class="cursor-pointer" ng-click="octrl.expand(3)">
                    <react-component name="EuiIcon" props="{type:'expand'}" />
                </span>
            </md-card-actions>
            <md-card-content class="wazuh-column">
                <kbn-vis vis-id="'Wazuh-App-Overview-FIM-Top-5-rules'"></kbn-vis>
            </md-card-content>
        </md-card>

        <md-card flex class="wz-md-card" ng-class="{'fullscreen': octrl.expandArray[4]}">
            <md-card-actions layout="row" class="wz-card-actions-vis" ng-dblclick="octrl.expand(4)">
                <span class="wz-headline-title">Actions</span>
                <span flex></span>
                <span class="cursor-pointer" ng-click="octrl.expand(4)">
                    <react-component name="EuiIcon" props="{type:'expand'}" />
                </span>
            </md-card-actions>
            <md-card-content class="wazuh-column">
                <kbn-vis id="Wazuh-App-Overview-FIM-Common-actions" vis-id="'Wazuh-App-Overview-FIM-Common-actions'">
                </kbn-vis>
            </md-card-content>
        </md-card>
        <md-card flex class="wz-md-card" ng-class="{'fullscreen': octrl.expandArray[5]}">
            <md-card-actions layout="row" class="wz-card-actions-vis" ng-dblclick="octrl.expand(5)">
                <span class="wz-headline-title">Top 5 users</span>
                <span flex></span>
                <span class="cursor-pointer" ng-click="octrl.expand(5)">
                    <react-component name="EuiIcon" props="{type:'expand'}" />
                </span>
            </md-card-actions>
            <md-card-content class="wazuh-column">
                <kbn-vis class="sca-vis table-scrollable" vis-id="'Wazuh-App-Overview-FIM-top-agents-user'"></kbn-vis>
            </md-card-content>
        </md-card>
    </div>
    <div layout="row" layout-align="center stretch" class="height-570">
        <md-card flex class="wz-md-card" ng-class="{'fullscreen': octrl.expandArray[6]}">
            <md-card-actions layout="row" class="wz-card-actions-vis" ng-dblclick="octrl.expand(6)">
                <span class="wz-headline-title">Alerts summary</span>
                <span flex></span>
                <span class="cursor-pointer" ng-click="octrl.expand(6)">
                    <react-component name="EuiIcon" props="{type:'expand'}" />
                </span>
            </md-card-actions>
            <md-card-content class="wazuh-column">
                <kbn-vis vis-id="'Wazuh-App-Overview-FIM-Alerts-summary'"></kbn-vis>
            </md-card-content>
        </md-card>
    </div>
</md-content>