Custom columns when grouping by Age.

components/RunCard.renderCell.tsx

@@ -153,6 +153,7 @@ export function renderCell<T extends ISimpleTableCell>(
 			})
 			: TableCell({ // Don't want SimpleTableCell as it has flex row.
 				children: (() => {
+					const rule = result._rule
 					switch (treeColumn.id) {
 						case 'Details':
 							return <>
@@ -161,6 +162,11 @@ export function renderCell<T extends ISimpleTableCell>(
 									: <Hi>{renderMessageWithEmbeddedLinks(result)}</Hi> || ''}
 								{tryOr(() => <Snippet ploc={result.locations[0].physicalLocation} />)}
 							</>
+						case 'Rule':
+							return <>
+								{tryLink(() => rule.helpUri, <Hi>{rule.id || rule.guid}</Hi>)}
+								{tryOr(() => rule.name && <>: <Hi>{rule.name}</Hi></>)}
+							</>
 						case 'Baseline':
 							return <Hi>{result.baselineState && capitalize(result.baselineState) || 'New'}</Hi>
 						case 'Bug':

components/RunStore.ts

@@ -209,24 +209,40 @@ export class RunStore {
 				),
 				width: -3,
 			},
-			{
-				id: 'Details',
-				filterString: (result: Result) => {
-					const message = tryOr<string>(
-						() => result.message.markdown,
-						() => result.message.text, // Can be a constant?
-						'')
-					const snippet = tryOr<string>(
-						() => result.locations[0].physicalLocation.contextRegion.snippet.text,
-						() => result.locations[0].physicalLocation.region.snippet.text,
-						'')
-					return `${message} ${snippet}`
-				},
-				sortString:   (result: Result) => result.message.text as string || '',
-				width: -5,
-			},
 		]
 
+		if (this.showAge && this.groupByAge.get()) {
+			columns.push({
+				id: 'Rule',
+				filterString: (result: Result) => {
+					const rule = result._rule
+					return `${rule.id || rule.guid} ${rule.name ?? ''}`
+				},
+				sortString:   (result: Result) => {
+					const rule = result._rule
+					return `${rule.id || rule.guid} ${rule.name ?? ''}`
+				},
+				width: -2,
+			})
+		}
+
+		columns.push({
+			id: 'Details',
+			filterString: (result: Result) => {
+				const message = tryOr<string>(
+					() => result.message.markdown,
+					() => result.message.text, // Can be a constant?
+					'')
+				const snippet = tryOr<string>(
+					() => result.locations[0].physicalLocation.contextRegion.snippet.text,
+					() => result.locations[0].physicalLocation.region.snippet.text,
+					'')
+				return `${message} ${snippet}`
+			},
+			sortString:   (result: Result) => result.message.text as string || '',
+			width: -5,
+		})
+
 		if (!this.hideBaseline) {
 			columns.push({
 				id: 'Baseline',
@@ -246,13 +262,16 @@ export class RunStore {
 			})
 		}
 
-		if (this.showAge) {
+		if (this.showAge && !this.groupByAge.get()) {
 			columns.push({
 				id: 'Age',
 				filterString: (result: Result) => result.sla,
 				sortString:   (result: Result) => result.sla,
 				width: -1,
 			})
+		}
+
+		if (this.showAge) {
 			columns.push({
 				id: 'First Observed', // Consider using name instead of id
 				filterString: (result: Result) => result.firstDetection.toLocaleDateString(),