-
Notifications
You must be signed in to change notification settings - Fork 30
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[WIP] CNV-23376: Create new page for InstanceTypes VM creation flow
Signed-off-by: Aviv Turgeman <aturgema@redhat.com>
- Loading branch information
Showing
15 changed files
with
337 additions
and
8 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
30 changes: 30 additions & 0 deletions
30
src/views/catalog/CreateFromInstanceTypes/CreateFromInstanceType.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| .create-vm-instance-type-section { | ||
| padding: var(--pf-global--spacer--md); | ||
| &__step { | ||
| font-size: var(--pf-global--FontSize--xl); | ||
| height: var(--pf-global--spacer--xl); | ||
| width: var(--pf-global--spacer--xl); | ||
| margin-right: var(--pf-global--spacer--md); | ||
| background-color: var(--pf-global--BackgroundColor--200); | ||
| color: var(--pf-global--Color--dark-100); | ||
| border-radius: 50%; | ||
| display: inline-grid; | ||
| align-items: center; | ||
| text-align: center; | ||
| } | ||
| &__step.current { | ||
| background-color: var(--pf-global--primary-color--100); | ||
| color: var(--pf-global--Color--light-100); | ||
| font-weight: bolder; | ||
| } | ||
| &__header { | ||
| font-size: var(--pf-global--FontSize--xl); | ||
| } | ||
| &__header.current { | ||
| color: var(--pf-global--primary-color--100); | ||
| font-weight: bolder; | ||
| } | ||
| &__add-volume-btn { | ||
| padding-right: var(--pf-global--spacer--sm); | ||
| } | ||
| } |
53 changes: 53 additions & 0 deletions
53
src/views/catalog/CreateFromInstanceTypes/CreateFromInstanceType.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,53 @@ | ||
| import React, { FC, useState } from 'react'; | ||
| import { RouteComponentProps } from 'react-router-dom'; | ||
|
|
||
| import { t } from '@kubevirt-utils/hooks/useKubevirtTranslation'; | ||
| import { Card, Divider, Grid, GridItem, List } from '@patternfly/react-core'; | ||
|
|
||
| import CreateVMFooter from './components/CreateVMFooter/CreateVMFooter'; | ||
| import SectionListItem from './components/SectionListItem/SectionListItem'; | ||
| import { INSTANCE_TYPES_SECTIONS } from './constants'; | ||
|
|
||
| import './CreateFromInstanceType.scss'; | ||
|
|
||
| const CreateFromInstanceType: FC<RouteComponentProps<{ ns: string }>> = () => { | ||
| const sectionState = useState<INSTANCE_TYPES_SECTIONS>(INSTANCE_TYPES_SECTIONS.SELECT_VOLUME); | ||
| return ( | ||
| <> | ||
| <Grid className="co-dashboard-body"> | ||
| <GridItem> | ||
| <Card> | ||
| <List isPlain> | ||
| <SectionListItem | ||
| headerText={t('Select bootable Volume')} | ||
| sectionKey={INSTANCE_TYPES_SECTIONS.SELECT_VOLUME} | ||
| sectionState={sectionState} | ||
| > | ||
| <div>Placeholder for BootableVolumesTable</div> | ||
| </SectionListItem> | ||
| <Divider inset={{ default: 'insetLg' }} /> | ||
| <SectionListItem | ||
| headerText={t('Select InstanceType')} | ||
| sectionKey={INSTANCE_TYPES_SECTIONS.SELECT_INSTANCE_TYPE} | ||
| sectionState={sectionState} | ||
| > | ||
| <div>Placeholder for InstanceTypesCards</div> | ||
| </SectionListItem> | ||
| <Divider inset={{ default: 'insetLg' }} /> | ||
| <SectionListItem | ||
| headerText={t('VirtualMachine details')} | ||
| sectionKey={INSTANCE_TYPES_SECTIONS.VM_DETAILS} | ||
| sectionState={sectionState} | ||
| > | ||
| <div>Placeholder for VMReviewDetails</div> | ||
| </SectionListItem> | ||
| </List> | ||
| </Card> | ||
| </GridItem> | ||
| </Grid> | ||
| <CreateVMFooter /> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default CreateFromInstanceType; |
3 changes: 3 additions & 0 deletions
3
src/views/catalog/CreateFromInstanceTypes/components/CreateVMFooter/CreateVMFooter.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| .create-vm-instance-type-footer { | ||
| padding: var(--pf-global--spacer--lg); | ||
| } |
45 changes: 45 additions & 0 deletions
45
src/views/catalog/CreateFromInstanceTypes/components/CreateVMFooter/CreateVMFooter.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| import React, { FC, useState } from 'react'; | ||
|
|
||
| import { useKubevirtTranslation } from '@kubevirt-utils/hooks/useKubevirtTranslation'; | ||
| import { | ||
| Button, | ||
| ButtonVariant, | ||
| Checkbox, | ||
| Split, | ||
| SplitItem, | ||
| Stack, | ||
| StackItem, | ||
| } from '@patternfly/react-core'; | ||
|
|
||
| import './CreateVMFooter.scss'; | ||
|
|
||
| const CreateVMFooter: FC = () => { | ||
| const { t } = useKubevirtTranslation(); | ||
| const [startVM, setStartVM] = useState(true); | ||
| return ( | ||
| <footer className="create-vm-instance-type-footer"> | ||
| <Stack hasGutter> | ||
| <StackItem> | ||
| <Checkbox | ||
| id="start-after-create-checkbox" | ||
| isChecked={startVM} | ||
| onChange={setStartVM} | ||
| label={t('Start this VirtualMachine after creation')} | ||
| /> | ||
| </StackItem> | ||
| <StackItem> | ||
| <Split hasGutter> | ||
| <SplitItem> | ||
| <Button variant={ButtonVariant.primary}>{t('Quick create VirtualMachine')}</Button> | ||
| </SplitItem> | ||
| <SplitItem> | ||
| <Button variant={ButtonVariant.link}>{t('Cancel')}</Button> | ||
| </SplitItem> | ||
| </Split> | ||
| </StackItem> | ||
| </Stack> | ||
| </footer> | ||
| ); | ||
| }; | ||
|
|
||
| export default CreateVMFooter; |
55 changes: 55 additions & 0 deletions
55
src/views/catalog/CreateFromInstanceTypes/components/SectionListItem/SectionListItem.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,55 @@ | ||
| import React, { FC } from 'react'; | ||
| import classNames from 'classnames'; | ||
|
|
||
| import { INSTANCE_TYPES_SECTIONS } from '@catalog/CreateFromInstanceTypes/constants'; | ||
| import { useKubevirtTranslation } from '@kubevirt-utils/hooks/useKubevirtTranslation'; | ||
| import { Button, ButtonVariant, ListItem, Split, SplitItem } from '@patternfly/react-core'; | ||
|
|
||
| type SectionListItemProps = { | ||
| sectionKey: INSTANCE_TYPES_SECTIONS; | ||
| headerText: string; | ||
| sectionState: [ | ||
| INSTANCE_TYPES_SECTIONS, | ||
| React.Dispatch<React.SetStateAction<INSTANCE_TYPES_SECTIONS>>, | ||
| ]; | ||
| }; | ||
|
|
||
| const SectionListItem: FC<SectionListItemProps> = ({ | ||
| sectionKey, | ||
| headerText, | ||
| sectionState: [currentSection, setCurrentSection], | ||
| children, | ||
| }) => { | ||
| const { t } = useKubevirtTranslation(); | ||
| const currentSectionClass = currentSection === sectionKey && 'current'; | ||
| return ( | ||
| <ListItem | ||
| onClick={() => setCurrentSection(sectionKey)} | ||
| className="create-vm-instance-type-section" | ||
| > | ||
| <Split className="create-vm-instance-type-section__add-volume-btn"> | ||
| <SplitItem | ||
| className={classNames('create-vm-instance-type-section__step', currentSectionClass)} | ||
| > | ||
| {sectionKey} | ||
| </SplitItem> | ||
| <SplitItem | ||
| className={classNames('create-vm-instance-type-section__header', currentSectionClass)} | ||
| > | ||
| {headerText} | ||
| </SplitItem> | ||
| {sectionKey === INSTANCE_TYPES_SECTIONS.SELECT_VOLUME && ( | ||
| <> | ||
| <SplitItem isFilled /> | ||
| <SplitItem> | ||
| <Button variant={ButtonVariant.secondary}>{t('Add bootable Volume')}</Button> | ||
| </SplitItem> | ||
| </> | ||
| )} | ||
| </Split> | ||
| {children} | ||
| </ListItem> | ||
| ); | ||
| }; | ||
|
|
||
| export default SectionListItem; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| export enum INSTANCE_TYPES_SECTIONS { | ||
| SELECT_VOLUME = 1, | ||
| SELECT_INSTANCE_TYPE = 2, | ||
| VM_DETAILS = 3, | ||
| } |
9 changes: 9 additions & 0 deletions
9
src/views/catalog/CreateVMHorizontalNav/CreateVMHorizontalNav.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| .create-vm-horizontal-nav{ | ||
| .pf-c-tabs__item { | ||
| margin-right: var(--pf-global--spacer--xl); | ||
| } | ||
|
|
||
| .pf-c-tab-content { | ||
| height: 100%; | ||
| } | ||
| } |
68 changes: 68 additions & 0 deletions
68
src/views/catalog/CreateVMHorizontalNav/CreateVMHorizontalNav.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,68 @@ | ||
| import React, { FC, useState } from 'react'; | ||
| import { RouteComponentProps } from 'react-router-dom'; | ||
|
|
||
| import CreateFromInstanceType from '@catalog/CreateFromInstanceTypes/CreateFromInstanceType'; | ||
| import TemplatesCatalog from '@catalog/templatescatalog/TemplatesCatalog'; | ||
| import { ALL_NAMESPACES } from '@kubevirt-utils/hooks/constants'; | ||
| import { useKubevirtTranslation } from '@kubevirt-utils/hooks/useKubevirtTranslation'; | ||
| import { Stack, StackItem, Tab, Tabs, Title } from '@patternfly/react-core'; | ||
| import { CatalogIcon, ImageIcon } from '@patternfly/react-icons'; | ||
|
|
||
| import CreateVMTabTitle from './components/CreateVMTabTitle/CreateVMTabTitle'; | ||
| import { CREATE_VM_TAB } from './constants'; | ||
|
|
||
| import './CreateVMHorizontalNav.scss'; | ||
|
|
||
| const CreateVMHorizontalNav: FC<RouteComponentProps<{ ns: string }>> = ({ | ||
| history, | ||
| location, | ||
| match, | ||
| }) => { | ||
| const { t } = useKubevirtTranslation(); | ||
| const [currentTab, setCurrentTab] = useState<CREATE_VM_TAB>( | ||
| location.pathname.includes(CREATE_VM_TAB.INSTANCE_TYPES) | ||
| ? CREATE_VM_TAB.INSTANCE_TYPES | ||
| : CREATE_VM_TAB.CATALOG, | ||
| ); | ||
|
|
||
| const handleTabClick = ( | ||
| event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent, | ||
| tabIndex: CREATE_VM_TAB, | ||
| ) => { | ||
| setCurrentTab(tabIndex); | ||
| history.push( | ||
| `/k8s/${ | ||
| match?.params?.ns ? `ns/${match?.params?.ns}` : ALL_NAMESPACES | ||
| }/templatescatalog${tabIndex}`, | ||
| ); | ||
| }; | ||
|
|
||
| return ( | ||
| <div className="create-vm-horizontal-nav"> | ||
| <div className="pf-c-page__main-breadcrumb"> | ||
| <Stack hasGutter className="co-m-pane__heading"> | ||
| <StackItem> | ||
| <Title headingLevel="h1">{t('Create new VirtualMachine')}</Title> | ||
| </StackItem> | ||
| <StackItem>{t('Select an option from which to create a VirtualMachine.')}</StackItem> | ||
| </Stack> | ||
| </div> | ||
| <Tabs usePageInsets activeKey={currentTab} onSelect={handleTabClick}> | ||
| <Tab | ||
| eventKey={CREATE_VM_TAB.CATALOG} | ||
| title={<CreateVMTabTitle Icon={CatalogIcon} titleText={t('Templates catalog')} />} | ||
| > | ||
| <TemplatesCatalog match={match} location={location} history={history} /> | ||
| </Tab> | ||
| <Tab | ||
| eventKey={CREATE_VM_TAB.INSTANCE_TYPES} | ||
| title={<CreateVMTabTitle Icon={ImageIcon} titleText={t('InstanceTypes')} badge />} | ||
| > | ||
| <CreateFromInstanceType match={match} location={location} history={history} /> | ||
| </Tab> | ||
| </Tabs> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default CreateVMHorizontalNav; |
Oops, something went wrong.