add initial dataimportcron details page

console-extensions.json

@@ -307,5 +307,16 @@
       },
       "component": { "$codeRef": "DataSourcesList" }
     }
+  },
+  {
+    "type": "console.page/resource/details",
+    "properties": {
+      "model": {
+        "group": "cdi.kubevirt.io",
+        "kind": "DataImportCron",
+        "version": "v1beta1"
+      },
+      "component": { "$codeRef": "DataImportCronPage" }
+    }
   }
 ]

locales/en/plugin__kubevirt-plugin.json

@@ -202,6 +202,7 @@
   "Create a new blank PVC": "Create a new blank PVC",
   "Create a new custom Template": "Create a new custom Template",
   "Create an empty disk.": "Create an empty disk.",
+  "Create DataSource": "Create DataSource",
   "Create new secret": "Create new secret",
   "Create new sysprep": "Create new sysprep",
   "Create new VirtualMachine from catalog": "Create new VirtualMachine from catalog",
@@ -221,7 +222,10 @@
   "Customize": "Customize",
   "Customize VirtualMachine": "Customize VirtualMachine",
   "Data Volume failed to initiate upload.": "Data Volume failed to initiate upload.",
+  "DataImportCron": "DataImportCron",
   "DataImportCron available": "DataImportCron available",
+  "DataImportCron Details": "DataImportCron Details",
+  "DataImportCrons": "DataImportCrons",
   "DataSource details": "DataSource details",
   "DataSource Details": "DataSource Details",
   "DataSources": "DataSources",
@@ -415,7 +419,6 @@
   "MAC Address": "MAC Address",
   "Machine type": "Machine type",
   "Make sure to have clone permissions in the destination namespace. <2>Learn more <1></1></2>": "Make sure to have clone permissions in the destination namespace. <2>Learn more <1></1></2>",
-  "Managed by": "Managed by",
   "Manual Connection": "Manual Connection",
   "Map of string keys and values that can be used to organize and categorize (scope and select) objects": "Map of string keys and values that can be used to organize and categorize (scope and select) objects",
   "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. ": "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. ",

package.json

@@ -38,6 +38,7 @@
       "VirtualMachineNavPage": "./views/virtualmachines/details/VirtualMachineNavPage.tsx",
       "DataSourcesList": "./views/datasources/list/DataSourcesList.tsx",
       "DataSourcePage": "./views/datasources/details/DataSourcePage.tsx",
+      "DataImportCronPage": "./views/datasources/dataimportcron/details/DataImportCronPage.tsx",
       "VirtualMachinesInstancePage": "./views/virtualmachinesinstance/details/VirtualMachinesInstancePage.tsx",
       "useVirtualMachineActionsProvider": "./views/virtualmachines/actions/hooks/useVirtualMachineActionsProvider.ts",
       "VirtualMachinesInstancesList": "./views/virtualmachinesinstance/list/VirtualMachinesInstancesList.tsx",

src/views/datasources/dataimportcron/details/DataImportCronDetailsGrid.tsx

@@ -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>
+  );
+};

src/views/datasources/dataimportcron/details/DataImportCronDetailsPage.tsx

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import { RouteComponentProps } from 'react-router';
+import { K8sResourceCondition } from 'src/views/clusteroverview/overview/components/details-card/utils/types';
+
+import { V1beta1DataImportCron } from '@kubevirt-ui/kubevirt-api/containerized-data-importer/models';
+import { ConditionsTable } 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;

src/views/datasources/dataimportcron/details/DataImportCronPage.tsx

@@ -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;

src/views/datasources/dataimportcron/details/DataImportCronPageTitle.tsx

@@ -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;

src/views/datasources/dataimportcron/details/DataImportCronYamlPage.tsx

@@ -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;