mirror of
https://github.com/turnstonelabs/turnstone.git
synced 2026-08-12 23:12:23 -06:00
ui: skills table — category first, risk column, remove variables
- Move category column before name - Remove variables column (rarely useful in table view) - Add dedicated RISK column with scan badge, unicode shape indicators (checkmark/triangle/diamond/warning), and multi-line tooltip showing composite score and flagged axes from scan report - Risk badge is keyboard-focusable (tabindex=0) with aria-label - Unscanned skills show em-dash placeholder at 40% opacity - Balanced grid: 100px 1.5fr 100px 120px - Risk + category hidden on mobile (<700px)
This commit is contained in:
committed by
Patrick Buckley
parent
88085c29ff
commit
da4025d338
@@ -688,13 +688,6 @@ function _renderGovSkills(items) {
|
||||
var html = "";
|
||||
for (var i = 0; i < items.length; i++) {
|
||||
var t = items[i];
|
||||
var vars = "";
|
||||
try {
|
||||
var vlist = JSON.parse(t.variables || "[]");
|
||||
vars = vlist.join(", ");
|
||||
} catch (e) {
|
||||
vars = t.variables;
|
||||
}
|
||||
var activationBadge = "";
|
||||
var activation = t.activation || "named";
|
||||
if (activation === "default") {
|
||||
@@ -715,7 +708,8 @@ function _renderGovSkills(items) {
|
||||
: "";
|
||||
var catBadge =
|
||||
'<span class="scope-badge">' + escapeHtml(t.category) + "</span>";
|
||||
var scanBadge = "";
|
||||
// Build risk column content with tooltip
|
||||
var riskCell = "";
|
||||
if (t.scan_status) {
|
||||
var scanClass =
|
||||
{
|
||||
@@ -725,12 +719,45 @@ function _renderGovSkills(items) {
|
||||
high: "scope-scan-high",
|
||||
critical: "scope-scan-critical",
|
||||
}[t.scan_status] || "";
|
||||
scanBadge =
|
||||
' <span class="scope-badge ' +
|
||||
var scanIcon =
|
||||
{
|
||||
safe: "\u2713 ",
|
||||
low: "",
|
||||
medium: "\u25B2 ",
|
||||
high: "\u25C6 ",
|
||||
critical: "\u26A0 ",
|
||||
}[t.scan_status] || "";
|
||||
var tipParts = [];
|
||||
try {
|
||||
var report = JSON.parse(t.scan_report || "{}");
|
||||
if (report.composite != null) {
|
||||
tipParts.push("Score: " + report.composite.toFixed(2));
|
||||
}
|
||||
var axes = ["content", "supply_chain", "vulnerability", "capability"];
|
||||
for (var ai = 0; ai < axes.length; ai++) {
|
||||
var d = (report.details || {})[axes[ai]] || {};
|
||||
if (d.flags && d.flags.length) {
|
||||
tipParts.push(
|
||||
axes[ai].replace(/_/g, " ") + ": " + d.flags.join(", "),
|
||||
);
|
||||
}
|
||||
}
|
||||
} catch (e) {}
|
||||
var tipText = tipParts.length ? tipParts.join("\n") : t.scan_status;
|
||||
riskCell =
|
||||
'<span class="scope-badge ' +
|
||||
scanClass +
|
||||
'">' +
|
||||
'" tabindex="0" role="button" aria-label="Risk: ' +
|
||||
escapeHtml(t.scan_status) +
|
||||
(tipParts.length ? ". " + escapeHtml(tipParts.join(". ")) : "") +
|
||||
'" title="' +
|
||||
escapeHtml(tipText) +
|
||||
'">' +
|
||||
escapeHtml(scanIcon + t.scan_status) +
|
||||
"</span>";
|
||||
} else {
|
||||
riskCell =
|
||||
'<span class="scope-badge" style="opacity:0.4" title="Not scanned">\u2014</span>';
|
||||
}
|
||||
var resBadge = "";
|
||||
if (t.resource_count > 0) {
|
||||
@@ -745,13 +772,15 @@ function _renderGovSkills(items) {
|
||||
var deleteDisabled = t.readonly ? " disabled" : "";
|
||||
html +=
|
||||
'<div class="admin-row" role="listitem">' +
|
||||
'<span class="admin-col admin-col-tmcat">' +
|
||||
catBadge +
|
||||
"</span>" +
|
||||
'<span class="admin-col admin-col-tmname">' +
|
||||
escapeHtml(t.name) +
|
||||
" " +
|
||||
activationBadge +
|
||||
defBadge +
|
||||
originBadge +
|
||||
scanBadge +
|
||||
resBadge +
|
||||
(t.description
|
||||
? '<br><span class="admin-col-subtitle">' +
|
||||
@@ -759,12 +788,9 @@ function _renderGovSkills(items) {
|
||||
"</span>"
|
||||
: "") +
|
||||
"</span>" +
|
||||
'<span class="admin-col admin-col-tmcat">' +
|
||||
catBadge +
|
||||
'<span class="admin-col admin-col-tmrisk">' +
|
||||
riskCell +
|
||||
"</span>" +
|
||||
'<span class="admin-col admin-col-tmvars"><code>' +
|
||||
escapeHtml(vars || "\u2014") +
|
||||
"</code></span>" +
|
||||
'<span class="admin-col admin-col-actions">' +
|
||||
'<button class="admin-btn-action" data-edit-tmpl="' +
|
||||
escapeHtml(t.template_id) +
|
||||
|
||||
@@ -272,9 +272,9 @@
|
||||
<!-- Installed view -->
|
||||
<div id="skill-view-installed" role="tabpanel" aria-labelledby="skill-tab-installed">
|
||||
<div class="admin-colheaders" aria-hidden="true">
|
||||
<span class="admin-col admin-col-tmname">NAME</span>
|
||||
<span class="admin-col admin-col-tmcat">CATEGORY</span>
|
||||
<span class="admin-col admin-col-tmvars">VARIABLES</span>
|
||||
<span class="admin-col admin-col-tmname">NAME</span>
|
||||
<span class="admin-col admin-col-tmrisk">RISK</span>
|
||||
<span class="admin-col admin-col-actions">ACTIONS</span>
|
||||
</div>
|
||||
<div id="admin-skills-table" role="list" aria-label="Skills" aria-live="polite">
|
||||
|
||||
@@ -1367,7 +1367,7 @@
|
||||
========================================================================== */
|
||||
#admin-skills .admin-colheaders,
|
||||
#admin-skills .admin-row {
|
||||
grid-template-columns: 1.5fr 100px 1fr 140px;
|
||||
grid-template-columns: 100px 1.5fr 100px 120px;
|
||||
}
|
||||
/* ==========================================================================
|
||||
Governance: Audit grid
|
||||
@@ -1652,7 +1652,7 @@
|
||||
#admin-skills .admin-colheaders, #admin-skills .admin-row {
|
||||
grid-template-columns: 1fr 100px;
|
||||
}
|
||||
.admin-col-tmcat, .admin-col-tmvars { display: none; }
|
||||
.admin-col-tmcat, .admin-col-tmrisk { display: none; }
|
||||
#admin-audit .admin-colheaders, #admin-audit .admin-row {
|
||||
grid-template-columns: 60px 1fr 100px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user