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.

Sign up for GitHub

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

Jump to bottom

[Backport 2.x] [Look&Feel] Consistency and density improvements #847

Merged
merged 1 commit into from
Aug 21, 2024
Merged

[Backport 2.x] [Look&Feel] Consistency and density improvements #847

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
5 changes: 4 additions & 1 deletion public/components/CodeModal/CodeModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import {
EuiModalHeaderTitle,
EuiOverlayMask,
EuiCodeBlock,
EuiText,
} from '@elastic/eui';

interface CodeModalProps {
Expand All @@ -33,7 +34,9 @@ export const CodeModal = (props: CodeModalProps) => {
<EuiModalHeader>
<EuiModalHeaderTitle>
<div>
<p>{props.title}</p>
<EuiText size="s">
<h2>{props.title}</h2>
</EuiText>
{props.subtitle ? (
<p className="modelSubtitle">{props.subtitle}</p>
) : (
Expand Down
10 changes: 8 additions & 2 deletions .../AssociatedDetectors/components/ConfirmUnlinkDetectorModal/ConfirmUnlinkDetectorModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,10 +39,16 @@ export const ConfirmUnlinkDetectorModal = (
maxWidth={450}
>
<EuiModalHeader>
<EuiModalHeaderTitle>{'Remove association?'}</EuiModalHeaderTitle>
<EuiModalHeaderTitle>
<EuiText size="s">
<h2>
{'Remove association?'}
</h2>
</EuiText>
</EuiModalHeaderTitle>
</EuiModalHeader>
<EuiModalBody>
<EuiText>
<EuiText size="s">
Removing association unlinks {props.detector.name} detector from the
visualization but does not delete it. The detector association can
be restored.
Expand Down
2 changes: 1 addition & 1 deletion ...tedDetectors/components/EmptyAssociatedDetectorMessage/EmptyAssociatedDetectorMessage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export const EmptyAssociatedDetectorMessage = (props: EmptyDetectorProps) => (
data-test-subj="emptyAssociatedDetectorFlyoutMessage"
style={{ maxWidth: '45em' }}
body={
<EuiText>
<EuiText size="s">
<p>
{props.isFilterApplied
? FILTER_TEXT
Expand Down
4 changes: 2 additions & 2 deletions ...Detectors/components/__tests__/__snapshots__/EmptyAssociatedDetectorMessage.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ exports[`ConfirmUnlinkDetectorModal spec renders the component with filter appli
class="euiText euiText--medium"
>
<div
class="euiText euiText--medium"
class="euiText euiText--small"
>
<p>
There are no detectors matching your search
Expand Down Expand Up @@ -56,7 +56,7 @@ exports[`ConfirmUnlinkDetectorModal spec renders the component with filter appli
class="euiText euiText--medium"
>
<div
class="euiText euiText--medium"
class="euiText euiText--small"
>
<p>
There are no anomaly detectors associated with test-title visualization.
Expand Down
9 changes: 5 additions & 4 deletions ...ponents/FeatureAnywhereContextMenu/AssociatedDetectors/containers/AssociatedDetectors.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import {
EuiFlexItem,
EuiFlexGroup,
EuiCallOut,
EuiText,
} from '@elastic/eui';
import { get, isEmpty } from 'lodash';
import '../styles.scss';
Expand Down Expand Up @@ -85,7 +86,7 @@ function AssociatedDetectors({ embeddable, closeFlyout, setMode }) {
const indexPattern = await getSavedObjectsClient().get('index-pattern', indexPatternId);
const refs = indexPattern.references as References[];
const foundDataSourceId = refs.find(ref => ref.type === 'data-source')?.id;
setDataSourceId(foundDataSourceId);
setDataSourceId(foundDataSourceId);
} catch (error) {
console.error("Error fetching index pattern:", error);
}
Expand Down Expand Up @@ -270,7 +271,7 @@ function AssociatedDetectors({ embeddable, closeFlyout, setMode }) {
getDetectorList(
getAllDetectorsQueryParamsWithDataSourceId(dataSourceId)
)
);
);
};

const handleUnlinkDetectorAction = (detector: DetectorListItem) => {
Expand Down Expand Up @@ -334,11 +335,11 @@ function AssociatedDetectors({ embeddable, closeFlyout, setMode }) {
onClose={closeFlyout}
>
<EuiFlyoutHeader hasBorder>
<EuiTitle>
<EuiText size="s">
<h2 id="associated-detectors__title">
Associated anomaly detectors
</h2>
</EuiTitle>
</EuiText>
</EuiFlyoutHeader>
{associationLimitReached ? (
<EuiCallOut
Expand Down
12 changes: 6 additions & 6 deletions public/components/FeatureAnywhereContextMenu/CreateAnomalyDetector/AddAnomalyDetector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -141,7 +141,7 @@ function AddAnomalyDetector({
const indexPattern = await getSavedObjectsClient().get('index-pattern', indexPatternId);
const refs = indexPattern.references as References[];
const foundDataSourceId = refs.find(ref => ref.type === 'data-source')?.id;
setDataSourceId(foundDataSourceId);
setDataSourceId(foundDataSourceId);
} catch (error) {
console.error("Error fetching index pattern:", error);
}
Expand All @@ -167,7 +167,7 @@ function AddAnomalyDetector({
}
fetchData();
createEmbeddable();
}, [dataSourceId]);
}, [dataSourceId]);

const [isShowVis, setIsShowVis] = useState(false);
const [accordionsOpen, setAccordionsOpen] = useState({ modelFeatures: true });
Expand Down Expand Up @@ -465,7 +465,7 @@ function AddAnomalyDetector({

const getEverythingSuccessfulButton = (detectorId, shingleSize) => {
return (
<EuiText>
<EuiText size="s">
<p>
Attempting to initialize the detector with historical data. This
initializing process takes approximately 1 minute if you have data in
Expand Down Expand Up @@ -586,9 +586,9 @@ function AddAnomalyDetector({
{(formikProps) => (
<>
<EuiFlyoutHeader hasBorder>
<EuiTitle>
<EuiText size="s">
<h2 id="add-anomaly-detector__title">Add anomaly detector</h2>
</EuiTitle>
</EuiText>
</EuiFlyoutHeader>
<EuiFlyoutBody>
{associationLimitReached ? (
Expand Down Expand Up @@ -669,7 +669,7 @@ function AddAnomalyDetector({
isOpen={accordionsOpen.detectorDetails}
onToggle={() => onAccordionToggle('detectorDetails')}
subTitle={
<EuiText size="m">
<EuiText size="s">
<p>
Detector interval: {intervalValue} minute(s);
Window delay: {delayValue} minute(s)
Expand Down
9 changes: 4 additions & 5 deletions public/pages/ConfigureModel/containers/ConfigureModel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@ import {
EuiFlexGroup,
EuiPage,
EuiSmallButton,
EuiTitle,
EuiSmallButtonEmpty,
EuiSpacer,
EuiText,
Expand Down Expand Up @@ -298,19 +297,19 @@ export function ConfigureModel(props: ConfigureModelProps) {
<EuiPageBody>
<EuiPageHeader>
<EuiPageHeaderSection>
<EuiTitle
size="l"
<EuiText
size="s"
data-test-subj="configureOrEditModelConfigurationTitle"
>
<h1>
{props.isEdit
? 'Edit model configuration'
: 'Configure model'}{' '}
</h1>
</EuiTitle>
</EuiText>
<Fragment>
<EuiSpacer size="s" />
<EuiText>
<EuiText size="s">
Set the index fields that you want to find anomalies for
by defining the model features. You can also set other
model parameters such as category field and shingle size
Expand Down
3 changes: 1 addition & 2 deletions public/pages/ConfigureModel/containers/SampleAnomalies.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -205,7 +205,7 @@ export function SampleAnomalies(props: SampleAnomaliesProps) {
>
<EuiFlexGroup>
<EuiFlexItem>
<EuiText>
<EuiText size="s">
{firstPreview
? 'You can preview how your anomalies may look like from sample feature output and adjust the feature settings as needed.'
: 'Use the sample data as a reference to fine tune settings. To see the latest preview with your adjustments, click "Refresh preview". Once you are done with your edits, save your changes and run the detector to see real time anomalies for the new data set.'}{' '}
Expand All @@ -231,7 +231,6 @@ export function SampleAnomalies(props: SampleAnomaliesProps) {
getSampleAnomalies();
}
}}
fill={!firstPreview}
isLoading={isLoading}
>
{firstPreview ? 'Preview anomalies' : 'Refresh preview'}
Expand Down
30 changes: 17 additions & 13 deletions public/pages/ConfigureModel/containers/__tests__/__snapshots__/ConfigureModel.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,18 +14,20 @@ exports[`<ConfigureModel /> spec creating model configuration renders the compon
<div
class="euiPageHeaderSection"
>
<h1
class="euiTitle euiTitle--large"
<div
class="euiText euiText--small"
data-test-subj="configureOrEditModelConfigurationTitle"
>
Configure model

</h1>
<h1>
Configure model

</h1>
</div>
<div
class="euiSpacer euiSpacer--s"
/>
<div
class="euiText euiText--medium"
class="euiText euiText--small"
>
Set the index fields that you want to find anomalies for by defining the model features. You can also set other model parameters such as category field and shingle size for more granular views. After you set the model features and other optional parameters, you can preview your anomalies from a sample feature output.

Expand Down Expand Up @@ -910,7 +912,7 @@ exports[`<ConfigureModel /> spec creating model configuration renders the compon
class="euiFlexItem"
>
<div
class="euiText euiText--medium"
class="euiText euiText--small"
>
You can preview how your anomalies may look like from sample feature output and adjust the feature settings as needed.

Expand Down Expand Up @@ -995,18 +997,20 @@ exports[`<ConfigureModel /> spec editing model configuration renders the compone
<div
class="euiPageHeaderSection"
>
<h1
class="euiTitle euiTitle--large"
<div
class="euiText euiText--small"
data-test-subj="configureOrEditModelConfigurationTitle"
>
Edit model configuration

</h1>
<h1>
Edit model configuration

</h1>
</div>
<div
class="euiSpacer euiSpacer--s"
/>
<div
class="euiText euiText--medium"
class="euiText euiText--small"
>
Set the index fields that you want to find anomalies for by defining the model features. You can also set other model parameters such as category field and shingle size for more granular views. After you set the model features and other optional parameters, you can preview your anomalies from a sample feature output.

Expand Down
7 changes: 4 additions & 3 deletions public/pages/Dashboard/Components/AnomaliesLiveChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -237,9 +237,9 @@ export const AnomaliesLiveChart = (props: AnomaliesLiveChartProps) => {
</h3>
</EuiTitle>
}
subTitle={`Live anomaly results across detectors for the last 30 minutes.
'The results refresh every 1 minute.
'For each detector, if an anomaly occurrence is detected at the end of the detector interval,
subTitle={`Live anomaly results across detectors for the last 30 minutes.
'The results refresh every 1 minute.
'For each detector, if an anomaly occurrence is detected at the end of the detector interval,
'you will see a bar representing its anomaly grade.`}
actions={[fullScreenButton()]}
contentPanelClassName={isFullScreen ? 'full-screen' : undefined}
Expand All @@ -255,6 +255,7 @@ export const AnomaliesLiveChart = (props: AnomaliesLiveChartProps) => {
</EuiFlexGroup>
) : !hasLatestAnomalyResult ? (
<EuiText
size="s"
style={{
color: '#666666',
paddingTop: '12px',
Expand Down
26 changes: 14 additions & 12 deletions public/pages/Dashboard/Components/EmptyDashboard/EmptyDashboard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
* GitHub history for details.
*/

import { EuiEmptyPrompt, EuiLink, EuiIcon } from '@elastic/eui';
import { EuiEmptyPrompt, EuiLink, EuiIcon, EuiText } from '@elastic/eui';
import React, { Component, Fragment } from 'react';
import { CreateDetectorButtons } from '../../../../components/CreateDetectorButtons/CreateDetectorButtons';
import { BASE_DOCS_LINK } from '../../../../utils/constants';
Expand All @@ -22,17 +22,19 @@ export class EmptyDashboard extends Component<{}, {}> {
title={<h2>You have no detectors</h2>}
body={
<Fragment>
<p>Create detector first to detect anomalies in your data.</p>
<p>
Dashboard will generate insights on the anomalies across all of
your detectors.
</p>
<p>
Read about{' '}
<EuiLink href={`${BASE_DOCS_LINK}/ad`} target="_blank">
Get started with Anomaly detection
</EuiLink>{' '}
</p>
<EuiText size="s">
<p>Create detector first to detect anomalies in your data.</p>
<p>
Dashboard will generate insights on the anomalies across all of
your detectors.
</p>
<p>
Read about{' '}
<EuiLink href={`${BASE_DOCS_LINK}/ad`} target="_blank">
Get started with Anomaly detection
</EuiLink>{' '}
</p>
</EuiText>
</Fragment>
}
actions={<CreateDetectorButtons />}
Expand Down
Loading
Loading