From 14ea5e8643b74b6f6e2e9a2cb3d31783e5c93877 Mon Sep 17 00:00:00 2001
From: Laszlo Fogas <laszlo@gimlet.io>
Date: Mon, 15 Jan 2024 14:23:46 +0100
Subject: [PATCH] ReadyWidget generalized

---
 web/src/FluxState.js | 32 +++++++-------------------------
 web/src/Service.jsx  |  6 +++---
 2 files changed, 10 insertions(+), 28 deletions(-)

diff --git a/web/src/FluxState.js b/web/src/FluxState.js
index 02ee961..92047db 100644
--- a/web/src/FluxState.js
+++ b/web/src/FluxState.js
@@ -41,7 +41,7 @@ export function Kustomizations(props){
                 </span>
               </div>
               <div className="col-span-5">
-                <span className="block"><ReadyWidget gitRepository={kustomization} displayMessage={true}/></span>
+                <span className="block"><ReadyWidget resource={kustomization} displayMessage={true} label="Applied" /></span>
               </div>
               <div className="col-span-5">
                 <div className="font-medium text-neutral-700"><RevisionWidget kustomization={kustomization} gitRepository={gitRepository} /></div>
@@ -87,14 +87,11 @@ export function HelmReleases(props) {
                 </span>
               </div>
               <div className="col-span-5">
-                <span className="block font-medium text-neutral-700"><HelmStatusWidget helmRelease={helmRelease}/></span>
+                <span className="block font-medium text-neutral-700"><ReadyWidget resource={helmRelease} label="Installed" /></span>
                 <span className="block text-neutral-600 field">{message}</span>
               </div>
               <div className="col-span-5">
                 <div className="font-medium text-neutral-700"><HelmRevisionWidget helmRelease={helmRelease} /></div>
-                {/* { !ready && */}
-                <span className="block field text-yellow-500">Attempted applying {lastAttemptedHash.slice(0, 8)} at {dateLabel}</span>
-                {/* } */}
               </div>
             </div>
           )
@@ -158,7 +155,7 @@ export function GitRepositories(props){
                 </span>
               </div>
               <div className="col-span-5">
-                <ReadyWidget gitRepository={gitRepository} displayMessage={true}/>
+                <ReadyWidget resource={gitRepository} displayMessage={true}/>
               </div>
               <div className="col-span-5">
                 <ArtifactWidget gitRepository={gitRepository} displayMessage={true}/>
@@ -172,12 +169,13 @@ export function GitRepositories(props){
 }
 
 export function ReadyWidget(props) {
-  const { gitRepository, displayMessage } = props
-  const readyConditions = jp.query(gitRepository.status, '$..conditions[?(@.type=="Ready")]');
+  const { resource, displayMessage, label } = props
+
+  const readyConditions = jp.query(resource.status, '$..conditions[?(@.type=="Ready")]');
   const readyCondition = readyConditions.length === 1 ? readyConditions[0] : undefined
 
   const ready = readyCondition && readyConditions[0].status === "True" 
-  const readyLabel = ready ? "Ready" : "Not Ready"
+  const readyLabel = ready ? label ? label : "Ready" : "Not Ready"
   const color = ready ? "bg-teal-400" : "bg-orange-400 animate-pulse"
   const messageColor = ready ? "text-neutral-600 field" : "bg-orange-400"
 
@@ -237,22 +235,6 @@ export function ArtifactWidget(props) {
   )
 }
 
-export function HelmStatusWidget(props) {
-  const { helmRelease } = props
-
-  const readyConditions = jp.query(helmRelease.status, '$..conditions[?(@.type=="Ready")].status');
-  const ready = readyConditions.includes("True")
-
-  const label = ready ? "Installed" : "Not Ready"
-
-  return (
-    <span className="relative">
-      <span className="absolute -left-4 top-1 rounded-full h-3 w-3 bg-teal-400 inline-block"></span>
-      <span>{label}</span>
-    </span>
-  )
-}
-
 export function HelmRevisionWidget(props) {
   const { helmRelease } = props
 
diff --git a/web/src/Service.jsx b/web/src/Service.jsx
index 0bda202..167221f 100644
--- a/web/src/Service.jsx
+++ b/web/src/Service.jsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { RevisionWidget, ReadyWidget, HelmStatusWidget } from './FluxState';
+import { RevisionWidget, ReadyWidget } from './FluxState';
 import jp from 'jsonpath';
 import { Logs } from './Logs'
 import { Describe } from './Describe'
@@ -209,7 +209,7 @@ function Service(props) {
                 <div>
                   <p className="text-base text-neutral-600">Sync</p>
                   <div className="flex text-sm text-neutral-600">
-                    <div className="ml-4"><ReadyWidget gitRepository={kustomization}/></div>
+                    <div className="ml-4"><ReadyWidget resource={kustomization} label="Applied" /></div>
                     <div className="ml-2"><RevisionWidget kustomization={kustomization} gitRepository={gitRepository} /></div>
                   </div>
                 </div>
@@ -217,7 +217,7 @@ function Service(props) {
                 <div>
                   <p className="text-base text-neutral-600">Helm Status</p>
                   <div className="flex text-sm text-neutral-600">
-                    <div className="ml-4"><HelmStatusWidget helmRelease={helmRelease} /></div>
+                    <div className="ml-4"><ReadyWidget resource={helmRelease} label="Installed" /></div>
                     <div className="ml-4">({helmRelease.metadata.namespace}/{helmRelease.metadata.name})</div>
                   </div>
                 </div>