Add metric column help.

ICTU · Aug 11, 2022 · f0f2744 · f0f2744
1 parent 7a03012
commit f0f2744
Showing 1 changed file with 36 additions and 3 deletions.
diff --git a/components/frontend/src/subject/SubjectTableHeader.js b/components/frontend/src/subject/SubjectTableHeader.js
@@ -1,6 +1,19 @@
 import { Table } from "semantic-ui-react";
 import { SortableTableHeaderCell } from '../widgets/SortableTableHeaderCell';
 
+const measurementHelp = <>
+    <p>
+        The latest measurement value.
+    </p>
+    <p>
+        If the measurement value is '?', no sources have been configured for the metric.
+        Expand the metric and navigate to the sources tab to add sources.
+    </p>
+    <p>
+        If the measurement value has a red background, the metric has not been measured recently.
+    </p>
+</>
+
 const timeLeftHelp = <>
     <p>
         The number of days left to address the metric.
@@ -13,6 +26,26 @@ const timeLeftHelp = <>
     </p>
 </>
 
+const sourcesHelp = <>
+    <p>
+        The tools and reports accessed to collect the measurement data.
+    </p>
+    <p>
+        If a source has a red background, the source could not be accessed or the data could not be parsed.
+        Expand the metric and navigate to the source to see the error details.
+    </p>
+</>
+
+const issuesHelp = <>
+    <p>
+        Links to issues, opened in an issue tracker such as Jira, to track progress of addressing the metric.
+    </p>
+    <p>
+        If an issue has a red background, the issue tracker could not be accessed or the data could not be parsed.
+        Expand the metric and navigate to the technical debt tab to see the error details.
+    </p>
+</>
+
 export function SubjectTableHeader(
     {
         columnDates,
@@ -30,13 +63,13 @@ export function SubjectTableHeader(
                 {nrDates > 1 && columnDates.map(date => <Table.HeaderCell key={date} className="unsortable" textAlign="right">{date.toLocaleDateString()}</Table.HeaderCell>)}
                 {nrDates === 1 && !hiddenColumns.includes("trend") && <Table.HeaderCell className="unsortable" width="2">Trend (7 days)</Table.HeaderCell>}
                 {nrDates === 1 && !hiddenColumns.includes("status") && <SortableTableHeaderCell column='status' label='Status' textAlign='center' {...sortProps} />}
-                {nrDates === 1 && !hiddenColumns.includes("measurement") && <SortableTableHeaderCell column='measurement' label='Measurement' textAlign="right" {...sortProps} />}
+                {nrDates === 1 && !hiddenColumns.includes("measurement") && <SortableTableHeaderCell column='measurement' label='Measurement' textAlign="right" help={measurementHelp} {...sortProps} />}
                 {nrDates === 1 && !hiddenColumns.includes("target") && <SortableTableHeaderCell column='target' label='Target' textAlign="right" {...sortProps} />}
                 {!hiddenColumns.includes("unit") && <SortableTableHeaderCell column="unit" label="Unit" {...sortProps} />}
-                {!hiddenColumns.includes("source") && <SortableTableHeaderCell column='source' label='Source' {...sortProps} />}
+                {!hiddenColumns.includes("source") && <SortableTableHeaderCell column='source' label='Sources' help={sourcesHelp} {...sortProps} />}
                 {!hiddenColumns.includes("time_left") && <SortableTableHeaderCell column='time_left' label='Time left' help={timeLeftHelp} {...sortProps} />}
                 {!hiddenColumns.includes("comment") && <SortableTableHeaderCell column='comment' label='Comment' {...sortProps} />}
-                {!hiddenColumns.includes("issues") && <SortableTableHeaderCell column='issues' label='Issues' {...sortProps} />}
+                {!hiddenColumns.includes("issues") && <SortableTableHeaderCell column='issues' label='Issues' help={issuesHelp} {...sortProps} />}
                 {!hiddenColumns.includes("tags") && <SortableTableHeaderCell column='tags' label='Tags' {...sortProps} />}
             </Table.Row>
         </Table.Header>