Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add availability help flyout #734

Merged
merged 4 commits into from
May 25, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -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>
);
}
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -168,7 +169,7 @@ export const PanelGrid = (props: PanelGridProps) => {
_.omit(layout, ['static', 'moved'])
);
saveVisualizationLayouts(panelId, visualizationParams);
if (!_.isEmpty(updateAvailabilityVizId)) {
if (updateAvailabilityVizId) {
updateAvailabilityVizId(panelVisualizations);
}
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
* SPDX-License-Identifier: Apache-2.0
*/

import React, { useCallback } from 'react';
import React, { useCallback, useState } from 'react';
import {
EuiButton,
EuiAccordion,
Expand All @@ -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 {
Expand All @@ -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 {
Expand All @@ -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>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You should try using padding/margin here.

<EuiIcon type="questionInCircle" onClick={() => setFlyoutOpen(true)} size="m" />
</EuiFlexGroup>
);

const hasSpanInApp =
visualizations.data.query.finalQuery.search(PPL_SPAN_REGEX) > 0 &&
visualizations.data.appData.fromApp &&
Expand Down Expand Up @@ -105,7 +116,7 @@ export const ConfigAvailability = ({ visualizations, onConfigChange, vizState =
<EuiAccordion
initialIsOpen
id={`configPanel__Availability`}
buttonContent={'Availability'}
buttonContent={availabilityAccordionButton}
paddingSize="s"
>
<EuiButton
Expand Down Expand Up @@ -177,6 +188,7 @@ export const ConfigAvailability = ({ visualizations, onConfigChange, vizState =
);
})}
</EuiAccordion>
{flyoutOpen && <AvailabilityInfoFlyout closeFlyout={closeFlyout} />}
</>
);
};