Skip to content

Commit

Permalink
[Look&Feel] Consistency and density improvements (opensearch-project#836
Browse files Browse the repository at this point in the history
)

* Changed context menus to be small

Signed-off-by: Dan Dong <[email protected]>

* Updated tabs to be small

Signed-off-by: Dan Dong <[email protected]>

* Updated paragraph text to be EuiText size="s"

Signed-off-by: Dan Dong <[email protected]>

* Updated semantic headers

Signed-off-by: Dan Dong <[email protected]>

* Updated primary buttons

Signed-off-by: Dan Dong <[email protected]>

* Reverted unintended changes

Signed-off-by: Dan Dong <[email protected]>

* Updated snapshot testing

Signed-off-by: Dan Dong <[email protected]>

* Fixed merge conflict

Signed-off-by: Dan Dong <[email protected]>

* Updated snapshot tests

---------

Signed-off-by: Dan Dong <[email protected]>
  • Loading branch information
danieldong51 authored Aug 21, 2024
1 parent 356d8c7 commit 07908a0
Show file tree
Hide file tree
Showing 44 changed files with 451 additions and 315 deletions.
5 changes: 4 additions & 1 deletion public/components/CodeModal/CodeModal.tsx
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
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
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
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
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
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
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
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
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
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
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

0 comments on commit 07908a0

Please sign in to comment.