Merge pull request #50 from rohanpm/item-counts-tooltip

Include item counts in step tooltip

pulpstatus/js-src/task-row.spec.ts

@@ -1,4 +1,5 @@
 import { expect } from "chai";
+import * as ReactDOMServer from 'react-dom/server';
 
 import TaskRow from "./task-row";
 import { stepLabel } from "./task-row";
@@ -31,8 +32,9 @@ describe('stepLabel', () => {
             "state": "IN_PROGRESS",
         };
 
-        const text = stepLabel(step);
-        expect(text).to.be.equal("Do the thing (4%)");
+        const text = ReactDOMServer.renderToString(stepLabel(step));
+        expect(text).to.contain("Do the thing (4%)");
+        expect(text).to.contain("37 / 1000");
     });
 
 });

pulpstatus/js-src/task-row.tsx

@@ -16,18 +16,20 @@ interface Step {
     num_processed?: number;
 };
 
-export function stepLabel(step: Step): string {
+export function stepLabel(step: Step): JSX.Element {
     let label = step.step_type;
+    const labelProps: React.HTMLProps<HTMLSpanElement> = {};
 
     // If a step has meaningful item counts, we can use that to show
     // percentage of completion for that step.
     // Note: most steps don't have a meaningful count.
     if (step.state == "IN_PROGRESS" && step.items_total && step.items_total > 1 && step.num_processed) {
         const pct = Math.round(step.num_processed / step.items_total * 100);
         label = `${label} (${pct}%)`;
+        labelProps.title = `${step.num_processed} / ${step.items_total}`;
     }
 
-    return label;
+    return <span {...labelProps}>{label}</span>;
 }
 
 type RenderFunction = () => JSX.Element;