PMM-11132-Add-provisioning-state: add provisioning status

public/app/percona/dbaas/DBaaS.messages.tsx

@@ -44,6 +44,7 @@ export const Messages = {
       [KubernetesClusterStatus.ok]: 'Active',
       [KubernetesClusterStatus.unavailable]: 'Unavailable',
       [KubernetesClusterStatus.invalid]: 'Invalid',
+      [KubernetesClusterStatus.provisioning]: 'Provisioning',
     },
     updateOperatorModal: {
       cancel: 'Cancel',

public/app/percona/dbaas/components/Kubernetes/KubernetesClusterActions/KubernetesClusterActions.tsx

@@ -2,14 +2,14 @@ import React, { FC, useCallback } from 'react';
 
 import { config } from '@grafana/runtime';
 import { Messages } from 'app/percona/dbaas/DBaaS.messages';
-import { MultipleActions, Action } from 'app/percona/dbaas/components/MultipleActions';
+import { Action, MultipleActions } from 'app/percona/dbaas/components/MultipleActions';
 
 import { Kubernetes } from '../Kubernetes.types';
+import { KubernetesClusterStatus } from '../KubernetesClusterStatus/KubernetesClusterStatus.types';
 import { hasActiveOperator } from '../OperatorStatusItem/KubernetesOperatorStatus/KubernetesOperatorStatus.utils';
 
 import { styles } from './KubernetesClusterActions.styles';
 import { DBClusterActionsProps } from './KubernetesClusterActions.types';
-
 export const KubernetesClusterActions: FC<DBClusterActionsProps> = ({
   kubernetesCluster,
   setSelectedCluster,
@@ -30,6 +30,7 @@ export const KubernetesClusterActions: FC<DBClusterActionsProps> = ({
         },
         {
           content: Messages.kubernetes.showConfiguration,
+          disabled: kubernetesCluster.status === KubernetesClusterStatus.provisioning,
           action: () => {
             setSelectedCluster(kubernetesCluster);
             setViewConfigModalVisible(true);
@@ -40,7 +41,8 @@ export const KubernetesClusterActions: FC<DBClusterActionsProps> = ({
       if (isAdmin) {
         actions.push({
           content: Messages.kubernetes.manageComponents,
-          disabled: !hasActiveOperator(kubernetesCluster),
+          disabled:
+            !hasActiveOperator(kubernetesCluster) || kubernetesCluster.status === KubernetesClusterStatus.provisioning,
           action: () => {
             setSelectedCluster(kubernetesCluster);
             setManageComponentsModalVisible(true);

public/app/percona/dbaas/components/Kubernetes/KubernetesClusterStatus/KubernetesClusterStatus.constants.ts

@@ -4,4 +4,5 @@ export const STATUS_DATA_QA = {
   [KubernetesClusterStatus.invalid]: 'invalid',
   [KubernetesClusterStatus.ok]: 'ok',
   [KubernetesClusterStatus.unavailable]: 'unavailable',
+  [KubernetesClusterStatus.provisioning]: 'provisioning',
 };

public/app/percona/dbaas/components/Kubernetes/KubernetesClusterStatus/KubernetesClusterStatus.types.ts

@@ -4,12 +4,14 @@ export enum KubernetesClusterStatus {
   invalid = 'KUBERNETES_CLUSTER_STATUS_INVALID',
   ok = 'KUBERNETES_CLUSTER_STATUS_OK',
   unavailable = 'KUBERNETES_CLUSTER_STATUS_UNAVAILABLE',
+  provisioning = 'KUBERNETES_CLUSTER_STATUS_PROVISIONING',
 }
 
 export const KubernetesClusterStatusColors: Record<KubernetesClusterStatus, BadgeColor> = {
   [KubernetesClusterStatus.ok]: 'green',
   [KubernetesClusterStatus.invalid]: 'red',
   [KubernetesClusterStatus.unavailable]: 'blue',
+  [KubernetesClusterStatus.provisioning]: 'orange',
 };
 
 export interface KubernetesClusterStatusProps {

public/app/percona/dbaas/components/Kubernetes/OperatorStatusItem/OperatorStatusItem.tsx

@@ -3,7 +3,10 @@ import React, { FC } from 'react';
 import { useStyles } from '@grafana/ui';
 import { OPERATOR_FULL_LABELS } from 'app/percona/shared/core';
 
+import { KubernetesClusterStatus } from '../KubernetesClusterStatus/KubernetesClusterStatus.types';
+
 import { KubernetesOperatorStatus } from './KubernetesOperatorStatus/KubernetesOperatorStatus';
+import { KubernetesOperatorStatus as Status } from './KubernetesOperatorStatus/KubernetesOperatorStatus.types';
 import { getStyles } from './OperatorStatusItem.styles';
 import { OperatorStatusItemProps } from './OperatorStatusItem.types';
 import { buildOperatorLabel } from './OperatorStatusItem.utils';
@@ -19,21 +22,28 @@ export const OperatorStatusItem: FC<OperatorStatusItemProps> = ({
 }) => {
   const styles = useStyles(getStyles);
 
+  const showStatus = !(
+    kubernetes.status === KubernetesClusterStatus.provisioning && operator.status === Status.unavailable
+  );
+
   return (
     <div className={styles.connectionItemWrapper} data-testid={dataTestId}>
       <span className={styles.connectionItemLabel} title={OPERATOR_FULL_LABELS[databaseType]}>
-        {buildOperatorLabel(operator, databaseType)}:
-      </span>
-      <span className={styles.connectionItemValue}>
-        <KubernetesOperatorStatus
-          operator={operator}
-          databaseType={databaseType}
-          kubernetes={kubernetes}
-          setSelectedCluster={setSelectedCluster}
-          setOperatorToUpdate={setOperatorToUpdate}
-          setUpdateOperatorModalVisible={setUpdateOperatorModalVisible}
-        />
+        {buildOperatorLabel(operator, databaseType)}
+        {`${showStatus ? ':' : ''}`}
       </span>
+      {showStatus && (
+        <span className={styles.connectionItemValue}>
+          <KubernetesOperatorStatus
+            operator={operator}
+            databaseType={databaseType}
+            kubernetes={kubernetes}
+            setSelectedCluster={setSelectedCluster}
+            setOperatorToUpdate={setOperatorToUpdate}
+            setUpdateOperatorModalVisible={setUpdateOperatorModalVisible}
+          />
+        </span>
+      )}
     </div>
   );
 };