Skip to content

Commit 07908a0

Browse files
danieldong51danieldong51
authored
[Look&Feel] Consistency and density improvements (#836)
* Changed context menus to be small Signed-off-by: Dan Dong <danieldong51@gmail.com> * Updated tabs to be small Signed-off-by: Dan Dong <danieldong51@gmail.com> * Updated paragraph text to be EuiText size="s" Signed-off-by: Dan Dong <danieldong51@gmail.com> * Updated semantic headers Signed-off-by: Dan Dong <danieldong51@gmail.com> * Updated primary buttons Signed-off-by: Dan Dong <danieldong51@gmail.com> * Reverted unintended changes Signed-off-by: Dan Dong <danieldong51@gmail.com> * Updated snapshot testing Signed-off-by: Dan Dong <danieldong51@gmail.com> * Fixed merge conflict Signed-off-by: Dan Dong <danieldong51@gmail.com> * Updated snapshot tests --------- Signed-off-by: Dan Dong <danieldong51@gmail.com>
1 parent 356d8c7 commit 07908a0

File tree

44 files changed

+451
-315
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

44 files changed

+451
-315
lines changed

‎public/components/CodeModal/CodeModal.tsx

+4-1
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import {
1717
EuiModalHeaderTitle,
1818
EuiOverlayMask,
1919
EuiCodeBlock,
20+
EuiText,
2021
} from '@elastic/eui';
2122

2223
interface CodeModalProps {
@@ -33,7 +34,9 @@ export const CodeModal = (props: CodeModalProps) => {
3334
<EuiModalHeader>
3435
<EuiModalHeaderTitle>
3536
<div>
36-
<p>{props.title}</p>
37+
<EuiText size="s">
38+
<h2>{props.title}</h2>
39+
</EuiText>
3740
{props.subtitle ? (
3841
<p className="modelSubtitle">{props.subtitle}</p>
3942
) : (

‎public/components/FeatureAnywhereContextMenu/AssociatedDetectors/components/ConfirmUnlinkDetectorModal/ConfirmUnlinkDetectorModal.tsx

+8-2
Original file line numberDiff line numberDiff line change
@@ -39,10 +39,16 @@ export const ConfirmUnlinkDetectorModal = (
3939
maxWidth={450}
4040
>
4141
<EuiModalHeader>
42-
<EuiModalHeaderTitle>{'Remove association?'}</EuiModalHeaderTitle>
42+
<EuiModalHeaderTitle>
43+
<EuiText size="s">
44+
<h2>
45+
{'Remove association?'}
46+
</h2>
47+
</EuiText>
48+
</EuiModalHeaderTitle>
4349
</EuiModalHeader>
4450
<EuiModalBody>
45-
<EuiText>
51+
<EuiText size="s">
4652
Removing association unlinks {props.detector.name} detector from the
4753
visualization but does not delete it. The detector association can
4854
be restored.

‎public/components/FeatureAnywhereContextMenu/AssociatedDetectors/components/EmptyAssociatedDetectorMessage/EmptyAssociatedDetectorMessage.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ export const EmptyAssociatedDetectorMessage = (props: EmptyDetectorProps) => (
2020
data-test-subj="emptyAssociatedDetectorFlyoutMessage"
2121
style={{ maxWidth: '45em' }}
2222
body={
23-
<EuiText>
23+
<EuiText size="s">
2424
<p>
2525
{props.isFilterApplied
2626
? FILTER_TEXT

‎public/components/FeatureAnywhereContextMenu/AssociatedDetectors/components/__tests__/__snapshots__/EmptyAssociatedDetectorMessage.test.tsx.snap

+2-2
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ exports[`ConfirmUnlinkDetectorModal spec renders the component with filter appli
2222
class="euiText euiText--medium"
2323
>
2424
<div
25-
class="euiText euiText--medium"
25+
class="euiText euiText--small"
2626
>
2727
<p>
2828
There are no detectors matching your search
@@ -56,7 +56,7 @@ exports[`ConfirmUnlinkDetectorModal spec renders the component with filter appli
5656
class="euiText euiText--medium"
5757
>
5858
<div
59-
class="euiText euiText--medium"
59+
class="euiText euiText--small"
6060
>
6161
<p>
6262
There are no anomaly detectors associated with test-title visualization.

‎public/components/FeatureAnywhereContextMenu/AssociatedDetectors/containers/AssociatedDetectors.tsx

+5-4
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import {
1515
EuiFlexItem,
1616
EuiFlexGroup,
1717
EuiCallOut,
18+
EuiText,
1819
} from '@elastic/eui';
1920
import { get, isEmpty } from 'lodash';
2021
import '../styles.scss';
@@ -85,7 +86,7 @@ function AssociatedDetectors({ embeddable, closeFlyout, setMode }) {
8586
const indexPattern = await getSavedObjectsClient().get('index-pattern', indexPatternId);
8687
const refs = indexPattern.references as References[];
8788
const foundDataSourceId = refs.find(ref => ref.type === 'data-source')?.id;
88-
setDataSourceId(foundDataSourceId);
89+
setDataSourceId(foundDataSourceId);
8990
} catch (error) {
9091
console.error("Error fetching index pattern:", error);
9192
}
@@ -270,7 +271,7 @@ function AssociatedDetectors({ embeddable, closeFlyout, setMode }) {
270271
getDetectorList(
271272
getAllDetectorsQueryParamsWithDataSourceId(dataSourceId)
272273
)
273-
);
274+
);
274275
};
275276

276277
const handleUnlinkDetectorAction = (detector: DetectorListItem) => {
@@ -334,11 +335,11 @@ function AssociatedDetectors({ embeddable, closeFlyout, setMode }) {
334335
onClose={closeFlyout}
335336
>
336337
<EuiFlyoutHeader hasBorder>
337-
<EuiTitle>
338+
<EuiText size="s">
338339
<h2 id="associated-detectors__title">
339340
Associated anomaly detectors
340341
</h2>
341-
</EuiTitle>
342+
</EuiText>
342343
</EuiFlyoutHeader>
343344
{associationLimitReached ? (
344345
<EuiCallOut

‎public/components/FeatureAnywhereContextMenu/CreateAnomalyDetector/AddAnomalyDetector.tsx

+6-6
Original file line numberDiff line numberDiff line change
@@ -141,7 +141,7 @@ function AddAnomalyDetector({
141141
const indexPattern = await getSavedObjectsClient().get('index-pattern', indexPatternId);
142142
const refs = indexPattern.references as References[];
143143
const foundDataSourceId = refs.find(ref => ref.type === 'data-source')?.id;
144-
setDataSourceId(foundDataSourceId);
144+
setDataSourceId(foundDataSourceId);
145145
} catch (error) {
146146
console.error("Error fetching index pattern:", error);
147147
}
@@ -167,7 +167,7 @@ function AddAnomalyDetector({
167167
}
168168
fetchData();
169169
createEmbeddable();
170-
}, [dataSourceId]);
170+
}, [dataSourceId]);
171171

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

466466
const getEverythingSuccessfulButton = (detectorId, shingleSize) => {
467467
return (
468-
<EuiText>
468+
<EuiText size="s">
469469
<p>
470470
Attempting to initialize the detector with historical data. This
471471
initializing process takes approximately 1 minute if you have data in
@@ -586,9 +586,9 @@ function AddAnomalyDetector({
586586
{(formikProps) => (
587587
<>
588588
<EuiFlyoutHeader hasBorder>
589-
<EuiTitle>
589+
<EuiText size="s">
590590
<h2 id="add-anomaly-detector__title">Add anomaly detector</h2>
591-
</EuiTitle>
591+
</EuiText>
592592
</EuiFlyoutHeader>
593593
<EuiFlyoutBody>
594594
{associationLimitReached ? (
@@ -669,7 +669,7 @@ function AddAnomalyDetector({
669669
isOpen={accordionsOpen.detectorDetails}
670670
onToggle={() => onAccordionToggle('detectorDetails')}
671671
subTitle={
672-
<EuiText size="m">
672+
<EuiText size="s">
673673
<p>
674674
Detector interval: {intervalValue} minute(s);
675675
Window delay: {delayValue} minute(s)

‎public/pages/ConfigureModel/containers/ConfigureModel.tsx

+4-5
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@ import {
1717
EuiFlexGroup,
1818
EuiPage,
1919
EuiSmallButton,
20-
EuiTitle,
2120
EuiSmallButtonEmpty,
2221
EuiSpacer,
2322
EuiText,
@@ -298,19 +297,19 @@ export function ConfigureModel(props: ConfigureModelProps) {
298297
<EuiPageBody>
299298
<EuiPageHeader>
300299
<EuiPageHeaderSection>
301-
<EuiTitle
302-
size="l"
300+
<EuiText
301+
size="s"
303302
data-test-subj="configureOrEditModelConfigurationTitle"
304303
>
305304
<h1>
306305
{props.isEdit
307306
? 'Edit model configuration'
308307
: 'Configure model'}{' '}
309308
</h1>
310-
</EuiTitle>
309+
</EuiText>
311310
<Fragment>
312311
<EuiSpacer size="s" />
313-
<EuiText>
312+
<EuiText size="s">
314313
Set the index fields that you want to find anomalies for
315314
by defining the model features. You can also set other
316315
model parameters such as category field and shingle size

‎public/pages/ConfigureModel/containers/SampleAnomalies.tsx

+1-2
Original file line numberDiff line numberDiff line change
@@ -205,7 +205,7 @@ export function SampleAnomalies(props: SampleAnomaliesProps) {
205205
>
206206
<EuiFlexGroup>
207207
<EuiFlexItem>
208-
<EuiText>
208+
<EuiText size="s">
209209
{firstPreview
210210
? 'You can preview how your anomalies may look like from sample feature output and adjust the feature settings as needed.'
211211
: '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.'}{' '}
@@ -231,7 +231,6 @@ export function SampleAnomalies(props: SampleAnomaliesProps) {
231231
getSampleAnomalies();
232232
}
233233
}}
234-
fill={!firstPreview}
235234
isLoading={isLoading}
236235
>
237236
{firstPreview ? 'Preview anomalies' : 'Refresh preview'}

‎public/pages/ConfigureModel/containers/__tests__/__snapshots__/ConfigureModel.test.tsx.snap

+17-13
Original file line numberDiff line numberDiff line change
@@ -14,18 +14,20 @@ exports[`<ConfigureModel /> spec creating model configuration renders the compon
1414
<div
1515
class="euiPageHeaderSection"
1616
>
17-
<h1
18-
class="euiTitle euiTitle--large"
17+
<div
18+
class="euiText euiText--small"
1919
data-test-subj="configureOrEditModelConfigurationTitle"
2020
>
21-
Configure model
22-
23-
</h1>
21+
<h1>
22+
Configure model
23+
24+
</h1>
25+
</div>
2426
<div
2527
class="euiSpacer euiSpacer--s"
2628
/>
2729
<div
28-
class="euiText euiText--medium"
30+
class="euiText euiText--small"
2931
>
3032
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.
3133
@@ -910,7 +912,7 @@ exports[`<ConfigureModel /> spec creating model configuration renders the compon
910912
class="euiFlexItem"
911913
>
912914
<div
913-
class="euiText euiText--medium"
915+
class="euiText euiText--small"
914916
>
915917
You can preview how your anomalies may look like from sample feature output and adjust the feature settings as needed.
916918
@@ -995,18 +997,20 @@ exports[`<ConfigureModel /> spec editing model configuration renders the compone
995997
<div
996998
class="euiPageHeaderSection"
997999
>
998-
<h1
999-
class="euiTitle euiTitle--large"
1000+
<div
1001+
class="euiText euiText--small"
10001002
data-test-subj="configureOrEditModelConfigurationTitle"
10011003
>
1002-
Edit model configuration
1003-
1004-
</h1>
1004+
<h1>
1005+
Edit model configuration
1006+
1007+
</h1>
1008+
</div>
10051009
<div
10061010
class="euiSpacer euiSpacer--s"
10071011
/>
10081012
<div
1009-
class="euiText euiText--medium"
1013+
class="euiText euiText--small"
10101014
>
10111015
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.
10121016

‎public/pages/Dashboard/Components/AnomaliesLiveChart.tsx

+4-3
Original file line numberDiff line numberDiff line change
@@ -237,9 +237,9 @@ export const AnomaliesLiveChart = (props: AnomaliesLiveChartProps) => {
237237
</h3>
238238
</EuiTitle>
239239
}
240-
subTitle={`Live anomaly results across detectors for the last 30 minutes.
241-
'The results refresh every 1 minute.
242-
'For each detector, if an anomaly occurrence is detected at the end of the detector interval,
240+
subTitle={`Live anomaly results across detectors for the last 30 minutes.
241+
'The results refresh every 1 minute.
242+
'For each detector, if an anomaly occurrence is detected at the end of the detector interval,
243243
'you will see a bar representing its anomaly grade.`}
244244
actions={[fullScreenButton()]}
245245
contentPanelClassName={isFullScreen ? 'full-screen' : undefined}
@@ -255,6 +255,7 @@ export const AnomaliesLiveChart = (props: AnomaliesLiveChartProps) => {
255255
</EuiFlexGroup>
256256
) : !hasLatestAnomalyResult ? (
257257
<EuiText
258+
size="s"
258259
style={{
259260
color: '#666666',
260261
paddingTop: '12px',

‎public/pages/Dashboard/Components/EmptyDashboard/EmptyDashboard.tsx

+14-12
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
* GitHub history for details.
1010
*/
1111

12-
import { EuiEmptyPrompt, EuiLink, EuiIcon } from '@elastic/eui';
12+
import { EuiEmptyPrompt, EuiLink, EuiIcon, EuiText } from '@elastic/eui';
1313
import React, { Component, Fragment } from 'react';
1414
import { CreateDetectorButtons } from '../../../../components/CreateDetectorButtons/CreateDetectorButtons';
1515
import { BASE_DOCS_LINK } from '../../../../utils/constants';
@@ -22,17 +22,19 @@ export class EmptyDashboard extends Component<{}, {}> {
2222
title={<h2>You have no detectors</h2>}
2323
body={
2424
<Fragment>
25-
<p>Create detector first to detect anomalies in your data.</p>
26-
<p>
27-
Dashboard will generate insights on the anomalies across all of
28-
your detectors.
29-
</p>
30-
<p>
31-
Read about{' '}
32-
<EuiLink href={`${BASE_DOCS_LINK}/ad`} target="_blank">
33-
Get started with Anomaly detection
34-
</EuiLink>{' '}
35-
</p>
25+
<EuiText size="s">
26+
<p>Create detector first to detect anomalies in your data.</p>
27+
<p>
28+
Dashboard will generate insights on the anomalies across all of
29+
your detectors.
30+
</p>
31+
<p>
32+
Read about{' '}
33+
<EuiLink href={`${BASE_DOCS_LINK}/ad`} target="_blank">
34+
Get started with Anomaly detection
35+
</EuiLink>{' '}
36+
</p>
37+
</EuiText>
3638
</Fragment>
3739
}
3840
actions={<CreateDetectorButtons />}

0 commit comments

Comments
 (0)