Drop inline css

tvdijen · Feb 14, 2024 · 0878631 · 0878631
1 parent df52bea
commit 0878631
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 36 deletions.
diff --git a/public/assets/css/monitor.css b/public/assets/css/monitor.css
@@ -1,22 +1,46 @@
 .pure-table {
-  font-size: 8pt;
-  width: 100%;
-  text-indent: 6px;
+ font-size: 8pt;
+ width: 100%;
+ text-indent: 6px;
 }
 
 .pure-table thead {
-  border-bottom: 1px solid lightgrey;
-  background-color: transparent;
+ border-bottom: 1px solid lightgrey;
+ background-color: transparent;
 }
 
 .pure-table thead tr th {
-  font-weight: bold;
+ font-weight: bold;
 }
 
 .pure-table thead tr:first-child {
- height: 25px;
- vertical-align: middle;
- background: linear-gradient(141deg, rgb(184 0 44) 0%, rgb(219 1 0) 51%, rgb(232 65 12) 75%) !important;
- font-weight: bold;
- color: rgb(248 248 248);
+ height: 25px;
+ vertical-align: middle;
+ background: linear-gradient(141deg, rgb(184 0 44) 0%, rgb(219 1 0) 51%, rgb(232 65 12) 75%) !important;
+ font-weight: bold;
+ color: rgb(248 248 248);
+}
+
+.state {
+ width: 10%;
+}
+
+.category {
+ width: 20%;
+}
+
+.subject {
+ width: 40%;
+}
+
+.health-green {
+ color: green;
+}
+
+.health-red {
+ color: red;
+}
+
+.health-yellow {
+ color: yellow;
 }
diff --git a/templates/monitor.twig b/templates/monitor.twig
@@ -12,17 +12,17 @@
  <th colspan="4">Required modules</th>
  </tr>
  <tr>
- <th style="width: 10%;">State</th>
- <th style="width: 20%;">Category</th>
- <th style="width: 40%;">Subject</th>
+ <th class="state">State</th>
+ <th class="category">Category</th>
+ <th class="subject">Subject</th>
  <th>Summary</th>
  </tr>
  </thead>
  <tbody>
 {% for key, check in modules %}
 {% set health = check.state %}
  <tr>
- <td style="color:{{ healthInfo[health][1] }};">{{ healthInfo[health][0] }}</td>
+ <td class="health-{{ healthInfo[health][1] }};">{{ healthInfo[health][0] }}</td>
  <td>{{ check.category }}</td>
  <td>{{ check.subject }}</td>
  <td>{{ check.message }}</td>
@@ -39,17 +39,17 @@
  <th colspan="4">Global configuration</th>
  </tr>
  <tr>
- <th style="width:10%;">State</th>
- <th style="width:20%;">Category</th>
- <th style="width:40%;">Subject</th>
+ <th class="state">State</th>
+ <th class="category">Category</th>
+ <th class="subject">Subject</th>
  <th>Summary</th>
  </tr>
  </thead>
  <tbody>
 {% for key, check in configuration %}
 {% set health = check.state %}
  <tr>
- <td style="color:{{ healthInfo[health][1] }};">{{ healthInfo[health][0] }}</td>
+ <td class="health-{{ healthInfo[health][1] }};">{{ healthInfo[health][0] }}</td>
  <td>{{ check.category }}</td>
  <td>{{ check.subject }}</td>
  <td>{{ check.message }}</td>
@@ -66,17 +66,17 @@
  <th colspan="4">Session store</th>
  </tr>
  <tr>
- <th style="width:10%;">State</th>
- <th style="width:20%;">Category</th>
- <th style="width:40%;">Subject</th>
+ <th class="state">State</th>
+ <th class="category">Category</th>
+ <th class="subject">Subject</th>
  <th>Summary</th>
  </tr>
  </thead>
  <tbody>
 {% for key, check in store %}
 {% set health = check.state %}
  <tr>
- <td style="color:{{ healthInfo[health][1] }};">{{ healthInfo[health][0] }}</td>
+ <td class="health-{{ healthInfo[health][1] }};">{{ healthInfo[health][0] }}</td>
  <td>{{ check.category }}</td>
  <td>{{ check.subject }}</td>
  <td>{{ check.message }}</td>
@@ -95,9 +95,9 @@
  </tr>
 {% if loop.index == 1 %}
  <tr>
- <th style="width:10%;">State</th>
- <th style="width:20%;">Category</th>
- <th style="width:40%;">Subject</th>
+ <th class="state">State</th>
+ <th class="category">Category</th>
+ <th class="subject">Subject</th>
  <th>Summary</th>
  </tr>
 {% endif %}
@@ -106,9 +106,9 @@
 {% for key, check in authsource %}
 {% set health = check.state %}
  <tr>
- <td style="width:10%; color:{{ healthInfo[health][1] }};">{{ healthInfo[health][0] }}</td>
- <td style="width:20%;">{{ check.category }}</td>
- <td style="width:40%;">{{ check.subject }}</td>
+ <td class="state" class="health-{{ healthInfo[health][1] }};">{{ healthInfo[health][0] }}</td>
+ <td class="category">{{ check.category }}</td>
+ <td class="subject">{{ check.subject }}</td>
  <td>{{ check.message }}</td>
  </tr>
 {% endfor %}
@@ -126,9 +126,9 @@
  </tr>
 {% if loop.index == 1 %}
  <tr>
- <th style="width:10%;">State</th>
- <th style="width:20%;">Category</th>
- <th style="width:40%;">Subject</th>
+ <th class="state">State</th>
+ <th class="category">Category</th>
+ <th class="subject">Subject</th>
  <th>Summary</th>
  </tr>
 {% endif %}
@@ -137,9 +137,9 @@
 {% for entityid, check in entity %}
 {% set health = check.state %}
  <tr>
- <td style="width:10%; color:{{ healthInfo[health][1] }}">{{ healthInfo[health][0] }}</td>
- <td style="width:20%;">{{ check.category }}</td>
- <td style="width:40%;">{{ check.subject }}</td>
+ <td class="state" class="health-{{ healthInfo[health][1] }}">{{ healthInfo[health][0] }}</td>
+ <td class="category">{{ check.category }}</td>
+ <td class="subject">{{ check.subject }}</td>
  <td>{{ check.message }}</td>
  </tr>
 {% endfor %}
@@ -148,5 +148,5 @@
 {% endfor %}
 
  <br />
- <span>Overall status: <span style="color: {{ healthInfo[overall][1] }};">{{ healthInfo[overall][0] }}</span></span>
+ <span>Overall status: <span class="health-{ healthInfo[overall][1] }};">{{ healthInfo[overall][0] }}</span></span>
 {% endblock %}