Service accounts: UI migration results (#68789)

* ui migration WIP

* merge

* migration tests for api

* revert chagnes to align with main

* revert chagnes to align with main

* revert chagnes to align with main

* remove unused code and comments

* revert gen files

* retry logic inplace

* fix a any

* fixed types

* migraiton results now show only result if no failures

* review comments

* wording to make it more actionable

* add migraiton summary text onyl for failed apikeys

* fixed wording and added a close button to the modal

* made the button close the modal

* moved state into component

* fix based on review, naming and removed unused code

* service account migration state optional

* making migration result undefined

* showing total and migrated numbers for a successful migration

* fix payload const to take the payload

public/app/features/api-keys/ApiKeysPage.test.tsx

@@ -44,6 +44,7 @@ const setup = (propOverrides: Partial<Props>) => {
     includeExpiredDisabled: false,
     toggleIncludeExpired: toggleIncludeExpiredMock,
     canCreate: true,
+    migrationResult: undefined,
   };
 
   Object.assign(props, propOverrides);

public/app/features/api-keys/ApiKeysPage.tsx

@@ -2,12 +2,11 @@ import React, { PureComponent } from 'react';
 import { connect, ConnectedProps } from 'react-redux';
 
 // Utils
-import { locationService } from '@grafana/runtime';
-import { InlineField, InlineSwitch, VerticalGroup } from '@grafana/ui';
+import { InlineField, InlineSwitch, VerticalGroup, Modal, Button } from '@grafana/ui';
 import { Page } from 'app/core/components/Page/Page';
 import { contextSrv } from 'app/core/core';
 import { getTimeZone } from 'app/features/profile/state/selectors';
-import { AccessControlAction, ApiKey, StoreState } from 'app/types';
+import { AccessControlAction, ApiKey, ApikeyMigrationResult, StoreState } from 'app/types';
 
 import { ApiKeysActionBar } from './ApiKeysActionBar';
 import { ApiKeysTable } from './ApiKeysTable';
@@ -18,7 +17,6 @@ import { getApiKeys, getApiKeysCount, getIncludeExpired, getIncludeExpiredDisabl
 
 function mapStateToProps(state: StoreState) {
   const canCreate = contextSrv.hasAccess(AccessControlAction.ActionAPIKeysCreate, true);
-
   return {
     apiKeys: getApiKeys(state.apiKeys),
     searchQuery: state.apiKeys.searchQuery,
@@ -28,6 +26,7 @@ function mapStateToProps(state: StoreState) {
     includeExpired: getIncludeExpired(state.apiKeys),
     includeExpiredDisabled: getIncludeExpiredDisabled(state.apiKeys),
     canCreate: canCreate,
+    migrationResult: state.apiKeys.migrationResult,
   };
 }
 
@@ -51,12 +50,15 @@ interface OwnProps {}
 export type Props = OwnProps & ConnectedProps<typeof connector>;
 
 interface State {
-  isAdding: boolean;
+  showMigrationResult: boolean;
 }
 
 export class ApiKeysPageUnconnected extends PureComponent<Props, State> {
   constructor(props: Props) {
     super(props);
+    this.state = {
+      showMigrationResult: false,
+    };
   }
 
   componentDidMount() {
@@ -71,10 +73,6 @@ export class ApiKeysPageUnconnected extends PureComponent<Props, State> {
     this.props.deleteApiKey(key.id!);
   };
 
-  onMigrateAll = () => {
-    this.props.migrateAll();
-  };
-
   onMigrateApiKey = (key: ApiKey) => {
     this.props.migrateApiKey(key.id!);
   };
@@ -89,15 +87,19 @@ export class ApiKeysPageUnconnected extends PureComponent<Props, State> {
 
   onMigrateApiKeys = async () => {
     try {
-      this.onMigrateAll();
-      let serviceAccountsUrl = '/org/serviceaccounts';
-      locationService.push(serviceAccountsUrl);
-      window.location.reload();
+      await this.props.migrateAll();
+      this.setState({
+        showMigrationResult: true,
+      });
     } catch (err) {
       console.error(err);
     }
   };
 
+  dismissModal = async () => {
+    this.setState({ showMigrationResult: false });
+  };
+
   render() {
     const {
       hasFetched,
@@ -108,6 +110,7 @@ export class ApiKeysPageUnconnected extends PureComponent<Props, State> {
       includeExpired,
       includeExpiredDisabled,
       canCreate,
+      migrationResult,
     } = this.props;
 
     if (!hasFetched) {
@@ -146,10 +149,91 @@ export class ApiKeysPageUnconnected extends PureComponent<Props, State> {
             ) : null}
           </>
         </Page.Contents>
+        {migrationResult && (
+          <MigrationSummary
+            visible={this.state.showMigrationResult}
+            data={migrationResult}
+            onDismiss={this.dismissModal}
+          />
+        )}
       </Page>
     );
   }
 }
+export type MigrationSummaryProps = {
+  visible: boolean;
+  data: ApikeyMigrationResult;
+  onDismiss: () => void;
+};
+
+const styles: { [key: string]: React.CSSProperties } = {
+  migrationSummary: {
+    padding: '20px',
+  },
+  infoText: {
+    color: '#007bff',
+  },
+  summaryDetails: {
+    marginTop: '20px',
+  },
+  summaryParagraph: {
+    margin: '10px 0',
+  },
+};
+
+export const MigrationSummary: React.FC<MigrationSummaryProps> = ({ visible, data, onDismiss }) => {
+  return (
+    <Modal title="Migration summary" isOpen={visible} closeOnBackdropClick={true} onDismiss={onDismiss}>
+      {data.failedApikeyIDs.length === 0 && (
+        <div style={styles.migrationSummary}>
+          <p>Migration Successful!</p>
+          <p>
+            <strong>Total: </strong>
+            {data.total}
+          </p>
+          <p>
+            <strong>Migrated: </strong>
+            {data.migrated}
+          </p>
+        </div>
+      )}
+      {data.failedApikeyIDs.length !== 0 && (
+        <div style={styles.migrationSummary}>
+          <p>
+            Migration Complete! Please note, while there might be a few API keys flagged as `failed migrations`, rest
+            assured, all of your API keys are fully functional and operational. Please try again or contact support.
+          </p>
+          <hr />
+          <p>
+            <strong>Total: </strong>
+            {data.total}
+          </p>
+          <p>
+            <strong>Migrated: </strong>
+            {data.migrated}
+          </p>
+          <p>
+            <strong>Failed: </strong>
+            {data.failed}
+          </p>
+          <p>
+            <strong>Failed Api Key IDs: </strong>
+            {data.failedApikeyIDs.join(', ')}
+          </p>
+          <p>
+            <strong>Failed Details: </strong>
+            {data.failedDetails.join(', ')}
+          </p>
+        </div>
+      )}
+      <Modal.ButtonRow>
+        <Button variant="secondary" onClick={onDismiss}>
+          Close
+        </Button>
+      </Modal.ButtonRow>
+    </Modal>
+  );
+};
 
 const ApiKeysPage = connector(ApiKeysPageUnconnected);
 export default ApiKeysPage;

public/app/features/api-keys/state/actions.ts

@@ -1,7 +1,7 @@
 import { getBackendSrv } from 'app/core/services/backend_srv';
 import { ThunkResult } from 'app/types';
 
-import { apiKeysLoaded, includeExpiredToggled, isFetching } from './reducers';
+import { apiKeysLoaded, includeExpiredToggled, isFetching, setMigrationResult } from './reducers';
 
 export function loadApiKeys(): ThunkResult<void> {
   return async (dispatch) => {
@@ -35,7 +35,8 @@ export function migrateApiKey(id: number): ThunkResult<void> {
 export function migrateAll(): ThunkResult<void> {
   return async (dispatch) => {
     try {
-      await getBackendSrv().post('/api/serviceaccounts/migrate');
+      const payload = await getBackendSrv().post('/api/serviceaccounts/migrate');
+      dispatch(setMigrationResult({ payload }));
     } finally {
       dispatch(loadApiKeys());
     }

public/app/features/api-keys/state/reducers.ts

@@ -8,6 +8,13 @@ export const initialApiKeysState: ApiKeysState = {
   keys: [],
   keysIncludingExpired: [],
   searchQuery: '',
+  migrationResult: {
+    total: 0,
+    migrated: 0,
+    failed: 0,
+    failedApikeyIDs: [0],
+    failedDetails: [],
+  },
 };
 
 const apiKeysSlice = createSlice({
@@ -31,10 +38,15 @@ const apiKeysSlice = createSlice({
     isFetching: (state): ApiKeysState => {
       return { ...state, hasFetched: false };
     },
+    setMigrationResult: (state, action): ApiKeysState => {
+      const { migrationResult } = action.payload;
+      return { ...state, migrationResult: migrationResult };
+    },
   },
 });
 
-export const { apiKeysLoaded, includeExpiredToggled, isFetching, setSearchQuery } = apiKeysSlice.actions;
+export const { apiKeysLoaded, includeExpiredToggled, isFetching, setSearchQuery, setMigrationResult } =
+  apiKeysSlice.actions;
 
 export const apiKeysReducer = apiKeysSlice.reducer;
 

public/app/types/apiKeys.ts

@@ -15,10 +15,19 @@ export interface ApiKey extends WithAccessControlMetadata {
   lastUsedAt?: string;
 }
 
+export interface ApikeyMigrationResult {
+  total: number;
+  migrated: number;
+  failed: number;
+  failedApikeyIDs: number[];
+  failedDetails: string[];
+}
+
 export interface ApiKeysState {
   includeExpired: boolean;
   keys: ApiKey[];
   keysIncludingExpired: ApiKey[];
   searchQuery: string;
   hasFetched: boolean;
+  migrationResult?: ApikeyMigrationResult;
 }