Enhancement: Add suspend/resume buttons

[dzsak]

[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?