[Newsfeed] UI plugin for Kibana

x-pack/plugins/newsfeed/kibana.json

@@ -0,0 +1,6 @@
+{
+  "id": "newsfeed",
+  "version": "kibana",
+  "server": false,
+  "ui": true
+}

x-pack/plugins/newsfeed/public/components/flyout_list.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.
+ */
+import React, { useCallback, useContext } from 'react';
+import {
+  EuiIcon,
+  EuiFlyout,
+  EuiFlyoutBody,
+  EuiFlyoutHeader,
+  EuiTitle,
+  EuiLink,
+  EuiFlyoutFooter,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiButtonEmpty,
+  EuiText,
+  EuiBadge,
+} from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
+import { EuiHeaderAlert } from './header_alert/header_alert';
+import { NewsfeedContext } from './newsfeed_header_nav_button';
+
+export const NewsfeedFlyout = () => {
+  const { setFlyoutVisible } = useContext(NewsfeedContext);
+  const closeFlyout = useCallback(() => setFlyoutVisible(false), []);
+  return (
+    <EuiFlyout onClose={closeFlyout} size="s" aria-labelledby="flyoutSmallTitle">
+      <EuiFlyoutHeader hasBorder>
+        <EuiTitle size="s">
+          <h2 id="flyoutSmallTitle">What's new</h2>
+        </EuiTitle>
+      </EuiFlyoutHeader>
+      <EuiFlyoutBody>
+        <EuiHeaderAlert
+          title="Control access to features"
+          text="Show or hide applications and features per space in Kibana."
+          action={<EuiLink href="/guides/feature-controls">Learn about feature controls</EuiLink>}
+          date="1 May 2019"
+          badge={<EuiBadge>7.1</EuiBadge>}
+        />
+        <EuiHeaderAlert
+          title="Kibana 7.0 is turning heads"
+          text="Simplified navigation, responsive dashboards, dark mode… pick your favorite."
+          action={
+            <EuiLink target="_blank" href="https://www.elastic.co/blog/kibana-7-0-0-released">
+              Read the blog <EuiIcon type="popout" size="s" />
+            </EuiLink>
+          }
+          date="10 April 2019"
+          badge={<EuiBadge color="hollow">7.0</EuiBadge>}
+        />
+      </EuiFlyoutBody>
+      <EuiFlyoutFooter>
+        <EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
+          <EuiFlexItem grow={false}>
+            <EuiButtonEmpty iconType="cross" onClick={closeFlyout} flush="left">
+              <FormattedMessage
+                id="newsfeed.components.flyoutList.closeButtonLabel"
+                defaultMessage="Close"
+              />
+            </EuiButtonEmpty>
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiText color="subdued" size="s">
+              <p>Version 7.0</p>
+            </EuiText>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiFlyoutFooter>
+    </EuiFlyout>
+  );
+};

x-pack/plugins/newsfeed/public/components/header_alert/_header_alert.scss

@@ -0,0 +1,47 @@
+/*
+ * 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.
+ */
+
+.euiHeaderAlert {
+  min-width: 300px;
+  position: relative;
+  margin-bottom: $euiSizeL;
+  padding: 0 $euiSizeS $euiSizeL;
+  border-bottom: $euiBorderThin;
+  border-top: none;
+
+  .euiHeaderAlert__dismiss {
+    opacity: 0;
+    position: absolute;
+    right: $euiSize - 4px;
+    top: $euiSize - 4px;
+    transition: opacity $euiAnimSpeedNormal ease-in;
+  }
+
+  &:hover .euiHeaderAlert__dismiss,
+  .euiHeaderAlert__dismiss:focus {
+    opacity: 1;
+  }
+
+  .euiHeaderAlert__title {
+    @include euiTitle('xs');
+    margin-bottom: $euiSizeS;
+    padding-right: $euiSizeL; // Accounts for the dismiss button.
+  }
+
+  .euiHeaderAlert__text {
+    @include euiFontSizeS;
+    margin-bottom: $euiSize;
+  }
+
+  .euiHeaderAlert__action {
+    @include euiFontSizeS;
+  }
+
+  .euiHeaderAlert__date {
+    @include euiFontSizeXS;
+    color: $euiColorDarkShade;
+  }
+}

x-pack/plugins/newsfeed/public/components/header_alert/_index.scss

@@ -0,0 +1,7 @@
+/*
+ * 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 'header_alert';

x-pack/plugins/newsfeed/public/components/header_alert/header_alert.tsx

@@ -0,0 +1,68 @@
+/*
+ * 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, { FunctionComponent } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+import { EuiFlexGroup, EuiFlexItem, EuiBadgeProps, EuiI18n } from '@elastic/eui';
+
+interface IEuiHeaderAlertProps {
+  action: JSX.Element;
+  className?: string;
+  date: string;
+  text: string;
+  title: string;
+  badge?: JSX.Element;
+  rest?: string[];
+}
+
+export const EuiHeaderAlert = ({
+  action,
+  className,
+  date,
+  text,
+  title,
+  badge,
+  ...rest
+}: IEuiHeaderAlertProps) => {
+  const classes = classNames('euiHeaderAlert', className);
+
+  let badgeContent: JSX.Element | null;
+  if (badge) {
+    badgeContent = badge;
+  } else {
+    badgeContent = null;
+  }
+
+  return (
+    <EuiI18n token="euiHeaderAlert.dismiss" default="Dismiss">
+      {(dismiss: any) => (
+        <div className={classes} {...rest}>
+          <EuiFlexGroup justifyContent="spaceBetween">
+            <EuiFlexItem>
+              <div className="euiHeaderAlert__date">{date}</div>
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>{badgeContent}</EuiFlexItem>
+          </EuiFlexGroup>
+
+          <div className="euiHeaderAlert__title">{title}</div>
+          <div className="euiHeaderAlert__text">{text}</div>
+          <div className="euiHeaderAlert__action euiLink">{action}</div>
+        </div>
+      )}
+    </EuiI18n>
+  );
+};
+
+EuiHeaderAlert.propTypes = {
+  action: PropTypes.node,
+  className: PropTypes.string,
+  date: PropTypes.node.isRequired,
+  text: PropTypes.node,
+  title: PropTypes.node.isRequired,
+  badge: PropTypes.node,
+};

x-pack/plugins/newsfeed/public/components/newsfeed_header_nav_button.tsx

@@ -0,0 +1,44 @@
+/*
+ * 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, { useState, Fragment } from 'react';
+import { EuiHeaderSectionItemButton, EuiIcon, EuiNotificationBadge } from '@elastic/eui';
+import { NewsfeedFlyout } from './flyout_list';
+
+export const NewsfeedContext = React.createContext({} as any);
+
+export const MailNavButton = () => {
+  const [showBadge, setShowBadge] = useState<boolean>(true);
+  const [flyoutVisible, setFlyoutVisible] = useState<boolean>(false);
+  function showFlyout() {
+    setShowBadge(false);
+    setFlyoutVisible(!flyoutVisible);
+  }
+  let flyout;
+  if (flyoutVisible) {
+    flyout = <NewsfeedFlyout />;
+  }
+  return (
+    <NewsfeedContext.Provider value={{ setFlyoutVisible }}>
+      <Fragment>
+        <EuiHeaderSectionItemButton
+          aria-controls="keyPadMenu"
+          aria-expanded={flyoutVisible}
+          aria-haspopup="true"
+          aria-label="Apps menu"
+          onClick={showFlyout}
+        >
+          <EuiIcon type="email" size="m" />
+
+          {showBadge ? (
+            <EuiNotificationBadge className="euiHeaderNotification">&#9642;</EuiNotificationBadge>
+          ) : null}
+        </EuiHeaderSectionItemButton>
+        {flyout}
+      </Fragment>
+    </NewsfeedContext.Provider>
+  );
+};

x-pack/plugins/newsfeed/public/components/styles.scss

@@ -0,0 +1,7 @@
+/*
+ * 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 './header_alert/index';

x-pack/plugins/newsfeed/public/index.ts

@@ -0,0 +1,14 @@
+/*
+ * 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 { PluginInitializerContext } from '../../../../src/core/public';
+import { NewsfeedPublicPlugin } from './plugin';
+
+export function plugin(initializerContext: PluginInitializerContext) {
+  return new NewsfeedPublicPlugin(initializerContext);
+}
+
+export { NewsfeedPublicPlugin as Plugin };

x-pack/plugins/newsfeed/public/lib/api.ts

@@ -0,0 +1,114 @@
+/*
+ * 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 * as Rx from 'rxjs';
+import moment from 'moment';
+import { filter, mergeMap, tap } from 'rxjs/operators';
+import { HttpServiceBase } from '../../../../../src/core/public';
+
+interface ApiItem {
+  hash: string;
+  expire_on: Date;
+  title: { [lang: string]: string };
+  description: { [lang: string]: string };
+  link_text: { [lang: string]: string };
+  link_url: { [lang: string]: string };
+
+  badge: null; // not used phase 1
+  image_url: null; // not used phase 1
+  languages: null; // not used phase 1
+  publish_on: null; // not used phase 1
+}
+
+interface NewsfeedItem {
+  title: string;
+  description: string;
+  linkText: string;
+  linkUrl: string;
+}
+
+interface FetchResult {
+  hasNew: boolean;
+  feedItems: NewsfeedItem[];
+}
+
+const DEFAULT_LANGUAGE = 'en'; // TODO: read from settings, default to en
+const NEWSFEED_MAIN_INTERVAL = 120000; // A main interval to check for need to refresh (2min)
+const NEWSFEED_FETCH_INTERVAL = moment.duration(1, 'day'); // how often to actually fetch the API
+const NEWSFEED_LAST_FETCH_STORAGE_KEY = 'xpack.newsfeed.lastfetchtime';
+const NEWSFEED_HASH_SET_STORAGE_KEY = 'xpack.newsfeed.hashes';
+const NEWSFEED_SERVICE_URL = 'https://feeds.elastic.co/kibana/v7.0.0.json'; // FIXME: should be dynamic
+
+function shouldFetch(): boolean {
+  const lastFetch: string | null = localStorage.getItem(NEWSFEED_LAST_FETCH_STORAGE_KEY);
+  if (lastFetch == null) {
+    return true;
+  }
+  const last = moment(lastFetch, 'x'); // parse as unix ms timestamp
+  const now = moment();
+  const duration = moment.duration(now.diff(last));
+
+  return duration > NEWSFEED_FETCH_INTERVAL;
+}
+
+function updateLastFetch() {
+  localStorage.setItem(NEWSFEED_LAST_FETCH_STORAGE_KEY, Date.now().toString());
+}
+
+function updateHashes(items: ApiItem[]): { previous: string[]; current: string[] } {
+  // combine localStorage hashes with new hashes
+  const hashSet: string | null = localStorage.getItem(NEWSFEED_HASH_SET_STORAGE_KEY);
+  let oldHashes: string[] = [];
+  if (hashSet != null) {
+    oldHashes = hashSet.split(',');
+  }
+  const newHashes = items.map(i => i.hash.slice(0, 10));
+  const updatedHashes = [...new Set(oldHashes.concat(newHashes))];
+  localStorage.setItem(NEWSFEED_HASH_SET_STORAGE_KEY, updatedHashes.join(','));
+
+  return { previous: oldHashes, current: updatedHashes };
+}
+
+/*
+ * Creates an Observable to newsfeed items, powered by the main interval
+ * Computes hasNew value from new item hashes saved in localStorage
+ */
+export function getApi(http: HttpServiceBase): Rx.Observable<void | FetchResult> {
+  return Rx.timer(0, NEWSFEED_MAIN_INTERVAL).pipe(
+    filter(() => shouldFetch()),
+    mergeMap(
+      (value: number): Rx.Observable<ApiItem[]> => {
+        return Rx.from(
+          http.fetch(NEWSFEED_SERVICE_URL, { method: 'GET' }).then(({ items }) => items)
+        );
+      }
+    ),
+    filter(items => items.length > 0),
+    tap(() => updateLastFetch()),
+    mergeMap(
+      (items): Rx.Observable<FetchResult> => {
+        // calculate hasNew
+        const { previous, current } = updateHashes(items);
+        const hasNew = current.length > previous.length;
+
+        // model feed items
+        const feedItems: NewsfeedItem[] = items.map(it => {
+          return {
+            title: it.title[DEFAULT_LANGUAGE],
+            description: it.description[DEFAULT_LANGUAGE],
+            linkText: it.link_text[DEFAULT_LANGUAGE],
+            linkUrl: it.link_url[DEFAULT_LANGUAGE],
+          };
+        });
+
+        return Rx.of({
+          hasNew,
+          feedItems,
+        });
+      }
+    )
+  );
+}