Add availability help flyout (opensearch-project#734)

Signed-off-by: Eugene Lee <[email protected]>
kavithacm · Jun 27, 2022 · 0d253e8 · 0d253e8
1 parent 2d93bd3
commit 0d253e8
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 3 deletions.
diff --git a/...omponents/application_analytics/components/flyout_components/availability_info_flyout.tsx b/...omponents/application_analytics/components/flyout_components/availability_info_flyout.tsx
@@ -0,0 +1,62 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {
+  EuiFlyout,
+  EuiFlyoutHeader,
+  EuiTitle,
+  EuiFlyoutBody,
+  EuiText,
+  EuiCodeBlock,
+  EuiFlyoutFooter,
+  EuiButton,
+} from '@elastic/eui';
+import React from 'react';
+
+interface AvailabilityInfoFlyoutProps {
+  closeFlyout: () => void;
+}
+
+export function AvailabilityInfoFlyout(props: AvailabilityInfoFlyoutProps) {
+  const { closeFlyout } = props;
+
+  return (
+    <EuiFlyout onClose={closeFlyout} size="s" type="push">
+      <EuiFlyoutHeader>
+        <EuiTitle>
+          <h2>Availability</h2>
+        </EuiTitle>
+      </EuiFlyoutHeader>
+      <EuiFlyoutBody>
+        <EuiText>
+          <h3>Configure availability</h3>
+          Availability is the status of your application determined by availability levels set on a
+          time series metric. To create an availability level, you must configure the following:
+          <ul>
+            <li>color: The color of the availability badge on the home page</li>
+            <li>name: The text in the availability badge on the home page</li>
+            <li>expression: Comparison operator to determine the availability</li>
+            <li>value: Value to use when calculating availability</li>
+          </ul>
+          <h3>Configuring availability</h3>
+          By default, Application analytics shows results from the last 24 hours of your data. To
+          see data from a different timeframe, use the date and time selector.
+          <h3>Time series metric</h3>A time series metric is any visualization that has a query that
+          spans over a timestamp and is a bar/line chart. You can use the PPL language to define
+          arbitrary conditions on your logs to create a visualization over time.
+          <h4>Example</h4>
+          <EuiCodeBlock>
+            {'source = <index_name> | ... | ... | stats ... by span(<timestamp_field>, 1h)'}
+          </EuiCodeBlock>
+          You can then choose <strong>Bar</strong> or <strong>Line</strong> in visualization
+          configurations to create a time series metric.
+        </EuiText>
+      </EuiFlyoutBody>
+      <EuiFlyoutFooter>
+        <EuiButton onClick={closeFlyout}>Close</EuiButton>
+      </EuiFlyoutFooter>
+    </EuiFlyout>
+  );
+}
diff --git a/...rds-observability/public/components/custom_panels/panel_modules/panel_grid/panel_grid.tsx b/...rds-observability/public/components/custom_panels/panel_modules/panel_grid/panel_grid.tsx
@@ -27,6 +27,7 @@ const ResponsiveGridLayout = WidthProvider(Responsive);
  * http: http core service;
  * chrome: chrome core service;
  * panelId: OpenPanel Id
+ * updateAvailabilityVizId: function to update application if availabilityViz is removed from panel
  * panelVisualizations: list of panel visualizations
  * setPanelVisualizations: function to set panel visualizations
  * editMode: boolean to check if the panel is in edit mode
@@ -168,7 +169,7 @@ export const PanelGrid = (props: PanelGridProps) => {
         _.omit(layout, ['static', 'moved'])
       );
       saveVisualizationLayouts(panelId, visualizationParams);
-      if (!_.isEmpty(updateAvailabilityVizId)) {
+      if (updateAvailabilityVizId) {
         updateAvailabilityVizId(panelVisualizations);
       }
     }

diff --git a/...explorer/visualizations/config_panel/config_panes/config_controls/config_availability.tsx b/...explorer/visualizations/config_panel/config_panes/config_controls/config_availability.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useCallback } from 'react';
+import React, { useCallback, useState } from 'react';
 import {
   EuiButton,
   EuiAccordion,
@@ -17,8 +17,10 @@ import {
   EuiFieldText,
   EuiSelect,
   htmlIdGenerator,
+  EuiText,
 } from '@elastic/eui';
 import { isEmpty } from 'lodash';
+import { AvailabilityInfoFlyout } from '../../../../../../application_analytics/components/flyout_components/availability_info_flyout';
 import { PPL_SPAN_REGEX } from '../../../../../../../../common/constants/shared';
 
 export interface AvailabilityUnitType {
@@ -30,6 +32,8 @@ export interface AvailabilityUnitType {
 }
 
 export const ConfigAvailability = ({ visualizations, onConfigChange, vizState = {} }: any) => {
+  const [flyoutOpen, setFlyoutOpen] = useState(false);
+  const closeFlyout = () => setFlyoutOpen(false);
   const addButtonText = '+ Add availability level';
   const getAvailabilityUnit = () => {
     return {
@@ -50,6 +54,13 @@ export const ConfigAvailability = ({ visualizations, onConfigChange, vizState =
     { value: '≠', text: '≠' },
   ];
 
+  const availabilityAccordionButton = (
+    <EuiFlexGroup direction="row" justifyContent="center">
+      <EuiText>&nbsp;&nbsp;Availability&nbsp;</EuiText>
+      <EuiIcon type="questionInCircle" onClick={() => setFlyoutOpen(true)} size="m" />
+    </EuiFlexGroup>
+  );
+
   const hasSpanInApp =
     visualizations.data.query.finalQuery.search(PPL_SPAN_REGEX) > 0 &&
     visualizations.data.appData.fromApp &&
@@ -105,7 +116,7 @@ export const ConfigAvailability = ({ visualizations, onConfigChange, vizState =
       <EuiAccordion
         initialIsOpen
         id={`configPanel__Availability`}
-        buttonContent={'Availability'}
+        buttonContent={availabilityAccordionButton}
         paddingSize="s"
       >
         <EuiButton
@@ -177,6 +188,7 @@ export const ConfigAvailability = ({ visualizations, onConfigChange, vizState =
             );
           })}
       </EuiAccordion>
+      {flyoutOpen && <AvailabilityInfoFlyout closeFlyout={closeFlyout} />}
     </>
   );
 };