Load dashboard with specific version passed from FN UI (#68)

Author: DariaKunoichi

pkg/api/dashboard.go

@@ -904,7 +904,12 @@ func (hs *HTTPServer) GetDashboardVersion(c *contextmodel.ReqContext) response.R
 		CreatedBy:     creator,
 	}
 
-	return response.JSON(http.StatusOK, dashVersionMeta)
+	dto := dtos.DashboardFullWithMeta{
+		Dashboard: res.Data,
+		Meta:      meta,
+	}
+
+	return response.JSON(http.StatusOK, dto)
 }
 
 // swagger:route POST /dashboards/calculate-diff dashboards calculateDashboardDiff

public/app/core/reducers/fn-slice.ts

@@ -8,6 +8,7 @@ export interface FnGlobalState {
   FNDashboard: boolean;
   uid: string;
   slug: string;
+  version: number;
   mode: GrafanaThemeType.Light | GrafanaThemeType.Dark;
   controlsContainer: string | null;
   pageTitle: string;
@@ -20,7 +21,7 @@ export type UpdateFNGlobalStateAction = PayloadAction<Partial<FnGlobalState>>;
 
 export type SetFnStateAction = PayloadAction<Omit<FnGlobalState, 'hiddenVariables'>>;
 
-export type FnPropMappedFromState = Extract<keyof FnGlobalState, 'FNDashboard' | 'hiddenVariables' | 'mode' | 'uid' | 'queryParams' | 'slug'>;
+export type FnPropMappedFromState = Extract<keyof FnGlobalState, 'FNDashboard' | 'hiddenVariables' | 'mode' | 'uid' | 'queryParams' | 'slug' | 'version'>;
 export type FnStateProp = keyof FnGlobalState;
 
 export type FnPropsMappedFromState = Pick<FnGlobalState, FnPropMappedFromState>;
@@ -34,6 +35,7 @@ export const fnStateProps: FnStateProp[] = [
   'queryParams',
   'slug',
   'uid',
+  'version',
 ];
 
 export const fnPropsMappedFromState: readonly FnPropMappedFromState[] = [
@@ -43,6 +45,7 @@ export const fnPropsMappedFromState: readonly FnPropMappedFromState[] = [
   'uid',
   'queryParams',
   'slug',
+  'version',
 ] as const;
 
 const INITIAL_MODE = GrafanaThemeType.Light;
@@ -54,6 +57,7 @@ export const INITIAL_FN_STATE: FnGlobalState = {
   FNDashboard: false,
   uid: '',
   slug: '',
+  version: 1,
   mode: INITIAL_MODE,
   controlsContainer: null,
   pageTitle: '',

public/app/core/services/backend_srv.ts

@@ -524,13 +524,20 @@ export class BackendSrv implements BackendService {
     return getDashboardAPI().getDashboardDTO(uid);
   }
 
-  validateDashboard(dashboard: DashboardModel): Promise<ValidateDashboardResponse> {
-    // support for this function will be implemented in the k8s flavored api-server
-    // hidden by experimental feature flag:
-    //  config.featureToggles.showDashboardValidationWarnings
-    return Promise.resolve({
-      isValid: false,
-      message: 'dashboard validation is not supported',
+  getDashboardByUidVersion(uid: string, version: number): Promise<DashboardDTO> {
+    return this.get<DashboardDTO>(`/api/dashboards/uid/${uid}/versions/${version}`);
+  }
+
+  validateDashboard(dashboard: DashboardModel) {
+    // We want to send the dashboard as a JSON string (in the JSON body payload) so we can get accurate error line numbers back
+    const dashboardJson = JSON.stringify(dashboard, replaceJsonNulls, 2);
+
+    return this.request<ValidateDashboardResponse>({
+      method: 'POST',
+      url: `/api/dashboards/validate`,
+      data: { dashboard: dashboardJson },
+      showSuccessAlert: false,
+      showErrorAlert: false,
     });
   }
 
@@ -562,3 +569,10 @@ interface ValidateDashboardResponse {
   isValid: boolean;
   message?: string;
 }
+
+function replaceJsonNulls<T extends unknown>(key: string, value: T): T | undefined {
+  if (typeof value === 'number' && !isFinite(value)) {
+    return undefined;
+  }
+  return value;
+}

public/app/features/dashboard/containers/DashboardPage.tsx

@@ -92,6 +92,7 @@ const connector = connect(mapStateToProps, mapDispatchToProps);
 type OwnProps = {
   isPublic?: boolean;
   controlsContainer?: string | null;
+  version?: FNDashboardProps['version'];
   fnLoader?: FNDashboardProps['fnLoader'];
   isLoading?: FNDashboardProps['isLoading']
 };
@@ -201,7 +202,8 @@ export class UnthemedDashboardPage extends PureComponent<Props, State> {
       urlSlug: match.params.slug,
       urlUid: match.params.uid,
       urlType: match.params.type,
-      urlFolderUid: queryParams.folderUid,
+      urlFolderId: queryParams.folderId,
+      version: match.params.version,
       panelType: queryParams.panelType,
       routeName: this.props.route.routeName,
       fixUrl: !isPublic && !FNDashboard,
@@ -225,6 +227,7 @@ export class UnthemedDashboardPage extends PureComponent<Props, State> {
 
       if (
         prevProps.match.params.uid !== match.params.uid ||
+        prevProps.match.params.version !== match.params.version ||
         (routeReloadCounter !== undefined && this.forceRouteReloadCounter !== routeReloadCounter)
       ) {
         this.initDashboard();

public/app/features/dashboard/services/DashboardLoaderSrv.ts

@@ -35,8 +35,7 @@ export class DashboardLoaderSrv {
     };
   }
 
-  loadDashboard(type: UrlQueryValue, slug: string | undefined, uid: string | undefined): Promise<DashboardDTO> {
-    const stateManager = getDashboardScenePageStateManager();
+  loadDashboard(type: UrlQueryValue, slug: any, uid: any, version: any) {
     let promise;
 
     if (type === 'script' && slug) {
@@ -76,15 +75,23 @@ export class DashboardLoaderSrv {
             },
           };
         });
-    } else if (uid) {
-      const cachedDashboard = stateManager.getDashboardFromCache(uid);
-      if (cachedDashboard) {
-        return Promise.resolve(cachedDashboard);
-      }
-
-      promise = getDashboardAPI()
-        .getDashboardDTO(uid)
-        .then((result) => {
+    } else if (version !== undefined) {
+      promise = backendSrv
+      .getDashboardByUidVersion(uid, version)
+      .then((result: any) => {
+        if (result.meta.isFolder) {
+          appEvents.emit(AppEvents.alertError, ['Dashboard with version not found']);
+          throw new Error('Dashboard with version not found');
+        }
+        return result;
+      })
+      .catch(() => {
+        return this._dashboardLoadFailed('Not found', true);
+      });
+    } else {
+      promise = backendSrv
+        .getDashboardByUid(uid)
+        .then((result: any) => {
           if (result.meta.isFolder) {
             appEvents.emit(AppEvents.alertError, ['Dashboard not found']);
             throw new Error('Dashboard not found');

public/app/features/dashboard/state/initDashboard.ts

@@ -37,7 +37,8 @@ export interface InitDashboardArgs {
   urlUid?: string;
   urlSlug?: string;
   urlType?: string;
-  urlFolderUid?: string;
+  urlFolderId?: string;
+  version?: number;
   panelType?: string;
   accessToken?: string;
   routeName?: string;
@@ -84,10 +85,10 @@ async function fetchDashboard(
         return dashDTO;
       }
       case DashboardRoutes.Public: {
-        return await dashboardLoaderSrv.loadDashboard('public', args.urlSlug, args.accessToken);
+        return await dashboardLoaderSrv.loadDashboard('public', args.urlSlug, args.accessToken, args.version);
       }
       case DashboardRoutes.Normal: {
-        const dashDTO: DashboardDTO = await dashboardLoaderSrv.loadDashboard(args.urlType, args.urlSlug, args.urlUid);
+        const dashDTO: DashboardDTO = await dashboardLoaderSrv.loadDashboard(args.urlType, args.urlSlug, args.urlUid, args.version);
 
         // only the folder API has information about ancestors
         // get parent folder (if it exists) and put it in the store
@@ -127,7 +128,7 @@ async function fetchDashboard(
       }
       case DashboardRoutes.Path: {
         const path = args.urlSlug ?? '';
-        return await dashboardLoaderSrv.loadDashboard(DashboardRoutes.Path, path, path);
+        return await dashboardLoaderSrv.loadDashboard(DashboardRoutes.Path, path, path, args.version);
       }
       default:
         throw { message: 'Unknown route ' + args.routeName };

public/app/fn-app/create-mfe.ts

@@ -292,6 +292,7 @@ class createMfe {
             uid: other.uid,
             hiddenVariables: other.hiddenVariables,
             slug: other.slug,
+            version: other.version,
             queryParams: other.queryParams,
           })
         );

public/app/fn-app/types.ts

@@ -22,6 +22,7 @@ export interface FNDashboardProps {
   name: string;
   uid: string;
   slug: string;
+  version: number;
   mode: GrafanaThemeType.Dark | GrafanaThemeType.Light;
   queryParams: ParsedQuery<string>;
   fnError?: ReactNode;