{
+ const [isTourSeen, setIsTourSeen] = useLocalStorage(KUBERNETES_TOUR_STORAGE_KEY, false);
+ const markTourAsSeen = () => setIsTourSeen(true);
+
+ return (
+
+
+ {i18n.translate('xpack.infra.homePage.kubernetesTour.text', {
+ defaultMessage:
+ 'Click here to see your infrastructure in different ways, including Kubernetes pods.',
+ })}
+
+ }
+ isStepOpen={!isTourSeen}
+ maxWidth={350}
+ onFinish={markTourAsSeen}
+ step={1}
+ stepsTotal={1}
+ title={i18n.translate('xpack.infra.homePage.kubernetesTour.title', {
+ defaultMessage: 'Want a different view?',
+ })}
+ anchorPosition="downCenter"
+ footerAction={
+
+ {i18n.translate('xpack.infra.homePage.kubernetesTour.dismiss', {
+ defaultMessage: 'Dismiss',
+ })}
+
+ }
+ >
+ {children}
+
+
+ );
+};
diff --git a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/waffle_inventory_switcher.tsx b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/waffle_inventory_switcher.tsx
index 6234dcc0bbf0b..e3ca9b770e2ef 100644
--- a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/waffle_inventory_switcher.tsx
+++ b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/waffle_inventory_switcher.tsx
@@ -124,6 +124,7 @@ export const WaffleInventorySwitcher: React.FC = () => {
data-test-subj={'openInventorySwitcher'}
onClick={openPopover}
label={i18n.translate('xpack.infra.waffle.showLabel', { defaultMessage: 'Show' })}
+ showKubernetesInfo={true}
>
{selectedText}
diff --git a/x-pack/test/functional/apps/infra/home_page.ts b/x-pack/test/functional/apps/infra/home_page.ts
index 1c0323808270d..54435f11a33e1 100644
--- a/x-pack/test/functional/apps/infra/home_page.ts
+++ b/x-pack/test/functional/apps/infra/home_page.ts
@@ -6,6 +6,7 @@
*/
import expect from '@kbn/expect';
+import { KUBERNETES_TOUR_STORAGE_KEY } from '@kbn/infra-plugin/public/pages/metrics/inventory_view/components/kubernetes_tour';
import { FtrProviderContext } from '../../ftr_provider_context';
import { DATES } from './constants';
@@ -59,10 +60,10 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
await pageObjects.common.navigateToApp('infraOps');
await pageObjects.infraHome.waitForLoading();
});
- after(
- async () =>
- await esArchiver.unload('x-pack/test/functional/es_archives/infra/metrics_and_logs')
- );
+ after(async () => {
+ await esArchiver.unload('x-pack/test/functional/es_archives/infra/metrics_and_logs');
+ await browser.removeLocalStorageItem(KUBERNETES_TOUR_STORAGE_KEY);
+ });
it('renders the correct page title', async () => {
await pageObjects.header.waitUntilLoadingHasFinished();
@@ -71,6 +72,26 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
expect(documentTitle).to.contain('Inventory - Infrastructure - Observability - Elastic');
});
+ it('renders the kubernetes tour component and allows user to dismiss it without seeing it again', async () => {
+ await pageObjects.header.waitUntilLoadingHasFinished();
+ const kubernetesTourText =
+ 'Click here to see your infrastructure in different ways, including Kubernetes pods.';
+ const ensureKubernetesTourVisible =
+ await pageObjects.infraHome.ensureKubernetesTourIsVisible();
+
+ expect(ensureKubernetesTourVisible).to.contain(kubernetesTourText);
+
+ // Persist after refresh
+ await browser.refresh();
+ await pageObjects.infraHome.waitForLoading();
+
+ expect(ensureKubernetesTourVisible).to.contain(kubernetesTourText);
+
+ await pageObjects.infraHome.clickDismissKubernetesTourButton();
+
+ await pageObjects.infraHome.ensureKubernetesTourIsClosed();
+ });
+
it('renders an empty data prompt for dates with no data', async () => {
await pageObjects.infraHome.goToTime(DATE_WITHOUT_DATA);
await pageObjects.infraHome.getNoMetricsDataPrompt();
diff --git a/x-pack/test/functional/apps/infra/hosts_view.ts b/x-pack/test/functional/apps/infra/hosts_view.ts
index 9975a2772a193..224a924b7c1fa 100644
--- a/x-pack/test/functional/apps/infra/hosts_view.ts
+++ b/x-pack/test/functional/apps/infra/hosts_view.ts
@@ -108,6 +108,7 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
before(async () => {
await esArchiver.load('x-pack/test/functional/es_archives/infra/metrics_and_logs');
await pageObjects.common.navigateToApp('infraOps');
+ await pageObjects.infraHome.clickDismissKubernetesTourButton();
await pageObjects.infraHostsView.clickTryHostViewBadge();
});
after(async () => {
@@ -126,6 +127,7 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
before(async () => {
await esArchiver.load('x-pack/test/functional/es_archives/infra/metrics_and_logs');
await loginWithReadOnlyUserAndNavigateToInfra();
+ await pageObjects.infraHome.clickDismissKubernetesTourButton();
await pageObjects.infraHostsView.clickTryHostViewBadge();
});
after(async () => {
diff --git a/x-pack/test/functional/page_objects/infra_home_page.ts b/x-pack/test/functional/page_objects/infra_home_page.ts
index cb01de3c596e3..a13c9a89ae0cb 100644
--- a/x-pack/test/functional/page_objects/infra_home_page.ts
+++ b/x-pack/test/functional/page_objects/infra_home_page.ts
@@ -376,5 +376,19 @@ export function InfraHomePageProvider({ getService, getPageObjects }: FtrProvide
async ensureSuggestionsPanelVisible() {
await testSubjects.find('infraSuggestionsPanel');
},
+
+ async ensureKubernetesTourIsVisible() {
+ const container = await testSubjects.find('infra-kubernetesTour-text');
+ const containerText = await container.getVisibleText();
+ return containerText;
+ },
+
+ async ensureKubernetesTourIsClosed() {
+ await testSubjects.missingOrFail('infra-kubernetesTour-text');
+ },
+
+ async clickDismissKubernetesTourButton() {
+ return await testSubjects.click('infra-kubernetesTour-dismiss');
+ },
};
}