Skip to content

Commit 7805177

Browse files
danialraza03danialraza03
authored
Merge pull request #98 from zenml-io/fix-default-page-size
fixed default page size
2 parents 07d4d64 + c9380d1 commit 7805177

File tree

11 files changed

+138
-62
lines changed

11 files changed

+138
-62
lines changed

‎src/ui/layouts/common/Pagination/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -131,7 +131,7 @@ export const Pagination: React.FC<Props> = forwardRef((props, ref) => {
131131
dispatchStackRunsData(id, page, size, filters as any, activeSorting);
132132
break;
133133
} else {
134-
dispatchStackData(1, 5, filters as any, activeSorting);
134+
dispatchStackData(1, size, filters as any, activeSorting);
135135
break;
136136
}
137137
case 'components':
@@ -145,7 +145,7 @@ export const Pagination: React.FC<Props> = forwardRef((props, ref) => {
145145
);
146146
break;
147147
} else {
148-
dispatchStackComponentsData(1, 5, filters as any, activeSorting);
148+
dispatchStackComponentsData(1, size, filters as any, activeSorting);
149149
break;
150150
}
151151
case 'pipelines':

‎src/ui/layouts/common/Table/index.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -53,8 +53,6 @@ export interface TableProps {
5353
trOnClick?: (arg: any) => void;
5454
}
5555

56-
// const ITEMS_PER_PAGE = parseInt(process.env.REACT_APP_ITEMS_PER_PAGE as string);
57-
5856
export const Table: React.FC<TableProps> = ({
5957
headerCols,
6058
tableRows,
@@ -151,7 +149,7 @@ export const Table: React.FC<TableProps> = ({
151149
const ITEMS_PER_PAGE = parseInt(
152150
process.env.REACT_APP_ITEMS_PER_PAGE as string,
153151
);
154-
const DEFAULT_ITEMS_PER_PAGE = 5;
152+
const DEFAULT_ITEMS_PER_PAGE = 10;
155153
const itemPerPageOptions = [5, 10, 15, 20];
156154
// const itemPerPage = ITEMS_PER_PAGE ? ITEMS_PER_PAGE : DEFAULT_ITEMS_PER_PAGE;
157155
const [itemPerPage, setItemPerPage] = useState(
@@ -256,7 +254,7 @@ export const Table: React.FC<TableProps> = ({
256254
dispatch(
257255
organizationActions.getMembers({
258256
page: 1,
259-
size: 5,
257+
size: ITEMS_PER_PAGE ? ITEMS_PER_PAGE : DEFAULT_ITEMS_PER_PAGE,
260258
sort_by: activeSorting,
261259
onSuccess: () => setFetchingMembers(false),
262260
onFailure: () => setFetchingMembers(false),

‎src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedHeader.tsx‎

Lines changed: 92 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import {
88
LinkBox,
99
icons,
1010
If,
11-
Separator
11+
Separator,
1212
} from '../../../../components';
1313

1414
import styles from './AuthenticatedHeader.module.scss';
@@ -18,9 +18,7 @@ import {
1818
userSelectors,
1919
} from '../../../../../redux/selectors';
2020
import { getInitials } from '../../../../../utils/name';
21-
import {
22-
DEFAULT_FULL_NAME,
23-
} from '../../../../../constants';
21+
import { DEFAULT_FULL_NAME } from '../../../../../constants';
2422
import OutsideClickHandler from 'react-outside-click-handler';
2523
import {
2624
useDispatch,
@@ -54,7 +52,7 @@ export const AuthenticatedHeader: React.FC<{
5452
const [popupOpen, setPopupOpen] = useState<boolean>(false);
5553
const [createPopupOpen, setCreatePopupOpen] = useState<boolean>(false);
5654
// const [showCookiePopup, setShowCookiePopup] = useState<any>(localStorage.getItem('showCookie'));
57-
55+
5856
const dispatch = useDispatch();
5957
const { push } = usePushRoute();
6058
const locationPath = useLocationPath();
@@ -116,7 +114,10 @@ export const AuthenticatedHeader: React.FC<{
116114

117115
const userFullName = user.fullName || user.name || DEFAULT_FULL_NAME;
118116
const userInitials = getInitials(userFullName);
119-
117+
const ITEMS_PER_PAGE = parseInt(
118+
process.env.REACT_APP_ITEMS_PER_PAGE as string,
119+
);
120+
const DEFAULT_ITEMS_PER_PAGE = 10;
120121
const logout = () => {
121122
dispatch(sessionActions.logout());
122123
history.push('/login');
@@ -150,19 +151,22 @@ export const AuthenticatedHeader: React.FC<{
150151
sort_by: 'created',
151152
logical_operator: 'and',
152153
page: 1,
153-
size: 5,
154+
size: ITEMS_PER_PAGE ? ITEMS_PER_PAGE : DEFAULT_ITEMS_PER_PAGE,
154155
project: e?.name,
155156
onSuccess: () => stopLoad(),
156157
onFailure: () => stopLoad(),
157158
}),
158159
);
159-
await dispatch(projectsActions.getMy({ selectDefault: false, selectedProject: e?.name }))
160+
await dispatch(
161+
projectsActions.getMy({ selectDefault: false, selectedProject: e?.name }),
162+
);
160163
};
161164

162-
const selected = projects.some((project) => project['name'] === locationPath.split('/')[2])
163-
? locationPath.split('/')[2].substring(0, 10)
164-
: selectedProject
165-
165+
const selected = projects.some(
166+
(project) => project['name'] === locationPath.split('/')[2],
167+
)
168+
? locationPath.split('/')[2].substring(0, 10)
169+
: selectedProject;
166170

167171
return (
168172
<>
@@ -187,9 +191,9 @@ export const AuthenticatedHeader: React.FC<{
187191
<LinkBox onClick={() => setPopupOpen(!popupOpen)}>
188192
<FlexBox alignItems="center">
189193
<FlexBox alignItems="center" className="d-none d-md-flex">
190-
<Box paddingRight="sm" style={{ textAlign: 'end' }} >
194+
<Box paddingRight="sm" style={{ textAlign: 'end' }}>
191195
<Paragraph>{userFullName}</Paragraph>
192-
<span className={styles.selectedProject} >{selected}</span>
196+
<span className={styles.selectedProject}>{selected}</span>
193197
</Box>
194198
</FlexBox>
195199
<Box marginRight="sm">
@@ -198,15 +202,15 @@ export const AuthenticatedHeader: React.FC<{
198202
</ColoredCircle>
199203
</Box>
200204
<Box>
201-
<icons.chevronDownLight
202-
size={iconSizes.xs}
203-
color={iconColors.black}
204-
/>
205-
</Box>
205+
<icons.chevronDownLight
206+
size={iconSizes.xs}
207+
color={iconColors.black}
208+
/>
209+
</Box>
206210
</FlexBox>
207211
</LinkBox>
208212
<If condition={popupOpen}>
209-
{() => (
213+
{() => (
210214
<OutsideClickHandler
211215
onOutsideClick={() => setPopupOpen(false)}
212216
>
@@ -220,32 +224,78 @@ export const AuthenticatedHeader: React.FC<{
220224
<Paragraph size="small">Settings</Paragraph>
221225
</FlexBox>
222226
</LinkBox>
223-
224-
225-
<Box marginHorizontal='md'><Separator.LightNew /></Box>
226-
<Box marginTop='sm' marginHorizontal="md" ><Paragraph color='grey' style={{ fontSize: '14px' }} >Your workspaces</Paragraph></Box>
227-
228-
<Box marginVertical='sm' marginHorizontal='md' className="d-none d-md-block">
229-
<Box marginTop='sm' style={{ maxHeight: '290px', overflow: projects?.length > 10 ? 'auto' :'hidden' }} >
230-
{projects.map((option, index) => (
231-
<Box marginTop='sm' onClick={() => onChange(option) } key={index} >
232-
<div data-tip data-for={option.name}>
233-
<Paragraph style={{ fontSize: '16px', color: '#443E99', cursor: 'pointer', fontWeight: selected === option.name ? 'bold' : 'normal' }} >
234-
{option.name.substring(0, 10)} <span style={{ color: selected === option.name ? '#443E99' : '#fff' }} >&#x2022;</span>
235-
</Paragraph>
236-
</div>
237227

238-
<ReactTooltip id={option.name} place="top" effect="solid">
239-
<Paragraph color="white">{option.name}</Paragraph>
240-
</ReactTooltip>
228+
<Box marginHorizontal="md">
229+
<Separator.LightNew />
230+
</Box>
231+
<Box marginTop="sm" marginHorizontal="md">
232+
<Paragraph color="grey" style={{ fontSize: '14px' }}>
233+
Your workspaces
234+
</Paragraph>
235+
</Box>
236+
237+
<Box
238+
marginVertical="sm"
239+
marginHorizontal="md"
240+
className="d-none d-md-block"
241+
>
242+
<Box
243+
marginTop="sm"
244+
style={{
245+
maxHeight: '290px',
246+
overflow: projects?.length > 10 ? 'auto' : 'hidden',
247+
}}
248+
>
249+
{projects.map((option, index) => (
250+
<Box
251+
marginTop="sm"
252+
onClick={() => onChange(option)}
253+
key={index}
254+
>
255+
<div data-tip data-for={option.name}>
256+
<Paragraph
257+
style={{
258+
fontSize: '16px',
259+
color: '#443E99',
260+
cursor: 'pointer',
261+
fontWeight:
262+
selected === option.name
263+
? 'bold'
264+
: 'normal',
265+
}}
266+
>
267+
{option.name.substring(0, 10)}{' '}
268+
<span
269+
style={{
270+
color:
271+
selected === option.name
272+
? '#443E99'
273+
: '#fff',
274+
}}
275+
>
276+
&#x2022;
277+
</span>
278+
</Paragraph>
279+
</div>
241280

242-
</Box>
243-
))}
281+
<ReactTooltip
282+
id={option.name}
283+
place="top"
284+
effect="solid"
285+
>
286+
<Paragraph color="white">
287+
{option.name}
288+
</Paragraph>
289+
</ReactTooltip>
290+
</Box>
291+
))}
244292
</Box>
245293
</Box>
246294

247-
<Box marginHorizontal='md'><Separator.LightNew /></Box>
248-
295+
<Box marginHorizontal="md">
296+
<Separator.LightNew />
297+
</Box>
298+
249299
{process.env.REACT_APP_DEMO_SETUP === 'true' ? null : (
250300
<LinkBox onClick={logout}>
251301
<FlexBox
@@ -278,4 +328,4 @@ export const AuthenticatedHeader: React.FC<{
278328
{/* {showCookiePopup !== 'false' && <CookiePopup setShowCookie={setShowCookiePopup} />} */}
279329
</>
280330
);
281-
};
331+
};

‎src/ui/layouts/pipelines/PipelineDetail/useService.ts‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,10 @@ export const useService = (): ServiceInterface => {
2222
const dispatch = useDispatch();
2323
const selectedProject = useSelector(projectSelectors.selectedProject);
2424
const { id } = useParams<PipelineDetailRouteParams>();
25-
25+
const ITEMS_PER_PAGE = parseInt(
26+
process.env.REACT_APP_ITEMS_PER_PAGE as string,
27+
);
28+
const DEFAULT_ITEMS_PER_PAGE = 10;
2629
useEffect(() => {
2730
setFetching(true);
2831
// Legacy: previously runs was in pipeline
@@ -39,7 +42,7 @@ export const useService = (): ServiceInterface => {
3942
logical_operator: 'and',
4043
pipelineId: id,
4144
page: 1,
42-
size: 5,
45+
size: ITEMS_PER_PAGE ? ITEMS_PER_PAGE : DEFAULT_ITEMS_PER_PAGE,
4346
onSuccess: () => setFetching(false),
4447
onFailure: () => setFetching(false),
4548
}),

‎src/ui/layouts/pipelines/Pipelines/useService.ts‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,10 @@ interface ServiceInterface {
2121
export const useService = (): ServiceInterface => {
2222
const dispatch = useDispatch();
2323
const selectedProject = useSelector(projectSelectors.selectedProject);
24+
const ITEMS_PER_PAGE = parseInt(
25+
process.env.REACT_APP_ITEMS_PER_PAGE as string,
26+
);
27+
const DEFAULT_ITEMS_PER_PAGE = 10;
2428
useEffect(() => {
2529
setFetchingForPipeline(true);
2630
setFetchingForAllRuns(true);
@@ -30,7 +34,7 @@ export const useService = (): ServiceInterface => {
3034
logical_operator: 'and',
3135
project: selectedProject,
3236
page: 1,
33-
size: 5,
37+
size: ITEMS_PER_PAGE ? ITEMS_PER_PAGE : DEFAULT_ITEMS_PER_PAGE,
3438
onSuccess: () => setFetchingForAllRuns(false),
3539
onFailure: () => setFetchingForAllRuns(false),
3640
}),
@@ -40,7 +44,7 @@ export const useService = (): ServiceInterface => {
4044
sort_by: 'created',
4145
logical_operator: 'and',
4246
page: 1,
43-
size: 5,
47+
size: ITEMS_PER_PAGE ? ITEMS_PER_PAGE : DEFAULT_ITEMS_PER_PAGE,
4448
name: '',
4549
project: selectedProject,
4650
onSuccess: () => setFetchingForPipeline(false),

‎src/ui/layouts/runs/Stacks/useService.ts‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,14 +14,18 @@ export const useService = (): ServiceInterface => {
1414
const locationPath = useLocationPath();
1515
const dispatch = useDispatch();
1616
const selectedProject = useSelector(projectSelectors.selectedProject);
17+
const ITEMS_PER_PAGE = parseInt(
18+
process.env.REACT_APP_ITEMS_PER_PAGE as string,
19+
);
20+
const DEFAULT_ITEMS_PER_PAGE = 10;
1721
useEffect(() => {
1822
setFetching(true);
1923
dispatch(
2024
stacksActions.getMy({
2125
sort_by: 'created',
2226
logical_operator: 'and',
2327
page: 1,
24-
size: 2,
28+
size: ITEMS_PER_PAGE ? ITEMS_PER_PAGE : DEFAULT_ITEMS_PER_PAGE,
2529
project: selectedProject as string,
2630
onSuccess: () => setFetching(false),
2731
onFailure: () => setFetching(false),

‎src/ui/layouts/settings/Organization/index.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,10 @@ export const Organization: React.FC = () => {
3232
const [fetchingMembers, setFetchingMembers] = useState(true);
3333
const [popupOpen, setPopupOpen] = useState(false);
3434
const [currentTable, setCurrentTable] = useState('members');
35+
const ITEMS_PER_PAGE = parseInt(
36+
process.env.REACT_APP_ITEMS_PER_PAGE as string,
37+
);
38+
const DEFAULT_ITEMS_PER_PAGE = 10;
3539
const membersPaginated = useSelector(
3640
organizationSelectors.myMembersPaginated,
3741
);
@@ -61,11 +65,12 @@ export const Organization: React.FC = () => {
6165
dispatch(
6266
organizationActions.getMembers({
6367
page: 1,
64-
size: 5,
68+
size: ITEMS_PER_PAGE ? ITEMS_PER_PAGE : DEFAULT_ITEMS_PER_PAGE,
6569
onSuccess: () => setFetchingMembers(false),
6670
onFailure: () => setFetchingMembers(false),
6771
}),
6872
);
73+
// eslint-disable-next-line react-hooks/exhaustive-deps
6974
}, [dispatch]);
7075

7176
return (

‎src/ui/layouts/stackComponents/StackDetail/useService.ts‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,10 @@ interface ServiceInterface {
2525
export const useService = (): ServiceInterface => {
2626
const dispatch = useDispatch();
2727
const { id } = useParams<StackDetailRouteParams>();
28-
28+
const ITEMS_PER_PAGE = parseInt(
29+
process.env.REACT_APP_ITEMS_PER_PAGE as string,
30+
);
31+
const DEFAULT_ITEMS_PER_PAGE = 10;
2932
useEffect(() => {
3033
setFetching(true);
3134
// Legacy: previously runs was in pipeline
@@ -42,7 +45,7 @@ export const useService = (): ServiceInterface => {
4245
logical_operator: 'and',
4346
stackComponentId: id,
4447
page: 1,
45-
size: 5,
48+
size: ITEMS_PER_PAGE ? ITEMS_PER_PAGE : DEFAULT_ITEMS_PER_PAGE,
4649
onSuccess: () => setFetching(false),
4750
onFailure: () => setFetching(false),
4851
}),

‎src/ui/layouts/stackComponents/Stacks/useService.ts‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,10 @@ export const useService = (): ServiceInterface => {
2323
const url_string = window.location.href;
2424
const url = new URL(url_string);
2525
const projectName = url.searchParams.get('project');
26-
// debugger;
26+
const ITEMS_PER_PAGE = parseInt(
27+
process.env.REACT_APP_ITEMS_PER_PAGE as string,
28+
);
29+
const DEFAULT_ITEMS_PER_PAGE = 10;
2730
useEffect(() => {
2831
setFetching(true);
2932
dispatch(
@@ -33,7 +36,7 @@ export const useService = (): ServiceInterface => {
3336
sort_by: 'created',
3437
logical_operator: 'and',
3538
page: 1,
36-
size: 5,
39+
size: ITEMS_PER_PAGE ? ITEMS_PER_PAGE : DEFAULT_ITEMS_PER_PAGE,
3740
onSuccess: () => setFetching(false),
3841
onFailure: () => setFetching(false),
3942
}),

0 commit comments

Comments
 (0)