Minor improvements

This commit is contained in:
TwinProduction 2021-02-20 18:08:00 -05:00
parent 7f0543ebd2
commit de31a7a62e
2 changed files with 46 additions and 16 deletions

View File

@ -6,6 +6,14 @@ import (
"github.com/TwinProduction/gatus/util" "github.com/TwinProduction/gatus/util"
) )
const (
// MaximumNumberOfResults is the maximum number of results that ServiceStatus.Results can have
MaximumNumberOfResults = 20
// MaximumNumberOfEvents is the maximum number of events that ServiceStatus.Events can have
MaximumNumberOfEvents = 50
)
// ServiceStatus contains the evaluation Results of a Service // ServiceStatus contains the evaluation Results of a Service
type ServiceStatus struct { type ServiceStatus struct {
// Name of the service // Name of the service
@ -64,14 +72,20 @@ func (ss *ServiceStatus) AddResult(result *Result) {
event.Type = EventUnhealthy event.Type = EventUnhealthy
} }
ss.Events = append(ss.Events, event) ss.Events = append(ss.Events, event)
if len(ss.Events) > 20 { if len(ss.Events) > MaximumNumberOfEvents {
ss.Events = ss.Events[1:] // Doing ss.Events[1:] would usually be sufficient, but in the case where for some reason, the slice has
// more than one extra element, we can get rid of all of them at once and thus returning the slice to a
// length of MaximumNumberOfEvents by using ss.Events[len(ss.Events)-MaximumNumberOfEvents:] instead
ss.Events = ss.Events[len(ss.Events)-MaximumNumberOfEvents:]
} }
} }
} }
ss.Results = append(ss.Results, result) ss.Results = append(ss.Results, result)
if len(ss.Results) > 20 { if len(ss.Results) > MaximumNumberOfResults {
ss.Results = ss.Results[1:] // Doing ss.Results[1:] would usually be sufficient, but in the case where for some reason, the slice has more
// than one extra element, we can get rid of all of them at once and thus returning the slice to a length of
// MaximumNumberOfResults by using ss.Results[len(ss.Results)-MaximumNumberOfResults:] instead
ss.Results = ss.Results[len(ss.Results)-MaximumNumberOfResults:]
} }
ss.Uptime.ProcessResult(result) ss.Uptime.ProcessResult(result)
} }

View File

@ -15,12 +15,12 @@
</div> </div>
<div> <div>
<div class='status-over-time flex flex-row'> <div class='status-over-time flex flex-row'>
<slot v-for="filler in maximumNumberOfResults - data.results.length" :key="filler"> <slot v-if="data.results.length < maximumNumberOfResults">
<span class="status rounded border border-dashed"> </span> <span v-for="filler in maximumNumberOfResults - data.results.length" :key="filler" class="status rounded border border-dashed"> </span>
</slot> </slot>
<slot v-for="result in data.results" :key="result"> <slot v-for="result in data.results" :key="result">
<span v-if="result.success" class="status rounded bg-success" @mouseenter="showTooltip(result, $event)" @mouseleave="showTooltip(null, $event)">&#10003;</span> <span v-if="result.success" class="status status-success rounded bg-success" @mouseenter="showTooltip(result, $event)" @mouseleave="showTooltip(null, $event)"></span>
<span v-else class="status rounded bg-red-600" @mouseenter="showTooltip(result, $event)" @mouseleave="showTooltip(null, $event)">X</span> <span v-else class="status status-failure rounded bg-red-600" @mouseenter="showTooltip(result, $event)" @mouseleave="showTooltip(null, $event)"></span>
</slot> </slot>
</div> </div>
</div> </div>
@ -110,6 +110,14 @@ export default {
border-style: solid; border-style: solid;
} }
.status-over-time {
overflow: auto;
}
.status-over-time > span:not(:first-child) {
margin-left: 2px;
}
.status { .status {
cursor: pointer; cursor: pointer;
transition: all 500ms ease-in-out; transition: all 500ms ease-in-out;
@ -127,14 +135,6 @@ export default {
color: black; color: black;
} }
.status-over-time {
overflow: auto;
}
.status-over-time > span:not(:first-child) {
margin-left: 2px;
}
.status-time-ago { .status-time-ago {
color: #6a737d; color: #6a737d;
opacity: 0.5; opacity: 0.5;
@ -144,4 +144,20 @@ export default {
.status-min-max-ms { .status-min-max-ms {
overflow-x: hidden; overflow-x: hidden;
} }
.status.status-success::after {
content: "✓";
}
.status.status-failure::after {
content: "X";
}
@media screen and (max-width: 450px) {
.status.status-success::after,
.status.status-failure::after {
content: " ";
white-space: pre;
}
}
</style> </style>