Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Init flux plugin #75

Merged
merged 1 commit into from
Oct 24, 2024
Merged

Init flux plugin #75

merged 1 commit into from
Oct 24, 2024

Conversation

ashu8912
Copy link
Member

No description provided.

@ashu8912 ashu8912 force-pushed the add-flux-plugin branch 2 times, most recently from aa64d29 to 9977dc4 Compare August 20, 2024 09:23
@ashu8912
Copy link
Member Author

Screenshot 2024-08-20 at 1 32 53 PM Screenshot 2024-08-20 at 1 32 14 PM Screenshot 2024-08-20 at 1 31 57 PM Screenshot 2024-08-20 at 1 31 42 PM Screenshot 2024-08-20 at 1 31 33 PM Screenshot 2024-08-20 at 1 31 22 PM Screenshot 2024-08-20 at 1 31 04 PM Screenshot 2024-08-20 at 1 29 20 PM Screenshot 2024-08-20 at 1 29 05 PM

@ashu8912
Copy link
Member Author

fixes #74

@mgalesloot
Copy link
Contributor

A comparison between HeadLamp flux plugin and Weave Gitops is provided below. The focus is on Kustomization and HelmRelease.

Page Review
applications Weave GitOps shows helmreleases and kustomizations in a single table.
applications Weave shows kustomizations and helmreleases with errors on top which is nice for monitoring. The flip side is that the entries are continuously being sorted which is annoying.
applications Headlamp: width of the colums do not resize to content. Other headlamp pages (e.g list of pods) have better column widths.
applications Headlamp: Icon Ready/Failed is quite large making the table untidy. I would prefer the same styling as in other HeadLamp pages e.g. Workloads/Pods/Status
applications Weave shows Tenant and Verified fields which are not shown in Headlamp.
applications Headlamp shows Revision and Last Updated, which are not shown in Weave. Helmrelease does not have a lastAppliedRevision, maybe we should use lastAttemptedRevision for helmrelease
applications Weave shows checkboxes supported with actions for Sync, Suspend, Resume.
applications Weave does not provide pagination.
kustomization Weave shows more information in a collapsable panel, however quite a few fields are not shown (creation, prune, force, annotations, ...)
kustomization Weave shows icon and status info in the header, e.g. "GitRepository.source.toolkit.fluxcd.io "does-not-exist" not found"
kustomization Weave shows Last Updated 1 minute ago in the top right of the page
kustomization Weave shows icon and health checks in the header (but I doubt you can trust it to be correct)
kustomization SourceRef is in HeadLamp shown as JSON, in Weave the ref to source is shown as a hyperlink
kustomization/Inventory Weave Gitops calls the Inventory "Details"
kustomization/Inventory Order of fields is name/kind/namespace (headlamp has name/namespace/kind)
kustomization/Inventory Weave shows a message field (e.g. "ReplicaSet "source-controller-54c89dcbf6" has successfully progressed.")
kustomization/Inventory Weave shows the actual container images
kustomization/Inventory HeadLamp does not show Custom resources such as cert-manager.io/ClusterIssuer
kustomization/Inventory Weave shows a Healthy column (not always useful, my test shows a healthy icon with the message "Deployment does not have minimum availability." )
kustomization/Events Default sort order in Weave is Last event first.
kustomization/Conditions Weave does not show conditions
kustomization/Graph Weaves graph looks nice but impossible to use on smaller screens.
kustomization/Dependencies Weave shows dependencies as a graph. Dependencies are red if not ready. Headlamp shows dependencies, but there is no navigation link and the status is not shown.
kustomization/Yaml Weave provides read only YAML, HeadLamp direct;ly goes into edit mode.
kustomization/Violations Weave shows violations from the Weave Enterprise Policy Agent.
helmrelease Most findings for kustomization apply to helmrelease as well.
helmrelease Weave shows values only in the YAML.
helmrelease Weave shows Last attempted revision , Last applied revision
helmrelease Weave does not show Reconcile strategy (dont understand why)
helmrelease/Inventory Nothing is shown in Weave nor Headlamp. Please note Flux tree shows details for helmreleases.

@stefanprodan
Copy link

stefanprodan commented Aug 22, 2024

I've been reading the code and for HelmRelease it assumes that the chart is always embedded in the .spec.chart while in the Flux API this is just one of the possibilities. For charts hosted in OCI repositories this is how it looks:

apiVersion: source.toolkit.fluxcd.io/v1beta2
kind: OCIRepository
metadata:
  name: podinfo
  namespace: default
spec:
  interval: 10m
  url: oci://ghcr.io/stefanprodan/charts/podinfo
  ref:
    semver: ">6.0.0"
---
apiVersion: helm.toolkit.fluxcd.io/v2
kind: HelmRelease
metadata:
  name: podinfo
  namespace: default
spec:
  interval: 10m
  releaseName: podinfo
  chartRef:
    kind: OCIRepository
    name: podinfo

Note how there is no .spec.chart.spec but instead .spec.chartRef.

@ashu8912
Copy link
Member Author

I've been reading the code and for HelmRelease it assumes that the chart is always embedded in the .spec.chart while in the Flux API this is just one of the possibilities. For charts hosted in OCI repositories this is how it looks:

apiVersion: source.toolkit.fluxcd.io/v1beta2
kind: OCIRepository
metadata:
  name: podinfo
  namespace: default
spec:
  interval: 10m
  url: oci://ghcr.io/stefanprodan/charts/podinfo
  ref:
    semver: ">6.0.0"
---
apiVersion: helm.toolkit.fluxcd.io/v2
kind: HelmRelease
metadata:
  name: podinfo
  namespace: default
spec:
  interval: 10m
  releaseName: podinfo
  chartRef:
    kind: OCIRepository
    name: podinfo

Note how there is no .spec.chart.spec but instead .spec.chartRef.

Thanks @stefanprodan for pointing that out, i will add a patch for this

@ashu8912
Copy link
Member Author

Hii @stefanprodan I have added a fix for the above in this same PR

@ashu8912
Copy link
Member Author

I have also taken some of @mgalesloot comments and added fix for them as well

@Aubermean
Copy link

How can I install this? Could you release it via Artifact Hub or somewhere else so it can be installed in the Desktop App by enabling unofficial repositories? I tried to download the fork and build the plugin but I am having issues installing @kinvolk/headlamp-plugin...

@Aubermean
Copy link

It seems without building the plugins and building the desktop application, there isn't a way to install the Flux plugin. Can we get this PR merged so others can start using it? In any case, the plugin isn't enabled by default so a first release shouldn't cause breaking changes right? Thanks! @stefanprodan @ashu8912

@Aubermean
Copy link

I have managed to get the plugin installed. I am not a node or javascript guy so it took some strong wifi and a lot of dependencies. It's awesome, thank you, great work guys.

I noticed some things, and had some ideas. But instead of writing them here, I created a new issue for each.

I have never once used a Flux UI like Weaveworks, Flamingo, Capacitor etc. so maybe someone who has (@mgalesloot ?) would like to chime in.

@ashu8912
Copy link
Member Author

ashu8912 commented Sep 2, 2024

Thank you @Aubermean for reporting these issues, we will take a look at each one of them.

@Aubermean
Copy link

Thanks @ashu8912, I wish I could do more to contribute but I am just a self-employed guy learning GitOps thanks to @stefanprodan's awesome D1 Architecture PDF/repos :)

@Aubermean
Copy link

For my own reference and for others, this is how to quickly pull, build, and install the flux plugin (or any plugin really) on macOS:

mkdir -p ~/Downloads/headlamp-plugins
git clone https://github.com/headlamp-k8s/plugins.git ~/Downloads/headlamp-plugins
cd ~/Downloads/headlamp-plugins
git checkout add-flux-plugin
cd flux-plugin
asdf install nodejs 22.8.0
asdf local nodejs 22.8.0
npm install
npm install -g @kinvolk/headlamp-plugin
npx @kinvolk/headlamp-plugin build .
rm -rf ~/Library/Application\ Support/Headlamp/plugins/flux
mkdir -p ~/Library/Application\ Support/Headlamp/plugins/flux
cp package.json dist/* ~/Library/Application\ Support/Headlamp/plugins/flux
rm -rf ~/Downloads/headlamp-plugins

@Smana
Copy link

Smana commented Sep 5, 2024

I'll give it a try, thank you @Aubermean

@Smana
Copy link

Smana commented Sep 6, 2024

I'll give it a try, thank you @Aubermean

I got it working with tiny changes in Linux

mkdir -p ~/.config/Headlamp/plugins/flux
cp package.json dist/* ~/.config/Headlamp/plugins/flux

Screenshot from 2024-09-06 21-27-48

@stefanprodan
Copy link

stefanprodan commented Sep 7, 2024

From the last printscreen looks like the HelmRelease revision is broken. @ashu8912 here are the json paths to find the revision:

Note that in both cases, the json path may be missing if the Flux resource failed to reconcile at creation time.

Copy link
Contributor

@joaquimrocha joaquimrocha left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Rough review but found a few things that could be improved.

flux-plugin/package.json Outdated Show resolved Hide resolved
flux-plugin/package.json Outdated Show resolved Hide resolved
flux-plugin/package.json Outdated Show resolved Hide resolved
flux-plugin/src/flux-image-automation/image-automation.tsx Outdated Show resolved Hide resolved
flux-plugin/src/flux-image-automation/image-automation.tsx Outdated Show resolved Hide resolved
}}
>
<Typography variant="h6">Events</Typography>

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please remove this newline

<Typography variant="h6">Events</Typography>

<SimpleTable
data={events?.filter(it => it.involvedObject.uid === resource.metadata.uid) ?? []}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe you want to keep a memo of this, or use the query field in useList.

Comment on lines 200 to 203
// .then(node =>
// // another layout pass to make sure nodes are not overlapping
// elk.layout(node, { layoutOptions: { 'elk.algorithm': 'org.eclipse.elk.sporeOverlap' } })
// )
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Delete comments.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

done

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Seems like this is not needed.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

removed

Comment on lines 1 to 15
# flux-plugin

This is the default template README for [Headlamp Plugins](https://github.com/headlamp-k8s/headlamp).

- The description of your plugin should go here.
- You should also edit the package.json file meta data (like name and description).

## Developing Headlamp plugins

For more information on developing Headlamp plugins, please refer to:

- [Getting Started](https://headlamp.dev/docs/latest/development/plugins/), How to create a new Headlamp plugin.
- [API Reference](https://headlamp.dev/docs/latest/development/api/), API documentation for what you can do
- [UI Component Storybook](https://headlamp.dev/docs/latest/development/frontend/#storybook), pre-existing components you can use when creating your plugin.
- [Plugin Examples](https://github.com/headlamp-k8s/headlamp/tree/main/plugins/examples), Example plugins you can look at to see how it's done.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's replace this with a description and a link to instructions on installing Flux.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

done

@kingdonb
Copy link

kingdonb commented Sep 25, 2024

I just made some mention of this plugin in headlamp-k8s/headlamp#2342

The plugin does not function when installed in a single-namespace environment, because there is no way to detect if Flux is installed. Could we add a plugin settings option to skip checking, and assume that Flux is installed?

It's better if there is no option needed, maybe if the plugin detects it does not have permission to list CRDs (I assume how it's checking for Flux installed or not) then it would fall back to assuming Flux is installed? My service account token has the admin role in the namespace, so it can definitely read all the Flux resources in the namespace:

% kubectl auth can-i list kustomizations.kustomize.toolkit.fluxcd.io --as system:serviceaccount:test-yebyen:flux
yes

Users who work in a single-namespace tenant environment will already have to find the Settings page to configure allowed namespace / default namespace, so I don't think expecting them to find the checkbox in plugin settings is too much to ask. But maybe it can be detected without listing CRDs, or whatever other permission we are missing here.

@ashu8912 ashu8912 force-pushed the add-flux-plugin branch 3 times, most recently from 90f215c to df96c66 Compare September 30, 2024 07:14
@kingdonb
Copy link

I built from the latest push today, I got this message:

Screenshot 2024-09-30 at 3 29 49 PM

This is the actual state of the cluster:

Screenshot 2024-09-30 at 3 30 31 PM

It's not a standard flux bootstrap install, this is a Flux 2.3.0 installed from the flux-operator

I'm having a look through the code right now to see if I can understand why it doesn't pick up my flux installation, in the cozy-fluxcd namespace:

Screenshot 2024-09-30 at 3 31 44 PM

@gecube
Copy link

gecube commented Oct 1, 2024

Hello!

I tried to install the plugin, but unfortunately it does not work properly.

I used the image from @kingdonb so the final manifest for headlamp looked like:

---
apiVersion: v1
kind: Namespace
metadata:
  name: headlamp
---
apiVersion: source.toolkit.fluxcd.io/v1beta1
kind: HelmRepository
metadata:
  name: headlamp
  namespace: headlamp
spec:
  interval: 1m0s
  timeout: 1m0s
  url: https://headlamp-k8s.github.io/headlamp/
---
apiVersion: helm.toolkit.fluxcd.io/v2beta1
kind: HelmRelease
metadata:
  name: headlamp
  namespace: headlamp
spec:
  chart:
    spec:
      chart: headlamp
      sourceRef:
        kind: HelmRepository
        name: headlamp
      version: '*'
  interval: 1m0s
  values:
    ingress:
      enabled: true
      ingressClassName: nginx
      annotations: 
        cert-manager.io/cluster-issuer: letsencrypt-http01-nginx-issuer
      hosts:
      - host: headlamp.my-cool-domain.com
        paths:
        - path: /
          type: ImplementationSpecific
      tls:
      - secretName: headlamp-tls
        hosts:
          - headlamp.my-cool-domain.com
    config:
      pluginsDir: /build/plugins
    initContainers:
    - command:
      - /bin/sh
      - -c
      - mkdir -p /build/plugins && cp -r /plugins/* /build/plugins/
      image: kingdonb/plugins:canary
      imagePullPolicy: Always
      name: headlamp-plugins
      volumeMounts:
      - mountPath: /build/plugins
        name: headlamp-plugins
    persistentVolumeClaim:
      accessModes:
      - ReadWriteOnce
      enabled: true
      size: 1Gi
    volumeMounts:
    - mountPath: /build/plugins
      name: headlamp-plugins
    volumes:
    - name: headlamp-plugins
      persistentVolumeClaim:
        claimName: headlamp

I used a different namespace for headlamp because of the security considerations, but I think it should be fine.

The image from @kingdonb was also the latest version, so I am sure that the issue is not with the version of plugin.

FluxCD is 2.3.0

The token was obtained like:

$ kubectl create token headlamp -n headlamp
eyJhbGciOiJSUzI1NiIsImtpZCI6InFnRTAzWDFZWGZfLThzcDl2dzY3UU1YUmx2c011bnVNLUZDZU8xQVZGbGMifQ.eyJhdWQiOlsiaHR0cHM6Ly9rdWJlcm5ldGVzLmRlZmF1bHQuc3ZjLmNsdXN0ZXIubG9jYWwiXSwiZXhwIjoxNzI3NzY1ODQwLCJpYXQiOjE3Mjc3NjIyNDAsImlzcyI6Imh0dHBzOi8va3ViZXJuZXRlcy5kZWZhdWx0LnN2Yy5jbHVzdGVyLmxvY2FsIiwianRpIjoiNGYwZWVlOTctNWJjNi00ZTQ4LThkNmEtMWU4NDlhOWZmZDZlIiwia3ViZXJuZXRlcy5pbyI6eyJuYW1lc3BhY2UiOiJoZWFkbGFtcCIsInNlcnZpY2VhY2NvdW50Ijp7Im5hbWUiOiJoZWFkbGFtcCIsInVpZCI6Ijc1YTlmOWU0LWY2NDUtNGYzNi1iZDFhLTA5NGE0MDY1ZWIzNyJ9fSwibmJmIjoxNzI3NzYyMjQwLCJzdWIiOiJzeXN0ZW06c2VydmljZWFjY291bnQ6aGVhZGxhbXA6aGVhZGxhbXAifQ.Sl2XRmgGoqY1yng2iJTKjYVq3FQ1qVA7hZqwvwMkYqcpiCIqj63okQVkdjSTe0T90iP7z2BTOh6DDhB0SGzXIuzLUJmhPNbZUOEtrAKkzAq9QRf1493GafaNIoyP8C0ud-FhHeVRSahxVp2fNyYYe7P-nD9BxuZiEfEDZdeojQl8dsZ1yiXMMknDLw2TCvP1MZN15fv1M9PtgkQrKeERywe8Tj9gC5ihI18FQ4dW-YDHqoiK2D-iCw6Ao_05Th3KLOVRUp6t9y-9HxsjKqKPQMLFWQ-M0fxjoctgpMVKFkXXAsK89dMDdQyeRUc9P4sHPNtBUr9kSAFc3pJPlnBd1w

so there is a discrepancy with the documentation

I noticed that the pod metrics are not shown (but we are using VictoriaMetrics stack)

Screenshot 2024-10-01 at 07 59 16

And when clicking on FluxCD on the left bar I am getting:

Screenshot 2024-10-01 at 08 00 06

In the same time in browser development tools:

Screenshot 2024-10-01 at 08 00 26 Screenshot 2024-10-01 at 08 00 51

It is very interesting that the API is working and Flux objects were fetched:

Screenshot 2024-10-01 at 08 01 06

I am looking for some advice.

@ashu8912
Copy link
Member Author

ashu8912 commented Oct 1, 2024

Thanks for reporting this @gecube we are looking into this, will get back to you soon

@ashu8912 ashu8912 force-pushed the add-flux-plugin branch 4 times, most recently from 86fc423 to 668e4c3 Compare October 3, 2024 14:30
@ashu8912 ashu8912 force-pushed the add-flux-plugin branch 3 times, most recently from d31a77d to 5774f3c Compare October 15, 2024 15:49
import { Link as MuiLink } from '@mui/material';

export default function FluxRunTime() {
const [pods] = K8s.ResourceClasses.Pod.useList();

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does this loads all the pods in the cluster? If so this is extremely costly and unnecessary.

I propose we get change this list to show Kubernetes Deployments instead of pods. You can directly filter the Deployments by showing only those with the label app.kubernetes.io/part-of: flux.

export default function FluxRunTime() {
const [pods] = K8s.ResourceClasses.Pod.useList();
const [crds] = K8s.ResourceClasses.CustomResourceDefinition.useList();
const helmController = pods?.filter(pod => pod.metadata.labels['app'] === 'helm-controller');

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

helm-controller is optional, if it doesn't exists this doesn't mean Flux is not installed. The only required controller is source-controller.

]}
/>
</SectionBox>
<SectionBox title="Custom Resource Definitions">

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This table should display the storage versions.

@stefanprodan
Copy link

The spacing in all tables looks off, starting with the 3rd column you can't see the info:

Screenshot 2024-10-17 at 10 24 41

@stefanprodan
Copy link

I suggest we split the Application page into Kustomizations and HelmReleases (dedicated pages). Lots of Flux users don't use Helm at all, and there is no concept of an Application in Flux.

Copy link
Contributor

@joaquimrocha joaquimrocha left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM! I did squash some new changes:

  • Add the status label to the details views (it's a quick way to see the status)
  • Fix reconciliation count when the item doesn't change after the count-down
  • Hide some tables in KustomizationSingle if the resource is still null

@ashu8912 I think the only thing missing now is the Flux icon being loaded locally instead of from iconify.

Co-authored-by: Joaquim Rocha <[email protected]>
Signed-off-by: ashu8912 <[email protected]>
Signed-off-by: Joaquim Rocha <[email protected]>
@joaquimrocha joaquimrocha merged commit bbed398 into main Oct 24, 2024
10 checks passed
@joaquimrocha joaquimrocha deleted the add-flux-plugin branch October 24, 2024 08:54
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

9 participants