/
AdvancedSection.tsx
88 lines (80 loc) · 2.9 KB
/
AdvancedSection.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
import * as React from 'react';
import { FormikValues } from 'formik';
import { Trans, useTranslation } from 'react-i18next';
import { ProgressiveList, ProgressiveListItem } from '@console/shared/src';
import { AppResources } from '../../edit-application/edit-application-types';
import HealthChecks from '../../health-checks/HealthChecks';
import { Resources } from '../import-types';
import FormSection from '../section/FormSection';
import DeploymentConfigSection from './DeploymentConfigSection';
import LabelSection from './LabelSection';
import ResourceLimitSection from './ResourceLimitSection';
import RouteSection from './RouteSection';
import ScalingSection from './ScalingSection';
import ServerlessScalingSection from './ServerlessScalingSection';
type AdvancedSectionProps = {
values: FormikValues;
appResources?: AppResources;
};
const Footer = ({ children }) => {
const { t } = useTranslation();
return (
<Trans
t={t}
ns="devconsole"
defaults="Click on the names to access advanced options for <0></0>."
components={[children]}
/>
);
};
const List: React.FC<AdvancedSectionProps> = ({ appResources, values }) => {
const { t } = useTranslation();
const [visibleItems, setVisibleItems] = React.useState([]);
const handleVisibleItemChange = (item: string) => {
setVisibleItems([...visibleItems, item]);
};
return (
<ProgressiveList
visibleItems={visibleItems}
onVisibleItemChange={handleVisibleItemChange}
Footer={Footer}
>
<ProgressiveListItem name={t('devconsole~Health checks')}>
<HealthChecks title={t('devconsole~Health checks')} resourceType={values.resources} />
</ProgressiveListItem>
{values?.formType === 'edit' ? (
<ProgressiveListItem name={t('devconsole~Deployment')}>
<DeploymentConfigSection
namespace={values.project.name}
resource={appResources?.editAppResource?.data}
/>
</ProgressiveListItem>
) : null}
<ProgressiveListItem name={t('devconsole~Scaling')}>
{values.resources === Resources.KnativeService ? (
<ServerlessScalingSection />
) : (
<ScalingSection name="deployment.replicas" />
)}
</ProgressiveListItem>
<ProgressiveListItem name={t('devconsole~Resource limits')}>
<ResourceLimitSection />
</ProgressiveListItem>
<ProgressiveListItem name={t('devconsole~Labels')}>
<LabelSection />
</ProgressiveListItem>
</ProgressiveList>
);
};
const AdvancedSection: React.FC<AdvancedSectionProps> = ({ values, appResources }) => {
const { t } = useTranslation();
return (
<FormSection title={t('devconsole~Advanced options')}>
<RouteSection route={values.route} resources={values.resources} />
<div>
<List appResources={appResources} values={values} />
</div>
</FormSection>
);
};
export default AdvancedSection;