set sampling from consumption step

Author: jpinsonneau

web/src/components/forms/consumption.tsx

@@ -14,9 +14,10 @@ import './forms.css';
 
 export type ResourceCalculatorProps = {
   flowCollector: K8sResourceKind | null;
+  setSampling?: (sampling: number) => void;
 };
 
-export const Consumption: FC<ResourceCalculatorProps> = ({ flowCollector }) => {
+export const Consumption: FC<ResourceCalculatorProps> = ({ flowCollector, setSampling }) => {
   const { t } = useTranslation('plugin__netobserv-plugin');
 
   const [receivedPackets, rpLoaded, rpError] = usePrometheusPoll({
@@ -64,8 +65,8 @@ export const Consumption: FC<ResourceCalculatorProps> = ({ flowCollector }) => {
         return t('n/a');
       }
       return _.uniq(_.map(receivedPackets.data.result, r => r.metric[label])).length;
-      // eslint-disable-next-line react-hooks/exhaustive-deps
     },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [receivedPackets, rpError, rpLoaded]
   );
 
@@ -114,7 +115,13 @@ export const Consumption: FC<ResourceCalculatorProps> = ({ flowCollector }) => {
             {getSamplings().map((sampling, i) => {
               const current = getCurrentSampling() === sampling;
               return (
-                <Tr key={i} isRowSelected={current}>
+                <Tr
+                  key={i}
+                  isSelectable={setSampling !== undefined}
+                  isClickable={setSampling !== undefined}
+                  isRowSelected={current}
+                  onClick={() => setSampling && setSampling(sampling)}
+                >
                   <Td>{`${sampling} ${current ? t('(current)') : ''}`}</Td>
                   <Td></Td>
                   <Td></Td>

web/src/components/forms/flowCollector-wizard.tsx

@@ -107,6 +107,17 @@ export const FlowCollectorWizard: FC<FlowCollectorWizardProps> = props => {
     []
   );
 
+  const setSampling = React.useCallback(
+    (sampling: number) => {
+      if (!data) {
+        return;
+      }
+      data.spec.agent.ebpf.sampling = sampling;
+      setData({ ...data });
+    },
+    [data]
+  );
+
   return (
     <DynamicLoader>
       <ResourceWatcher
@@ -157,7 +168,7 @@ export const FlowCollectorWizard: FC<FlowCollectorWizardProps> = props => {
                     {form()}
                   </WizardStep>
                   <WizardStep name={t('Consumption')} id="consumption">
-                    <Consumption flowCollector={data} />
+                    <Consumption flowCollector={data} setSampling={setSampling} />
                   </WizardStep>
                   <WizardStep
                     name={t('Review')}