Merge pull request #165 from mgalesloot/feature/least-privilege

flux: support users with only namespace permissions

Author: ashu8912

flux/src/checkflux/index.tsx

@@ -1,52 +1,44 @@
-import { K8s } from '@kinvolk/headlamp-plugin/lib';
+import { SectionBox} from '@kinvolk/headlamp-plugin/lib/components/common';
 import { Box, Link } from '@mui/material';
-import { useTheme } from '@mui/material';
 
-export default function Flux404() {
-  const theme = useTheme();
+export default function Flux404(props: Readonly<{ message: string; docs?: string }>) {
+  const { message, docs } = props;
 
-    // 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
-        sx={{
-          padding: '1rem',
-          alignItems: 'center',
-          margin: '2rem auto',
-          maxWidth: '600px',
-        }}
-      >
-        <h1>Flux is not installed</h1>
-        <p>
-          Follow the{' '}
-          <Link target="_blank" href="https://fluxcd.io/docs/installation/">
-            installation guide
-          </Link>{' '}
-          to install flux on your cluster
-        </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;
+  // 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
+      sx={{
+        padding: '1rem',
+        alignItems: 'center',
+        margin: '2rem auto',
+        maxWidth: '600px',
+      }}
+    >
+      <h1>{message}</h1>
+      <p>
+        Follow the{' '}
+        <Link target="_blank" href={docs ?? 'https://fluxcd.io/docs/installation/'}>
+          installation guide
+        </Link>{' '}
+        to install flux on your cluster
+      </p>
+    </Box>
+  );
 }
 
-export function useFluxControllerAvailableCheck(props: { name: string }) {
-  const { name } = props;
-  const [deployments] = K8s.ResourceClasses.Deployment.useList({
-    labelSelector: 'app.kubernetes.io/part-of=flux',
-  });
-
-  if (deployments === null) {
-    return null;
-  }
-
-  return deployments?.find(
-    deployment => deployment.jsonData.metadata?.labels['app.kubernetes.io/component'] === name
+export function NotSupported(props: { typeName: string }) {
+  const { typeName } = props;
+  return (
+    <SectionBox title={typeName}> 
+      <p>Flux installation has no support for {typeName}.</p>
+      <p>
+        Follow the{' '}
+        <Link target="_blank" href="https://fluxcd.io/docs/installation/">
+          installation guide
+        </Link>{' '}
+        to support {typeName} on your cluster
+      </p>
+    </SectionBox> 
   );
 }

flux/src/helm-releases/HelmReleaseList.tsx

@@ -1,84 +1,44 @@
-import { K8s } from '@kinvolk/headlamp-plugin/lib';
-import {
-  Loader,
-  SectionBox,
-  SectionFilterHeader,
-} from '@kinvolk/headlamp-plugin/lib/components/common';
+import { SectionBox, SectionFilterHeader } from '@kinvolk/headlamp-plugin/lib/components/common';
+import { makeCustomResourceClass } from '@kinvolk/headlamp-plugin/lib/lib/k8s/crd';
 import { useFilterFunc } from '@kinvolk/headlamp-plugin/lib/Utils';
-import { Link as MuiLink } from '@mui/material';
-import React from 'react';
-import { useTheme } from '@mui/material/styles';
-import  { useFluxControllerAvailableCheck, useFluxInstallCheck } from '../checkflux';
+import { NotSupported } from '../checkflux';
 import Table from '../common/Table';
-import Flux404 from '../checkflux';
+import React from 'react';
 
 export function HelmReleases() {
-  const isHelmReleasesControllerAvailable = useFluxControllerAvailableCheck({
-    name: 'helm-controller',
-  });
+  return <HelmReleasesList />;
+}
 
-  if (isHelmReleasesControllerAvailable === null) {
-    return <Loader />;
-  }
+export function helmReleaseClass() {
+  const helmreleaseGroup = 'helm.toolkit.fluxcd.io';
+  const helmreleaseVersion = 'v2';
 
-  if (!isHelmReleasesControllerAvailable) {
-    return (
-      <SectionBox sx={{
-        padding: '1rem',
-        alignItems: 'center',
-        margin: '2rem auto',
-        maxWidth: '600px',
-      }}>
-        <h1>Helm Controller is not installed</h1>
-        <p>
-          Follow the{' '}
-          <MuiLink target="_blank" href="https://fluxcd.io/docs/components/helm/">
-            installation guide
-          </MuiLink>{' '}
-          to install Helm Controller on your cluster
-        </p>
-      </SectionBox>
-    );
-  }
-  return <HelmReleasesListWrapper />;
+  return makeCustomResourceClass({
+    apiInfo: [{ group: helmreleaseGroup, version: helmreleaseVersion }],
+    isNamespaced: true,
+    singularName: 'helmrelease',
+    pluralName: 'helmreleases',
+  });
 }
 
-function HelmReleasesListWrapper() {
-  const [helmReleases] = K8s.ResourceClasses.CustomResourceDefinition.useGet(
-    'helmreleases.helm.toolkit.fluxcd.io'
-  );
+function HelmReleasesList() {
+  const filterFunction = useFilterFunc();
+  const [resources, setResources] = React.useState(null);
+  const [error, setError] = React.useState(null);
 
-  const helmReleaseResourceClass = React.useMemo(() => {
-    return helmReleases?.makeCRClass();
-  }, [helmReleases]);
+  helmReleaseClass().useApiList(setResources, setError);
 
-  const isFluxInstalled = useFluxInstallCheck();
-  
-  if(isFluxInstalled === null) {
-    return <Loader />;
-  }
-  
-  if(!isFluxInstalled) {
-    return <Flux404 />;
+  if (error?.status === 404) {
+    return <NotSupported typeName="Helm Releases" />
   }
 
-  return (
-    <div>
-      {helmReleaseResourceClass && <HelmReleasesList resourceClass={helmReleaseResourceClass} />}
-    </div>
-  );
-}
-
-function HelmReleasesList({ resourceClass }) {
-  const [resource] = resourceClass.useList();
-
   return (
     <SectionBox title={<SectionFilterHeader title="Helm Releases" />}>
       <Table
-        data={resource}
+        data={resources}
         defaultSortingColumn={2}
-        filterFunction={useFilterFunc()}
         columns={['name', 'namespace', 'status', 'source', 'revision', 'message', 'lastUpdated']}
+        filterFunction={filterFunction}
       />
     </SectionBox>
   );

flux/src/helm-releases/HelmReleaseSingle.tsx

@@ -7,7 +7,6 @@ import {
   Table,
 } from '@kinvolk/headlamp-plugin/lib/components/common';
 import Event, { KubeEvent } from '@kinvolk/headlamp-plugin/lib/K8s/event';
-import { KubeObject } from '@kinvolk/headlamp-plugin/lib/lib/k8s/cluster';
 import Editor from '@monaco-editor/react';
 import React from 'react';
 import { useParams } from 'react-router-dom';
@@ -22,66 +21,32 @@ import {
 import RemainingTimeDisplay from '../common/RemainingTimeDisplay';
 import StatusLabel from '../common/StatusLabel';
 import { getSourceNameAndType, ObjectEvents } from '../helpers/index';
-import { GetResourcesFromInventory,HELMRELEASE_CRD } from '../inventory';
+import { GetResourcesFromInventory } from '../inventory';
+import { helmReleaseClass } from './HelmReleaseList';
+import { GetSource } from '../sources/Source';
 
-function GetSourceCR(props: {
-  name: string;
-  namespace: string;
-  resource: KubeObject | null;
-  setSource: (...args) => void;
-}) {
-  const { name, namespace, resource, setSource } = props;
-  const resourceClass = React.useMemo(() => {
-    return resource.makeCRClass();
-  }, [resource]);
-
-  resourceClass.useApiGet(setSource, name, namespace);
-
-  return null;
-}
-
-function GetSource(props: { item: KubeObject | null; setSource: (...args) => void }) {
-  const { item, setSource } = props;
-  const namespace = item.jsonData.metadata.namespace;
-
-  const { name, type } = getSourceNameAndType(item);
-
-  const [resource] = K8s.ResourceClasses.CustomResourceDefinition.useGet(
-    `${type.split(' ').join('').toLowerCase()}.source.toolkit.fluxcd.io`
-  );
-  return (
-    resource && (
-      <GetSourceCR name={name} namespace={namespace} resource={resource} setSource={setSource} />
-    )
-  );
-}
-
-export default function FluxHelmReleaseDetailView() {
+export function FluxHelmReleaseDetailView() {
   const { namespace, name } = useParams<{ namespace: string; name: string }>();
 
   const [events] = Event?.default.useList({
     namespace,
     fieldSelector: `involvedObject.name=${name},involvedObject.kind=${'HelmRelease'}`,
   });
-  const [resource] = K8s.ResourceClasses.CustomResourceDefinition.useGet(HELMRELEASE_CRD);
 
   return (
     <>
-      {resource && <CustomResourceDetails resource={resource} name={name} namespace={namespace} />}
+      <CustomResourceDetails name={name} namespace={namespace} />
       <ObjectEvents events={events?.map((event: KubeEvent) => new Event.default(event))} />
     </>
   );
 }
 
 function CustomResourceDetails(props) {
-  const { name, namespace, resource } = props;
+  const { name, namespace } = props;
   const [cr, setCr] = React.useState(null);
   const [source, setSource] = React.useState(null);
-  const resourceClass = React.useMemo(() => {
-    return resource.makeCRClass();
-  }, [resource]);
 
-  resourceClass.useApiGet(setCr, name, namespace);
+  helmReleaseClass().useApiGet(setCr, name, namespace);
 
   function prepareExtraInfo(cr) {
     if (!cr) {
@@ -100,7 +65,7 @@ function CustomResourceDetails(props) {
       {
         name: 'Reconcile Strategy',
         value: cr?.jsonData?.spec.chart?.spec?.reconcileStrategy,
-      }
+      },
     ];
 
     if (cr?.jsonData?.spec?.chartRef) {