feat(metrics) add links to grafana from instance detail page if its b…

…ase url is configured, add the base url to the settings

Signed-off-by: David Edler <david.edler@canonical.com>

src/pages/instances/InstanceDetail.tsx

@@ -1,5 +1,5 @@
 import { FC } from "react";
-import { Notification, Row, Strip } from "@canonical/react-components";
+import { Icon, Notification, Row, Strip } from "@canonical/react-components";
 import InstanceOverview from "./InstanceOverview";
 import InstanceTerminal from "./InstanceTerminal";
 import { useParams } from "react-router-dom";
@@ -14,6 +14,8 @@ import EditInstance from "./EditInstance";
 import InstanceDetailHeader from "pages/instances/InstanceDetailHeader";
 import CustomLayout from "components/CustomLayout";
 import TabLinks from "components/TabLinks";
+import { useSettings } from "context/useSettings";
+import { TabLink } from "@canonical/react-components/dist/components/Tabs/Tabs";
 
 const tabs: string[] = [
   "Overview",
@@ -25,6 +27,8 @@ const tabs: string[] = [
 ];
 
 const InstanceDetail: FC = () => {
+  const { data: settings } = useSettings();
+
   const { name, project, activeTab } = useParams<{
     name: string;
     project: string;
@@ -47,6 +51,22 @@ const InstanceDetail: FC = () => {
     queryFn: () => fetchInstance(name, project),
   });
 
+  const renderTabs: (string | TabLink)[] = [...tabs];
+
+  const grafanaBaseUrl = settings?.config?.["user.grafana_base_url"] ?? "";
+  if (grafanaBaseUrl) {
+    renderTabs.push({
+      label: (
+        <div>
+          <Icon name="external-link" /> Metrics
+        </div>
+      ) as unknown as string,
+      href: `${grafanaBaseUrl}&var-job=lxd&var-project=${project}&var-name=${instance?.name}&var-top=5`,
+      target: "_blank",
+      rel: "noopener noreferrer",
+    });
+  }
+
   return (
     <CustomLayout
       header={
@@ -71,7 +91,7 @@ const InstanceDetail: FC = () => {
       {!isLoading && instance && (
         <Row>
           <TabLinks
-            tabs={tabs}
+            tabs={renderTabs}
             activeTab={activeTab}
             tabUrl={`/ui/project/${project}/instance/${name}`}
           />

src/pages/settings/Settings.tsx

@@ -89,6 +89,15 @@ const Settings: FC = () => {
     });
   }
 
+  configFields.push({
+    key: "user.grafana_base_url",
+    category: "user",
+    default: "",
+    shortdesc:
+      "Url to grafana, if properly set, links to grafana will appear in the UI",
+    type: "string",
+  });
+
   let lastCategory = "";
   const rows = configFields
     .filter((configField) => {

tests/server.spec.ts

@@ -56,5 +56,5 @@ test("only user server setting available for lxd v5.0/edge", async ({
   await visitServerSettings(page);
   await page.waitForSelector(`text=Get more server settings`);
   const allSettingRows = await page.locator("#settings-table tbody tr").all();
-  expect(allSettingRows.length).toEqual(1);
+  expect(allSettingRows.length).toEqual(2);
 });