diff --git a/public/apps/configuration/_index.scss b/public/apps/configuration/_index.scss
index 57f25c45d..4914998cb 100644
--- a/public/apps/configuration/_index.scss
+++ b/public/apps/configuration/_index.scss
@@ -41,3 +41,45 @@
.limit-width-input {
max-width: 400px;
}
+
+.security-steps-diagram {
+ height: 114px;
+ position: relative;
+
+ &::before,
+ &::after {
+ content: "";
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ }
+
+ &::before {
+ mask: url("../../assets/get_started_layer_1.svg") center / contain no-repeat;
+ background: $euiColorDarkestShade;
+ }
+
+ &::after {
+ mask: url("../../assets/get_started_layer_2.svg") center / contain no-repeat;
+ background: $euiColorPrimary;
+ }
+
+ @supports not (mask: center / contain no-repeat) {
+ /* stylelint-disable property-no-vendor-prefix */
+ &::before,
+ &::after {
+ -webkit-mask-repeat: no-repeat;
+ -webkit-mask-size: contain;
+ -webkit-mask-position: center;
+ }
+
+ &::before {
+ -webkit-mask-image: url("../../assets/get_started_layer_1.svg");
+ }
+
+ &::after {
+ -webkit-mask-image: url("../../assets/get_started_layer_2.svg");
+ }
+ /* stylelint-enable property-no-vendor-prefix */
+ }
+}
diff --git a/public/apps/configuration/panels/get-started.tsx b/public/apps/configuration/panels/get-started.tsx
index fffa99570..b2c562e35 100644
--- a/public/apps/configuration/panels/get-started.tsx
+++ b/public/apps/configuration/panels/get-started.tsx
@@ -18,7 +18,6 @@ import {
EuiCode,
EuiFlexGroup,
EuiFlexItem,
- EuiImage,
EuiPageHeader,
EuiPanel,
EuiSpacer,
@@ -31,7 +30,6 @@ import { FormattedMessage } from '@osd/i18n/react';
import { flow } from 'lodash';
import { HashRouter as Router, Route } from 'react-router-dom';
import { AppDependencies } from '../../types';
-import securityStepsDiagram from '../../../assets/get_started.svg';
import { buildHashUrl, buildUrl } from '../utils/url-builder';
import { Action, ResourceType, RouteItem } from '../types';
import { API_ENDPOINT_CACHE, DocLinks } from '../constants';
@@ -189,16 +187,7 @@ export function GetStarted(props: AppDependencies) {
- {props.config.ui.backend_configurable && (
-
-
-
- )}
+ {props.config.ui.backend_configurable && }
diff --git a/public/apps/configuration/panels/test/__snapshots__/get-started.test.tsx.snap b/public/apps/configuration/panels/test/__snapshots__/get-started.test.tsx.snap
index 355d3817e..d7fd749e2 100644
--- a/public/apps/configuration/panels/test/__snapshots__/get-started.test.tsx.snap
+++ b/public/apps/configuration/panels/test/__snapshots__/get-started.test.tsx.snap
@@ -279,21 +279,8 @@ exports[`Get started (landing page) renders when backend configuration is enable
size="l"
/>
-
-
+ className="security-steps-diagram"
+ />
diff --git a/public/assets/get_started.svg b/public/assets/get_started.svg
index 842164f5c..babb3db47 100644
--- a/public/assets/get_started.svg
+++ b/public/assets/get_started.svg
@@ -1,78 +1 @@
-
-
\ No newline at end of file
+
diff --git a/public/assets/get_started_layer_1.svg b/public/assets/get_started_layer_1.svg
new file mode 100644
index 000000000..e1413f4db
--- /dev/null
+++ b/public/assets/get_started_layer_1.svg
@@ -0,0 +1 @@
+
diff --git a/public/assets/get_started_layer_2.svg b/public/assets/get_started_layer_2.svg
new file mode 100644
index 000000000..d060b85dc
--- /dev/null
+++ b/public/assets/get_started_layer_2.svg
@@ -0,0 +1 @@
+
diff --git a/test/jest_integration/jwt_auth.test.ts b/test/jest_integration/jwt_auth.test.ts
index 12c6d3ccc..0fee425be 100644
--- a/test/jest_integration/jwt_auth.test.ts
+++ b/test/jest_integration/jwt_auth.test.ts
@@ -234,7 +234,7 @@ describe('start OpenSearch Dashboards server', () => {
.sign(key);
const driver = getDriver(browser, options).build();
await driver.get(`http://localhost:5601/app/opensearch_dashboards_overview?token=${token}`);
- await driver.wait(until.elementsLocated(By.xpath(pageTitleXPath)), 10000);
+ await driver.wait(until.elementsLocated(By.xpath(pageTitleXPath)), 15000);
const cookie = await driver.manage().getCookies();
expect(cookie.length).toEqual(1);
@@ -259,7 +259,7 @@ describe('start OpenSearch Dashboards server', () => {
await driver.wait(
until.elementsLocated(By.xpath('//*[@data-test-subj="sendRequestButton"]')),
- 10000
+ 15000
);
const cookie = await driver.manage().getCookies();