-
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.
add initial dataimportcron details page
- Loading branch information
Showing
11 changed files
with
361 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
145 changes: 145 additions & 0 deletions
145
src/views/datasources/dataimportcron/details/DataImportCronDetailsGrid.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,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> | ||
| ); | ||
| }; |
47 changes: 47 additions & 0 deletions
47
src/views/datasources/dataimportcron/details/DataImportCronDetailsPage.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,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; |
57 changes: 57 additions & 0 deletions
57
src/views/datasources/dataimportcron/details/DataImportCronPage.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,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; |
51 changes: 51 additions & 0 deletions
51
src/views/datasources/dataimportcron/details/DataImportCronPageTitle.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,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; |
31 changes: 31 additions & 0 deletions
31
src/views/datasources/dataimportcron/details/DataImportCronYamlPage.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,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.