Expose download counts

CHANGES/2237.feature

@@ -0,0 +1 @@
+Expose collection download count in the UI

CHANGES/2241.feature

@@ -0,0 +1 @@
+Expose legacy role download count in the UI

src/api/collection.ts

@@ -179,6 +179,12 @@ export class API extends HubAPI {
       `pulp/api/v3/content/ansible/collection_versions/`,
     );
   }
+
+  getDetail(distroBasePath, namespace, name) {
+    return this.http.get(
+      `v3/plugin/ansible/content/${distroBasePath}/collections/index/${namespace}/${name}/`,
+    );
+  }
 }
 
 export const CollectionAPI = new API();

src/api/response-types/collection.ts

@@ -222,6 +222,8 @@ export class CollectionDetailType {
     company: string;
     related_fields: { my_permissions?: string[] };
   };
+
+  download_count: number;
 }
 
 export class CollectionUsedByDependencies extends CollectionDetailType {

src/api/response-types/legacy-role.ts

@@ -44,6 +44,7 @@ export class LegacyRoleListType {
   commit: string;
   name: string;
   description: string;
+  download_count: number;
   summary_fields: {
     dependencies: string[];
     namespace: {
@@ -77,6 +78,7 @@ export class LegacyRoleDetailType {
   commit: string;
   name: string;
   description: string;
+  download_count: number;
   summary_fields: {
     dependencies: string[];
     namespace: {

src/components/headers/base-header.tsx

@@ -47,11 +47,9 @@ export class BaseHeader extends React.Component<IProps> {
               </Title>
             </div>
           </div>
-          {pageControls ? (
-            <div className='header-right'>{pageControls}</div>
-          ) : null}
+          {pageControls || null}
         </div>
-        {versionControl ? <>{versionControl}</> : null}
+        {versionControl || null}
 
         {children ? (
           <div className='header-bottom'>{children}</div>

src/components/headers/collection-header.tsx

@@ -21,6 +21,7 @@ import { Navigate } from 'react-router-dom';
 import {
   CertificateUploadAPI,
   CollectionAPI,
+  CollectionDetailType,
   CollectionVersionAPI,
   CollectionVersionContentType,
   CollectionVersionSearch,
@@ -37,6 +38,7 @@ import {
   Breadcrumbs,
   CopyCollectionToRepositoryModal,
   DeleteCollectionModal,
+  DownloadCount,
   ImportModal,
   LinkTabs,
   Logo,
@@ -68,6 +70,7 @@ interface IProps {
   collections: CollectionVersionSearch[];
   collectionsCount: number;
   collection: CollectionVersionSearch;
+  actuallyCollection: CollectionDetailType;
   content: CollectionVersionContentType;
   params: {
     version?: string;
@@ -164,15 +167,16 @@ export class CollectionHeader extends React.Component<IProps, IState> {
 
   render() {
     const {
+      activeTab,
+      actuallyCollection,
+      breadcrumbs,
+      className,
+      collection,
       collections,
       collectionsCount,
-      collection,
       content,
       params,
       updateParams,
-      breadcrumbs,
-      activeTab,
-      className,
     } = this.props;
 
     const {
@@ -479,69 +483,74 @@ export class CollectionHeader extends React.Component<IProps, IState> {
           }
           breadcrumbs={<Breadcrumbs links={breadcrumbs} />}
           versionControl={
-            <div className='install-version-column'>
-              <span>{t`Version`}</span>
-              <div className='install-version-dropdown'>
-                <Select
-                  isOpen={isOpenVersionsSelect}
-                  onToggle={(isOpenVersionsSelect) =>
-                    this.setState({ isOpenVersionsSelect })
-                  }
-                  variant={SelectVariant.single}
-                  onSelect={() =>
-                    this.setState({ isOpenVersionsSelect: false })
-                  }
-                  selections={`v${version}`}
-                  aria-label={t`Select collection version`}
-                  loadingVariant={
-                    collections.length < collectionsCount
-                      ? {
-                          text: t`View more`,
-                          onClick: () =>
-                            this.setState({
-                              isOpenVersionsModal: true,
-                              isOpenVersionsSelect: false,
-                            }),
-                        }
-                      : null
-                  }
-                >
-                  {collections
-                    .map((c) => c.collection_version)
-                    .map((v) => (
-                      <SelectOption
-                        key={v.version}
-                        value={`v${v.version}`}
-                        onClick={() =>
-                          updateParams(
-                            ParamHelper.setParam(
-                              params,
-                              'version',
-                              v.version.toString(),
-                            ),
-                          )
-                        }
-                      >
-                        <Trans>
-                          {v.version} updated {isLatestVersion(v)}
-                        </Trans>
-                      </SelectOption>
-                    ))}
-                </Select>
+            <div className='column-section'>
+              <div className='install-version-column'>
+                <span>{t`Version`}</span>
+                <div className='install-version-dropdown'>
+                  <Select
+                    isOpen={isOpenVersionsSelect}
+                    onToggle={(isOpenVersionsSelect) =>
+                      this.setState({ isOpenVersionsSelect })
+                    }
+                    variant={SelectVariant.single}
+                    onSelect={() =>
+                      this.setState({ isOpenVersionsSelect: false })
+                    }
+                    selections={`v${version}`}
+                    aria-label={t`Select collection version`}
+                    loadingVariant={
+                      collections.length < collectionsCount
+                        ? {
+                            text: t`View more`,
+                            onClick: () =>
+                              this.setState({
+                                isOpenVersionsModal: true,
+                                isOpenVersionsSelect: false,
+                              }),
+                          }
+                        : null
+                    }
+                  >
+                    {collections
+                      .map((c) => c.collection_version)
+                      .map((v) => (
+                        <SelectOption
+                          key={v.version}
+                          value={`v${v.version}`}
+                          onClick={() =>
+                            updateParams(
+                              ParamHelper.setParam(
+                                params,
+                                'version',
+                                v.version.toString(),
+                              ),
+                            )
+                          }
+                        >
+                          <Trans>
+                            {v.version} updated {isLatestVersion(v)}
+                          </Trans>
+                        </SelectOption>
+                      ))}
+                  </Select>
+                </div>
+                {latestVersion ? (
+                  <span className='last-updated'>
+                    <Trans>
+                      Last updated <DateComponent date={latestVersion} />
+                    </Trans>
+                  </span>
+                ) : null}
+                {display_signatures ? (
+                  <SignatureBadge
+                    isCompact
+                    signState={collection.is_signed ? 'signed' : 'unsigned'}
+                  />
+                ) : null}
+              </div>
+              <div style={{ alignSelf: 'center' }}>
+                <DownloadCount item={actuallyCollection} />
               </div>
-              {latestVersion ? (
-                <span className='last-updated'>
-                  <Trans>
-                    Last updated <DateComponent date={latestVersion} />
-                  </Trans>
-                </span>
-              ) : null}
-              {display_signatures ? (
-                <SignatureBadge
-                  isCompact
-                  signState={collection.is_signed ? 'signed' : 'unsigned'}
-                />
-              ) : null}
             </div>
           }
           pageControls={

src/components/headers/header.scss

@@ -12,10 +12,6 @@ $breakpoint-md: 1000px;
 .column-section {
   display: flex;
   justify-content: space-between;
-
-  .header-right {
-    align-items: right;
-  }
 }
 
 .install-version-column {

src/components/index.ts

@@ -112,6 +112,7 @@ export { ShaLabel } from './sha-label/sha-label';
 export { DataForm } from './shared/data-form';
 export { DetailList } from './shared/detail-list';
 export { Details } from './shared/details';
+export { DownloadCount } from './shared/download-count';
 export { LoginLink } from './shared/login-link';
 export { UIVersion } from './shared/ui-version';
 export {

src/components/legacy-role-list/legacy-role-item.tsx

@@ -12,7 +12,7 @@ import {
 import React from 'react';
 import { Link } from 'react-router-dom';
 import { LegacyRoleDetailType } from 'src/api';
-import { DateComponent, Logo, Tag } from 'src/components';
+import { DateComponent, DownloadCount, Logo, Tag } from 'src/components';
 import { Paths, formatPath } from 'src/paths';
 import { chipGroupProps } from 'src/utilities';
 import './legacy-role-item.scss';
@@ -105,6 +105,9 @@ export class LegacyRoleListItem extends React.Component<LegacyRoleProps> {
           </Trans>
         </div>
         <div className='hub-entry'>{release_name}</div>
+        <div className='hub-entry'>
+          <DownloadCount item={role} />
+        </div>
       </DataListCell>,
     );
 

src/components/shared/download-count.tsx

@@ -0,0 +1,31 @@
+import { Trans, t } from '@lingui/macro';
+import { DownloadIcon } from '@patternfly/react-icons';
+import React from 'react';
+import { Tooltip } from 'src/components';
+import { Constants } from 'src/constants';
+import { language } from 'src/l10n';
+
+interface IProps {
+  item?: { download_count?: number };
+}
+
+export const DownloadCount = ({ item }: IProps) => {
+  if (DEPLOYMENT_MODE === Constants.INSIGHTS_DEPLOYMENT_MODE) {
+    return null;
+  }
+  if (!item?.download_count) {
+    return null;
+  }
+
+  const downloadCount = new Intl.NumberFormat(language).format(
+    item.download_count,
+  );
+
+  return (
+    <Tooltip
+      content={t`Download count is the sum of all versions' download counts`}
+    >
+      <DownloadIcon /> <Trans>{downloadCount} Downloads</Trans>
+    </Tooltip>
+  );
+};