wazuh-kibana-app/public/templates/management/monitoring/monitoring.head

<div layout="column" ng-controller="clusterController" ng-if="mctrl.tab === 'monitoring'">
    <div flex layout="column" ng-show="!isClusterEnabled || !isClusterRunning">

        <!-- Cluster disabled breadcrumbs -->
        <div layout="row" layout-align="start center">
            <div layout="row" layout-padding>
                <div>
                    <span class="wz-text-link cursor-pointer" ng-click="mctrl.switchTab('welcome')">Management</span>
                    <span> / </span>
                    <span>{{ mctrl.tabNames[tab] }}</span>
                </div>
            </div>
        </div>
        <!-- End cluster disabled breadcrumbs -->

        <!-- Status and reports navigation bar -->
        <md-nav-bar class="wz-nav-bar" ng-show="mctrl.tab !== 'welcome'" md-selected-nav-item="mctrl.tab" nav-bar-aria-label="Status and reports navigation links">
            <md-nav-item class="wz-nav-item" md-nav-click="mctrl.switchTab('status')" name="status">Status</md-nav-item>
            <md-nav-item class="wz-nav-item" md-nav-click="mctrl.switchTab('logs')" name="logs">Logs</md-nav-item>
            <md-nav-item class="wz-nav-item" md-nav-click="mctrl.switchTab('monitoring')" name="monitoring">Cluster</md-nav-item>
            <md-nav-item class="wz-nav-item" md-nav-click="mctrl.switchTab('reporting')" name="reporting">Reporting</md-nav-item>
        </md-nav-bar>
        <!-- End status and reports navigation bar -->

        <!-- Headline -->
        <div layout="column" layout-padding>
            <span class="font-size-18"><i class="fa fa-fw fa-search" aria-hidden="true"></i> Cluster</span>
            <span class="md-subheader">Visualize your Wazuh cluster nodes and its agents</span>
        </div>
        <!-- End headline -->

        <!-- Cluster disabled section -->
        <div flex layout="row" layout-align="start start" ng-if="!isClusterEnabled">
            <md-card flex class="wz-md-card" flex>
                <md-card-content class="wz-text-center">
                    <i class="fa fa-fw fa-info-circle" aria-hidden="true"></i> <span class="wz-headline-title">Cluster
                        disabled</span>
                    <md-divider class="wz-margin-top-10"></md-divider>
                    <div layout="column" class="wz-padding-top-10">
                        <p>The cluster is disabled. Visit the documentation on <a target="_blank" href="https://documentation.wazuh.com/current/user-manual/manager/wazuh-cluster.html">this
                                link</a> to learn about how to enable it.
                        </p>
                    </div>
                </md-card-content>
            </md-card>
        </div>
        <!-- End cluster disabled section -->

        <!-- Cluster not running section -->
        <div flex layout="row" layout-align="start start" ng-if="!isClusterRunning">
            <md-card flex class="wz-md-card" flex>
                <md-card-content class="wz-text-center">
                    <i class="fa fa-fw fa-info-circle" aria-hidden="true"></i> <span class="wz-headline-title">Cluster
                        not running</span>
                    <md-divider class="wz-margin-top-10"></md-divider>
                    <div layout="column" class="wz-padding-top-10">
                        <p>
                            The cluster is enabled but it's not running.
                        </p>
                    </div>
                </md-card-content>
            </md-card>
        </div>
        <!-- End cluster not running section -->
    </div>

    <div flex="auto" layout="column" ng-show="isClusterEnabled && isClusterRunning">

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

        <!-- Navigation section -->
        <div layout="row" layout-align="start center" ng-if="!loading">
            <div layout="row" layout-padding>
                <div ng-if="!showConfig && !showNodes">
                    <span class="wz-text-link cursor-pointer" ng-click="mctrl.switchTab('welcome')">Management</span>
                    <span> / </span>
                    <span>{{ mctrl.tabNames[mctrl.tab] }}</span>
                    <span> / </span>
                    <span>{{ currentAPI }}</span>
                </div>
                <div ng-if="showConfig">
                    <span class="wz-text-link cursor-pointer" ng-click="mctrl.switchTab('welcome')">Management</span>
                    <span> / </span>
                    <span class="wz-text-link cursor-pointer" ng-click="goBack()">{{ mctrl.tabNames[mctrl.tab] }}</span>
                    <span> / </span>
                    <span class="wz-text-link cursor-pointer" ng-click="goBack()">{{ currentAPI }}</span>
                    <span> / Overview</span>
                </div>
                <div ng-if="showNodes && !currentNode">
                    <span class="wz-text-link cursor-pointer" ng-click="mctrl.switchTab('welcome')">Management</span>
                    <span> / </span>
                    <span class="wz-text-link cursor-pointer" ng-click="goBack()">{{ mctrl.tabNames[mctrl.tab] }}</span>
                    <span> / </span>
                    <span class="wz-text-link cursor-pointer" ng-click="goBack()">{{ currentAPI }}</span>
                    <span> / </span>
                    <span>Nodes</span>
                </div>
                <div ng-if="currentNode">
                    <span class="wz-text-link cursor-pointer" ng-click="mctrl.switchTab('welcome')">Management</span>
                    <span> / </span>
                    <span class="wz-text-link cursor-pointer" ng-click="goBack()">{{ mctrl.tabNames[mctrl.tab] }}</span>
                    <span> / </span>
                    <span class="wz-text-link cursor-pointer" ng-click="goBack()">{{ currentAPI }}</span>
                    <span> / </span>
                    <span class="wz-text-link cursor-pointer" ng-click="goNodes()">Nodes</span>
                    <span> / </span>
                    <span class="wz-text-bold">{{ currentNode.name }}</span>
                </div>
            </div>
        </div>
        <!-- End navigation section -->

        <!-- Status and reports navigation bar -->
        <md-nav-bar ng-if="!loading" class="wz-nav-bar" ng-show="mctrl.tab !== 'welcome'" md-selected-nav-item="mctrl.tab"
            nav-bar-aria-label="Status and reports navigation links">
            <md-nav-item class="wz-nav-item" md-nav-click="mctrl.switchTab('status')" name="status">Status</md-nav-item>
            <md-nav-item class="wz-nav-item" md-nav-click="mctrl.switchTab('logs')" name="logs">Logs</md-nav-item>
            <md-nav-item class="wz-nav-item" md-nav-click="mctrl.switchTab('monitoring')" name="monitoring">Cluster</md-nav-item>
            <md-nav-item class="wz-nav-item" md-nav-click="mctrl.switchTab('reporting')" name="reporting">Reporting</md-nav-item>
        </md-nav-bar>
        <!-- End status and reports navigation bar -->

        <!-- Headline -->
        <div ng-show="!loading" layout="column" layout-padding>
            <span class="font-size-18"><i class="fa fa-fw fa-search" aria-hidden="true"></i> Cluster</span>
            <span class="md-subheader">Visualize your Wazuh cluster nodes and its agents</span>
        </div>
        <!-- End headline -->

        <!-- Discover search bar section -->
        <kbn-dis ng-show="!loading && (!showNodes || currentNode)"></kbn-dis>
        <!-- End Discover search bar section -->

        <!-- Loading status section -->
        <div layout="column" layout-align="center center" class="wz-margin-bottom-40" ng-show="!loading && !rendered && resultState === 'ready' && (!showNodes || (showNodes && currentNode))">
            <div class="percentage"><i class="fa fa-fw fa-spin fa-spinner" aria-hidden="true"></i></div>
            <div class="percentage">{{loadingStatus}}</div>
        </div>
        <!-- End loading status section -->
    </div>