github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 09:48:58 -04:00
Code Issues Projects Releases Packages Wiki Activity

First pass of InsightPanel

Browse source
This commit is contained in:
Coen Warmer 2023-07-19 14:59:43 +02:00 • committed by Dario Gieselaar
parent 4d4ca17079
commit 0efd9d3723
3 changed files with 79 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

3
x-pack/plugins/observability_ai_assistant/public/components/assistant_avatar.tsx
View file

@ -5,10 +5,9 @@
* 2.0.
*/
import React from 'react';
import { EuiAvatarSize } from '@elastic/eui/src/components/avatar/avatar';
export interface AssistantAvatarProps {
size: EuiAvatarSize;
size: keyof typeof sizeMap;
}
export const sizeMap = {

28
x-pack/plugins/observability_ai_assistant/public/components/insight_panel.stories.tsx Normal file
View file

@ -0,0 +1,28 @@
/*
* 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 from 'react';
import { ComponentStory } from '@storybook/react';
import { InsightPanel as Component, InsightPanelProps } from './insight_panel';
export default {
component: Component,
title: 'app/Molecules/InsightPanel',
argTypes: {},
};
const Template: ComponentStory<typeof Component> = (props: InsightPanelProps) => (
<Component {...props} />
);
const defaultProps = {
title: 'Elastic Assistant',
};
export const InsightPanel = Template.bind({});
InsightPanel.args = defaultProps;

50
x-pack/plugins/observability_ai_assistant/public/components/insight_panel.tsx Normal file
View file

@ -0,0 +1,50 @@
/*
* 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 from 'react';
import { EuiButtonIcon, EuiFlexGroup, EuiFlexItem, EuiPanel, EuiText } from '@elastic/eui';
import { AssistantAvatar } from './assistant_avatar';
export interface InsightPanelProps {
title: string;
}
export function InsightPanel({ title }: InsightPanelProps) {
return (
<EuiPanel hasBorder hasShadow={false}>
<EuiFlexGroup wrap responsive={false}>
{/* expand / contract */}
<EuiFlexItem grow={false}>
<EuiButtonIcon iconType="arrowRight" />
</EuiFlexItem>
{/* content */}
<EuiFlexItem>
<EuiFlexGroup wrap responsive={false}>
<EuiFlexItem grow={false}>
<AssistantAvatar size="xs" />
</EuiFlexItem>
<EuiFlexItem>
<EuiText>
<h5>{title}</h5>
</EuiText>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
{/* actions */}
<EuiFlexItem grow={false}>
<EuiFlexGroup>
<EuiFlexItem grow={false}>
<EuiButtonIcon iconType="boxesHorizontal" />
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
</EuiFlexGroup>
</EuiPanel>
);
}