WIP. Update home/list screen.

Pulling in ideas from #2

x-pack/legacy/plugins/integrations_manager/common/types.ts

@@ -24,12 +24,19 @@ export type InstallationStatus = typeof STATUS_INSTALLED | typeof STATUS_NOT_INS
 export type AssetType =
   | typeof ASSET_TYPE_CONFIG
   | typeof ASSET_TYPE_DASHBOARD
-  | typeof ASSET_TYPE_INGEST_PIPELINE
   | typeof ASSET_TYPE_INDEX_PATTERN
+  | typeof ASSET_TYPE_INGEST_PIPELINE
   | typeof ASSET_TYPE_SEARCH
   | typeof ASSET_TYPE_TIMELION_SHEET
   | typeof ASSET_TYPE_VISUALIZATION;
 
+export const AssetTitleMap = {
+  [ASSET_TYPE_DASHBOARD]: 'Dashboard',
+  [ASSET_TYPE_INDEX_PATTERN]: 'Index Pattern',
+  [ASSET_TYPE_INGEST_PIPELINE]: 'Ingest Pipeline',
+  [ASSET_TYPE_VISUALIZATION]: 'Visualization',
+};
+
 // Registry's response types
 // from /list
 // https://github.com/elastic/integrations-registry/blob/master/docs/api/list.json
@@ -61,6 +68,10 @@ export interface RegistryPackage {
 // from API_LIST_PATTERN
 export type IntegrationList = IntegrationListItem[];
 export type IntegrationListItem = Installable<RegistryListItem>;
+export interface IntegrationsGroupedByStatus {
+  [STATUS_INSTALLED]: IntegrationList;
+  [STATUS_NOT_INSTALLED]: IntegrationList;
+}
 
 // from API_INFO_PATTERN
 export type IntegrationInfo = Installable<RegistryPackage>;

x-pack/legacy/plugins/integrations_manager/public/data.ts

@@ -6,25 +6,56 @@
 
 import { npStart } from 'ui/new_platform';
 import { HttpHandler } from 'src/core/public/http';
-import { IntegrationInfo, IntegrationList } from '../common/types';
-import { getListPath, getInfoPath } from '../common/routes';
+import { STATUS_INSTALLED, STATUS_NOT_INSTALLED } from '../common/constants';
+import { getInstallPath, getInfoPath, getListPath, getRemovePath } from '../common/routes';
+import { IntegrationInfo, IntegrationList, IntegrationsGroupedByStatus } from '../common/types';
 
 let _fetch: HttpHandler = npStart.core.http.fetch;
 
 export function setClient(client: HttpHandler): void {
   _fetch = client;
 }
 
-export async function getIntegrationsList(): Promise<IntegrationList> {
+export async function getIntegrations(): Promise<IntegrationList> {
   const path = getListPath();
   const list: IntegrationList = await _fetch(path);
 
   return list;
 }
 
+export async function getIntegrationsGroupedByStatus() {
+  const path = getListPath();
+  const list: IntegrationList = await _fetch(path);
+  const initialValue: IntegrationsGroupedByStatus = {
+    [STATUS_INSTALLED]: [],
+    [STATUS_NOT_INSTALLED]: [],
+  };
+
+  const groupedByStatus = list.reduce((grouped, item) => {
+    if (!grouped[item.status]) {
+      grouped[item.status] = [];
+    }
+    grouped[item.status].push(item);
+
+    return grouped;
+  }, initialValue);
+
+  return groupedByStatus;
+}
+
 export async function getIntegrationInfoByKey(pkgkey: string): Promise<IntegrationInfo> {
   const path = getInfoPath(pkgkey);
   const info: IntegrationInfo = await _fetch(path);
 
   return info;
 }
+
+export async function installIntegration(pkgkey: string) {
+  const path = getInstallPath(pkgkey);
+  return await _fetch(path);
+}
+
+export async function removeIntegration(pkgkey: string) {
+  const path = getRemovePath(pkgkey);
+  return await _fetch(path);
+}

x-pack/legacy/plugins/integrations_manager/public/screens/detail.tsx

@@ -5,8 +5,8 @@
  */
 import React, { useState, useEffect } from 'react';
 import { EuiPanel, EuiSpacer, EuiTitle } from '@elastic/eui';
-import { getIntegrationInfoByKey } from '../data';
 import { IntegrationInfo } from '../../common/types';
+import { getIntegrationInfoByKey } from '../data';
 
 export function Detail(props: { package: string }) {
   const [info, setInfo] = useState<IntegrationInfo | null>(null);

x-pack/legacy/plugins/integrations_manager/public/screens/home.tsx

@@ -5,28 +5,39 @@
  */
 import React, { useState, useEffect } from 'react';
 import { EuiPanel, EuiSpacer, EuiText, EuiTitle } from '@elastic/eui';
-import { getIntegrationsList } from '../data';
+import { getIntegrationsGroupedByStatus } from '../data';
 import { IntegrationListGrid } from '../components/integration_list_grid';
-import { IntegrationList } from '../../common/types';
+import { IntegrationsGroupedByStatus } from '../../common/types';
 
 export function Home() {
-  const [list, setList] = useState<IntegrationList>([]);
+  const [map, setMap] = useState<IntegrationsGroupedByStatus>({
+    installed: [],
+    not_installed: [],
+  });
 
   useEffect(() => {
-    getIntegrationsList().then(setList);
+    getIntegrationsGroupedByStatus().then(setMap);
   }, []);
 
   return (
     <EuiPanel>
       <EuiTitle>
         <h1>Elastic Integrations Manager</h1>
       </EuiTitle>
-      <EuiSpacer />
-      <EuiText>
-        <h3>Available Integrations</h3>
-      </EuiText>
-      <EuiSpacer />
-      {list ? <IntegrationListGrid list={list} /> : null}
+      {map
+        ? Object.entries(map).map(([status, list]) => {
+            return (
+              <>
+                <EuiSpacer />
+                <EuiText>
+                  <h3>{status}</h3>
+                </EuiText>
+                <EuiSpacer />
+                <IntegrationListGrid list={list} />
+              </>
+            );
+          })
+        : null}
     </EuiPanel>
   );
 }