STALWART-31 Show migration acknowledgement on server details page (#6670

) * added changes for the show migration status Signed-off-by: Vinay Sharma <vsharma@chef.io> * added some UI changes to show the error message Signed-off-by: Vinay Sharma <vsharma@chef.io> * added some changes to change the tooltip position Signed-off-by: Vinay Sharma <vsharma@chef.io> * added changes for the preview screen * added some css changes Signed-off-by: Vinay Sharma <vsharma@chef.io> * added changes to fix the sonar cloud issue Signed-off-by: Vinay Sharma <vsharma@chef.io> * added review comment changes Signed-off-by: Vinay Sharma <vsharma@chef.io>
chef · Mar 29, 2022 · a4b4160 · a4b4160
1 parent 24e53fe
commit a4b4160
Show file tree

Hide file tree

Showing 12 changed files with 339 additions and 39 deletions.
diff --git a/components/automate-gateway/gateway/services.go b/components/automate-gateway/gateway/services.go
@@ -987,7 +987,7 @@ func (s *Server) UploadZipFile(w http.ResponseWriter, r *http.Request) {
 	var cType, fileName, serverId string
 	var content bytes.Buffer
 	file, metaData, err := r.FormFile("file")
-	serverId = r.FormValue("serverId")
+	serverId = r.FormValue("server_id")
 
 	if err != nil {
 		http.Error(w, err.Error(), http.StatusBadRequest)

diff --git a/components/automate-ui/src/app/entities/servers/server.actions.ts b/components/automate-ui/src/app/entities/servers/server.actions.ts
@@ -1,7 +1,7 @@
 import { HttpErrorResponse } from '@angular/common/http';
 import { Action } from '@ngrx/store';
 
-import { Server , User, WebUIKey } from './server.model';
+import { MigrationStatus, Server , User, WebUIKey } from './server.model';
 import { ValidateWebUIKeyResponse } from './server.requests';
 
 export enum ServerActionTypes {
@@ -29,7 +29,10 @@ export enum ServerActionTypes {
   VALIDATE_WEB_UI_KEY            = 'SERVER::VALIDATE_WEB_UI_KEY',
   VALIDATE_WEB_UI_KEY_SUCCESS    = 'SERVER::VALIDATE_WEB_UI_KEY::SUCCESS',
   VALIDATE_WEB_UI_KEY_SUCCESS_NOT= 'SERVER::VALIDATE_WEB_UI_KEY::SUCCESS_NOT',
-  VALIDATE_WEB_UI_KEY_FAILURE    = 'SERVER::VALIDATE_WEB_UI_KEY::FAILURE'
+  VALIDATE_WEB_UI_KEY_FAILURE    = 'SERVER::VALIDATE_WEB_UI_KEY::FAILURE',
+  GET_MIGRATION_STATUS           = 'SERVER::GET_MIGRATION_STATUS',
+  GET_MIGRATION_STATUS_SUCCESS   = 'SERVER::GET_MIGRATION_STATUS::SUCCESS',
+  GET_MIGRATION_STATUS_FAILURE   = 'SERVER::GET_MIGRATION_STATUS::FAILURE'
 }
 
 
@@ -199,6 +202,24 @@ export class ValidateWebUIKeyFailure implements Action {
   constructor(public payload: HttpErrorResponse) { }
 }
 
+export class GetMigrationStatus implements Action {
+  readonly type = ServerActionTypes.GET_MIGRATION_STATUS;
+
+  constructor(public payload: string) { }
+}
+
+export class GetMigrationStatusSuccess implements Action {
+  readonly type = ServerActionTypes.GET_MIGRATION_STATUS_SUCCESS;
+
+  constructor(public payload: MigrationStatus) { }
+}
+
+export class GetMigrationStatusFailure implements Action {
+  readonly type = ServerActionTypes.GET_MIGRATION_STATUS_FAILURE;
+
+  constructor(public payload: HttpErrorResponse) { }
+}
+
 export type ServerActions =
   | GetServers
   | GetServersSuccess
@@ -224,4 +245,8 @@ export type ServerActions =
   | ValidateWebUIKey
   | ValidateWebUIKeySuccess
   | ValidateWebUIKeySuccessNot
-  | ValidateWebUIKeyFailure;
+  | ValidateWebUIKeyFailure
+  | GetMigrationStatus
+  | GetMigrationStatusSuccess
+  | GetMigrationStatusFailure;
+
diff --git a/components/automate-ui/src/app/entities/servers/server.effects.ts b/components/automate-ui/src/app/entities/servers/server.effects.ts
@@ -36,7 +36,10 @@ import {
   ValidateWebUIKey,
   ValidateWebUIKeySuccess,
   ValidateWebUIKeyFailure,
-  ValidateWebUIKeySuccessNot
+  ValidateWebUIKeySuccessNot,
+  GetMigrationStatus,
+  GetMigrationStatusSuccess,
+  GetMigrationStatusFailure
 } from './server.actions';
 
 import {
@@ -251,4 +254,22 @@ export class ServerEffects {
         message: `Could not validated Web UI Key ${msg || payload.error}.`
       });
     })));
+
+  GetMigrationStatus$ = createEffect(() => this.actions$.pipe(
+    ofType(ServerActionTypes.GET_MIGRATION_STATUS),
+    mergeMap(({ payload }: GetMigrationStatus) =>
+      this.requests.getMigrationStatus(payload).pipe(
+        map((resp) => new GetMigrationStatusSuccess(resp)),
+        catchError((error: HttpErrorResponse) =>
+          observableOf(new GetMigrationStatusFailure(error)))))));
+
+  GetMigrationStatusFailure$ = createEffect(() => this.actions$.pipe(
+    ofType(ServerActionTypes.GET_MIGRATION_STATUS_FAILURE),
+    map(({ payload }: GetMigrationStatusFailure) => {
+      const msg = payload.error.error;
+      return new CreateNotification({
+        type: Type.error,
+        message: `Could not update Migration status: ${msg || payload.error}.`
+      });
+    })));
 }
diff --git a/components/automate-ui/src/app/entities/servers/server.model.ts b/components/automate-ui/src/app/entities/servers/server.model.ts
@@ -5,6 +5,9 @@ export interface Server {
   ip_address: string;
   orgs_count?: number;
   webui_key?: string;
+  migration_id?: string;
+  migration_type?: string;
+  migration_status?: string;
 }
 
 export interface User {
@@ -21,3 +24,9 @@ export interface WebUIKey {
   id: string;
   webui_key: string;
 }
+
+export interface MigrationStatus {
+  migration_id: string;
+  migration_type: string;
+  migration_status: string;
+}
diff --git a/components/automate-ui/src/app/entities/servers/server.reducer.ts b/components/automate-ui/src/app/entities/servers/server.reducer.ts
@@ -3,7 +3,7 @@ import { HttpErrorResponse } from '@angular/common/http';
 import { pipe, set, unset } from 'lodash/fp';
 import { EntityStatus } from 'app/entities/entities';
 import { ServerActionTypes, ServerActions } from './server.actions';
-import { Server, User } from './server.model';
+import { MigrationStatus, Server, User } from './server.model';
 import { ValidateWebUIKeyResponse } from './server.requests';
 
 export interface ServerEntityState extends EntityState<Server> {
@@ -18,6 +18,8 @@ export interface ServerEntityState extends EntityState<Server> {
   updateWebUIKeyStatus: EntityStatus;
   getvalidateWebUIKeyStatus: ValidateWebUIKeyResponse;
   validateWebUIKeyStatus: EntityStatus;
+  getMigrationStatus: MigrationStatus;
+  migrationStatus: EntityStatus;
 }
 
 const GET_ALL_STATUS             = 'getAllStatus';
@@ -29,6 +31,7 @@ const DELETE_STATUS              = 'deleteStatus';
 const GET_USERS_STATUS           = 'getUsersStatus';
 const UPDATE_WEB_UI_KEY_STATUS   = 'updateWebUIKeyStatus';
 const VALIDATE_WEB_UI_KEY_STATUS = 'validateWebUIKeyStatus';
+const GET_MIGRATION_STATUS       = 'migrationStatus';
 
 export const serverEntityAdapter: EntityAdapter<Server> = createEntityAdapter<Server>();
 
@@ -44,7 +47,9 @@ export const ServerEntityInitialState: ServerEntityState =
     getUsersStatus: EntityStatus.notLoaded,
     updateWebUIKeyStatus: EntityStatus.notLoaded,
     getvalidateWebUIKeyStatus: null,
-    validateWebUIKeyStatus: EntityStatus.notLoaded
+    validateWebUIKeyStatus: EntityStatus.notLoaded,
+    getMigrationStatus: null,
+    migrationStatus: EntityStatus.notLoaded
   });
 
 export function serverEntityReducer(
@@ -170,6 +175,19 @@ export function serverEntityReducer(
 
     case ServerActionTypes.VALIDATE_WEB_UI_KEY_FAILURE:
       return set(VALIDATE_WEB_UI_KEY_STATUS, EntityStatus.loadingFailure, state);
+
+    case ServerActionTypes.GET_MIGRATION_STATUS:
+      return set(GET_MIGRATION_STATUS, EntityStatus.loading, state);
+
+    case ServerActionTypes.GET_MIGRATION_STATUS_SUCCESS:
+      return pipe(
+        set(GET_MIGRATION_STATUS, EntityStatus.loadingSuccess),
+        set('getMigrationStatus', action.payload || {})
+      )(state) as ServerEntityState;
+
+    case ServerActionTypes.GET_MIGRATION_STATUS_FAILURE:
+      return set(GET_MIGRATION_STATUS, EntityStatus.loadingFailure, state);
+
   }
 
   return state;

diff --git a/components/automate-ui/src/app/entities/servers/server.requests.ts b/components/automate-ui/src/app/entities/servers/server.requests.ts
@@ -4,7 +4,7 @@ import { Observable } from 'rxjs';
 import { mapKeys, snakeCase } from 'lodash/fp';
 
 import { environment as env } from 'environments/environment';
-import { Server, User, WebUIKey } from './server.model';
+import { MigrationStatus, Server, User, WebUIKey } from './server.model';
 import { CreateServerPayload, ServerSuccessPayload } from './server.actions';
 
 export interface ServersResponse {
@@ -64,4 +64,8 @@ export class ServerRequests {
     return this.http.post<ValidateWebUIKeyResponse>
     (`${env.infra_proxy_url}/servers/validate`, payload);
   }
+
+  public getMigrationStatus(migration_id: string): Observable<MigrationStatus> {
+    return this.http.get<MigrationStatus>(`${env.infra_proxy_url}/servers/migrations/status/${migration_id}`);
+  }
 }
diff --git a/components/automate-ui/src/app/entities/servers/server.selectors.ts b/components/automate-ui/src/app/entities/servers/server.selectors.ts
@@ -71,3 +71,13 @@ export const validateWebUIKeyStatus = createSelector(
   serverState,
   (state) => state.validateWebUIKeyStatus
 );
+
+export const getMigrationStatus = createSelector(
+  serverState,
+  (state) => state.getMigrationStatus
+);
+
+export const migrationStatus = createSelector(
+  serverState,
+  (state) => state.migrationStatus
+);
diff --git a/...ate-ui/src/app/modules/infra-proxy/chef-server-details/chef-server-details.component.html b/...ate-ui/src/app/modules/infra-proxy/chef-server-details/chef-server-details.component.html
@@ -10,37 +10,87 @@
       </chef-breadcrumbs>
       <chef-page-header>
         <div class="meta-box">
+          <p class="chef-server-info-text">CHEF SERVER INFORMATION</p>
           <div class="summary-body first">
-            <chef-heading data-cy="page-title">{{ server?.name }}</chef-heading>
             <ul>
               <li>
                 <span class="heading">FQDN</span>
-                <span data-cy="node-env">{{ server?.fqdn }}</span>
+                <span class="server-entity-value" data-cy="node-env">{{ server?.fqdn }}</span>
               </li>
               <li>
                 <span class="heading">IP Address</span>
-                <span>{{ server?.ip_address }}</span>
+                <span class="server-entity-value">{{ server?.ip_address === '' ? '--' : server?.ip_address }}</span>
+              </li>
+              <li>
+                <span class="heading"></span>
+                <span class="server-entity-value"></span>
               </li>
             </ul>
           </div>
           <div class="summary-body middle">
             <ul>
               <li>
                 <span class="heading">Web UI Key</span>
-                <span *ngIf="validating" data-cy="valid-webui-key" class="webUIKeyStatus">Validating...</span>
-                <span *ngIf="(isValid && !validating)" data-cy="valid-webui-key" class="webUIKeyStatus">Valid</span>
-                <img *ngIf="(!isValid && !validating)" src="../../../../assets/img/warning.png" alt="warning" />
-                <span *ngIf="(!isValid && !validating)" class="invalidStatus">Invalid</span>
-                <span class="update-link" data-cy="open-WebKey-slider">
-                  <a
-                  data-cy="update-web-ui-key"
-                  (click)="webUIKeySlider.slidePanel()"
-                  >Update</a>
+                <span class="server-entity-value">
+                  <span *ngIf="validating" data-cy="valid-webui-key" class="webUIKeyStatus">Validating...</span>
+                  <span *ngIf="(isValid && !validating)" data-cy="valid-webui-key" class="webUIKeyStatus">Valid</span>
+                  <img *ngIf="(!isValid && !validating)" src="../../../../assets/img/warning.png" alt="warning" />
+                  <span *ngIf="(!isValid && !validating)" class="invalidStatus">Invalid</span>
+                  <span class="update-link" data-cy="open-WebKey-slider">
+                    <a
+                    data-cy="update-web-ui-key"
+                    (click)="webUIKeySlider.slidePanel()"
+                    >Update</a>
+                  </span>
                 </span>
               </li>
               <li>
-                <span class="heading">Org &amp; User last synced</span>
-                <span>Thu, Feb 04, 12:00:00 UTC</span>
+                <span class="heading">last sync date</span>
+                <span class="server-entity-value">Thu, Feb 04, 12:00:00 UTC</span>
+              </li>
+              <li>
+                <span *ngIf="migrationCompleted || migrationfailed || migrationLoading || !migrationStarted" class="heading">Last Migration Status </span>
+                <!-- Completed status -->
+                <span *ngIf="!migrationLoading && migrationStarted && migrationCompleted" class="server-entity-value">
+                  <img src='../../../../assets/img/completed.png' alt="info" />
+                  <span>Completed</span>
+                </span>
+
+                <!-- Failed status -->
+                <span *ngIf="!migrationLoading && migrationStarted && migrationfailed" class="server-entity-value" id="status-failed">
+                  <chef-tooltip position='bottom' class="visible tooltip" for='error-show-button'>
+                    <img src='../../../../assets/img/failed.png' alt="warning" />
+                    Migration failed, migration step not completed!
+                  </chef-tooltip>
+                  <img id='error-show-button' src='../../../../assets/img/failed.png' alt="info" />
+                  <span>Failed</span>
+                </span>
+
+                <!-- in progress status -->
+                <span *ngIf="!migrationLoading && migrationStarted && migrationInProgress" class="heading">Sync In Progress </span>
+                <span *ngIf="!migrationLoading && migrationStarted && migrationInProgress" class="server-entity-value svg-block">
+                  <svg viewBox="0 0 36 36" class="circular-chart single-chart blue">
+                    <path class="circle-bg"
+                      d="M18 2.0845
+                        a 15.9155 15.9155 0 0 1 0 31.831
+                        a 15.9155 15.9155 0 0 1 0 -31.831"
+                    />
+                    <path class="circle"
+                      [attr.stroke-dasharray]="currentMigrationProcess()"
+                      d="M18 2.0845
+                        a 15.9155 15.9155 0 0 1 0 31.831
+                        a 15.9155 15.9155 0 0 1 0 -31.831"
+                    />
+                  </svg>
+                  <span>{{stepsCompleted}} Steps Completed</span>
+                  <span *ngIf="migrationIsInPreview"><a
+                    data-cy="show-preview"
+                    class="preview-link"
+                    >Click to Preview</a>
+                  </span>
+                </span>
+                <span *ngIf="migrationLoading" class="server-entity-value">Loading....</span>
+                <span *ngIf="!migrationStarted" class="server-entity-value">--</span>
               </li>
             </ul>
           </div>