Add links to kibana dashboard panels

src/core_plugins/kibana/public/dashboard/actions/panels.js

@@ -11,6 +11,14 @@ export const setPanelTitle = createAction('SET_PANEl_TITLE',
    */
   (title, panelIndex) => ({ title, panelIndex })
 );
+export const setPanelCustomDashboardLink = createAction('SET_PANEl_CUSTOMDASHBORDLINK',
+  /**
+   * @param customDashboardLink {string}
+   * @param panelIndex {string}
+   */
+  (customDashboardLink, panelIndex) => ({ customDashboardLink, panelIndex })
+);
+
 
 
 function panelArrayToMap(panels) {

src/core_plugins/kibana/public/dashboard/panel/dashboard_panel_container.js

@@ -15,6 +15,7 @@ import {
   getFullScreenMode,
   getViewMode,
   getEmbeddableTitle,
+  getEmbeddableCustomDashboardLink,
   getEmbeddableEditUrl,
   getMaximizedPanelId,
   getEmbeddableError,
@@ -24,6 +25,7 @@ const mapStateToProps = ({ dashboard }, { panelId }) => {
   const embeddable = getEmbeddable(dashboard, panelId);
   return {
     title: embeddable ? getEmbeddableTitle(dashboard, panelId) : '',
+    customDashboardLink: embeddable ? getEmbeddableCustomDashboardLink(dashboard, panelId) : '',
     editUrl: embeddable ? getEmbeddableEditUrl(dashboard, panelId) : '',
     error: embeddable ? getEmbeddableError(dashboard, panelId) : '',
 

src/core_plugins/kibana/public/dashboard/panel/panel_header/panel_header.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-export function PanelHeader({ title, actions, isViewOnlyMode, hidePanelTitles }) {
+export function PanelHeader({ title, customDashboardLink, actions, isViewOnlyMode, hidePanelTitles }) {
   if (isViewOnlyMode && (!title || hidePanelTitles)) {
     return (
       <div className="panel-heading-floater">
@@ -12,27 +12,51 @@ export function PanelHeader({ title, actions, isViewOnlyMode, hidePanelTitles })
     );
   }
 
-  return (
-    <div className="panel-heading">
-      <span
-        data-test-subj="dashboardPanelTitle"
-        className="panel-title"
-        title={title}
-        aria-label={`Dashboard panel: ${title}`}
-      >
-        {hidePanelTitles ? '' : title}
-      </span>
-
-      <div className="kuiMicroButtonGroup">
-        {actions}
+  if (customDashboardLink) {
+    return (
+      <div className="panel-heading">
+        <span
+          data-test-subj="dashboardPanelTitle"
+          className="panel-title"
+          title={title}
+          aria-label={`Dashboard panel: ${title}`}
+        >
+          <a
+            href={customDashboardLink}
+          >
+            <u>
+              {title}
+            </u>
+          </a>
+        </span>
+        <div className="kuiMicroButtonGroup">
+          {actions}
+        </div>
       </div>
-    </div>
-  );
+    );
+  } else {
+    return (
+      <div className="panel-heading">
+        <span
+          data-test-subj="dashboardPanelTitle"
+          className="panel-title"
+          title={title}
+          aria-label={`Dashboard panel: ${title}`}
+        >
+          {title}
+        </span>
+        <div className="kuiMicroButtonGroup">
+          {actions}
+        </div>
+      </div>
+    );
+  }
 }
 
 PanelHeader.propTypes = {
   isViewOnlyMode: PropTypes.bool,
   title: PropTypes.string,
+  customDashboardLink: PropTypes.string,
   actions: PropTypes.node,
   hidePanelTitles: PropTypes.bool.isRequired,
 };

src/core_plugins/kibana/public/dashboard/panel/panel_header/panel_header_container.js

@@ -26,8 +26,10 @@ const mapStateToProps = ({ dashboard }, { panelId }) => {
   const embeddable = getEmbeddable(dashboard, panelId);
   const panel = getPanel(dashboard, panelId);
   const embeddableTitle = embeddable ? embeddable.title : '';
+  const embeddableCustomDashboardLink = embeddable ? embeddable.customDashboardLink : '';
   return {
     title: panel.title === undefined ? embeddableTitle : panel.title,
+    customDashboardLink: panel.customDashboardLink === undefined ? embeddableCustomDashboardLink : panel.customDashboardLink,
     isExpanded: getMaximizedPanelId(dashboard) === panelId,
     isViewOnlyMode: getFullScreenMode(dashboard) || getViewMode(dashboard) === DashboardViewMode.VIEW,
     hidePanelTitles: getHidePanelTitles(dashboard),
@@ -40,7 +42,7 @@ const mapDispatchToProps = (dispatch, { panelId }) => ({
 });
 
 const mergeProps = (stateProps, dispatchProps, ownProps) => {
-  const { isExpanded, isViewOnlyMode, title, hidePanelTitles } = stateProps;
+  const { isExpanded, isViewOnlyMode, title, customDashboardLink, hidePanelTitles } = stateProps;
   const { onMaximizePanel, onMinimizePanel } = dispatchProps;
   const { panelId, embeddableFactory } = ownProps;
   let actions;
@@ -60,6 +62,7 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {
 
   return {
     title,
+    customDashboardLink,
     actions,
     isViewOnlyMode,
     hidePanelTitles,

src/core_plugins/kibana/public/dashboard/panel/panel_header/panel_options_menu.js

@@ -91,6 +91,8 @@ export class PanelOptionsMenu extends React.Component {
         onReset={this.props.onResetPanelTitle}
         onUpdatePanelTitle={this.props.onUpdatePanelTitle}
         title={this.props.panelTitle}
+        onUpdatePanelCustomDashboardLink={this.props.onUpdatePanelCustomDashboardLink}
+        customDashboardLink={this.props.panelCustomDashboardLink}
         onClose={this.closePopover}
       />,
     };
@@ -136,8 +138,10 @@ export class PanelOptionsMenu extends React.Component {
 
 PanelOptionsMenu.propTypes = {
   panelTitle: PropTypes.string,
+  panelCustomDashboardLink: PropTypes.string,
   onUpdatePanelTitle: PropTypes.func.isRequired,
   onResetPanelTitle: PropTypes.func.isRequired,
+  onUpdatePanelCustomDashboardLink: PropTypes.func.isRequired,
   editUrl: PropTypes.string, // May be empty if the embeddable is still loading
   toggleExpandedPanel: PropTypes.func.isRequired,
   isExpanded: PropTypes.bool.isRequired,

src/core_plugins/kibana/public/dashboard/panel/panel_header/panel_options_menu_container.js

@@ -10,6 +10,7 @@ import {
   minimizePanel,
   resetPanelTitle,
   setPanelTitle,
+  setPanelCustomDashboardLink,
 } from '../../actions';
 
 import {
@@ -23,8 +24,10 @@ const mapStateToProps = ({ dashboard }, { panelId }) => {
   const embeddable = getEmbeddable(dashboard, panelId);
   const panel = getPanel(dashboard, panelId);
   const embeddableTitle = embeddable ? embeddable.title : '';
+  const embeddableCustomDashboardLink = embeddable ? embeddable.customDashboardLink : '';
   return {
     panelTitle: panel.title === undefined ? embeddableTitle : panel.title,
+    panelCustomDashboardLink: panel.customDashboardLink === undefined ? embeddableCustomDashboardLink : panel.customDashboardLink,
     editUrl: embeddable ? getEmbeddableEditUrl(dashboard, panelId) : null,
     isExpanded: getMaximizedPanelId(dashboard) === panelId,
   };
@@ -44,15 +47,17 @@ const mapDispatchToProps = (dispatch, { embeddableFactory, panelId }) => ({
   onMinimizePanel: () => dispatch(minimizePanel()),
   onResetPanelTitle: () => dispatch(resetPanelTitle(panelId)),
   onUpdatePanelTitle: (newTitle) => dispatch(setPanelTitle(newTitle, panelId)),
+  onUpdatePanelCustomDashboardLink: (newCustomDashboardLink) => dispatch(setPanelCustomDashboardLink(newCustomDashboardLink, panelId)),
 });
 
 const mergeProps = (stateProps, dispatchProps) => {
-  const { isExpanded, editUrl, panelTitle } = stateProps;
+  const { isExpanded, editUrl, panelTitle, panelCustomDashboardLink } = stateProps;
   const { onMaximizePanel, onMinimizePanel, ...dispatchers } = dispatchProps;
   const toggleExpandedPanel = () => isExpanded ? onMinimizePanel() : onMaximizePanel();
 
   return {
     panelTitle,
+    panelCustomDashboardLink,
     toggleExpandedPanel,
     isExpanded,
     editUrl,

src/core_plugins/kibana/public/dashboard/panel/panel_header/panel_options_menu_form.js

@@ -9,11 +9,16 @@ import {
   keyCodes,
 } from 'ui_framework/services';
 
-export function PanelOptionsMenuForm({ title, onReset, onUpdatePanelTitle, onClose }) {
-  function onInputChange(event) {
+export function PanelOptionsMenuForm({ title, customDashboardLink, onReset,
+  onUpdatePanelTitle, onUpdatePanelCustomDashboardLink, onClose }) {
+  function onTitleInputChange(event) {
     onUpdatePanelTitle(event.target.value);
   }
 
+  function onCustomDashboardLinkInputChange(event) {
+    onUpdatePanelCustomDashboardLink(event.target.value);
+  }
+
   function onKeyDown(event) {
     if (event.keyCode === keyCodes.ENTER) {
       onClose();
@@ -32,7 +37,7 @@ export function PanelOptionsMenuForm({ title, onReset, onUpdatePanelTitle, onClo
         type="text"
         className="kuiTextInput"
         value={title}
-        onChange={onInputChange}
+        onChange={onTitleInputChange}
         onKeyDown={onKeyDown}
       />
       <KuiButton
@@ -41,13 +46,26 @@ export function PanelOptionsMenuForm({ title, onReset, onUpdatePanelTitle, onClo
       >
         Reset title
       </KuiButton>
+
+      <label className="kuiFormLabel" htmlFor="panelCustomDashboardLinkInput">Custom Dashboard Link</label>
+      <input
+        id="panelCustomDashboardLinkInput"
+        name="min"
+        type="text"
+        className="kuiTextInput"
+        value={customDashboardLink}
+        onChange={onCustomDashboardLinkInputChange}
+        onKeyDown={onKeyDown}
+      />
     </div>
   );
 }
 
 PanelOptionsMenuForm.propTypes = {
   title: PropTypes.string,
+  customDashboardLink: PropTypes.string,
   onUpdatePanelTitle: PropTypes.func.isRequired,
+  onUpdatePanelCustomDashboardLink: PropTypes.func.isRequired,
   onReset: PropTypes.func.isRequired,
   onClose: PropTypes.func.isRequired,
 };

src/core_plugins/kibana/public/dashboard/reducers/panels.js

@@ -8,6 +8,7 @@ import {
   setPanels,
   resetPanelTitle,
   setPanelTitle,
+  setPanelCustomDashboardLink,
 } from '../actions';
 
 /**
@@ -98,4 +99,18 @@ export const panels = handleActions({
       ...panels,
       [payload.panelIndex]: mergePanelData(payload, panels),
     }),
+
+  [setPanelCustomDashboardLink]:
+    /**
+     * @param panels {Object.<string, PanelState>}
+     * @param payload {PanelState} The new panel state (is merged with existing).
+     * @param payload.panelIndex {String} The id of the panel to reset it's title.
+     * @param payload.customDashboardLink {String} The new title to use.
+     * @return {Object.<string, PanelState>}
+     */
+    (panels, { payload }) => ({
+      ...panels,
+      [payload.panelIndex]: mergePanelData(payload, panels),
+    }),
+
 }, {});

src/core_plugins/kibana/public/dashboard/selectors/index.js

@@ -57,6 +57,8 @@ export const getEmbeddableError = (dashboard, panelId) => getEmbeddable(dashboar
  * @return {string}
  */
 export const getEmbeddableTitle = (dashboard, panelId) => getEmbeddable(dashboard, panelId).title;
+
+export const getEmbeddableCustomDashboardLink = (dashboard, panelId) => getEmbeddable(dashboard, panelId).customDashboardLink;
 /**
  * @param dashboard {DashboardState}
  * @param panelId {string}