Add availability info flyout

Signed-off-by: Eugene Lee <[email protected]>

dashboards-observability/public/components/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. Users can use the power of the PPL
+          language to define arbitrary conditions on their logs to create a visualization over time.
+          <h4>Example</h4>
+          <EuiCodeBlock>
+            {'source = <index_name> | ... | ... | stats ... by span(<timestamp_field>, 1h)'}
+          </EuiCodeBlock>
+          Users 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>
+  );
+}

dashboards-observability/public/components/event_analytics/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} />}
     </>
   );
 };