diff --git a/serveradmin/servershell/static/css/servershell.css b/serveradmin/servershell/static/css/servershell.css index 55376a26..d8f5d03c 100644 --- a/serveradmin/servershell/static/css/servershell.css +++ b/serveradmin/servershell/static/css/servershell.css @@ -158,3 +158,9 @@ th:hover .attr-headericons { #result_table textarea { resize: both; } + +/* Relation/reverse attribute values, ctrl-click opens inspect in new tab */ +.relation-link { + cursor: pointer; + text-decoration: underline dotted; +} diff --git a/serveradmin/servershell/static/js/servershell/result.js b/serveradmin/servershell/static/js/servershell/result.js index 6eaac2b2..1551dd40 100644 --- a/serveradmin/servershell/static/js/servershell/result.js +++ b/serveradmin/servershell/static/js/servershell/result.js @@ -144,6 +144,10 @@ get_row_html = function(object, number) { cell.append(current); } } + else if (attribute.type === 'relation' || attribute.type === 'reverse') { + // Render related objects as ctrl-clickable links to inspect + append_relation_links(cell, object[attribute_id]); + } else { cell.text(get_string(object_id, attribute_id)); } @@ -152,8 +156,16 @@ get_row_html = function(object, number) { row.append(cell); } else { + let attribute = servershell.get_attribute(attribute_id); let cell = $(''); - cell.text(get_string(object.object_id, attribute_id)); + if (attribute.type === 'relation' || attribute.type === 'reverse') { + // Reverse attributes are readonly and land here, make them + // ctrl-clickable links to inspect the related objects. + append_relation_links(cell, object[attribute_id]); + } + else { + cell.text(get_string(object.object_id, attribute_id)); + } row.append(cell); } }); @@ -223,6 +235,47 @@ get_string = function(object_id, attribute_id) { return ''; }; +/** + * Append relation/reverse attribute values as ctrl-clickable links + * + * Each related object is identified by its hostname. Ctrl-click (or cmd-click + * on macOS) opens the inspect page for that hostname in a new tab. Plain click + * is left untouched so row selection and inline editing (double click) on + * editable relations keep working as before. + * + * @param cell jQuery td element + * @param value hostname string (multi=false) or array of hostnames (multi=true) + */ +append_relation_links = function(cell, value) { + if (value === null || value === undefined) { + return; + } + + // Normalize single relations and multi relations to a sorted list so the + // display matches get_string() ordering. + let hostnames = Array.isArray(value) ? value.slice().sort() : [value]; + + hostnames.forEach(function(hostname, index) { + if (index > 0) { + cell.append(', '); + } + + let link = $('').text(hostname); + link.click(function(event) { + // Only hijack ctrl/cmd-click, leave plain clicks alone. + if (!event.ctrlKey && !event.metaKey) { + return; + } + event.preventDefault(); + window.open( + `${servershell.urls.inspect}?hostname=${encodeURIComponent(hostname)}`, + '_blank' + ); + }); + cell.append(link); + }); +}; + /** * Make row editable by double click *