PMM-13122 Include variables in main menus dashboard links (#752)

* PMM-13122 Include variables in dashboard links in main menu

* PMM-13122 Pass variables only to same db type dashboards

public/app/core/components/AppChrome/MegaMenu/MegaMenuItemText.tsx

@@ -4,6 +4,7 @@ import React from 'react';
 import { GrafanaTheme2 } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 import { Icon, Link, useTheme2 } from '@grafana/ui';
+import { useLinkWithVariables } from 'app/percona/shared/helpers/navigation';
 
 export interface Props {
   children: React.ReactNode;
@@ -17,6 +18,8 @@ export function MegaMenuItemText({ children, isActive, onClick, target, url }: P
   const theme = useTheme2();
   const styles = getStyles(theme, isActive);
   const LinkComponent = !target && url.startsWith('/') ? Link : 'a';
+  // @PERCONA
+  const urlWithVariables = useLinkWithVariables(url);
 
   const linkContent = (
     <div className={styles.linkContent}>
@@ -35,7 +38,7 @@ export function MegaMenuItemText({ children, isActive, onClick, target, url }: P
       className={cx(styles.container, {
         [styles.containerActive]: isActive,
       })}
-      href={url}
+      href={urlWithVariables}
       target={target}
       onClick={onClick}
     >

public/app/percona/shared/helpers/navigation.ts

@@ -0,0 +1,21 @@
+import { getLinkSrv } from 'app/features/panel/panellinks/link_srv';
+
+export const useLinkWithVariables = (url?: string) => {
+  if (url?.match('/d/')) {
+    return getLinkSrv().getLinkUrl({
+      url: url,
+      keepTime: true,
+      // Check if the DB type matches the current one used
+      includeVars: checkDbType(url),
+    });
+  } else {
+    return url ? url : '#';
+  }
+};
+
+const checkDbType = (url: string): boolean => {
+  const currentDB = window.location.pathname.split('/')[3].split('-')[0];
+  const urlDB = url.split('/')[3].split('-')[0];
+
+  return currentDB === urlDB;
+};