Previews: capability check (#44601)

* add SQL migrations

* dashboard previews from sql: poc

* added todos

* refactor: use the same enums where possible

* use useEffect, always return json

* added todo

* refactor + delete files after use

* refactor + fix manual thumbnail upload

* refactor: move all interactions with sqlStore to thumbnail repo

* refactor: remove file operations in thumb crawler/service

* refactor: fix dashboard_thumbs sql store

* refactor: extracted thumbnail fetching/updating to a hook

* refactor: store thumbnails in redux store

* refactor: store thumbnails in redux store

* refactor: private'd repo methods

* removed redux storage, saving images as blobs

* allow for configurable rendering timeouts

* added 1) query for dashboards with stale thumbnails, 2) command for marking thumbnails as stale

* use sql-based queue in crawler

* ui for marking thumbnails as stale

* replaced `stale` boolean prop with `state` enum

* introduce rendering session

* compilation errors

* fix crawler stop button

* rename thumbnail state frozen to locked

* #44449: fix merge conflicts

* #44449: remove thumb methods from `Store` interface

* #44449: clean filepath, defer file closing

* #44449: fix rendering.Theme cyclic import

* #44449: linting

* #44449: linting

* #44449: mutex'd crawlerStatus access

* #44449: added integration tests for `sqlstore.dashboard_thumbs`

* #44449: added comments to explain the `ThumbnailState` enum

* #44449: use os.ReadFile rather then os.Open

* #44449: always enable dashboardPreviews feature during integration tests

* #44449: add /previews/system-requirements API

* #44449: remove sleep time, adjust number of threads

* #44449: review fix: add `orgId` to `DashboardThumbnailMeta`

* #44449: review fix: automatic parsing of thumbnailState

* #44449: update returned json

* #44449: UI changes - dashboard previews sytem req check

* #44449: lint fixes

* #44449: fix tests

* #44449: typo

* #44449: fix getSystemRequirements API: return 200 even if we plugin version is invalid

* #44449: fix getSystemRequirements API: don't return SemverConstraint on error

* #44449: fix getSystemRequirements API

* #44449: fix previews sytem requirements text

* #44449: add `doThumbnailsExist` to repo

* #44449: remove redux api

* #44449: add missing model

* #44449: implement frontedsettings-driven capability check

* #44449: simplify

* #44449: revert test changes

* #44449: add dummy setup settings

* #44449: implicit typing over `FC<Props>`

* #44449: refactor conditionals

* #44449: replace `getText` with a react component

* #44449: fix component interface

* #44449: add onRemove to `PreviewsSystemRequirements` alert

* #44449: add bottom/top margin to previewSystemRequirements modal

* #44449: merge conflict fix

* #44449: remove console.log

Co-authored-by: Ryan McKinley <ryantxu@gmail.com>
Co-authored-by: Alexander Emelin <frvzmb@gmail.com>

packages/grafana-runtime/src/config.ts

@@ -66,6 +66,13 @@ export class GrafanaBootConfig implements GrafanaConfig {
   featureToggles: FeatureToggles = {};
   licenseInfo: LicenseInfo = {} as LicenseInfo;
   rendererAvailable = false;
+  dashboardPreviews: {
+    systemRequirements: {
+      met: boolean;
+      requiredImageRendererPluginVersion: string;
+    };
+    thumbnailsExist: boolean;
+  } = { systemRequirements: { met: false, requiredImageRendererPluginVersion: '' }, thumbnailsExist: false };
   rendererVersion = '';
   http2Enabled = false;
   dateFormats?: SystemDateFormatSettings;

packages/grafana-ui/src/components/Alert/Alert.tsx

@@ -19,6 +19,7 @@ export interface Props extends HTMLAttributes<HTMLDivElement> {
   elevated?: boolean;
   buttonContent?: React.ReactNode | string;
   bottomSpacing?: number;
+  topSpacing?: number;
 }
 
 function getIconFromSeverity(severity: AlertVariant): string {
@@ -37,11 +38,22 @@ function getIconFromSeverity(severity: AlertVariant): string {
 
 export const Alert = React.forwardRef<HTMLDivElement, Props>(
   (
-    { title, onRemove, children, buttonContent, elevated, bottomSpacing, className, severity = 'error', ...restProps },
+    {
+      title,
+      onRemove,
+      children,
+      buttonContent,
+      elevated,
+      bottomSpacing,
+      topSpacing,
+      className,
+      severity = 'error',
+      ...restProps
+    },
     ref
   ) => {
     const theme = useTheme2();
-    const styles = getStyles(theme, severity, elevated, bottomSpacing);
+    const styles = getStyles(theme, severity, elevated, bottomSpacing, topSpacing);
 
     return (
       <div
@@ -77,7 +89,13 @@ export const Alert = React.forwardRef<HTMLDivElement, Props>(
 
 Alert.displayName = 'Alert';
 
-const getStyles = (theme: GrafanaTheme2, severity: AlertVariant, elevated?: boolean, bottomSpacing?: number) => {
+const getStyles = (
+  theme: GrafanaTheme2,
+  severity: AlertVariant,
+  elevated?: boolean,
+  bottomSpacing?: number,
+  topSpacing?: number
+) => {
   const color = theme.colors[severity];
   const borderRadius = theme.shape.borderRadius();
 
@@ -92,6 +110,7 @@ const getStyles = (theme: GrafanaTheme2, severity: AlertVariant, elevated?: bool
       background: ${theme.colors.background.secondary};
       box-shadow: ${elevated ? theme.shadows.z3 : theme.shadows.z1};
       margin-bottom: ${theme.spacing(bottomSpacing ?? 2)};
+      margin-top: ${theme.spacing(topSpacing ?? 0)};
 
       &:before {
         content: '';

pkg/api/frontendsettings.go

@@ -275,6 +275,10 @@ func (hs *HTTPServer) getFrontendSettingsMap(c *models.ReqContext) (map[string]i
 		"unifiedAlertingEnabled": hs.Cfg.UnifiedAlerting.Enabled,
 	}
 
+	if hs.ThumbService != nil {
+		jsonObj["dashboardPreviews"] = hs.ThumbService.GetDashboardPreviewsSetupSettings(c)
+	}
+
 	if hs.Cfg.GeomapDefaultBaseLayerConfig != nil {
 		jsonObj["geomapDefaultBaseLayerConfig"] = hs.Cfg.GeomapDefaultBaseLayerConfig
 	}

pkg/models/dashboard_thumbs.go

@@ -117,6 +117,10 @@ type DashboardWithStaleThumbnail struct {
 	Slug    string
 }
 
+type FindDashboardThumbnailCountCommand struct {
+	Result int64
+}
+
 type FindDashboardsWithStaleThumbnailsCommand struct {
 	IncludeManuallyUploadedThumbnails bool
 	Theme                             Theme

pkg/services/sqlstore/dashboard_thumbs.go

@@ -81,6 +81,20 @@ func (ss *SQLStore) UpdateThumbnailState(ctx context.Context, cmd *models.Update
 	return err
 }
 
+func (ss *SQLStore) FindThumbnailCount(ctx context.Context, cmd *models.FindDashboardThumbnailCountCommand) (int64, error) {
+	err := ss.WithDbSession(ctx, func(sess *DBSession) error {
+		count, err := sess.Count(&models.DashboardThumbnail{})
+		if err != nil {
+			return err
+		}
+
+		cmd.Result = count
+		return nil
+	})
+
+	return cmd.Result, err
+}
+
 func (ss *SQLStore) FindDashboardsWithStaleThumbnails(ctx context.Context, cmd *models.FindDashboardsWithStaleThumbnailsCommand) ([]*models.DashboardWithStaleThumbnail, error) {
 	err := ss.WithDbSession(ctx, func(sess *DBSession) error {
 		sess.Table("dashboard")

pkg/services/sqlstore/dashboard_thumbs_test.go

@@ -185,6 +185,23 @@ func TestSqlStorage(t *testing.T) {
 		require.Len(t, res, 1)
 		require.Equal(t, dash.Id, res[0].Id)
 	})
+
+	t.Run("Should count all dashboard thumbnails", func(t *testing.T) {
+		setup()
+		dash := insertTestDashboard(t, sqlStore, "test dash 23", 1, savedFolder.Id, false, "prod", "webapp")
+		upsertTestDashboardThumbnail(t, sqlStore, dash.Uid, dash.OrgId, 1)
+		dash2 := insertTestDashboard(t, sqlStore, "test dash 23", 2, savedFolder.Id, false, "prod", "webapp")
+		upsertTestDashboardThumbnail(t, sqlStore, dash2.Uid, dash2.OrgId, 1)
+
+		updateTestDashboard(t, sqlStore, dash, map[string]interface{}{
+			"tags": "different-tag",
+		})
+
+		cmd := models.FindDashboardThumbnailCountCommand{}
+		res, err := sqlStore.FindThumbnailCount(context.Background(), &cmd)
+		require.NoError(t, err)
+		require.Equal(t, res, int64(2))
+	})
 }
 
 func getThumbnail(t *testing.T, sqlStore *SQLStore, dashboardUID string, orgId int64) *models.DashboardThumbnail {

pkg/services/thumbs/dummy.go

@@ -26,6 +26,16 @@ func (ds *dummyService) Enabled() bool {
 	return false
 }
 
+func (ds *dummyService) GetDashboardPreviewsSetupSettings(c *models.ReqContext) dashboardPreviewsSetupConfig {
+	return dashboardPreviewsSetupConfig{
+		SystemRequirements: dashboardPreviewsSystemRequirements{
+			Met:                                false,
+			RequiredImageRendererPluginVersion: "",
+		},
+		ThumbnailsExist: false,
+	}
+}
+
 func (ds *dummyService) StartCrawler(c *models.ReqContext) response.Response {
 	result := make(map[string]string)
 	result["error"] = "Not enabled"

pkg/services/thumbs/models.go

@@ -53,6 +53,16 @@ type crawlStatus struct {
 	Last     time.Time    `json:"last,omitempty"`
 }
 
+type dashboardPreviewsSystemRequirements struct {
+	Met                                bool   `json:"met"`
+	RequiredImageRendererPluginVersion string `json:"requiredImageRendererPluginVersion"`
+}
+
+type dashboardPreviewsSetupConfig struct {
+	SystemRequirements dashboardPreviewsSystemRequirements `json:"systemRequirements"`
+	ThumbnailsExist    bool                                `json:"thumbnailsExist"`
+}
+
 type dashRenderer interface {
 
 	// Run Assumes you have already authenticated as admin.
@@ -69,6 +79,7 @@ type dashRenderer interface {
 
 type thumbnailRepo interface {
 	updateThumbnailState(ctx context.Context, state models.ThumbnailState, meta models.DashboardThumbnailMeta) error
+	doThumbnailsExist(ctx context.Context) (bool, error)
 	saveFromFile(ctx context.Context, filePath string, meta models.DashboardThumbnailMeta, dashboardVersion int) (int64, error)
 	saveFromBytes(ctx context.Context, bytes []byte, mimeType string, meta models.DashboardThumbnailMeta, dashboardVersion int) (int64, error)
 	getThumbnail(ctx context.Context, meta models.DashboardThumbnailMeta) (*models.DashboardThumbnail, error)

pkg/services/thumbs/repo.go

@@ -63,7 +63,7 @@ func (r *sqlThumbnailRepository) saveFromBytes(ctx context.Context, content []by
 
 	_, err := r.store.SaveThumbnail(ctx, cmd)
 	if err != nil {
-		r.log.Error("error saving to the db", "dashboardUID", meta.DashboardUID, "err", err)
+		r.log.Error("Error saving to the db", "dashboardUID", meta.DashboardUID, "err", err)
 		return 0, err
 	}
 
@@ -91,3 +91,13 @@ func (r *sqlThumbnailRepository) findDashboardsWithStaleThumbnails(ctx context.C
 		Kind:                              kind,
 	})
 }
+
+func (r *sqlThumbnailRepository) doThumbnailsExist(ctx context.Context) (bool, error) {
+	cmd := &models.FindDashboardThumbnailCountCommand{}
+	count, err := r.store.FindThumbnailCount(ctx, cmd)
+	if err != nil {
+		r.log.Error("Error finding thumbnails", "err", err)
+		return false, err
+	}
+	return count > 0, err
+}

pkg/services/thumbs/service.go

@@ -27,6 +27,7 @@ type Service interface {
 	Run(ctx context.Context) error
 	Enabled() bool
 	GetImage(c *models.ReqContext)
+	GetDashboardPreviewsSetupSettings(c *models.ReqContext) dashboardPreviewsSetupConfig
 
 	// from dashboard page
 	SetImage(c *models.ReqContext) // form post
@@ -41,6 +42,7 @@ type Service interface {
 type thumbService struct {
 	scheduleOptions            crawlerScheduleOptions
 	renderer                   dashRenderer
+	renderingService           rendering.Service
 	thumbnailRepo              thumbnailRepo
 	lockService                *serverlock.ServerLockService
 	features                   featuremgmt.FeatureToggles
@@ -71,6 +73,7 @@ func ProvideService(cfg *setting.Cfg, features featuremgmt.FeatureToggles, lockS
 		OrgRole: models.ROLE_ADMIN,
 	}
 	return &thumbService{
+		renderingService:           renderService,
 		renderer:                   newSimpleCrawler(renderService, gl, thumbnailRepo),
 		thumbnailRepo:              thumbnailRepo,
 		features:                   features,
@@ -196,6 +199,44 @@ func (hs *thumbService) GetImage(c *models.ReqContext) {
 	}
 }
 
+func (hs *thumbService) GetDashboardPreviewsSetupSettings(c *models.ReqContext) dashboardPreviewsSetupConfig {
+	systemRequirements := hs.getSystemRequirements()
+	thumbnailsExist, err := hs.thumbnailRepo.doThumbnailsExist(c.Req.Context())
+
+	if err != nil {
+		return dashboardPreviewsSetupConfig{
+			SystemRequirements: systemRequirements,
+			ThumbnailsExist:    false,
+		}
+	}
+
+	return dashboardPreviewsSetupConfig{
+		SystemRequirements: systemRequirements,
+		ThumbnailsExist:    thumbnailsExist,
+	}
+}
+
+func (hs *thumbService) getSystemRequirements() dashboardPreviewsSystemRequirements {
+	res, err := hs.renderingService.HasCapability(rendering.ScalingDownImages)
+	if err != nil {
+		hs.log.Error("Error when verifying dashboard previews system requirements thumbnail", "err", err.Error())
+		return dashboardPreviewsSystemRequirements{
+			Met: false,
+		}
+	}
+
+	if !res.IsSupported {
+		return dashboardPreviewsSystemRequirements{
+			Met:                                false,
+			RequiredImageRendererPluginVersion: res.SemverConstraint,
+		}
+	}
+
+	return dashboardPreviewsSystemRequirements{
+		Met: true,
+	}
+}
+
 // Hack for now -- lets you upload images explicitly
 func (hs *thumbService) SetImage(c *models.ReqContext) {
 	req := hs.parseImageReq(c, false)

public/app/features/search/components/ActionRow.tsx

@@ -17,7 +17,7 @@ const searchSrv = new SearchSrv();
 
 interface Props {
   onLayoutChange: (layout: SearchLayout) => void;
-  onShowPreviewsChange: (event: ChangeEvent<HTMLInputElement>) => void;
+  setShowPreviews: (newValue: boolean) => void;
   onSortChange: (value: SelectableValue) => void;
   onStarredFilterChange?: (event: FormEvent<HTMLInputElement>) => void;
   onTagFilterChange: (tags: string[]) => void;
@@ -29,7 +29,7 @@ interface Props {
 
 export const ActionRow: FC<Props> = ({
   onLayoutChange,
-  onShowPreviewsChange,
+  setShowPreviews,
   onSortChange,
   onStarredFilterChange = () => {},
   onTagFilterChange,
@@ -56,7 +56,7 @@ export const ActionRow: FC<Props> = ({
               label="Show previews"
               showLabel
               value={showPreviews}
-              onChange={onShowPreviewsChange}
+              onChange={(ev: ChangeEvent<HTMLInputElement>) => setShowPreviews(ev.target.checked)}
               transparent
             />
           )}

public/app/features/search/components/DashboardSearch.tsx

@@ -7,6 +7,7 @@ import { useDashboardSearch } from '../hooks/useDashboardSearch';
 import { SearchField } from './SearchField';
 import { SearchResults } from './SearchResults';
 import { ActionRow } from './ActionRow';
+import { PreviewsSystemRequirements } from './PreviewsSystemRequirements';
 
 export interface Props {
   onCloseSearch: () => void;
@@ -14,7 +15,7 @@ export interface Props {
 
 export const DashboardSearch: FC<Props> = memo(({ onCloseSearch }) => {
   const { query, onQueryChange, onTagFilterChange, onTagAdd, onSortChange, onLayoutChange } = useSearchQuery({});
-  const { results, loading, onToggleSection, onKeyDown, showPreviews, onShowPreviewsChange } = useDashboardSearch(
+  const { results, loading, onToggleSection, onKeyDown, showPreviews, setShowPreviews } = useDashboardSearch(
     query,
     onCloseSearch
   );
@@ -34,13 +35,18 @@ export const DashboardSearch: FC<Props> = memo(({ onCloseSearch }) => {
           <ActionRow
             {...{
               onLayoutChange,
-              onShowPreviewsChange: (ev) => onShowPreviewsChange(ev.target.checked),
+              setShowPreviews,
               onSortChange,
               onTagFilterChange,
               query,
               showPreviews,
             }}
           />
+          <PreviewsSystemRequirements
+            bottomSpacing={3}
+            showPreviews={showPreviews}
+            onRemove={() => setShowPreviews(false)}
+          />
           <CustomScrollbar>
             <SearchResults
               results={results}

public/app/features/search/components/ManageDashboards.tsx

@@ -62,7 +62,7 @@ export const ManageDashboards: FC<Props> = memo(({ folder }) => {
     onMoveItems,
     noFolders,
     showPreviews,
-    onShowPreviewsChange,
+    setShowPreviews,
   } = useManageDashboards(query, {}, folder);
 
   const onMoveTo = () => {
@@ -108,7 +108,7 @@ export const ManageDashboards: FC<Props> = memo(({ folder }) => {
           canMove={hasEditPermissionInFolders && canMove}
           deleteItem={onItemDelete}
           moveTo={onMoveTo}
-          onShowPreviewsChange={(ev) => onShowPreviewsChange(ev.target.checked)}
+          setShowPreviews={setShowPreviews}
           onToggleAllChecked={onToggleAllChecked}
           onStarredFilterChange={onStarredFilterChange}
           onSortChange={onSortChange}

public/app/features/search/components/PreviewsSystemRequirements.tsx

@@ -0,0 +1,93 @@
+import { Alert, useStyles2 } from '@grafana/ui';
+import React from 'react';
+import { config } from '@grafana/runtime/src';
+import { css } from '@emotion/css';
+
+export interface Props {
+  showPreviews?: boolean;
+  /** On click handler for alert button, mostly used for dismissing the alert */
+  onRemove?: (event: React.MouseEvent) => void;
+  topSpacing?: number;
+  bottomSpacing?: number;
+}
+
+const MessageLink = ({ text }: { text: string }) => (
+  <a
+    href="https://grafana.com/grafana/plugins/grafana-image-renderer"
+    target="_blank"
+    rel="noopener noreferrer"
+    className="external-link"
+  >
+    {text}
+  </a>
+);
+
+const Message = ({ requiredImageRendererPluginVersion }: { requiredImageRendererPluginVersion?: string }) => {
+  if (requiredImageRendererPluginVersion) {
+    return (
+      <>
+        You must update the <MessageLink text="Grafana image renderer plugin" /> to version{' '}
+        {requiredImageRendererPluginVersion} to enable dashboard previews. Please contact your Grafana administrator to
+        update the plugin.
+      </>
+    );
+  }
+
+  return (
+    <>
+      You must install the <MessageLink text="Grafana image renderer plugin" /> to enable dashboard previews. Please
+      contact your Grafana administrator to install the plugin.
+    </>
+  );
+};
+
+export const PreviewsSystemRequirements = ({ showPreviews, onRemove, topSpacing, bottomSpacing }: Props) => {
+  const styles = useStyles2(getStyles);
+
+  const previewsEnabled = config.featureToggles.dashboardPreviews;
+  const rendererAvailable = config.rendererAvailable;
+
+  const {
+    systemRequirements: { met: systemRequirementsMet, requiredImageRendererPluginVersion },
+    thumbnailsExist,
+  } = config.dashboardPreviews;
+
+  const arePreviewsEnabled = previewsEnabled && showPreviews;
+  const areRequirementsMet = (rendererAvailable && systemRequirementsMet) || thumbnailsExist;
+  const shouldDisplayRequirements = arePreviewsEnabled && !areRequirementsMet;
+
+  const title = requiredImageRendererPluginVersion
+    ? 'Image renderer plugin needs to be updated'
+    : 'Image renderer plugin not installed';
+
+  return (
+    <>
+      {shouldDisplayRequirements && (
+        <div className={styles.wrapper}>
+          <Alert
+            className={styles.alert}
+            topSpacing={topSpacing}
+            bottomSpacing={bottomSpacing}
+            severity="info"
+            title={title}
+            onRemove={onRemove}
+          >
+            <Message requiredImageRendererPluginVersion={requiredImageRendererPluginVersion} />
+          </Alert>
+        </div>
+      )}
+    </>
+  );
+};
+
+const getStyles = () => {
+  return {
+    wrapper: css`
+      display: flex;
+      justify-content: center;
+    `,
+    alert: css`
+      max-width: 800px;
+    `,
+  };
+};

public/app/features/search/components/SearchResultsFilter.test.tsx

@@ -37,7 +37,7 @@ const setup = (propOverrides?: Partial<Props>) => {
     onLayoutChange: noop,
     query: searchQuery,
     onSortChange: noop,
-    onShowPreviewsChange: noop,
+    setShowPreviews: noop,
     editable: true,
   };
 

public/app/features/search/components/SearchResultsFilter.tsx

@@ -1,9 +1,10 @@
-import React, { FC, ChangeEvent, FormEvent } from 'react';
+import React, { FC, FormEvent } from 'react';
 import { css } from '@emotion/css';
 import { Button, Checkbox, stylesFactory, useTheme, HorizontalGroup } from '@grafana/ui';
 import { GrafanaTheme, SelectableValue } from '@grafana/data';
 import { DashboardQuery, SearchLayout } from '../types';
 import { ActionRow } from './ActionRow';
+import { PreviewsSystemRequirements } from './PreviewsSystemRequirements';
 
 export interface Props {
   allChecked?: boolean;
@@ -13,7 +14,7 @@ export interface Props {
   hideLayout?: boolean;
   moveTo: () => void;
   onLayoutChange: (layout: SearchLayout) => void;
-  onShowPreviewsChange: (event: ChangeEvent<HTMLInputElement>) => void;
+  setShowPreviews: (newValue: boolean) => void;
   onSortChange: (value: SelectableValue) => void;
   onStarredFilterChange: (event: FormEvent<HTMLInputElement>) => void;
   onTagFilterChange: (tags: string[]) => void;
@@ -31,7 +32,7 @@ export const SearchResultsFilter: FC<Props> = ({
   hideLayout,
   moveTo,
   onLayoutChange,
-  onShowPreviewsChange,
+  setShowPreviews,
   onSortChange,
   onStarredFilterChange,
   onTagFilterChange,
@@ -46,35 +47,43 @@ export const SearchResultsFilter: FC<Props> = ({
 
   return (
     <div className={styles.wrapper}>
-      {editable && (
+      <div className={styles.rowWrapper}>
-        <div className={styles.checkboxWrapper}>
+        {editable && (
-          <Checkbox aria-label="Select all" value={allChecked} onChange={onToggleAllChecked} />
+          <div className={styles.checkboxWrapper}>
-        </div>
+            <Checkbox aria-label="Select all" value={allChecked} onChange={onToggleAllChecked} />
-      )}
+          </div>
-      {showActions ? (
+        )}
-        <HorizontalGroup spacing="md">
+        {showActions ? (
-          <Button disabled={!canMove} onClick={moveTo} icon="exchange-alt" variant="secondary">
+          <HorizontalGroup spacing="md">
-            Move
+            <Button disabled={!canMove} onClick={moveTo} icon="exchange-alt" variant="secondary">
-          </Button>
+              Move
-          <Button disabled={!canDelete} onClick={deleteItem} icon="trash-alt" variant="destructive">
+            </Button>
-            Delete
+            <Button disabled={!canDelete} onClick={deleteItem} icon="trash-alt" variant="destructive">
-          </Button>
+              Delete
-        </HorizontalGroup>
+            </Button>
-      ) : (
+          </HorizontalGroup>
-        <ActionRow
+        ) : (
-          {...{
+          <ActionRow
-            hideLayout,
+            {...{
-            onLayoutChange,
+              hideLayout,
-            onShowPreviewsChange,
+              onLayoutChange,
-            onSortChange,
+              setShowPreviews,
-            onStarredFilterChange,
+              onSortChange,
-            onTagFilterChange,
+              onStarredFilterChange,
-            query,
+              onTagFilterChange,
-            showPreviews,
+              query,
-          }}
+              showPreviews,
-          showStarredFilter
+            }}
-        />
+            showStarredFilter
-      )}
+          />
+        )}
+      </div>
+      <PreviewsSystemRequirements
+        topSpacing={2}
+        bottomSpacing={3}
+        showPreviews={showPreviews}
+        onRemove={() => setShowPreviews(false)}
+      />
     </div>
   );
 };
@@ -83,6 +92,10 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
   const { sm, md } = theme.spacing;
   return {
     wrapper: css`
+      display: flex;
+      flex-direction: column;
+    `,
+    rowWrapper: css`
       height: ${theme.height.md}px;
       display: flex;
       justify-content: flex-start;

public/app/features/search/hooks/useDashboardSearch.ts

@@ -12,7 +12,7 @@ import { useDebounce } from 'react-use';
 
 export const useDashboardSearch = (query: DashboardQuery, onCloseSearch: () => void) => {
   const reducer = useReducer(searchReducer, dashboardsSearchState);
-  const { showPreviews, onShowPreviewsChange, previewFeatureEnabled } = useShowDashboardPreviews();
+  const { showPreviews, setShowPreviews, previewFeatureEnabled } = useShowDashboardPreviews();
   const {
     state: { results, loading },
     onToggleSection,
@@ -72,6 +72,6 @@ export const useDashboardSearch = (query: DashboardQuery, onCloseSearch: () => v
     onToggleSection,
     onKeyDown,
     showPreviews,
-    onShowPreviewsChange,
+    setShowPreviews,
   };
 };

public/app/features/search/hooks/useManageDashboards.ts

@@ -47,7 +47,7 @@ export const useManageDashboards = (
     ...state,
   });
 
-  const { showPreviews, onShowPreviewsChange, previewFeatureEnabled } = useShowDashboardPreviews();
+  const { showPreviews, setShowPreviews, previewFeatureEnabled } = useShowDashboardPreviews();
   useDebounce(
     () => {
       reportDashboardListViewed('manage_dashboards', showPreviews, previewFeatureEnabled, {
@@ -123,6 +123,6 @@ export const useManageDashboards = (
     onMoveItems,
     noFolders,
     showPreviews,
-    onShowPreviewsChange,
+    setShowPreviews,
   };
 };

public/app/features/search/hooks/useShowDashboardPreviews.ts

@@ -5,9 +5,6 @@ import { useLocalStorage } from 'react-use';
 export const useShowDashboardPreviews = () => {
   const previewFeatureEnabled = Boolean(config.featureToggles.dashboardPreviews);
   const [showPreviews, setShowPreviews] = useLocalStorage<boolean>(PREVIEWS_LOCAL_STORAGE_KEY, previewFeatureEnabled);
-  const onShowPreviewsChange = (showPreviews: boolean) => {
-    setShowPreviews(showPreviews);
-  };
 
-  return { showPreviews: Boolean(showPreviews && previewFeatureEnabled), previewFeatureEnabled, onShowPreviewsChange };
+  return { showPreviews: Boolean(showPreviews && previewFeatureEnabled), previewFeatureEnabled, setShowPreviews };
 };