E2C: Start connecting on-prem to real apis (#85527)

* E2C: Start connecting on-prem to real apis

* actually run the migration

* show resources

* basic dashboards resources

* show dashboard title

* remove console logs

* cleanup 1

* i18n

* disconnect

* i18n

* restore type

* use fixed format

* fix

Author: joshhunt

pkg/services/cloudmigration/model.go

@@ -175,7 +175,8 @@ type MigrateDataResponseDTO struct {
 }
 
 type MigrateDataResponseItemDTO struct {
-	RefID  string     `json:"refId"`
-	Status ItemStatus `json:"status"`
-	Error  string     `json:"error,omitempty"`
+	Type   MigrateDataType `json:"type"`
+	RefID  string          `json:"refId"`
+	Status ItemStatus      `json:"status"`
+	Error  string          `json:"error,omitempty"`
 }

public/api-merged.json

@@ -15963,9 +15963,15 @@
         },
         "status": {
           "$ref": "#/definitions/ItemStatus"
+        },
+        "type": {
+          "$ref": "#/definitions/MigrateDataType"
         }
       }
     },
+    "MigrateDataType": {
+      "type": "string"
+    },
     "MoveFolderCommand": {
       "description": "MoveFolderCommand captures the information required by the folder service\nto move a folder.",
       "type": "object",

public/app/features/migrate-to-cloud/api/baseAPI.ts

@@ -6,6 +6,9 @@ import { BackendSrvRequest, getBackendSrv } from '@grafana/runtime';
 interface RequestOptions extends BackendSrvRequest {
   manageError?: (err: unknown) => { error: unknown };
   showErrorAlert?: boolean;
+
+  // rtk codegen sets this
+  body?: BackendSrvRequest['data'];
 }
 
 function createBackendSrvBaseQuery({ baseURL }: { baseURL: string }): BaseQueryFn<RequestOptions> {
@@ -16,6 +19,7 @@ function createBackendSrvBaseQuery({ baseURL }: { baseURL: string }): BaseQueryF
           ...requestOptions,
           url: baseURL + requestOptions.url,
           showErrorAlert: requestOptions.showErrorAlert,
+          data: requestOptions.body,
         })
       );
       return { data: responseData, meta };

public/app/features/migrate-to-cloud/api/endpoints.gen.ts

@@ -25,10 +25,13 @@ const injectedRtkApi = api.injectEndpoints({
     createCloudMigrationToken: build.mutation<CreateCloudMigrationTokenApiResponse, CreateCloudMigrationTokenApiArg>({
       query: () => ({ url: `/cloudmigration/token`, method: 'POST' }),
     }),
+    getDashboardByUid: build.query<GetDashboardByUidApiResponse, GetDashboardByUidApiArg>({
+      query: (queryArg) => ({ url: `/dashboards/uid/${queryArg.uid}` }),
+    }),
   }),
   overrideExisting: false,
 });
-export { injectedRtkApi as enhancedApi };
+export { injectedRtkApi as generatedAPI };
 export type GetMigrationListApiResponse = /** status 200 (empty) */ CloudMigrationListResponse;
 export type GetMigrationListApiArg = void;
 export type CreateMigrationApiResponse = /** status 200 (empty) */ CloudMigrationResponse;
@@ -64,6 +67,10 @@ export type GetCloudMigrationRunApiArg = {
 };
 export type CreateCloudMigrationTokenApiResponse = /** status 200 (empty) */ CreateAccessTokenResponseDto;
 export type CreateCloudMigrationTokenApiArg = void;
+export type GetDashboardByUidApiResponse = /** status 200 (empty) */ DashboardFullWithMeta;
+export type GetDashboardByUidApiArg = {
+  uid: string;
+};
 export type CloudMigrationResponse = {
   created?: string;
   id?: number;
@@ -87,10 +94,12 @@ export type CloudMigrationRequest = {
   authToken?: string;
 };
 export type ItemStatus = string;
+export type MigrateDataType = string;
 export type MigrateDataResponseItemDto = {
   error?: string;
   refId?: string;
   status?: ItemStatus;
+  type?: MigrateDataType;
 };
 export type MigrateDataResponseDto = {
   id?: number;
@@ -102,6 +111,50 @@ export type CloudMigrationRunList = {
 export type CreateAccessTokenResponseDto = {
   token?: string;
 };
+export type Json = object;
+export type AnnotationActions = {
+  canAdd?: boolean;
+  canDelete?: boolean;
+  canEdit?: boolean;
+};
+export type AnnotationPermission = {
+  dashboard?: AnnotationActions;
+  organization?: AnnotationActions;
+};
+export type DashboardMeta = {
+  annotationsPermissions?: AnnotationPermission;
+  canAdmin?: boolean;
+  canDelete?: boolean;
+  canEdit?: boolean;
+  canSave?: boolean;
+  canStar?: boolean;
+  created?: string;
+  createdBy?: string;
+  expires?: string;
+  /** Deprecated: use FolderUID instead */
+  folderId?: number;
+  folderTitle?: string;
+  folderUid?: string;
+  folderUrl?: string;
+  hasAcl?: boolean;
+  isFolder?: boolean;
+  isSnapshot?: boolean;
+  isStarred?: boolean;
+  provisioned?: boolean;
+  provisionedExternalId?: string;
+  publicDashboardEnabled?: boolean;
+  publicDashboardUid?: string;
+  slug?: string;
+  type?: string;
+  updated?: string;
+  updatedBy?: string;
+  url?: string;
+  version?: number;
+};
+export type DashboardFullWithMeta = {
+  dashboard?: Json;
+  meta?: DashboardMeta;
+};
 export const {
   useGetMigrationListQuery,
   useCreateMigrationMutation,
@@ -111,4 +164,5 @@ export const {
   useRunCloudMigrationMutation,
   useGetCloudMigrationRunQuery,
   useCreateCloudMigrationTokenMutation,
+  useGetDashboardByUidQuery,
 } = injectedRtkApi;

public/app/features/migrate-to-cloud/api/index.ts

@@ -1,2 +1,39 @@
 export * from './endpoints.gen';
-export { enhancedApi as cloudMigrationAPI } from './endpoints.gen';
+import { generatedAPI } from './endpoints.gen';
+
+export const cloudMigrationAPI = generatedAPI.enhanceEndpoints({
+  addTagTypes: ['cloud-migration-config', 'cloud-migration-run'],
+  endpoints: {
+    // List Cloud Configs
+    getMigrationList: {
+      providesTags: ['cloud-migration-config'] /* should this be a -list? */,
+    },
+
+    // Create Cloud Config
+    createMigration: {
+      invalidatesTags: ['cloud-migration-config'],
+    },
+
+    // Get one Cloud Config
+    getCloudMigration: {
+      providesTags: ['cloud-migration-config'],
+    },
+
+    // Delete one Cloud Config
+    deleteCloudMigration: {
+      invalidatesTags: ['cloud-migration-config'],
+    },
+
+    getCloudMigrationRunList: {
+      providesTags: ['cloud-migration-run'] /* should this be a -list? */,
+    },
+
+    getCloudMigrationRun: {
+      providesTags: ['cloud-migration-run'],
+    },
+
+    runCloudMigration: {
+      invalidatesTags: ['cloud-migration-run'],
+    },
+  },
+});

public/app/features/migrate-to-cloud/mockAPI.ts

@@ -41,11 +41,13 @@ export interface ConnectStackDTOMock {
   token: string;
 }
 
-export interface MigrationResourceDTOMock {
+type MigrationResourceStatus = 'not-migrated' | 'migrated' | 'migrating' | 'failed';
+
+export interface MigrationResourceDatasource {
   uid: string;
-  status: 'not-migrated' | 'migrated' | 'migrating' | 'failed';
+  status: MigrationResourceStatus;
   statusMessage?: string;
-  type: 'datasource' | 'dashboard'; // TODO: in future this would be a discriminated union with the resource details
+  type: 'datasource';
   resource: {
     uid: string;
     name: string;
@@ -54,6 +56,19 @@ export interface MigrationResourceDTOMock {
   };
 }
 
+export interface MigrationResourceDashboard {
+  uid: string;
+  status: MigrationResourceStatus;
+  statusMessage?: string;
+  type: 'dashboard';
+  resource: {
+    uid: string;
+    name: string;
+  };
+}
+
+export type MigrationResourceDTOMock = MigrationResourceDatasource | MigrationResourceDashboard;
+
 const mockApplications = ['auth-service', 'web server', 'backend'];
 const mockEnvs = ['DEV', 'PROD'];
 const mockRoles = ['db', 'load-balancer', 'server', 'logs'];

public/app/features/migrate-to-cloud/onprem/EmptyState/CallToAction/CallToAction.tsx

@@ -3,13 +3,12 @@ import React from 'react';
 import { Box, Button, ModalsController, Text } from '@grafana/ui';
 import { Trans } from 'app/core/internationalization';
 
-import { useConnectStackMutationMock, useGetStatusQueryMock } from '../../../mockAPI';
+import { useCreateMigrationMutation } from '../../../api';
 
 import { ConnectModal } from './ConnectModal';
 
 export const CallToAction = () => {
-  const [connectStack, connectResponse] = useConnectStackMutationMock();
-  const { isFetching } = useGetStatusQueryMock();
+  const [createMigration, createMigrationResponse] = useCreateMigrationMutation();
 
   return (
     <ModalsController>
@@ -19,11 +18,11 @@ export const CallToAction = () => {
             <Trans i18nKey="migrate-to-cloud.cta.header">Let us manage your Grafana stack</Trans>
           </Text>
           <Button
-            disabled={isFetching || connectResponse.isLoading}
+            disabled={createMigrationResponse.isLoading}
             onClick={() =>
               showModal(ConnectModal, {
                 hideModal,
-                onConfirm: connectStack,
+                onConfirm: createMigration,
               })
             }
           >

public/app/features/migrate-to-cloud/onprem/EmptyState/CallToAction/ConnectModal.tsx

@@ -6,16 +6,19 @@ import { GrafanaTheme2 } from '@grafana/data';
 import { Modal, Button, Stack, TextLink, Field, Input, Text, useStyles2 } from '@grafana/ui';
 import { Trans, t } from 'app/core/internationalization';
 
-import { ConnectStackDTOMock } from '../../../mockAPI';
+import { CreateMigrationApiArg } from '../../../api';
 
 interface Props {
   hideModal: () => void;
-  onConfirm: (connectStackData: ConnectStackDTOMock) => Promise<{ data: void } | { error: unknown }>;
+  onConfirm: (connectStackData: CreateMigrationApiArg) => Promise<unknown>;
+}
+
+interface FormData {
+  token: string;
 }
 
 export const ConnectModal = ({ hideModal, onConfirm }: Props) => {
   const [isConnecting, setIsConnecting] = useState(false);
-  const cloudStackId = useId();
   const tokenId = useId();
   const styles = useStyles2(getStyles);
 
@@ -24,19 +27,22 @@ export const ConnectModal = ({ hideModal, onConfirm }: Props) => {
     register,
     formState: { errors },
     watch,
-  } = useForm<ConnectStackDTOMock>({
+  } = useForm<FormData>({
     defaultValues: {
-      stackURL: '',
       token: '',
     },
   });
 
-  const stackURL = watch('stackURL');
   const token = watch('token');
 
-  const onConfirmConnect: SubmitHandler<ConnectStackDTOMock> = async (formData) => {
+  const onConfirmConnect: SubmitHandler<FormData> = async (formData) => {
     setIsConnecting(true);
-    await onConfirm(formData);
+    // TODO: location of this is kinda weird, making it tricky to handle errors from this.
+    await onConfirm({
+      cloudMigrationRequest: {
+        authToken: formData.token,
+      },
+    });
     setIsConnecting(false);
     hideModal();
   };
@@ -49,46 +55,34 @@ export const ConnectModal = ({ hideModal, onConfirm }: Props) => {
             <Trans i18nKey="migrate-to-cloud.connect-modal.body-get-started">
               To get started, you&apos;ll need a Grafana.com account.
             </Trans>
+
             <TextLink href="https://grafana.com/auth/sign-up/create-user?pg=prod-cloud" external>
               {t('migrate-to-cloud.connect-modal.body-sign-up', 'Sign up for a Grafana.com account')}
             </TextLink>
+
             <Trans i18nKey="migrate-to-cloud.connect-modal.body-cloud-stack">
               You&apos;ll also need a cloud stack. If you just signed up, we&apos;ll automatically create your first
               stack. If you have an account, you&apos;ll need to select or create a stack.
             </Trans>
+
             <TextLink href="https://grafana.com/auth/sign-in/" external>
               {t('migrate-to-cloud.connect-modal.body-view-stacks', 'View my cloud stacks')}
             </TextLink>
-            <Trans i18nKey="migrate-to-cloud.connect-modal.body-paste-stack">
-              Once you&apos;ve decided on a stack, paste the URL below.
-            </Trans>
-            <Field
-              className={styles.field}
-              invalid={!!errors.stackURL}
-              error={errors.stackURL?.message}
-              label={t('migrate-to-cloud.connect-modal.body-url-field', 'Cloud stack URL')}
-              required
-            >
-              <Input
-                {...register('stackURL', {
-                  required: t('migrate-to-cloud.connect-modal.stack-required-error', 'Stack URL is required'),
-                })}
-                id={cloudStackId}
-                placeholder="https://example.grafana.net/"
-              />
-            </Field>
+
             <span>
               <Trans i18nKey="migrate-to-cloud.connect-modal.body-token">
                 Your self-managed Grafana installation needs special access to securely migrate content. You&apos;ll
                 need to create a migration token on your chosen cloud stack.
               </Trans>
             </span>
+
             <span>
               <Trans i18nKey="migrate-to-cloud.connect-modal.body-token-instructions">
                 Log into your cloud stack and navigate to Administration, General, Migrate to Grafana Cloud. Create a
                 migration token on that screen and paste the token here.
               </Trans>
             </span>
+
             <Field
               className={styles.field}
               invalid={!!errors.token}
@@ -110,7 +104,7 @@ export const ConnectModal = ({ hideModal, onConfirm }: Props) => {
           <Button variant="secondary" onClick={hideModal}>
             <Trans i18nKey="migrate-to-cloud.connect-modal.cancel">Cancel</Trans>
           </Button>
-          <Button type="submit" disabled={isConnecting || !(stackURL && token)}>
+          <Button type="submit" disabled={isConnecting || !token}>
             {isConnecting
               ? t('migrate-to-cloud.connect-modal.connecting', 'Connecting to this stack...')
               : t('migrate-to-cloud.connect-modal.connect', 'Connect to this stack')}

public/app/features/migrate-to-cloud/onprem/EmptyState/EmptyState.tsx

@@ -15,6 +15,7 @@ export const EmptyState = () => {
     <div className={styles.container}>
       <Stack direction="column">
         <CallToAction />
+
         <Grid
           alignItems="flex-start"
           gap={1}