HansHammel/watchmen

<div ng-include="'header.html'"></div>

<div ng-if="errorLoadingServices" class="alert alert-danger" role="alert">
    <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
    <span>{{errorLoadingServices}}</span>
</div>

<div class="container-fluid" ng-show="!loading">
    <div class="row">
        <div class="filter-container">
            <% if (user){ %>
            <div class="row">
                <div class="col-md-10">
                    <span class="icon glyphicon glyphicon-search"></span>
                    <input ng-model="query" class="query form-control" placeholder="filter by host name"/>
                </div>
                <div class="col-md-2 filter-to-me">
                    <input ng-model="filterRestrictedToMe" id="filterRestrictedToMe" type="checkbox"/>
                    <label for="filterRestrictedToMe">only restricted to me</label>
                </div>
            </div>
            <% } else {%>
            <input ng-model="query" class="query form-control" placeholder="filter by host name"/>
            <% } %>
        </div>

        <table ng-table="tableParams" class="table-services table sorted table-striped table-condensed">
            <tbody>

            <tr ng-class={'result-disabled':row.service.enabled===false,'result-success':!row.status.currentOutage,'result-error':row.status.currentOutage}
                ng-repeat="row in $data | filter:serviceFilter">

                <% if ((user && user.isAdmin) || no_auth) { %>
                <td class="admin-operations" data-title="'Admin'">
                    <div class="btn-group">
                        <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
                            <span class="glyphicon glyphicon-cog"></span>
                            <span class="caret"></span>
                        </a>
                        <div class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
                            <a class="edit btn btn-default btn-xs" href="services/{{row.service.id}}/edit">
                                <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> edit
                            </a>
                            <button class="btn btn-danger btn-xs" ng-click="reset(row.service.id)">
                                <span class="glyphicon glyphicon-fire" aria-hidden="true"></span> reset
                            </button>
                            <button class="btn btn-danger btn-xs" ng-click="delete(row.service.id)">
                                <span class="glyphicon glyphicon-remove" aria-hidden="true"></span> delete
                            </button>
                        </div>
                    </div>
                </td>
                <% } %>

                <td class="status" data-title="'Status'" sortable="'status.currentOutage'">
                    <span ng-if="row.status.currentOutage" class="label label-danger">offline</span>
                    <span ng-if="!row.status.currentOutage" class="label label-success">online</span>
                </td>

                <td class="result-uptime"  data-title="'last 24h'" sortable="'status.last24Hours.uptime'">
                    <a class="name" href="/services/{{row.service.id}}/view">
                        <span>{{row.status.last24Hours.uptime}}%</span>
                    </a>
                </td>

                <td class="result-uptime hidden-sm hidden-xs" header-class="'hidden-sm hidden-xs'"
                    data-title="'last week'" sortable="'status.lastWeek.uptime'">
                    <a class="name" href="/services/{{row.service.id}}/view">
                        <span>{{row.status.lastWeek.uptime}}%</span>
                    </a>
                </td>

                <td header-class="'hidden-sm hidden-xs'" class="service hidden-sm hidden-xs"
                    data-title="'Service'" sortable="'name'">
                    {{row.service.pingServiceName}}
                </td>

                <td data-title="'Host'" sortable="'service.name'">
                    <span ng-if="row.service.isRestricted" class="glyphicon glyphicon-lock" aria-hidden="true"></span>
                    <a class="name" href="/services/{{row.service.id}}/view">
                        {{row.service.name}}
                    </a>
                </td>

                <td header-class="'hidden-xs'" class="outages hidden-xs"
                    data-title="'Downtime last 24h'" sortable="'status.last24Hours.downtime'">
                    <span ng-if="row.status.last24Hours.downtime" class="label label-danger">
                        <span ms-time="row.status.last24Hours.downtime"></span>
                    </span>
                </td>
            </tr>
            </tbody>
        </table>

    </div>
</div>