Skip to content

Commit 5083e79

Browse files
Tikdev00rechartepercona-robot
authored
EVEREST-1912 | add storage class to overview page (#1198)
* EVEREST-1912 | add stoarge class to overview page * Everest-1963 storage class field fix (#1264) * EVEREST-1963 | add tooltip for disabled storage class * EVEREST-1963 | fix tooltip handling * EVEREST-1963 | fix failing test for DST check --------- Co-authored-by: Percona Platform Robot <[email protected]> --------- Co-authored-by: Diogo Recharte <[email protected]> Co-authored-by: Percona Platform Robot <[email protected]>
1 parent ed2d1b1 commit 5083e79

File tree

10 files changed

+75
-47
lines changed

10 files changed

+75
-47
lines changed

‎ui/apps/everest/src/components/cluster-form/advanced-configuration/advanced-configuration.tsx

+7-2
Original file line numberDiff line numberDiff line change
@@ -87,11 +87,16 @@ export const AdvancedConfigurationForm = ({
8787
label={Messages.labels.storageClass}
8888
loading={clusterInfoLoading}
8989
options={clusterInfo?.storageClassNames || []}
90+
disabled={loadingDefaultsForEdition}
91+
tooltipText={
92+
loadingDefaultsForEdition
93+
? Messages.tooltipTexts.storageClass
94+
: undefined
95+
}
9096
autoCompleteProps={{
91-
disableClearable: true,
92-
disabled: loadingDefaultsForEdition,
9397
sx: {
9498
mt: 0,
99+
width: '135px',
95100
},
96101
}}
97102
/>

‎ui/apps/everest/src/components/cluster-form/advanced-configuration/messages.ts

+3
Original file line numberDiff line numberDiff line change
@@ -51,4 +51,7 @@ export const Messages = {
5151
invalid: 'Invalid',
5252
},
5353
},
54+
tooltipTexts: {
55+
storageClass: 'Storage can’t be changed.',
56+
},
5457
};

‎ui/apps/everest/src/pages/db-cluster-details/cluster-overview/cards/card.types.ts

+1
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@ export type ConnectionDetailsOverviewCardProps = {
4343
export type AdvancedConfigurationOverviewCardProps = {
4444
externalAccess: boolean;
4545
parameters: boolean;
46+
storageClass: string;
4647
} & OverviewCardProps;
4748

4849
export type MonitoringConfigurationOverviewCardProps = {

‎ui/apps/everest/src/pages/db-cluster-details/cluster-overview/cards/db-details/advanced-configuration/advanced-configuration.tsx

+5-1
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ export const AdvancedConfiguration = ({
3131
loading,
3232
externalAccess,
3333
parameters,
34+
storageClass,
3435
}: AdvancedConfigurationOverviewCardProps) => {
3536
const {
3637
canUpdateDb,
@@ -104,7 +105,10 @@ export const AdvancedConfiguration = ({
104105
parameters ? Messages.fields.enabled : Messages.fields.disabled
105106
}
106107
/>
107-
108+
<OverviewSectionRow
109+
label={Messages.fields.storageClass}
110+
contentString={storageClass}
111+
/>
108112
{openEditModal && dbCluster && (
109113
<AdvancedConfigurationEditModal
110114
open={openEditModal}

‎ui/apps/everest/src/pages/db-cluster-details/cluster-overview/cards/db-details/advanced-configuration/edit-advanced-configuration/edit-advanced-configuration.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,7 @@ export const AdvancedConfigurationEditModal = ({
6363
>
6464
<AdvancedConfigurationForm
6565
dbType={dbEngineToDbType(dbCluster?.spec?.engine?.type)}
66+
loadingDefaultsForEdition
6667
/>
6768
</FormDialog>
6869
);

‎ui/apps/everest/src/pages/db-cluster-details/cluster-overview/cards/db-details/db-details.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ export const DbDetails = ({
4040
monitoring,
4141
externalAccess,
4242
parameters,
43+
storageClass,
4344
}: DatabaseDetailsOverviewCardProps) => {
4445
const { data: monitoringInstances } =
4546
useMonitoringInstancesForNamespace(namespace);
@@ -91,6 +92,7 @@ export const DbDetails = ({
9192
<AdvancedConfiguration
9293
externalAccess={externalAccess}
9394
parameters={parameters}
95+
storageClass={storageClass}
9496
/>
9597
</Stack>
9698
</OverviewCard>

‎ui/apps/everest/src/pages/db-cluster-details/cluster-overview/cluster-overview.messages.ts

+1
Original file line numberDiff line numberDiff line change
@@ -41,5 +41,6 @@ export const Messages = {
4141
disk: 'Disk',
4242
memory: 'Memory',
4343
backupStorages: 'Backup\u00A0storage',
44+
storageClass: 'Storage class',
4445
},
4546
};

‎ui/apps/everest/src/pages/db-cluster-details/cluster-overview/cluster-overview.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -104,6 +104,7 @@ export const ClusterOverview = () => {
104104
}
105105
monitoring={dbCluster?.spec.monitoring.monitoringConfigName}
106106
parameters={!!dbCluster?.spec.engine.config}
107+
storageClass={dbCluster?.spec.engine.storage.class!}
107108
/>
108109
<ResourcesDetails
109110
dbCluster={dbCluster}

‎ui/packages/ui-lib/src/form/inputs/auto-complete/auto-complete.tsx

+53-44
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,9 @@
1-
import { Autocomplete, CircularProgress, TextField } from '@mui/material';
1+
import {
2+
Autocomplete,
3+
CircularProgress,
4+
TextField,
5+
Tooltip,
6+
} from '@mui/material';
27
import { kebabize } from '@percona/utils';
38
import { Controller, useFormContext } from 'react-hook-form';
49
import { AutoCompleteInputProps } from './auto-complete.types';
@@ -14,59 +19,63 @@ function AutoCompleteInput<T>({
1419
loading = false,
1520
isRequired = false,
1621
disabled = false,
22+
tooltipText,
1723
onChange,
1824
}: AutoCompleteInputProps<T>) {
1925
const { control: contextControl } = useFormContext();
2026
const { helperText, ...restTextFieldProps } = textFieldProps;
2127
const { sx, ...restAutocompleteProps } = autoCompleteProps;
28+
2229
return (
2330
<Controller
2431
name={name}
2532
control={control ?? contextControl}
2633
render={({ field, fieldState: { error } }) => (
27-
<Autocomplete
28-
{...field}
29-
sx={{ mt: 3, ...sx }}
30-
options={options}
31-
forcePopupIcon
32-
disabled={disabled}
33-
onChange={(_, newValue) => {
34-
field.onChange(newValue);
35-
if (onChange) {
36-
onChange();
37-
}
38-
}}
39-
data-testid={`${kebabize(name)}-autocomplete`}
40-
// We might generalize this in the future, if we think renderInput should be defined from the outside
41-
renderInput={(params) => (
42-
<TextField
43-
{...params}
44-
error={!!error}
45-
label={label}
46-
helperText={error ? error.message : helperText}
47-
inputProps={{
48-
'data-testid': `text-input-${kebabize(name)}`,
49-
...params.inputProps,
50-
...textFieldProps?.inputProps,
51-
}}
52-
InputProps={{
53-
...params.InputProps,
54-
endAdornment: (
55-
<>
56-
{loading ? (
57-
<CircularProgress color="inherit" size={20} />
58-
) : null}
59-
{params.InputProps.endAdornment}
60-
</>
61-
),
62-
}}
63-
size="small"
64-
required={isRequired}
65-
{...restTextFieldProps}
66-
/>
67-
)}
68-
{...restAutocompleteProps}
69-
/>
34+
<Tooltip title={tooltipText} placement="top" arrow>
35+
<Autocomplete
36+
{...field}
37+
sx={{ mt: 3, ...sx }}
38+
options={options}
39+
forcePopupIcon
40+
disabled={disabled}
41+
onChange={(_, newValue) => {
42+
field.onChange(newValue);
43+
if (onChange) {
44+
onChange();
45+
}
46+
}}
47+
data-testid={`${kebabize(name)}-autocomplete`}
48+
// We might generalize this in the future, if we think renderInput should be defined from the outside
49+
renderInput={(params) => (
50+
<TextField
51+
{...params}
52+
error={!!error}
53+
label={label}
54+
helperText={error ? error.message : helperText}
55+
inputProps={{
56+
'data-testid': `text-input-${kebabize(name)}`,
57+
...params.inputProps,
58+
...textFieldProps?.inputProps,
59+
}}
60+
InputProps={{
61+
...params.InputProps,
62+
endAdornment: (
63+
<>
64+
{loading ? (
65+
<CircularProgress color="inherit" size={20} />
66+
) : null}
67+
{params.InputProps.endAdornment}
68+
</>
69+
),
70+
}}
71+
size="small"
72+
required={isRequired}
73+
{...restTextFieldProps}
74+
/>
75+
)}
76+
{...restAutocompleteProps}
77+
/>
78+
</Tooltip>
7079
)}
7180
{...controllerProps}
7281
/>

‎ui/packages/ui-lib/src/form/inputs/auto-complete/auto-complete.types.ts

+1
Original file line numberDiff line numberDiff line change
@@ -36,5 +36,6 @@ export type AutoCompleteInputProps<T> = {
3636
loading?: boolean;
3737
isRequired?: boolean;
3838
disabled?: boolean;
39+
tooltipText?: string;
3940
onChange?: () => void;
4041
};

0 commit comments

Comments
 (0)