-
Notifications
You must be signed in to change notification settings - Fork 4.9k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* it's a start * ui wip * wip * dynamic polling intervals, and custom modal for migrate confirmation modal * cleans out most of the remainig UI TODOs * adding progress component * impls team feedback * makes component more testable, starts some a unit test for the CloudPanel * finish unit testing * reverts api changes * update progress styling * fix type issues * fix e2e failure, fix feature unit tests by holding last migration state in fetchMock if more requests than expected happen at the end of a test, remove white spacing change in clj file * second pass at fixing tests * fix copy from ready-only to read-only * copy fix * Update frontend/src/metabase/admin/settings/components/CloudPanel/MigrationError.tsx Co-authored-by: Raphael Krut-Landau <raphael.kl@gmail.com> * Update frontend/src/metabase/admin/settings/components/CloudPanel/MigrationInProgress.tsx Co-authored-by: Raphael Krut-Landau <raphael.kl@gmail.com> * adding e2e test * pr feedback --------- Co-authored-by: Nick Fitzpatrick <nickfitz.582@gmail.com> Co-authored-by: Raphael Krut-Landau <raphael.kl@gmail.com>
- Loading branch information
Showing
27 changed files
with
980 additions
and
10 deletions.
There are no files selected for viewing
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| export type CloudMigrationState = | ||
| | "init" | ||
| | "setup" | ||
| | "dump" | ||
| | "upload" | ||
| | "cancelled" | ||
| | "error" | ||
| | "done"; | ||
|
|
||
| export type CloudMigration = { | ||
| id: number; | ||
| external_id: string; | ||
| state: CloudMigrationState; | ||
| progress: number; | ||
| upload_url: string; | ||
| created_at: string; | ||
| updated_at: string; | ||
| }; |
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
23 changes: 23 additions & 0 deletions
23
frontend/src/metabase/admin/settings/components/CloudPanel/CloudPanel.styled.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,23 @@ | ||
| import styled from "@emotion/styled"; | ||
|
|
||
| import { color, alpha } from "metabase/lib/colors"; | ||
|
|
||
| export const MigrationCard = styled.div` | ||
| border: 1px solid ${color("border")}; | ||
| border-radius: 0.5rem; | ||
| padding: 2rem 3rem; | ||
| `; | ||
|
|
||
| export const LargeIconContainer = styled.div<{ | ||
| color: string; | ||
| }>` | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| flex-shrink: 0; | ||
| height: 4rem; | ||
| width: 4rem; | ||
| border-radius: 50%; | ||
| background: ${props => alpha(props.color, 0.15)}; | ||
| color: ${props => props.color}; | ||
| `; |
111 changes: 111 additions & 0 deletions
111
frontend/src/metabase/admin/settings/components/CloudPanel/CloudPanel.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,111 @@ | ||
| import { useEffect, useState } from "react"; | ||
| import { t } from "ttag"; | ||
|
|
||
| import { | ||
| useGetCloudMigrationQuery, | ||
| useCreateCloudMigrationMutation, | ||
| } from "metabase/api"; | ||
| import LoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper"; | ||
| import { useDispatch } from "metabase/lib/redux"; | ||
| import { refreshSiteSettings } from "metabase/redux/settings"; | ||
| import { Box, Text } from "metabase/ui"; | ||
| import type { CloudMigration } from "metabase-types/api/cloud-migration"; | ||
|
|
||
| import { MigrationError } from "./MigrationError"; | ||
| import { MigrationInProgress } from "./MigrationInProgress"; | ||
| import { MigrationStart } from "./MigrationStart"; | ||
| import { MigrationSuccess } from "./MigrationSuccess"; | ||
| import { | ||
| type InternalCloudMigrationState, | ||
| isInProgressMigration, | ||
| openCheckoutInNewTab, | ||
| getStartedVisibleStates, | ||
| defaultGetPollingInterval, | ||
| } from "./utils"; | ||
|
|
||
| interface CloudPanelProps { | ||
| getPollingInterval: (migration: CloudMigration) => number | undefined; | ||
| onMigrationStart: (migration: CloudMigration) => void; | ||
| } | ||
|
|
||
| export const CloudPanel = ({ | ||
| getPollingInterval = defaultGetPollingInterval, | ||
| onMigrationStart = openCheckoutInNewTab, | ||
| }: CloudPanelProps) => { | ||
| const dispatch = useDispatch(); | ||
| const [pollingInterval, setPollingInterval] = useState<number | undefined>( | ||
| undefined, | ||
| ); | ||
|
|
||
| const { | ||
| data: migration, | ||
| isLoading, | ||
| error, | ||
| } = useGetCloudMigrationQuery(undefined, { | ||
| refetchOnMountOrArgChange: true, | ||
| pollingInterval, | ||
| }); | ||
|
|
||
| const migrationState: InternalCloudMigrationState = | ||
| migration?.state ?? "uninitialized"; | ||
|
|
||
| useEffect( | ||
| function syncPollingInterval() { | ||
| if (migration) { | ||
| setPollingInterval(getPollingInterval(migration)); | ||
| } | ||
| }, | ||
| [migration, getPollingInterval], | ||
| ); | ||
|
|
||
| useEffect( | ||
| function syncSiteSettings() { | ||
| if (migrationState) { | ||
| dispatch(refreshSiteSettings({})); | ||
| } | ||
| }, | ||
| [dispatch, migrationState], | ||
| ); | ||
|
|
||
| const [createCloudMigration, createCloudMigrationResult] = | ||
| useCreateCloudMigrationMutation(); | ||
|
|
||
| const handleCreateMigration = async () => { | ||
| const migration = await createCloudMigration().unwrap(); | ||
| await dispatch(refreshSiteSettings({})); | ||
| onMigrationStart(migration); | ||
| }; | ||
|
|
||
| return ( | ||
| <LoadingAndErrorWrapper loading={isLoading} error={error}> | ||
| <Box maw="30rem"> | ||
| <Text fw="bold" size="1.5rem" mb="2rem">{t`Migrate to Cloud`}</Text> | ||
|
|
||
| {getStartedVisibleStates.has(migrationState) && ( | ||
| <MigrationStart | ||
| startNewMigration={handleCreateMigration} | ||
| isStarting={createCloudMigrationResult.isLoading} | ||
| /> | ||
| )} | ||
|
|
||
| <Box mt="2rem"> | ||
| {migration && isInProgressMigration(migration) && ( | ||
| <MigrationInProgress migration={migration} /> | ||
| )} | ||
|
|
||
| {migration && migrationState === "done" && ( | ||
| <MigrationSuccess | ||
| migration={migration} | ||
| restartMigration={handleCreateMigration} | ||
| isRestarting={createCloudMigrationResult.isLoading} | ||
| /> | ||
| )} | ||
|
|
||
| {migration && migrationState === "error" && ( | ||
| <MigrationError migration={migration} /> | ||
| )} | ||
| </Box> | ||
| </Box> | ||
| </LoadingAndErrorWrapper> | ||
| ); | ||
| }; |
Oops, something went wrong.