Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit 0b3934e

Browse filesBrowse files
agneumagneum
committed
Merge branch 'feat/instance-summary-clones-size' into 'master'
feat(shared): added total size of clones to instance page header See merge request postgres-ai/database-lab!450
2 parents 170eb80 + 3e61907 commit 0b3934e
Copy full SHA for 0b3934e

File tree

4 files changed

+75
-47
lines changed
Filter options

4 files changed

+75
-47
lines changed

‎ui/packages/shared/pages/Instance/Clones/Header/Item/index.tsx

Copy file name to clipboard
+15Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import styles from './styles.module.scss'
2+
3+
type Props = {
4+
value: React.ReactNode
5+
children: React.ReactNode
6+
}
7+
8+
export const Item = (props: Props) => {
9+
return (
10+
<div className={styles.root}>
11+
<div className={styles.value}>{props.value}</div>
12+
<div className={styles.description}>{props.children}</div>
13+
</div>
14+
)
15+
}

‎ui/packages/shared/pages/Instance/Clones/Header/Item/styles.module.scss

Copy file name to clipboard
+17Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
@import '@postgres.ai/shared/styles/vars';
2+
3+
.root {
4+
font-size: 12px;
5+
text-align: center;
6+
color: $color-gray-semi-dark;
7+
}
8+
9+
.value {
10+
font-weight: bold;
11+
font-size: 14px;
12+
color: $color-black;
13+
}
14+
15+
.description {
16+
margin-top: 4px;
17+
}

‎ui/packages/shared/pages/Instance/Clones/Header/index.tsx

Copy file name to clipboardExpand all lines: ui/packages/shared/pages/Instance/Clones/Header/index.tsx
+32-47Lines changed: 32 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -5,84 +5,69 @@
55
*--------------------------------------------------------------------------
66
*/
77

8-
import { makeStyles } from '@material-ui/core'
9-
10-
import { colors } from '@postgres.ai/shared/styles/colors'
118
import { formatBytesIEC } from '@postgres.ai/shared/utils/units'
129

10+
import { Item } from './Item'
11+
12+
import styles from './styles.module.scss'
13+
1314
type Props = {
1415
expectedCloningTimeS: number
1516
logicalSize: number | null
1617
clonesCount: number
1718
clonesCountLastMonth?: number
1819
}
1920

20-
const useStyles = makeStyles((theme) => ({
21-
root: {
22-
display: 'flex',
23-
justifyContent: 'space-between',
24-
padding: '20px',
25-
26-
[theme.breakpoints.down('xs')]: {
27-
padding: '20px 0',
28-
},
29-
},
30-
item: {
31-
fontSize: '12px',
32-
textAlign: 'center',
33-
color: colors.pgaiDarkGray,
34-
},
35-
accent: {
36-
fontWeight: 'bold',
37-
fontSize: '14px',
38-
color: colors.black,
39-
},
40-
}))
41-
4221
export const Header = (props: Props) => {
4322
const {
4423
expectedCloningTimeS,
4524
logicalSize,
4625
clonesCount,
4726
clonesCountLastMonth,
4827
} = props
49-
const classes = useStyles()
5028

5129
return (
52-
<div className={classes.root}>
53-
<div className={classes.item}>
54-
<span className={classes.accent}>
55-
{expectedCloningTimeS ? `${expectedCloningTimeS} s` : '-'}
56-
</span>
57-
<br />
30+
<div className={styles.root}>
31+
<Item value={expectedCloningTimeS ? `${expectedCloningTimeS} s` : '-'}>
5832
average
5933
<br />
6034
cloning time
61-
</div>
62-
<div className={classes.item}>
63-
<span className={classes.accent}>
64-
{logicalSize ? formatBytesIEC(logicalSize) : '-'}
65-
</span>
66-
<br />
35+
</Item>
36+
37+
<Item
38+
value={
39+
logicalSize ? formatBytesIEC(logicalSize, { precision: 2 }) : '-'
40+
}
41+
>
6742
logical
6843
<br />
6944
data size
70-
</div>
71-
<div className={classes.item}>
72-
<span className={classes.accent}>{clonesCount}</span>
73-
<br />
45+
</Item>
46+
47+
<Item value={clonesCount}>
7448
clones
7549
<br />
7650
now
77-
</div>
51+
</Item>
52+
53+
<Item
54+
value={
55+
logicalSize
56+
? formatBytesIEC(logicalSize * clonesCount, { precision: 2 })
57+
: '-'
58+
}
59+
>
60+
Total
61+
<br />
62+
size of clones
63+
</Item>
64+
7865
{clonesCountLastMonth && (
79-
<div className={classes.item}>
80-
<span className={classes.accent}>{clonesCountLastMonth}</span>
81-
<br />
66+
<Item value={clonesCountLastMonth}>
8267
clones
8368
<br />
8469
in last month
85-
</div>
70+
</Item>
8671
)}
8772
</div>
8873
)

‎ui/packages/shared/pages/Instance/Clones/Header/styles.module.scss

Copy file name to clipboard
+11Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
@import '@postgres.ai/shared/styles/mixins';
2+
3+
.root {
4+
display: flex;
5+
justify-content: space-between;
6+
padding: 20px;
7+
8+
@include sm {
9+
padding: 20px 0;
10+
}
11+
}

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.