[Observability] Fetch news feed (#71212)

* adding new feed * adding log when an error happens * fixing translations Co-authored-by: Elastic Machine <[email protected]>
elastic · Jul 9, 2020 · 14752ea · 14752ea
1 parent 1ed98d5
commit 14752ea
Show file tree

Hide file tree

Showing 11 changed files with 367 additions and 88 deletions.
diff --git a/x-pack/plugins/observability/public/components/app/news/index.test.tsx b/x-pack/plugins/observability/public/components/app/news/index.test.tsx
diff --git a/x-pack/plugins/observability/public/components/app/news/mock/news.mock.data.ts b/x-pack/plugins/observability/public/components/app/news/mock/news.mock.data.ts
diff --git a/...ity/public/components/app/news/index.scss → ...ublic/components/app/news_feed/index.scss b/...ity/public/components/app/news/index.scss → ...ublic/components/app/news_feed/index.scss
diff --git a/x-pack/plugins/observability/public/components/app/news_feed/index.test.tsx b/x-pack/plugins/observability/public/components/app/news_feed/index.test.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 from 'react';
+import { NewsItem } from '../../../services/get_news_feed';
+import { render } from '../../../utils/test_helper';
+import { NewsFeed } from './';
+
+const newsFeedItems = [
+  {
+    title: {
+      en: 'Elastic introduces OpenTelemetry integration',
+    },
+    description: {
+      en:
+        'We are pleased to announce the availability of the Elastic OpenTelemetry integration — available on Elastic Cloud, or when you download Elastic APM.',
+    },
+    link_url: {
+      en:
+        'https://www.elastic.co/blog/elastic-apm-opentelemetry-integration?blade=observabilitysolutionfeed',
+    },
+    image_url: {
+      en: 'foo.png',
+    },
+  },
+  {
+    title: {
+      en: 'Kubernetes observability tutorial: Log monitoring and analysis',
+    },
+    description: {
+      en:
+        'Learn how Elastic Observability makes it easy to monitor and detect anomalies in millions of logs from thousands of containers running hundreds of microservices — while Kubernetes scales applications with changing pod counts. All from a single UI.',
+    },
+    link_url: {
+      en:
+        'https://www.elastic.co/blog/kubernetes-observability-tutorial-k8s-log-monitoring-and-analysis-elastic-stack?blade=observabilitysolutionfeed',
+    },
+    image_url: null,
+  },
+  {
+    title: {
+      en: 'Kubernetes observability tutorial: K8s cluster setup and demo app deployment',
+    },
+    description: {
+      en:
+        'This blog will walk you through configuring the environment you will be using for the Kubernetes observability tutorial blog series. We will be deploying Elasticsearch Service, a Minikube single-node Kubernetes cluster setup, and a demo app.',
+    },
+    link_url: {
+      en:
+        'https://www.elastic.co/blog/kubernetes-observability-tutorial-k8s-cluster-setup-demo-app-deployment?blade=observabilitysolutionfeed',
+    },
+    image_url: {
+      en: null,
+    },
+  },
+] as NewsItem[];
+describe('News', () => {
+  it('renders resources with all elements', () => {
+    const { getByText, getAllByText, queryAllByTestId } = render(
+      <NewsFeed items={newsFeedItems} />
+    );
+    expect(getByText("What's new")).toBeInTheDocument();
+    expect(getAllByText('Read full story').length).toEqual(3);
+    expect(queryAllByTestId('news_image').length).toEqual(1);
+  });
+});
diff --git a/...lity/public/components/app/news/index.tsx → ...public/components/app/news_feed/index.tsx b/...lity/public/components/app/news/index.tsx → ...public/components/app/news_feed/index.tsx
@@ -4,6 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 import {
+  EuiErrorBoundary,
   EuiFlexGroup,
   EuiFlexItem,
   EuiHorizontalRule,
@@ -12,51 +13,51 @@ import {
   EuiTitle,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
+import { truncate } from 'lodash';
 import React, { useContext } from 'react';
 import { ThemeContext } from 'styled-components';
+import { NewsItem as INewsItem } from '../../../services/get_news_feed';
 import './index.scss';
-import { truncate } from 'lodash';
-import { news as newsMockData } from './mock/news.mock.data';
 
-interface NewsItem {
-  title: string;
-  description: string;
-  link_url: string;
-  image_url: string;
+interface Props {
+  items: INewsItem[];
 }
 
-export const News = () => {
-  const newsItems: NewsItem[] = newsMockData;
+export const NewsFeed = ({ items }: Props) => {
   return (
-    <EuiFlexGroup direction="column" gutterSize="s">
-      <EuiFlexItem grow={false}>
-        <EuiTitle size="xs">
-          <h4>
-            {i18n.translate('xpack.observability.news.title', {
-              defaultMessage: "What's new",
-            })}
-          </h4>
-        </EuiTitle>
-      </EuiFlexItem>
-      {newsItems.map((item, index) => (
-        <EuiFlexItem key={index} grow={false}>
-          <NewsItem item={item} />
+    // The news feed is manually added/edited, to prevent any errors caused by typos or missing fields,
+    // wraps the component with EuiErrorBoundary to avoid breaking the entire page.
+    <EuiErrorBoundary>
+      <EuiFlexGroup direction="column" gutterSize="s">
+        <EuiFlexItem grow={false}>
+          <EuiTitle size="xs">
+            <h4>
+              {i18n.translate('xpack.observability.news.title', {
+                defaultMessage: "What's new",
+              })}
+            </h4>
+          </EuiTitle>
         </EuiFlexItem>
-      ))}
-    </EuiFlexGroup>
+        {items.map((item, index) => (
+          <EuiFlexItem key={index} grow={false}>
+            <NewsItem item={item} />
+          </EuiFlexItem>
+        ))}
+      </EuiFlexGroup>
+    </EuiErrorBoundary>
   );
 };
 
 const limitString = (string: string, limit: number) => truncate(string, { length: limit });
 
-const NewsItem = ({ item }: { item: NewsItem }) => {
+const NewsItem = ({ item }: { item: INewsItem }) => {
   const theme = useContext(ThemeContext);
 
   return (
     <EuiFlexGroup direction="column" gutterSize="s">
       <EuiFlexItem grow={false}>
         <EuiTitle size="xxxs">
-          <h4>{item.title}</h4>
+          <h4>{item.title.en}</h4>
         </EuiTitle>
       </EuiFlexItem>
       <EuiFlexItem grow={false}>
@@ -65,11 +66,11 @@ const NewsItem = ({ item }: { item: NewsItem }) => {
             <EuiFlexGroup direction="column" gutterSize="s" alignItems="baseline">
               <EuiFlexItem>
                 <EuiText grow={false} size="xs" color="subdued">
-                  {limitString(item.description, 128)}
+                  {limitString(item.description.en, 128)}
                 </EuiText>
               </EuiFlexItem>
               <EuiFlexItem grow={false}>
-                <EuiLink href={item.link_url} target="_blank">
+                <EuiLink href={item.link_url.en} target="_blank">
                   <EuiText size="xs">
                     {i18n.translate('xpack.observability.news.readFullStory', {
                       defaultMessage: 'Read full story',
@@ -79,16 +80,19 @@ const NewsItem = ({ item }: { item: NewsItem }) => {
               </EuiFlexItem>
             </EuiFlexGroup>
           </EuiFlexItem>
-          <EuiFlexItem grow={false}>
-            <img
-              style={{ border: theme.eui.euiBorderThin }}
-              width={48}
-              height={48}
-              alt={item.title}
-              src={item.image_url}
-              className="obsNewsFeed__itemImg"
-            />
-          </EuiFlexItem>
+          {item.image_url?.en && (
+            <EuiFlexItem grow={false}>
+              <img
+                data-test-subj="news_image"
+                style={{ border: theme.eui.euiBorderThin }}
+                width={48}
+                height={48}
+                alt={item.title.en}
+                src={item.image_url.en}
+                className="obsNewsFeed__itemImg"
+              />
+            </EuiFlexItem>
+          )}
         </EuiFlexGroup>
       </EuiFlexItem>
       <EuiHorizontalRule margin="s" />

diff --git a/x-pack/plugins/observability/public/pages/overview/index.tsx b/x-pack/plugins/observability/public/pages/overview/index.tsx
@@ -16,6 +16,7 @@ import { LogsSection } from '../../components/app/section/logs';
 import { MetricsSection } from '../../components/app/section/metrics';
 import { UptimeSection } from '../../components/app/section/uptime';
 import { DatePicker, TimePickerTime } from '../../components/shared/data_picker';
+import { NewsFeed } from '../../components/app/news_feed';
 import { fetchHasData } from '../../data_handler';
 import { FETCH_STATUS, useFetcher } from '../../hooks/use_fetcher';
 import { UI_SETTINGS, useKibanaUISettings } from '../../hooks/use_kibana_ui_settings';
@@ -26,6 +27,7 @@ import { getParsedDate } from '../../utils/date';
 import { getBucketSize } from '../../utils/get_bucket_size';
 import { getEmptySections } from './empty_section';
 import { LoadingObservability } from './loading_observability';
+import { getNewsFeed } from '../../services/get_news_feed';
 
 interface Props {
   routeParams: RouteParams<'/overview'>;
@@ -48,6 +50,8 @@ export const OverviewPage = ({ routeParams }: Props) => {
     return getObservabilityAlerts({ core });
   }, []);
 
+  const { data: newsFeed } = useFetcher(() => getNewsFeed({ core }), []);
+
   const theme = useContext(ThemeContext);
   const timePickerTime = useKibanaUISettings<TimePickerTime>(UI_SETTINGS.TIMEPICKER_TIME_DEFAULTS);
 
@@ -190,6 +194,12 @@ export const OverviewPage = ({ routeParams }: Props) => {
             <EuiFlexItem grow={false}>
               <Resources />
             </EuiFlexItem>
+
+            {!!newsFeed?.items?.length && (
+              <EuiFlexItem grow={false}>
+                <NewsFeed items={newsFeed.items.slice(0, 3)} />
+              </EuiFlexItem>
+            )}
           </EuiFlexGroup>
         </EuiFlexItem>
       </EuiFlexGroup>

diff --git a/x-pack/plugins/observability/public/pages/overview/mock/news_feed.mock.ts b/x-pack/plugins/observability/public/pages/overview/mock/news_feed.mock.ts
@@ -0,0 +1,72 @@
+/*
+ * 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.
+ */
+
+export const newsFeedFetchData = async () => {
+  return {
+    items: [
+      {
+        title: {
+          en: 'Elastic introduces OpenTelemetry integration',
+        },
+        description: {
+          en:
+            'We are pleased to announce the availability of the Elastic OpenTelemetry integration — available on Elastic Cloud, or when you download Elastic APM.',
+        },
+        link_text: null,
+        link_url: {
+          en:
+            'https://www.elastic.co/blog/elastic-apm-opentelemetry-integration?blade=observabilitysolutionfeed',
+        },
+        languages: null,
+        badge: null,
+        image_url: null,
+        publish_on: '2020-07-02T00:00:00',
+        expire_on: '2021-05-02T00:00:00',
+        hash: '012caf3e161127d618ae8cc95e3e63f009a45d343eedf2f5e369cc95b1f9d9d3',
+      },
+      {
+        title: {
+          en: 'Kubernetes observability tutorial: Log monitoring and analysis',
+        },
+        description: {
+          en:
+            'Learn how Elastic Observability makes it easy to monitor and detect anomalies in millions of logs from thousands of containers running hundreds of microservices — while Kubernetes scales applications with changing pod counts. All from a single UI.',
+        },
+        link_text: null,
+        link_url: {
+          en:
+            'https://www.elastic.co/blog/kubernetes-observability-tutorial-k8s-log-monitoring-and-analysis-elastic-stack?blade=observabilitysolutionfeed',
+        },
+        languages: null,
+        badge: null,
+        image_url: null,
+        publish_on: '2020-06-23T00:00:00',
+        expire_on: '2021-06-23T00:00:00',
+        hash: '79a28cb9be717e82df80bf32c27e5d475e56d0d315be694b661d133f9a58b3b3',
+      },
+      {
+        title: {
+          en: 'Kubernetes observability tutorial: K8s cluster setup and demo app deployment',
+        },
+        description: {
+          en:
+            'This blog will walk you through configuring the environment you will be using for the Kubernetes observability tutorial blog series. We will be deploying Elasticsearch Service, a Minikube single-node Kubernetes cluster setup, and a demo app.',
+        },
+        link_text: null,
+        link_url: {
+          en:
+            'https://www.elastic.co/blog/kubernetes-observability-tutorial-k8s-cluster-setup-demo-app-deployment?blade=observabilitysolutionfeed',
+        },
+        languages: null,
+        badge: null,
+        image_url: null,
+        publish_on: '2020-06-23T00:00:00',
+        expire_on: '2021-06-23T00:00:00',
+        hash: 'ad682c355af3d4470a14df116df3b441e941661b291cdac62335615e7c6f13c2',
+      },
+    ],
+  };
+};