CNV-33063: Add KSM to Cluster settings

Add KSM (Kernel Samepage Merging) configuration to Cluster settings,
under "Resource management" expandable section.

Fixes https://issues.redhat.com/browse/CNV-33063

locales/en/plugin__kubevirt-plugin.json

@@ -544,8 +544,10 @@
   "IP addresses": "IP addresses",
   "It may take several minutes until the clone is done and the VirtualMachine is ready.": "It may take several minutes until the clone is done and the VirtualMachine is ready.",
   "It seems that your browser does not trust the certificate of the upload proxy. {uploadProxyURL && (\n          <>\n            Please{' '}\n            <a href={`https://${uploadProxyURL}`} rel=\"noopener noreferrer\" target=\"_blank\">\n              approve this certificate\n            </a>{' '}\n            and try again\n          </>\n        )}": "It seems that your browser does not trust the certificate of the upload proxy. {uploadProxyURL && (\n          <>\n            Please{' '}\n            <a href={`https://${uploadProxyURL}`} rel=\"noopener noreferrer\" target=\"_blank\">\n              approve this certificate\n            </a>{' '}\n            and try again\n          </>\n        )}",
+  "Kernel Samepage Merging (KSM)": "Kernel Samepage Merging (KSM)",
   "key": "key",
   "Key": "Key",
+  "KSM is a memory-saving de-duplication feature designed to fit more VirtualMachines into physical memory by sharing the data common between them.": "KSM is a memory-saving de-duplication feature designed to fit more VirtualMachines into physical memory by sharing the data common between them.",
   "Kubernetes NMState Operator": "Kubernetes NMState Operator",
   "KV data transfer rate": "KV data transfer rate",
   "Label selectors let you select Nodes based on the value of one or more labels.": "Label selectors let you select Nodes based on the value of one or more labels.",
@@ -741,6 +743,7 @@
   "Node labels": "Node labels",
   "Node port": "Node port",
   "Node selector": "Node selector",
+  "Node selector configuration": "Node selector configuration",
   "Nodes": "Nodes",
   "None": "None",
   "Not available": "Not available",
@@ -871,6 +874,7 @@
   "Reset": "Reset",
   "Resource": "Resource",
   "Resource already selected": "Resource already selected",
+  "Resource management": "Resource management",
   "Resource name": "Resource name",
   "Resources": "Resources",
   "Resources are being removed, please wait.": "Resources are being removed, please wait.",

src/views/clusteroverview/SettingsTab/ClusterTab/ClusterTab.tsx

@@ -7,6 +7,7 @@ import EnableLoadBalancerSection from './components/EnableLoadBalancerSection/En
 import EnablePreviewFeaturesSection from './components/EnablePreviewFeaturesSection/EnablePreviewFeaturesSection';
 import GeneralInformation from './components/GeneralInformation/GeneralInformation';
 import LiveMigrationSection from './components/LiveMigrationSection/LiveMigrationSection';
+import ResourceManagementSection from './components/ResourceManagementSection/ResourceManagementSection';
 import TemplatesProjectSection from './components/TemplatesProjectSection/TemplatesProjectSection';
 
 const ClusterTab: FC = () => {
@@ -22,6 +23,8 @@ const ClusterTab: FC = () => {
       <EnableLoadBalancerSection />
       <Divider className="section-divider" />
       <TemplatesProjectSection />
+      <Divider className="section-divider" />
+      <ResourceManagementSection />
     </>
   );
 };

src/views/clusteroverview/SettingsTab/ClusterTab/components/ResourceManagementSection/ResourceManagementSection.tsx

@@ -0,0 +1,19 @@
+import React, { FC } from 'react';
+
+import { useKubevirtTranslation } from '@kubevirt-utils/hooks/useKubevirtTranslation';
+
+import ExpandSection from '../../../ExpandSection/ExpandSection';
+
+import KernelSamepageMerging from './components/KernelSamepageMerging/KernelSamepageMerging';
+
+const ResourceManagementSection: FC = () => {
+  const { t } = useKubevirtTranslation();
+
+  return (
+    <ExpandSection toggleText={t('Resource management')}>
+      <KernelSamepageMerging />
+    </ExpandSection>
+  );
+};
+
+export default ResourceManagementSection;

src/views/clusteroverview/SettingsTab/ClusterTab/components/ResourceManagementSection/components/KernelSamepageMerging/KernelSamepageMerging.scss

@@ -0,0 +1,15 @@
+.KernelSamepageMerging {
+  &__ExpandSection {
+    padding-left: var(--pf-global--spacer--lg);
+  }
+
+  &__HelpIcon {
+    color: var(--pf-global--Color--100);
+  }
+
+  &__HelpTextIcon {
+    .pf-c-popover__content {
+      width: 400px;
+    }
+  }
+}

src/views/clusteroverview/SettingsTab/ClusterTab/components/ResourceManagementSection/components/KernelSamepageMerging/KernelSamepageMerging.tsx

@@ -0,0 +1,37 @@
+import React, { FC } from 'react';
+import ExpandSection from 'src/views/clusteroverview/SettingsTab/ExpandSection/ExpandSection';
+
+import HelpTextIcon from '@kubevirt-utils/components/HelpTextIcon/HelpTextIcon';
+import { useKubevirtTranslation } from '@kubevirt-utils/hooks/useKubevirtTranslation';
+import { PopoverPosition } from '@patternfly/react-core';
+
+import NodeSelectorConfiguration from './components/NodeSelectorConfiguration';
+
+import './KernelSamepageMerging.scss';
+
+const KernelSamepageMerging: FC = () => {
+  const { t } = useKubevirtTranslation();
+
+  return (
+    <ExpandSection
+      toggleContent={
+        <>
+          {t('Kernel Samepage Merging (KSM)')}{' '}
+          <HelpTextIcon
+            bodyContent={t(
+              'KSM is a memory-saving de-duplication feature designed to fit more VirtualMachines into physical memory by sharing the data common between them.',
+            )}
+            className="KernelSamepageMerging__HelpTextIcon"
+            helpIconClassName="KernelSamepageMerging__HelpIcon"
+            position={PopoverPosition.right}
+          />
+        </>
+      }
+      className="KernelSamepageMerging__ExpandSection"
+    >
+      <NodeSelectorConfiguration />
+    </ExpandSection>
+  );
+};
+
+export default KernelSamepageMerging;

src/views/clusteroverview/SettingsTab/ClusterTab/components/ResourceManagementSection/components/KernelSamepageMerging/components/NodeSelectorConfiguration.scss

@@ -0,0 +1,5 @@
+.KernelSamepageMerging {
+  &__ExpandSection > * {
+    padding-left: var(--pf-global--spacer--lg);
+  }
+}

src/views/clusteroverview/SettingsTab/ClusterTab/components/ResourceManagementSection/components/KernelSamepageMerging/components/NodeSelectorConfiguration.tsx

@@ -0,0 +1,25 @@
+import React, { FC } from 'react';
+
+import { useKubevirtTranslation } from '@kubevirt-utils/hooks/useKubevirtTranslation';
+import { Button } from '@patternfly/react-core';
+import { PencilAltIcon } from '@patternfly/react-icons';
+
+import './NodeSelectorConfiguration.scss';
+
+const NodeSelectorConfiguration: FC = () => {
+  const { t } = useKubevirtTranslation();
+
+  return (
+    <Button
+      // className="NodeSelectorConfiguration__ExpandSection"
+      isInline
+      //  onClick={onClick}
+      variant="link"
+    >
+      {t('Node selector configuration')}
+      <PencilAltIcon alt={t('Edit')} className="co-icon-space-l pf-c-button-icon--plain" />
+    </Button>
+  );
+};
+
+export default NodeSelectorConfiguration;