Skip to content

Commit

Permalink
[Security Solution] AI settings (elastic#184678)
Browse files Browse the repository at this point in the history
## Summary
elastic/security-team#9222
<img width="2535" alt="Screenshot 2024-06-23 at 11 30 15"
src="https://github.com/elastic/kibana/assets/6295984/e47c4cc4-6786-4147-a6f8-e3b371d64e40">
<img width="2534" alt="Screenshot 2024-06-23 at 11 30 54"
src="https://github.com/elastic/kibana/assets/6295984/7d6f8f17-a713-4c38-8a2e-369f8548426e">
<img width="2537" alt="Screenshot 2024-06-23 at 11 37 11"
src="https://github.com/elastic/kibana/assets/6295984/c6632fff-0d01-4462-b5f1-c4dc3b2750dc">
<img width="2531" alt="Screenshot 2024-06-25 at 13 36 19"
src="https://github.com/elastic/kibana/assets/6295984/d3d6f6a1-02d5-40cc-9119-09de112d53cd">

<img width="2531" alt="Screenshot 2024-06-25 at 13 33 59"
src="https://github.com/elastic/kibana/assets/6295984/742a57ff-9ec0-4fe6-868e-810681ff1795">
<img width="2534" alt="Screenshot 2024-06-23 at 11 40 31"
src="https://github.com/elastic/kibana/assets/6295984/85e323d2-6fdf-40cd-9696-4c8c549200a3">
<img width="2535" alt="Screenshot 2024-06-23 at 11 41 23"
src="https://github.com/elastic/kibana/assets/6295984/e02fdee2-dd57-45b6-8fef-b75f535c96fc">

Knowledge base:
elastic#186847


### Checklist

Delete any items that are not applicable to this PR.

- [x] Any text added follows [EUI's writing
guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses
sentence case text and includes [i18n
support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)
- [ ]
[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)
was added for features that require explanation or tutorials
- [ ] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
  • Loading branch information
angorayc authored Jun 28, 2024
1 parent c026264 commit 72e1d11
Show file tree
Hide file tree
Showing 98 changed files with 5,097 additions and 1,168 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
import React, { useEffect } from 'react';
import { i18n } from '@kbn/i18n';
import {
EuiButton,
EuiCallOut,
EuiCard,
EuiFlexGrid,
Expand Down Expand Up @@ -86,32 +87,48 @@ export function AiAssistantSelectionPage() {
<EuiSpacer size="s" />
</>
) : null}
<EuiLink
data-test-subj="pluginsAiAssistantSelectionPageDocumentationLink"
external
target="_blank"
href="https://www.elastic.co/guide/en/observability/current/obs-ai-assistant.html"
<p>
{i18n.translate(
'aiAssistantManagementSelection.aiAssistantSelectionPage.obsAssistant.documentationLinkDescription',
{ defaultMessage: 'For more info, see our' }
)}{' '}
<EuiLink
data-test-subj="pluginsAiAssistantSelectionPageDocumentationLink"
external
target="_blank"
href="https://www.elastic.co/guide/en/observability/current/obs-ai-assistant.html"
>
{i18n.translate(
'aiAssistantManagementSelection.aiAssistantSelectionPage.obsAssistant.documentationLinkLabel',
{ defaultMessage: 'documentation' }
)}
</EuiLink>
</p>
<EuiButton
iconType="gear"
data-test-subj="pluginsAiAssistantSelectionPageButton"
onClick={() =>
navigateToApp('management', {
path: 'kibana/observabilityAiAssistantManagement',
})
}
>
{i18n.translate(
'aiAssistantManagementSelection.aiAssistantSettingsPage.obsAssistant.documentationLinkLabel',
{ defaultMessage: 'Documentation' }
'aiAssistantManagementSelection.aiAssistantSelectionPage.obsAssistant.manageSettingsButtonLabel',
{ defaultMessage: 'Manage Settings' }
)}
</EuiLink>
</EuiButton>
</div>
}
display="plain"
hasBorder
icon={<EuiIcon size="l" type="logoObservability" />}
icon={<EuiIcon size="xxl" type="logoObservability" />}
isDisabled={!observabilityAIAssistantEnabled}
layout="horizontal"
title={i18n.translate(
'aiAssistantManagementSelection.aiAssistantSelectionPage.observabilityLabel',
{ defaultMessage: 'Elastic AI Assistant for Observability' }
)}
titleSize="xs"
onClick={() =>
navigateToApp('management', { path: 'kibana/observabilityAiAssistantManagement' })
}
/>
</EuiFlexItem>
<EuiFlexItem grow>
Expand All @@ -135,32 +152,46 @@ export function AiAssistantSelectionPage() {
<EuiSpacer size="s" />
</>
) : null}
<EuiLink
data-test-subj="securityAiAssistantSelectionPageDocumentationLink"
external
target="_blank"
href="https://www.elastic.co/guide/en/security/current/security-assistant.html"
<p>
{i18n.translate(
'aiAssistantManagementSelection.aiAssistantSelectionPage.securityAssistant.documentationLinkDescription',
{ defaultMessage: 'For more info, see our' }
)}{' '}
<EuiLink
data-test-subj="securityAiAssistantSelectionPageDocumentationLink"
external
target="_blank"
href="https://www.elastic.co/guide/en/security/current/security-assistant.html"
>
{i18n.translate(
'aiAssistantManagementSelection.aiAssistantSettingsPage.securityAssistant.documentationLinkLabel',
{ defaultMessage: 'documentation' }
)}
</EuiLink>
</p>
<EuiButton
data-test-subj="pluginsAiAssistantSelectionPageButton"
iconType="gear"
onClick={() =>
navigateToApp('management', { path: 'kibana/securityAiAssistantManagement' })
}
>
{i18n.translate(
'aiAssistantManagementSelection.aiAssistantSettingsPage.securityAssistant.documentationLinkLabel',
{ defaultMessage: 'Documentation' }
'aiAssistantManagementSelection.aiAssistantSelectionPage.securityAssistant.manageSettingsButtonLabel',
{ defaultMessage: 'Manage Settings' }
)}
</EuiLink>
</EuiButton>
</div>
}
display="plain"
hasBorder
icon={<EuiIcon size="l" type="logoSecurity" />}
icon={<EuiIcon size="xxl" type="logoSecurity" />}
isDisabled={!securityAIAssistantEnabled}
layout="horizontal"
title={i18n.translate(
'aiAssistantManagementSelection.aiAssistantSelectionPage.securityLabel',
{ defaultMessage: 'Elastic AI Assistant for Security' }
)}
titleSize="xs"
onClick={() =>
navigateToApp('management', { path: 'kibana/securityAiAssistantManagement' })
}
/>
</EuiFlexItem>
</EuiFlexGrid>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ interface OwnProps {
setChatHistoryVisible?: React.Dispatch<React.SetStateAction<boolean>>;
onConversationSelected: ({ cId, cTitle }: { cId: string; cTitle: string }) => void;
conversations: Record<string, Conversation>;
conversationsLoaded: boolean;
refetchConversationsState: () => Promise<void>;
onConversationCreate: () => Promise<void>;
isAssistantEnabled: boolean;
Expand All @@ -69,6 +70,7 @@ export const AssistantHeaderFlyout: React.FC<Props> = ({
onCloseFlyout,
onConversationSelected,
conversations,
conversationsLoaded,
refetchConversationsState,
onConversationCreate,
isAssistantEnabled,
Expand Down Expand Up @@ -158,6 +160,7 @@ export const AssistantHeaderFlyout: React.FC<Props> = ({
setIsSettingsModalVisible={setIsSettingsModalVisible}
onConversationSelected={onConversationSelected}
conversations={conversations}
conversationsLoaded={conversationsLoaded}
refetchConversationsState={refetchConversationsState}
isFlyoutMode={true}
/>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ const mockConversations = {
[welcomeConvo.title]: welcomeConvo,
};
const testProps = {
conversationsLoaded: true,
currentConversation: welcomeConvo,
title: 'Test Title',
docLinks: {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ interface OwnProps {
showAnonymizedValues: boolean;
title: string;
conversations: Record<string, Conversation>;
conversationsLoaded: boolean;
refetchConversationsState: () => Promise<void>;
}

Expand All @@ -61,6 +62,7 @@ export const AssistantHeader: React.FC<Props> = ({
showAnonymizedValues,
title,
conversations,
conversationsLoaded,
refetchConversationsState,
}) => {
const showAnonymizedValuesChecked = useMemo(
Expand Down Expand Up @@ -151,6 +153,7 @@ export const AssistantHeader: React.FC<Props> = ({
setIsSettingsModalVisible={setIsSettingsModalVisible}
onConversationSelected={onConversationSelected}
conversations={conversations}
conversationsLoaded={conversationsLoaded}
refetchConversationsState={refetchConversationsState}
isFlyoutMode={false}
/>
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
/*
* 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 { EuiBadge } from '@elastic/eui';
import React from 'react';

export const BadgesColumn: React.FC<{ items: string[] | null | undefined; prefix: string }> =
React.memo(({ items, prefix }) =>
items && items.length > 0 ? (
<div>
{items.map((c, idx) => (
<EuiBadge key={`${prefix}-${idx}`} color="hollow">
{c}
</EuiBadge>
))}
</div>
) : null
);
BadgesColumn.displayName = 'BadgesColumn';
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
/*
* 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,
EuiButtonEmpty,
EuiFlexGroup,
EuiFlexItem,
EuiFlyout,
EuiFlyoutBody,
EuiFlyoutFooter,
EuiFlyoutHeader,
EuiTitle,
} from '@elastic/eui';
import { css } from '@emotion/react';
import React from 'react';
import * as i18n from './translations';

interface Props {
children: React.ReactNode;
title: string;
flyoutVisible: boolean;
onClose: () => void;
onSaveCancelled: () => void;
onSaveConfirmed: () => void;
}

const FlyoutComponent: React.FC<Props> = ({
title,
flyoutVisible,
children,
onClose,
onSaveCancelled,
onSaveConfirmed,
}) => {
return flyoutVisible ? (
<EuiFlyout
ownFocus
onClose={onClose}
css={css`
max-width: 656px;
`}
>
<EuiFlyoutHeader>
<EuiTitle size={'s'}>
<h2>{title}</h2>
</EuiTitle>
</EuiFlyoutHeader>
<EuiFlyoutBody>{children}</EuiFlyoutBody>
<EuiFlyoutFooter>
<EuiFlexGroup justifyContent="spaceBetween" gutterSize="s">
<EuiFlexItem grow={false}>
<EuiButtonEmpty
size="m"
color="text"
iconType="cross"
data-test-subj="cancel-button"
onClick={onSaveCancelled}
>
{i18n.FLYOUT_CANCEL_BUTTON_TITLE}
</EuiButtonEmpty>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButton
size="m"
type="submit"
data-test-subj="save-button"
onClick={onSaveConfirmed}
iconType="check"
fill
>
{i18n.FLYOUT_SAVE_BUTTON_TITLE}
</EuiButton>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlyoutFooter>
</EuiFlyout>
) : null;
};

export const Flyout = React.memo(FlyoutComponent);
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
/*
* 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 { i18n } from '@kbn/i18n';

export const FLYOUT_SAVE_BUTTON_TITLE = i18n.translate(
'xpack.elasticAssistant.assistant.settings.flyout.saveButtonTitle',
{
defaultMessage: 'Save',
}
);

export const FLYOUT_CANCEL_BUTTON_TITLE = i18n.translate(
'xpack.elasticAssistant.assistant.settings.flyout.cancelButtonTitle',
{
defaultMessage: 'Cancel',
}
);
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
/*
* 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 { useMemo, useState } from 'react';

export const useFlyoutModalVisibility = () => {
const [isFlyoutOpen, setIsFlyoutOpen] = useState(false);

const openFlyout = () => {
setIsFlyoutOpen(true);
};

const closeFlyout = () => {
setIsFlyoutOpen(false);
};

return useMemo(
() => ({
isFlyoutOpen,
openFlyout,
closeFlyout,
}),
[isFlyoutOpen]
);
};
Loading

0 comments on commit 72e1d11

Please sign in to comment.