Add replicas info on StatefulSet Overview

frontend/packages/console-shared/src/components/pod/PodRingDataController.tsx

@@ -69,6 +69,13 @@ const PodRingController: React.FC<PodRingDataControllerProps> = ({ namespace, ki
       namespace,
       prop: 'deploymentConfigs',
     });
+  } else if (kind === 'StatefulSet') {
+    resources.push({
+      isList: true,
+      kind: 'StatefulSet',
+      namespace,
+      prop: 'statefulSets',
+    });
   }
 
   return (

frontend/packages/console-shared/src/utils/pod-ring-utils.ts

@@ -1,6 +1,11 @@
 import * as React from 'react';
 import * as _ from 'lodash';
-import { DeploymentConfigModel, DeploymentModel, DaemonSetModel } from '@console/internal/models';
+import {
+  DeploymentConfigModel,
+  DeploymentModel,
+  DaemonSetModel,
+  StatefulSetModel,
+} from '@console/internal/models';
 import { ChartLabel } from '@patternfly/react-charts';
 import {
   K8sResourceKind,
@@ -167,23 +172,24 @@ export const usePodScalingAccessStatus = (
 };
 
 export const transformPodRingData = (resources: PodRingResources, kind: string): PodRingData => {
-  const deploymentKinds = {
+  const resourceKinds = {
     [DeploymentModel.kind]: 'deployments',
     [DeploymentConfigModel.kind]: 'deploymentConfigs',
+    [StatefulSetModel.kind]: 'statefulSets',
   };
 
-  const targetDeployment = deploymentKinds[kind];
+  const targetResource = resourceKinds[kind];
   const transformResourceData = new TransformResourceData(resources);
 
-  if (!targetDeployment) {
-    throw new Error(`Invalid target deployment resource: (${targetDeployment})`);
+  if (!targetResource) {
+    throw new Error(`Invalid target resource: (${targetResource})`);
   }
-  if (_.isEmpty(resources[targetDeployment].data)) {
+  if (_.isEmpty(resources[targetResource].data)) {
     return {};
   }
 
   const podsData: PodRingData = {};
-  const resourceData = resources[targetDeployment].data;
+  const resourceData = resources[targetResource].data;
 
   if (kind === DeploymentConfigModel.kind) {
     return transformResourceData
@@ -194,5 +200,9 @@ export const transformPodRingData = (resources: PodRingResources, kind: string):
   if (kind === DeploymentModel.kind) {
     return transformResourceData.getPodsForDeployments(resourceData).reduce(applyPods, podsData);
   }
+
+  if (kind === StatefulSetModel.kind) {
+    return transformResourceData.getPodsForStatefulSets(resourceData).reduce(applyPods, podsData);
+  }
   return podsData;
 };

frontend/packages/console-shared/src/utils/resource-utils.ts

@@ -8,6 +8,7 @@ import {
   RouteKind,
   apiVersionForModel,
   referenceForModel,
+  K8sKind,
 } from '@console/internal/module/k8s';
 import {
   DeploymentConfigModel,
@@ -528,11 +529,11 @@ export class TransformResourceData {
     };
   };
 
-  toReplicaSetItem = (rs: K8sResourceKind): PodControllerOverviewItem => {
+  toResourceItem = (rs: K8sResourceKind, model: K8sKind): PodControllerOverviewItem => {
     const obj = {
       ...rs,
-      apiVersion: apiVersionForModel(ReplicaSetModel),
-      kind: ReplicaSetModel.kind,
+      apiVersion: apiVersionForModel(model),
+      kind: `${model.kind}`,
     };
     const isKnative = isKnativeServing(rs, 'metadata.labels');
     const podData = this.getPodsForResource(rs);
@@ -556,10 +557,23 @@ export class TransformResourceData {
     );
   };
 
+  getActiveStatefulSets = (ss: K8sResourceKind): K8sResourceKind[] => {
+    const { statefulSets } = this.resources;
+    const ownedRS = _.filter(statefulSets?.data, (f) => f.metadata.name === ss.metadata.name);
+    return _.filter(ownedRS, (rs) => _.get(rs, 'status.replicas'));
+  };
+
   public getReplicaSetsForResource = (deployment: K8sResourceKind): PodControllerOverviewItem[] => {
     const replicaSets = this.getActiveReplicaSets(deployment);
     return sortReplicaSetsByRevision(replicaSets).map((rs) =>
-      getIdledStatus(this.toReplicaSetItem(rs), deployment),
+      getIdledStatus(this.toResourceItem(rs, ReplicaSetModel), deployment),
+    );
+  };
+
+  public getStatefulSetsResource = (ss: K8sResourceKind): PodControllerOverviewItem[] => {
+    const activeStatefulSets = this.getActiveStatefulSets(ss);
+    return activeStatefulSets.map((pss) =>
+      getIdledStatus(this.toResourceItem(pss, StatefulSetModel), ss),
     );
   };
 
@@ -907,4 +921,25 @@ export class TransformResourceData {
       };
     });
   };
+
+  public getPodsForStatefulSets = (ss: K8sResourceKind[]): PodRCData[] => {
+    return _.map(ss, (s) => {
+      const obj: K8sResourceKind = {
+        ...s,
+        apiVersion: apiVersionForModel(StatefulSetModel),
+        kind: StatefulSetModel.kind,
+      };
+      const statefulSets = this.getStatefulSetsResource(obj);
+      const [current, previous] = statefulSets;
+      const isRollingOut = !!current && !!previous;
+
+      return {
+        obj,
+        current,
+        previous,
+        isRollingOut,
+        pods: [..._.get(current, 'pods', []), ..._.get(previous, 'pods', [])],
+      };
+    });
+  };
 }

frontend/public/components/stateful-set.tsx

@@ -14,9 +14,12 @@ import {
   ResourceSummary,
   SectionHeading,
   navFactory,
+  LoadingInline,
 } from './utils';
 import { VolumesTable } from './volumes-table';
 import { StatefulSetModel } from '../models';
+import PodRingSet from '@console/shared/src/components/pod/PodRingSet';
+import { PodRingController } from '@console/shared';
 
 const { AddStorage, common } = Kebab.factory;
 export const menuActions: KebabAction[] = [
@@ -49,6 +52,23 @@ const StatefulSetDetails: React.FC<StatefulSetDetailsProps> = ({ obj: ss }) => (
   <>
     <div className="co-m-pane__body">
       <SectionHeading text="StatefulSet Details" />
+      <PodRingController
+        namespace={ss.metadata.namespace}
+        kind={ss.kind}
+        render={(d) => {
+          return d.loaded ? (
+            <PodRingSet
+              key={ss.metadata.uid}
+              podData={d.data[ss.metadata.uid]}
+              obj={ss}
+              resourceKind={StatefulSetModel}
+              path="/spec/replicas"
+            />
+          ) : (
+            <LoadingInline />
+          );
+        }}
+      />
       <ResourceSummary resource={ss} showPodSelector showNodeSelector showTolerations />
     </div>
     <div className="co-m-pane__body">