Skip to content

Fixes PR table sorting issues #388

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
e-for-eshaan merged 8 commits into from
May 24, 2024
Merged

Fixes PR table sorting issues #388

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
e60fb27
adds animation to score-skeletal as well
e-for-eshaan May 24, 2024
4ef12bc
removes empty table in CFR overlay
e-for-eshaan May 24, 2024
72f87d4
fixes `lead_time` sorting issue in `PRTable`
e-for-eshaan May 24, 2024
e84732d
adds lead_time to the mini PR table
e-for-eshaan May 24, 2024
38d0b91
removes redundant log
e-for-eshaan May 24, 2024
b387401
utlizes a function to sort through authors in pr-tables
e-for-eshaan May 24, 2024
8fa9729
removes `lead_time_as_sum_of_parts` from the config for new users
e-for-eshaan May 24, 2024
6b757a6
splits the commit-based data into separate headers and cells, with so…
e-for-eshaan May 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 1 addition & 4 deletions web-server/src/components/PRTable/PullRequestTableColumnSelector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,7 @@ import { FlexBox } from '../FlexBox';

const formatColumnName = (
name: keyof typeof DEFAULT_PR_TABLE_COLUMN_STATE_MAP
) => {
if (name === 'lead_time_as_sum_of_parts') return 'Lead Time';
return name.split('_').join(' ');
};
) => name.split('_').join(' ');

export const PullRequestTableColumnSelector = () => {
const theme = useTheme();
Expand Down
130 changes: 67 additions & 63 deletions web-server/src/components/PRTable/PullRequestsTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,8 +37,8 @@ import { Line } from '@/components/Text';
import { SearchInput } from '@/components/TicketsTableAddons/SearchInput';
import { EasyState, useEasyState } from '@/hooks/useEasyState';
import { useTableSort } from '@/hooks/useTableSort';
import { DEFAULT_PR_TABLE_COLUMN_STATE_MAP } from '@/slices/app';
import { useSelector } from '@/store';
import { DEFAULT_PR_TABLE_COLUMN_STATE_MAP, appSlice } from '@/slices/app';
import { useDispatch, useSelector } from '@/store';
import { brandColors } from '@/theme/schemes/theme';
import { PR } from '@/types/resources';
import { getDurationString } from '@/utils/date';
Expand Down Expand Up @@ -110,6 +110,8 @@ export const PullRequestsTable: FC<

const enableCsv = true;

useLeadTimeMigration();

return (
<FlexBox col gap1>
{pageCount > 1 && (
Expand Down Expand Up @@ -199,71 +201,60 @@ export const PullRequestsTable: FC<
<TableCell sx={{ p: CELL_PAD }}>
<PrMetaCell pr={pr} />
</TableCell>
<TableCell sx={{ p: CELL_PAD }}>
<Box width="100%" display="flex" alignItems="center">
<LightTooltip arrow title={<PrChangesTooltip pr={pr} />}>
{enabledColumnsSet?.has('commits') && (
<TableCell sx={{ p: CELL_PAD }}>
{enabledColumnsSet?.has('commits') && (
<Box
display="flex"
flex={1}
gap={1}
alignItems="center"
bgcolor={theme.colors.secondary.lighter}
borderRadius={1}
overflow="hidden"
maxWidth="220px"
gap={2}
py={1 / 2}
px={1}
color={alpha(theme.colors.secondary.main, 0.8)}
>
{enabledColumnsSet?.has('commits') && (
<Box
display="flex"
flex={1}
gap={1}
alignItems="center"
justifyContent="flex-start"
color={alpha(theme.colors.secondary.main, 0.8)}
>
<IoGitCommit />
<Box fontWeight={600}>{pr.commits}</Box>
</Box>
)}
{enabledColumnsSet?.has('lines_changed') && (
<Box
display="flex"
flex={1}
gap={1}
alignItems="center"
justifyContent="center"
color={
pr.additions + pr.deletions
? 'warning.main'
: 'secondary.light'
}
>
<VscRequestChanges />
<Box fontWeight={600}>
{pr.additions + pr.deletions}
</Box>
</Box>
)}
{enabledColumnsSet?.has('comments') && (
<Box
display="flex"
flex={1}
gap={1}
alignItems="center"
justifyContent="flex-end"
color={
pr.comments ? 'info.main' : 'secondary.light'
}
>
<GoCommentDiscussion />
<Box fontWeight={600}>{pr.comments}</Box>
</Box>
)}
<IoGitCommit />
<Box fontWeight={600}>{pr.commits}</Box>
</Box>
</LightTooltip>
</Box>
</TableCell>
)}
</TableCell>
)}
{enabledColumnsSet?.has('lines_changed') && (
<TableCell sx={{ p: CELL_PAD }}>
{
<Box
display="flex"
flex={1}
gap={1}
alignItems="center"
color={
pr.additions + pr.deletions
? 'warning.main'
: 'secondary.light'
}
>
<VscRequestChanges />
<Box fontWeight={600}>
{pr.additions + pr.deletions}
</Box>
</Box>
}
</TableCell>
)}
{enabledColumnsSet?.has('comments') && (
<TableCell sx={{ p: CELL_PAD }}>
{
<Box
display="flex"
flex={1}
gap={1}
alignItems="center"
color={pr.comments ? 'info.main' : 'secondary.light'}
>
<GoCommentDiscussion />
<Box fontWeight={600}>{pr.comments}</Box>
</Box>
}
</TableCell>
)}
{enabledColumnsSet.has('base_branch') && (
<TableCell sx={{ p: CELL_PAD }}>{pr.base_branch}</TableCell>
)}
Expand Down Expand Up @@ -384,7 +375,7 @@ export const PullRequestsTable: FC<
</Line>
</TableCell>
)}
{enabledColumnsSet.has('lead_time_as_sum_of_parts') && (
{enabledColumnsSet.has('lead_time') && (
<TableCell sx={{ p: CELL_PAD }}>
<MiniLeadTimeStat
lead={pr.lead_time}
Expand Down Expand Up @@ -944,3 +935,16 @@ export const MiniLeadTimeStat: FC<{
</FlexBox>
);
};

const useLeadTimeMigration = () => {
const prEnabledConfig = useSelector((s) => s.app.prTableColumnsConfig) as any;
const dispatch = useDispatch();
useEffect(() => {
if (prEnabledConfig?.lead_time_as_sum_of_parts !== undefined) {
const updatedColumns = { ...prEnabledConfig };
updatedColumns.lead_time = updatedColumns.lead_time_as_sum_of_parts;
delete updatedColumns.lead_time_as_sum_of_parts;
dispatch(appSlice.actions.setPrTableColumnConfig(updatedColumns));
}
}, [dispatch, prEnabledConfig]);
};
76 changes: 32 additions & 44 deletions web-server/src/components/PRTable/PullRequestsTableHead.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import { ScheduleRounded } from '@mui/icons-material';
import {
Box,
Checkbox,
TableCell,
TableHead,
Expand Down Expand Up @@ -88,53 +87,44 @@ export const PullRequestsTableHead: FC<PullRequestsTableHeadProps> = ({
)}
<TableCell sx={{ minWidth: '40%', p: CELL_PAD, py: 1.5 }}>
<TableSortLabel
direction={conf.field === 'updated_at' ? conf.order : 'asc'}
active={conf.field === 'updated_at'}
onClick={() => updateSortConf('updated_at')}
direction={conf.field === 'repo_name' ? conf.order : 'asc'}
active={conf.field === 'repo_name'}
onClick={() => updateSortConf('repo_name')}
>
Pull Request
</TableSortLabel>
</TableCell>
<TableCell sx={{ p: CELL_PAD, py: 1.5 }}>

<TableCell sx={{ minWidth: '40%', p: CELL_PAD, py: 1.5 }}>
<TableSortLabel
direction={conf.field === 'commits' ? conf.order : 'asc'}
active={conf.field === 'commits'}
onClick={() => {
if (enabledColumnsSet?.has('commits')) {
return updateSortConf('commits');
}
if (enabledColumnsSet?.has('lines_changed')) {
return updateSortConf('additions');
}
if (enabledColumnsSet?.has('comments')) {
return updateSortConf('comments');
}
}}
onClick={() => updateSortConf('commits')}
>
<Box
display="flex"
gap={1}
alignItems="center"
justifyContent="center"
>
{enabledColumnsSet?.has('commits') && (
<>
<Box color="secondary.main">Commits</Box>
<Box>/</Box>
</>
)}
{enabledColumnsSet?.has('lines_changed') && (
<>
<Box color="warning.main">Lines</Box>
<Box>/</Box>
</>
)}
{enabledColumnsSet?.has('comments') && (
<Box color="info.main">Comments</Box>
)}
</Box>
Commits
</TableSortLabel>
</TableCell>

<TableCell sx={{ minWidth: '40%', p: CELL_PAD, py: 1.5 }}>
<TableSortLabel
direction={conf.field === 'additions' ? conf.order : 'asc'}
active={conf.field === 'additions'}
onClick={() => updateSortConf('additions')}
>
Lines
</TableSortLabel>
</TableCell>

<TableCell sx={{ minWidth: '40%', p: CELL_PAD, py: 1.5 }}>
<TableSortLabel
direction={conf.field === 'comments' ? conf.order : 'asc'}
active={conf.field === 'comments'}
onClick={() => updateSortConf('comments')}
>
Comments
</TableSortLabel>
</TableCell>

{enabledColumnsSet.has('base_branch') && (
<TableCell
align="center"
Expand Down Expand Up @@ -266,14 +256,12 @@ export const PullRequestsTableHead: FC<PullRequestsTableHeadProps> = ({
</TableSortLabel>
</TableCell>
)}
{enabledColumnsSet.has('lead_time_as_sum_of_parts') && (
{enabledColumnsSet.has('lead_time') && (
<TableCell sx={{ p: CELL_PAD, py: 1.5 }}>
<TableSortLabel
direction={
conf.field === 'lead_time_as_sum_of_parts' ? conf.order : 'asc'
}
active={conf.field === 'lead_time_as_sum_of_parts'}
onClick={() => updateSortConf('lead_time_as_sum_of_parts')}
direction={conf.field === 'lead_time' ? conf.order : 'asc'}
active={conf.field === 'lead_time'}
onClick={() => updateSortConf('lead_time')}
>
Lead <ClockIcon />
</TableSortLabel>
Expand Down
10 changes: 5 additions & 5 deletions web-server/src/components/PRTableMini/PullRequestsTableHeadMini.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,14 +80,14 @@ export const PullRequestsTableHeadMini: FC<PullRequestsTableHeadProps> = ({
</TableSortLabel>
</TableCell>
)}
{!hideColumns?.has('cycle_time') && (
{!hideColumns?.has('lead_time') && (
<TableCell sx={{ p: CELL_PAD, py: 1.5 }}>
<TableSortLabel
direction={conf.field === 'cycle_time' ? conf.order : 'asc'}
active={conf.field === 'cycle_time'}
onClick={() => updateSortConf('cycle_time')}
direction={conf.field === 'lead_time' ? conf.order : 'asc'}
active={conf.field === 'lead_time'}
onClick={() => updateSortConf('lead_time')}
>
Cycle
Lead
</TableSortLabel>
</TableCell>
)}
Expand Down
3 changes: 2 additions & 1 deletion web-server/src/content/DoraMetrics/DoraCards/SkeletalCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ export const DataStillSyncing = () => {
}, [flickerAnimation.toggle]);
return (
<FlexBox col gap2>
<ScoreSkeleton />
<ScoreSkeleton animation={flickerAnimation.value} />
<LoaderCore />
<Divider />
<Grid container spacing={4}>
Expand Down Expand Up @@ -118,6 +118,7 @@ const ScoreSkeleton: FC<{ animation?: boolean }> = ({ animation }) => {
ml={1}
sx={{
filter: `brightness(${animation ? 0.7 : 1})`,
opacity: animation ? 0.7 : 1,
transition: `all ${ANIMATON_DURATION}ms linear`
}}
>
Expand Down
54 changes: 31 additions & 23 deletions web-server/src/content/DoraMetrics/Incidents.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -184,33 +184,41 @@ export const AllIncidentsBody = () => {
</Line>{' '}
from {dateRangeLabel} across all data sources,{' '}
{filteredDeployments.length}{' '}
{pluralize('deployment', filteredDeployments.length)} may have led to
possible incidents.
{pluralize('deployment', filteredDeployments.length)}{' '}
{filteredDeployments.length ? 'may' : ''} have led to possible
incidents.
</Line>
</FlexBox>
<Divider />
<FlexBox gap1 flex1 fullWidth component={Paper} minHeight="75vh">
<FlexBox col>
<FlexBox flexGrow={1}>
<Scrollbar autoHeight autoHeightMin="100%">
<FlexBox col gap1 p={1} flexGrow={1}>
{filteredDeployments?.map((deployment) => {
return (
<DeploymentWithIncidentsMenuItem
deployment={deployment}
key={deployment.id}
onSelect={setSelectedDeploymentId}
selected={selectedDeploymentId.value === deployment.id}
/>
);
})}

{!!filteredDeployments.length && (
<>
<Divider />
<FlexBox gap1 flex1 fullWidth component={Paper} minHeight="75vh">
<FlexBox col>
<FlexBox flexGrow={1}>
<Scrollbar autoHeight autoHeightMin="100%">
<FlexBox col gap1 p={1} flexGrow={1}>
{filteredDeployments?.map((deployment) => {
return (
<DeploymentWithIncidentsMenuItem
deployment={deployment}
key={deployment.id}
onSelect={setSelectedDeploymentId}
selected={
selectedDeploymentId.value === deployment.id
}
/>
);
})}
</FlexBox>
</Scrollbar>
</FlexBox>
</Scrollbar>
</FlexBox>
<Divider orientation="vertical" />
<SelectedIncidentDetails deploymentDetails={selectedDeployment} />
</FlexBox>
</FlexBox>
<Divider orientation="vertical" />
<SelectedIncidentDetails deploymentDetails={selectedDeployment} />
</FlexBox>
</>
)}
</FlexBox>
);
};
Expand Down
Loading