Tabs at the top of the event-box on the issue page

This commit is contained in:
Klaas van Schelven
2023-11-16 17:14:56 +01:00
parent d07be57b54
commit ffdf9ad696
2 changed files with 92 additions and 4 deletions
+15 -4
View File
@@ -8,14 +8,23 @@
<div><span class="font-bold">ingest.management.commands.raise_exception</span> in <span class="font-bold">raise_exception</span></div>
</div>
<div class="m-4 border-2">
<div class="p-4 bg-slate-200 border-b-2">Event 55 out of 55 which occured at <span class="font-bold">{{ event.timestamp }}</span> (most recent)</div>
<div class="ml-4 mb-4 mr-4 border-2">
<div class="flex bg-slate-50 border-b-2">
<a href="/issues/1/"><div class="p-4 text-cyan-500 font-bold border-cyan-500 border-b-4 hover:bg-slate-200">Stacktrace</div></a>
<a href="TODO"><div class="p-4 text-slate-500 font-bold border-slate-400 hover:bg-slate-200 hover:border-b-4">Event&nbsp;Details</div></a>
<a href="TODO"><div class="p-4 text-slate-500 font-bold border-slate-400 hover:bg-slate-200 hover:border-b-4">Event&nbsp;List</div></a>
<a href="TODO"><div class="p-4 text-slate-500 font-bold border-slate-400 hover:bg-slate-200 hover:border-b-4">Grouping</div></a>
</div>
<div class="p-4 bg-slate-50">
{# <div class="font-bold">Stacktrace:</div> I think this is obvious?#}
{% for exception in exceptions %}
<h1 class="text-2xl mt-4">{{ exception.type }}</h1>
{# option: make multi-exception stacktraces more clear <div class="border-l-4 border-cyan-500 pl-4"> }#}
<h1 class="text-2xl {% if forloop.counter0 > 0 %}mt-4{% endif %}">{{ exception.type }}</h1> {# potentially: hide this whole block if there is only a single exception #}
<div class="text-lg">{{ exception.value }}</div>
{% for frame in exception.stacktrace.frames %}
@@ -51,6 +60,7 @@
</div>
{% endfor %}
{# </div> #} {# per-exception div in the multi-exception case #}
{% if not forloop.last %}
<div class="italic">During handling of the above exception, another exception occurred:</div>
@@ -116,5 +126,6 @@
Issue grouper: <span class="font-mono whitespace-pre">"{{ issue_grouper }}"</span>
</div> {# the inner issue-block #}
</div>
<div class="p-4 bg-slate-200 border-b-2">Event 55 out of 55 which occured at <span class="font-bold">{{ event.timestamp }}</span> (most recent)</div>
</div> {# the border #}
{% endblock %}
+77
View File
@@ -836,6 +836,10 @@ select {
margin-right: 0.5rem;
}
.mb-2 {
margin-bottom: 0.5rem;
}
.block {
display: block;
}
@@ -880,6 +884,10 @@ select {
width: 100%;
}
.w-auto {
width: auto;
}
.border-collapse {
border-collapse: collapse;
}
@@ -920,6 +928,18 @@ select {
border-bottom-width: 2px;
}
.border-b-4 {
border-bottom-width: 4px;
}
.border-l-2 {
border-left-width: 2px;
}
.border-l-4 {
border-left-width: 4px;
}
.border-slate-300 {
--tw-border-opacity: 1;
border-color: rgb(203 213 225 / var(--tw-border-opacity));
@@ -930,6 +950,21 @@ select {
border-color: rgb(100 116 139 / var(--tw-border-opacity));
}
.border-cyan-300 {
--tw-border-opacity: 1;
border-color: rgb(103 232 249 / var(--tw-border-opacity));
}
.border-cyan-500 {
--tw-border-opacity: 1;
border-color: rgb(6 182 212 / var(--tw-border-opacity));
}
.border-slate-400 {
--tw-border-opacity: 1;
border-color: rgb(148 163 184 / var(--tw-border-opacity));
}
.bg-gray-50 {
--tw-bg-opacity: 1;
background-color: rgb(249 250 251 / var(--tw-bg-opacity));
@@ -1014,6 +1049,14 @@ select {
padding-top: 0.25rem;
}
.pb-6 {
padding-bottom: 1.5rem;
}
.pb-5 {
padding-bottom: 1.25rem;
}
.text-center {
text-align: center;
}
@@ -1082,6 +1125,16 @@ select {
color: rgb(30 64 175 / var(--tw-text-opacity));
}
.text-cyan-500 {
--tw-text-opacity: 1;
color: rgb(6 182 212 / var(--tw-text-opacity));
}
.text-slate-500 {
--tw-text-opacity: 1;
color: rgb(100 116 139 / var(--tw-text-opacity));
}
.filter {
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
@@ -1090,11 +1143,35 @@ select {
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.hover\:border-b-4:hover {
border-bottom-width: 4px;
}
.hover\:bg-slate-400:hover {
--tw-bg-opacity: 1;
background-color: rgb(148 163 184 / var(--tw-bg-opacity));
}
.hover\:bg-slate-100:hover {
--tw-bg-opacity: 1;
background-color: rgb(241 245 249 / var(--tw-bg-opacity));
}
.hover\:bg-slate-200:hover {
--tw-bg-opacity: 1;
background-color: rgb(226 232 240 / var(--tw-bg-opacity));
}
.hover\:bg-cyan-50:hover {
--tw-bg-opacity: 1;
background-color: rgb(236 254 255 / var(--tw-bg-opacity));
}
.hover\:bg-cyan-100:hover {
--tw-bg-opacity: 1;
background-color: rgb(207 250 254 / var(--tw-bg-opacity));
}
@media (min-width: 1280px) {
.xl\:ml-4 {
margin-left: 1rem;