dev catalog group by operator

openshift · Dec 19, 2019 · 3f4d64c · 3f4d64c
1 parent f625b90
commit 3f4d64c
Show file tree

Hide file tree

Showing 5 changed files with 397 additions and 52 deletions.
diff --git a/frontend/__mocks__/catalogItemsMocks.ts b/frontend/__mocks__/catalogItemsMocks.ts
@@ -2048,3 +2048,207 @@ export const catalogCategories = {
     numItems: 1,
   },
 };
+
+export const developerCatalogItems = [
+  {
+    createLabel: 'Create Application',
+    href:
+      '/catalog/source-to-image?imagestream=dotnet&imagestream-ns=openshift&preselected-ns=openshift-operators',
+    kind: 'ImageStream',
+    obj: {
+      metadata: {
+        name: 'dotnet',
+        namespace: 'openshift',
+      },
+    },
+    tileIconClass: null,
+    tileImgUrl: 'static/assets/dotnet.svg',
+    tileName: '.NET Core',
+    tileProvider: undefined,
+  },
+  {
+    createLabel: 'Instantiate Template',
+    documentationUrl: undefined,
+    href:
+      '/catalog/instantiate-template?template=dotnet-pgsql-persistent&template-ns=openshift&preselected-ns=openshift-operators',
+    kind: 'Template',
+    obj: {
+      metadata: {
+        name: 'dotnet-pgsql-persistent',
+        namespace: 'openshift',
+      },
+    },
+    tileIconClass: null,
+    tileImgUrl: 'static/assets/dotnet.svg',
+    tileName: '.NET Core + PostgreSQL (Persistent)',
+    tileProvider: undefined,
+  },
+  {
+    createLabel: 'Create',
+    documentationUrl: undefined,
+    href:
+      '/ns/openshift-operators/clusterserviceversions/elasticsearch-operator.4.2.9-201911261133/logging.openshift.io~v1~Elasticsearch/~new',
+    kind: 'InstalledOperator',
+    obj: {
+      csv: {
+        kind: 'ClusterServiceVersion',
+        metadata: {
+          name: 'elasticsearch-operator.4.2.9-201911261133',
+          namespace: 'openshift-operators',
+        },
+      },
+    },
+    tileDescription: 'An Elasticsearch cluster instance',
+    tileIconClass: null,
+    tileImgUrl: 'static/assets/operator.svg',
+    tileName: 'Elasticsearch',
+    tileProvider: 'Red Hat, Inc',
+  },
+  {
+    createLabel: 'Create',
+    documentationUrl: undefined,
+    href:
+      '/ns/openshift-operators/clusterserviceversions/servicemeshoperator.v1.0.2/maistra.io~v1~ServiceMeshControlPlane/~new',
+    kind: 'InstalledOperator',
+    obj: {
+      csv: {
+        kind: 'ClusterServiceVersion',
+        metadata: {
+          name: 'servicemeshoperator.v1.0.2',
+          namespace: 'openshift-operators',
+        },
+      },
+    },
+    tileDescription: 'An Istio control plane installation',
+    tileIconClass: null,
+    tileImgUrl: 'static/assets/operator.svg',
+    tileName: 'Istio Service Mesh Control Plane',
+    tileProvider: 'Red Hat, Inc',
+  },
+  {
+    createLabel: 'Create',
+    documentationUrl: undefined,
+    href:
+      '/ns/openshift-operators/clusterserviceversions/servicemeshoperator.v1.0.2/maistra.io~v1~ServiceMeshMemberRoll/~new',
+    kind: 'InstalledOperator',
+    obj: {
+      csv: {
+        kind: 'ClusterServiceVersion',
+        metadata: {
+          name: 'servicemeshoperator.v1.0.2',
+          namespace: 'openshift-operators',
+        },
+      },
+    },
+    tileDescription: 'A list of namespaces in Service Mesh',
+    tileIconClass: null,
+    tileImgUrl: 'static/assets/operator.svg',
+    tileName: 'Istio Service Mesh Member Roll',
+    tileProvider: 'Red Hat, Inc',
+  },
+];
+
+export const groupedByType = {
+  'elasticsearch-operator.4.2.9-201911261133': [
+    {
+      createLabel: 'Create',
+      documentationUrl: undefined,
+      href:
+        '/ns/openshift-operators/clusterserviceversions/elasticsearch-operator.4.2.9-201911261133/logging.openshift.io~v1~Elasticsearch/~new',
+      kind: 'InstalledOperator',
+      obj: {
+        csv: {
+          kind: 'ClusterServiceVersion',
+          metadata: {
+            name: 'elasticsearch-operator.4.2.9-201911261133',
+            namespace: 'openshift-operators',
+          },
+        },
+      },
+      tileDescription: 'An Elasticsearch cluster instance',
+      tileIconClass: null,
+      tileImgUrl: 'static/assets/operator.svg',
+      tileName: 'Elasticsearch',
+      tileProvider: 'Red Hat, Inc',
+    },
+  ],
+  'servicemeshoperator.v1.0.2': [
+    {
+      createLabel: 'Create',
+      documentationUrl: undefined,
+      href:
+        '/ns/openshift-operators/clusterserviceversions/servicemeshoperator.v1.0.2/maistra.io~v1~ServiceMeshControlPlane/~new',
+      kind: 'InstalledOperator',
+      obj: {
+        csv: {
+          kind: 'ClusterServiceVersion',
+          metadata: {
+            name: 'servicemeshoperator.v1.0.2',
+            namespace: 'openshift-operators',
+          },
+        },
+      },
+      tileDescription: 'An Istio control plane installation',
+      tileIconClass: null,
+      tileImgUrl: 'static/assets/operator.svg',
+      tileName: 'Istio Service Mesh Control Plane',
+      tileProvider: 'Red Hat, Inc',
+    },
+    {
+      createLabel: 'Create',
+      documentationUrl: undefined,
+      href:
+        '/ns/openshift-operators/clusterserviceversions/servicemeshoperator.v1.0.2/maistra.io~v1~ServiceMeshMemberRoll/~new',
+      kind: 'InstalledOperator',
+      obj: {
+        csv: {
+          kind: 'ClusterServiceVersion',
+          metadata: {
+            name: 'servicemeshoperator.v1.0.2',
+            namespace: 'openshift-operators',
+          },
+        },
+      },
+      tileDescription: 'A list of namespaces in Service Mesh',
+      tileIconClass: null,
+      tileImgUrl: 'static/assets/operator.svg',
+      tileName: 'Istio Service Mesh Member Roll',
+      tileProvider: 'Red Hat, Inc',
+    },
+  ],
+  'Non Operators': [
+    {
+      createLabel: 'Create Application',
+      href:
+        '/catalog/source-to-image?imagestream=dotnet&imagestream-ns=openshift&preselected-ns=openshift-operators',
+      kind: 'ImageStream',
+      obj: {
+        metadata: {
+          name: 'dotnet',
+          namespace: 'openshift',
+        },
+      },
+      tileIconClass: null,
+      tileImgUrl: 'static/assets/dotnet.svg',
+      tileName: '.NET Core',
+      tileProvider: undefined,
+    },
+    {
+      createLabel: 'Instantiate Template',
+      documentationUrl: undefined,
+      href:
+        '/catalog/instantiate-template?template=dotnet-pgsql-persistent&template-ns=openshift&preselected-ns=openshift-operators',
+      kind: 'Template',
+      obj: {
+        metadata: {
+          name: 'dotnet-pgsql-persistent',
+          namespace: 'openshift',
+        },
+      },
+      tileIconClass: null,
+      tileImgUrl: 'static/assets/dotnet.svg',
+      tileName: '.NET Core + PostgreSQL (Persistent)',
+      tileProvider: undefined,
+    },
+  ],
+};
diff --git a/frontend/__tests__/components/catalog.spec.tsx b/frontend/__tests__/components/catalog.spec.tsx
@@ -21,8 +21,10 @@ import {
   catalogListPageProps,
   catalogItems,
   catalogCategories,
+  developerCatalogItems,
+  groupedByType,
 } from '../../__mocks__/catalogItemsMocks';
-import { categorizeItems } from '../../public/components/utils/tile-view-page';
+import { categorizeItems, groupItems } from '../../public/components/utils/tile-view-page';
 
 describe(CatalogTileViewPage.displayName, () => {
   let wrapper: ReactWrapper<CatalogListPageProps, CatalogListPageState>;
@@ -107,4 +109,14 @@ describe(CatalogTileViewPage.displayName, () => {
       });
     });
   });
+
+  it('groups catalog items by Operator', () => {
+    const groupedByTypeResult = groupItems(developerCatalogItems, 'Operator');
+    expect(groupedByTypeResult).toEqual(groupedByType);
+  });
+
+  it("doesn't group the items when None is selected in the Group By Dropdown", () => {
+    const groupedByTypeResult = groupItems(developerCatalogItems, 'None');
+    expect(groupedByTypeResult).toEqual(developerCatalogItems);
+  });
 });
diff --git a/frontend/public/components/catalog/_catalog.scss b/frontend/public/components/catalog/_catalog.scss
@@ -142,11 +142,20 @@ $co-modal-ignore-warning-icon-width: 30px;
     width: auto !important;
   }
 
+  &__btn-group__group-by {
+    display: inline;
+    margin-left: var(--pf-global--spacer--xl);
+  }
+
   &__num-items {
     font-weight: var(--pf-global--FontWeight--bold);
     padding: 0 0 20px;
   }
 
+  &__group-title {
+    margin-bottom: var(--pf-global--spacer--sm);
+  }
+
   // Enable scrolling on the modal
   &__overlay {
     .modal-body .co-hint-block {

diff --git a/frontend/public/components/catalog/catalog-items.jsx b/frontend/public/components/catalog/catalog-items.jsx
@@ -250,6 +250,7 @@ export class CatalogTileViewPage extends React.Component {
           renderTile={this.renderTile}
           pageDescription={pageDescription}
           emptyStateInfo="No developer catalog items are being shown due to the filters being applied."
+          addGroupByDropdown={true}
         />
         <Modal
           show={!!detailsItem}