Enhancement: Add suspend/resume buttons

[dzsak]

No description provided.

[dzsak]

[adberger]

Maybe just add one button depending on the state of the object?
If resource is already suspended, show resume
If resource is not suspended, show suspend

Something like this:

      <div className="grid-cols-1 text-right">
        <button className="bg-transparent hover:bg-neutral-100 font-medium text-sm text-neutral-700 py-1 px-2 border border-neutral-300 rounded"
          onClick={() => {
            if (source.spec.suspend) {
              capacitorClient.resume("kustomization", source.metadata.namespace, source.metadata.name);
            } else {
              capacitorClient.suspend("kustomization", source.metadata.namespace, source.metadata.name);
            }
          }}
        >
          {source.spec.suspend ? "Resume" : "Suspend"}
        </button>
      </div>

Of course would be needed for the other resource types as well.

[laszlocph]

[adberger]

On ReadyWidget.jsx we could expand the checks:

  ...
  if (resource.kind === 'GitRepository' || resource.kind === "OCIRepository" || resource.kind === "Bucket") {
    color = suspended ? "bg-yellow-400" : fetchFailed ? "bg-orange-400 animate-pulse" : reconciling ? "bg-blue-400 animate-pulse" : ready ? "bg-teal-400" : "bg-orange-400 animate-pulse"
    statusLabel = suspended ? "Suspended" : fetchFailed ? "Error" : reconciling ?  "Reconciling" : ready ? readyLabel : "Error"
    messageColor = fetchFailed ? "bg-orange-400" : reconciling ?  "text-neutral-600" : ready ? "text-neutral-600 field" : "bg-orange-400"
  } else {
    color = suspended ? "bg-yellow-400" : ready ? "bg-teal-400" : (reconciling || dependencyNotReady) && !stalled ? "bg-blue-400 animate-pulse" : "bg-orange-400 animate-pulse"
    statusLabel = suspended ? "Suspended" : ready ? readyLabel : (reconciling || dependencyNotReady) && !stalled ? "Reconciling" : "Error"
    messageColor = ready ? "text-neutral-600 field" : (reconciling || dependencyNotReady) && !stalled ? "text-neutral-600" : "bg-orange-400"
  }

  return (
    <div className="relative">
      <div className='font-medium text-neutral-700'>
        <span className={`absolute -left-4 top-1 rounded-full h-3 w-3 ${color} inline-block`}></span>
        <span>{statusLabel}</span>
        {readyCondition && !suspended &&
          <span className='ml-1'><TimeLabel title={exactDate} date={parsed} /> ago</span>
        }
      </div>
      ...

Same on Summary.jsx:

  ...
  const readyCount = resources.filter(resource => {
    const readyConditions = jp.query(resource.status, '$..conditions[?(@.type=="Ready")]');
    const ready = readyConditions.length === 1 && readyConditions[0].status === "True"
    return ready
  }).length
  const dependencyNotReadyCount = resources.filter(resource => {
    const readyConditions = jp.query(resource.status, '$..conditions[?(@.type=="Ready")]');
    const dependencyNotReady = readyConditions.length === 1 && readyConditions[0].reason === "DependencyNotReady"
    return dependencyNotReady
  }).length
  const reconcilingCount = resources.filter(resource => {
    const readyConditions = jp.query(resource.status, '$..conditions[?(@.type=="Reconciling")]');
    const ready = readyConditions.length === 1 && readyConditions[0].status === "True"
    return ready
  }).length
  const stalledCount = resources.filter(resource => {
    const readyConditions = jp.query(resource.status, '$..conditions[?(@.type=="Ready")]');
    const ready = readyConditions.length === 1 && readyConditions[0].status === "True"
    if (ready) {
      return false
    }
  ...

What do you think?