🐾 Plan details page - part I

packages/forklift-console-plugin/locales/en/plugin__forklift-console-plugin.json

@@ -62,6 +62,7 @@
   "Concern": "Concern",
   "Concerns": "Concerns",
   "Conditions": "Conditions",
+  "Conditions not found": "Conditions not found",
   "Confirm": "Confirm",
   "Connection Failed": "Connection Failed",
   "Controller CPU limit": "Controller CPU limit",
@@ -288,6 +289,7 @@
   "Password": "Password",
   "Path": "Path",
   "Persistent TPM/EFI": "Persistent TPM/EFI",
+  "Plan details": "Plan details",
   "Plan name": "Plan name",
   "Plans": "Plans",
   "Plans for virtualization": "Plans for virtualization",

packages/forklift-console-plugin/src/modules/NetworkMaps/views/details/components/ConditionsSection/ConditionsSection.tsx

@@ -3,6 +3,7 @@ import { useForkliftTranslation } from 'src/utils/i18n';
 
 import { K8sResourceCondition } from '@kubev2v/types';
 import { Timestamp } from '@openshift-console/dynamic-plugin-sdk';
+import { HelperText, HelperTextItem } from '@patternfly/react-core';
 import { TableComposable, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
 
 /**
@@ -17,7 +18,11 @@ export const ConditionsSection: React.FC<ConditionsSectionProps> = ({ conditions
   const { t } = useForkliftTranslation();
 
   if (!conditions) {
-    return <></>;
+    return (
+      <HelperText>
+        <HelperTextItem>{t('Conditions not found')}</HelperTextItem>
+      </HelperText>
+    );
   }
 
   const getStatusLabel = (status: string) => {

packages/forklift-console-plugin/src/modules/NetworkMaps/views/details/components/DetailsSection/components/NetworkMapPageHeadings.tsx

@@ -46,19 +46,17 @@ export const NetworkMapPageHeadings: React.FC<{ name: string; namespace: string
   }
 
   return (
-    <>
-      <PageHeadings
-        model={NetworkMapModel}
-        obj={obj}
-        namespace={namespace}
-        actions={<NetworkMapActionsDropdown data={{ obj, permissions }} fieldId={''} fields={[]} />}
-      >
-        {alerts && alerts.length > 0 && (
-          <PageSection variant="light" className="forklift-page-headings-alerts">
-            {alerts}
-          </PageSection>
-        )}
-      </PageHeadings>
-    </>
+    <PageHeadings
+      model={NetworkMapModel}
+      obj={obj}
+      namespace={namespace}
+      actions={<NetworkMapActionsDropdown data={{ obj, permissions }} fieldId={''} fields={[]} />}
+    >
+      {alerts && alerts.length > 0 && (
+        <PageSection variant="light" className="forklift-page-headings-alerts">
+          {alerts}
+        </PageSection>
+      )}
+    </PageHeadings>
   );
 };

packages/forklift-console-plugin/src/modules/NetworkMaps/views/details/components/ProvidersSection/components/ProvidersEdit.tsx

@@ -16,14 +16,6 @@ export const ProvidersEdit: React.FC<ProvidersEditProps> = ({
   mode,
   setMode,
 }) => {
-  const ProviderOption = (provider, index) => (
-    <FormSelectOption
-      key={provider?.metadata?.name || index}
-      value={provider?.metadata?.name}
-      label={provider?.metadata?.name}
-    />
-  );
-
   const targetProvider = fineProvider({ providers, name: selectedProviderName });
 
   const validated = targetProvider !== undefined ? 'success' : 'error';
@@ -81,6 +73,14 @@ export const ProvidersEdit: React.FC<ProvidersEditProps> = ({
   }
 };
 
+const ProviderOption = (provider, index) => (
+  <FormSelectOption
+    key={provider?.metadata?.name || index}
+    value={provider?.metadata?.name}
+    label={provider?.metadata?.name}
+  />
+);
+
 export type ProvidersEditProps = {
   providers: V1beta1Provider[];
   selectedProviderName: string;

packages/forklift-console-plugin/src/modules/Plans/views/details/PlanDetailsPage.style.css

@@ -25,24 +25,28 @@
 }
 
 .forklift-page-plan-field-error-validation {
-    color: var(--pf-c-form__helper-text--m-error--Color);
-    font-size: small;
-    padding-top: var(--pf-c-form__helper-text--MarginTop);
-  }
-
-  .forklift-page-plan-field-warning-validation {
-    color: var(--pf-c-form__helper-text--m-warning--Color);
-    font-size: small;
-    padding-top: var(--pf-c-form__helper-text--MarginTop);
-  }
-
-  .forklift-page-plan-field-success-validation {
-    color: var(--pf-c-form__helper-text--m-success--Color);
-    font-size: small;
-    padding-top: var(--pf-c-form__helper-text--MarginTop);
-  }
-
-  .forklift-page-plan-field-default-validation {
-    font-size: small;
-    padding-top: var(--pf-c-form__helper-text--MarginTop);
-  }
+  color: var(--pf-c-form__helper-text--m-error--Color);
+  font-size: small;
+  padding-top: var(--pf-c-form__helper-text--MarginTop);
+}
+
+.forklift-page-plan-field-warning-validation {
+  color: var(--pf-c-form__helper-text--m-warning--Color);
+  font-size: small;
+  padding-top: var(--pf-c-form__helper-text--MarginTop);
+}
+
+.forklift-page-plan-field-success-validation {
+  color: var(--pf-c-form__helper-text--m-success--Color);
+  font-size: small;
+  padding-top: var(--pf-c-form__helper-text--MarginTop);
+}
+
+.forklift-page-plan-field-default-validation {
+  font-size: small;
+  padding-top: var(--pf-c-form__helper-text--MarginTop);
+}
+
+.forklift-network-map__details-tab--update-button {
+  margin-bottom: var(--pf-global--spacer--md);
+}

packages/forklift-console-plugin/src/modules/Plans/views/details/components/ConditionsSection/ConditionsSection.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import { useForkliftTranslation } from 'src/utils/i18n';
+
+import { K8sResourceCondition } from '@kubev2v/types';
+import { Timestamp } from '@openshift-console/dynamic-plugin-sdk';
+import { HelperText, HelperTextItem } from '@patternfly/react-core';
+import { TableComposable, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
+
+/**
+ * React Component to display a table of conditions.
+ *
+ * @component
+ * @param {ConditionsSectionProps} props - Props for the Conditions component.
+ * @param {K8sResourceCondition[]} props.conditions - Array of conditions to be displayed.
+ * @returns {ReactElement} A table displaying the provided conditions.
+ */
+export const ConditionsSection: React.FC<ConditionsSectionProps> = ({ conditions }) => {
+  const { t } = useForkliftTranslation();
+
+  if (!conditions) {
+    return (
+      <HelperText>
+        <HelperTextItem>{t('Conditions not found')}</HelperTextItem>
+      </HelperText>
+    );
+  }
+
+  const getStatusLabel = (status: string) => {
+    switch (status) {
+      case 'True':
+        return t('True');
+      case 'False':
+        return t('False');
+      default:
+        return status;
+    }
+  };
+
+  return (
+    <TableComposable aria-label="Expandable table" variant="compact">
+      <Thead>
+        <Tr>
+          <Th width={10}>{t('Type')}</Th>
+          <Th width={10}>{t('Status')}</Th>
+          <Th width={20}>{t('Updated')}</Th>
+          <Th width={10}>{t('Reason')}</Th>
+          <Th> {t('Message')}</Th>
+        </Tr>
+      </Thead>
+      <Tbody>
+        {conditions.map((condition) => (
+          <Tr key={condition.type}>
+            <Td>{condition.type}</Td>
+            <Td>{getStatusLabel(condition.status)}</Td>
+            <Td>
+              <Timestamp timestamp={condition.lastTransitionTime} />
+            </Td>
+            <Td>{condition.reason}</Td>
+            <Td modifier="truncate">{condition?.message || '-'}</Td>
+          </Tr>
+        ))}
+      </Tbody>
+    </TableComposable>
+  );
+};
+
+/**
+ * Type for the props of the Conditions component.
+ *
+ * @typedef {Object} ConditionsProps
+ * @property {K8sResourceCondition[]} conditions - The conditions to be displayed.
+ */
+export type ConditionsSectionProps = {
+  conditions: K8sResourceCondition[];
+};

packages/forklift-console-plugin/src/modules/Plans/views/details/components/ConditionsSection/index.ts

@@ -0,0 +1,3 @@
+// @index(['./*', /style/g], f => `export * from '${f.path}';`)
+export * from './ConditionsSection';
+// @endindex

packages/forklift-console-plugin/src/modules/Plans/views/details/components/DetailsSection/DetailsSection.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { ModalHOC } from 'src/modules/Providers/modals';
+
+import { V1beta1Plan } from '@kubev2v/types';
+import { DescriptionList } from '@patternfly/react-core';
+
+import {
+  CreatedAtDetailsItem,
+  NameDetailsItem,
+  NamespaceDetailsItem,
+  OwnerDetailsItem,
+} from './components';
+
+export const DetailsSection: React.FC<DetailsSectionProps> = (props) => (
+  <ModalHOC>
+    <DetailsSectionInternal {...props} />
+  </ModalHOC>
+);
+
+export type DetailsSectionProps = {
+  obj: V1beta1Plan;
+};
+
+export const DetailsSectionInternal: React.FC<DetailsSectionProps> = ({ obj }) => {
+  return (
+    <DescriptionList
+      columnModifier={{
+        default: '1Col',
+      }}
+    >
+      <NameDetailsItem resource={obj} />
+
+      <NamespaceDetailsItem resource={obj} />
+
+      <CreatedAtDetailsItem resource={obj} />
+
+      <OwnerDetailsItem resource={obj} />
+    </DescriptionList>
+  );
+};

packages/forklift-console-plugin/src/modules/Plans/views/details/components/DetailsSection/components/CreatedAtDetailsItem.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { DetailsItem } from 'src/modules/Providers/utils';
+import { useForkliftTranslation } from 'src/utils/i18n';
+
+import { Timestamp } from '@openshift-console/dynamic-plugin-sdk';
+
+import { PlanDetailsItemProps } from './PlanDetailsItemProps';
+
+export const CreatedAtDetailsItem: React.FC<PlanDetailsItemProps> = ({
+  resource,
+  moreInfoLink,
+  helpContent,
+}) => {
+  const { t } = useForkliftTranslation();
+
+  const defaultMoreInfoLink = 'https://kubernetes.io/docs/reference/using-api/api-concepts';
+  const defaultHelpContent = t(
+    `CreationTimestamp is a timestamp representing the server time when this object was created.
+    It is not guaranteed to be set in happens-before order across separate operations.
+    Clients may not set this value. It is represented in RFC3339 form and is in UTC.`,
+  );
+
+  return (
+    <DetailsItem
+      title={t('Created at')}
+      content={<Timestamp timestamp={resource?.metadata?.creationTimestamp} />}
+      moreInfoLink={moreInfoLink ?? defaultMoreInfoLink}
+      helpContent={helpContent ?? defaultHelpContent}
+      crumbs={['metadata', 'creationTimestamp']}
+    />
+  );
+};

packages/forklift-console-plugin/src/modules/Plans/views/details/components/DetailsSection/components/NameDetailsItem.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { DetailsItem } from 'src/modules/Providers/utils';
+import { useForkliftTranslation } from 'src/utils/i18n';
+
+import { PlanDetailsItemProps } from './PlanDetailsItemProps';
+
+export const NameDetailsItem: React.FC<PlanDetailsItemProps> = ({
+  resource,
+  moreInfoLink,
+  helpContent,
+}) => {
+  const { t } = useForkliftTranslation();
+
+  const defaultMoreInfoLink =
+    'https://kubernetes.io/docs/concepts/overview/working-with-objects/names';
+  const defaultHelpContent = t(
+    'Name is primarily intended for creation idempotence and configuration definition. Cannot be updated.',
+  );
+
+  return (
+    <DetailsItem
+      title={t('Name')}
+      content={resource?.metadata?.name}
+      moreInfoLink={moreInfoLink ?? defaultMoreInfoLink}
+      helpContent={helpContent ?? defaultHelpContent}
+      crumbs={['metadata', 'name']}
+    />
+  );
+};

packages/forklift-console-plugin/src/modules/Plans/views/details/components/DetailsSection/components/NamespaceDetailsItem.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { DetailsItem } from 'src/modules/Providers/utils';
+import { useForkliftTranslation } from 'src/utils/i18n';
+
+import { ResourceLink } from '@openshift-console/dynamic-plugin-sdk';
+
+import { PlanDetailsItemProps } from './PlanDetailsItemProps';
+
+export const NamespaceDetailsItem: React.FC<PlanDetailsItemProps> = ({
+  resource,
+  moreInfoLink,
+  helpContent,
+}) => {
+  const { t } = useForkliftTranslation();
+
+  const defaultMoreInfoLink =
+    'https://kubernetes.io/docs/concepts/overview/working-with-objects/namespaces';
+  const defaultHelpContent = 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.`,
+  );
+
+  return (
+    <DetailsItem
+      title={t('Namespace')}
+      content={
+        <ResourceLink
+          groupVersionKind={{ version: 'v1', kind: 'Namespace' }}
+          name={resource?.metadata?.namespace}
+          namespace={resource?.metadata?.namespace}
+        />
+      }
+      moreInfoLink={moreInfoLink ?? defaultMoreInfoLink}
+      helpContent={helpContent ?? defaultHelpContent}
+      crumbs={['metadata', 'namespace']}
+    />
+  );
+};