[EPM] fix updates available filter

x-pack/plugins/ingest_manager/common/types/models/epm.ts

@@ -205,7 +205,6 @@ export interface RegistryVarsEntry {
 interface PackageAdditions {
   title: string;
   latestVersion: string;
-  installedVersion?: string;
   assets: AssetsGroupedByServiceByType;
 }
 

x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/epm/screens/detail/header.tsx

@@ -29,7 +29,12 @@ const Text = styled.span`
 type HeaderProps = PackageInfo & { iconType?: IconType };
 
 export function Header(props: HeaderProps) {
-  const { iconType, name, title, version, installedVersion, latestVersion } = props;
+  const { iconType, name, title, version, latestVersion } = props;
+
+  let installedVersion;
+  if ('savedObject' in props) {
+    installedVersion = props.savedObject.attributes.version;
+  }
   const hasWriteCapabilites = useCapabilities().write;
   const { toListView } = useLinks();
   const ADD_DATASOURCE_URI = useLink(`${EPM_PATH}/${name}-${version}/add-datasource`);

x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/epm/screens/detail/index.tsx

@@ -32,7 +32,10 @@ export function Detail() {
       const packageInfo = response.data?.response;
       const title = packageInfo?.title;
       const name = packageInfo?.name;
-      const installedVersion = packageInfo?.installedVersion;
+      let installedVersion;
+      if (packageInfo && 'savedObject' in packageInfo) {
+        installedVersion = packageInfo.savedObject.attributes.version;
+      }
       const status: InstallStatus = packageInfo?.status as any;
 
       // track install status state

x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/epm/screens/home/index.tsx

@@ -14,7 +14,7 @@ import {
 } from '../../../../constants';
 import { useLink, useGetCategories, useGetPackages } from '../../../../hooks';
 import { WithHeaderLayout } from '../../../../layouts';
-import { CategorySummaryItem } from '../../../../types';
+import { CategorySummaryItem, PackageListItem } from '../../../../types';
 import { PackageListGrid } from '../../components/package_list_grid';
 import { CategoryFacets } from './category_facets';
 import { HeroCopy, HeroImage } from './header';
@@ -67,29 +67,42 @@ export function EPMHomePage() {
 function InstalledPackages() {
   const { data: allPackages, isLoading: isLoadingPackages } = useGetPackages();
   const [selectedCategory, setSelectedCategory] = useState('');
-  const packages =
-    allPackages && allPackages.response && selectedCategory === ''
-      ? allPackages.response.filter(pkg => pkg.status === 'installed')
-      : [];
 
   const title = i18n.translate('xpack.ingestManager.epmList.installedTitle', {
     defaultMessage: 'Installed integrations',
   });
 
+  const allInstalledPackages =
+    allPackages && allPackages.response
+      ? allPackages.response.filter(pkg => pkg.status === 'installed')
+      : [];
+
+  const updatablePackages = allInstalledPackages.reduce<PackageListItem[]>((acc, item) => {
+    if ('savedObject' in item) {
+      if (item.version > item.savedObject.attributes.version) {
+        return acc.concat(item);
+      }
+    }
+    return acc;
+  }, []);
+
+  const packages =
+    selectedCategory === 'updates_available' ? [...updatablePackages] : [...allInstalledPackages];
+
   const categories = [
     {
       id: '',
       title: i18n.translate('xpack.ingestManager.epmList.allFilterLinkText', {
         defaultMessage: 'All',
       }),
-      count: packages.length,
+      count: allInstalledPackages.length,
     },
     {
       id: 'updates_available',
       title: i18n.translate('xpack.ingestManager.epmList.updatesAvailableFilterLinkText', {
         defaultMessage: 'Updates available',
       }),
-      count: 0, // TODO: Update with real count when available
+      count: updatablePackages.length,
     },
   ];
 
@@ -134,7 +147,6 @@ function AvailablePackages() {
     },
     ...(categoriesRes ? categoriesRes.response : []),
   ];
-
   const controls = categories ? (
     <CategoryFacets
       isLoading={isLoadingCategories}

x-pack/plugins/ingest_manager/public/applications/ingest_manager/types/index.ts

@@ -90,4 +90,5 @@ export {
   DetailViewPanelName,
   InstallStatus,
   InstallationStatus,
+  Installable,
 } from '../../../../common';

x-pack/plugins/ingest_manager/server/services/epm/packages/index.ts

@@ -43,7 +43,6 @@ export function createInstallableFrom<T>(
     ? {
         ...from,
         status: InstallationStatus.installed,
-        installedVersion: savedObject.attributes.version,
         savedObject,
       }
     : {