<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset=utf-8 />
	<title>OverC</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="icon" type="image/x-icon" href="{{ url_for('ui.static', filename='img/favicon-48.png') }}" />
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">

    <link rel="stylesheet" type="text/css" media="screen" href="{{ url_for('ui.static', filename='style.css') }}" />
</head>
<body>

<div class="container-fluid" ng-app="overcApplication" ng-cloak>
    {% raw %}

    <!-- Navbar -->
    <nav class="navbar navbar-default" role="navigation" ui-view="navbar">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" ui-sref="overview.all">OverC</a>
            </div>

            <ul class="nav navbar-nav">
                <li ui-sref-active="active"><a ui-sref="overview.all">Servers</a></li>
                <li ui-sref-active="active"><a ui-sref="detailed.all">Services</a></li>
                <li ng-if="$state.current.name == 'service.view'" ui-sref-active="active">
                    <a ui-sref="service.view">
                        <span class="glyphicon glyphicon-chevron-right"></span>
                        <b>{{ $state.title }}</b>
                    </a>
                </li>
            </ul>
        </div>
    </nav>
    <!-- /Navbar -->


    <!-- Notifications -->
    <div ng-controller="statusbarCtrl">
        <div class="alert alert-danger" ng-if="state.supervisor_lag > 60">
            Supervisor process is not running correctly: some service states are not checked for {{ state.supervisor_lag }} seconds.
            Review OverC server logs.
        </div>

        <div class="alert alert-warning" ng-if="state.http_error">
            Failed to load data: {{ state.http_error }}
        </div>
    </div>
    <!-- /Notifications -->


    <!-- View -->
    <ui-view>
        <i>Loading content...</i>
    </ui-view>
    <!-- /View -->



    <!-- Pages -->

    <script type="text/ng-template" id="page/overview.htm">
        <div class="row"><div class="col-md-8" ui-view="overview"><i>Loading overview...</i></div></div>
    </script>

    <script type="text/ng-template" id="page/detailed.htm">
        <div class="row"><div class="col-md-8" ui-view="services"><i>Loading services...</i></div></div>
        <div class="row"><div class="col-md-8" ui-view="alerts"><i>Loading alerts...</i></div></div>
    </script>

    <script type="text/ng-template" id="page/service.htm">
        <div class="row"><div class="col-md-8" ui-view="service"><i>Loading service...</i></div></div>
        <div class="row"><div class="col-md-8" ui-view="states"><i>Loading states...</i></div></div>
        <div class="row"><div class="col-md-8" ui-view="alerts"><i>Loading alerts...</i></div></div>
    </script>

    <!-- /Pages -->



    <!-- Controllers -->

    <!-- Overview -->
    <script type="text/ng-template" id="ctrl/overview.htm">
        <table class="table table-bordered table-striped table-condensed" id="overview">
            <THEAD>
                <tr><th>Server</th><th>Services</th></tr>
            </THEAD>
            <TBODY>
                <tr ng-repeat="server in servers track by server.id">
                    <th class="col-md-2">
                        <div class="label label-danger" ng-if="server.n_alerts" title="Alerts today">{{ server.n_alerts }}</div>
                        <a href>{{ server.title }}</a>
                    </th>
                    <td class="services">
                        <ul class="list-unstyled list-inline">
                            <li ng-repeat="service in server.services track by service.id" class="service-state state-{{ service.state.state }}" title="{{ service.title }}">
                                <div class="label label-danger" ng-if="service.n_alerts" title="Alerts today">{{ service.n_alerts }}</div>
                                &ZeroWidthSpace;
                            </li>
                        </ul>
                    </td>
                </tr>
            </TBODY>
        </table>
    </script>
    <!-- /Overview -->

    <!-- Services -->
    <script type="text/ng-template" id="ctrl/services.htm">
        <table class="table table-striped table-bordered table-condensed" id="services">
            <caption>
                Services
                <div class="label label-danger" ng-if="stats.n_alerts" title="Total alerts today">{{ stats.n_alerts }}</div>
            </caption>
            <THEAD>
                <tr><th>Server</th><th>Service</th><th>State</th><th>Info</th></tr>
            </THEAD>
            <TBODY ng-repeat="server in servers track by server.id">
                <tr ng-repeat="service in server.services track by service.id">
                    <th class="col-md-2" rowspan="{{ server.services.length }}" ng-if="$first">
                        <div class="label label-danger pull-right" ng-if="server.n_alerts" title="Server alerts today">{{ server.n_alerts }}</div>
                        <a href>{{ server.title }}</a>
                            <a class="btn-delete glyphicon glyphicon-remove" title="Delete server" ng-click="actions.delete_server(server.id)"></a>
                        <div class="hint">{{ server.name }}, IP: {{ server.ip }}</div>
                    </th>
                    <td class="col-md-2">
                        <div class="label label-danger pull-right" ng-if="service.n_alerts" title="Service alerts today">{{ service.n_alerts }}</div>
                        <a href ui-sref="service.view({ service_id: service.id })">{{ service.title }}</a>
                            <a class="btn-delete glyphicon glyphicon-remove" title="Delete service" ng-click="actions.delete_service(service.id)"></a>
                        <div class="hint">{{ service.name }}, period: {{ service.period }}s</div>
                    </td>
                    <td class="col-md-2 service-state state-{{ service.state.state }}" ng-if="service.state">
                        {{ service.state.state }}
                        <div class="label label-danger pull-right" ng-if="service.state.timed_out" title="Monitoring plugin did not report in time">Timeout</div>
                        <div class="hint">Seen: {{ service.state.seen_ago }} ago</div>
                    </td>
                    <td ng-if="!service.state">?</td>
                    <td ng-repeat-end>{{ service.state.info }}</td>
                </tr>
            </TBODY>
        </table>
    </script>
    <!-- /Services -->

    <!-- States -->
    <script type="text/ng-template" id="ctrl/states.htm">
        <table class="table table-striped table-bordered table-condensed" id="states">
            <caption>State History</caption>
            <THEAD>
                <tr><th>Time</th><th>Service</th><th>State</th><th>Info</th></tr>
            </THEAD>
            <TBODY>
                <tr ng-repeat="state in states track by state.id">
                    <td colspan="4" ng-if="state.group" class="grouped">
                        <a href class="center-block text-center" ng-click="actions.group_expand(state.group)">⋯ {{ state.group_count }} more ⋯</a>
                    </td>

                    <td class="col-md-2"  ng-if="!state.group">
                        {{ state.rtime }}
                    </td>
                    <th class="col-md-2"  ng-if="!state.group">{{ state.service }}</th>
                    <td class="col-md-2 service-state state-{{ state.state }}"  ng-if="!state.group">
                        {{ state.state }}
                    </td>
                    <td class="state-info"  ng-if="!state.group">{{ state.info }}
                        <div ng-repeat="alert in state.alerts" class="label label-{{ alert.css_class }}">{{ alert.message }}</div>
                    </td>
                </tr>
            </TBODY>
            <TFOOT>
                <tr><td colspan="5"><a href class="btn btn-default btn-sm btn-block" ng-click="actions.load_more_states()">Load more</a></td></tr>
            </TFOOT>
        </table>
    </script>
    <!-- /States -->

    <!-- Alerts -->
    <script type="text/ng-template" id="ctrl/alerts.htm">
        <table class="table table-striped table-bordered table-condensed" id="alerts">
            <caption>
                Alerts
            </caption>
            <THEAD>
                <tr><th>Date</th><th>Server</th><th>Service</th><th>Channel / Event</th><th>Message</th></tr>
            </THEAD>
            <TBODY>
                <tr ng-repeat="alert in alerts track by alert.id">
                    <td>{{ alert.ctime }}</td>
                    <td><a>{{ alert.server }}</a></td>
                    <td><a>{{ alert.service }}</a></td>
                    <td>{{ alert.channel }} / {{ alert.event }}</td>
                    <td>{{ alert.message }}
                        <span ng-if="alert.state_info">: {{ alert.state_info }}</span>
                    </td>
                </tr>
            </TBODY>
            <TFOOT>
                <tr><td colspan="5"><a href class="btn btn-default btn-sm btn-block" ng-click="actions.load_more_alerts()">Load more</a></td></tr>
            </TFOOT>
        </table>
    </script>
    <!-- /Alerts -->

    <!-- /Controllers -->
    {% endraw %}

    <footer>
        <p class="text-muted">OverC v{{ overc_version }}, <a href="mailto:kolypto@gmail.com" class="navbar-link">kolypto@gmail.com</a></p>
    </footer>

</div>

</body>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular-resource.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
    <script src="{{ url_for('ui.static', filename='all.js') }}"></script>
</html>
