Service sync state

gimlet-io · Dec 28, 2023 · 120b0c8 · 120b0c8
1 parent b56a13e
commit 120b0c8
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 16 deletions.
diff --git a/web/src/FluxState.js b/web/src/FluxState.js
@@ -26,8 +26,6 @@ export function Kustomizations(props){
       {
         kustomizations?.map(kustomization => {
           const message = jp.query(kustomization.status, '$..conditions[?(@.type=="Ready")].message');
-          const revision = kustomization.status.lastAppliedRevision
-          const hash = revision ? revision.slice(revision.indexOf(':') + 1) : "";
 
           const readyConditions = jp.query(kustomization.status, '$..conditions[?(@.type=="Ready")].status');
           const ready = readyConditions.includes("True")
@@ -55,15 +53,11 @@ export function Kustomizations(props){
                 </span>
               </div>
               <div className="col-span-5">
-                <span className="block font-medium text-neutral-700"><Ready gitRepository={kustomization}/></span>
+                <span className="block font-medium text-neutral-700"><ReadyWidget gitRepository={kustomization}/></span>
                 <span className="block text-neutral-600 field">{message}</span>
               </div>
               <div className="col-span-5">
-                <span className="block field font-medium text-neutral-700">
-                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" className="h4 w-4 inline fill-current"><path d="M320 336a80 80 0 1 0 0-160 80 80 0 1 0 0 160zm156.8-48C462 361 397.4 416 320 416s-142-55-156.8-128H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H163.2C178 151 242.6 96 320 96s142 55 156.8 128H608c17.7 0 32 14.3 32 32s-14.3 32-32 32H476.8z"/></svg>
-                  <span className="pl-1"><a href="#" target="_blank" rel="noopener noreferrer">{hash.slice(0, 8)}</a></span>
-                  <span>&nbsp;({`${gitRepository.metadata.namespace}/${gitRepository.metadata.name}`})</span>
-                </span>
+                <div className="font-medium text-neutral-700"><RevisionWidget kustomization={kustomization} gitRepository={gitRepository} /></div>
                 {/* { !ready && */}
                 <span className="block field text-yellow-500">Attempted applying {lastAttemptedHash.slice(0, 8)} at {dateLabel}</span>
                 {/* } */}
@@ -76,6 +70,20 @@ export function Kustomizations(props){
   )
 }
 
+export function RevisionWidget(props) {
+  const { kustomization, gitRepository } = props
+  const revision = kustomization.status.lastAppliedRevision
+  const hash = revision ? revision.slice(revision.indexOf(':') + 1) : "";
+
+  return (
+    <span className="block field">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" className="h4 w-4 inline fill-current"><path d="M320 336a80 80 0 1 0 0-160 80 80 0 1 0 0 160zm156.8-48C462 361 397.4 416 320 416s-142-55-156.8-128H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H163.2C178 151 242.6 96 320 96s142 55 156.8 128H608c17.7 0 32 14.3 32 32s-14.3 32-32 32H476.8z"/></svg>
+      <span className="pl-1"><a href="#" target="_blank" rel="noopener noreferrer">{hash.slice(0, 8)}</a></span>
+      <span>&nbsp;({`${gitRepository.metadata.namespace}/${gitRepository.metadata.name}`})</span>
+    </span>
+  )
+}
+
 export function GitRepositories(props){
   const { gitRepositories } = props
 
@@ -102,7 +110,7 @@ export function GitRepositories(props){
                 </span>
               </div>
               <div className="col-span-5">
-                <span className="block font-medium text-neutral-700"><Ready gitRepository={gitRepository}/></span>
+                <span className="block font-medium text-neutral-700"><ReadyWidget gitRepository={gitRepository}/></span>
                 <span className="block text-neutral-600 field">{message}</span>
               </div>
               <div className="col-span-5">
@@ -120,7 +128,7 @@ export function GitRepositories(props){
   )
 }
 
-function Ready(props) {
+export function ReadyWidget(props) {
   const { gitRepository } = props
   const readyConditions = jp.query(gitRepository.status, '$..conditions[?(@.type=="Ready")].status');
   const ready = readyConditions.includes("True")

diff --git a/web/src/Service.jsx b/web/src/Service.jsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import Timeline from './Timeline';
+import { RevisionWidget, ReadyWidget } from './FluxState';
 
 function Service(props) {
-  const { service, alerts } = props;
-
+  const { service, alerts, kustomization, gitRepository } = props;
   const deployment = service.deployment;
 
   return (
@@ -45,7 +45,7 @@ function Service(props) {
                   <p className="text-base text-neutral-600">Dependencies</p>
                   configmaps.. secrets.. (with view action)
                 </div>
-                {/* <div>
+                <div>
                   <p className="text-base text-neutral-600">Links</p>
                   <div className="text-neutral-700 text-sm mt-2">
                   <a
@@ -113,7 +113,7 @@ function Service(props) {
                     </svg>
                   </a>
                 </div>
-                </div> */}
+                </div>
               </div>
               <div className="col-span-7 space-y-4 pl-2">
                 { deployment &&
@@ -154,7 +154,10 @@ function Service(props) {
                 }
                 <div>
                   <p className="text-base text-neutral-600">Sync</p>
-                  Last sync time, state, ref to kustomization
+                  <div className="flex text-sm text-neutral-600">
+                    <div className="ml-4"><ReadyWidget gitRepository={kustomization}/></div>
+                    <div className="ml-2"><RevisionWidget kustomization={kustomization} gitRepository={gitRepository} /></div>
+                  </div>
                 </div>
               </div>
             </div>

diff --git a/web/src/Services.js b/web/src/Services.js
@@ -4,14 +4,25 @@ import Service from "./Service";
 const Services = memo(function Services(props) {
   const { store, filters } = props
   const [services, setServices] = useState(store.getState().services);
+  const [fluxState, setFluxState] = useState(store.getState().fluxState);
   store.subscribe(() => setServices(store.getState().services))
+  store.subscribe(() => setFluxState(store.getState().fluxState))
   const filteredServices = filterServices(services, filters)
 
   return (
     <>
       {filteredServices.map((service) => {
+        const kustomization = findServiceInInventory(fluxState.kustomizations, service)
+        const gitRepository = fluxState.gitRepositories.find((g) => g.metadata.name === kustomization.spec.sourceRef.name)
+
         return (
-          <Service key={`${service.svc.metadata.namespace}/${service.svc.metadata.name}`} service={service} alerts={[]} />
+          <Service
+            key={`${service.svc.metadata.namespace}/${service.svc.metadata.name}`}
+            service={service}
+            alerts={[]}
+            kustomization={kustomization}
+            gitRepository={gitRepository}
+          />
         )
       })}
     </>
@@ -20,6 +31,19 @@ const Services = memo(function Services(props) {
 
 export default Services;
 
+const findServiceInInventory = (kustomizations, service) => {
+  const serviceKey = `${service.svc.metadata.namespace}_${service.svc.metadata.name}__Service`
+
+  for (const k of kustomizations) {
+    const inInventory = k.status.inventory.entries.find((elem) => elem.id === serviceKey)
+    if (inInventory) {
+      return k
+    }
+  }
+
+  return undefined
+}
+
 const filterServices = (services, filters) => {
   let filteredServices = services;
   filters.forEach(filter => {