forked from elastic/kibana
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[Search] Add Inference endpoint Flyout in Inference Management UI (el…
…astic#203204) ## Summary This PR includes - Create a UI component package to share AI connector form between multiple plugins - Integrate the packaged components into the `Search Inference Endpoint` plugin. https://github.com/user-attachments/assets/2b447b44-3d1d-4422-b76d-8d8fd160b2bc ### Checklist Check the PR satisfies following conditions. Reviewers should verify this PR satisfies this list as well. - [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) - [X] [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 - [X] [Flaky Test Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was used on any tests changed --------- Co-authored-by: kibanamachine <[email protected]> Co-authored-by: Elastic Machine <[email protected]>
- Loading branch information
1 parent
155bdd0
commit bc466ea
Showing
64 changed files
with
4,288 additions
and
9 deletions.
There are no files selected for viewing
Validating CODEOWNERS rules …
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
7 changes: 7 additions & 0 deletions
7
x-pack/platform/packages/shared/kbn-inference-endpoint-ui-common/README.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
# @kbn/kbn-inference-endpoint-ui-common | ||
|
||
The `Inference Endpoint UI common` is a shared UI library to create AI Connector and/or inference endpoints. | ||
|
||
This package provides: | ||
|
||
- Components for rendering the GenAI services and their associated fields |
10 changes: 10 additions & 0 deletions
10
x-pack/platform/packages/shared/kbn-inference-endpoint-ui-common/index.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
/* | ||
* 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. | ||
*/ | ||
|
||
export { InferenceServiceFormFields } from './src/components/inference_service_form_fields'; | ||
|
||
export * from './src/types/types'; |
12 changes: 12 additions & 0 deletions
12
x-pack/platform/packages/shared/kbn-inference-endpoint-ui-common/jest.config.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
/* | ||
* 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. | ||
*/ | ||
|
||
module.exports = { | ||
preset: '@kbn/test', | ||
rootDir: '../../../../..', | ||
roots: ['<rootDir>/x-pack/platform/packages/shared/kbn-inference-endpoint-ui-common'], | ||
}; |
12 changes: 12 additions & 0 deletions
12
x-pack/platform/packages/shared/kbn-inference-endpoint-ui-common/kibana.jsonc
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
{ | ||
"type": "shared-browser", | ||
"id": "@kbn/inference-endpoint-ui-common", | ||
"owner": [ | ||
"@elastic/response-ops", | ||
"@elastic/appex-ai-infra", | ||
"@elastic/obs-ai-assistant", | ||
"@elastic/security-generative-ai" | ||
], | ||
"group": "platform", | ||
"visibility": "shared" | ||
} |
6 changes: 6 additions & 0 deletions
6
x-pack/platform/packages/shared/kbn-inference-endpoint-ui-common/package.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
{ | ||
"name": "@kbn/inference-endpoint-ui-common", | ||
"private": true, | ||
"version": "1.0.0", | ||
"license": "Elastic License 2.0" | ||
} |
9 changes: 9 additions & 0 deletions
9
x-pack/platform/packages/shared/kbn-inference-endpoint-ui-common/setup_tests.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
/* | ||
* 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. | ||
*/ | ||
|
||
// eslint-disable-next-line import/no-extraneous-dependencies | ||
import '@testing-library/jest-dom'; |
290 changes: 290 additions & 0 deletions
290
...ages/shared/kbn-inference-endpoint-ui-common/src/components/additional_options_fields.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,290 @@ | ||
/* | ||
* 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 React, { useMemo } from 'react'; | ||
import { css } from '@emotion/react'; | ||
|
||
import { | ||
EuiFormRow, | ||
EuiSpacer, | ||
EuiTitle, | ||
EuiAccordion, | ||
EuiFieldText, | ||
useEuiTheme, | ||
EuiTextColor, | ||
EuiButtonGroup, | ||
EuiPanel, | ||
EuiButtonEmpty, | ||
EuiCopy, | ||
EuiButton, | ||
useEuiFontSize, | ||
EuiText, | ||
} from '@elastic/eui'; | ||
import { | ||
getFieldValidityAndErrorMessage, | ||
UseField, | ||
useFormContext, | ||
} from '@kbn/es-ui-shared-plugin/static/forms/hook_form_lib'; | ||
import { FormattedMessage } from '@kbn/i18n-react'; | ||
|
||
import { fieldValidators } from '@kbn/es-ui-shared-plugin/static/forms/helpers'; | ||
import { ConfigurationFormItems } from './configuration/configuration_form_items'; | ||
import * as LABELS from '../translations'; | ||
import { DEFAULT_TASK_TYPE } from '../constants'; | ||
import { Config, ConfigEntryView } from '../types/types'; | ||
import { TaskTypeOption } from '../utils/helpers'; | ||
|
||
// Custom trigger button CSS | ||
const buttonCss = css` | ||
&:hover { | ||
text-decoration: none; | ||
} | ||
`; | ||
|
||
interface AdditionalOptionsFieldsProps { | ||
config: Config; | ||
optionalProviderFormFields: ConfigEntryView[]; | ||
onSetProviderConfigEntry: (key: string, value: unknown) => Promise<void>; | ||
onTaskTypeOptionsSelect: (taskType: string, provider?: string) => void; | ||
selectedTaskType?: string; | ||
taskTypeOptions: TaskTypeOption[]; | ||
} | ||
|
||
export const AdditionalOptionsFields: React.FC<AdditionalOptionsFieldsProps> = ({ | ||
config, | ||
taskTypeOptions, | ||
optionalProviderFormFields, | ||
selectedTaskType, | ||
onSetProviderConfigEntry, | ||
onTaskTypeOptionsSelect, | ||
}) => { | ||
const xsFontSize = useEuiFontSize('xs').fontSize; | ||
const { euiTheme } = useEuiTheme(); | ||
const { setFieldValue } = useFormContext(); | ||
|
||
const taskTypeSettings = useMemo( | ||
() => | ||
selectedTaskType || config.taskType?.length ? ( | ||
<> | ||
<EuiTitle size="xxs" data-test-subj="task-type-details-label"> | ||
<h4> | ||
<FormattedMessage | ||
id="xpack.inferenceEndpointUICommon.components.additionalInfo.taskTypeLabel" | ||
defaultMessage="Task type" | ||
/> | ||
</h4> | ||
</EuiTitle> | ||
<EuiText | ||
css={css` | ||
font-size: ${xsFontSize}; | ||
color: ${euiTheme.colors.textSubdued}; | ||
`} | ||
> | ||
<FormattedMessage | ||
id="xpack.inferenceEndpointUICommon.components.additionalInfo.taskTypeHelpInfo" | ||
defaultMessage="Configure the inference task. Task types are specific to the service and model selected." | ||
/> | ||
</EuiText> | ||
<EuiSpacer size="m" /> | ||
<UseField | ||
path="config.taskType" | ||
config={{ | ||
validations: [ | ||
{ | ||
validator: fieldValidators.emptyField(LABELS.getRequiredMessage('Task type')), | ||
isBlocking: true, | ||
}, | ||
], | ||
}} | ||
> | ||
{(field) => { | ||
const { isInvalid, errorMessage } = getFieldValidityAndErrorMessage(field); | ||
|
||
return ( | ||
<EuiFormRow id="taskType" fullWidth isInvalid={isInvalid} error={errorMessage}> | ||
{taskTypeOptions.length === 1 ? ( | ||
<EuiButton | ||
css={{ | ||
background: euiTheme.colors.darkShade, | ||
color: euiTheme.colors.lightestShade, | ||
}} | ||
data-test-subj="taskTypeSelectSingle" | ||
onClick={() => onTaskTypeOptionsSelect(config.taskType)} | ||
> | ||
{config.taskType} | ||
</EuiButton> | ||
) : ( | ||
<EuiButtonGroup | ||
data-test-subj="taskTypeSelect" | ||
buttonSize="m" | ||
legend="Task type" | ||
defaultValue={DEFAULT_TASK_TYPE} | ||
idSelected={config.taskType} | ||
onChange={(id) => onTaskTypeOptionsSelect(id)} | ||
options={taskTypeOptions} | ||
color="text" | ||
type="single" | ||
/> | ||
)} | ||
</EuiFormRow> | ||
); | ||
}} | ||
</UseField> | ||
</> | ||
) : null, | ||
[ | ||
selectedTaskType, | ||
config.taskType, | ||
xsFontSize, | ||
euiTheme.colors, | ||
taskTypeOptions, | ||
onTaskTypeOptionsSelect, | ||
] | ||
); | ||
|
||
const inferenceUri = useMemo(() => `_inference/${selectedTaskType}/`, [selectedTaskType]); | ||
|
||
return ( | ||
<EuiAccordion | ||
id="inferenceAdditionalOptions" | ||
data-test-subj="inference-endpoint-additional-options" | ||
buttonProps={{ css: buttonCss }} | ||
css={css` | ||
.euiAccordion__triggerWrapper { | ||
display: inline-flex; | ||
} | ||
`} | ||
element="fieldset" | ||
arrowDisplay="right" | ||
arrowProps={{ | ||
color: 'primary', | ||
}} | ||
buttonElement="button" | ||
borders="none" | ||
buttonContent={ | ||
<EuiTextColor color={euiTheme.colors.primary}> | ||
<FormattedMessage | ||
id="xpack.inferenceEndpointUICommon.components.additionalInfo.additionalOptionsLabel" | ||
defaultMessage="Additional options" | ||
/> | ||
</EuiTextColor> | ||
} | ||
initialIsOpen={true} | ||
> | ||
<EuiSpacer size="m" /> | ||
<EuiPanel hasBorder={true}> | ||
{optionalProviderFormFields.length > 0 ? ( | ||
<> | ||
<EuiTitle size="xxs" data-test-subj="provider-optional-settings-label"> | ||
<h4> | ||
<FormattedMessage | ||
id="xpack.inferenceEndpointUICommon.components.additionalInfo.providerOptionalSettingsLabel" | ||
defaultMessage="Service settings" | ||
/> | ||
</h4> | ||
</EuiTitle> | ||
<EuiText | ||
css={css` | ||
font-size: ${xsFontSize}; | ||
color: ${euiTheme.colors.textSubdued}; | ||
`} | ||
> | ||
<FormattedMessage | ||
id="xpack.inferenceEndpointUICommon.components.additionalInfo.providerOptionalSettingsHelpLabel" | ||
defaultMessage="Configure the inference provider. These settings are optional provider settings." | ||
/> | ||
</EuiText> | ||
<EuiSpacer size="m" /> | ||
<ConfigurationFormItems | ||
isLoading={false} | ||
direction="column" | ||
items={optionalProviderFormFields} | ||
setConfigEntry={onSetProviderConfigEntry} | ||
/> | ||
<EuiSpacer size="m" /> | ||
</> | ||
) : null} | ||
|
||
{taskTypeSettings} | ||
<EuiSpacer size="m" /> | ||
<EuiTitle size="xxs" data-test-subj="task-type-details-label"> | ||
<h4> | ||
<FormattedMessage | ||
id="xpack.inferenceEndpointUICommon.components.additionalInfo.inferenceEndpointLabel" | ||
defaultMessage="Inference Endpoint" | ||
/> | ||
</h4> | ||
</EuiTitle> | ||
<EuiText | ||
css={css` | ||
font-size: ${xsFontSize}; | ||
color: ${euiTheme.colors.textSubdued}; | ||
`} | ||
> | ||
<FormattedMessage | ||
id="xpack.inferenceEndpointUICommon.components.additionalInfo.inferenceEndpointHelpLabel" | ||
defaultMessage="Inference endpoints provide a simplified method for using this configuration, ecpecially from the API" | ||
/> | ||
</EuiText> | ||
<EuiSpacer size="s" /> | ||
|
||
<UseField path="config.inferenceId"> | ||
{(field) => { | ||
const { isInvalid, errorMessage } = getFieldValidityAndErrorMessage(field); | ||
|
||
return ( | ||
<EuiFormRow | ||
id="inferenceId" | ||
isInvalid={isInvalid} | ||
error={errorMessage} | ||
fullWidth | ||
helpText={ | ||
<FormattedMessage | ||
id="xpack.inferenceEndpointUICommon.components.additionalInfo.inferenceIdHelpLabel" | ||
defaultMessage="This ID cannot be changed once created." | ||
/> | ||
} | ||
> | ||
<EuiFieldText | ||
data-test-subj="inference-endpoint-input-field" | ||
fullWidth | ||
value={config.inferenceId} | ||
onChange={(e) => { | ||
setFieldValue('config.inferenceId', e.target.value); | ||
}} | ||
prepend={inferenceUri} | ||
append={ | ||
<EuiCopy | ||
beforeMessage={LABELS.COPY_TOOLTIP} | ||
afterMessage={LABELS.COPIED_TOOLTIP} | ||
textToCopy={`${inferenceUri}${config.inferenceId}`} | ||
> | ||
{(copy) => ( | ||
<EuiButtonEmpty | ||
iconType="copy" | ||
size="xs" | ||
iconSide="right" | ||
onClick={copy} | ||
data-test-subj="copyInferenceUriToClipboard" | ||
> | ||
<FormattedMessage | ||
id="xpack.inferenceEndpointUICommon.components.additionalInfo.copyLabel" | ||
defaultMessage="Copy" | ||
/> | ||
</EuiButtonEmpty> | ||
)} | ||
</EuiCopy> | ||
} | ||
/> | ||
</EuiFormRow> | ||
); | ||
}} | ||
</UseField> | ||
</EuiPanel> | ||
</EuiAccordion> | ||
); | ||
}; |
Oops, something went wrong.