-
Notifications
You must be signed in to change notification settings - Fork 22
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #33 from rszwajko/providers
Convert Providers screen to Console page
- Loading branch information
Showing
21 changed files
with
1,224 additions
and
39 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,22 +1,52 @@ | ||
| { | ||
| "{{type}} provider {{name}} will no longer be selectable as a migration source.": "", | ||
| "{{type}} provider {{name}} will no longer be selectable as a migration target.": "", | ||
| "Actions": "", | ||
| "Add Provider": "", | ||
| "Cancel": "", | ||
| "Cannot remove provider": "", | ||
| "Clear all filters": "", | ||
| "Clusters": "", | ||
| "Delete": "", | ||
| "Delete Provider": "", | ||
| "Edit Provider": "", | ||
| "Endpoint": "", | ||
| "False": "", | ||
| "Filter by endpoint": "", | ||
| "Filter by name": "", | ||
| "Filter by namespace": "", | ||
| "Hosts": "", | ||
| "KubeVirt": "", | ||
| "Loading": "", | ||
| "Manage Columns": "", | ||
| "Mappings for Import": "", | ||
| "Name": "", | ||
| "Namespace": "", | ||
| "Networks": "", | ||
| "No information": "", | ||
| "No results found": "", | ||
| "No results match the filter criteria. Clear all filters and try again.": "", | ||
| "oVirt": "", | ||
| "Permanently delete provider?": "", | ||
| "Plans for Import": "", | ||
| "Providers": "", | ||
| "Providers for Import": "", | ||
| "Ready": "", | ||
| "Reorder": "", | ||
| "Restore default colums": "", | ||
| "Save": "", | ||
| "Select a default migration network for the provider. This network will be used for migrating data to all namespaces to which it is attached.": "", | ||
| "Select Filter": "", | ||
| "Select migration network": "", | ||
| "Selected columns will be displayed in the table.": "", | ||
| "Storage": "", | ||
| "Table column management": "", | ||
| "Unable to retrieve data": "" | ||
| "The host provider cannot be edited": "", | ||
| "This provider cannot be edited because it has running migrations": "", | ||
| "True": "", | ||
| "Type": "", | ||
| "Unable to retrieve data": "", | ||
| "Unknown": "", | ||
| "VMs": "", | ||
| "VMware": "" | ||
| } |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| import React, { useState } from 'react'; | ||
| import { useTranslation } from 'src/utils/i18n'; | ||
|
|
||
| import { ActionService } from '@openshift-console/dynamic-plugin-sdk'; | ||
| import { Dropdown, DropdownItem, DropdownToggle, KebabToggle } from '@patternfly/react-core'; | ||
|
|
||
| export const createActions = (variant: 'kebab' | 'dropdown') => | ||
| function GenericActions({ actions }: ActionService) { | ||
| const { t } = useTranslation(); | ||
| const [isActionMenuOpen, setIsActionMenuOpen] = useState(false); | ||
| const isPlain = variant === 'kebab'; | ||
| const toggle = | ||
| variant === 'kebab' ? ( | ||
| <KebabToggle onToggle={setIsActionMenuOpen} /> | ||
| ) : ( | ||
| <DropdownToggle onToggle={setIsActionMenuOpen}>{t('Actions')}</DropdownToggle> | ||
| ); | ||
| return ( | ||
| <> | ||
| <Dropdown | ||
| position="right" | ||
| onSelect={() => setIsActionMenuOpen(!isActionMenuOpen)} | ||
| toggle={toggle} | ||
| isOpen={isActionMenuOpen} | ||
| isPlain={isPlain} | ||
| dropdownItems={actions.map(({ id, label, cta, disabled, disabledTooltip }) => ( | ||
| <DropdownItem | ||
| key={id} | ||
| onClick={typeof cta === 'function' ? cta : () => undefined} | ||
| isAriaDisabled={disabled} | ||
| tooltip={disabledTooltip} | ||
| > | ||
| {label} | ||
| </DropdownItem> | ||
| ))} | ||
| /> | ||
| </> | ||
| ); | ||
| }; |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,115 @@ | ||
| import React, { JSXElementConstructor } from 'react'; | ||
| import { Link } from 'react-router-dom'; | ||
| import { RowProps } from 'src/components/TableView'; | ||
| import * as C from 'src/utils/constants'; | ||
| import { CONDITIONS, PROVIDERS } from 'src/utils/enums'; | ||
| import { useTranslation } from 'src/utils/i18n'; | ||
|
|
||
| import { PATH_PREFIX } from '@app/common/constants'; | ||
| import { StatusIcon } from '@migtools/lib-ui'; | ||
| import { ResourceLink } from '@openshift-console/dynamic-plugin-sdk'; | ||
| import { Button, Popover } from '@patternfly/react-core'; | ||
| import { DatabaseIcon, NetworkIcon, OutlinedHddIcon } from '@patternfly/react-icons'; | ||
| import { Td, Tr } from '@patternfly/react-table'; | ||
|
|
||
| import { MergedProvider } from './data'; | ||
| import { ProviderActions } from './providerActions'; | ||
|
|
||
| interface CellProps { | ||
| value: string; | ||
| entity: MergedProvider; | ||
| t?: (k: string) => string; | ||
| } | ||
|
|
||
| const StatusCell = ({ value, entity: { conditions }, t }: CellProps) => { | ||
| const existingConditions = Object.values(conditions).filter(Boolean); | ||
| const toState = (value) => { | ||
| switch (value) { | ||
| case 'True': | ||
| return 'Ok'; | ||
| case 'False': | ||
| return 'Error'; | ||
| default: | ||
| return 'Unknown'; | ||
| } | ||
| }; | ||
|
|
||
| const label = CONDITIONS[value]?.(t) ?? t('Unknown'); | ||
| return ( | ||
| <Popover | ||
| hasAutoWidth | ||
| bodyContent={ | ||
| <div> | ||
| {existingConditions.length > 0 | ||
| ? existingConditions.map(({ message, status }) => { | ||
| return <StatusIcon key={message} status={toState(status)} label={message} />; | ||
| }) | ||
| : t('No information')} | ||
| </div> | ||
| } | ||
| > | ||
| <Button variant="link" isInline aria-label={label}> | ||
| <StatusIcon status={toState(value)} label={label} /> | ||
| </Button> | ||
| </Popover> | ||
| ); | ||
| }; | ||
|
|
||
| const TextCell = ({ value }: { value: string }) => <>{value ?? ''}</>; | ||
|
|
||
| const TextWithIcon = ({ value, Icon }: { value: string; Icon: JSXElementConstructor<unknown> }) => ( | ||
| <> | ||
| {value && ( | ||
| <> | ||
| <Icon /> <TextCell value={value} /> | ||
| </> | ||
| )} | ||
| </> | ||
| ); | ||
|
|
||
| const ProviderLink = ({ value, entity }: CellProps) => ( | ||
| <ResourceLink kind={entity.kind} name={value} namespace={entity?.namespace} /> | ||
| ); | ||
|
|
||
| const HostCell = ({ value, entity: { ready, name, type } }: CellProps) => ( | ||
| <> | ||
| {ready === 'True' && value && type === 'vsphere' ? ( | ||
| <Link to={`${PATH_PREFIX}/providers/vsphere/${name}`}> | ||
| <TextWithIcon Icon={OutlinedHddIcon} value={value} /> | ||
| </Link> | ||
| ) : ( | ||
| <TextWithIcon Icon={OutlinedHddIcon} value={value} /> | ||
| )} | ||
| </> | ||
| ); | ||
|
|
||
| const cellCreator: Record<string, (props: CellProps) => JSX.Element> = { | ||
| [C.NAME]: ProviderLink, | ||
| [C.READY]: StatusCell, | ||
| [C.URL]: TextCell, | ||
| [C.TYPE]: ({ value, t }: CellProps) => <TextCell value={PROVIDERS?.[value]?.(t)} />, | ||
| [C.NAMESPACE]: ({ value }: CellProps) => <ResourceLink kind="Namespace" name={value} />, | ||
| [C.ACTIONS]: ProviderActions, | ||
| [C.NETWORK_COUNT]: ({ value }: CellProps) => <TextWithIcon Icon={NetworkIcon} value={value} />, | ||
| [C.STORAGE_COUNT]: ({ value }: CellProps) => <TextWithIcon Icon={DatabaseIcon} value={value} />, | ||
| [C.HOST_COUNT]: HostCell, | ||
| }; | ||
|
|
||
| const ProviderRow = ({ columns, entity }: RowProps<MergedProvider>) => { | ||
| const { t } = useTranslation(); | ||
| return ( | ||
| <Tr> | ||
| {columns.map(({ id, toLabel }) => ( | ||
| <Td key={id} dataLabel={toLabel(t)}> | ||
| {cellCreator?.[id]?.({ | ||
| value: entity[id], | ||
| entity, | ||
| t, | ||
| }) ?? <TextCell value={String(entity[id] ?? '')} />} | ||
| </Td> | ||
| ))} | ||
| </Tr> | ||
| ); | ||
| }; | ||
|
|
||
| export default ProviderRow; |
Oops, something went wrong.