Refactored table CSS, bettered layout in problems
This commit is contained in:
Magnus Åhall
parent
1215b13d47
commit
2c5b434fd2
15 changed files with 379 additions and 146 deletions
|
|
@ -28,105 +28,120 @@
|
|||
</div>
|
||||
|
||||
<div class="display-list hidden">
|
||||
<div id="problems-list">
|
||||
<div style="grid-column: 1/-1;"><h2>Unacknowledged</h2></div>
|
||||
<div id="problems-list" class="table">
|
||||
<div class="row"><h2>Unacknowledged</h2></div>
|
||||
|
||||
<div class="header">OK</div>
|
||||
<div class="header">Trigger</div>
|
||||
<div class="header">Area</div>
|
||||
<div class="header">Section</div>
|
||||
<div class="header">Since</div>
|
||||
<div class="header">Until</div>
|
||||
<div class="header"></div>
|
||||
|
||||
{{ range .Data.Problems }}
|
||||
{{ if .Acknowledged }}
|
||||
{{ continue }}
|
||||
{{ end }}
|
||||
<div class="line"></div>
|
||||
|
||||
{{/* NODATA datapoints */}}
|
||||
{{ if eq .TriggerID -1 }}
|
||||
<div class="{{ if .Acknowledged }}acked hidden{{ end }}">{{ if .IsArchived }}<img src="/images/{{ $version }}/{{ $theme }}/ok.svg">{{ else }}<img src="/images/{{ $version }}/{{ $theme }}/warning.svg">{{ end }}</div>
|
||||
<div class="trigger">{{ .TriggerName }}</div>
|
||||
<div class="area">{{ .AreaName }}</div>
|
||||
<div class="section">{{ .SectionName }}</div>
|
||||
<div class="start"></div>
|
||||
<div class="acknowledge">
|
||||
<div class="start">{{ format_time .Start }}</div>
|
||||
<div class="end"></div>
|
||||
<div class="icons">
|
||||
<img class="info" src="/images/{{ $version }}/{{ $theme }}/info-outline.svg">
|
||||
<img src="/images/{{ $version }}/{{ $theme }}/acknowledge.svg">
|
||||
<img class="acknowledge" src="/images/{{ $version }}/{{ $theme }}/acknowledge.svg">
|
||||
</div>
|
||||
{{ else }}
|
||||
<div class="{{ if .Acknowledged }}acked hidden{{ end }}">{{ if .IsArchived }}<img src="/images/{{ $version }}/{{ $theme }}/ok.svg">{{ else }}<img src="/images/{{ $version }}/{{ $theme }}/warning.svg">{{ end }}</div>
|
||||
<div class="trigger"><a href="/trigger/edit/{{ .TriggerID }}">{{ .TriggerName }}</a></div>
|
||||
<div class="area">{{ .AreaName }}</div>
|
||||
<div class="section">{{ .SectionName }}</div>
|
||||
<div class="start">{{ format_time .Start }}</div>
|
||||
<div class="acknowledge">
|
||||
<div class="end">{{ if not .End.IsZero }}{{ format_time .End }}{{ else }}-{{ end }}</div>
|
||||
<div class="icons">
|
||||
{{ if .FormattedValues }}
|
||||
<img class="info" src="/images/{{ $version }}/{{ $theme }}/info-filled.svg" title="{{ .FormattedValues }}">
|
||||
{{ else }}
|
||||
<img class="info" src="/images/{{ $version }}/{{ $theme }}/info-outline.svg">
|
||||
{{ end }}
|
||||
|
||||
<a href="/problem/acknowledge/{{ .ID }}">
|
||||
<img src="/images/{{ $version }}/{{ $theme }}/acknowledge-filled.svg">
|
||||
</a>
|
||||
<img class="acknowledge" onclick="location.href = '/problem/acknowledge/{{ .ID }}'" src="/images/{{ $version }}/{{ $theme }}/acknowledge-filled.svg">
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
<div id="acknowledged-list" class="hidden">
|
||||
<div style="grid-column: 1/-1;"><h2>Acknowledged</h2></div>
|
||||
<div id="acknowledged-list" class="table hidden">
|
||||
<div class="row"><h2>Acknowledged</h2></div>
|
||||
|
||||
<div class="header">OK</div>
|
||||
<div class="header">Trigger</div>
|
||||
<div class="header">Area</div>
|
||||
<div class="header">Section</div>
|
||||
<div class="header">Since</div>
|
||||
<div class="header">Until</div>
|
||||
<div class="header"></div>
|
||||
|
||||
{{ range .Data.Problems }}
|
||||
{{ if not .Acknowledged }}
|
||||
{{ continue }}
|
||||
{{ end }}
|
||||
<div class="line"></div>
|
||||
<div class="{{ if .Acknowledged }}acked hidden{{ end }}">{{ if .IsArchived }}<img src="/images/{{ $version }}/{{ $theme }}/ok.svg">{{ else }}<img src="/images/{{ $version }}/{{ $theme }}/warning.svg">{{ end }}</div>
|
||||
<div class="trigger"><a href="/trigger/edit/{{ .TriggerID }}">{{ .TriggerName }}</a></div>
|
||||
<div class="area">{{ .AreaName }}</div>
|
||||
<div class="section">{{ .SectionName }}</div>
|
||||
<div class="start">{{ format_time .Start }}</div>
|
||||
<div class="acknowledge">
|
||||
<div class="end">{{ if not .End.IsZero }}{{ format_time .End }}{{ else }}-{{ end }}</div>
|
||||
<div class="icons">
|
||||
{{ if .FormattedValues }}
|
||||
<img class="info" src="/images/{{ $version }}/{{ $theme }}/info-filled.svg" title="{{ .FormattedValues }}">
|
||||
{{ else }}
|
||||
<img class="info" src="/images/{{ $version }}/{{ $theme }}/info-outline.svg">
|
||||
{{ end }}
|
||||
<a href="/problem/unacknowledge/{{ .ID }}"><img src="/images/{{ $version }}/{{ $theme }}/acknowledge-outline.svg"></a>
|
||||
<img class="acknowledge" onclick="location.href = '/problem/unacknowledge/{{ .ID }}'" src="/images/{{ $version }}/{{ $theme }}/acknowledge-outline.svg">
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="display-areas hidden">
|
||||
<div id="areas">
|
||||
<div id="area-grouped">
|
||||
{{ range $areaName, $sections := .Data.ProblemsGrouped }}
|
||||
<div class="area">
|
||||
<div class="name">{{ $areaName }}</div>
|
||||
<div class="area table">
|
||||
<div class="row"><h2>{{ $areaName }}</h2></div>
|
||||
|
||||
{{ range $sectionName, $problems := $sections }}
|
||||
<div class="section problems">
|
||||
<div class="name">{{ $sectionName }}</div>
|
||||
<div class="section row" style="margin-top: 16px; font-weight: bold;">{{ $sectionName }}</div>
|
||||
|
||||
<div class="header">OK</div>
|
||||
<div class="header">Trigger</div>
|
||||
<div class="header">Since</div>
|
||||
<div class="header">Until</div>
|
||||
<div class="header"></div>
|
||||
<div class="line"></div>
|
||||
|
||||
{{ range $problems }}
|
||||
<div class="{{ if .Acknowledged }}acked hidden{{ end }}">{{ if .IsArchived }}<span class="ok">Archived</span>{{ else }}<span class="error">Current</span>{{ end }}</div>
|
||||
<div class="{{ if .Acknowledged }}acked hidden{{ end }}">{{ if .IsArchived }}<img src="/images/{{ $version }}/{{ $theme }}/ok.svg">{{ else }}<img src="/images/{{ $version }}/{{ $theme }}/warning.svg">{{ end }}</div>
|
||||
|
||||
<div class="{{ if .Acknowledged }}acked hidden{{ end }} trigger">{{ .TriggerName }}</div>
|
||||
<div class="{{ if .Acknowledged }}acked hidden{{ end }} trigger">{{ .TriggerName }}</div>
|
||||
|
||||
{{ if eq (.Start | html) "0001-01-01 00:00:00 +0000 UTC" }}
|
||||
<div class="{{ if .Acknowledged }}acked hidden{{ end }} since"></div>
|
||||
{{ else }}
|
||||
<div class="{{ if .Acknowledged }}acked hidden{{ end }} since">{{ format_time .Start }}</div>
|
||||
{{ end }}
|
||||
<div class="{{ if .Acknowledged }}acked hidden{{ end }} since">{{ if not .Start.IsZero }}{{ format_time .Start }}{{ else }}-{{ end }}</div>
|
||||
<div class="{{ if .Acknowledged }}acked hidden{{ end }} until">{{ if not .End.IsZero }}{{ format_time .End }}{{ else }}-{{ end }}</div>
|
||||
|
||||
{{ if .FormattedValues }}
|
||||
<div class="{{ if .Acknowledged }}acked hidden{{ end }}"><img src="/images/{{ $version }}/{{ $theme }}/info-filled.svg" title="{{ .FormattedValues }}"></div>
|
||||
{{ else }}
|
||||
<div class="{{ if .Acknowledged }}acked hidden{{ end }}"><img src="/images/{{ $version }}/{{ $theme }}/info-outline.svg"></div>
|
||||
{{ end }}
|
||||
{{ if .FormattedValues }}
|
||||
<div class="{{ if .Acknowledged }}acked hidden{{ end }}"><img src="/images/{{ $version }}/{{ $theme }}/info-filled.svg" title="{{ .FormattedValues }}"></div>
|
||||
{{ else }}
|
||||
<div class="{{ if .Acknowledged }}acked hidden{{ end }}"><img src="/images/{{ $version }}/{{ $theme }}/info-outline.svg"></div>
|
||||
{{ end }}
|
||||
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ end }}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue