mirror of
https://github.com/elastic/kibana.git
synced 2025-04-24 01:38:56 -04:00
[Infrastructure UI] Inventory page survey (#150233)
Closes #149672 ## Summary This PR adds a link and a toast navigating to a survey about k8s. ## Implementation details For adding the toast I used `EuiGlobalToastList` component and not the notification service because I want it to be rendered only in the scope of the page on a certain condition and it gives the same experience/layout. Using notification service will also keep it while navigating between different apps. I decided to keep the link and the toast in one component as they will be rendered under the same condition. ## Testing Go to inventory page Select in `Show` drop-down `Kubernetes Pods` You should see the link and the toast: <img width="2349" alt="image" src="https://user-images.githubusercontent.com/14139027/216448879-b65f8a22-500b-4103-9dc9-4c90e6518dcc.png"> If the toast is closed or the `Start Survey` link is clicked it should not appear again during the browser session. ~~⚠️ The survey will be updated [currently pointing to hosts view survey]~~ - Updated ✅
This commit is contained in:
parent
7423b70b8a
commit
927b477846
2 changed files with 92 additions and 1 deletions
|
@ -0,0 +1,90 @@
|
|||
/*
|
||||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
|
||||
* or more contributor license agreements. Licensed under the Elastic License
|
||||
* 2.0; you may not use this file except in compliance with the Elastic License
|
||||
* 2.0.
|
||||
*/
|
||||
|
||||
import { EuiButton, EuiFlexGroup, EuiFlexItem, EuiGlobalToastList } from '@elastic/eui';
|
||||
import React from 'react';
|
||||
import { FormattedMessage } from '@kbn/i18n-react';
|
||||
import useLocalStorage from 'react-use/lib/useLocalStorage';
|
||||
import { useWaffleOptionsContext } from '../hooks/use_waffle_options';
|
||||
|
||||
const KUBERNETES_TOAST_STORAGE_KEY = 'kubernetesToastKey';
|
||||
const KUBERNETES_FEEDBACK_LINK = 'https://ela.st/k8s-feedback';
|
||||
|
||||
export const SurveyKubernetes = () => {
|
||||
const { nodeType } = useWaffleOptionsContext();
|
||||
const podNodeType: typeof nodeType = 'pod';
|
||||
|
||||
const [isToastSeen, setIsToastSeen] = useLocalStorage(KUBERNETES_TOAST_STORAGE_KEY, false);
|
||||
const markToastAsSeen = () => setIsToastSeen(true);
|
||||
|
||||
return (
|
||||
<>
|
||||
{nodeType === podNodeType && (
|
||||
<>
|
||||
<EuiButton
|
||||
href={KUBERNETES_FEEDBACK_LINK}
|
||||
target="_blank"
|
||||
color="warning"
|
||||
iconType="editorComment"
|
||||
data-test-subj="infra-kubernetes-feedback-link"
|
||||
>
|
||||
<FormattedMessage
|
||||
id="xpack.infra.homePage.tellUsWhatYouThinkK8sLink"
|
||||
defaultMessage="Tell us what you think! (K8s)"
|
||||
/>
|
||||
</EuiButton>
|
||||
{!isToastSeen && (
|
||||
<EuiGlobalToastList
|
||||
toastLifeTimeMs={Infinity}
|
||||
dismissToast={markToastAsSeen}
|
||||
toasts={[
|
||||
{
|
||||
id: 'k8s-toast',
|
||||
title: (
|
||||
<FormattedMessage
|
||||
id="xpack.infra.homePage.kubernetesToastTitle"
|
||||
defaultMessage="We need your help!"
|
||||
/>
|
||||
),
|
||||
color: 'primary',
|
||||
iconType: 'help',
|
||||
toastLifeTimeMs: 0x7fffffff, // Biggest possible lifetime because we control when it should be visible using isToastSeen
|
||||
text: (
|
||||
<>
|
||||
<p>
|
||||
<FormattedMessage
|
||||
id="xpack.infra.homePage.kubernetesToastText"
|
||||
defaultMessage="Help us design your Kubernetes experience by completing a feedback survey."
|
||||
/>
|
||||
</p>
|
||||
<EuiFlexGroup justifyContent="flexEnd" gutterSize="s">
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiButton
|
||||
data-test-subj="infra-toast-kubernetes-survey-start"
|
||||
href={KUBERNETES_FEEDBACK_LINK}
|
||||
target="_blank"
|
||||
onClickCapture={markToastAsSeen}
|
||||
size="s"
|
||||
>
|
||||
<FormattedMessage
|
||||
id="xpack.infra.homePage.kubernetesToastButton"
|
||||
defaultMessage="Start survey"
|
||||
/>
|
||||
</EuiButton>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</>
|
||||
),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
|
@ -23,6 +23,7 @@ import { inventoryTitle } from '../../../translations';
|
|||
import { SavedViews } from './components/saved_views';
|
||||
import { SnapshotContainer } from './components/snapshot_container';
|
||||
import { fullHeightContentStyles } from '../../../page_template.styles';
|
||||
import { SurveyKubernetes } from './components/survey_kubernetes';
|
||||
|
||||
export const SnapshotPage = () => {
|
||||
const {
|
||||
|
@ -59,7 +60,7 @@ export const SnapshotPage = () => {
|
|||
hasData={metricIndicesExist}
|
||||
pageHeader={{
|
||||
pageTitle: inventoryTitle,
|
||||
rightSideItems: [<SavedViews />],
|
||||
rightSideItems: [<SavedViews />, <SurveyKubernetes />],
|
||||
}}
|
||||
pageSectionProps={{
|
||||
contentProps: {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue