From 648f5ff1abb15a66c875cadf58d3415d2a94c153 Mon Sep 17 00:00:00 2001
From: Josh Hunt <joshhunt@users.noreply.github.com>
Date: Thu, 21 Mar 2024 16:49:21 +0000
Subject: [PATCH] E2C: Migration summary (#84890)

* E2C: Migration summary

* remove polling

* stack -> box, box -> stack

* justify

* one less stack
---
 public/app/features/migrate-to-cloud/api.ts   |  7 +++
 .../migrate-to-cloud/onprem/MigrationInfo.tsx | 19 +++++++
 .../features/migrate-to-cloud/onprem/Page.tsx | 57 ++++++++++++++++---
 public/locales/en-US/grafana.json             |  7 ++-
 public/locales/pseudo-LOCALE/grafana.json     |  7 ++-
 5 files changed, 85 insertions(+), 12 deletions(-)
 create mode 100644 public/app/features/migrate-to-cloud/onprem/MigrationInfo.tsx

diff --git a/public/app/features/migrate-to-cloud/api.ts b/public/app/features/migrate-to-cloud/api.ts
index b4a065d978b..0b8261144ee 100644
--- a/public/app/features/migrate-to-cloud/api.ts
+++ b/public/app/features/migrate-to-cloud/api.ts
@@ -187,6 +187,12 @@ export const migrateToCloudAPI = createApi({
       },
     }),
 
+    startMigration: builder.mutation<void, void>({
+      queryFn: async () => {
+        return dataWithMockDelay(undefined);
+      },
+    }),
+
     listResources: builder.query<MigrationResourceDTO[], void>({
       providesTags: ['resource'],
       queryFn: async () => {
@@ -204,4 +210,5 @@ export const {
   useDeleteMigrationTokenMutation,
   useHasMigrationTokenQuery,
   useListResourcesQuery,
+  useStartMigrationMutation,
 } = migrateToCloudAPI;
diff --git a/public/app/features/migrate-to-cloud/onprem/MigrationInfo.tsx b/public/app/features/migrate-to-cloud/onprem/MigrationInfo.tsx
new file mode 100644
index 00000000000..3e693303739
--- /dev/null
+++ b/public/app/features/migrate-to-cloud/onprem/MigrationInfo.tsx
@@ -0,0 +1,19 @@
+import React, { ReactNode } from 'react';
+
+import { Stack, Text } from '@grafana/ui';
+
+interface MigrationInfoProps {
+  title: NonNullable<ReactNode>;
+  value: NonNullable<ReactNode>;
+}
+
+export function MigrationInfo({ title, value }: MigrationInfoProps) {
+  return (
+    <Stack direction="column">
+      <Text variant="bodySmall" color="secondary">
+        {title}
+      </Text>
+      <Text variant="h4">{value}</Text>
+    </Stack>
+  );
+}
diff --git a/public/app/features/migrate-to-cloud/onprem/Page.tsx b/public/app/features/migrate-to-cloud/onprem/Page.tsx
index 4fc0614bed1..fecab6a6b02 100644
--- a/public/app/features/migrate-to-cloud/onprem/Page.tsx
+++ b/public/app/features/migrate-to-cloud/onprem/Page.tsx
@@ -1,32 +1,73 @@
 import { skipToken } from '@reduxjs/toolkit/query/react';
 import React, { useState } from 'react';
 
-import { Button, Stack, Text } from '@grafana/ui';
-import { Trans } from 'app/core/internationalization';
+import { Alert, Box, Button, Stack } from '@grafana/ui';
+import { Trans, t } from 'app/core/internationalization';
 
-import { useGetStatusQuery, useListResourcesQuery } from '../api';
+import { useGetStatusQuery, useListResourcesQuery, useStartMigrationMutation } from '../api';
 
 import { DisconnectModal } from './DisconnectModal';
 import { EmptyState } from './EmptyState/EmptyState';
+import { MigrationInfo } from './MigrationInfo';
 import { ResourcesTable } from './ResourcesTable';
 
 export const Page = () => {
   const { data: status, isFetching } = useGetStatusQuery();
   const { data: resources } = useListResourcesQuery(status?.enabled ? undefined : skipToken);
+  const [startMigration, { isLoading: startMigrationIsLoading, isError: startMigrationIsError }] =
+    useStartMigrationMutation();
   const [isDisconnecting, setIsDisconnecting] = useState(false);
 
   if (!status?.enabled) {
     return <EmptyState />;
   }
 
+  const isBusy = isFetching || isDisconnecting || startMigrationIsLoading;
+
   return (
     <>
-      <Stack direction="column" alignItems="flex-start">
-        {status.stackURL && <Text variant="h4">{status.stackURL}</Text>}
+      <Stack direction="column" gap={4}>
+        {startMigrationIsError && (
+          <Alert
+            severity="error"
+            title={t(
+              'migrate-to-cloud.summary.error-starting-migration',
+              'There was an error starting cloud migration'
+            )}
+          />
+        )}
 
-        <Button disabled={isFetching || isDisconnecting} variant="secondary" onClick={() => setIsDisconnecting(true)}>
-          <Trans i18nKey="migrate-to-cloud.resources.disconnect">Disconnect</Trans>
-        </Button>
+        {status.stackURL && (
+          <Box
+            borderColor="weak"
+            borderStyle="solid"
+            padding={2}
+            display="flex"
+            gap={4}
+            alignItems="center"
+            justifyContent="space-between"
+          >
+            <MigrationInfo
+              title={t('migrate-to-cloud.summary.target-stack-title', 'Uploading to')}
+              value={
+                <>
+                  {status.stackURL}{' '}
+                  <Button onClick={() => setIsDisconnecting(true)} disabled={isBusy} variant="secondary" size="sm">
+                    <Trans i18nKey="migrate-to-cloud.summary.disconnect">Disconnect</Trans>
+                  </Button>
+                </>
+              }
+            />
+
+            <Button
+              disabled={isBusy}
+              onClick={() => startMigration()}
+              icon={startMigrationIsLoading ? 'spinner' : undefined}
+            >
+              <Trans i18nKey="migrate-to-cloud.summary.start-migration">Upload everything</Trans>
+            </Button>
+          </Box>
+        )}
 
         {resources && <ResourcesTable resources={resources} />}
       </Stack>
diff --git a/public/locales/en-US/grafana.json b/public/locales/en-US/grafana.json
index 158aac4ee32..d0d02c66cb6 100644
--- a/public/locales/en-US/grafana.json
+++ b/public/locales/en-US/grafana.json
@@ -789,8 +789,11 @@
       "datasource": "Data source",
       "unknown": "Unknown"
     },
-    "resources": {
-      "disconnect": "Disconnect"
+    "summary": {
+      "disconnect": "Disconnect",
+      "error-starting-migration": "There was an error starting cloud migration",
+      "start-migration": "Upload everything",
+      "target-stack-title": "Uploading to"
     },
     "token-status": {
       "active": "Token created and active",
diff --git a/public/locales/pseudo-LOCALE/grafana.json b/public/locales/pseudo-LOCALE/grafana.json
index 14dbd74e5ef..907e7266657 100644
--- a/public/locales/pseudo-LOCALE/grafana.json
+++ b/public/locales/pseudo-LOCALE/grafana.json
@@ -789,8 +789,11 @@
       "datasource": "Đäŧä şőūřčę",
       "unknown": "Ůʼnĸʼnőŵʼn"
     },
-    "resources": {
-      "disconnect": "Đįşčőʼnʼnęčŧ"
+    "summary": {
+      "disconnect": "Đįşčőʼnʼnęčŧ",
+      "error-starting-migration": "Ŧĥęřę ŵäş äʼn ęřřőř şŧäřŧįʼnģ čľőūđ mįģřäŧįőʼn",
+      "start-migration": "Ůpľőäđ ęvęřyŧĥįʼnģ",
+      "target-stack-title": "Ůpľőäđįʼnģ ŧő"
     },
     "token-status": {
       "active": "Ŧőĸęʼn čřęäŧęđ äʼnđ äčŧįvę",