Skip to content

Commit

Permalink
wip
Browse files Browse the repository at this point in the history
  • Loading branch information
@shahzad31
shahzad31 committed Dec 19, 2024
1 parent dec31c5 commit 9132d33
Show file tree
Hide file tree
Showing 53 changed files with 739 additions and 716 deletions.
2 changes: 1 addition & 1 deletion packages/kbn-babel-preset/styled_components_files.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ module.exports = {
/packages[\/\\]kbn-ui-shared-deps-npm[\/\\]/,
/packages[\/\\]kbn-ui-shared-deps-src[\/\\]/,
/src[\/\\]plugins[\/\\]kibana_react[\/\\]/,
/x-pack[\/\\]solutions[\/\\]observability[\/\\]plugins[\/\\](exploratory_view|investigate|investigate_app|observability|observability_ai_assistant_app|observability_ai_assistant_management|observability_solution|serverless_observability|streams|streams_app|synthetics|uptime|ux)[\/\\]/,
/x-pack[\/\\]platform[\/\\]packages[\/\\]shared[\/\\]kbn-elastic-assistant[\/\\]/,
/x-pack[\/\\]plugins[\/\\]fleet[\/\\]/,
/x-pack[\/\\]plugins[\/\\]observability_solution[\/\\]observability_shared[\/\\]/,
Expand All @@ -30,7 +31,6 @@ module.exports = {
/x-pack[\/\\]solutions[\/\\]observability[\/\\]plugins[\/\\]serverless_observability[\/\\]/,
/x-pack[\/\\]solutions[\/\\]observability[\/\\]plugins[\/\\]streams_app[\/\\]/,
/x-pack[\/\\]solutions[\/\\]observability[\/\\]plugins[\/\\]streams[\/\\]/,
/x-pack[\/\\]solutions[\/\\]observability[\/\\]plugins[\/\\]synthetics[\/\\]/,
/x-pack[\/\\]solutions[\/\\]observability[\/\\]plugins[\/\\]uptime[\/\\]/,
/x-pack[\/\\]solutions[\/\\]observability[\/\\]plugins[\/\\]ux[\/\\]/,
/x-pack[\/\\]solutions[\/\\]security[\/\\]packages[\/\\]ecs_data_quality_dashboard[\/\\]/,
Expand Down
3 changes: 2 additions & 1 deletion x-pack/solutions/observability/plugins/synthetics/kibana.jsonc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,8 @@
"bfetch",
"uiActions",
"unifiedSearch",
"presentationUtil"
"presentationUtil",
"charts"
],
"optionalPlugins": [
"cloud",
Expand Down
14 changes: 7 additions & 7 deletions ...ability/plugins/synthetics/public/apps/synthetics/components/certificates/cert_search.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,10 @@

import React, { ChangeEvent, useState } from 'react';
import { EuiFieldSearch } from '@elastic/eui';
import styled from 'styled-components';
import useDebounce from 'react-use/lib/useDebounce';
import { css } from '@emotion/react';
import * as labels from './translations';

const WrapFieldSearch = styled('div')`
max-width: 700px;
`;

interface Props {
setSearch: (val: string) => void;
}
Expand All @@ -35,7 +31,11 @@ export const CertificateSearch: React.FC<Props> = ({ setSearch }) => {
);

return (
<WrapFieldSearch>
<div
css={css`
max-width: 700px;
`}
>
<EuiFieldSearch
data-test-subj="uptimeCertSearch"
placeholder={labels.SEARCH_CERTS}
Expand All @@ -44,6 +44,6 @@ export const CertificateSearch: React.FC<Props> = ({ setSearch }) => {
aria-label={labels.SEARCH_CERTS}
fullWidth={true}
/>
</WrapFieldSearch>
</div>
);
};
51 changes: 37 additions & 14 deletions ...ability/plugins/synthetics/public/apps/synthetics/components/certificates/cert_status.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,9 @@

import React from 'react';
import moment from 'moment';
import styled from 'styled-components';
import { EuiHealth, EuiText } from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n-react';
import { css } from '@emotion/react';
import { useCertStatus } from './use_cert_status';
import { CERT_STATUS, DYNAMIC_SETTINGS_DEFAULTS } from '../../../../../common/constants';
import { Cert } from '../../../../../common/runtime_types';
Expand All @@ -19,11 +19,6 @@ interface Props {
cert: Cert;
}

const DateText = styled(EuiText)`
display: inline-block;
margin-left: 5px;
`;

export const CertStatus: React.FC<Props> = ({ cert }) => {
const certStatus = useCertStatus(cert?.not_after, cert?.not_before);

Expand All @@ -35,9 +30,16 @@ export const CertStatus: React.FC<Props> = ({ cert }) => {
<span>
{labels.EXPIRES_SOON}
{' '}
<DateText color="subdued" size="xs">
<EuiText
color="subdued"
size="xs"
css={css`
display: inline-block;
margin-left: 5px;
`}
>
{relativeDate}
</DateText>
</EuiText>
</span>
</EuiHealth>
);
Expand All @@ -48,9 +50,16 @@ export const CertStatus: React.FC<Props> = ({ cert }) => {
<span>
{labels.EXPIRED}
{' '}
<DateText color="subdued" size="xs">
<EuiText
css={css`
display: inline-block;
margin-left: 5px;
`}
color="subdued"
size="xs"
>
{relativeDate}
</DateText>
</EuiText>
</span>
</EuiHealth>
);
Expand All @@ -65,9 +74,16 @@ export const CertStatus: React.FC<Props> = ({ cert }) => {
<EuiHealth color="danger">
<span>
{labels.TOO_OLD}
<DateText color="subdued" size="xs">
<EuiText
css={css`
display: inline-block;
margin-left: 5px;
`}
color="subdued"
size="xs"
>
{oldRelativeDate}
</DateText>
</EuiText>
</span>
</EuiHealth>
);
Expand All @@ -80,7 +96,14 @@ export const CertStatus: React.FC<Props> = ({ cert }) => {
<span>
{labels.OK}
{' '}
<DateText color="subdued" size="xs">
<EuiText
css={css`
display: inline-block;
margin-left: 5px;
`}
color="subdued"
size="xs"
>
<FormattedMessage
id="xpack.synthetics.certs.status.ok.label"
defaultMessage=" for {okRelativeDate}"
Expand All @@ -89,7 +112,7 @@ export const CertStatus: React.FC<Props> = ({ cert }) => {
okRelativeDate,
}}
/>
</DateText>
</EuiText>
</span>
</EuiHealth>
);
Expand Down
16 changes: 9 additions & 7 deletions ...ity/plugins/synthetics/public/apps/synthetics/components/certificates/fingerprint_col.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,22 +7,24 @@

import React from 'react';
import { EuiButtonEmpty, EuiButtonIcon, EuiCopy, EuiToolTip } from '@elastic/eui';
import styled from 'styled-components';
import { css } from '@emotion/react';
import { Cert } from '../../../../../common/runtime_types';
import { COPY_FINGERPRINT } from './translations';

const StyledSpan = styled.span`
margin-right: 8px;
`;

interface Props {
cert: Cert;
}

export const FingerprintCol: React.FC<Props> = ({ cert }) => {
const ShaComponent = ({ text, val }: { text: string; val: string }) => {
return (
<StyledSpan data-test-subj={val} className="eui-textNoWrap">
<span
css={css`
margin-right: 8px;
`}
data-test-subj={val}
className="eui-textNoWrap"
>
<EuiToolTip content={val}>
<EuiButtonEmpty data-test-subj="syntheticsShaComponentButton" flush="right">
{text}{' '}
Expand All @@ -39,7 +41,7 @@ export const FingerprintCol: React.FC<Props> = ({ cert }) => {
/>
)}
</EuiCopy>
</StyledSpan>
</span>
);
};
return (
Expand Down
14 changes: 1 addition & 13 deletions ...etics/public/apps/synthetics/components/common/page_template/synthetics_page_template.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,25 +7,13 @@

import { LazyObservabilityPageTemplateProps } from '@kbn/observability-shared-plugin/public';
import React from 'react';
import { euiStyled } from '@kbn/kibana-react-plugin/common';
import { useKibana } from '@kbn/kibana-react-plugin/public';

import { ClientPluginsStart } from '../../../../../plugin';

export const WrappedPageTemplate = (props: LazyObservabilityPageTemplateProps) => {
export const SyntheticsPageTemplateComponent = (props: LazyObservabilityPageTemplateProps) => {
const { observabilityShared } = useKibana<ClientPluginsStart>().services;
const PageTemplateComponent = observabilityShared.navigation.PageTemplate;

return <PageTemplateComponent {...props} />;
};

export const SyntheticsPageTemplateComponent = euiStyled(WrappedPageTemplate)`
&&& {
.euiPageHeaderContent__top {
flex-wrap: wrap;
.euiTitle {
min-width: 160px;
}
}
}
`;
29 changes: 15 additions & 14 deletions ...thetics/public/apps/synthetics/components/common/screenshot/journey_screenshot_dialog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,8 @@ import {
EuiOutsideClickDetector,
useIsWithinMaxBreakpoint,
} from '@elastic/eui';
import { euiStyled } from '@kbn/kibana-react-plugin/common';

import { css } from '@emotion/react';
import { SYNTHETICS_API_URLS } from '../../../../../../common/constants';
import { SyntheticsSettingsContext } from '../../../contexts';
import { useRetrieveStepImage } from '../monitor_test_result/use_retrieve_step_image';
Expand Down Expand Up @@ -118,7 +118,19 @@ export const JourneyScreenshotDialog = ({
}}
onKeyDown={onKeyDown}
>
<ModalBodyStyled css={{ display: 'flex' }}>
<EuiModalBody
css={css`
display: flex;
&&& {
& > div {
display: flex;
justify-content: center;
align-items: center;
margin-top: 24px;
}
}
`}
>
<ScreenshotImage
label={i18n.translate('xpack.synthetics.monitor.screenshotImageLabel', {
defaultMessage: '"{stepName}", {stepNumber} of {totalSteps}',
Expand All @@ -134,7 +146,7 @@ export const JourneyScreenshotDialog = ({
hasBorder={false}
size={'full'}
/>
</ModalBodyStyled>
</EuiModalBody>

<EuiModalFooter
css={{
Expand Down Expand Up @@ -221,17 +233,6 @@ export const JourneyScreenshotDialog = ({
) : null;
};

const ModalBodyStyled = euiStyled(EuiModalBody)`
&&& {
& > div {
display: flex;
justify-content: center;
align-items: center;
margin-top: 24px;
}
}
`;

export const getScreenshotUrl = ({
basePath,
checkGroup,
Expand Down
27 changes: 14 additions & 13 deletions ...synthetics/public/apps/synthetics/components/common/step_field_trend/step_field_trend.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,9 @@ import { EuiButton } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import moment from 'moment';
import { AllSeries, createExploratoryViewUrl } from '@kbn/exploratory-view-plugin/public';
import { euiStyled } from '@kbn/kibana-react-plugin/common';

import { useKibana } from '@kbn/kibana-react-plugin/public';
import { css } from '@emotion/react';
import { ClientPluginsStart } from '../../../../../plugin';
import { SYNTHETICS_INDEX_PATTERN } from '../../../../../../common/constants';
import { JourneyStep } from '../../../../../../common/runtime_types';
Expand Down Expand Up @@ -66,7 +67,17 @@ export function StepFieldTrend({
);

return (
<Wrapper>
<div
css={css`
height: 200px;
width: 400px;
&&& {
.expExpressionRenderer__expression {
padding-bottom: 0 !important;
}
}
`}
>
<EmbeddableExpView
title={title}
appendTitle={
Expand All @@ -89,20 +100,10 @@ export function StepFieldTrend({
}}
withActions={false}
/>
</Wrapper>
</div>
);
}

export const EXPLORE_LABEL = i18n.translate('xpack.synthetics.synthetics.markers.explore', {
defaultMessage: 'Explore',
});

const Wrapper = euiStyled.div`
height: 200px;
width: 400px;
&&& {
.expExpressionRenderer__expression {
padding-bottom: 0 !important;
}
}
`;
24 changes: 12 additions & 12 deletions ...ins/synthetics/public/apps/synthetics/components/getting_started/getting_started_page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,8 @@ import { useDispatch, useSelector } from 'react-redux';
import { useHistory } from 'react-router-dom';
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n-react';
import styled from 'styled-components';
import { useKibana } from '@kbn/kibana-react-plugin/public';
import { css } from '@emotion/react';
import { useBreadcrumbs, useEnablement, useLocations } from '../../hooks';
import { usePrivateLocationsAPI } from '../settings/private_locations/hooks/use_locations_api';
import { LoadingState } from '../monitors_page/overview/overview/monitor_detail_flyout';
Expand Down Expand Up @@ -89,7 +89,16 @@ export const GettingStartedPage = () => {
}, [setScreenContext, hasNoLocations, locations]);

return !loading ? (
<Wrapper>
<div
css={css`
&&& {
.euiEmptyPrompt__content {
max-width: 40em;
padding: 0;
}
}
`}
>
{hasNoLocations ? (
<GettingStartedOnPrem />
) : (
Expand Down Expand Up @@ -120,7 +129,7 @@ export const GettingStartedPage = () => {
footer={<GettingStartedLink />}
/>
)}
</Wrapper>
</div>
) : (
<LoadingState />
);
Expand Down Expand Up @@ -205,15 +214,6 @@ export const GettingStartedLink = () => (
</>
);

const Wrapper = styled.div`
&&& {
.euiEmptyPrompt__content {
max-width: 40em;
padding: 0;
}
}
`;

const FOR_MORE_INFO_LABEL = i18n.translate('xpack.synthetics.gettingStarted.forMoreInfo', {
defaultMessage: 'For more information, read our',
});
Expand Down
Loading

0 comments on commit 9132d33

Please sign in to comment.