lucas.mathieu/cachet-docker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #95 from cachethq/timeline-status-view

Browse Source 
Timeline status view
This commit is contained in:
James Brooks
2014-12-28 10:14:22 +00:00
parent 392b939d44 8d0ebd292f
commit 4fea3753c6
13 changed files with 399 additions and 183 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/sass/_palette.scss
+1 -1
View File
@@ -19,5 +19,5 @@ $dark-pink: darken($pink, 10%);
$grey: #ecf0f1;
$dark-grey: darken($grey, 10%);
$orange: #E87E04;
$orange: #FF8800;
$dark-orange: darken($orange, 10%);
app/assets/sass/_status-page.scss
+127 -54
View File
@@ -1,7 +1,8 @@
@import 'palette';
body.status-page {
font-family: 'Lato';
font-family: 'Lato', 'Helevetic Neue', Arial, sans-serif;
background-color: #F0F3F4;
color: #333333;
font-size: 1.4em;
font-weight: 300;
@@ -63,22 +64,133 @@ body.status-page {
}
}
.badge {
padding-top: 8px;
padding-bottom: 8px;
padding-left: 12px;
padding-right: 12px;
&.badge-incident-1 {
background-color: $orange;
.timeline {
.content-wrapper {
margin-top: 40px;
margin-bottom: 40px;
}
&.badge-incident-2 {
background-color: $yellow;
h3 {
margin-top: 30px;
margin-bottom: 40px;
font-size: 22px;
small {
margin-left: 15px;
}
}
&.badge-incident-3 {
background-color: $blue;
.moment {
width: 100%;
padding-bottom: 50px;
position: relative;
&.first {
&:before {
height: 130%;
top: -20px;
}
&:after {
content: '';
position: absolute;
left: 23px;
top: -20px;
width: 7px;
height: 7px;
background: $grey;
border-radius: 50%;
}
}
&:before {
content: '';
position: absolute;
left: 26px;
top: 5px;
width: 2px;
height: 100%;
background: #7266BA;
}
.icon {
background: #fff;
width: 35px;
height: 35px;
border-radius: 50%;
border: 1px solid #e8e8e8;
position: absolute;
left: 25px;
top: 14px;
.fa {
position: absolute;
&.fa-flag {
top: 10px;
left: 9px;
}
&.fa-warning {
top: 10px;
left: 9px;
}
&.fa-eye {
top: 10px;
left: 9px;
}
&.fa-check {
top: 10px;
left: 9px;
}
}
&.status-1 {
color: $orange;
}
&.status-2 {
color: $yellow;
}
&.status-3 {
color: $blue;
}
&.status-4 {
color: $green;
}
}
&.last:before {
background: #fff;
}
.panel {
margin: 0;
border-radius: 2px;
}
.panel-body {
border-top: 1px solid #eee;
}
.panel-message {
border: 1px solid #e8e8e8;
.date {
color: #c7c7c7;
}
}
.panel-message:before {
position: absolute;
top: 16px;
left: 1px;
display: inline-block;
border-top: 15px solid transparent;
border-left: 0 solid #e8e8e8;
border-right: 15px solid #e8e8e8;
border-bottom: 15px solid transparent;
content: " ";
}
.panel-message:after {
position: absolute;
top: 17px;
left: 2px;
display: inline-block;
border-top: 14px solid transparent;
border-left: 0 solid #fff;
border-right: 14px solid #fff;
border-bottom: 14px solid transparent;
content: " ";
}
}
&.badge-incident-4 {
background-color: $green;
}
@media (max-width: 767px) {
.timeline .moment .content {
width: 100%;
}
}
@@ -93,24 +205,8 @@ body.status-page {
border: 1px solid $grey;
font-size: 1.1em;
span.badge {
position: absolute;
top: 0;
right: 0;
border-radius: 0;
display: block;
}
i.glyphicon {
font-size: 1.4em;
color: rgba(white, 0.9);
}
h1, h2, h3, h4 {
margin-bottom: 2px;
}
h4 {
margin-bottom: 2px;
font-weight: 400;
max-width: 90%;
}
@@ -119,29 +215,6 @@ body.status-page {
margin-bottom: 0;
line-height: 1.3em;
}
time {
color: #6C7A89;
// letter-spacing: 0.02em;
font-weight: 300;
font-size: 1.1em;
}
&.active {
background-color: #F2F1EF;
h3 {
color: #22313F;
padding-top: 2px;
padding-bottom: 2px;
font-weight: 600;
font-size: 1.4em;
}
&:hover {
color: inherit;
border-color: $grey;
}
}
}
&.components {
app/lang/en/cachet.php
+1
View File
@@ -18,6 +18,7 @@ return [
3 => 'Watching',
4 => 'Fixed',
],
'none' => 'Nothing to report',
],
// Service Status
'service' => [
app/models/Incident.php
+9
View File
@@ -61,4 +61,13 @@ class Incident extends Eloquent implements \Dingo\Api\Transformer\TransformableI
{
return new CachetHQ\Cachet\Transformers\IncidentTransformer();
}
/**
* Check if Incident has message.
* @return boolean
*/
public function hasMessage()
{
return ($this->message !== '');
}
}
app/views/index.blade.php
+2 -14
View File
@@ -1,18 +1,6 @@
@extends('layout.master')
@section('content')
@if(Auth::check())
<ul class='nav nav-pills'>
<li>
<a class="btn btn-default" href="{{ URL::route('dashboard') }}">{{ Lang::get('cachet.dashboard.dashboard') }}</a>
</li>
<li>
<a class="btn btn-danger" href="{{ URL::route('logout') }}">{{ Lang::get('cachet.logout') }}</a>
</li>
</ul>
<hr />
@endif
<div class='alert alert-{{ $systemStatus }}'>{{ $systemMessage }}</div>
@include('partials.components')
@@ -21,7 +9,7 @@
@include('partials.graphs')
@endif
@for($i=0; $i <= 7; $i++)
@foreach(range(0, 7) as $i => $v)
@include('partials.incident', array('i', $i))
@endfor
@endforeach
@stop
app/views/layout/master.blade.php
+1 -1
View File
@@ -10,7 +10,7 @@
<title>{{ isset($pageTitle) ? $pageTitle : Setting::get('app_name') }} | Cachet</title>
<link href='http://fonts.googleapis.com/css?family=Raleway:400,700,300,600' rel='stylesheet' type='text/css'>
<link href='//fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="{{ elixir('css/all.css') }}">
@include('partials.stylesheet')
app/views/partials/incident.blade.php
+39 -23
View File
@@ -1,23 +1,39 @@
<ul class='list-group'>
<?php
$incidentDate = Carbon::now()->subDays($i);
$incidents = Incident::whereRaw('DATE(created_at) = "' . $incidentDate->format('Y-m-d') . '"')->orderBy('created_at', 'desc')->get();
?>
<li class='list-group-item active'>
<h3 class='list-group-item-heading'>{{ $incidentDate->format('jS M Y') }}</h3>
</li>
@unless($incidents->count() > 0)
<li class='list-group-item'>{{ Lang::get('cachet.no_incidents') }}</li>
@endunless
@foreach($incidents as $incidentID => $incident)
<li class='list-group-item'>
<span class='badge badge-incident-{{ $incident->status }}'><i class='glyphicon {{ $incident->icon }}'></i></span>
<h4>{{ $incident->name }} <small><time>{{ $incident->created_at->format('H:i:s A') }}</time></small></h4>
{{ $incident->message }}
@if($incidentID < ($incident->count() - 1))
</li>
@endif
@endforeach
</ul>
<?php
$incidentDate = Carbon::now()->subDays($i);
$incidents = Incident::whereRaw('DATE(created_at) = "' . $incidentDate->format('Y-m-d') . '"')
->orderBy('created_at', 'desc')->get();
?>
<h4>{{ $incidentDate->format('jS F Y') }}</h4>
<div class='timeline'>
<div class='content-wrapper'>
@forelse($incidents as $incidentID => $incident)
<div class="moment {{ $incidentID === 0 ? "first" : null }}">
<div class="row event clearfix">
<div class="col-sm-1">
<div class="icon status-{{ $incident->status }}">
<i class="{{ $incident->icon }}"></i>
</div>
</div>
<div class="col-xs-10 col-xs-offset-2 col-sm-11 col-sm-offset-0">
<div class="panel panel-message">
<div class="panel-heading">
{{ $incident->name }}
<br>
<small class='date'>{{ $incident->created_at->diffForHumans() }}</small>
</div>
@if($incident->hasMessage())
<div class="panel-body">
<p>
{{ $incident->message }}
</p>
</div>
@endif
</div>
</div>
</div>
</div>
@empty
{{ Lang::get('cachet.incident.none') }}
@endforelse
</div>
</div>
app/views/partials/support-link.blade.php
+5
View File
@@ -2,5 +2,10 @@
<footer class='footer'>
<p>{{ Lang::get('cachet.powered_by', array('app' => Setting::get('app_name'))) }}</p>
<p><a href='/rss'><i class='fa fa-rss'></i> RSS Feed</a></p>
@if(Auth::check())
<p>
<a href="{{ URL::route('dashboard') }}">{{ Lang::get('cachet.dashboard.dashboard') }}</a> &ndash; <a href="{{ URL::route('logout') }}">{{ Lang::get('cachet.logout') }}</a>
</p>
@endif
</footer>
@endif
public/build/css/all-cd88aa4c.css → public/build/css/all-1e73d07b.css
+102 -40
View File
@@ -4378,7 +4378,8 @@ body.dashboard .content {
margin-top: 0; }
body.status-page {
font-family: 'Lato';
font-family: 'Lato', 'Helevetic Neue', Arial, sans-serif;
background-color: #F0F3F4;
color: #333333;
font-size: 1.4em;
font-weight: 300; }
@@ -4416,19 +4417,105 @@ body.status-page {
background: #ff6f6f;
border-color: #ff3c3c;
color: #FFF; }
body.status-page .badge {
padding-top: 8px;
padding-bottom: 8px;
padding-left: 12px;
padding-right: 12px; }
body.status-page .badge.badge-incident-1 {
background-color: #E87E04; }
body.status-page .badge.badge-incident-2 {
background-color: #F7CA18; }
body.status-page .badge.badge-incident-3 {
background-color: #3498db; }
body.status-page .badge.badge-incident-4 {
background-color: #2ECC71; }
body.status-page .timeline .content-wrapper {
margin-top: 40px;
margin-bottom: 40px; }
body.status-page .timeline h3 {
margin-top: 30px;
margin-bottom: 40px;
font-size: 22px; }
body.status-page .timeline h3 small {
margin-left: 15px; }
body.status-page .timeline .moment {
width: 100%;
padding-bottom: 50px;
position: relative; }
body.status-page .timeline .moment.first:before {
height: 130%;
top: -20px; }
body.status-page .timeline .moment.first:after {
content: '';
position: absolute;
left: 23px;
top: -20px;
width: 7px;
height: 7px;
background: #ecf0f1;
border-radius: 50%; }
body.status-page .timeline .moment:before {
content: '';
position: absolute;
left: 26px;
top: 5px;
width: 2px;
height: 100%;
background: #7266BA; }
body.status-page .timeline .moment .icon {
background: #fff;
width: 35px;
height: 35px;
border-radius: 50%;
border: 1px solid #e8e8e8;
position: absolute;
left: 25px;
top: 14px; }
body.status-page .timeline .moment .icon .fa {
position: absolute; }
body.status-page .timeline .moment .icon .fa.fa-flag {
top: 10px;
left: 9px; }
body.status-page .timeline .moment .icon .fa.fa-warning {
top: 10px;
left: 9px; }
body.status-page .timeline .moment .icon .fa.fa-eye {
top: 10px;
left: 9px; }
body.status-page .timeline .moment .icon .fa.fa-check {
top: 10px;
left: 9px; }
body.status-page .timeline .moment .icon.status-1 {
color: #FF8800; }
body.status-page .timeline .moment .icon.status-2 {
color: #F7CA18; }
body.status-page .timeline .moment .icon.status-3 {
color: #3498db; }
body.status-page .timeline .moment .icon.status-4 {
color: #2ECC71; }
body.status-page .timeline .moment.last:before {
background: #fff; }
body.status-page .timeline .moment .panel {
margin: 0;
border-radius: 2px; }
body.status-page .timeline .moment .panel-body {
border-top: 1px solid #eee; }
body.status-page .timeline .moment .panel-message {
border: 1px solid #e8e8e8; }
body.status-page .timeline .moment .panel-message .date {
color: #c7c7c7; }
body.status-page .timeline .moment .panel-message:before {
position: absolute;
top: 16px;
left: 1px;
display: inline-block;
border-top: 15px solid transparent;
border-left: 0 solid #e8e8e8;
border-right: 15px solid #e8e8e8;
border-bottom: 15px solid transparent;
content: " "; }
body.status-page .timeline .moment .panel-message:after {
position: absolute;
top: 17px;
left: 2px;
display: inline-block;
border-top: 14px solid transparent;
border-left: 0 solid #fff;
border-right: 14px solid #fff;
border-bottom: 14px solid transparent;
content: " "; }
@media (max-width: 767px) {
body.status-page .timeline .moment .content {
width: 100%; }
}
body.status-page .list-group {
margin-bottom: 20px;
padding-left: 0;
@@ -4438,38 +4525,13 @@ body.status-page {
background-color: #ffffff;
border: 1px solid #ecf0f1;
font-size: 1.1em; }
body.status-page .list-group .list-group-item span.badge {
position: absolute;
top: 0;
right: 0;
border-radius: 0;
display: block; }
body.status-page .list-group .list-group-item i.glyphicon {
font-size: 1.4em;
color: rgba(255, 255, 255, 0.9); }
body.status-page .list-group .list-group-item h1, body.status-page .list-group .list-group-item h2, body.status-page .list-group .list-group-item h3, body.status-page .list-group .list-group-item h4 {
margin-bottom: 2px; }
body.status-page .list-group .list-group-item h4 {
margin-bottom: 2px;
font-weight: 400;
max-width: 90%; }
body.status-page .list-group .list-group-item p, body.status-page .list-group .list-group-item time {
margin-bottom: 0;
line-height: 1.3em; }
body.status-page .list-group .list-group-item time {
color: #6C7A89;
font-weight: 300;
font-size: 1.1em; }
body.status-page .list-group .list-group-item.active {
background-color: #F2F1EF; }
body.status-page .list-group .list-group-item.active h3 {
color: #22313F;
padding-top: 2px;
padding-bottom: 2px;
font-weight: 600;
font-size: 1.4em; }
body.status-page .list-group .list-group-item.active:hover {
color: inherit;
border-color: #ecf0f1; }
body.status-page .list-group.components {
margin-bottom: 30px; }
body.status-page .list-group.components p {
public/build/css/all.css
+102 -40
View File
@@ -4378,7 +4378,8 @@ body.dashboard .content {
margin-top: 0; }
body.status-page {
font-family: 'Lato';
font-family: 'Lato', 'Helevetic Neue', Arial, sans-serif;
background-color: #F0F3F4;
color: #333333;
font-size: 1.4em;
font-weight: 300; }
@@ -4416,19 +4417,105 @@ body.status-page {
background: #ff6f6f;
border-color: #ff3c3c;
color: #FFF; }
body.status-page .badge {
padding-top: 8px;
padding-bottom: 8px;
padding-left: 12px;
padding-right: 12px; }
body.status-page .badge.badge-incident-1 {
background-color: #E87E04; }
body.status-page .badge.badge-incident-2 {
background-color: #F7CA18; }
body.status-page .badge.badge-incident-3 {
background-color: #3498db; }
body.status-page .badge.badge-incident-4 {
background-color: #2ECC71; }
body.status-page .timeline .content-wrapper {
margin-top: 40px;
margin-bottom: 40px; }
body.status-page .timeline h3 {
margin-top: 30px;
margin-bottom: 40px;
font-size: 22px; }
body.status-page .timeline h3 small {
margin-left: 15px; }
body.status-page .timeline .moment {
width: 100%;
padding-bottom: 50px;
position: relative; }
body.status-page .timeline .moment.first:before {
height: 130%;
top: -20px; }
body.status-page .timeline .moment.first:after {
content: '';
position: absolute;
left: 23px;
top: -20px;
width: 7px;
height: 7px;
background: #ecf0f1;
border-radius: 50%; }
body.status-page .timeline .moment:before {
content: '';
position: absolute;
left: 26px;
top: 5px;
width: 2px;
height: 100%;
background: #7266BA; }
body.status-page .timeline .moment .icon {
background: #fff;
width: 35px;
height: 35px;
border-radius: 50%;
border: 1px solid #e8e8e8;
position: absolute;
left: 25px;
top: 14px; }
body.status-page .timeline .moment .icon .fa {
position: absolute; }
body.status-page .timeline .moment .icon .fa.fa-flag {
top: 10px;
left: 9px; }
body.status-page .timeline .moment .icon .fa.fa-warning {
top: 10px;
left: 9px; }
body.status-page .timeline .moment .icon .fa.fa-eye {
top: 10px;
left: 9px; }
body.status-page .timeline .moment .icon .fa.fa-check {
top: 10px;
left: 9px; }
body.status-page .timeline .moment .icon.status-1 {
color: #FF8800; }
body.status-page .timeline .moment .icon.status-2 {
color: #F7CA18; }
body.status-page .timeline .moment .icon.status-3 {
color: #3498db; }
body.status-page .timeline .moment .icon.status-4 {
color: #2ECC71; }
body.status-page .timeline .moment.last:before {
background: #fff; }
body.status-page .timeline .moment .panel {
margin: 0;
border-radius: 2px; }
body.status-page .timeline .moment .panel-body {
border-top: 1px solid #eee; }
body.status-page .timeline .moment .panel-message {
border: 1px solid #e8e8e8; }
body.status-page .timeline .moment .panel-message .date {
color: #c7c7c7; }
body.status-page .timeline .moment .panel-message:before {
position: absolute;
top: 16px;
left: 1px;
display: inline-block;
border-top: 15px solid transparent;
border-left: 0 solid #e8e8e8;
border-right: 15px solid #e8e8e8;
border-bottom: 15px solid transparent;
content: " "; }
body.status-page .timeline .moment .panel-message:after {
position: absolute;
top: 17px;
left: 2px;
display: inline-block;
border-top: 14px solid transparent;
border-left: 0 solid #fff;
border-right: 14px solid #fff;
border-bottom: 14px solid transparent;
content: " "; }
@media (max-width: 767px) {
body.status-page .timeline .moment .content {
width: 100%; }
}
body.status-page .list-group {
margin-bottom: 20px;
padding-left: 0;
@@ -4438,38 +4525,13 @@ body.status-page {
background-color: #ffffff;
border: 1px solid #ecf0f1;
font-size: 1.1em; }
body.status-page .list-group .list-group-item span.badge {
position: absolute;
top: 0;
right: 0;
border-radius: 0;
display: block; }
body.status-page .list-group .list-group-item i.glyphicon {
font-size: 1.4em;
color: rgba(255, 255, 255, 0.9); }
body.status-page .list-group .list-group-item h1, body.status-page .list-group .list-group-item h2, body.status-page .list-group .list-group-item h3, body.status-page .list-group .list-group-item h4 {
margin-bottom: 2px; }
body.status-page .list-group .list-group-item h4 {
margin-bottom: 2px;
font-weight: 400;
max-width: 90%; }
body.status-page .list-group .list-group-item p, body.status-page .list-group .list-group-item time {
margin-bottom: 0;
line-height: 1.3em; }
body.status-page .list-group .list-group-item time {
color: #6C7A89;
font-weight: 300;
font-size: 1.1em; }
body.status-page .list-group .list-group-item.active {
background-color: #F2F1EF; }
body.status-page .list-group .list-group-item.active h3 {
color: #22313F;
padding-top: 2px;
padding-bottom: 2px;
font-weight: 600;
font-size: 1.4em; }
body.status-page .list-group .list-group-item.active:hover {
color: inherit;
border-color: #ecf0f1; }
body.status-page .list-group.components {
margin-bottom: 30px; }
body.status-page .list-group.components p {
public/build/js/all-d8f5640f.js → public/build/js/all-5a1e1732.js
+4 -4
View File
File diff suppressed because one or more lines are too long
public/build/js/all.js
+4 -4
View File
File diff suppressed because one or more lines are too long
public/build/rev-manifest.json
+2 -2
View File
@@ -1,4 +1,4 @@
{
"css/all.css": "css/all-cd88aa4c.css",
"js/all.js": "js/all-d8f5640f.js"
"css/all.css": "css/all-1e73d07b.css",
"js/all.js": "js/all-5a1e1732.js"
}