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

@@ -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;

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>
+  );
+}

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>

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",

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ę",