flux: Add enable and disable force reconciliation

Signed-off-by: ashu8912 <aghildiyal@microsoft.com>

Author: ashu8912

flux/src/actions/index.tsx

@@ -3,6 +3,55 @@ import { KubeObject } from '@kinvolk/headlamp-plugin/lib/lib/k8s/cluster';
 import { useSnackbar } from 'notistack';
 import React from 'react';
 
+function ForceReconciliationAction(props) {
+  const { enqueueSnackbar } = useSnackbar();
+  const [open, setOpen] = React.useState<boolean>(false);
+  const { resource } = props;
+
+  return (
+    <>
+      <ActionButton
+        description={resource.jsonData.spec.force ? `Disable force reconciliation for ${resource.metadata.name}` : `Enable force reconciliation for ${resource.metadata.name}` }
+        icon={resource.jsonData.spec.force ? 'mdi:invoice-text-remove' : 'mdi:invoice-text-new'}
+        onClick={() => {
+          setOpen(true);
+        }}
+      />
+      <ConfirmDialog
+        open={open}
+        handleClose={() => setOpen(false)}
+        onConfirm={() => {
+          setOpen(false);
+          const patch = resource.constructor.apiEndpoint.patch;
+          patch(
+            {
+              spec: {
+                force: !resource.jsonData.spec.force,
+              },
+            },
+            resource.jsonData.metadata.namespace,
+            resource.jsonData.metadata.name
+          )
+            .then(response => {
+                enqueueSnackbar(
+                  response.spec.force ? `Successfully Disabled force reconciliation for ${resource.metadata.name}` : `Successfully Enabled force reconciliation for ${resource.metadata.name}`,
+                  { variant: 'success' }
+                );
+            })
+            .catch(error => {
+              enqueueSnackbar(
+                `error ${error}`,
+                { variant: 'error' }
+              );
+            });
+        }}
+        title={resource.jsonData.force ? 'Enable Force Reconciliation' : 'Disable Force Reconciliation' }
+        description={`${resource.jsonData.force ? 'Are you sure you want to enable force reconciliation for ' : 'Are you sure you want to disable force reconciliation for '}${resource?.jsonData.metadata.name}?`}
+      />
+    </>
+  );
+}
+
 function SuspendAction(props) {
   const { enqueueSnackbar } = useSnackbar();
   const { resource } = props;
@@ -248,4 +297,4 @@ function SyncWithoutSourceAction(props) {
   );
 }
 
-export { SuspendAction, ResumeAction, SyncAction, SyncWithSourceAction, SyncWithoutSourceAction };
+export { SuspendAction, ResumeAction, SyncAction, SyncWithSourceAction, SyncWithoutSourceAction, ForceReconciliationAction };

flux/src/helm-releases/HelmReleaseSingle.tsx

@@ -13,6 +13,7 @@ import React from 'react';
 import { useParams } from 'react-router-dom';
 import YAML from 'yaml';
 import {
+  ForceReconciliationAction,
   ResumeAction,
   SuspendAction,
   SyncWithoutSourceAction,
@@ -163,6 +164,7 @@ function CustomResourceDetails(props) {
     actions.push(<SyncWithoutSourceAction resource={cr} />);
     actions.push(<SuspendAction resource={cr} />);
     actions.push(<ResumeAction resource={cr} />);
+    actions.push(<ForceReconciliationAction resource={cr} />);
     return actions;
   }
 

flux/src/helpers/index.tsx

@@ -133,7 +133,6 @@ export function ObjectEvents(props: { events: any }) {
 
 export function prepareNameLink(item) {
   const kind = item.kind;
-  console.log('item', item);
   if (kind === 'Kustomization' || kind === 'HelmRelease' || kind in kindToSourceType) {
     const { name, type } = getSourceNameAndType(item);
     if (!!name && !!type) {

flux/src/image-automation/ImageAutomationSingle.tsx

@@ -10,7 +10,7 @@ import Editor from '@monaco-editor/react';
 import React from 'react';
 import { useParams } from 'react-router-dom';
 import YAML from 'yaml';
-import { ResumeAction, SuspendAction, SyncAction } from '../actions/index';
+import { ForceReconciliationAction, ResumeAction, SuspendAction, SyncAction } from '../actions/index';
 import Link from '../common/Link';
 import RemainingTimeDisplay from '../common/RemainingTimeDisplay';
 import StatusLabel from '../common/StatusLabel';
@@ -191,6 +191,7 @@ function CustomResourceDetails(props) {
           <SyncAction resource={cr} />,
           <SuspendAction resource={cr} />,
           <ResumeAction resource={cr} />,
+          <ForceReconciliationAction resource={cr} />,
         ]}
       />
       <SectionBox title="Conditions">

flux/src/kustomizations/KustomizationSingle.tsx

@@ -12,6 +12,7 @@ import React from 'react';
 import { useParams } from 'react-router-dom';
 import YAML from 'yaml';
 import {
+  ForceReconciliationAction,
   ResumeAction,
   SuspendAction,
   SyncWithoutSourceAction,
@@ -95,7 +96,7 @@ function CustomResourceDetails(props) {
       },
       {
         name: 'Force',
-        value: cr?.jsonData.spec?.force,
+        value: cr?.jsonData.spec?.force.toString(),
       },
       {
         name: 'Path',
@@ -147,6 +148,8 @@ function CustomResourceDetails(props) {
     actions.push(<SyncWithoutSourceAction resource={cr} />);
     actions.push(<SuspendAction resource={cr} />);
     actions.push(<ResumeAction resource={cr} />);
+    actions.push(<ForceReconciliationAction resource={cr} />);
+
     return actions;
   }
 

flux/src/notifications/NotificationSingle.tsx

@@ -8,7 +8,7 @@ import {
 import Event from '@kinvolk/headlamp-plugin/lib/k8s/event';
 import React from 'react';
 import { useParams } from 'react-router-dom';
-import { ResumeAction, SuspendAction, SyncAction } from '../actions/index';
+import { ForceReconciliationAction, ResumeAction, SuspendAction, SyncAction } from '../actions/index';
 import RemainingTimeDisplay from '../common/RemainingTimeDisplay';
 import { ObjectEvents } from '../helpers/index';
 
@@ -103,6 +103,7 @@ function CustomResourceDetails(props) {
           <SyncAction resource={cr} />,
           <SuspendAction resource={cr} />,
           <ResumeAction resource={cr} />,
+          <ForceReconciliationAction resource={cr} />,
         ]}
       />
       <SectionBox title="Conditions">

flux/src/sources/SourceCustomResourceSingle.tsx

@@ -124,14 +124,12 @@ function FluxSourceCustomResourceRenderer(props: FluxSourceCustomResourceRendere
     columns.splice(colIndexToInsert++, 0, {
       header: 'URL',
       accessorFn: item => {
-        console.log(item);
         const url = item?.jsonData?.spec?.url;
         return url ? <SourceLink url={url} wrap /> : '-';
       },
     });
   }
 
-  console.log(title);
   return (
     <SectionBox title={title}>
       <Table

flux/src/sources/SourceSingle.tsx

@@ -9,7 +9,7 @@ import {
 import Event from '@kinvolk/headlamp-plugin/lib/K8s/event';
 import React from 'react';
 import { useParams } from 'react-router-dom';
-import { ResumeAction, SuspendAction, SyncAction } from '../actions/index';
+import { ForceReconciliationAction, ResumeAction, SuspendAction, SyncAction } from '../actions/index';
 import Link from '../common/Link';
 import RemainingTimeDisplay from '../common/RemainingTimeDisplay';
 import StatusLabel from '../common/StatusLabel';
@@ -99,6 +99,7 @@ function CustomResourceDetailView(props) {
           <SyncAction resource={cr} />,
           <SuspendAction resource={cr} />,
           <ResumeAction resource={cr} />,
+          <ForceReconciliationAction resource={cr} />,
         ]}
         extraInfo={prepareExtraInfo()}
       />