mirror of
https://github.com/wekan/wekan.git
synced 2026-11-08 03:22:32 -05:00
Lauri Ojansivu
2b8a33022b
The page listed up to 200 methods and publications on 11 pages. Above the
table there is now one bar per area - Settings, Login, People, Boards,
Cards, Lists, Notifications, Attachments, Problems and the rest - its length
the area's calls against the busiest area's, its red end the share that
failed, with the calls, the average duration and the errors beside it.
Clicking an area shows only its operations in the table; clicking it again
shows all.
models/lib/instrumentationAreas.js groups an operation by the first area
whose pattern matches its name, and weights an area's average duration by
completed calls. tests/instrumentationAreas.test.cjs checks the grouping
against all of WeKan's 614 methods and publications - "Other" holds three -
and the summary arithmetic. The labels are existing translation keys, apart
from the new instrumentation-other ("Other"), translated into every
language. The Finnish "cards" heading read "Korttia" (the form after a
number) in every place it is used as a heading or label; it is "Kortit".
The bars are HTML and CSS, one grid with subgrid rows so names, bars and
numbers line up; the viewport matrix checks the page at every device size.
Thanks to xet7 !
130 lines
3.7 KiB
CSS
130 lines
3.7 KiB
CSS
/* Admin Panel → Problems: the few styles that are NOT part of the shared table
|
|
page. Everything the reports have in common - title, status row, search +
|
|
pagination controls, and the table itself - now lives in tablePage.css and is
|
|
defined once. See docs/Features/General/Table-Page.md. */
|
|
|
|
/* The menu separator and the "Reports" group title are styled with the menu itself
|
|
(settingBody.css): the shared left menu renders `li.left-menu-separator` and
|
|
`li.left-menu-heading`, not the `.admin-reports-separator` this file used to
|
|
target - so the rule that lived here, twice, never applied to anything. */
|
|
|
|
/* Admin Panel → Problems → CPU usage: the live figure between the page title and
|
|
the search box. The table underneath is a history of past high-CPU periods, so
|
|
this line is the only place the page says what the CPU is doing right now. */
|
|
.admin-cpu-current {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: baseline;
|
|
gap: 8px;
|
|
margin-bottom: 12px;
|
|
padding: 8px 10px;
|
|
border: 1px solid var(--theme-accent, #01628c);
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.admin-cpu-label {
|
|
font-weight: 700;
|
|
}
|
|
|
|
.admin-cpu-percent {
|
|
font-size: 1.4em;
|
|
font-weight: 700;
|
|
color: var(--theme-accent, #01628c);
|
|
}
|
|
|
|
/* Sustained high CPU: warn without inventing a second colour system. */
|
|
.admin-cpu-current.admin-cpu-high {
|
|
border-color: #b04632;
|
|
}
|
|
|
|
.admin-cpu-current.admin-cpu-high .admin-cpu-percent {
|
|
color: #b04632;
|
|
}
|
|
|
|
/* Problems / Instrumentation: one bar per area (adminProblems.jade). The rows
|
|
share one grid, so names, bars and numbers line up; each row is a button that
|
|
filters the table below, reset from the global button look (forms.css pads
|
|
every button 35px a side and paints it the theme colour). */
|
|
.instrumentation-areas {
|
|
display: grid;
|
|
grid-template-columns: minmax(6em, max-content) minmax(60px, 1fr) repeat(3, max-content);
|
|
gap: 2px 12px;
|
|
margin-bottom: 16px;
|
|
}
|
|
.instrumentation-area-head,
|
|
.instrumentation-area {
|
|
display: grid;
|
|
grid-column: 1 / -1;
|
|
grid-template-columns: subgrid;
|
|
align-items: center;
|
|
}
|
|
.instrumentation-area-head {
|
|
font-weight: 700;
|
|
font-size: 0.85em;
|
|
opacity: 0.7;
|
|
}
|
|
.setting-content .content-body .main-body button.instrumentation-area,
|
|
button.instrumentation-area {
|
|
width: 100%;
|
|
min-height: 0;
|
|
height: auto;
|
|
margin: 0;
|
|
padding: 4px 6px;
|
|
border: 1px solid transparent;
|
|
border-radius: 4px;
|
|
background: transparent;
|
|
color: inherit;
|
|
font: inherit;
|
|
font-weight: normal;
|
|
text-align: start;
|
|
cursor: pointer;
|
|
}
|
|
button.instrumentation-area:hover,
|
|
button.instrumentation-area:focus-visible {
|
|
background: rgba(0, 0, 0, 0.06);
|
|
}
|
|
button.instrumentation-area.is-active {
|
|
border-color: var(--theme-accent, #01628c);
|
|
background: rgba(0, 0, 0, 0.06);
|
|
}
|
|
.instrumentation-area-name {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.instrumentation-area-bar {
|
|
height: 14px;
|
|
border-radius: 3px;
|
|
background: rgba(0, 0, 0, 0.08);
|
|
overflow: hidden;
|
|
}
|
|
.instrumentation-area-fill {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
height: 100%;
|
|
background: var(--theme-accent-fill, var(--theme-accent, #01628c));
|
|
}
|
|
.instrumentation-area-errors {
|
|
height: 100%;
|
|
background: #b04632;
|
|
}
|
|
.instrumentation-area-num {
|
|
text-align: end;
|
|
white-space: nowrap;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.instrumentation-area-num.has-errors {
|
|
color: #b04632;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.file-status-audit { margin-bottom: 1rem; }
|
|
.file-status-audit-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
|
|
.file-status-audit-actions button { margin: 0; min-height: 34px; }
|
|
.file-status-audit pre { white-space: pre-wrap; overflow-wrap: anywhere; }
|
|
|
|
.rule-email-recovery-identifiers {
|
|
overflow-wrap: anywhere;
|
|
max-width: 32rem;
|
|
}
|