add initial dataimportcron details page #729
+361
−8
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
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,145 @@ | ||
| import React from 'react'; | ||
|
|
||
| import WizardMetadataLabels from '@catalog/wizard/tabs/metadata/components/WizardMetadataLabels'; | ||
| import DataImportCronModel from '@kubevirt-ui/kubevirt-api/console/models/DataImportCronModel'; | ||
| import { V1beta1DataImportCron } from '@kubevirt-ui/kubevirt-api/containerized-data-importer/models'; | ||
| import { AnnotationsModal } from '@kubevirt-utils/components/AnnotationsModal/AnnotationsModal'; | ||
| import DescriptionItem from '@kubevirt-utils/components/DescriptionItem/DescriptionItem'; | ||
| import { LabelsModal } from '@kubevirt-utils/components/LabelsModal/LabelsModal'; | ||
| import { useModal } from '@kubevirt-utils/components/ModalProvider/ModalProvider'; | ||
| import OwnerDetailsItem from '@kubevirt-utils/components/OwnerDetailsItem/OwnerDetailsItem'; | ||
| import Timestamp from '@kubevirt-utils/components/Timestamp/Timestamp'; | ||
| import { useKubevirtTranslation } from '@kubevirt-utils/hooks/useKubevirtTranslation'; | ||
| import { k8sPatch, ResourceLink } from '@openshift-console/dynamic-plugin-sdk'; | ||
| import { DescriptionList, Grid, GridItem } from '@patternfly/react-core'; | ||
|
|
||
| import DataSourceAnnotations from '../../details/components/DataSourceAnnotations/DataSourceAnnotations'; | ||
|
|
||
| type DataImportCronDetailsGridProps = { | ||
| dataImportCron: V1beta1DataImportCron; | ||
| }; | ||
|
|
||
| export const DataImportCronDetailsGrid: React.FC<DataImportCronDetailsGridProps> = ({ | ||
| dataImportCron, | ||
| }) => { | ||
| const { t } = useKubevirtTranslation(); | ||
| const { createModal } = useModal(); | ||
|
|
||
| return ( | ||
| <Grid hasGutter> | ||
| <GridItem span={5}> | ||
| <DescriptionList> | ||
| <DescriptionItem | ||
| descriptionData={dataImportCron?.metadata?.name} | ||
| descriptionHeader={t('Name')} | ||
| isPopover | ||
| // body-content text copied from: https://github.com/kubevirt-ui/kubevirt-api/blob/main/containerized-data-importer/models/V1ObjectMeta.ts#L96 | ||
| bodyContent={t( | ||
| 'Name must be unique within a namespace. Is required when creating resources, although some resources may allow a client to request the generation of an appropriate name automatically. Name is primarily intended for creation idempotence and configuration definition. Cannot be updated. ', | ||
| )} | ||
| moreInfoURL="http://kubernetes.io/docs/user-guide/identifiers#names" | ||
| breadcrumb="DataImportCron.metadata.name" | ||
| data-test-id={`${dataImportCron?.metadata?.name}-name`} | ||
| /> | ||
| <DescriptionItem | ||
| descriptionData={ | ||
| <ResourceLink kind="Namespace" name={dataImportCron?.metadata?.namespace} /> | ||
| } | ||
| descriptionHeader={t('Namespace')} | ||
| isPopover | ||
| // body-content text copied from: https://github.com/kubevirt-ui/kubevirt-api/blob/main/containerized-data-importer/models/V1ObjectMeta.ts#L102-L104 | ||
| bodyContent={t( | ||
| 'Namespace defines the space within which each name must be unique. An empty namespace is equivalent to the "default" namespace, but "default" is the canonical representation. Not all objects are required to be scoped to a namespace - the value of this field for those objects will be empty. Must be a DNS_LABEL. Cannot be updated. ', | ||
| )} | ||
| moreInfoURL="http://kubernetes.io/docs/user-guide/namespaces" | ||
| breadcrumb="DataImportCron.metadata.namespace" | ||
| /> | ||
|
|
||
| <DescriptionItem | ||
| descriptionData={<WizardMetadataLabels labels={dataImportCron?.metadata?.labels} />} | ||
| descriptionHeader={t('Labels')} | ||
| isPopover | ||
| // body-content text copied from: https://github.com/kubevirt-ui/kubevirt-api/blob/main/containerized-data-importer/models/V1ObjectMeta.ts#L84 | ||
| bodyContent={t( | ||
| 'Map of string keys and values that can be used to organize and categorize (scope and select) objects. May match selectors of replication controllers and services. ', | ||
| )} | ||
| moreInfoURL="http://kubernetes.io/docs/user-guide/labels" | ||
| breadcrumb="DataImportCron.metadata.labels" | ||
| isEdit | ||
| showEditOnTitle | ||
| onEditClick={() => | ||
| createModal(({ isOpen, onClose }) => ( | ||
| <LabelsModal | ||
| obj={dataImportCron} | ||
| isOpen={isOpen} | ||
| onClose={onClose} | ||
| onLabelsSubmit={(labels) => | ||
| k8sPatch({ | ||
| model: DataImportCronModel, | ||
| resource: dataImportCron, | ||
| data: [ | ||
| { | ||
| op: 'replace', | ||
| path: '/metadata/labels', | ||
| value: labels, | ||
| }, | ||
| ], | ||
| }) | ||
| } | ||
| /> | ||
| )) | ||
| } | ||
| data-test-id={`${dataImportCron?.metadata?.name}-labels`} | ||
| /> | ||
| <DescriptionItem | ||
| descriptionData={ | ||
| <DataSourceAnnotations annotations={dataImportCron?.metadata?.annotations} /> | ||
| } | ||
| descriptionHeader={t('Annotations')} | ||
| isPopover | ||
| // body-content text copied from: https://github.com/kubevirt-ui/kubevirt-api/blob/main/containerized-data-importer/models/V1ObjectMeta.ts#L32 | ||
| bodyContent={t( | ||
| 'Annotations is an unstructured key value map stored with a resource that may be set by external tools to store and retrieve arbitrary metadata. They are not queryable and should be preserved when modifying objects. ', | ||
| )} | ||
| moreInfoURL="http://kubernetes.io/docs/user-guide/annotations" | ||
| breadcrumb="DataImportCron.metadata.annotations" | ||
| isEdit | ||
| onEditClick={() => | ||
| createModal(({ isOpen, onClose }) => ( | ||
| <AnnotationsModal | ||
| obj={dataImportCron} | ||
| isOpen={isOpen} | ||
| onClose={onClose} | ||
| onSubmit={(updatedAnnotations) => | ||
| k8sPatch({ | ||
| model: DataImportCronModel, | ||
| resource: dataImportCron, | ||
| data: [ | ||
| { | ||
| op: 'replace', | ||
| path: '/metadata/annotations', | ||
| value: updatedAnnotations, | ||
| }, | ||
| ], | ||
| }) | ||
| } | ||
| /> | ||
| )) | ||
| } | ||
| /> | ||
| <DescriptionItem | ||
| descriptionData={<Timestamp timestamp={dataImportCron?.metadata?.creationTimestamp} />} | ||
| descriptionHeader={t('Created at')} | ||
| isPopover | ||
| // body-content text copied from: https://github.com/kubevirt-ui/kubevirt-api/blob/main/containerized-data-importer/models/V1ObjectMeta.ts#L84 | ||
| bodyContent={t( | ||
| 'Time is a wrapper around time.Time which supports correct marshaling to YAML and JSON. Wrappers are provided for many of the factory methods that the time package offers.', | ||
| )} | ||
| breadcrumb="DataImportCron.metadata.creationTimestamp" | ||
| /> | ||
| <OwnerDetailsItem obj={dataImportCron} /> | ||
| </DescriptionList> | ||
| </GridItem> | ||
| </Grid> | ||
| ); | ||
| }; |
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,47 @@ | ||
| import * as React from 'react'; | ||
| import { RouteComponentProps } from 'react-router'; | ||
|
|
||
| import { V1beta1DataImportCron } from '@kubevirt-ui/kubevirt-api/containerized-data-importer/models'; | ||
| import { | ||
| ConditionsTable, | ||
| K8sResourceCondition, | ||
| } from '@kubevirt-utils/components/ConditionsTable/ConditionsTable'; | ||
| import { useKubevirtTranslation } from '@kubevirt-utils/hooks/useKubevirtTranslation'; | ||
| import { Divider, PageSection, Title } from '@patternfly/react-core'; | ||
|
|
||
| import { DataImportCronDetailsGrid } from './DataImportCronDetailsGrid'; | ||
|
|
||
| type DataImportCronDetailsPageProps = RouteComponentProps<{ | ||
| ns: string; | ||
| name: string; | ||
| }> & { | ||
| obj?: V1beta1DataImportCron; | ||
| }; | ||
|
|
||
| const DataImportCronDetailsPage: React.FC<DataImportCronDetailsPageProps> = ({ | ||
| obj: dataImportCron, | ||
| }) => { | ||
| const { t } = useKubevirtTranslation(); | ||
|
|
||
| return ( | ||
| <div> | ||
| <PageSection> | ||
| <Title headingLevel="h2" className="co-section-heading"> | ||
| {t('DataImportCron details')} | ||
| </Title> | ||
| <DataImportCronDetailsGrid dataImportCron={dataImportCron} /> | ||
| </PageSection> | ||
| <Divider /> | ||
| <PageSection> | ||
| <Title headingLevel="h2" className="co-section-heading"> | ||
| {t('Conditions')} | ||
| </Title> | ||
| <ConditionsTable | ||
| conditions={dataImportCron?.status?.conditions as K8sResourceCondition[]} | ||
| /> | ||
| </PageSection> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default DataImportCronDetailsPage; |
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,57 @@ | ||
| import * as React from 'react'; | ||
|
|
||
| import { V1beta1DataImportCron } from '@kubevirt-ui/kubevirt-api/containerized-data-importer/models'; | ||
| import Loading from '@kubevirt-utils/components/Loading/Loading'; | ||
| import { useKubevirtTranslation } from '@kubevirt-utils/hooks/useKubevirtTranslation'; | ||
| import { HorizontalNav, useK8sWatchResource } from '@openshift-console/dynamic-plugin-sdk'; | ||
| import { Bullseye } from '@patternfly/react-core'; | ||
|
|
||
| import DataImportCronDetailsPage from './DataImportCronDetailsPage'; | ||
| import DataImportCronPageTitle from './DataImportCronPageTitle'; | ||
| import DataImportCronYAMLPage from './DataImportCronYamlPage'; | ||
|
|
||
| type DataImportCronPageProps = { | ||
| name: string; | ||
| namespace: string; | ||
| kind: string; | ||
| }; | ||
|
|
||
| const DataImportCronNavPage: React.FC<DataImportCronPageProps> = ({ name, namespace, kind }) => { | ||
| const { t } = useKubevirtTranslation(); | ||
| const [dataImportCron, loaded] = useK8sWatchResource<V1beta1DataImportCron>({ | ||
| kind, | ||
| name, | ||
| namespace, | ||
| }); | ||
|
|
||
| const pages = React.useMemo( | ||
| () => [ | ||
| { | ||
| href: '', | ||
| name: t('Details'), | ||
| component: DataImportCronDetailsPage, | ||
| }, | ||
| { | ||
| href: 'yaml', | ||
| name: t('YAML'), | ||
| component: DataImportCronYAMLPage, | ||
| }, | ||
| ], | ||
| [t], | ||
| ); | ||
|
|
||
| return ( | ||
| <> | ||
| <DataImportCronPageTitle dataImportCron={dataImportCron} namespace={namespace} name={name} /> | ||
| {loaded ? ( | ||
| <HorizontalNav pages={pages} resource={dataImportCron} /> | ||
| ) : ( | ||
| <Bullseye> | ||
| <Loading /> | ||
| </Bullseye> | ||
| )} | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default DataImportCronNavPage; |
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,51 @@ | ||
| import * as React from 'react'; | ||
| import { Link } from 'react-router-dom'; | ||
|
|
||
| import { DataImportCronModelRef } from '@kubevirt-ui/kubevirt-api/console'; | ||
| import { V1beta1DataImportCron } from '@kubevirt-ui/kubevirt-api/containerized-data-importer/models'; | ||
| import { useKubevirtTranslation } from '@kubevirt-utils/hooks/useKubevirtTranslation'; | ||
| import { Breadcrumb, BreadcrumbItem } from '@patternfly/react-core'; | ||
|
|
||
| type DataImportCronPageTitleProps = { | ||
| dataImportCron: V1beta1DataImportCron; | ||
| name: string; | ||
| namespace: string; | ||
| }; | ||
|
|
||
| const DataImportCronPageTitle: React.FC<DataImportCronPageTitleProps> = ({ | ||
| dataImportCron, | ||
| name, | ||
| namespace, | ||
| }) => { | ||
| const { t } = useKubevirtTranslation(); | ||
|
|
||
| return ( | ||
| <> | ||
| <div className="pf-c-page__main-breadcrumb"> | ||
| <Breadcrumb className="pf-c-breadcrumb co-breadcrumb"> | ||
| <BreadcrumbItem> | ||
| <Link to={`/k8s/ns/${namespace || 'default'}/${DataImportCronModelRef}`}> | ||
| {t('DataImportCrons')} | ||
| </Link> | ||
| </BreadcrumbItem> | ||
| <BreadcrumbItem>{t('DataImportCron Details')}</BreadcrumbItem> | ||
| </Breadcrumb> | ||
| </div> | ||
| <div className="co-m-nav-title co-m-nav-title--detail co-m-nav-title--breadcrumbs"> | ||
| <span className="co-m-pane__heading"> | ||
| <h1 className="co-m-pane__name co-resource-item"> | ||
| <span className="co-m-resource-icon co-m-resource-icon--lg">{t('DS')}</span> | ||
| <span data-test-id="resource-title" className="co-resource-item__resource-name"> | ||
| {name ?? dataImportCron?.metadata?.name}{' '} | ||
| </span> | ||
| </h1> | ||
| <div className="co-actions"> | ||
| {/* <DataImportCronActions DataImportCron={DataImportCron} /> */} | ||
|
|
||
| </div> | ||
| </span> | ||
| </div> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default DataImportCronPageTitle; | ||
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,31 @@ | ||
| import * as React from 'react'; | ||
| import { RouteComponentProps } from 'react-router'; | ||
|
|
||
| import { V1beta1DataImportCron } from '@kubevirt-ui/kubevirt-api/containerized-data-importer/models'; | ||
| import Loading from '@kubevirt-utils/components/Loading/Loading'; | ||
| import { ResourceYAMLEditor } from '@openshift-console/dynamic-plugin-sdk'; | ||
| import { Bullseye } from '@patternfly/react-core'; | ||
|
|
||
| type DataImportCronYAMLPageProps = RouteComponentProps<{ | ||
| ns: string; | ||
| name: string; | ||
| }> & { | ||
| obj?: V1beta1DataImportCron; | ||
| }; | ||
|
|
||
| const DataImportCronYAMLPage: React.FC<DataImportCronYAMLPageProps> = ({ obj: dataImportCron }) => { | ||
| const loading = ( | ||
| <Bullseye> | ||
| <Loading /> | ||
| </Bullseye> | ||
| ); | ||
| return !dataImportCron ? ( | ||
| loading | ||
| ) : ( | ||
| <React.Suspense fallback={loading}> | ||
| <ResourceYAMLEditor initialResource={dataImportCron} /> | ||
| </React.Suspense> | ||
| ); | ||
| }; | ||
|
|
||
| export default DataImportCronYAMLPage; |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
u need the {' '} here?