[SR] Add SnapshotTable and SnapshotDetails.#34837
[SR] Add SnapshotTable and SnapshotDetails.#34837cjcenizal merged 14 commits intoelastic:feature/snapshotsfrom
Conversation
|
Pinging @elastic/es-ui |
💚 Build Succeeded |
There was a problem hiding this comment.
@jen-huang Were you able to test this? I made a fix to the useRequest hook which I think takes care of this, so I removed it.
There was a problem hiding this comment.
@jen-huang I was able to remove the useState and useEffect hooks and just depend upon the route params. I think we can do the same thing for the RepositoryList.
There was a problem hiding this comment.
@jen-huang I found a couple resources [1][2] which indicate this as a pattern for cleaning up an effect. I ran into a couple console errors by leaving the Snapshots tab before the request had resolved, and adding this fixed them.
[1] https://reactjs.org/docs/hooks-effect.html#example-using-hooks-1
[2] https://reactjs.org/docs/hooks-reference.html#cleaning-up-an-effect
…hot. - Add snapshot column to table. - Retrieve complete snapshot details in getAllHandler. - Display and load detail panel while table is still loading. - Simplify detail-panel logic and update routes. - Fix cleanup function bug in useRequest hook.
bb9ee09 to
c882a83
Compare
💚 Build Succeeded |
| const [loading, setLoading] = useState<boolean>(false); | ||
| const [data, setData] = useState<any>([]); | ||
| const [loading, setLoading] = useState<boolean>(true); | ||
| const [data, setData] = useState<any>(initialData); |
There was a problem hiding this comment.
@jen-huang The hardcoded [] value caused errors in situations where I either expected this value to be undefined or an object initially, so I added the ability to specify it per request.
| loading, | ||
| data, | ||
| request, | ||
| setIsMounted: (status: boolean) => { |
There was a problem hiding this comment.
With the addition of the cleanup function return by useEffect call, I don't think is necessary.
💔 Build Failed |
💔 Build Failed |
f7e6b8b to
14c3faa
Compare
💔 Build Failed |
💔 Build Failed |
💚 Build Succeeded |
💔 Build Failed |
…tracking outdated requests.
💚 Build Succeeded |
jen-huang
left a comment
There was a problem hiding this comment.
I found a few minor things, and some suggestions which can be deferred, but overall nothing blocking so LGTM!
Thanks for working on this!
| <FormattedMessage | ||
| id="xpack.snapshotRestore.repositoryDetails.loadingRepository" | ||
| defaultMessage="Loading repository..." | ||
| defaultMessage="Loading repository…" |
There was a problem hiding this comment.
is this an intentional change?
There was a problem hiding this comment.
Thanks for checking! Yes, it is. This is better for localization purposes. I double-checked with Gail and she also approved.
| <FormattedMessage | ||
| id="xpack.snapshotRestore.repositoryList.loadingRepositories" | ||
| defaultMessage="Loading repositories..." | ||
| defaultMessage="Loading repositories…" |
There was a problem hiding this comment.
is this an intentional change?
| /> | ||
| <Route | ||
| exact | ||
| path={`${BASE_PATH}/snapshots/:repositoryName?/:snapshotId*`} |
There was a problem hiding this comment.
this routing doesn't work for repository names with / in them. for example, set up a repository with the name foo/bar and add a snapshot into it. the detail panel will encounter a 404 error
splitting this route into two routes, one with a greedy capture on repositoryName seems to work:
<Route
exact
path={`${BASE_PATH}/snapshots`}
component={SnapshotList}
/>
<Route
exact
path={`${BASE_PATH}/snapshots/:repositoryName*/:snapshotId`}
component={SnapshotList}
/>snapshot IDs have ES character restrictions, so we don't need to worry about / for them 😄
| 1: ( | ||
| <FormattedMessage | ||
| id="xpack.snapshotRestore.snapshotDetails.itemIncludeGlobalStateYesLabel" | ||
| data-test-subj="srSnapshotDetailsIndicesNoneTitle" |
There was a problem hiding this comment.
this test subject is the same as L50, is it intentional?
| ) : ( | ||
| <FormattedMessage | ||
| id="xpack.snapshotRestore.snapshotDetails.itemIndicesNoneLabel" | ||
| data-test-subj="srSnapshotDetailsIndicesNoneTitle" |
There was a problem hiding this comment.
this test subject is the same as L50, is it intentional?
| <SectionLoading> | ||
| <FormattedMessage | ||
| id="xpack.snapshotRestore.snapshotList.loadingSnapshots" | ||
| defaultMessage="Loading snapshots…" |
There was a problem hiding this comment.
do we prefer the ellipses character over ...?
| truncateText: true, | ||
| sortable: true, | ||
| // We deliberately don't link to the repository from here because the API request for populating | ||
| // this table takes so long, and navigating away by accident is a really poor UX. |
There was a problem hiding this comment.
the request takes very little time with no erroneous repositories, so maybe we can reconsider this 😄
| incremental: true, | ||
| schema: true, | ||
| }, | ||
| }; |
There was a problem hiding this comment.
it would be nice to add a filter on repository name!
There was a problem hiding this comment.
Added to the to-do list!
| const [loading, setLoading] = useState<boolean>(false); | ||
| const [data, setData] = useState<any>([]); | ||
| const [loading, setLoading] = useState<boolean>(true); | ||
| const [data, setData] = useState<any>(initialData); |
| * you may not use this file except in compliance with the Elastic License. | ||
| */ | ||
|
|
||
| // @ts-ignore |
There was a problem hiding this comment.
we could define this in x-pack/typings/@elastic/eui to avoid having to ignore linting here
- Fix bug in useRequest which prevented old data from being cleared when subsequent requests returned errors. - Fix formatting bug for failures in detail panel. - Fix routing bug when repository name contains slashes. - Fix/remove test subject selectors. - Add EUI typing.
|
Thanks for the review @jen-huang! I've updated with your feedback and will merge once CI is green. |
💚 Build Succeeded |
* [SR] Snapshot and restore plugin boilerplate (#32276) * Initial plugin set up * Set up client shell * Add initial repository list routes * Fix merge issues and some typings * Decouple server from plugin.ts files, tighten up typings * Use exported constant for required license * Translate plugin name, more typings * Fix more types, move list components under /home * Remove unused var * Change scss prefix * Uncouple unmount logic from routing shim, and some other PR feedback * [SR] Repository list and details UI (#33367) * Initial pass at repositories list UI * Add detail panel for file system repositories, and a generic detail panel with json settings view * Add detail components for other types * Add detail panel footer, rename `useStateValue` to `useAppState` * Fix detail panel footer * Fix unused vars * PR feedback * PR feedback * [SR] Refactor proposal (#33690) * Move app dependencies to its own context provider * Add index.ts barrel file for common types * Move Enums to constants.ts file * Refactor function component using `React.FunctionComponent<Props>` * Refactor service folder structure * Fix type import * Move REPOSITORY_DOC_PATHS from common to public constants * Move AppCore and AppPlugins interfaces back to shim and re-export them from app types * [SR] Create and edit repositories UI (#34020) * Add routing and placeholder form * Fix typings * Set up edit repository route, and basic form UI * Add typings for wrapCustomError, and copy extractCausedByChain from CCR wrapEsError * Throw errors that are already boomified * Create and edit for basic repository types (fs, url, source) * Add repository verification UI to table and details * Create and edit for plugin repository types (hdfs, azure, s3, gcs) * Fix linting * Fix test * Fix test * Remove unused import * Fix duplicate i18n key * Fix details opening on cancel edit, remove unnecessary Fragments, definition file for some EUI components to x-pack, rename saveError * Remove breaks * Adjust add and edit repo routes so they don't conflict with list route * Add repo plugin and types doc links to form * Bootstrap documentation service * Bootstrap text service and replace RepositoryTypeName component with it * Bootstrap breadcrumb service and replace usages * Bootstrap httpService, remove chrome and http from app dependencies(!) * Add request creator and replace all instances of useRequest and sendRequest with it * Fix typo * Simplify update repository and update repository setting methods * Adjust copy * Lint * Remove unused var * Remove unused import * [SR] Add API for retrieving snapshots. (#34598) * [SR] Single and multiple repository delete (#34593) * Add single/multi repository delete API and UI * Address PR feedback * [SR] Add SnapshotTable and SnapshotDetails. (#34837) * Remove associations between multiple repositories with a single snapshot. * Retrieve complete snapshot details in getAllHandler. * Fix cleanup function bug in useRequest hook. * Fix bug in useRequest which prevented old data from being cleared when subsequent requests returned errors. * Add initialValue config option to useRequest. * Add formatDate service to text module. * [SR] Fix linting and add (de)serialization for repositories (#35031) * Fix eslint issues and add (de)serialization for repositories * Add comment about flattening settings * [SR] Surface repository errors and index failures more prominently (#35042) * Add links to repositories from Snapshot Table and Snapshot Details. - Rename services/breadcrumbs to services/navigation and add linkToRepository function. - Refactor home component to update active tab when URL was changed. * Add warning callout to let user know when their repositories contain errors. * Sort failures by shard and add test for snapshot serialization. * Sort failures and indices. * Add filter for filtering snapshots by their repository. * Surface states with humanized text, icons, and tooltips where necessary. * Fix pluralization of seconds. * Surface failures tab even if there are none. - Display a '-' for missing times and durations. - Create DataPlaceholder component. * [SR] Polish repositories UX (#35123) * Refactor repository detail panel to load repository based directly on route param. * Display repository detail panel while table is loading. * Make 'Edit repository' table action a link instead of a button. * Render disabled EuiSelect as a readonly EuiFieldText. * Prepend HDFS URI with hdfs:// protocol. * Present scheme options for Read-Only URL repository as a select. * [SR] Add client-side validation to repository form and link to snapshots from details (#35238) * Add client side repository form validation, extract `flatten` into common lib * Add snapshot count to repository details and link to snapshot list * Reset validation when changing repository type * Fix snapshot list filter deep linking for repository names with slashes and spaces * Fix imports * PR feedback * [SR] Design and copywriting fixes (#35591) * Split repository form into two steps; move `clean_settings.ts` to server * Default to snapshots tab, adjust snapshot empty prompt, add app description * Add minimum timeout to list view requests to avoid flicker, use EuiEmptyPrompt for loading screen, add doc link to settings step * Add information about snapshots to delete repository behavior, add doc link for source only toggle, add size notation help text * Add main doc link * Copywriting and i18n fixes, and add some common settings to third party repo types * Add fields to third party repo detail panel * More copywriting fixes * Use spinner for duration and end time if snapshotting is still in progress * Show all repository type options, mark missing plugins * Revert "Show all repository type options, mark missing plugins" This reverts commit e34ee47. * Fix space * [SR] Add permissions UI and Cloud-specific repository type UI branch (#35833) * Add missing permissions UI and cloud-specific repository type UI branch * Add ES UI as owners of /snapshot_restore directory * Add no repository types callout for Cloud edge case * Redirect invalid section param to repositories * Add warning empty prompt if all repositories have errrors * Replace repository cards with EuiCard * Add snapshot doc link to repository error empty prompt * Remove auto-verification from list and get routes, add separate verification route, add manual verification to repository detail panel * Update copy and remove obsolete test * Remove unused scss files * Final changes to repository cards
* [SR] Snapshot and restore plugin boilerplate (elastic#32276) * Initial plugin set up * Set up client shell * Add initial repository list routes * Fix merge issues and some typings * Decouple server from plugin.ts files, tighten up typings * Use exported constant for required license * Translate plugin name, more typings * Fix more types, move list components under /home * Remove unused var * Change scss prefix * Uncouple unmount logic from routing shim, and some other PR feedback * [SR] Repository list and details UI (elastic#33367) * Initial pass at repositories list UI * Add detail panel for file system repositories, and a generic detail panel with json settings view * Add detail components for other types * Add detail panel footer, rename `useStateValue` to `useAppState` * Fix detail panel footer * Fix unused vars * PR feedback * PR feedback * [SR] Refactor proposal (elastic#33690) * Move app dependencies to its own context provider * Add index.ts barrel file for common types * Move Enums to constants.ts file * Refactor function component using `React.FunctionComponent<Props>` * Refactor service folder structure * Fix type import * Move REPOSITORY_DOC_PATHS from common to public constants * Move AppCore and AppPlugins interfaces back to shim and re-export them from app types * [SR] Create and edit repositories UI (elastic#34020) * Add routing and placeholder form * Fix typings * Set up edit repository route, and basic form UI * Add typings for wrapCustomError, and copy extractCausedByChain from CCR wrapEsError * Throw errors that are already boomified * Create and edit for basic repository types (fs, url, source) * Add repository verification UI to table and details * Create and edit for plugin repository types (hdfs, azure, s3, gcs) * Fix linting * Fix test * Fix test * Remove unused import * Fix duplicate i18n key * Fix details opening on cancel edit, remove unnecessary Fragments, definition file for some EUI components to x-pack, rename saveError * Remove breaks * Adjust add and edit repo routes so they don't conflict with list route * Add repo plugin and types doc links to form * Bootstrap documentation service * Bootstrap text service and replace RepositoryTypeName component with it * Bootstrap breadcrumb service and replace usages * Bootstrap httpService, remove chrome and http from app dependencies(!) * Add request creator and replace all instances of useRequest and sendRequest with it * Fix typo * Simplify update repository and update repository setting methods * Adjust copy * Lint * Remove unused var * Remove unused import * [SR] Add API for retrieving snapshots. (elastic#34598) * [SR] Single and multiple repository delete (elastic#34593) * Add single/multi repository delete API and UI * Address PR feedback * [SR] Add SnapshotTable and SnapshotDetails. (elastic#34837) * Remove associations between multiple repositories with a single snapshot. * Retrieve complete snapshot details in getAllHandler. * Fix cleanup function bug in useRequest hook. * Fix bug in useRequest which prevented old data from being cleared when subsequent requests returned errors. * Add initialValue config option to useRequest. * Add formatDate service to text module. * [SR] Fix linting and add (de)serialization for repositories (elastic#35031) * Fix eslint issues and add (de)serialization for repositories * Add comment about flattening settings * [SR] Surface repository errors and index failures more prominently (elastic#35042) * Add links to repositories from Snapshot Table and Snapshot Details. - Rename services/breadcrumbs to services/navigation and add linkToRepository function. - Refactor home component to update active tab when URL was changed. * Add warning callout to let user know when their repositories contain errors. * Sort failures by shard and add test for snapshot serialization. * Sort failures and indices. * Add filter for filtering snapshots by their repository. * Surface states with humanized text, icons, and tooltips where necessary. * Fix pluralization of seconds. * Surface failures tab even if there are none. - Display a '-' for missing times and durations. - Create DataPlaceholder component. * [SR] Polish repositories UX (elastic#35123) * Refactor repository detail panel to load repository based directly on route param. * Display repository detail panel while table is loading. * Make 'Edit repository' table action a link instead of a button. * Render disabled EuiSelect as a readonly EuiFieldText. * Prepend HDFS URI with hdfs:// protocol. * Present scheme options for Read-Only URL repository as a select. * [SR] Add client-side validation to repository form and link to snapshots from details (elastic#35238) * Add client side repository form validation, extract `flatten` into common lib * Add snapshot count to repository details and link to snapshot list * Reset validation when changing repository type * Fix snapshot list filter deep linking for repository names with slashes and spaces * Fix imports * PR feedback * [SR] Design and copywriting fixes (elastic#35591) * Split repository form into two steps; move `clean_settings.ts` to server * Default to snapshots tab, adjust snapshot empty prompt, add app description * Add minimum timeout to list view requests to avoid flicker, use EuiEmptyPrompt for loading screen, add doc link to settings step * Add information about snapshots to delete repository behavior, add doc link for source only toggle, add size notation help text * Add main doc link * Copywriting and i18n fixes, and add some common settings to third party repo types * Add fields to third party repo detail panel * More copywriting fixes * Use spinner for duration and end time if snapshotting is still in progress * Show all repository type options, mark missing plugins * Revert "Show all repository type options, mark missing plugins" This reverts commit e34ee47. * Fix space * [SR] Add permissions UI and Cloud-specific repository type UI branch (elastic#35833) * Add missing permissions UI and cloud-specific repository type UI branch * Add ES UI as owners of /snapshot_restore directory * Add no repository types callout for Cloud edge case * Redirect invalid section param to repositories * Add warning empty prompt if all repositories have errrors * Replace repository cards with EuiCard * Add snapshot doc link to repository error empty prompt * Remove auto-verification from list and get routes, add separate verification route, add manual verification to repository detail panel * Update copy and remove obsolete test * Remove unused scss files * Final changes to repository cards
* [SR] Snapshot and restore plugin boilerplate (#32276) * Initial plugin set up * Set up client shell * Add initial repository list routes * Fix merge issues and some typings * Decouple server from plugin.ts files, tighten up typings * Use exported constant for required license * Translate plugin name, more typings * Fix more types, move list components under /home * Remove unused var * Change scss prefix * Uncouple unmount logic from routing shim, and some other PR feedback * [SR] Repository list and details UI (#33367) * Initial pass at repositories list UI * Add detail panel for file system repositories, and a generic detail panel with json settings view * Add detail components for other types * Add detail panel footer, rename `useStateValue` to `useAppState` * Fix detail panel footer * Fix unused vars * PR feedback * PR feedback * [SR] Refactor proposal (#33690) * Move app dependencies to its own context provider * Add index.ts barrel file for common types * Move Enums to constants.ts file * Refactor function component using `React.FunctionComponent<Props>` * Refactor service folder structure * Fix type import * Move REPOSITORY_DOC_PATHS from common to public constants * Move AppCore and AppPlugins interfaces back to shim and re-export them from app types * [SR] Create and edit repositories UI (#34020) * Add routing and placeholder form * Fix typings * Set up edit repository route, and basic form UI * Add typings for wrapCustomError, and copy extractCausedByChain from CCR wrapEsError * Throw errors that are already boomified * Create and edit for basic repository types (fs, url, source) * Add repository verification UI to table and details * Create and edit for plugin repository types (hdfs, azure, s3, gcs) * Fix linting * Fix test * Fix test * Remove unused import * Fix duplicate i18n key * Fix details opening on cancel edit, remove unnecessary Fragments, definition file for some EUI components to x-pack, rename saveError * Remove breaks * Adjust add and edit repo routes so they don't conflict with list route * Add repo plugin and types doc links to form * Bootstrap documentation service * Bootstrap text service and replace RepositoryTypeName component with it * Bootstrap breadcrumb service and replace usages * Bootstrap httpService, remove chrome and http from app dependencies(!) * Add request creator and replace all instances of useRequest and sendRequest with it * Fix typo * Simplify update repository and update repository setting methods * Adjust copy * Lint * Remove unused var * Remove unused import * [SR] Add API for retrieving snapshots. (#34598) * [SR] Single and multiple repository delete (#34593) * Add single/multi repository delete API and UI * Address PR feedback * [SR] Add SnapshotTable and SnapshotDetails. (#34837) * Remove associations between multiple repositories with a single snapshot. * Retrieve complete snapshot details in getAllHandler. * Fix cleanup function bug in useRequest hook. * Fix bug in useRequest which prevented old data from being cleared when subsequent requests returned errors. * Add initialValue config option to useRequest. * Add formatDate service to text module. * [SR] Fix linting and add (de)serialization for repositories (#35031) * Fix eslint issues and add (de)serialization for repositories * Add comment about flattening settings * [SR] Surface repository errors and index failures more prominently (#35042) * Add links to repositories from Snapshot Table and Snapshot Details. - Rename services/breadcrumbs to services/navigation and add linkToRepository function. - Refactor home component to update active tab when URL was changed. * Add warning callout to let user know when their repositories contain errors. * Sort failures by shard and add test for snapshot serialization. * Sort failures and indices. * Add filter for filtering snapshots by their repository. * Surface states with humanized text, icons, and tooltips where necessary. * Fix pluralization of seconds. * Surface failures tab even if there are none. - Display a '-' for missing times and durations. - Create DataPlaceholder component. * [SR] Polish repositories UX (#35123) * Refactor repository detail panel to load repository based directly on route param. * Display repository detail panel while table is loading. * Make 'Edit repository' table action a link instead of a button. * Render disabled EuiSelect as a readonly EuiFieldText. * Prepend HDFS URI with hdfs:// protocol. * Present scheme options for Read-Only URL repository as a select. * [SR] Add client-side validation to repository form and link to snapshots from details (#35238) * Add client side repository form validation, extract `flatten` into common lib * Add snapshot count to repository details and link to snapshot list * Reset validation when changing repository type * Fix snapshot list filter deep linking for repository names with slashes and spaces * Fix imports * PR feedback * [SR] Design and copywriting fixes (#35591) * Split repository form into two steps; move `clean_settings.ts` to server * Default to snapshots tab, adjust snapshot empty prompt, add app description * Add minimum timeout to list view requests to avoid flicker, use EuiEmptyPrompt for loading screen, add doc link to settings step * Add information about snapshots to delete repository behavior, add doc link for source only toggle, add size notation help text * Add main doc link * Copywriting and i18n fixes, and add some common settings to third party repo types * Add fields to third party repo detail panel * More copywriting fixes * Use spinner for duration and end time if snapshotting is still in progress * Show all repository type options, mark missing plugins * Revert "Show all repository type options, mark missing plugins" This reverts commit e34ee47. * Fix space * [SR] Add permissions UI and Cloud-specific repository type UI branch (#35833) * Add missing permissions UI and cloud-specific repository type UI branch * Add ES UI as owners of /snapshot_restore directory * Add no repository types callout for Cloud edge case * Redirect invalid section param to repositories * Add warning empty prompt if all repositories have errrors * Replace repository cards with EuiCard * Add snapshot doc link to repository error empty prompt * Remove auto-verification from list and get routes, add separate verification route, add manual verification to repository detail panel * Update copy and remove obsolete test * Remove unused scss files * Final changes to repository cards
Empty state (link goes to docs):
Loading (took 30s when I was testing; I'm talking with Yannick about what we can do about this on the ES side):
Table lists repository and snapshot as two separate columns, ordered from newest to oldest:
Details (WIP) are loaded with both repository and snapshot in the URL. Details load independently of the table so if you're deep-linked you can see the details immediately without waiting on the table:
Loading and missing states for detail panel:
Failures need some nicer formatting. I'll address this in another PR.