Merge pull request #125 from headlamp-k8s/flux-suspend-resume-fix

Flux suspend,resume fix

Author: joaquimrocha

flux/src/actions/index.tsx

@@ -57,20 +57,14 @@ function SuspendAction(props) {
   const { resource } = props;
   const [open, setOpen] = React.useState<boolean>(false);
 
+  if(resource?.jsonData?.spec?.suspend) {
+    return null;
+  }
   return (
     <>
       <ActionButton
         description="Suspend"
         icon={'mdi:pause'}
-        iconButtonProps={{
-          style: {
-            display: resource?.jsonData.spec.hasOwnProperty('suspend')
-              ? resource.jsonData.spec.suspend
-                ? 'none'
-                : 'inline-flex'
-              : 'inline-flex',
-          },
-        }}
         onClick={() => {
           setOpen(true);
         }}
@@ -81,7 +75,6 @@ function SuspendAction(props) {
         handleClose={() => setOpen(false)}
         onConfirm={() => {
           setOpen(false);
-          resource.jsonData.spec['suspend'] = true;
           const patch = resource.constructor.apiEndpoint.patch;
           patch(
             {
@@ -121,17 +114,11 @@ function SuspendAction(props) {
 function ResumeAction(props) {
   const { resource } = props;
   const { enqueueSnackbar } = useSnackbar();
+  if(!resource.jsonData.spec.suspend) {
+    return null;
+  }
   return (
     <ActionButton
-      iconButtonProps={{
-        style: {
-          display: resource?.jsonData.spec.hasOwnProperty('suspend')
-            ? resource.jsonData.spec.suspend
-              ? 'inline-flex'
-              : 'none'
-            : 'none',
-        },
-      }}
       description="Resume"
       icon={'mdi:play'}
       onClick={() => {

flux/src/checkflux/index.tsx

@@ -1,36 +1,19 @@
 import { K8s } from '@kinvolk/headlamp-plugin/lib';
-import { Loader } from '@kinvolk/headlamp-plugin/lib/components/common';
 import { Box, Link } from '@mui/material';
 import { useTheme } from '@mui/material';
 
-export default function CheckIfFluxInstalled() {
+export default function Flux404() {
   const theme = useTheme();
-  const [deployments] = K8s.ResourceClasses.Deployment.useList({
-    labelSelector: 'app.kubernetes.io/part-of=flux',
-  });
 
-  if (deployments === null) {
-    return <Loader />;
-  }
-  if (
-    deployments?.find(
-      deployment =>
-        deployment.jsonData.metadata?.labels['app.kubernetes.io/component'] === 'source-controller'
-    )
-  ) {
-    return null;
-  } else {
     // return a box with a message that flux is not installed and a link to the flux installation guide
     return (
       <Box
         // center this box and also wrap it in a white background with some box shadow
-        style={{
+        sx={{
           padding: '1rem',
           alignItems: 'center',
           margin: '2rem auto',
-          height: '20vh',
-          width: '50%',
-          backgroundColor: theme.palette.background.paper,
+          maxWidth: '600px',
         }}
       >
         <h1>Flux is not installed</h1>
@@ -43,7 +26,14 @@ export default function CheckIfFluxInstalled() {
         </p>
       </Box>
     );
-  }
+}
+
+export function useFluxInstallCheck() {
+  const [deployments] = K8s.ResourceClasses.Deployment.useList({
+    labelSelector: 'app.kubernetes.io/part-of=flux,app.kubernetes.io/component=source-controller',
+  });
+
+  return deployments;
 }
 
 export function useFluxControllerAvailableCheck(props: { name: string }) {
@@ -56,15 +46,6 @@ export function useFluxControllerAvailableCheck(props: { name: string }) {
     return null;
   }
 
-  const isFluxAvailable = deployments?.find(
-    deployment =>
-      deployment.jsonData.metadata?.labels['app.kubernetes.io/component'] === 'source-controller'
-  );
-
-  if (!isFluxAvailable) {
-    return true;
-  }
-
   return deployments?.find(
     deployment => deployment.jsonData.metadata?.labels['app.kubernetes.io/component'] === name
   );

flux/src/helm-releases/HelmReleaseList.tsx

@@ -7,8 +7,10 @@ import {
 import { useFilterFunc } from '@kinvolk/headlamp-plugin/lib/Utils';
 import { Link as MuiLink } from '@mui/material';
 import React from 'react';
-import CheckIfFluxInstalled, { useFluxControllerAvailableCheck } from '../checkflux';
+import { useTheme } from '@mui/material/styles';
+import  { useFluxControllerAvailableCheck, useFluxInstallCheck } from '../checkflux';
 import Table from '../common/Table';
+import Flux404 from '../checkflux';
 
 export function HelmReleases() {
   const isHelmReleasesControllerAvailable = useFluxControllerAvailableCheck({
@@ -21,7 +23,12 @@ export function HelmReleases() {
 
   if (!isHelmReleasesControllerAvailable) {
     return (
-      <SectionBox>
+      <SectionBox sx={{
+        padding: '1rem',
+        alignItems: 'center',
+        margin: '2rem auto',
+        maxWidth: '600px',
+      }}>
         <h1>Helm Controller is not installed</h1>
         <p>
           Follow the{' '}
@@ -45,9 +52,18 @@ function HelmReleasesListWrapper() {
     return helmReleases?.makeCRClass();
   }, [helmReleases]);
 
+  const isFluxInstalled = useFluxInstallCheck();
+  
+  if(isFluxInstalled === null) {
+    return <Loader />;
+  }
+  
+  if(!isFluxInstalled) {
+    return <Flux404 />;
+  }
+
   return (
     <div>
-      <CheckIfFluxInstalled />
       {helmReleaseResourceClass && <HelmReleasesList resourceClass={helmReleaseResourceClass} />}
     </div>
   );

flux/src/image-automation/ImageAutomationList.tsx

@@ -11,14 +11,17 @@ import { KubeObject } from '@kinvolk/headlamp-plugin/lib/lib/k8s/cluster';
 import { useFilterFunc } from '@kinvolk/headlamp-plugin/lib/Utils';
 import { Link as MuiLink } from '@mui/material';
 import React from 'react';
-import CheckIfFluxInstalled, { useFluxControllerAvailableCheck } from '../checkflux';
+import { useTheme } from '@mui/material/styles';
+import  { useFluxControllerAvailableCheck, useFluxInstallCheck } from '../checkflux';
 import SourceLink from '../common/Link';
 import Table from '../common/Table';
+import Flux404 from '../checkflux';
 
 const IMAGE_AUTOMATION_BETA_VERSION = 'v1beta2';
 
 function ImageAutomation() {
   const CRD = K8s.ResourceClasses.CustomResourceDefinition;
+  const isFluxInstalled = useFluxInstallCheck();
   const isVersionAvailable = CRD.apiEndpoint.apiInfo.find(
     apiInfo => apiInfo.version === IMAGE_AUTOMATION_BETA_VERSION
   );
@@ -50,9 +53,16 @@ function ImageAutomation() {
     return imageUpdateAutomation?.makeCRClass();
   }, [imageUpdateAutomation]);
 
+  if(isFluxInstalled === null){
+    return <Loader />;
+  }
+
+  if(!isFluxInstalled){
+    return <Flux404 />;
+  }
+
   return (
     <>
-      <CheckIfFluxInstalled />
       {imageRepository && <ImageRepositoryList resourceClass={imageRepositoryClass} />}
       {imagePolicy && <ImagePolicyList resourceClass={imagePolicyClass} />}
       {imageUpdateAutomation && (
@@ -73,7 +83,12 @@ export default function ImageAutomationWrapper() {
 
   if (!isImageAutomationControllerAvailable) {
     return (
-      <SectionBox>
+      <SectionBox sx={{
+        padding: '1rem',
+        alignItems: 'center',
+        margin: '2rem auto',
+        maxWidth: '600px',
+      }}>
         <h1>Image Automation Controller is not installed</h1>
         <p>
           Follow the{' '}

flux/src/kustomizations/KustomizationList.tsx

@@ -7,21 +7,27 @@ import {
 import { useFilterFunc } from '@kinvolk/headlamp-plugin/lib/Utils';
 import MuiLink from '@mui/material/Link';
 import React from 'react';
-import CheckIfFluxInstalled, { useFluxControllerAvailableCheck } from '../checkflux';
+import { useTheme } from '@mui/material/styles';
+import  { useFluxControllerAvailableCheck, useFluxInstallCheck } from '../checkflux';
 import Table from '../common/Table';
+import Flux404 from '../checkflux';
 
 export function Kustomizations() {
   const isKustomizationControllerAvailable = useFluxControllerAvailableCheck({
     name: 'kustomize-controller',
   });
-
   if (isKustomizationControllerAvailable === null) {
     return <Loader />;
   }
 
   if (!isKustomizationControllerAvailable) {
     return (
-      <SectionBox>
+      <SectionBox sx={{
+        padding: '1rem',
+        alignItems: 'center',
+        margin: '2rem auto',
+        maxWidth: '600px',
+      }}>
         <h1>Kustomize Controller is not installed</h1>
         <p>
           Follow the{' '}
@@ -38,6 +44,7 @@ export function Kustomizations() {
 }
 
 export function KustomizationListWrapper() {
+  const isFluxInstalled = useFluxInstallCheck();
   const [kustomizations] = K8s.ResourceClasses.CustomResourceDefinition.useGet(
     'kustomizations.kustomize.toolkit.fluxcd.io'
   );
@@ -46,9 +53,16 @@ export function KustomizationListWrapper() {
     return kustomizations?.makeCRClass();
   }, [kustomizations]);
 
+  if(isFluxInstalled === null) {
+    return <Loader />;
+  }
+
+  if(!isFluxInstalled) {
+    return <Flux404 />;
+  }
+
   return (
     <div>
-      <CheckIfFluxInstalled />
       {kustomizationResourceClass && (
         <KustomizationList resourceClass={kustomizationResourceClass} />
       )}

flux/src/notifications/NotificationList.tsx

@@ -8,8 +8,10 @@ import {
 import { useFilterFunc } from '@kinvolk/headlamp-plugin/lib/Utils';
 import { Box, Link as MuiLink } from '@mui/material';
 import React from 'react';
-import CheckIfFluxInstalled, { useFluxControllerAvailableCheck } from '../checkflux';
+import { useTheme } from '@mui/material/styles';
+import  { useFluxControllerAvailableCheck, useFluxInstallCheck } from '../checkflux';
 import Table from '../common/Table';
+import Flux404 from '../checkflux';
 
 export default function NotificationsWrapper() {
   const isNotifcationControllerAvailable = useFluxControllerAvailableCheck({
@@ -22,7 +24,12 @@ export default function NotificationsWrapper() {
 
   if (!isNotifcationControllerAvailable) {
     return (
-      <SectionBox>
+      <SectionBox sx={{
+        padding: '1rem',
+        alignItems: 'center',
+        margin: '2rem auto',
+        maxWidth: '600px',
+      }}>
         <h1>Notification Controller is not installed</h1>
         <p>
           Follow the{' '}
@@ -38,6 +45,7 @@ export default function NotificationsWrapper() {
 }
 
 export function Notifications() {
+  const isFluxInstalled = useFluxInstallCheck()
   const [alerts] = K8s.ResourceClasses.CustomResourceDefinition.useGet(
     'alerts.notification.toolkit.fluxcd.io'
   );
@@ -62,9 +70,16 @@ export function Notifications() {
     return receivers?.makeCRClass();
   }, [receivers]);
 
+  if(isFluxInstalled === null) {
+    return <Loader />;
+  }
+  
+  if(!isFluxInstalled) {
+    return <Flux404 />;
+  }
+
   return (
     <>
-      <CheckIfFluxInstalled />
       {alerts && <Alerts resourceClass={alertsClass} />}
       {providers && <Providers resourceClass={providersClass} />}
       {receivers && <Receivers resourceClass={receiversClass} />}

flux/src/sources/SourceList.tsx

@@ -1,9 +1,11 @@
 import { K8s } from '@kinvolk/headlamp-plugin/lib';
-import { SectionFilterHeader } from '@kinvolk/headlamp-plugin/lib/components/common';
-import CheckIfFluxInstalled from '../checkflux';
+import { Loader, SectionFilterHeader } from '@kinvolk/headlamp-plugin/lib/components/common';
+import  { useFluxInstallCheck } from '../checkflux';
 import FluxSourceCustomResource from './SourceCustomResourceSingle';
+import Flux404 from '../checkflux';
 
 export default function FluxSources() {
+  const isFluxInstalled = useFluxInstallCheck();
   const [gitRepoCRD] = K8s.ResourceClasses.CustomResourceDefinition.useGet(
     'gitrepositories.source.toolkit.fluxcd.io'
   );
@@ -43,9 +45,16 @@ export default function FluxSources() {
     },
   ];
 
+  if(isFluxInstalled === null) {
+    return <Loader />;
+  }
+
+  if(!isFluxInstalled) {
+    return <Flux404 />
+  }
+
   return (
     <div>
-      <CheckIfFluxInstalled />
       {sourceTables.map(
         ({ title, crd }) => crd && <FluxSourceCustomResource crd={crd} title={title} />
       )}