Skip to content

Commit ea50e0b

Browse files
SoniaSanzVkibanamachine
SoniaSanzV
and
kibanamachine
authored
[Streams] Create failure store modal stateless component (#230772)
Addresses #230257 ## Summary This PR creates the Stateless component for the Failure Store Modal. The component was created with Storybook. Check the readme for more information <img width="596" height="440" alt="Screenshot 2025-08-06 at 14 20 16" src="https://github.com/user-attachments/assets/51766a33-7a8b-41f2-9571-fab96d8b0be3" /> <img width="510" height="441" alt="Screenshot 2025-08-06 at 14 20 08" src="https://github.com/user-attachments/assets/70afaf37-da55-40c4-8607-2ba27fa0711c" /> <img width="451" height="234" alt="Screenshot 2025-08-06 at 14 19 57" src="https://github.com/user-attachments/assets/4e1902c4-0c31-4fa8-b194-f6bf2fe56ddb" /> --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
1 parent e46b8e8 commit ea50e0b

File tree

21 files changed

+840
-0
lines changed

21 files changed

+840
-0
lines changed

‎.github/CODEOWNERS‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -889,6 +889,7 @@ x-pack/platform/packages/shared/kbn-elastic-assistant-shared-state @elastic/secu
889889
x-pack/platform/packages/shared/kbn-entities-schema @elastic/obs-entities
890890
x-pack/platform/packages/shared/kbn-evals @elastic/appex-ai-infra
891891
x-pack/platform/packages/shared/kbn-event-stacktrace @elastic/obs-ux-infra_services-team @elastic/obs-ux-logs-team
892+
x-pack/platform/packages/shared/kbn-failure-store-modal @elastic/kibana-management
892893
x-pack/platform/packages/shared/kbn-inference-cli @elastic/appex-ai-infra
893894
x-pack/platform/packages/shared/kbn-inference-endpoint-ui-common @elastic/appex-ai-infra
894895
x-pack/platform/packages/shared/kbn-inference-prompt-utils @elastic/appex-ai-infra

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -560,6 +560,7 @@
560560
"@kbn/expression-xy-plugin": "link:src/platform/plugins/shared/chart_expressions/expression_xy",
561561
"@kbn/expressions-explorer-plugin": "link:examples/expressions_explorer",
562562
"@kbn/expressions-plugin": "link:src/platform/plugins/shared/expressions",
563+
"@kbn/failure-store-modal": "link:x-pack/platform/packages/shared/kbn-failure-store-modal",
563564
"@kbn/feature-controls-examples-plugin": "link:examples/feature_control_examples",
564565
"@kbn/feature-flags-example-plugin": "link:examples/feature_flags_example",
565566
"@kbn/feature-usage-test-plugin": "link:x-pack/platform/test/plugin_api_integration/plugins/feature_usage_test",

‎src/dev/storybook/aliases.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ export const storybookAliases = {
3737
'src/platform/plugins/shared/chart_expressions/expression_partition_vis/.storybook',
3838
expression_tagcloud:
3939
'src/platform/plugins/shared/chart_expressions/expression_tagcloud/.storybook',
40+
failure_store_modal: 'x-pack/platform/packages/shared/kbn-failure-store-modal/.storybook',
4041
fleet: 'x-pack/platform/plugins/shared/fleet/.storybook',
4142
grouping: 'src/platform/packages/shared/kbn-grouping/.storybook',
4243
home: 'src/platform/plugins/shared/home/.storybook',

‎tsconfig.base.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1024,6 +1024,8 @@
10241024
"@kbn/expressions-plugin/*": ["src/platform/plugins/shared/expressions/*"],
10251025
"@kbn/failed-test-reporter-cli": ["packages/kbn-failed-test-reporter-cli"],
10261026
"@kbn/failed-test-reporter-cli/*": ["packages/kbn-failed-test-reporter-cli/*"],
1027+
"@kbn/failure-store-modal": ["x-pack/platform/packages/shared/kbn-failure-store-modal"],
1028+
"@kbn/failure-store-modal/*": ["x-pack/platform/packages/shared/kbn-failure-store-modal/*"],
10271029
"@kbn/feature-controls-examples-plugin": ["examples/feature_control_examples"],
10281030
"@kbn/feature-controls-examples-plugin/*": ["examples/feature_control_examples/*"],
10291031
"@kbn/feature-flags-example-plugin": ["examples/feature_flags_example"],

‎x-pack/platform/packages/shared/kbn-failure-store-modal/.storybook/main.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
/*
2+
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
3+
* or more contributor license agreements. Licensed under the Elastic License
4+
* 2.0; you may not use this file except in compliance with the Elastic License
5+
* 2.0.
6+
*/
7+
8+
import { defaultConfig } from '@kbn/storybook';
9+
10+
module.exports = defaultConfig;

‎x-pack/platform/packages/shared/kbn-failure-store-modal/README.md‎

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
# @kbn/failure-store-modal
2+
3+
A reusable React component package that provides a modal interface for configuring failure store settings in Kibana. This package contains stateless components for managing failure store configurations including retention periods and custom settings.
4+
5+
## Overview
6+
7+
The Failure Store Modal is a form-based modal component that allows users to:
8+
- Enable or disable failure store functionality
9+
- Configure retention periods (default or custom)
10+
- Set custom retention values with various time units (days, hours, minutes, seconds, milliseconds, microseconds, nanoseconds)
11+
- Validate and submit failure store configurations
12+
13+
## Installation
14+
15+
This package is part of the Kibana monorepo and is available as a shared browser package.
16+
17+
```typescript
18+
import { FailureStoreModal } from '@kbn/failure-store-modal';
19+
```
20+
21+
## Usage
22+
23+
### Basic Usage
24+
25+
```typescript
26+
import React, { useState } from 'react';
27+
import { FailureStoreModal } from '@kbn/failure-store-modal';
28+
29+
const MyComponent = () => {
30+
const [isModalVisible, setIsModalVisible] = useState(false);
31+
32+
const handleSave = (data) => {
33+
console.log('Failure store config:', data);
34+
// Handle the saved configuration
35+
setIsModalVisible(false);
36+
};
37+
38+
const handleClose = () => {
39+
setIsModalVisible(false);
40+
};
41+
42+
return (
43+
<>
44+
<button onClick={() => setIsModalVisible(true)}>
45+
Configure Failure Store
46+
</button>
47+
48+
{isModalVisible && (
49+
<FailureStoreModal
50+
onCloseModal={handleClose}
51+
onSaveModal={handleSave}
52+
failureStoreProps={{
53+
failureStoreEnabled: false,
54+
defaultRetentionPeriod: '30d'
55+
}}
56+
/>
57+
)}
58+
</>
59+
);
60+
};
61+
```
62+
63+
### With Custom Retention Period
64+
65+
```typescript
66+
<FailureStoreModal
67+
onCloseModal={handleClose}
68+
onSaveModal={handleSave}
69+
failureStoreProps={{
70+
failureStoreEnabled: true,
71+
defaultRetentionPeriod: '30d',
72+
customRetentionPeriod: '7d'
73+
}}
74+
/>
75+
```
76+
77+
## API Reference
78+
79+
### FailureStoreModal Props
80+
81+
| Prop | Type | Required | Description |
82+
|------|------|----------|-------------|
83+
| `onCloseModal` | `() => void` | ✓ | Callback function called when the modal is closed |
84+
| `onSaveModal` | `(data: FailureStoreFormData) => void` | ✓ | Callback function called when the form is submitted with valid data |
85+
| `failureStoreProps` | `FailureStoreFormProps` | ✓ | Configuration object for the failure store settings |
86+
87+
### FailureStoreFormProps
88+
89+
| Property | Type | Required | Description |
90+
|----------|------|----------|-------------|
91+
| `failureStoreEnabled` | `boolean` | ✓ | Whether failure store is currently enabled |
92+
| `defaultRetentionPeriod` | `string` | ✓ | Default retention period (e.g., "30d", "7h") |
93+
| `customRetentionPeriod` | `string` | ✗ | Custom retention period if different from default |
94+
95+
### FailureStoreFormData (Return Type)
96+
97+
| Property | Type | Description |
98+
|----------|------|-------------|
99+
| `failureStoreEnabled` | `boolean` | Whether failure store should be enabled |
100+
| `customRetentionPeriod` | `string \| undefined` | Custom retention period if specified |
101+
102+
## Supported Time Units
103+
104+
The modal supports the following time units for retention periods:
105+
106+
- `d` - Days
107+
- `h` - Hours
108+
- `m` - Minutes
109+
- `s` - Seconds
110+
- `ms` - Milliseconds
111+
- `micros` - Microseconds
112+
- `nanos` - Nanoseconds
113+
114+
## Features
115+
116+
- **Form Validation**: Built-in validation for retention period values
117+
- **Internationalization**: Full i18n support with formatted messages
118+
- **Accessibility**: ARIA-compliant modal with proper labeling
119+
- **State Management**: Uses Kibana's form hook library for robust form state management
120+
- **Type Safety**: Full TypeScript support with comprehensive type definitions
121+
- **Storybook Integration**: Includes Storybook stories for component development and testing
122+
123+
## Development
124+
125+
### Testing
126+
127+
The package includes comprehensive test coverage:
128+
129+
```bash
130+
# Run tests
131+
yarn jest --config x-pack/platform/packages/shared/kbn-failure-store-modal/jest.config.js
132+
```
133+
134+
### Storybook
135+
136+
View and develop the component in Storybook:
137+
138+
```bash
139+
yarn storybook failure_store_modal
140+
```
141+

‎x-pack/platform/packages/shared/kbn-failure-store-modal/index.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
/*
2+
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
3+
* or more contributor license agreements. Licensed under the Elastic License
4+
* 2.0; you may not use this file except in compliance with the Elastic License
5+
* 2.0.
6+
*/
7+
8+
export { FailureStoreModal } from './src';

‎x-pack/platform/packages/shared/kbn-failure-store-modal/jest.config.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
/*
2+
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
3+
* or more contributor license agreements. Licensed under the Elastic License
4+
* 2.0; you may not use this file except in compliance with the Elastic License
5+
* 2.0.
6+
*/
7+
8+
module.exports = {
9+
preset: '@kbn/test',
10+
rootDir: '../../../../..',
11+
roots: ['<rootDir>/x-pack/platform/packages/shared/kbn-failure-store-modal'],
12+
};

‎x-pack/platform/packages/shared/kbn-failure-store-modal/kibana.jsonc‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"type": "shared-browser",
3+
"id": "@kbn/failure-store-modal",
4+
"owner": [
5+
"@elastic/kibana-management"
6+
],
7+
"group": "platform",
8+
"visibility": "shared"
9+
}

‎x-pack/platform/packages/shared/kbn-failure-store-modal/package.json‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"name": "@kbn/failure-store-modal",
3+
"private": true,
4+
"version": "1.0.0",
5+
"license": "Elastic License 2.0"
6+
}

0 commit comments

Comments
 (0)