ge-aerospace/shopdb-flask
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Dashboard fixes: staleness, toner, layout

Browse Source
This commit is contained in:
Cameron Proudlock
2026-08-11 14:45:29 -04:00
parent 3b37603691
commit 9ae9879b90
7 changed files with 188 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

122
frontend/src/components/DashboardCards.vue
View File

@@ -7,6 +7,7 @@
:class="'dc-' + (card.severity || 'info')"
>
<header class="dc-head">
<span class="dc-dot" aria-hidden="true"></span>
<h3 class="dc-title">{{ card.title }}</h3>
<span v-if="card.render !== 'metric'" class="dc-count">{{ countOf(card) }}</span>
</header>
@@ -14,20 +15,23 @@
<!-- metric: the count IS the story -->
<p v-if="card.render === 'metric'" class="dc-metric">{{ metricValue(card) }}</p>
<!-- exceptions / list: things that need a person, each linking to itself -->
<!-- exceptions / list: one line per thing, each linking to itself -->
<ul v-else class="dc-rows">
<li v-for="(row, index) in cardRows(card)" :key="index" class="dc-row">
<li v-for="(row, index) in visibleRows(card)" :key="index" class="dc-row">
<router-link v-if="row.link" :to="row.link" class="dc-row-title">
{{ row.title }}
</router-link>
<span v-else class="dc-row-title dc-row-nolink">{{ row.title }}</span>
<span v-if="row.detail" class="dc-row-detail">{{ row.detail }}</span>
<span v-for="(meta, m) in row.meta" :key="m" class="dc-row-meta"
:class="{ mono: meta.mono }">{{ meta.text }}</span>
<span v-if="row.meta.length" class="dc-row-meta">
{{ row.meta.map((m) => m.text).join(' / ') }}
</span>
</li>
</ul>
<p v-if="!hasRows(card)" class="dc-clear">Nothing to action.</p>
<p v-if="overflowCount(card)" class="dc-more">
and {{ overflowCount(card) }} more
</p>
</section>
</div>
</template>
@@ -45,7 +49,7 @@ import { ref, computed, onMounted } from 'vue'
import api from '../api'
import { useAuthStore } from '@/stores/auth'
import {
toApiPath, cardRows, metricValue, cardVisible, sortCards,
toApiPath, visibleRows, overflowCount, metricValue, cardVisible, sortCards,
permittedCards, renderableCards, rows as cardData,
} from './dashboardCards'
@@ -54,10 +58,6 @@ const cards = ref([])
const visibleCards = computed(() => sortCards(cards.value.filter(cardVisible)))
function hasRows(card) {
return card.render === 'metric' ? metricValue(card) > 0 : cardData(card).length > 0
}
function countOf(card) {
return cardData(card).length
}
@@ -93,35 +93,97 @@ defineExpose({ load })
<style scoped>
.dc-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
gap: 1rem;
margin-bottom: 1.5rem;
margin-bottom: 1.75rem;
align-items: start;
}
.dc-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-left-width: 4px;
border-radius: 8px;
padding: 0.9rem 1rem;
padding: 0.85rem 1rem 0.9rem;
}
/* Severity is carried by the left edge only. A fully coloured card reads as an
alert even when it holds one minor row, and six of them read as a crisis. */
.dc-critical { border-left-color: var(--danger); }
.dc-warning { border-left-color: var(--warning); }
.dc-info { border-left-color: var(--primary); }
.dc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.dc-title { margin: 0; font-size: 0.95rem; font-weight: 600; color: var(--text); }
.dc-count { font-size: 0.8rem; color: var(--text-light); }
.dc-metric { margin: 0.4rem 0 0; font-size: 2rem; font-weight: 600; color: var(--text); }
/* Severity is a small dot beside the title, not a coloured card or a thick
bar. A card painted by severity reads as an alert even when it holds one
minor row, and six of them read as a crisis - which is how a board stops
being read at all. */
.dc-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; flex: none; }
.dc-critical .dc-dot { background: var(--danger); }
.dc-warning .dc-dot { background: var(--warning); }
.dc-info .dc-dot { background: var(--primary); }
.dc-rows { list-style: none; margin: 0.6rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.dc-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; font-size: 0.85rem; }
.dc-row-title { font-weight: 600; color: var(--link); text-decoration: none; }
.dc-head {
display: flex;
align-items: center;
gap: 0.5rem;
padding-bottom: 0.55rem;
border-bottom: 1px solid var(--border);
}
.dc-title {
margin: 0;
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--text-light);
flex: 1;
}
.dc-count {
font-size: 0.8rem;
font-weight: 600;
color: var(--text);
font-variant-numeric: tabular-nums;
}
.dc-metric { margin: 0.5rem 0 0; font-size: 2rem; font-weight: 600; color: var(--text); }
/* One row per line, not a wrapped paragraph. Each row is title / detail /
meta on a single line that truncates, so ten rows are ten scannable lines
rather than a block of text that has to be read. */
.dc-rows { list-style: none; margin: 0; padding: 0; }
.dc-row {
display: flex;
align-items: baseline;
gap: 0.5rem;
padding: 0.4rem 0;
border-bottom: 1px solid var(--border);
font-size: 0.85rem;
min-width: 0;
}
.dc-row:last-child { border-bottom: none; }
.dc-row-title {
font-weight: 600;
color: var(--link);
text-decoration: none;
flex: none;
max-width: 45%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.dc-row-title:hover { text-decoration: underline; }
.dc-row-nolink { color: var(--text); }
.dc-row-detail { color: var(--text); }
.dc-row-meta { color: var(--text-light); }
.dc-row-meta.mono { font-family: ui-monospace, Menlo, Consolas, monospace; }
.dc-clear { margin: 0.5rem 0 0; font-size: 0.85rem; color: var(--text-light); }
.dc-row-detail {
color: var(--text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Meta is pushed right and allowed to disappear first: it is the least
important part of the line, and letting it wrap is what made rows look
like paragraphs. */
.dc-row-meta {
margin-left: auto;
padding-left: 0.5rem;
color: var(--text-light);
font-size: 0.8rem;
white-space: nowrap;
flex: none;
}
.dc-more {
margin: 0.5rem 0 0;
font-size: 0.8rem;
color: var(--text-light);
}
</style>

14
frontend/src/components/dashboardCards.js
View File

@@ -75,6 +75,20 @@ export function mapLink(card, item) {
return missing ? null : href
}
// How many rows a card shows before collapsing the rest behind a count. A card
// listing forty PCs is a report someone has to read, not a board someone can
// scan - and it pushes every card below it off the screen. Five is enough to
// see the shape of the problem; the link goes to the full list.
export const MAXROWS = 5
export function visibleRows(card) {
return cardRows(card).slice(0, MAXROWS)
}
export function overflowCount(card) {
return Math.max(0, rows(card).length - MAXROWS)
}
export function cardRows(card) {
return rows(card).map((item) => ({
title: mapTitle(card, item),

19
frontend/src/components/dashboardCards.spec.js
View File

@@ -2,6 +2,7 @@ import { describe, it, expect } from 'vitest'
import {
toApiPath, rows, mapMeta, mapLink, cardRows, metricValue,
cardVisible, sortCards, permittedCards, renderableCards,
visibleRows, overflowCount,
} from './dashboardCards'
const failuresCard = {
@@ -77,6 +78,24 @@ describe('mapping a row', () => {
})
})
describe('long lists', () => {
const many = (n) => ({
render: 'exceptions',
map: { title: 'hostname' },
_data: Array.from({ length: n }, (_v, i) => ({ hostname: `PC${i}` })),
})
it('shows at most five rows so one card cannot bury the rest', () => {
expect(visibleRows(many(40))).toHaveLength(5)
expect(overflowCount(many(40))).toBe(35)
})
it('does not claim an overflow when everything fits', () => {
expect(visibleRows(many(3))).toHaveLength(3)
expect(overflowCount(many(3))).toBe(0)
})
})
describe('empty handling', () => {
it('hides a card with nothing to report by default', () => {
// The whole point: a card saying "nothing wrong" daily trains people to