Skip to content

Commit fefb1fc

Browse files
casinXagneum
casinX
authored and
agneum
committed
fix(shared): clone creating data; correct status detection - redirect after create (#326)
1 parent 7a19b43 commit fefb1fc

File tree

7 files changed

+307
-223
lines changed

7 files changed

+307
-223
lines changed

‎ui/packages/ce/src/App/Instance/Clones/CreateClone/index.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { ROUTES } from 'config/routes'
66
import { getInstance } from 'api/instances/getInstance'
77
import { getSnapshots } from 'api/snapshots/getSnapshots'
88
import { createClone } from 'api/clones/createClone'
9+
import { getClone } from 'api/clones/getClone'
910

1011
export const CreateClone = () => {
1112
const routes = {
@@ -17,6 +18,7 @@ export const CreateClone = () => {
1718
getSnapshots,
1819
getInstance,
1920
createClone,
21+
getClone,
2022
}
2123

2224
const elements = {

‎ui/packages/platform/src/pages/CreateClone/index.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { ROUTES } from 'config/routes'
66
import { getInstance } from 'api/instances/getInstance'
77
import { getSnapshots } from 'api/snapshots/getSnapshots'
88
import { createClone } from 'api/clones/createClone'
9+
import { getClone } from 'api/clones/getClone'
910
import ConsoleBreadcrumbs from 'components/ConsoleBreadcrumbs'
1011

1112
type Params = {
@@ -36,6 +37,7 @@ export const CreateClone = () => {
3637
getSnapshots,
3738
getInstance,
3839
createClone,
40+
getClone,
3941
}
4042

4143
const elements = {

‎ui/packages/shared/pages/Clone/index.tsx‎

Lines changed: 143 additions & 128 deletions
Original file line numberDiff line numberDiff line change
@@ -180,9 +180,7 @@ export const Clone = observer((props: Props) => {
180180
const headRendered = (
181181
<>
182182
{/* //TODO(Anton): make global reset styles. */}
183-
<style>
184-
{'p { margin: 0;}'}
185-
</style>
183+
<style>{'p { margin: 0;}'}</style>
186184

187185
{props.elements.breadcrumbs}
188186

@@ -259,6 +257,9 @@ export const Clone = observer((props: Props) => {
259257
const jdbcConnectionStr = getJdbcConnectionStr(clone)
260258
const psqlConnectionStr = getPsqlConnectionStr(clone)
261259

260+
const hasConnectionInfo =
261+
sshPortForwardingUrl || jdbcConnectionStr || psqlConnectionStr
262+
262263
// Controls.
263264
const isDisabledControls =
264265
isResettingClone ||
@@ -307,9 +308,7 @@ export const Clone = observer((props: Props) => {
307308
className={classes.actionButton}
308309
>
309310
Reload info
310-
{isReloading && (
311-
<Spinner size="sm" className={classes.spinner} />
312-
)}
311+
{isReloading && <Spinner size="sm" className={classes.spinner} />}
313312
</Button>
314313
</div>
315314

@@ -405,139 +404,155 @@ export const Clone = observer((props: Props) => {
405404
<span className={classes.paramTitle}>
406405
Physical data diff size:
407406
</span>
408-
{formatBytesIEC(clone.metadata.cloneDiffSize)}
407+
{clone.metadata.cloneDiffSize
408+
? formatBytesIEC(clone.metadata.cloneDiffSize)
409+
: '-'}
409410
</p>
410411

411412
<p className={classes.text}>
412413
<span className={classes.paramTitle}>Clone creation time:</span>
413-
{round(clone.metadata.cloningTime, 2)} s
414+
{clone.metadata.cloningTime
415+
? `${round(clone.metadata.cloningTime, 2)} s`
416+
: '-'}
414417
</p>
415418
</div>
416419

417420
<br />
418421

419-
<p>
420-
<strong>Connection info</strong>
421-
</p>
422-
423-
{sshPortForwardingUrl && (
424-
<div className={classes.fieldBlock}>
425-
In a separate console, set up SSH port forwarding (and keep it
426-
running):
427-
<div className={classes.copyFieldContainer}>
428-
<TextField
429-
variant="outlined"
430-
label="SSH port forwarding"
431-
value={sshPortForwardingUrl}
432-
className={classes.textField}
433-
margin="normal"
434-
fullWidth
435-
// @ts-ignore
436-
readOnly
437-
InputLabelProps={{
438-
shrink: true,
439-
style: styles.inputFieldLabel,
440-
}}
441-
FormHelperTextProps={{
442-
style: styles.inputFieldHelper,
443-
}}
444-
/>
445-
<IconButton
446-
className={classes.copyButton}
447-
aria-label="Copy"
448-
onClick={() => copyToClipboard(sshPortForwardingUrl)}
449-
>
450-
{icons.copyIcon}
451-
</IconButton>
452-
</div>
453-
</div>
422+
{hasConnectionInfo && (
423+
<>
424+
<p>
425+
<strong>Connection info</strong>
426+
</p>
427+
428+
{sshPortForwardingUrl && (
429+
<div className={classes.fieldBlock}>
430+
In a separate console, set up SSH port forwarding (and keep it
431+
running):
432+
<div className={classes.copyFieldContainer}>
433+
<TextField
434+
variant="outlined"
435+
label="SSH port forwarding"
436+
value={sshPortForwardingUrl}
437+
className={classes.textField}
438+
margin="normal"
439+
fullWidth
440+
// @ts-ignore
441+
readOnly
442+
InputLabelProps={{
443+
shrink: true,
444+
style: styles.inputFieldLabel,
445+
}}
446+
FormHelperTextProps={{
447+
style: styles.inputFieldHelper,
448+
}}
449+
/>
450+
<IconButton
451+
className={classes.copyButton}
452+
aria-label="Copy"
453+
onClick={() => copyToClipboard(sshPortForwardingUrl)}
454+
>
455+
{icons.copyIcon}
456+
</IconButton>
457+
</div>
458+
</div>
459+
)}
460+
461+
{psqlConnectionStr && (
462+
<div className={classes.fieldBlock}>
463+
<div className={classes.copyFieldContainer}>
464+
<TextField
465+
variant="outlined"
466+
id="psqlConnStr"
467+
label="psql connection string"
468+
value={psqlConnectionStr}
469+
className={classes.textField}
470+
margin="normal"
471+
fullWidth
472+
// @ts-ignore
473+
readOnly
474+
InputLabelProps={{
475+
shrink: true,
476+
style: styles.inputFieldLabel,
477+
}}
478+
FormHelperTextProps={{
479+
style: styles.inputFieldHelper,
480+
}}
481+
/>
482+
<IconButton
483+
className={classes.copyButton}
484+
aria-label="Copy"
485+
onClick={() => copyToClipboard(psqlConnectionStr)}
486+
>
487+
{icons.copyIcon}
488+
</IconButton>
489+
</div>
490+
&nbsp;
491+
<Tooltip
492+
content={
493+
<>
494+
Used to connect to Postgres using psql. Change DBNAME
495+
to&nbsp; name of the database you want to connect. Use
496+
PGPASSWORD&nbsp; environment variable to set database
497+
password or type&nbsp; it when prompted.
498+
</>
499+
}
500+
>
501+
<span className={classes.textFieldInfo}>
502+
{icons.infoIcon}
503+
</span>
504+
</Tooltip>
505+
</div>
506+
)}
507+
508+
{jdbcConnectionStr && (
509+
<div className={classes.fieldBlock}>
510+
<div className={classes.copyFieldContainer}>
511+
<TextField
512+
variant="outlined"
513+
label="JDBC connection string"
514+
value={jdbcConnectionStr}
515+
className={classes.textField}
516+
margin="normal"
517+
fullWidth
518+
// @ts-ignore
519+
readOnly
520+
InputLabelProps={{
521+
shrink: true,
522+
style: styles.inputFieldLabel,
523+
}}
524+
FormHelperTextProps={{
525+
style: styles.inputFieldHelper,
526+
}}
527+
/>
528+
<IconButton
529+
className={classes.copyButton}
530+
aria-label="Copy"
531+
onClick={() => copyToClipboard(jdbcConnectionStr)}
532+
>
533+
{icons.copyIcon}
534+
</IconButton>
535+
</div>
536+
&nbsp;
537+
<Tooltip
538+
content={
539+
<>
540+
Used to connect to Postgres using JDBC. Change DBNAME
541+
to&nbsp; name of the database you want to connect,
542+
change DBPASSWORD&nbsp; to the password you’ve used on
543+
clone creation.
544+
</>
545+
}
546+
>
547+
<span className={classes.textFieldInfo}>
548+
{icons.infoIcon}
549+
</span>
550+
</Tooltip>
551+
</div>
552+
)}
553+
</>
454554
)}
455555

456-
<div className={classes.fieldBlock}>
457-
<div className={classes.copyFieldContainer}>
458-
<TextField
459-
variant="outlined"
460-
id="psqlConnStr"
461-
label="psql connection string"
462-
value={psqlConnectionStr}
463-
className={classes.textField}
464-
margin="normal"
465-
fullWidth
466-
// @ts-ignore
467-
readOnly
468-
InputLabelProps={{
469-
shrink: true,
470-
style: styles.inputFieldLabel,
471-
}}
472-
FormHelperTextProps={{
473-
style: styles.inputFieldHelper,
474-
}}
475-
/>
476-
<IconButton
477-
className={classes.copyButton}
478-
aria-label="Copy"
479-
onClick={() => copyToClipboard(psqlConnectionStr)}
480-
>
481-
{icons.copyIcon}
482-
</IconButton>
483-
</div>
484-
&nbsp;
485-
<Tooltip
486-
content={
487-
<>
488-
Used to connect to Postgres using psql. Change DBNAME to&nbsp;
489-
name of the database you want to connect. Use PGPASSWORD&nbsp;
490-
environment variable to set database password or type&nbsp; it
491-
when prompted.
492-
</>
493-
}
494-
>
495-
<span className={classes.textFieldInfo}>{icons.infoIcon}</span>
496-
</Tooltip>
497-
</div>
498-
499-
<div className={classes.fieldBlock}>
500-
<div className={classes.copyFieldContainer}>
501-
<TextField
502-
variant="outlined"
503-
label="JDBC connection string"
504-
value={jdbcConnectionStr}
505-
className={classes.textField}
506-
margin="normal"
507-
fullWidth
508-
// @ts-ignore
509-
readOnly
510-
InputLabelProps={{
511-
shrink: true,
512-
style: styles.inputFieldLabel,
513-
}}
514-
FormHelperTextProps={{
515-
style: styles.inputFieldHelper,
516-
}}
517-
/>
518-
<IconButton
519-
className={classes.copyButton}
520-
aria-label="Copy"
521-
onClick={() => copyToClipboard(jdbcConnectionStr)}
522-
>
523-
{icons.copyIcon}
524-
</IconButton>
525-
</div>
526-
&nbsp;
527-
<Tooltip
528-
content={
529-
<>
530-
Used to connect to Postgres using JDBC. Change DBNAME to&nbsp;
531-
name of the database you want to connect, change
532-
DBPASSWORD&nbsp; to the password you’ve used on clone
533-
creation.
534-
</>
535-
}
536-
>
537-
<span className={classes.textFieldInfo}>{icons.infoIcon}</span>
538-
</Tooltip>
539-
</div>
540-
541556
<br />
542557

543558
<div className={classes.fieldBlock}>

0 commit comments

Comments
 (0)