From 8949bb58f66f1b911bec203e4fec22ff658370ec Mon Sep 17 00:00:00 2001
From: Matt Apperson <me@mattapperson.com>
Date: Tue, 17 Jul 2018 17:47:05 -0400
Subject: [PATCH 1/5] initial layout and main nav

---
 .../public/components/layouts/primary.tsx     | 38 ++++++++++
 .../plugins/beats_management/public/index.tsx |  2 +-
 .../framework/kibana_framework_adapter.ts     |  5 +-
 .../beats_management/public/pages/home.tsx    |  3 +-
 .../public/pages/main/activity.tsx            | 13 ++++
 .../public/pages/main/beats.tsx               | 13 ++++
 .../public/pages/main/index.tsx               | 74 +++++++++++++++++++
 .../public/pages/main/tags.tsx                | 13 ++++
 .../public/{routes.tsx => router.tsx}         | 10 +--
 .../server/lib/adapters/tags/adapter_types.ts |  2 +-
 .../lib/adapters/tags/memory_tags_adapter.ts  |  2 +-
 .../adapters/tokens/memory_tokens_adapter.ts  |  2 +-
 .../__tests__/beats/assign_tags.test.ts       |  2 +-
 13 files changed, 164 insertions(+), 15 deletions(-)
 create mode 100644 x-pack/plugins/beats_management/public/components/layouts/primary.tsx
 create mode 100644 x-pack/plugins/beats_management/public/pages/main/activity.tsx
 create mode 100644 x-pack/plugins/beats_management/public/pages/main/beats.tsx
 create mode 100644 x-pack/plugins/beats_management/public/pages/main/index.tsx
 create mode 100644 x-pack/plugins/beats_management/public/pages/main/tags.tsx
 rename x-pack/plugins/beats_management/public/{routes.tsx => router.tsx} (59%)

diff --git a/x-pack/plugins/beats_management/public/components/layouts/primary.tsx b/x-pack/plugins/beats_management/public/components/layouts/primary.tsx
new file mode 100644
index 0000000000000..41c19929d551c
--- /dev/null
+++ b/x-pack/plugins/beats_management/public/components/layouts/primary.tsx
@@ -0,0 +1,38 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+
+import {
+  EuiPage,
+  EuiPageBody,
+  EuiPageContent,
+  EuiPageContentBody,
+  EuiPageContentHeader,
+  EuiPageContentHeaderSection,
+  EuiTitle,
+} from '@elastic/eui';
+
+interface PrimaryLayoutProps {
+  title: string;
+}
+
+export const PrimaryLayout: React.SFC<PrimaryLayoutProps> = ({ title, children }) => (
+  <EuiPage>
+    <EuiPageBody>
+      <EuiPageContent>
+        <EuiPageContentHeader>
+          <EuiPageContentHeaderSection>
+            <EuiTitle>
+              <h2>{title}</h2>
+            </EuiTitle>
+          </EuiPageContentHeaderSection>
+        </EuiPageContentHeader>
+        <EuiPageContentBody>{children}</EuiPageContentBody>
+      </EuiPageContent>
+    </EuiPageBody>
+  </EuiPage>
+);
diff --git a/x-pack/plugins/beats_management/public/index.tsx b/x-pack/plugins/beats_management/public/index.tsx
index 1334deb1524e6..de0b9b7c4c01c 100644
--- a/x-pack/plugins/beats_management/public/index.tsx
+++ b/x-pack/plugins/beats_management/public/index.tsx
@@ -9,7 +9,7 @@ import { BASE_PATH } from '../common/constants';
 import { compose } from './lib/compose/kibana';
 // import * as euiVars from '@elastic/eui/dist/eui_theme_k6_light.json';
 // import { ThemeProvider } from 'styled-components';
-import { PageRouter } from './routes';
+import { PageRouter } from './router';
 
 // TODO use theme provided from parentApp when kibana supports it
 import '@elastic/eui/dist/eui_theme_light.css';
diff --git a/x-pack/plugins/beats_management/public/lib/adapters/framework/kibana_framework_adapter.ts b/x-pack/plugins/beats_management/public/lib/adapters/framework/kibana_framework_adapter.ts
index 042ebd71f9862..1a61a5581ce4e 100644
--- a/x-pack/plugins/beats_management/public/lib/adapters/framework/kibana_framework_adapter.ts
+++ b/x-pack/plugins/beats_management/public/lib/adapters/framework/kibana_framework_adapter.ts
@@ -86,8 +86,9 @@ export class KibanaFrameworkAdapter implements FrameworkAdapter {
 
   private register = (adapterModule: IModule) => {
     const adapter = this;
-    this.routes.when(`/management/beats_management/?`, {
-      template: '<beats-cm><div id="beatsReactRoot" style="flex-grow: 1;"></div></beats-cm>',
+    this.routes.when(`/management/beats_management/:view?/:id?/:other?/:other2?`, {
+      template:
+        '<beats-cm><div id="beatsReactRoot" style="flex-grow: 1; height: 100vh; background: #f5f5f5"></div></beats-cm>',
       controllerAs: 'beatsManagement',
       // tslint:disable-next-line: max-classes-per-file
       controller: class BeatsManagementController {
diff --git a/x-pack/plugins/beats_management/public/pages/home.tsx b/x-pack/plugins/beats_management/public/pages/home.tsx
index 505015f18af16..68cad596c78fc 100644
--- a/x-pack/plugins/beats_management/public/pages/home.tsx
+++ b/x-pack/plugins/beats_management/public/pages/home.tsx
@@ -5,9 +5,10 @@
  */
 
 import React from 'react';
+import { PrimaryLayout } from '../components/layouts/primary';
 
 export class HomePage extends React.PureComponent {
   public render() {
-    return <div>Home</div>;
+    return <PrimaryLayout title="Beats">Home</PrimaryLayout>;
   }
 }
diff --git a/x-pack/plugins/beats_management/public/pages/main/activity.tsx b/x-pack/plugins/beats_management/public/pages/main/activity.tsx
new file mode 100644
index 0000000000000..5aa523e3a32f8
--- /dev/null
+++ b/x-pack/plugins/beats_management/public/pages/main/activity.tsx
@@ -0,0 +1,13 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+
+export class ActivityPage extends React.PureComponent {
+  public render() {
+    return <div>activity logs view</div>;
+  }
+}
diff --git a/x-pack/plugins/beats_management/public/pages/main/beats.tsx b/x-pack/plugins/beats_management/public/pages/main/beats.tsx
new file mode 100644
index 0000000000000..ec86d8515f1c2
--- /dev/null
+++ b/x-pack/plugins/beats_management/public/pages/main/beats.tsx
@@ -0,0 +1,13 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+
+export class BeatsPage extends React.PureComponent {
+  public render() {
+    return <div>beats table and stuff</div>;
+  }
+}
diff --git a/x-pack/plugins/beats_management/public/pages/main/index.tsx b/x-pack/plugins/beats_management/public/pages/main/index.tsx
new file mode 100644
index 0000000000000..392c5e423bba6
--- /dev/null
+++ b/x-pack/plugins/beats_management/public/pages/main/index.tsx
@@ -0,0 +1,74 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+// @ts-ignore
+import { EuiTab, EuiTabs } from '@elastic/eui';
+import React from 'react';
+import { Route, Switch, withRouter } from 'react-router-dom';
+import { PrimaryLayout } from '../../components/layouts/primary';
+import { ActivityPage } from './activity';
+import { BeatsPage } from './beats';
+import { TagsPage } from './tags';
+
+interface MainPagesProps {
+  history: any;
+}
+
+class MainPagesComponent extends React.PureComponent<MainPagesProps> {
+  constructor(props: any) {
+    super(props);
+
+    this.state = {
+      selectedTabId: '/',
+    };
+  }
+
+  public onSelectedTabChanged = (id: string) => {
+    this.props.history.push(id);
+  };
+
+  public render() {
+    const tabs = [
+      {
+        id: '/',
+        name: 'Beats List',
+        disabled: false,
+      },
+      {
+        id: '/activity',
+        name: 'Beats Activity',
+        disabled: false,
+      },
+      {
+        id: '/tags',
+        name: 'Tags',
+        disabled: false,
+      },
+    ];
+
+    const renderedTabs = tabs.map((tab, index) => (
+      <EuiTab
+        onClick={() => this.onSelectedTabChanged(tab.id)}
+        isSelected={tab.id === this.props.history.location.pathname}
+        disabled={tab.disabled}
+        key={index}
+      >
+        {tab.name}
+      </EuiTab>
+    ));
+    return (
+      <PrimaryLayout title="Beats">
+        <EuiTabs>{renderedTabs}</EuiTabs>
+        <Switch>
+          <Route path="/" exact={true} component={BeatsPage} />
+          <Route path="/activity" exact={true} component={ActivityPage} />
+          <Route path="/tags" exact={true} component={TagsPage} />
+        </Switch>
+      </PrimaryLayout>
+    );
+  }
+}
+export const MainPages = withRouter<any>(MainPagesComponent);
diff --git a/x-pack/plugins/beats_management/public/pages/main/tags.tsx b/x-pack/plugins/beats_management/public/pages/main/tags.tsx
new file mode 100644
index 0000000000000..66dab3c1b3550
--- /dev/null
+++ b/x-pack/plugins/beats_management/public/pages/main/tags.tsx
@@ -0,0 +1,13 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+
+export class TagsPage extends React.PureComponent {
+  public render() {
+    return <div>tags table and stuff</div>;
+  }
+}
diff --git a/x-pack/plugins/beats_management/public/routes.tsx b/x-pack/plugins/beats_management/public/router.tsx
similarity index 59%
rename from x-pack/plugins/beats_management/public/routes.tsx
rename to x-pack/plugins/beats_management/public/router.tsx
index f5863b28aaafa..037c5c8969df7 100644
--- a/x-pack/plugins/beats_management/public/routes.tsx
+++ b/x-pack/plugins/beats_management/public/router.tsx
@@ -5,18 +5,14 @@
  */
 
 import React from 'react';
-import { HashRouter, Route, Switch } from 'react-router-dom';
+import { HashRouter, Route } from 'react-router-dom';
 
-import { NotFoundPage } from './pages/404';
-import { HomePage } from './pages/home';
+import { MainPages } from './pages/main';
 
 export const PageRouter: React.SFC<{}> = () => {
   return (
     <HashRouter basename="/management/beats_management">
-      <Switch>
-        <Route path="/" exact={true} component={HomePage} />
-        <Route component={NotFoundPage} />
-      </Switch>
+      <Route component={MainPages} />
     </HashRouter>
   );
 };
diff --git a/x-pack/plugins/beats_management/server/lib/adapters/tags/adapter_types.ts b/x-pack/plugins/beats_management/server/lib/adapters/tags/adapter_types.ts
index 19333c831d594..7bbb42d415f52 100644
--- a/x-pack/plugins/beats_management/server/lib/adapters/tags/adapter_types.ts
+++ b/x-pack/plugins/beats_management/server/lib/adapters/tags/adapter_types.ts
@@ -7,6 +7,6 @@ import { BeatTag } from '../../../../common/domain_types';
 import { FrameworkUser } from '../framework/adapter_types';
 
 export interface CMTagsAdapter {
-  getTagsWithIds(user: FrameworkUser, tagIds: string[]): any;
+  getTagsWithIds(user: FrameworkUser, tagIds: string[]): Promise<BeatTag[]>;
   upsertTag(user: FrameworkUser, tag: BeatTag): Promise<{}>;
 }
diff --git a/x-pack/plugins/beats_management/server/lib/adapters/tags/memory_tags_adapter.ts b/x-pack/plugins/beats_management/server/lib/adapters/tags/memory_tags_adapter.ts
index 64ef401008ae1..c3470011f6a4e 100644
--- a/x-pack/plugins/beats_management/server/lib/adapters/tags/memory_tags_adapter.ts
+++ b/x-pack/plugins/beats_management/server/lib/adapters/tags/memory_tags_adapter.ts
@@ -5,7 +5,7 @@
  */
 
 import { BeatTag } from '../../../../common/domain_types';
-import { FrameworkUser } from './../framework/adapter_types';
+import { FrameworkUser } from '../framework/adapter_types';
 import { CMTagsAdapter } from './adapter_types';
 
 export class MemoryTagsAdapter implements CMTagsAdapter {
diff --git a/x-pack/plugins/beats_management/server/lib/adapters/tokens/memory_tokens_adapter.ts b/x-pack/plugins/beats_management/server/lib/adapters/tokens/memory_tokens_adapter.ts
index 7cf132bb6ba31..767f161615ef8 100644
--- a/x-pack/plugins/beats_management/server/lib/adapters/tokens/memory_tokens_adapter.ts
+++ b/x-pack/plugins/beats_management/server/lib/adapters/tokens/memory_tokens_adapter.ts
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { FrameworkAuthenticatedUser } from './../framework/adapter_types';
+import { FrameworkAuthenticatedUser } from '../framework/adapter_types';
 import { CMTokensAdapter, TokenEnrollmentData } from './adapter_types';
 
 export class MemoryTokensAdapter implements CMTokensAdapter {
diff --git a/x-pack/plugins/beats_management/server/lib/domains/__tests__/beats/assign_tags.test.ts b/x-pack/plugins/beats_management/server/lib/domains/__tests__/beats/assign_tags.test.ts
index c9f9f15256d43..d0d888d2d3d1f 100644
--- a/x-pack/plugins/beats_management/server/lib/domains/__tests__/beats/assign_tags.test.ts
+++ b/x-pack/plugins/beats_management/server/lib/domains/__tests__/beats/assign_tags.test.ts
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { FrameworkInternalUser } from './../../../adapters/framework/adapter_types';
+import { FrameworkInternalUser } from '../../../adapters/framework/adapter_types';
 
 import { MemoryBeatsAdapter } from '../../../adapters/beats/memory_beats_adapter';
 import { TestingBackendFrameworkAdapter } from '../../../adapters/framework/testing_framework_adapter';

From 2b0c0cd66b5c676e3b33082932668cc0f82c9a66 Mon Sep 17 00:00:00 2001
From: Matt Apperson <me@mattapperson.com>
Date: Wed, 18 Jul 2018 17:51:05 -0400
Subject: [PATCH 2/5] modal UI and pattern for UI established

---
 .../public/components/layouts/primary.tsx     | 39 ++++----
 .../lib/adapters/beats/adapter_types.ts       | 36 ++++++++
 .../adapters/beats/memory_beats_adapter.ts    | 92 +++++++++++++++++++
 .../public/lib/adapters/tags/adapter_types.ts | 12 +++
 .../lib/adapters/tags/memory_tags_adapter.ts  | 31 +++++++
 .../lib/adapters/tokens/adapter_types.ts      | 17 ++++
 .../adapters/tokens/memory_tokens_adapter.ts  | 42 +++++++++
 .../public/pages/main/beats.tsx               | 50 +++++++++-
 .../public/pages/main/index.tsx               | 48 ++++++++--
 9 files changed, 343 insertions(+), 24 deletions(-)
 create mode 100644 x-pack/plugins/beats_management/public/lib/adapters/beats/adapter_types.ts
 create mode 100644 x-pack/plugins/beats_management/public/lib/adapters/beats/memory_beats_adapter.ts
 create mode 100644 x-pack/plugins/beats_management/public/lib/adapters/tags/adapter_types.ts
 create mode 100644 x-pack/plugins/beats_management/public/lib/adapters/tags/memory_tags_adapter.ts
 create mode 100644 x-pack/plugins/beats_management/public/lib/adapters/tokens/adapter_types.ts
 create mode 100644 x-pack/plugins/beats_management/public/lib/adapters/tokens/memory_tokens_adapter.ts

diff --git a/x-pack/plugins/beats_management/public/components/layouts/primary.tsx b/x-pack/plugins/beats_management/public/components/layouts/primary.tsx
index 41c19929d551c..cd9e8076dd092 100644
--- a/x-pack/plugins/beats_management/public/components/layouts/primary.tsx
+++ b/x-pack/plugins/beats_management/public/components/layouts/primary.tsx
@@ -5,32 +5,37 @@
  */
 
 import React from 'react';
+import styled from 'styled-components';
 
-import {
-  EuiPage,
-  EuiPageBody,
-  EuiPageContent,
-  EuiPageContentBody,
-  EuiPageContentHeader,
-  EuiPageContentHeaderSection,
-  EuiTitle,
-} from '@elastic/eui';
+import { EuiPage, EuiPageBody, EuiPageContent, EuiPageContentBody, EuiTitle } from '@elastic/eui';
 
 interface PrimaryLayoutProps {
   title: string;
+  actionSection: React.ReactNode;
 }
 
-export const PrimaryLayout: React.SFC<PrimaryLayoutProps> = ({ title, children }) => (
+const HeaderContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  padding: 24px 24px 0;
+  margin-bottom: 16px;
+`;
+
+export const PrimaryLayout: React.SFC<PrimaryLayoutProps> = ({
+  actionSection,
+  title,
+  children,
+}) => (
   <EuiPage>
     <EuiPageBody>
       <EuiPageContent>
-        <EuiPageContentHeader>
-          <EuiPageContentHeaderSection>
-            <EuiTitle>
-              <h2>{title}</h2>
-            </EuiTitle>
-          </EuiPageContentHeaderSection>
-        </EuiPageContentHeader>
+        <HeaderContainer>
+          <EuiTitle>
+            <h1>{title}</h1>
+          </EuiTitle>
+          {actionSection}
+        </HeaderContainer>
         <EuiPageContentBody>{children}</EuiPageContentBody>
       </EuiPageContent>
     </EuiPageBody>
diff --git a/x-pack/plugins/beats_management/public/lib/adapters/beats/adapter_types.ts b/x-pack/plugins/beats_management/public/lib/adapters/beats/adapter_types.ts
new file mode 100644
index 0000000000000..e4d907ce556a9
--- /dev/null
+++ b/x-pack/plugins/beats_management/public/lib/adapters/beats/adapter_types.ts
@@ -0,0 +1,36 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { CMBeat } from '../../../../common/domain_types';
+
+export interface CMBeatsAdapter {
+  insert(beat: CMBeat): Promise<void>;
+  update(beat: CMBeat): Promise<void>;
+  get(id: string): Promise<CMBeat>;
+  getAll(): Promise<CMBeat[]>;
+  getWithIds(beatIds: string[]): Promise<CMBeat[]>;
+  removeTagsFromBeats(removals: BeatsTagAssignment[]): Promise<BeatsTagAssignment[]>;
+  assignTagsToBeats(assignments: BeatsTagAssignment[]): Promise<BeatsTagAssignment[]>;
+}
+
+export interface BeatsTagAssignment {
+  beatId: string;
+  tag: string;
+  idxInRequest?: number;
+}
+
+interface BeatsReturnedTagAssignment {
+  status: number | null;
+  result?: string;
+}
+
+export interface CMAssignmentReturn {
+  assignments: BeatsReturnedTagAssignment[];
+}
+
+export interface BeatsRemovalReturn {
+  removals: BeatsReturnedTagAssignment[];
+}
diff --git a/x-pack/plugins/beats_management/public/lib/adapters/beats/memory_beats_adapter.ts b/x-pack/plugins/beats_management/public/lib/adapters/beats/memory_beats_adapter.ts
new file mode 100644
index 0000000000000..94bec0ee818d1
--- /dev/null
+++ b/x-pack/plugins/beats_management/public/lib/adapters/beats/memory_beats_adapter.ts
@@ -0,0 +1,92 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { omit } from 'lodash';
+
+import { CMBeat } from '../../../../common/domain_types';
+import { BeatsTagAssignment, CMBeatsAdapter } from './adapter_types';
+
+export class MemoryBeatsAdapter implements CMBeatsAdapter {
+  private beatsDB: CMBeat[];
+
+  constructor(beatsDB: CMBeat[]) {
+    this.beatsDB = beatsDB;
+  }
+
+  public async get(id: string) {
+    return this.beatsDB.find(beat => beat.id === id) || null;
+  }
+
+  public async insert(beat: CMBeat) {
+    this.beatsDB.push(beat);
+  }
+
+  public async update(beat: CMBeat) {
+    const beatIndex = this.beatsDB.findIndex(b => b.id === beat.id);
+
+    this.beatsDB[beatIndex] = {
+      ...this.beatsDB[beatIndex],
+      ...beat,
+    };
+  }
+
+  public async getWithIds(beatIds: string[]) {
+    return this.beatsDB.filter(beat => beatIds.includes(beat.id));
+  }
+
+  public async getAll() {
+    return this.beatsDB.map((beat: any) => omit(beat, ['access_token']));
+  }
+
+  public async removeTagsFromBeats(removals: BeatsTagAssignment[]): Promise<BeatsTagAssignment[]> {
+    const beatIds = removals.map(r => r.beatId);
+
+    const response = this.beatsDB.filter(beat => beatIds.includes(beat.id)).map(beat => {
+      const tagData = removals.find(r => r.beatId === beat.id);
+      if (tagData) {
+        if (beat.tags) {
+          beat.tags = beat.tags.filter(tag => tag !== tagData.tag);
+        }
+      }
+      return beat;
+    });
+
+    return response.map<any>((item: CMBeat, resultIdx: number) => ({
+      idxInRequest: removals[resultIdx].idxInRequest,
+      result: 'updated',
+      status: 200,
+    }));
+  }
+
+  public async assignTagsToBeats(assignments: BeatsTagAssignment[]): Promise<BeatsTagAssignment[]> {
+    const beatIds = assignments.map(r => r.beatId);
+
+    this.beatsDB.filter(beat => beatIds.includes(beat.id)).map(beat => {
+      // get tags that need to be assigned to this beat
+      const tags = assignments
+        .filter(a => a.beatId === beat.id)
+        .map((t: BeatsTagAssignment) => t.tag);
+
+      if (tags.length > 0) {
+        if (!beat.tags) {
+          beat.tags = [];
+        }
+        const nonExistingTags = tags.filter((t: string) => beat.tags && !beat.tags.includes(t));
+
+        if (nonExistingTags.length > 0) {
+          beat.tags = beat.tags.concat(nonExistingTags);
+        }
+      }
+      return beat;
+    });
+
+    return assignments.map<any>((item: BeatsTagAssignment, resultIdx: number) => ({
+      idxInRequest: assignments[resultIdx].idxInRequest,
+      result: 'updated',
+      status: 200,
+    }));
+  }
+}
diff --git a/x-pack/plugins/beats_management/public/lib/adapters/tags/adapter_types.ts b/x-pack/plugins/beats_management/public/lib/adapters/tags/adapter_types.ts
new file mode 100644
index 0000000000000..7bbb42d415f52
--- /dev/null
+++ b/x-pack/plugins/beats_management/public/lib/adapters/tags/adapter_types.ts
@@ -0,0 +1,12 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+import { BeatTag } from '../../../../common/domain_types';
+import { FrameworkUser } from '../framework/adapter_types';
+
+export interface CMTagsAdapter {
+  getTagsWithIds(user: FrameworkUser, tagIds: string[]): Promise<BeatTag[]>;
+  upsertTag(user: FrameworkUser, tag: BeatTag): Promise<{}>;
+}
diff --git a/x-pack/plugins/beats_management/public/lib/adapters/tags/memory_tags_adapter.ts b/x-pack/plugins/beats_management/public/lib/adapters/tags/memory_tags_adapter.ts
new file mode 100644
index 0000000000000..c3470011f6a4e
--- /dev/null
+++ b/x-pack/plugins/beats_management/public/lib/adapters/tags/memory_tags_adapter.ts
@@ -0,0 +1,31 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { BeatTag } from '../../../../common/domain_types';
+import { FrameworkUser } from '../framework/adapter_types';
+import { CMTagsAdapter } from './adapter_types';
+
+export class MemoryTagsAdapter implements CMTagsAdapter {
+  private tagsDB: BeatTag[] = [];
+
+  constructor(tagsDB: BeatTag[]) {
+    this.tagsDB = tagsDB;
+  }
+
+  public async getTagsWithIds(user: FrameworkUser, tagIds: string[]) {
+    return this.tagsDB.filter(tag => tagIds.includes(tag.id));
+  }
+
+  public async upsertTag(user: FrameworkUser, tag: BeatTag) {
+    const existingTagIndex = this.tagsDB.findIndex(t => t.id === tag.id);
+    if (existingTagIndex !== -1) {
+      this.tagsDB[existingTagIndex] = tag;
+    } else {
+      this.tagsDB.push(tag);
+    }
+    return tag;
+  }
+}
diff --git a/x-pack/plugins/beats_management/public/lib/adapters/tokens/adapter_types.ts b/x-pack/plugins/beats_management/public/lib/adapters/tokens/adapter_types.ts
new file mode 100644
index 0000000000000..2fe8c811c396e
--- /dev/null
+++ b/x-pack/plugins/beats_management/public/lib/adapters/tokens/adapter_types.ts
@@ -0,0 +1,17 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+import { FrameworkUser } from '../framework/adapter_types';
+
+export interface TokenEnrollmentData {
+  token: string | null;
+  expires_on: string;
+}
+
+export interface CMTokensAdapter {
+  deleteEnrollmentToken(enrollmentToken: string): Promise<void>;
+  getEnrollmentToken(enrollmentToken: string): Promise<TokenEnrollmentData>;
+  upsertTokens(user: FrameworkUser, tokens: TokenEnrollmentData[]): Promise<TokenEnrollmentData[]>;
+}
diff --git a/x-pack/plugins/beats_management/public/lib/adapters/tokens/memory_tokens_adapter.ts b/x-pack/plugins/beats_management/public/lib/adapters/tokens/memory_tokens_adapter.ts
new file mode 100644
index 0000000000000..767f161615ef8
--- /dev/null
+++ b/x-pack/plugins/beats_management/public/lib/adapters/tokens/memory_tokens_adapter.ts
@@ -0,0 +1,42 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { FrameworkAuthenticatedUser } from '../framework/adapter_types';
+import { CMTokensAdapter, TokenEnrollmentData } from './adapter_types';
+
+export class MemoryTokensAdapter implements CMTokensAdapter {
+  private tokenDB: TokenEnrollmentData[];
+
+  constructor(tokenDB: TokenEnrollmentData[]) {
+    this.tokenDB = tokenDB;
+  }
+
+  public async deleteEnrollmentToken(enrollmentToken: string) {
+    const index = this.tokenDB.findIndex(token => token.token === enrollmentToken);
+
+    if (index > -1) {
+      this.tokenDB.splice(index, 1);
+    }
+  }
+
+  public async getEnrollmentToken(tokenString: string): Promise<TokenEnrollmentData> {
+    return new Promise<TokenEnrollmentData>(resolve => {
+      return resolve(this.tokenDB.find(token => token.token === tokenString));
+    });
+  }
+
+  public async upsertTokens(user: FrameworkAuthenticatedUser, tokens: TokenEnrollmentData[]) {
+    tokens.forEach(token => {
+      const existingIndex = this.tokenDB.findIndex(t => t.token === token.token);
+      if (existingIndex !== -1) {
+        this.tokenDB[existingIndex] = token;
+      } else {
+        this.tokenDB.push(token);
+      }
+    });
+    return tokens;
+  }
+}
diff --git a/x-pack/plugins/beats_management/public/pages/main/beats.tsx b/x-pack/plugins/beats_management/public/pages/main/beats.tsx
index ec86d8515f1c2..388bac094244f 100644
--- a/x-pack/plugins/beats_management/public/pages/main/beats.tsx
+++ b/x-pack/plugins/beats_management/public/pages/main/beats.tsx
@@ -4,9 +4,57 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import {
+  EuiButton,
+  EuiButtonEmpty,
+  EuiModal,
+  EuiModalBody,
+  EuiModalFooter,
+  EuiModalHeader,
+  EuiModalHeaderTitle,
+  EuiOverlayMask,
+} from '@elastic/eui';
 import React from 'react';
-
 export class BeatsPage extends React.PureComponent {
+  public static ActionArea = ({ match, history }: { match: any; history: any }) => (
+    <div>
+      <EuiButtonEmpty
+        onClick={() => {
+          window.alert('This will later go to more general beats install instructions.');
+          window.location.href = '#/home/tutorial/dockerMetrics';
+        }}
+      >
+        Learn how to install beats
+      </EuiButtonEmpty>
+      <EuiButton
+        size="s"
+        color="primary"
+        onClick={() => {
+          history.push('/beats/enroll/foobar');
+        }}
+      >
+        Enroll Beats
+      </EuiButton>
+
+      {match.params.enrollmentToken != null && (
+        <EuiOverlayMask>
+          <EuiModal onClose={() => history.push('/beats')} style={{ width: '800px' }}>
+            <EuiModalHeader>
+              <EuiModalHeaderTitle>Enroll Beats</EuiModalHeaderTitle>
+            </EuiModalHeader>
+
+            <EuiModalBody>
+              Enrollment UI here for enrollment token of: {match.params.enrollmentToken}
+            </EuiModalBody>
+
+            <EuiModalFooter>
+              <EuiButtonEmpty onClick={() => history.push('/beats')}>Cancel</EuiButtonEmpty>
+            </EuiModalFooter>
+          </EuiModal>
+        </EuiOverlayMask>
+      )}
+    </div>
+  );
   public render() {
     return <div>beats table and stuff</div>;
   }
diff --git a/x-pack/plugins/beats_management/public/pages/main/index.tsx b/x-pack/plugins/beats_management/public/pages/main/index.tsx
index 392c5e423bba6..aa45182e40892 100644
--- a/x-pack/plugins/beats_management/public/pages/main/index.tsx
+++ b/x-pack/plugins/beats_management/public/pages/main/index.tsx
@@ -4,10 +4,14 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-// @ts-ignore
-import { EuiTab, EuiTabs } from '@elastic/eui';
+import {
+  // @ts-ignore
+  EuiTab,
+  // @ts-ignore
+  EuiTabs,
+} from '@elastic/eui';
 import React from 'react';
-import { Route, Switch, withRouter } from 'react-router-dom';
+import { Redirect, Route, Switch, withRouter } from 'react-router-dom';
 import { PrimaryLayout } from '../../components/layouts/primary';
 import { ActivityPage } from './activity';
 import { BeatsPage } from './beats';
@@ -17,7 +21,14 @@ interface MainPagesProps {
   history: any;
 }
 
-class MainPagesComponent extends React.PureComponent<MainPagesProps> {
+interface MainPagesState {
+  selectedTabId: string;
+  enrollBeat?: {
+    enrollmentToken: string;
+  } | null;
+}
+
+class MainPagesComponent extends React.PureComponent<MainPagesProps, MainPagesState> {
   constructor(props: any) {
     super(props);
 
@@ -25,6 +36,18 @@ class MainPagesComponent extends React.PureComponent<MainPagesProps> {
       selectedTabId: '/',
     };
   }
+  public toggleEnrollBeat = () => {
+    if (this.state.enrollBeat) {
+      return this.setState({
+        enrollBeat: null,
+      });
+    }
+
+    // TODO: create a real enromment token
+    return this.setState({
+      enrollBeat: { enrollmentToken: '5g3i4ug5uy34g' },
+    });
+  };
 
   public onSelectedTabChanged = (id: string) => {
     this.props.history.push(id);
@@ -60,10 +83,23 @@ class MainPagesComponent extends React.PureComponent<MainPagesProps> {
       </EuiTab>
     ));
     return (
-      <PrimaryLayout title="Beats">
+      <PrimaryLayout
+        title="Beats"
+        actionSection={
+          <Switch>
+            <Route path="/beats/:action?/:enrollmentToken?" render={BeatsPage.ActionArea} />
+          </Switch>
+        }
+      >
         <EuiTabs>{renderedTabs}</EuiTabs>
+
         <Switch>
-          <Route path="/" exact={true} component={BeatsPage} />
+          <Route
+            path="/"
+            exact={true}
+            render={() => <Redirect from="/" exact={true} to="/beats" />}
+          />
+          <Route path="/beats/:action?/:enrollmentToken?" component={BeatsPage} />
           <Route path="/activity" exact={true} component={ActivityPage} />
           <Route path="/tags" exact={true} component={TagsPage} />
         </Switch>

From 80b108bb3c1342ec9b13f9d8657ceede09362412 Mon Sep 17 00:00:00 2001
From: Matt Apperson <me@mattapperson.com>
Date: Thu, 19 Jul 2018 10:34:03 -0400
Subject: [PATCH 3/5] fix path

---
 x-pack/plugins/beats_management/public/pages/main/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/x-pack/plugins/beats_management/public/pages/main/index.tsx b/x-pack/plugins/beats_management/public/pages/main/index.tsx
index aa45182e40892..41a38f2482914 100644
--- a/x-pack/plugins/beats_management/public/pages/main/index.tsx
+++ b/x-pack/plugins/beats_management/public/pages/main/index.tsx
@@ -56,7 +56,7 @@ class MainPagesComponent extends React.PureComponent<MainPagesProps, MainPagesSt
   public render() {
     const tabs = [
       {
-        id: '/',
+        id: '/beats',
         name: 'Beats List',
         disabled: false,
       },

From a7e9c97750cc3950b2d85156b630d86e75587cc2 Mon Sep 17 00:00:00 2001
From: Matt Apperson <me@mattapperson.com>
Date: Thu, 19 Jul 2018 12:08:51 -0400
Subject: [PATCH 4/5] wire up in-memroy adapters

---
 .../plugins/beats_management/public/index.tsx |  8 ++--
 .../lib/adapters/beats/adapter_types.ts       |  2 +-
 .../adapters/beats/memory_beats_adapter.ts    |  2 +-
 .../public/lib/adapters/tags/adapter_types.ts |  5 +--
 .../lib/adapters/tags/memory_tags_adapter.ts  |  5 +--
 .../lib/adapters/tokens/adapter_types.ts      |  4 +-
 .../adapters/tokens/memory_tokens_adapter.ts  |  3 +-
 .../public/lib/compose/kibana.ts              | 14 ++++++-
 .../public/lib/compose/memory.ts              | 40 +++++++++++++++++++
 .../beats_management/public/lib/lib.ts        | 12 +++++-
 .../beats_management/public/pages/home.tsx    | 14 -------
 .../public/pages/main/beats.tsx               | 31 +++++++++++++-
 .../public/pages/main/index.tsx               | 24 ++++++++---
 .../beats_management/public/router.tsx        |  4 +-
 14 files changed, 125 insertions(+), 43 deletions(-)
 create mode 100644 x-pack/plugins/beats_management/public/lib/compose/memory.ts
 delete mode 100644 x-pack/plugins/beats_management/public/pages/home.tsx

diff --git a/x-pack/plugins/beats_management/public/index.tsx b/x-pack/plugins/beats_management/public/index.tsx
index de0b9b7c4c01c..670aa23f8695b 100644
--- a/x-pack/plugins/beats_management/public/index.tsx
+++ b/x-pack/plugins/beats_management/public/index.tsx
@@ -6,7 +6,9 @@
 
 import React from 'react';
 import { BASE_PATH } from '../common/constants';
-import { compose } from './lib/compose/kibana';
+import { compose } from './lib/compose/memory';
+import { FrontendLibs } from './lib/lib';
+
 // import * as euiVars from '@elastic/eui/dist/eui_theme_k6_light.json';
 // import { ThemeProvider } from 'styled-components';
 import { PageRouter } from './router';
@@ -14,9 +16,9 @@ import { PageRouter } from './router';
 // TODO use theme provided from parentApp when kibana supports it
 import '@elastic/eui/dist/eui_theme_light.css';
 
-function startApp(libs: any) {
+function startApp(libs: FrontendLibs) {
   libs.framework.registerManagementSection('beats', 'Beats Management', BASE_PATH);
-  libs.framework.render(<PageRouter />);
+  libs.framework.render(<PageRouter libs={libs} />);
 }
 
 startApp(compose());
diff --git a/x-pack/plugins/beats_management/public/lib/adapters/beats/adapter_types.ts b/x-pack/plugins/beats_management/public/lib/adapters/beats/adapter_types.ts
index e4d907ce556a9..678944d0ced80 100644
--- a/x-pack/plugins/beats_management/public/lib/adapters/beats/adapter_types.ts
+++ b/x-pack/plugins/beats_management/public/lib/adapters/beats/adapter_types.ts
@@ -9,7 +9,7 @@ import { CMBeat } from '../../../../common/domain_types';
 export interface CMBeatsAdapter {
   insert(beat: CMBeat): Promise<void>;
   update(beat: CMBeat): Promise<void>;
-  get(id: string): Promise<CMBeat>;
+  get(id: string): Promise<CMBeat | null>;
   getAll(): Promise<CMBeat[]>;
   getWithIds(beatIds: string[]): Promise<CMBeat[]>;
   removeTagsFromBeats(removals: BeatsTagAssignment[]): Promise<BeatsTagAssignment[]>;
diff --git a/x-pack/plugins/beats_management/public/lib/adapters/beats/memory_beats_adapter.ts b/x-pack/plugins/beats_management/public/lib/adapters/beats/memory_beats_adapter.ts
index 94bec0ee818d1..5885510c89821 100644
--- a/x-pack/plugins/beats_management/public/lib/adapters/beats/memory_beats_adapter.ts
+++ b/x-pack/plugins/beats_management/public/lib/adapters/beats/memory_beats_adapter.ts
@@ -38,7 +38,7 @@ export class MemoryBeatsAdapter implements CMBeatsAdapter {
   }
 
   public async getAll() {
-    return this.beatsDB.map((beat: any) => omit(beat, ['access_token']));
+    return this.beatsDB.map<CMBeat>((beat: any) => omit(beat, ['access_token']));
   }
 
   public async removeTagsFromBeats(removals: BeatsTagAssignment[]): Promise<BeatsTagAssignment[]> {
diff --git a/x-pack/plugins/beats_management/public/lib/adapters/tags/adapter_types.ts b/x-pack/plugins/beats_management/public/lib/adapters/tags/adapter_types.ts
index 7bbb42d415f52..7fceea057d4f9 100644
--- a/x-pack/plugins/beats_management/public/lib/adapters/tags/adapter_types.ts
+++ b/x-pack/plugins/beats_management/public/lib/adapters/tags/adapter_types.ts
@@ -4,9 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 import { BeatTag } from '../../../../common/domain_types';
-import { FrameworkUser } from '../framework/adapter_types';
 
 export interface CMTagsAdapter {
-  getTagsWithIds(user: FrameworkUser, tagIds: string[]): Promise<BeatTag[]>;
-  upsertTag(user: FrameworkUser, tag: BeatTag): Promise<{}>;
+  getTagsWithIds(tagIds: string[]): Promise<BeatTag[]>;
+  upsertTag(tag: BeatTag): Promise<{}>;
 }
diff --git a/x-pack/plugins/beats_management/public/lib/adapters/tags/memory_tags_adapter.ts b/x-pack/plugins/beats_management/public/lib/adapters/tags/memory_tags_adapter.ts
index c3470011f6a4e..1baf2a65bb46f 100644
--- a/x-pack/plugins/beats_management/public/lib/adapters/tags/memory_tags_adapter.ts
+++ b/x-pack/plugins/beats_management/public/lib/adapters/tags/memory_tags_adapter.ts
@@ -5,7 +5,6 @@
  */
 
 import { BeatTag } from '../../../../common/domain_types';
-import { FrameworkUser } from '../framework/adapter_types';
 import { CMTagsAdapter } from './adapter_types';
 
 export class MemoryTagsAdapter implements CMTagsAdapter {
@@ -15,11 +14,11 @@ export class MemoryTagsAdapter implements CMTagsAdapter {
     this.tagsDB = tagsDB;
   }
 
-  public async getTagsWithIds(user: FrameworkUser, tagIds: string[]) {
+  public async getTagsWithIds(tagIds: string[]) {
     return this.tagsDB.filter(tag => tagIds.includes(tag.id));
   }
 
-  public async upsertTag(user: FrameworkUser, tag: BeatTag) {
+  public async upsertTag(tag: BeatTag) {
     const existingTagIndex = this.tagsDB.findIndex(t => t.id === tag.id);
     if (existingTagIndex !== -1) {
       this.tagsDB[existingTagIndex] = tag;
diff --git a/x-pack/plugins/beats_management/public/lib/adapters/tokens/adapter_types.ts b/x-pack/plugins/beats_management/public/lib/adapters/tokens/adapter_types.ts
index 2fe8c811c396e..29fcbeff50135 100644
--- a/x-pack/plugins/beats_management/public/lib/adapters/tokens/adapter_types.ts
+++ b/x-pack/plugins/beats_management/public/lib/adapters/tokens/adapter_types.ts
@@ -3,8 +3,6 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-import { FrameworkUser } from '../framework/adapter_types';
-
 export interface TokenEnrollmentData {
   token: string | null;
   expires_on: string;
@@ -13,5 +11,5 @@ export interface TokenEnrollmentData {
 export interface CMTokensAdapter {
   deleteEnrollmentToken(enrollmentToken: string): Promise<void>;
   getEnrollmentToken(enrollmentToken: string): Promise<TokenEnrollmentData>;
-  upsertTokens(user: FrameworkUser, tokens: TokenEnrollmentData[]): Promise<TokenEnrollmentData[]>;
+  upsertTokens(tokens: TokenEnrollmentData[]): Promise<TokenEnrollmentData[]>;
 }
diff --git a/x-pack/plugins/beats_management/public/lib/adapters/tokens/memory_tokens_adapter.ts b/x-pack/plugins/beats_management/public/lib/adapters/tokens/memory_tokens_adapter.ts
index 767f161615ef8..ae27f517245e0 100644
--- a/x-pack/plugins/beats_management/public/lib/adapters/tokens/memory_tokens_adapter.ts
+++ b/x-pack/plugins/beats_management/public/lib/adapters/tokens/memory_tokens_adapter.ts
@@ -4,7 +4,6 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { FrameworkAuthenticatedUser } from '../framework/adapter_types';
 import { CMTokensAdapter, TokenEnrollmentData } from './adapter_types';
 
 export class MemoryTokensAdapter implements CMTokensAdapter {
@@ -28,7 +27,7 @@ export class MemoryTokensAdapter implements CMTokensAdapter {
     });
   }
 
-  public async upsertTokens(user: FrameworkAuthenticatedUser, tokens: TokenEnrollmentData[]) {
+  public async upsertTokens(tokens: TokenEnrollmentData[]) {
     tokens.forEach(token => {
       const existingIndex = this.tokenDB.findIndex(t => t.token === token.token);
       if (existingIndex !== -1) {
diff --git a/x-pack/plugins/beats_management/public/lib/compose/kibana.ts b/x-pack/plugins/beats_management/public/lib/compose/kibana.ts
index 7a98e62c18459..a6b28ec40b215 100644
--- a/x-pack/plugins/beats_management/public/lib/compose/kibana.ts
+++ b/x-pack/plugins/beats_management/public/lib/compose/kibana.ts
@@ -12,18 +12,30 @@ import { uiModules } from 'ui/modules';
 // @ts-ignore: path dynamic for kibana
 import routes from 'ui/routes';
 // @ts-ignore: path dynamic for kibana
+import { MemoryBeatsAdapter } from '../adapters/beats/memory_beats_adapter';
 import { KibanaFrameworkAdapter } from '../adapters/framework/kibana_framework_adapter';
-import { FrontendLibs } from '../lib';
+import { MemoryTagsAdapter } from '../adapters/tags/memory_tags_adapter';
+import { MemoryTokensAdapter } from '../adapters/tokens/memory_tokens_adapter';
+import { FrontendDomainLibs, FrontendLibs } from '../lib';
 
 export function compose(): FrontendLibs {
   // const kbnVersion = (window as any).__KBN__.version;
+  const tags = new MemoryTagsAdapter([]);
+  const tokens = new MemoryTokensAdapter([]);
+  const beats = new MemoryBeatsAdapter([]);
 
+  const domainLibs: FrontendDomainLibs = {
+    tags,
+    tokens,
+    beats,
+  };
   const pluginUIModule = uiModules.get('app/beats_management');
 
   const framework = new KibanaFrameworkAdapter(pluginUIModule, management, routes);
 
   const libs: FrontendLibs = {
     framework,
+    ...domainLibs,
   };
   return libs;
 }
diff --git a/x-pack/plugins/beats_management/public/lib/compose/memory.ts b/x-pack/plugins/beats_management/public/lib/compose/memory.ts
new file mode 100644
index 0000000000000..10271808e435d
--- /dev/null
+++ b/x-pack/plugins/beats_management/public/lib/compose/memory.ts
@@ -0,0 +1,40 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import 'ui/autoload/all';
+// @ts-ignore: path dynamic for kibana
+import { management } from 'ui/management';
+// @ts-ignore: path dynamic for kibana
+import { uiModules } from 'ui/modules';
+// @ts-ignore: path dynamic for kibana
+import routes from 'ui/routes';
+// @ts-ignore: path dynamic for kibana
+import { MemoryBeatsAdapter } from '../adapters/beats/memory_beats_adapter';
+import { KibanaFrameworkAdapter } from '../adapters/framework/kibana_framework_adapter';
+import { MemoryTagsAdapter } from '../adapters/tags/memory_tags_adapter';
+import { MemoryTokensAdapter } from '../adapters/tokens/memory_tokens_adapter';
+
+import { FrontendDomainLibs, FrontendLibs } from '../lib';
+
+export function compose(): FrontendLibs {
+  const tags = new MemoryTagsAdapter([]);
+  const tokens = new MemoryTokensAdapter([]);
+  const beats = new MemoryBeatsAdapter([]);
+
+  const domainLibs: FrontendDomainLibs = {
+    tags,
+    tokens,
+    beats,
+  };
+  const pluginUIModule = uiModules.get('app/beats_management');
+
+  const framework = new KibanaFrameworkAdapter(pluginUIModule, management, routes);
+  const libs: FrontendLibs = {
+    ...domainLibs,
+    framework,
+  };
+  return libs;
+}
diff --git a/x-pack/plugins/beats_management/public/lib/lib.ts b/x-pack/plugins/beats_management/public/lib/lib.ts
index 085efc3e53201..03dc74122abcb 100644
--- a/x-pack/plugins/beats_management/public/lib/lib.ts
+++ b/x-pack/plugins/beats_management/public/lib/lib.ts
@@ -7,10 +7,18 @@
 import { IModule, IScope } from 'angular';
 import { AxiosRequestConfig } from 'axios';
 import React from 'react';
+import { CMBeatsAdapter } from './adapters/beats/adapter_types';
+import { CMTagsAdapter } from './adapters/tags/adapter_types';
+import { CMTokensAdapter } from './adapters/tokens/adapter_types';
 
-export interface FrontendLibs {
+export interface FrontendDomainLibs {
+  beats: CMBeatsAdapter;
+  tags: CMTagsAdapter;
+  tokens: CMTokensAdapter;
+}
+
+export interface FrontendLibs extends FrontendDomainLibs {
   framework: FrameworkAdapter;
-  // api: ApiAdapter;
 }
 
 export interface FrameworkAdapter {
diff --git a/x-pack/plugins/beats_management/public/pages/home.tsx b/x-pack/plugins/beats_management/public/pages/home.tsx
deleted file mode 100644
index 68cad596c78fc..0000000000000
--- a/x-pack/plugins/beats_management/public/pages/home.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License;
- * you may not use this file except in compliance with the Elastic License.
- */
-
-import React from 'react';
-import { PrimaryLayout } from '../components/layouts/primary';
-
-export class HomePage extends React.PureComponent {
-  public render() {
-    return <PrimaryLayout title="Beats">Home</PrimaryLayout>;
-  }
-}
diff --git a/x-pack/plugins/beats_management/public/pages/main/beats.tsx b/x-pack/plugins/beats_management/public/pages/main/beats.tsx
index 388bac094244f..a8c7518a3e27c 100644
--- a/x-pack/plugins/beats_management/public/pages/main/beats.tsx
+++ b/x-pack/plugins/beats_management/public/pages/main/beats.tsx
@@ -14,8 +14,20 @@ import {
   EuiModalHeaderTitle,
   EuiOverlayMask,
 } from '@elastic/eui';
+
+import { CMBeat } from '../../../common/domain_types';
+import { FrontendLibs } from '../../lib/lib';
+
 import React from 'react';
-export class BeatsPage extends React.PureComponent {
+interface BeatsPageProps {
+  libs: FrontendLibs;
+}
+
+interface BeatsPageState {
+  beats: CMBeat[];
+}
+
+export class BeatsPage extends React.PureComponent<BeatsPageProps, BeatsPageState> {
   public static ActionArea = ({ match, history }: { match: any; history: any }) => (
     <div>
       <EuiButtonEmpty
@@ -55,7 +67,22 @@ export class BeatsPage extends React.PureComponent {
       )}
     </div>
   );
+  constructor(props: BeatsPageProps) {
+    super(props);
+
+    this.state = {
+      beats: [],
+    };
+
+    this.loadBeats();
+  }
   public render() {
-    return <div>beats table and stuff</div>;
+    return <div>beats table and stuff - {this.state.beats.length}</div>;
+  }
+  private async loadBeats() {
+    const beats = await this.props.libs.beats.getAll();
+    this.setState({
+      beats,
+    });
   }
 }
diff --git a/x-pack/plugins/beats_management/public/pages/main/index.tsx b/x-pack/plugins/beats_management/public/pages/main/index.tsx
index 41a38f2482914..f18e5e05b5747 100644
--- a/x-pack/plugins/beats_management/public/pages/main/index.tsx
+++ b/x-pack/plugins/beats_management/public/pages/main/index.tsx
@@ -11,14 +11,16 @@ import {
   EuiTabs,
 } from '@elastic/eui';
 import React from 'react';
-import { Redirect, Route, Switch, withRouter } from 'react-router-dom';
+import { Redirect, Route, Switch } from 'react-router-dom';
 import { PrimaryLayout } from '../../components/layouts/primary';
+import { FrontendLibs } from '../../lib/lib';
 import { ActivityPage } from './activity';
 import { BeatsPage } from './beats';
 import { TagsPage } from './tags';
 
 interface MainPagesProps {
   history: any;
+  libs: FrontendLibs;
 }
 
 interface MainPagesState {
@@ -28,7 +30,7 @@ interface MainPagesState {
   } | null;
 }
 
-class MainPagesComponent extends React.PureComponent<MainPagesProps, MainPagesState> {
+export class MainPages extends React.PureComponent<MainPagesProps, MainPagesState> {
   constructor(props: any) {
     super(props);
 
@@ -99,12 +101,22 @@ class MainPagesComponent extends React.PureComponent<MainPagesProps, MainPagesSt
             exact={true}
             render={() => <Redirect from="/" exact={true} to="/beats" />}
           />
-          <Route path="/beats/:action?/:enrollmentToken?" component={BeatsPage} />
-          <Route path="/activity" exact={true} component={ActivityPage} />
-          <Route path="/tags" exact={true} component={TagsPage} />
+          <Route
+            path="/beats/:action?/:enrollmentToken?"
+            render={(props: any) => <BeatsPage libs={this.props.libs} {...props} />}
+          />
+          <Route
+            path="/activity"
+            exact={true}
+            render={(props: any) => <ActivityPage libs={this.props.libs} {...props} />}
+          />
+          <Route
+            path="/tags"
+            exact={true}
+            render={(props: any) => <TagsPage libs={this.props.libs} {...props} />}
+          />
         </Switch>
       </PrimaryLayout>
     );
   }
 }
-export const MainPages = withRouter<any>(MainPagesComponent);
diff --git a/x-pack/plugins/beats_management/public/router.tsx b/x-pack/plugins/beats_management/public/router.tsx
index 037c5c8969df7..7fb283c33da86 100644
--- a/x-pack/plugins/beats_management/public/router.tsx
+++ b/x-pack/plugins/beats_management/public/router.tsx
@@ -9,10 +9,10 @@ import { HashRouter, Route } from 'react-router-dom';
 
 import { MainPages } from './pages/main';
 
-export const PageRouter: React.SFC<{}> = () => {
+export const PageRouter: React.SFC<{ libs: any }> = ({ libs }) => {
   return (
     <HashRouter basename="/management/beats_management">
-      <Route component={MainPages} />
+      <Route render={(props: any) => <MainPages {...props} libs={libs} />} />
     </HashRouter>
   );
 };

From eeda9b3c5e87acf75b2d621b01f5b270bc06a6ce Mon Sep 17 00:00:00 2001
From: Matt Apperson <me@mattapperson.com>
Date: Thu, 19 Jul 2018 13:54:39 -0400
Subject: [PATCH 5/5] tweak adapters

---
 .../lib/adapters/beats/adapter_types.ts       |  2 --
 .../adapters/beats/memory_beats_adapter.ts    | 13 -------
 .../lib/adapters/tokens/adapter_types.ts      |  4 +--
 .../adapters/tokens/memory_tokens_adapter.ts  | 35 +++----------------
 .../public/lib/compose/kibana.ts              |  2 +-
 .../public/lib/compose/memory.ts              |  2 +-
 6 files changed, 8 insertions(+), 50 deletions(-)

diff --git a/x-pack/plugins/beats_management/public/lib/adapters/beats/adapter_types.ts b/x-pack/plugins/beats_management/public/lib/adapters/beats/adapter_types.ts
index 678944d0ced80..444ae817088e7 100644
--- a/x-pack/plugins/beats_management/public/lib/adapters/beats/adapter_types.ts
+++ b/x-pack/plugins/beats_management/public/lib/adapters/beats/adapter_types.ts
@@ -7,8 +7,6 @@
 import { CMBeat } from '../../../../common/domain_types';
 
 export interface CMBeatsAdapter {
-  insert(beat: CMBeat): Promise<void>;
-  update(beat: CMBeat): Promise<void>;
   get(id: string): Promise<CMBeat | null>;
   getAll(): Promise<CMBeat[]>;
   getWithIds(beatIds: string[]): Promise<CMBeat[]>;
diff --git a/x-pack/plugins/beats_management/public/lib/adapters/beats/memory_beats_adapter.ts b/x-pack/plugins/beats_management/public/lib/adapters/beats/memory_beats_adapter.ts
index 5885510c89821..e1929a7d6c69a 100644
--- a/x-pack/plugins/beats_management/public/lib/adapters/beats/memory_beats_adapter.ts
+++ b/x-pack/plugins/beats_management/public/lib/adapters/beats/memory_beats_adapter.ts
@@ -20,19 +20,6 @@ export class MemoryBeatsAdapter implements CMBeatsAdapter {
     return this.beatsDB.find(beat => beat.id === id) || null;
   }
 
-  public async insert(beat: CMBeat) {
-    this.beatsDB.push(beat);
-  }
-
-  public async update(beat: CMBeat) {
-    const beatIndex = this.beatsDB.findIndex(b => b.id === beat.id);
-
-    this.beatsDB[beatIndex] = {
-      ...this.beatsDB[beatIndex],
-      ...beat,
-    };
-  }
-
   public async getWithIds(beatIds: string[]) {
     return this.beatsDB.filter(beat => beatIds.includes(beat.id));
   }
diff --git a/x-pack/plugins/beats_management/public/lib/adapters/tokens/adapter_types.ts b/x-pack/plugins/beats_management/public/lib/adapters/tokens/adapter_types.ts
index 29fcbeff50135..43f2d95b02b2c 100644
--- a/x-pack/plugins/beats_management/public/lib/adapters/tokens/adapter_types.ts
+++ b/x-pack/plugins/beats_management/public/lib/adapters/tokens/adapter_types.ts
@@ -9,7 +9,5 @@ export interface TokenEnrollmentData {
 }
 
 export interface CMTokensAdapter {
-  deleteEnrollmentToken(enrollmentToken: string): Promise<void>;
-  getEnrollmentToken(enrollmentToken: string): Promise<TokenEnrollmentData>;
-  upsertTokens(tokens: TokenEnrollmentData[]): Promise<TokenEnrollmentData[]>;
+  createEnrollmentToken(): Promise<TokenEnrollmentData>;
 }
diff --git a/x-pack/plugins/beats_management/public/lib/adapters/tokens/memory_tokens_adapter.ts b/x-pack/plugins/beats_management/public/lib/adapters/tokens/memory_tokens_adapter.ts
index ae27f517245e0..4e80bc234d186 100644
--- a/x-pack/plugins/beats_management/public/lib/adapters/tokens/memory_tokens_adapter.ts
+++ b/x-pack/plugins/beats_management/public/lib/adapters/tokens/memory_tokens_adapter.ts
@@ -7,35 +7,10 @@
 import { CMTokensAdapter, TokenEnrollmentData } from './adapter_types';
 
 export class MemoryTokensAdapter implements CMTokensAdapter {
-  private tokenDB: TokenEnrollmentData[];
-
-  constructor(tokenDB: TokenEnrollmentData[]) {
-    this.tokenDB = tokenDB;
-  }
-
-  public async deleteEnrollmentToken(enrollmentToken: string) {
-    const index = this.tokenDB.findIndex(token => token.token === enrollmentToken);
-
-    if (index > -1) {
-      this.tokenDB.splice(index, 1);
-    }
-  }
-
-  public async getEnrollmentToken(tokenString: string): Promise<TokenEnrollmentData> {
-    return new Promise<TokenEnrollmentData>(resolve => {
-      return resolve(this.tokenDB.find(token => token.token === tokenString));
-    });
-  }
-
-  public async upsertTokens(tokens: TokenEnrollmentData[]) {
-    tokens.forEach(token => {
-      const existingIndex = this.tokenDB.findIndex(t => t.token === token.token);
-      if (existingIndex !== -1) {
-        this.tokenDB[existingIndex] = token;
-      } else {
-        this.tokenDB.push(token);
-      }
-    });
-    return tokens;
+  public async createEnrollmentToken(): Promise<TokenEnrollmentData> {
+    return {
+      token: '2jnwkrhkwuehriauhweair',
+      expires_on: new Date().toJSON(),
+    };
   }
 }
diff --git a/x-pack/plugins/beats_management/public/lib/compose/kibana.ts b/x-pack/plugins/beats_management/public/lib/compose/kibana.ts
index a6b28ec40b215..f27f553c9f327 100644
--- a/x-pack/plugins/beats_management/public/lib/compose/kibana.ts
+++ b/x-pack/plugins/beats_management/public/lib/compose/kibana.ts
@@ -21,7 +21,7 @@ import { FrontendDomainLibs, FrontendLibs } from '../lib';
 export function compose(): FrontendLibs {
   // const kbnVersion = (window as any).__KBN__.version;
   const tags = new MemoryTagsAdapter([]);
-  const tokens = new MemoryTokensAdapter([]);
+  const tokens = new MemoryTokensAdapter();
   const beats = new MemoryBeatsAdapter([]);
 
   const domainLibs: FrontendDomainLibs = {
diff --git a/x-pack/plugins/beats_management/public/lib/compose/memory.ts b/x-pack/plugins/beats_management/public/lib/compose/memory.ts
index 10271808e435d..ef65d77229ec9 100644
--- a/x-pack/plugins/beats_management/public/lib/compose/memory.ts
+++ b/x-pack/plugins/beats_management/public/lib/compose/memory.ts
@@ -21,7 +21,7 @@ import { FrontendDomainLibs, FrontendLibs } from '../lib';
 
 export function compose(): FrontendLibs {
   const tags = new MemoryTagsAdapter([]);
-  const tokens = new MemoryTokensAdapter([]);
+  const tokens = new MemoryTokensAdapter();
   const beats = new MemoryBeatsAdapter([]);
 
   const domainLibs: FrontendDomainLibs = {