Merge pull request #997 from sgratch/add-hooks-tab-view-mode-to-plans…

…-details-page

🐾 Enrich the hooks tab for the plans details page - view mode

package.json

@@ -89,7 +89,8 @@
     "type-fest": "^3.10.0",
     "typescript": "^4.7.4",
     "webpack": "^5.79.0",
-    "webpack-merge": "^5.8.0"
+    "webpack-merge": "^5.8.0",
+    "react-syntax-highlighter": "^15.5.0"
   },
   "engines": {
     "node": ">=16"

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

@@ -26,6 +26,7 @@
   "Actions": "Actions",
   "Add mapping": "Add mapping",
   "Add source and target providers for the migration.": "Add source and target providers for the migration.",
+  "Adding hooks to the plan is optional. Hooks are contained in Ansible playbooks that can be run before or after the migration.": "Adding hooks to the plan is optional. Hooks are contained in Ansible playbooks that can be run before or after the migration.",
   "All discovered networks have been mapped to the default network.": "All discovered networks have been mapped to the default network.",
   "All discovered storages have been mapped to the default storage.": "All discovered storages have been mapped to the default storage.",
   "All networks detected on the selected VMs require a mapping.": "All networks detected on the selected VMs require a mapping.",
@@ -50,6 +51,7 @@
   "Category": "Category",
   "Certificate change detected": "Certificate change detected",
   "Clear all filters": "Clear all filters",
+  "Click the relevant buttons within the table for managing the plan hooks.": "Click the relevant buttons within the table for managing the plan hooks.",
   "Click the update credentials button to save your changes, button is disabled until a change is detected.": "Click the update credentials button to save your changes, button is disabled until a change is detected.",
   "Click the update mappings button to save your changes, button is disabled until a change is detected.": "Click the update mappings button to save your changes, button is disabled until a change is detected.",
   "Cluster": "Cluster",
@@ -109,6 +111,7 @@
   "Edit Controller Memory limit": "Edit Controller Memory limit",
   "Edit credentials": "Edit credentials",
   "Edit Default Transfer Network": "Edit Default Transfer Network",
+  "Edit hooks": "Edit hooks",
   "Edit mappings": "Edit mappings",
   "Edit Maximum concurrent VM migrations": "Edit Maximum concurrent VM migrations",
   "Edit migration plan target namespace": "Edit migration plan target namespace",
@@ -163,6 +166,7 @@
   "Hide from view": "Hide from view",
   "Hide values": "Hide values",
   "Hooks": "Hooks",
+  "Hooks data is loading, please wait.": "Hooks data is loading, please wait.",
   "Hooks for virtualization": "Hooks for virtualization",
   "Host": "Host",
   "Host cluster": "Host cluster",
@@ -236,6 +240,7 @@
   "New name was generated for the Storage Map due to naming conflict.": "New name was generated for the Storage Map due to naming conflict.",
   "NICs with empty NIC profile": "NICs with empty NIC profile",
   "No credentials found.": "No credentials found.",
+  "No hooks have been added to this migration plan.": "No hooks have been added to this migration plan.",
   "No inventory data available.": "No inventory data available.",
   "No Mapping found.": "No Mapping found.",
   "No NetworkMaps found.": "No NetworkMaps found.",
@@ -305,9 +310,11 @@
   "Pod network": "Pod network",
   "Pods": "Pods",
   "Pods not found": "Pods not found",
+  "Post-migration": "Post-migration",
   "Power state": "Power state",
   "Powered off": "Powered off",
   "Powered on": "Powered on",
+  "Pre-migration": "Pre-migration",
   "Precopy interval (minutes)": "Precopy interval (minutes)",
   "Preserve CPU model": "Preserve CPU model",
   "Preserve the CPU model and flags the VM runs with in its oVirt cluster.": "Preserve the CPU model and flags the VM runs with in its oVirt cluster.",
@@ -360,6 +367,7 @@
   "Skip certificate validation": "Skip certificate validation",
   "Snapshot polling interval (seconds)": "Snapshot polling interval (seconds)",
   "Something is wrong, the data was not loaded due to an error, please try to reload the page.": "Something is wrong, the data was not loaded due to an error, please try to reload the page.",
+  "Something is wrong, the hooks data was not loaded due to an error, please try to reload the page.": "Something is wrong, the hooks data was not loaded due to an error, please try to reload the page.",
   "Something is wrong, the secret was not loaded, please try to reload the page.": "Something is wrong, the secret was not loaded, please try to reload the page.",
   "source": "source",
   "Source Only": "Source Only",
@@ -393,6 +401,7 @@
   "The certificate is not a valid PEM-encoded X.509 certificate": "The certificate is not a valid PEM-encoded X.509 certificate",
   "The chosen provider is no longer available.": "The chosen provider is no longer available.",
   "The current certificate does not match the certificate fetched from URL. Manually validate the fingerprint before proceeding.": "The current certificate does not match the certificate fetched from URL. Manually validate the fingerprint before proceeding.",
+  "The edit hooks button is disabled if the plan started running and at least one virtual machine was migrated successfully.": "The edit hooks button is disabled if the plan started running and at least one virtual machine was migrated successfully.",
   "The edit mappings button is disabled if the plan started running and at least one virtual machine was migrated successfully.": "The edit mappings button is disabled if the plan started running and at least one virtual machine was migrated successfully.",
   "The interval in minutes for precopy. Default value is 60.": "The interval in minutes for precopy. Default value is 60.",
   "The interval in seconds for snapshot pooling. Default value is 10.": "The interval in seconds for snapshot pooling. Default value is 10.",

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

@@ -95,7 +95,23 @@
   margin-left: var(--pf-global--spacer--sm);
 }
 
-.forklift-section-mappings-edit {
+.forklift-section-plan-helper-text {
   padding-top: var(--pf-global--spacer--md);
   padding-bottom: var(--pf-global--spacer--sm);
 }
+
+.forklift-page-plan-details-hooks-msg {
+  padding-top: 50px;
+  padding-bottom: var(--pf-global--spacer--sm);
+  align-self: center;
+  font-size: 16px;
+}
+
+.forklift-page-plan-details-hooks-section {
+  margin-top: var(--pf-global--spacer--xl);
+}
+
+.forklift-page-plan-details-hooks.playbook-yaml-popover {
+  max-width: 35vw;
+  overflow-y: auto;
+}

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

@@ -13,7 +13,7 @@ import {
 import { PlanActionsDropdown } from '../../actions';
 
 import { Suspend } from './components';
-import { PlanDetails, PlanMappings, PlanYAML } from './tabs';
+import { PlanDetails, PlanHooks, PlanMappings, PlanYAML } from './tabs';
 
 import './PlanDetailsPage.style.css';
 
@@ -64,6 +64,13 @@ const PlanDetailsPage_: React.FC<{
         <PlanMappings plan={obj} loaded={loaded} loadError={loadError} permissions={permissions} />
       ),
     },
+    {
+      href: 'hooks',
+      name: t('Hooks'),
+      component: () => (
+        <PlanHooks plan={obj} loaded={loaded} loadError={loadError} permissions={permissions} />
+      ),
+    },
     /*
     {
       href: 'vms',
@@ -77,13 +84,6 @@ const PlanDetailsPage_: React.FC<{
         />
       ),
     },
-    {
-      href: 'hooks',
-      name: t('Hooks'),
-      component: () => (
-        <PlanHooks plan={obj} loaded={loaded} loadError={loadError} permissions={permissions} />
-      ),
-    },
     */
   ];