## Timelines (Top Level) Page and Open Timelines Modal This PR adds a new `Timelines` page and an `Open Timeline` modal for finding and opening saved timelines. It has `TODO` placeholders / `alert` stubs where @XavierM will wire it up to persistence via GraphQL in a forthcoming PR. Thanks to @MichaelMarcialis for the design! ### New `Timelines` page and top-level navigation ![01-timelines-page](https://user-images.githubusercontent.com/4459398/56990470-61929f00-6b52-11e9-9e49-02c1213010ea.gif) ### New `Open Timeline` menu item and modal ![02-open-timeline-modal](https://user-images.githubusercontent.com/4459398/56990486-6d7e6100-6b52-11e9-8aa4-a14984958f43.gif) ### Delete timelines ![03-delete-timelines](https://user-images.githubusercontent.com/4459398/56990533-90107a00-6b52-11e9-9a0a-4ad2abf5da47.gif) ### Updated the style of the notes icon shown in the timeline header and timeline rows Before: <img width="1091" alt="04-notes-icon-before" src="https://user-images.githubusercontent.com/4459398/56950590-15fcd880-6af3-11e9-9376-1c4e935b7fec.png"> After: <img width="1104" alt="05-notes-icon-after" src="https://user-images.githubusercontent.com/4459398/56950610-1eedaa00-6af3-11e9-96ba-df41e97dc7de.png"> ### Changed the style of the timeline footer's loading icon from `EuiLoadingChart` to `EuiLoadingSpinner`: Before: <img width="208" alt="06-footer-loading-before" src="https://user-images.githubusercontent.com/4459398/56950633-2ca32f80-6af3-11e9-9bba-755e3a9cd351.png"> After: <img width="221" alt="07-footer-loading-after" src="https://user-images.githubusercontent.com/4459398/56950656-39c01e80-6af3-11e9-900a-4054cb6d8ef7.png"> ### Increased the area of the AND drop target in the timeline, and fixed an issue where the timeline drop target would change size while dragging, which caused page reflows: Before: ![08-timeline-header-before](https://user-images.githubusercontent.com/4459398/56950795-8efc3000-6af3-11e9-8657-22e0abb517ed.gif) After: ![09-timeline-header-after](https://user-images.githubusercontent.com/4459398/56950831-9d4a4c00-6af3-11e9-847e-fa7ea0cc67cf.gif) ### To run this branch locally with the mock data shown in the gifs: 1. add the following import to `x-pack/plugins/siem/public/pages/timelines/timelines_page.tsx`: ``` import { mockTimelineResults } from '../../mock/timeline_results'; ``` 2. in `x-pack/plugins/siem/public/pages/timelines/timelines_page.tsx`: change: ``` searchResults={[]} ``` to: ``` searchResults={mockTimelineResults} ``` 3. add the following import to `x-pack/plugins/siem/public/components/open_timeline/open_timeline_modal/index.tsx`: ``` import { mockTimelineResults } from '../../../mock/timeline_results'; ``` 4. in `x-pack/plugins/siem/public/components/open_timeline/open_timeline_modal/index.tsx`: change: ``` searchResults={[]} ``` to: ``` searchResults={mockTimelineResults} ``` https://github.com/elastic/ingest-dev/issues/400 |
||
---|---|---|
.. | ||
common | ||
public | ||
scripts | ||
server | ||
.gitattributes | ||
index.ts | ||
package.json | ||
tsconfig.json | ||
yarn.lock |