Skip to content

Commit 8dbddbf

Browse files
NikolaySNikolayS
committed
Merge branch '464-fix-checkup-page-fix' into 'master'
fix(ui): Fix checkup page after migration to Typescript (#464) Closes #464 See merge request postgres-ai/database-lab!649
2 parents 390cb62 + b01255a commit 8dbddbf

File tree

2 files changed

+140
-43
lines changed

2 files changed

+140
-43
lines changed

‎ui/packages/platform/src/components/CheckupAgentForm/CheckupAgentForm.tsx‎

Lines changed: 51 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -103,6 +103,54 @@ class CheckupAgentForm extends Component<
103103
CheckupAgentFormWithStylesProps,
104104
CheckupAgentFormState
105105
> {
106+
state = {
107+
data: {
108+
auth: {
109+
token: '',
110+
},
111+
tokenRequest: {
112+
isProcessing: false,
113+
isProcessed: false,
114+
data: {
115+
name: '',
116+
is_personal: false,
117+
expires_at: '',
118+
token: '',
119+
},
120+
errorMessage: '',
121+
error: false,
122+
},
123+
reports: {
124+
error: false,
125+
isProcessed: false,
126+
isProcessing: false,
127+
},
128+
projects: {
129+
error: false,
130+
isProcessing: false,
131+
isProcessed: false,
132+
},
133+
},
134+
hosts: '',
135+
projectName: '',
136+
databaseName: '',
137+
databaseUserName: '',
138+
ssDatabaseName: '',
139+
port: null,
140+
sshPort: null,
141+
pgPort: null,
142+
statementTimeout: null,
143+
pgSocketDir: '',
144+
psqlBinary: '',
145+
collectPeriod: 600,
146+
newHostName: '',
147+
apiToken: '',
148+
sshKeysPath: '',
149+
password: '',
150+
connectionType: '',
151+
tab: 0,
152+
}
153+
106154
unsubscribe: () => void
107155
componentDidMount() {
108156
const that = this
@@ -605,7 +653,7 @@ class CheckupAgentForm extends Component<
605653
collectPeriod: e.target.value,
606654
})
607655
}}
608-
value={this.state.collectPeriod || 600}
656+
value={this.state.collectPeriod}
609657
helperText={
610658
'The delay between collection of two ' +
611659
'statistics snapshots, sec'
@@ -864,7 +912,7 @@ class CheckupAgentForm extends Component<
864912
<h2>3. Deploy using Docker or building from source</h2>
865913

866914
<Tabs
867-
value={this.state?.tab || 0}
915+
value={this.state?.tab}
868916
onChange={this.handleChangeTab}
869917
aria-label="simple tabs example"
870918
>
@@ -920,7 +968,7 @@ class CheckupAgentForm extends Component<
920968
</div>
921969
</TabPanel>
922970

923-
<TabPanel value={this.state?.tab || 0} index={0}>
971+
<TabPanel value={this.state?.tab} index={0}>
924972
<Typography>
925973
<strong>Requirements: </strong> Docker
926974
<br />

‎ui/packages/platform/src/components/Reports/Reports.tsx‎

Lines changed: 89 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -50,8 +50,8 @@ interface ReportsWithStylesProps extends ReportsProps {
5050
interface ReportsType {
5151
error: boolean
5252
errorMessage: string
53-
errorCode: number
54-
orgId: number
53+
errorCode: number | null
54+
orgId: number | null
5555
projectId: string | number | undefined
5656
isDeleting: boolean
5757
isProcessing: boolean
@@ -83,8 +83,38 @@ interface ReportsState {
8383
}
8484

8585
class Reports extends Component<ReportsWithStylesProps, ReportsState> {
86+
state = {
87+
data: {
88+
auth: {
89+
token: '',
90+
},
91+
userProfile: {
92+
data: {
93+
orgs: {},
94+
},
95+
},
96+
reports: {
97+
error: false,
98+
errorMessage: '',
99+
errorCode: null,
100+
orgId: null,
101+
projectId: undefined,
102+
isDeleting: false,
103+
isProcessing: false,
104+
data: [],
105+
},
106+
projects: {
107+
error: false,
108+
isProcessing: false,
109+
isProcessed: false,
110+
data: [],
111+
},
112+
},
113+
selectedRows: {},
114+
}
115+
86116
onSelectRow(event: React.ChangeEvent<HTMLInputElement>, rowId: number) {
87-
let selectedRows = this.state.selectedRows
117+
let selectedRows: ReportsState['selectedRows'] = this.state.selectedRows
88118

89119
if (selectedRows[rowId] && !event.target.checked) {
90120
delete selectedRows[rowId]
@@ -312,7 +342,7 @@ class Reports extends Component<ReportsWithStylesProps, ReportsState> {
312342
>
313343
<MenuItem value={0}>All</MenuItem>
314344

315-
{projects.data.map((p) => {
345+
{projects.data.map((p: { id: number; name: string }) => {
316346
return (
317347
<MenuItem value={p.id} key={p.id}>
318348
{p.name}
@@ -459,43 +489,62 @@ class Reports extends Component<ReportsWithStylesProps, ReportsState> {
459489
</TableRow>
460490
</TableHead>
461491
<TableBody>
462-
{data.data.map((r) => {
463-
return (
464-
<TableRow
465-
hover
466-
className={classes.row}
467-
key={r.id}
468-
onClick={(event) =>
469-
this.handleClick(event, r.id, r.project_id)
470-
}
471-
style={{ cursor: 'pointer' }}
472-
>
473-
{this.props.orgPermissions?.checkupReportDelete ? (
474-
<TableCell className={classes.checkboxTableCell}>
475-
<Checkbox
476-
checked={!!this.state.selectedRows[r.id]}
477-
onChange={(event) => this.onSelectRow(event, r.id)}
478-
onClick={(event) => this.onCheckBoxClick(event)}
479-
/>
492+
{data.data.map(
493+
(r: {
494+
id: number
495+
project_id: string
496+
created_formatted: string
497+
project_name: string
498+
epoch: string
499+
}) => {
500+
return (
501+
<TableRow
502+
hover
503+
className={classes.row}
504+
key={r.id}
505+
onClick={(event) =>
506+
this.handleClick(event, r.id, r.project_id)
507+
}
508+
style={{ cursor: 'pointer' }}
509+
>
510+
{this.props.orgPermissions?.checkupReportDelete ? (
511+
<TableCell className={classes.checkboxTableCell}>
512+
<Checkbox
513+
checked={
514+
!!(
515+
this.state
516+
.selectedRows as ReportsState['selectedRows']
517+
)[r.id]
518+
}
519+
onChange={(event) =>
520+
this.onSelectRow(event, r.id)
521+
}
522+
onClick={(event) => this.onCheckBoxClick(event)}
523+
/>
524+
</TableCell>
525+
) : null}
526+
<TableCell className={classes.cell}>
527+
<NavLink
528+
to={
529+
this.getReportLink(r.id, r.project_id) as string
530+
}
531+
>
532+
{r.id}
533+
</NavLink>
534+
</TableCell>
535+
<TableCell className={classes.cell}>
536+
{r.project_name}
537+
</TableCell>
538+
<TableCell className={classes.cell}>
539+
{r.created_formatted}
540+
</TableCell>
541+
<TableCell className={classes.cell}>
542+
{r.epoch}
480543
</TableCell>
481-
) : null}
482-
<TableCell className={classes.cell}>
483-
<NavLink
484-
to={this.getReportLink(r.id, r.project_id) as string}
485-
>
486-
{r.id}
487-
</NavLink>
488-
</TableCell>
489-
<TableCell className={classes.cell}>
490-
{r.project_name}
491-
</TableCell>
492-
<TableCell className={classes.cell}>
493-
{r.created_formatted}
494-
</TableCell>
495-
<TableCell className={classes.cell}>{r.epoch}</TableCell>
496-
</TableRow>
497-
)
498-
})}
544+
</TableRow>
545+
)
546+
},
547+
)}
499548
</TableBody>
500549
</Table>
501550
</HorizontalScrollContainer>

0 commit comments

Comments
 (0)