HansHammel/watchmen

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

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

<div class="details-page">

    <a style="float:right" href="/services" class="hidden-xs">
        <span class="glyphicon glyphicon-chevron-left"></span> back to list
    </a>

    <div class="row">

        <div class="col-md-2 hidden-sm hidden-xs">
            <%- include partials/services-sidebar.html %>
        </div>

        <div ng-show="!loading" class="chart-container" ng-class="{'col-md-6': latestOutages.length, 'col-md-10': !latestOutages.length}">
            <h2>
                <span ng-if="serviceDetails.service.isRestricted" class="glyphicon glyphicon-lock" aria-hidden="true"></span> {{serviceDetails.service.name}}
                <span ng-if="serviceDetails.status && !serviceDetails.status.currentOutage">
                  <span title="site is up!" class="glyphicon glyphicon-ok-circle" aria-hidden="true"></span>
                </span>
                <span ng-if="serviceDetails.status.currentOutage">
                  <span title="site is down!!" class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
                </span>
                <a class="edit-link" ng-if="isAdmin" href="/services/{{serviceDetails.service.id}}/edit">
                    <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> edit
                </a>
            </h2>

            <div class="current-outage" ng-if="serviceDetails.status.currentOutage">
                <span title="Outage" class="down">Site is down!. <strong>Error:</strong></span>
                <span class="error">
                  {{serviceDetails.status.currentOutage.error}}
                </span>
                <div class="timestamp">
                    Outage started
                    <span>{{serviceDetails.status.currentOutage.timestamp | amDateFormat:'MMMM Do, HH:mm:ss'}}</span>
                    -
                    <span class="timeago" am-time-ago="serviceDetails.status.currentOutage.timestamp"></span>
                </div>
            </div>

            <div class="chart-wrapper" ng-show="showLastHourChart">
                <h4>Last hour</h4>

                <span class="uptime" title="Last hour uptime: {{serviceDetails.status.lastHour.uptime}} %">
                    {{serviceDetails.status.lastHour.uptime}}% <span class="caption">uptime</span>
                </span>

                <span class="latency" title="AVG response time: {{serviceDetails.status.lastHour.latency.mean}} milliseconds" class="">
                    {{serviceDetails.status.lastHour.latency.mean}} <span class="caption">ms. avg latency</span>
                </span>

                <span ng-if="serviceDetails.status.lastHour.downtime" class="downtime" title="Downtime last hour">
                    downtime: <span ms-time="serviceDetails.status.lastHour.downtime"></span>
                </span>

                <div class="chart" id='chart-last-hour'></div>

            </div>

            <div class="chart-wrapper" ng-show="showLast24Chart">
                <h4>Last 24 hours</h4>

                <span class="uptime" title="Last 24 hours uptime: {{serviceDetails.status.last24Hours.uptime}} %">
                    {{serviceDetails.status.last24Hours.uptime}}% <span class="caption">uptime</span>
                </span>

                <span class="latency" title="AVG response time: {{serviceDetails.status.last24Hours.latency.mean}} milliseconds" class="">
                    {{serviceDetails.status.last24Hours.latency.mean}} <span class="caption">ms. avg latency</span>
                </span>

                <span ng-if="serviceDetails.status.last24Hours.downtime" class="downtime" title="Downtime last 24 hours">
                    downtime: <span ms-time="serviceDetails.status.last24Hours.downtime"></span>
                </span>

                <div class="chart" id='chart-last-24-hours'></div>

            </div>

            <div class="chart-wrapper" ng-show="showLastWeekChart">
                <h4>Last week</h4>

                <span class="uptime" title="Last 24 hours uptime: {{serviceDetails.status.lastWeek.uptime}} %">
                    {{serviceDetails.status.lastWeek.uptime}}% <span class="caption">uptime</span>
                </span>

                <span class="latency" class="downtime" title="AVG response time: {{serviceDetails.status.lastWeek.latency.mean}} milliseconds" class="">
                    {{serviceDetails.status.lastWeek.latency.mean}} <span class="caption">ms. avg latency</span>
                </span>

                <span ng-if="serviceDetails.status.lastWeek.downtime" class="downtime" title="Downtime last week">
                    downtime: <span ms-time="serviceDetails.status.lastWeek.downtime"></span>
                </span>

                <div class="chart" id='chart-last-week'></div>

            </div>
        </div>

        <div ng-show="!loading" class="col-md-4" ng-if="latestOutages.length">
            <div class="outages-list">
                <%- include partials/outages.html %>
            </div>
        </div>

    </div>

</div>