DashlistPanel: Add options to include time range and variable values (#65757)

docs/sources/panels-visualizations/visualizations/dashboard-list/index.md

@@ -26,6 +26,8 @@ On each dashboard load, this panel queries the dashboard list, always providing
 
 Use these options to refine your visualization.
 
+- **Include current time range -** Select this option to propagate the time range of the current dashboard to the dashboard links. When the user clicks a link, the linked dashboard opens with the indicated time range already set.
+- **Include current template variable values -** Select this option to include template variables currently used as query parameters in a link. When the user clicks the link, any matching templates in the linked dashboard are set to the values from the link. Learn more about [Dashboard URL variables]({{< relref "../../../dashboards/build-dashboards/create-dashboard-url-variables/" >}}).
 - **Starred -** Display starred dashboards in alphabetical order.
 - **Recently viewed -** Display recently viewed dashboards in alphabetical order.
 - **Search -** Display dashboards by search query or tags. You must enter at least one value in **Query** or **Tags**. For the **Query** and **Tags** fields. Variable interpolation is supported, for example,`$my_var` or `${my_var}`.

public/app/plugins/panel/dashlist/DashList.tsx

@@ -2,16 +2,27 @@ import { css, cx } from '@emotion/css';
 import { take } from 'lodash';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
-import { GrafanaTheme2, InterpolateFunction, PanelProps } from '@grafana/data';
+import {
+  DateTime,
+  GrafanaTheme2,
+  InterpolateFunction,
+  PanelProps,
+  textUtil,
+  UrlQueryValue,
+  urlUtil,
+} from '@grafana/data';
 import { CustomScrollbar, stylesFactory, useStyles2 } from '@grafana/ui';
 import { Icon, IconProps } from '@grafana/ui/src/components/Icon/Icon';
 import { getFocusStyles } from '@grafana/ui/src/themes/mixins';
+import { getConfig } from 'app/core/config';
 import { setStarred } from 'app/core/reducers/navBarTree';
 import { getBackendSrv } from 'app/core/services/backend_srv';
 import impressionSrv from 'app/core/services/impression_srv';
 import { getDashboardSrv } from 'app/features/dashboard/services/DashboardSrv';
+import { getTimeSrv } from 'app/features/dashboard/services/TimeSrv';
 import { SearchCard } from 'app/features/search/components/SearchCard';
 import { DashboardSearchItem } from 'app/features/search/types';
+import { getVariablesUrlParams } from 'app/features/variables/getAllVariableValuesForUrl';
 import { useDispatch } from 'app/types';
 
 import { PanelLayout, PanelOptions } from './panelcfg.gen';
@@ -143,26 +154,47 @@ export function DashList(props: PanelProps<PanelOptions>) {
 
   const renderList = (dashboards: Dashboard[]) => (
     <ul>
-      {dashboards.map((dash) => (
-        <li className={css.dashlistItem} key={`dash-${dash.uid}`}>
-          <div className={css.dashlistLink}>
-            <div className={css.dashlistLinkBody}>
-              <a className={css.dashlistTitle} href={dash.url}>
-                {dash.title}
-              </a>
-              {dash.folderTitle && <div className={css.dashlistFolder}>{dash.folderTitle}</div>}
+      {dashboards.map((dash) => {
+        let url = dash.url;
+        let params: { [key: string]: string | DateTime | UrlQueryValue } = {};
+
+        if (props.options.keepTime) {
+          const range = getTimeSrv().timeRangeForUrl();
+          params['from'] = range.from;
+          params['to'] = range.to;
+        }
+
+        if (props.options.includeVars) {
+          params = {
+            ...params,
+            ...getVariablesUrlParams(),
+          };
+        }
+
+        url = urlUtil.appendQueryToUrl(url, urlUtil.toUrlParams(params));
+        url = getConfig().disableSanitizeHtml ? url : textUtil.sanitizeUrl(url);
+
+        return (
+          <li className={css.dashlistItem} key={`dash-${dash.uid}`}>
+            <div className={css.dashlistLink}>
+              <div className={css.dashlistLinkBody}>
+                <a className={css.dashlistTitle} href={url}>
+                  {dash.title}
+                </a>
+                {dash.folderTitle && <div className={css.dashlistFolder}>{dash.folderTitle}</div>}
+              </div>
+              <IconToggle
+                aria-label={`Star dashboard "${dash.title}".`}
+                className={css.dashlistStar}
+                enabled={{ name: 'favorite', type: 'mono' }}
+                disabled={{ name: 'star', type: 'default' }}
+                checked={dash.isStarred}
+                onClick={(e) => toggleDashboardStar(e, dash)}
+              />
             </div>
-            <IconToggle
-              aria-label={`Star dashboard "${dash.title}".`}
-              className={css.dashlistStar}
-              enabled={{ name: 'favorite', type: 'mono' }}
-              disabled={{ name: 'star', type: 'default' }}
-              checked={dash.isStarred}
-              onClick={(e) => toggleDashboardStar(e, dash)}
-            />
-          </div>
-        </li>
-      ))}
+          </li>
+        );
+      })}
     </ul>
   );
 

public/app/plugins/panel/dashlist/module.tsx

@@ -30,6 +30,16 @@ export const plugin = new PanelPlugin<PanelOptions>(DashList)
     }
 
     builder
+      .addBooleanSwitch({
+        path: 'keepTime',
+        name: 'Include current time range',
+        defaultValue: defaultPanelOptions.keepTime,
+      })
+      .addBooleanSwitch({
+        path: 'includeVars',
+        name: 'Include current template variable values',
+        defaultValue: defaultPanelOptions.includeVars,
+      })
       .addBooleanSwitch({
         path: 'showStarred',
         name: 'Starred',

public/app/plugins/panel/dashlist/panelcfg.cue

@@ -25,6 +25,8 @@ composableKinds: PanelCfg: {
 						PanelLayout: "list" | "previews" @cuetsy(kind="enum")
 						PanelOptions: {
 							layout?:            PanelLayout | *"list"
+							keepTime:           bool | *false
+							includeVars:        bool | *false
 							showStarred:        bool | *true
 							showRecentlyViewed: bool | *false
 							showSearch:         bool | *false

public/app/plugins/panel/dashlist/panelcfg.gen.ts

@@ -17,6 +17,8 @@ export enum PanelLayout {
 
 export interface PanelOptions {
   folderId?: number;
+  includeVars: boolean;
+  keepTime: boolean;
   layout?: PanelLayout;
   maxItems: number;
   query: string;
@@ -28,6 +30,8 @@ export interface PanelOptions {
 }
 
 export const defaultPanelOptions: Partial<PanelOptions> = {
+  includeVars: false,
+  keepTime: false,
   layout: PanelLayout.List,
   maxItems: 10,
   query: '',