Skip to content

Commit d3ab6a9

Browse files
debsmita1debsmita1
authored
fix(adoption-insights): fix scaling issues (#1691)
1 parent 0d3d073 commit d3ab6a9

File tree

5 files changed

+210
-160
lines changed

5 files changed

+210
-160
lines changed

‎workspaces/adoption-insights/.changeset/dull-steaks-wear.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@red-hat-developer-hub/backstage-plugin-adoption-insights': patch
3+
---
4+
5+
fixed scaling issues

‎workspaces/adoption-insights/plugins/adoption-insights/src/components/AdoptionInsightsPage/AdoptionInsightsPage.tsx‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,8 @@ import { useTranslation } from '../../hooks/useTranslation';
3434
export const AdoptionInsightsPage = () => {
3535
const theme = useTheme();
3636
const isSmallScreen = useMediaQuery(theme.breakpoints.down('sm'));
37+
const isMediumScreen = useMediaQuery(theme.breakpoints.between('sm', 'md'));
38+
const isLargeScreen = useMediaQuery(theme.breakpoints.up('lg'));
3739
const { allowed: hasEventsReadPermission, loading } =
3840
useAdoptionInsightsEventsReadPermission();
3941
const { t } = useTranslation();
@@ -42,6 +44,13 @@ export const AdoptionInsightsPage = () => {
4244
return null;
4345
}
4446

47+
const getColumns = () => {
48+
if (isSmallScreen) return 1;
49+
if (isMediumScreen) return 1;
50+
if (isLargeScreen) return 2;
51+
return 1;
52+
};
53+
4554
return (
4655
<Page themeId="home">
4756
{!hasEventsReadPermission ? (
@@ -52,7 +61,7 @@ export const AdoptionInsightsPage = () => {
5261
<DateRangeProvider>
5362
<InsightsHeader title={t('page.title')} />
5463
<Content>
55-
<Masonry columns={isSmallScreen ? 1 : 2} spacing={2}>
64+
<Masonry columns={getColumns()} spacing={2}>
5665
<ActiveUsers />
5766
<Users />
5867
<Templates />

‎workspaces/adoption-insights/plugins/adoption-insights/src/components/AdoptionInsightsPage/__tests__/AdoptionInsightsPage.test.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -118,6 +118,8 @@ describe('AdoptionInsightsPage', () => {
118118
const mockTheme = {
119119
breakpoints: {
120120
down: jest.fn(),
121+
up: jest.fn(),
122+
between: jest.fn(),
121123
},
122124
};
123125

‎workspaces/adoption-insights/plugins/adoption-insights/src/components/Plugins/Plugins.tsx‎

Lines changed: 106 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -96,97 +96,121 @@ const Plugins = () => {
9696
: t('plugins.topNTitle' as any, { count: rowsPerPage.toString() })
9797
}
9898
>
99-
<Table aria-labelledby="Plugins" sx={{ width: '100%' }}>
100-
<TableHead>
101-
<TableRow>
102-
{PLUGINS_TABLE_HEADERS.map(header => {
103-
return (
99+
<Box sx={{ width: '100%' }}>
100+
<Table aria-labelledby="Plugins" sx={{ width: '100%' }}>
101+
<TableHead>
102+
<TableRow>
103+
{PLUGINS_TABLE_HEADERS.map(header => {
104+
return (
105+
<TableCell
106+
key={header.id}
107+
align="left"
108+
sx={{
109+
borderBottom: theme =>
110+
`1px solid ${theme.palette.grey[300]}`,
111+
}}
112+
>
113+
{t(header.titleKey as any, {})}
114+
</TableCell>
115+
);
116+
})}
117+
</TableRow>
118+
</TableHead>
119+
<TableBody>
120+
{loading ? (
121+
<TableRow>
104122
<TableCell
105-
key={header.id}
106-
align="left"
123+
colSpan={PLUGINS_TABLE_HEADERS.length}
124+
align="center"
125+
>
126+
<CircularProgress />
127+
</TableCell>
128+
</TableRow>
129+
) : (
130+
visiblePlugins?.map(plugin => (
131+
<TableRow
132+
key={plugin.plugin_id}
107133
sx={{
134+
'&:nth-of-type(odd)': { backgroundColor: 'inherit' },
108135
borderBottom: theme =>
109136
`1px solid ${theme.palette.grey[300]}`,
110137
}}
111138
>
112-
{t(header.titleKey as any, {})}
113-
</TableCell>
114-
);
115-
})}
116-
</TableRow>
117-
</TableHead>
118-
<TableBody>
119-
{loading ? (
139+
<TableCell
140+
sx={{
141+
width: '20%',
142+
}}
143+
>
144+
{plugin.plugin_id ?? '--'}
145+
</TableCell>
146+
<TableCell sx={{ width: '40%' }}>
147+
{plugin.trend?.length > 1 ? (
148+
<ResponsiveContainer width="100%" height={50}>
149+
<LineChart data={plugin.trend}>
150+
<Line
151+
type="monotone"
152+
dataKey="count"
153+
stroke="#9370DB"
154+
strokeWidth={2}
155+
dot={false}
156+
/>
157+
</LineChart>
158+
</ResponsiveContainer>
159+
) : (
160+
'--'
161+
)}
162+
</TableCell>
163+
<TableCell sx={{ width: '20%' }}>
164+
<Box
165+
sx={{
166+
display: 'flex',
167+
alignItems: 'center',
168+
gap: 1,
169+
minWidth: 0,
170+
}}
171+
>
172+
{Math.round(Number(plugin.trend_percentage)) < 0 ? (
173+
<TrendingDownIcon
174+
sx={{ color: 'red', flexShrink: 0 }}
175+
/>
176+
) : (
177+
<TrendingUpIcon
178+
sx={{ color: 'green', flexShrink: 0 }}
179+
/>
180+
)}
181+
<Typography
182+
variant="body2"
183+
sx={{ overflow: 'hidden', textOverflow: 'ellipsis' }}
184+
>
185+
{Math.abs(Math.round(Number(plugin.trend_percentage)))}%
186+
</Typography>
187+
</Box>
188+
</TableCell>
189+
<TableCell sx={{ width: '20%' }}>
190+
{Number(plugin.visit_count).toLocaleString('en-US') ?? '--'}
191+
</TableCell>
192+
</TableRow>
193+
))
194+
)}
195+
</TableBody>
196+
<TableFooter>
120197
<TableRow>
121-
<TableCell colSpan={PLUGINS_TABLE_HEADERS.length} align="center">
122-
<CircularProgress />
198+
<TableCell
199+
colSpan={PLUGINS_TABLE_HEADERS.length}
200+
sx={{ padding: 0 }}
201+
>
202+
<TableFooterPagination
203+
count={plugins.data?.length}
204+
rowsPerPage={rowsPerPage}
205+
page={page}
206+
handleChangePage={handleChangePage}
207+
handleChangeRowsPerPage={handleChangeRowsPerPage}
208+
/>
123209
</TableCell>
124210
</TableRow>
125-
) : (
126-
visiblePlugins?.map(plugin => (
127-
<TableRow
128-
key={plugin.plugin_id}
129-
sx={{
130-
'&:nth-of-type(odd)': { backgroundColor: 'inherit' },
131-
borderBottom: theme => `1px solid ${theme.palette.grey[300]}`,
132-
}}
133-
>
134-
<TableCell sx={{ width: '20%' }}>
135-
{plugin.plugin_id ?? '--'}
136-
</TableCell>
137-
<TableCell sx={{ width: '40%' }}>
138-
{plugin.trend?.length > 1 ? (
139-
<ResponsiveContainer width={250} height={50}>
140-
<LineChart data={plugin.trend}>
141-
<Line
142-
type="monotone"
143-
dataKey="count"
144-
stroke="#9370DB"
145-
strokeWidth={2}
146-
dot={false}
147-
/>
148-
</LineChart>
149-
</ResponsiveContainer>
150-
) : (
151-
'--'
152-
)}
153-
</TableCell>
154-
<TableCell sx={{ width: '20%' }}>
155-
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
156-
{Math.round(Number(plugin.trend_percentage)) < 0 ? (
157-
<TrendingDownIcon sx={{ color: 'red' }} />
158-
) : (
159-
<TrendingUpIcon sx={{ color: 'green' }} />
160-
)}
161-
<Typography variant="body2">
162-
{Math.abs(Math.round(Number(plugin.trend_percentage)))}%
163-
</Typography>
164-
</Box>
165-
</TableCell>
166-
<TableCell sx={{ width: '20%' }}>
167-
{Number(plugin.visit_count).toLocaleString('en-US') ?? '--'}
168-
</TableCell>
169-
</TableRow>
170-
))
171-
)}
172-
</TableBody>
173-
<TableFooter>
174-
<TableRow>
175-
<TableCell
176-
colSpan={PLUGINS_TABLE_HEADERS.length}
177-
sx={{ padding: 0 }}
178-
>
179-
<TableFooterPagination
180-
count={plugins.data?.length}
181-
rowsPerPage={rowsPerPage}
182-
page={page}
183-
handleChangePage={handleChangePage}
184-
handleChangeRowsPerPage={handleChangeRowsPerPage}
185-
/>
186-
</TableCell>
187-
</TableRow>
188-
</TableFooter>
189-
</Table>
211+
</TableFooter>
212+
</Table>
213+
</Box>
190214
</CardWrapper>
191215
);
192216
};

0 commit comments

Comments
 (0)