Skip to content

Commit

Permalink
Add the metric sort column to the settings panel so that the button t…
Browse files Browse the repository at this point in the history 
…o reset all settinga also resets the sort column. Closes #3412.
  • Loading branch information
@fniessink
fniessink committed Feb 11, 2022
1 parent d0176cc commit d1b2551
Show file tree
Hide file tree
Showing 7 changed files with 129 additions and 60 deletions.
25 changes: 25 additions & 0 deletions components/frontend/src/AppUI.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,25 @@ export function AppUI({
const [hiddenColumns, toggleHiddenColumn, clearHiddenColumns] = useURLSearchQuery(history, "hidden_columns", "array");
const [hideMetricsNotRequiringAction, setHideMetricsNotRequiringAction] = useURLSearchQuery(history, "hide_metrics_not_requiring_action", "boolean", false);
const [nrDates, setNrDates] = useURLSearchQuery(history, "nr_dates", "integer", 1);
const [sortColumn, setSortColumn] = useURLSearchQuery(history, "sort_column", "string", null)
const [sortDirection, setSortDirection] = useURLSearchQuery(history, "sort_direction", "string", "ascending")
const [visibleDetailsTabs, toggleVisibleDetailsTab, clearVisibleDetailsTabs] = useURLSearchQuery(history, "tabs", "array");

function handleSort(column) {
if (column === null) {
setSortColumn(null) // Stop sorting
return
}
if (sortColumn === column) {
if (sortDirection === 'descending') {
setSortColumn(null) // Cycle through ascending->descending->no sort as long as the user clicks the same column
}
setSortDirection(sortDirection === 'ascending' ? 'descending' : 'ascending')
} else {
setSortColumn(column)
}
}

return (
<div style={{ display: "flex", minHeight: "100vh", flexDirection: "column" }}>
<HashLinkObserver />
Expand All @@ -66,6 +84,10 @@ export function AppUI({
setDateOrder={setDateOrder}
setHideMetricsNotRequiringAction={setHideMetricsNotRequiringAction}
setNrDates={setNrDates}
setSortColumn={setSortColumn}
setSortDirection={setSortDirection}
sortColumn={sortColumn}
sortDirection={sortDirection}
toggleHiddenColumn={toggleHiddenColumn}
visibleDetailsTabs={visibleDetailsTabs}
/>}
Expand All @@ -79,6 +101,7 @@ export function AppUI({
dateInterval={dateInterval}
dateOrder={dateOrder}
go_home={go_home}
handleSort={handleSort}
hiddenColumns={hiddenColumns}
hideMetricsNotRequiringAction={hideMetricsNotRequiringAction}
history={history}
Expand All @@ -91,6 +114,8 @@ export function AppUI({
report_uuid={report_uuid}
reports={reports}
reports_overview={reports_overview}
sortColumn={sortColumn}
sortDirection={sortDirection}
toggleVisibleDetailsTab={toggleVisibleDetailsTab}
visibleDetailsTabs={visibleDetailsTabs}
/>
Expand Down
6 changes: 6 additions & 0 deletions components/frontend/src/PageContent.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ export function PageContent({
current_report,
dateInterval,
dateOrder,
handleSort,
hiddenColumns,
hideMetricsNotRequiringAction,
history,
Expand All @@ -21,6 +22,8 @@ export function PageContent({
report_uuid,
reports,
reports_overview,
sortColumn,
sortDirection,
toggleVisibleDetailsTab,
visibleDetailsTabs
}) {
Expand All @@ -33,6 +36,7 @@ export function PageContent({
dateInterval={dateInterval}
dateOrder={dateOrder}
go_home={go_home}
handleSort={handleSort}
hiddenColumns={hiddenColumns}
hideMetricsNotRequiringAction={hideMetricsNotRequiringAction}
history={history}
Expand All @@ -42,6 +46,8 @@ export function PageContent({
report={current_report}
reports={reports}
report_date={report_date}
sortColumn={sortColumn}
sortDirection={sortDirection}
toggleVisibleDetailsTab={toggleVisibleDetailsTab}
visibleDetailsTabs={visibleDetailsTabs}
/>
Expand Down
72 changes: 55 additions & 17 deletions components/frontend/src/header_footer/ViewPanel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,10 @@ export function ViewPanel({
setDateOrder,
setHideMetricsNotRequiringAction,
setNrDates,
setSortColumn,
setSortDirection,
sortColumn,
sortDirection,
toggleHiddenColumn,
visibleDetailsTabs
}) {
Expand Down Expand Up @@ -48,8 +52,9 @@ export function ViewPanel({
hiddenColumns.length === 0 &&
nrDates === 1 &&
dateInterval === 7 &&
dateOrder === "descending"

dateOrder === "descending" &&
sortColumn === null &&
sortDirection === "ascending"
}
onClick={() => {
clearVisibleDetailsTabs();
Expand All @@ -58,6 +63,8 @@ export function ViewPanel({
setNrDates(1);
setDateInterval(7);
setDateOrder("descending");
setSortColumn(null);
setSortDirection("ascending")
}}
inverted
>
Expand All @@ -77,15 +84,36 @@ export function ViewPanel({
<Segment inverted color="black">
<Header size='small'>Visible columns</Header>
<Menu vertical inverted size="small">
<ColumnMenuItem column="trend" hiddenColumns={hiddenColumns} toggleHiddenColumn={toggleHiddenColumn} />
<ColumnMenuItem column="status" hiddenColumns={hiddenColumns} toggleHiddenColumn={toggleHiddenColumn} />
<ColumnMenuItem column="measurement" hiddenColumns={hiddenColumns} toggleHiddenColumn={toggleHiddenColumn} />
<ColumnMenuItem column="target" hiddenColumns={hiddenColumns} toggleHiddenColumn={toggleHiddenColumn} />
<ColumnMenuItem column="unit" hiddenColumns={hiddenColumns} toggleHiddenColumn={toggleHiddenColumn} />
<ColumnMenuItem column="source" hiddenColumns={hiddenColumns} toggleHiddenColumn={toggleHiddenColumn} />
<ColumnMenuItem column="comment" hiddenColumns={hiddenColumns} toggleHiddenColumn={toggleHiddenColumn} />
<ColumnMenuItem column="issues" hiddenColumns={hiddenColumns} toggleHiddenColumn={toggleHiddenColumn} />
<ColumnMenuItem column="tags" hiddenColumns={hiddenColumns} toggleHiddenColumn={toggleHiddenColumn} />
<VisibleColumnMenuItem column="trend" hiddenColumns={hiddenColumns} toggleHiddenColumn={toggleHiddenColumn} />
<VisibleColumnMenuItem column="status" hiddenColumns={hiddenColumns} toggleHiddenColumn={toggleHiddenColumn} />
<VisibleColumnMenuItem column="measurement" hiddenColumns={hiddenColumns} toggleHiddenColumn={toggleHiddenColumn} />
<VisibleColumnMenuItem column="target" hiddenColumns={hiddenColumns} toggleHiddenColumn={toggleHiddenColumn} />
<VisibleColumnMenuItem column="unit" hiddenColumns={hiddenColumns} toggleHiddenColumn={toggleHiddenColumn} />
<VisibleColumnMenuItem column="source" hiddenColumns={hiddenColumns} toggleHiddenColumn={toggleHiddenColumn} />
<VisibleColumnMenuItem column="comment" hiddenColumns={hiddenColumns} toggleHiddenColumn={toggleHiddenColumn} />
<VisibleColumnMenuItem column="issues" hiddenColumns={hiddenColumns} toggleHiddenColumn={toggleHiddenColumn} />
<VisibleColumnMenuItem column="tags" hiddenColumns={hiddenColumns} toggleHiddenColumn={toggleHiddenColumn} />
</Menu>
</Segment>
<Segment inverted color="black">
<Header size="small">Sort column</Header>
<Menu vertical inverted size="small">
<SortColumnMenuItem column="name" sortColumn={sortColumn} setSortColumn={setSortColumn} />
<SortColumnMenuItem column="status" sortColumn={sortColumn} setSortColumn={setSortColumn} />
<SortColumnMenuItem column="measurement" sortColumn={sortColumn} setSortColumn={setSortColumn} />
<SortColumnMenuItem column="target" sortColumn={sortColumn} setSortColumn={setSortColumn} />
<SortColumnMenuItem column="unit" sortColumn={sortColumn} setSortColumn={setSortColumn} />
<SortColumnMenuItem column="source" sortColumn={sortColumn} setSortColumn={setSortColumn} />
<SortColumnMenuItem column="comment" sortColumn={sortColumn} setSortColumn={setSortColumn} />
<SortColumnMenuItem column="issues" sortColumn={sortColumn} setSortColumn={setSortColumn} />
<SortColumnMenuItem column="tags" sortColumn={sortColumn} setSortColumn={setSortColumn} />
</Menu>
</Segment>
<Segment inverted color="black">
<Header size='small'>Sort direction</Header>
<Menu vertical inverted size="small">
<SortOrderMenuItem order="ascending" sortOrder={sortDirection} setSortOrder={setSortDirection} />
<SortOrderMenuItem order="descending" sortOrder={sortDirection} setSortOrder={setSortDirection} />
</Menu>
</Segment>
<Segment inverted color="black">
Expand All @@ -110,15 +138,15 @@ export function ViewPanel({
<Segment inverted color="black">
<Header size='small'>Date order</Header>
<Menu vertical inverted size="small">
<DateOrderMenuItem order="ascending" dateOrder={dateOrder} setDateOrder={setDateOrder} />
<DateOrderMenuItem order="descending" dateOrder={dateOrder} setDateOrder={setDateOrder} />
<SortOrderMenuItem order="ascending" sortOrder={dateOrder} setSortOrder={setDateOrder} />
<SortOrderMenuItem order="descending" sortOrder={dateOrder} setSortOrder={setDateOrder} />
</Menu>
</Segment>
</Segment.Group>
)
}

function ColumnMenuItem({ column, hiddenColumns, toggleHiddenColumn }) {
function VisibleColumnMenuItem({ column, hiddenColumns, toggleHiddenColumn }) {
return (
<div onKeyPress={(event) => { event.preventDefault(); toggleHiddenColumn(column) }} tabIndex={0}>
<Menu.Item color={activeColor} active={!hiddenColumns.includes(column)} onClick={() => toggleHiddenColumn(column)}>
Expand All @@ -128,6 +156,16 @@ function ColumnMenuItem({ column, hiddenColumns, toggleHiddenColumn }) {
)
}

function SortColumnMenuItem({ column, sortColumn, setSortColumn }) {
return (
<div onKeyPress={(event) => { event.preventDefault(); setSortColumn(column) }} tabIndex={0}>
<Menu.Item color={activeColor} active={sortColumn === column} onClick={() => setSortColumn(sortColumn === column ? null : column)}>
{capitalize(column === "name" ? "metric" : column)}
</Menu.Item>
</div>
)
}

function DateIntervalMenuItem({ nr, dateInterval, setDateInterval }) {
return (
<div onKeyPress={(event) => { event.preventDefault(); setDateInterval(nr) }} tabIndex={0}>
Expand All @@ -138,10 +176,10 @@ function DateIntervalMenuItem({ nr, dateInterval, setDateInterval }) {
)
}

function DateOrderMenuItem({ order, dateOrder, setDateOrder }) {
function SortOrderMenuItem({ order, sortOrder, setSortOrder }) {
return (
<div key={order} onKeyPress={(event) => { event.preventDefault(); setDateOrder(order) }} tabIndex={0}>
<Menu.Item active={dateOrder === order} color={activeColor} onClick={() => setDateOrder(order)}>
<div key={order} onKeyPress={(event) => { event.preventDefault(); setSortOrder(order) }} tabIndex={0}>
<Menu.Item active={sortOrder === order} color={activeColor} onClick={() => setSortOrder(order)}>
{capitalize(order)}
</Menu.Item>
</div>
Expand Down
20 changes: 17 additions & 3 deletions components/frontend/src/header_footer/ViewPanel.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,8 @@ it('resets the settings', async () => {
const setDateOrder = jest.fn();
const setHideMetricsNotRequiringAction = jest.fn();
const setNrDates = jest.fn();
const setSortColumn = jest.fn();
const setSortDirection = jest.fn();
await act(async () => {
render(
<ViewPanel
Expand All @@ -53,6 +55,10 @@ it('resets the settings', async () => {
setDateOrder={setDateOrder}
setHideMetricsNotRequiringAction={setHideMetricsNotRequiringAction}
setNrDates={setNrDates}
setSortColumn={setSortColumn}
setSortDirection={setSortDirection}
sortColumn="status"
sortDirection="descending"
visibleDetailsTabs={["tab"]}
/>
)
Expand All @@ -64,6 +70,8 @@ it('resets the settings', async () => {
expect(setDateOrder).toHaveBeenCalled()
expect(setNrDates).toHaveBeenCalled()
expect(setHideMetricsNotRequiringAction).toHaveBeenCalled()
expect(setSortColumn).toHaveBeenCalledWith(null)
expect(setSortDirection).toHaveBeenCalledWith("ascending")
})

it('does not reset the settings when all have the default value', async () => {
Expand All @@ -73,6 +81,8 @@ it('does not reset the settings when all have the default value', async () => {
const setDateOrder = jest.fn();
const setHideMetricsNotRequiringAction = jest.fn();
const setNrDates = jest.fn();
const setSortColumn = jest.fn();
const setSortDirection = jest.fn();
await act(async () => {
render(
<ViewPanel
Expand All @@ -87,6 +97,8 @@ it('does not reset the settings when all have the default value', async () => {
setDateOrder={setDateOrder}
setHideMetricsNotRequiringAction={setHideMetricsNotRequiringAction}
setNrDates={setNrDates}
sortColumn={null}
sortDirection="ascending"
visibleDetailsTabs={[]}
/>
)
Expand All @@ -98,6 +110,8 @@ it('does not reset the settings when all have the default value', async () => {
expect(setDateOrder).not.toHaveBeenCalled()
expect(setNrDates).not.toHaveBeenCalled()
expect(setHideMetricsNotRequiringAction).not.toHaveBeenCalled()
expect(setSortColumn).not.toHaveBeenCalled()
expect(setSortDirection).not.toHaveBeenCalled()
})

it("hides the metrics not requiring action", async () => {
Expand Down Expand Up @@ -173,7 +187,7 @@ it("hides a column by keypress", async () => {
visibleDetailsTabs={[]}
/>
)
userEvent.type(screen.getByText(/Comment/), "{Enter}")
userEvent.type(screen.getAllByText(/Comment/)[0], "{Enter}")
});
expect(toggleHiddenColumn).toHaveBeenCalledWith("comment")
})
Expand Down Expand Up @@ -284,7 +298,7 @@ it("sorts the dates descending", async () => {
visibleDetailsTabs={[]}
/>
)
fireEvent.click(screen.getByText(/Descending/))
fireEvent.click(screen.getAllByText(/Descending/)[1])
});
expect(setDateOrder).toHaveBeenCalledWith("descending")
})
Expand All @@ -300,7 +314,7 @@ it("sorts the dates ascending by keypress", async () => {
visibleDetailsTabs={[]}
/>
)
userEvent.type(screen.getByText(/Ascending/), "{Enter}")
userEvent.type(screen.getAllByText(/Ascending/)[1], "{Enter}")
});
expect(setDateOrder).toHaveBeenCalledWith("ascending")
})
25 changes: 5 additions & 20 deletions components/frontend/src/report/Report.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import { CardDashboard } from '../dashboard/CardDashboard';
import { DataModel } from '../context/DataModel';
import { accessGranted, EDIT_REPORT_PERMISSION, Permissions } from '../context/Permissions';
import { set_report_attribute } from '../api/report';
import { get_subject_name, useURLSearchQuery } from '../utils';
import { get_subject_name } from '../utils';
import { ReportTitle } from './ReportTitle';

function ReportDashboard({ report, onClick, setTags, tags, reload }) {
Expand Down Expand Up @@ -59,6 +59,7 @@ export function Report({
dateInterval,
dateOrder,
go_home,
handleSort,
hiddenColumns,
hideMetricsNotRequiringAction,
history,
Expand All @@ -68,6 +69,8 @@ export function Report({
report,
report_date,
reports,
sortColumn,
sortDirection,
toggleVisibleDetailsTab,
visibleDetailsTabs
}) {
Expand All @@ -84,24 +87,6 @@ export function Report({
setTags(prev_tags => prev_tags.filter(tag => Object.keys(report.summary_by_tag || {}).includes(tag)))
}, [report]);

const [sortColumn, setSortColumn] = useURLSearchQuery(history, "sort_column", "string", null)
const [sortDirection, setSortDirection] = useURLSearchQuery(history, "sort_direction", "string", "ascending")

function handleSort(column) {
if (column === null) {
setSortColumn(null) // Stop sorting
return
}
if (sortColumn === column) {
if (sortDirection === 'descending') {
setSortColumn(null) // Cycle through ascending->descending->no sort as long as the user clicks the same column
}
setSortDirection(sortDirection === 'ascending' ? 'descending' : 'ascending')
} else {
setSortColumn(column)
}
}

if (!report) {
return <ReportErrorMessage report_date={report_date} />
}
Expand All @@ -128,7 +113,7 @@ export function Report({
changed_fields={changed_fields}
dateInterval={dateInterval}
dateOrder={dateOrder}
handleSort={(column) => handleSort(column)}
handleSort={handleSort}
hiddenColumns={hiddenColumns}
hideMetricsNotRequiringAction={hideMetricsNotRequiringAction}
nrDates={nrDates}
Expand Down
Loading

0 comments on commit d1b2551

Please sign in to comment.