Whitelabelling: Override version in UI from config (#84392)

* Unify how the version is shown in the UI

* use versionString in dashboard help bundles

* fix lint

* remove comment

* fix test types

* make test less flakey

packages/grafana-data/src/types/config.ts

@@ -14,7 +14,10 @@ import { GrafanaTheme, IconName, NavLinkDTO, OrgRole } from '.';
  * @public
  */
 export interface BuildInfo {
+  // This MUST be a semver-ish version string, such as "11.0.0-54321"
   version: string;
+  // Version to show in the UI instead of version
+  versionString: string;
   commit: string;
   env: string;
   edition: GrafanaEdition;

pkg/api/dtos/frontend_settings.go

@@ -35,9 +35,16 @@ type FrontendSettingsAuthDTO struct {
 }
 
 type FrontendSettingsBuildInfoDTO struct {
-	HideVersion   bool   `json:"hideVersion"`
-	Version       string `json:"version"`
+	HideVersion bool `json:"hideVersion"`
+
+	// A semver-ish version string, such as "11.0.0-12345"
+	Version string `json:"version"`
+
+	// A branded version string to show in the UI, such as "Grafana v11.0.0-12345"
+	VersionString string `json:"versionString,omitempty"`
+
 	Commit        string `json:"commit"`
+	CommitShort   string `json:"commitShort"`
 	Buildstamp    int64  `json:"buildstamp"`
 	Edition       string `json:"edition"`
 	LatestVersion string `json:"latestVersion"`

pkg/api/frontendsettings.go

@@ -152,11 +152,15 @@ func (hs *HTTPServer) getFrontendSettings(c *contextmodel.ReqContext) (*dtos.Fro
 	hideVersion := hs.Cfg.AnonymousHideVersion && !c.IsSignedIn
 	version := setting.BuildVersion
 	commit := setting.BuildCommit
+	commitShort := getShortCommitHash(setting.BuildCommit, 10)
 	buildstamp := setting.BuildStamp
+	versionString := fmt.Sprintf(`%s v%s (%s)`, setting.ApplicationName, version, commitShort)
 
 	if hideVersion {
 		version = ""
+		versionString = setting.ApplicationName
 		commit = ""
+		commitShort = ""
 		buildstamp = 0
 	}
 
@@ -226,7 +230,9 @@ func (hs *HTTPServer) getFrontendSettings(c *contextmodel.ReqContext) (*dtos.Fro
 		BuildInfo: dtos.FrontendSettingsBuildInfoDTO{
 			HideVersion:   hideVersion,
 			Version:       version,
+			VersionString: versionString,
 			Commit:        commit,
+			CommitShort:   commitShort,
 			Buildstamp:    buildstamp,
 			Edition:       hs.License.Edition(),
 			LatestVersion: hs.grafanaUpdateChecker.LatestVersion(),
@@ -367,6 +373,13 @@ func isSupportBundlesEnabled(hs *HTTPServer) bool {
 	return hs.Cfg.SectionWithEnvOverrides("support_bundles").Key("enabled").MustBool(true)
 }
 
+func getShortCommitHash(commitHash string, maxLength int) string {
+	if len(commitHash) > maxLength {
+		return commitHash[:maxLength]
+	}
+	return commitHash
+}
+
 func (hs *HTTPServer) getFSDataSources(c *contextmodel.ReqContext, availablePlugins AvailablePlugins) (map[string]plugins.DataSourceDTO, error) {
 	orgDataSources := make([]*datasources.DataSource, 0)
 	if c.SignedInUser.GetOrgID() != 0 {

pkg/api/index.go

@@ -161,6 +161,7 @@ func (hs *HTTPServer) setIndexViewData(c *contextmodel.ReqContext) (*dtos.IndexV
 	hs.HooksService.RunIndexDataHooks(&data, c)
 
 	data.NavTree.ApplyAdminIA()
+	data.NavTree.ApplyHelpVersion(data.Settings.BuildInfo.VersionString) // RunIndexDataHooks can modify the version string
 	data.NavTree.Sort()
 
 	return &data, nil

pkg/services/navtree/models.go

@@ -127,6 +127,14 @@ func Sort(nodes []*NavLink) {
 	}
 }
 
+func (root *NavTreeRoot) ApplyHelpVersion(version string) {
+	helpNode := root.FindById("help")
+
+	if helpNode != nil {
+		helpNode.SubTitle = version
+	}
+}
+
 func (root *NavTreeRoot) ApplyAdminIA() {
 	orgAdminNode := root.FindById(NavIDCfg)
 

pkg/services/navtree/navtreeimpl/navtree.go

@@ -1,7 +1,6 @@
 package navtreeimpl
 
 import (
-	"fmt"
 	"sort"
 
 	"github.com/grafana/grafana/pkg/api/dtos"
@@ -188,25 +187,11 @@ func isSupportBundlesEnabled(s *ServiceImpl) bool {
 	return s.cfg.SectionWithEnvOverrides("support_bundles").Key("enabled").MustBool(true)
 }
 
-// don't need to show the full commit hash in the UI
-// let's substring to 10 chars like local git does automatically
-func getShortCommitHash(commitHash string, maxLength int) string {
-	if len(commitHash) > maxLength {
-		return commitHash[:maxLength]
-	}
-	return commitHash
-}
-
 func (s *ServiceImpl) addHelpLinks(treeRoot *navtree.NavTreeRoot, c *contextmodel.ReqContext) {
 	if s.cfg.HelpEnabled {
-		helpVersion := fmt.Sprintf(`%s v%s (%s)`, setting.ApplicationName, setting.BuildVersion, getShortCommitHash(setting.BuildCommit, 10))
-		if s.cfg.AnonymousHideVersion && !c.IsSignedIn {
-			helpVersion = setting.ApplicationName
-		}
-
+		// The version subtitle is set later by NavTree.ApplyHelpVersion
 		helpNode := &navtree.NavLink{
 			Text:       "Help",
-			SubTitle:   helpVersion,
 			Id:         "help",
 			Url:        "#",
 			Icon:       "question-circle",

public/app/core/components/Footer/Footer.tsx

@@ -71,7 +71,7 @@ export function getVersionLinks(hideEdition?: boolean): FooterLink[] {
   links.push({
     target: '_blank',
     id: 'version',
-    text: `v${buildInfo.version} (${buildInfo.commit})`,
+    text: buildInfo.versionString,
     url: hasReleaseNotes ? `https://github.com/grafana/grafana/blob/main/CHANGELOG.md` : undefined,
   });
 
@@ -105,8 +105,8 @@ export const Footer = React.memo(({ customLinks, hideEdition }: Props) => {
     <footer className="footer">
       <div className="text-center">
         <ul>
-          {links.map((link) => (
-            <li key={link.text}>
+          {links.map((link, index) => (
+            <li key={index}>
               <FooterItem item={link} />
             </li>
           ))}

public/app/core/services/echo/backends/grafana-javascript-agent/GrafanaJavascriptAgentBackend.test.ts

@@ -53,6 +53,7 @@ describe('GrafanaJavascriptAgentEchoBackend', () => {
     version: '1.0',
     commit: 'abcd123',
     env: 'production',
+    versionString: 'Grafana v1.0 (abcd123)',
     edition: GrafanaEdition.OpenSource,
     latestVersion: 'ba',
     hasUpdate: false,

public/app/features/dashboard-scene/inspect/HelpWizard/utils.ts

@@ -46,7 +46,7 @@ export function getGithubMarkdown(panel: VizPanel, snapshot: string): string {
     panelType: panel.state.pluginId,
     datasource: '??',
   };
-  const grafanaVersion = `${config.buildInfo.version} (${config.buildInfo.commit})`;
+  const grafanaVersion = config.buildInfo.versionString;
 
   let md = `| Key | Value |
 |--|--|
@@ -89,7 +89,7 @@ export async function getDebugDashboard(panel: VizPanel, rand: Randomize, timeRa
 
   const dsref = queryRunner?.state.datasource;
   const frames = randomizeData(getPanelDataFrames(data), rand);
-  const grafanaVersion = `${config.buildInfo.version} (${config.buildInfo.commit})`;
+  const grafanaVersion = config.buildInfo.versionString;
   const queries = queryRunner.state.queries ?? [];
   const annotationsCount = data.annotations ? data.annotations.reduce((acc, c) => c.length + acc, 0) : 0;
   const html = `<table width="100%">

public/app/features/dashboard/components/HelpWizard/HelpWizard.test.tsx

@@ -31,6 +31,6 @@ function setup() {
 describe('SupportSnapshot', () => {
   it('Can render', async () => {
     setup();
-    expect(await screen.findByRole('button', { name: 'Dashboard (2.97 KiB)' })).toBeInTheDocument();
+    expect(await screen.findByRole('button', { name: /Dashboard \([\d\.]+ KiB\)/ })).toBeInTheDocument();
   });
 });

public/app/features/dashboard/components/HelpWizard/utils.ts

@@ -43,7 +43,7 @@ export function getGithubMarkdown(panel: PanelModel, snapshot: string): string {
     panelType: saveModel.type,
     datasource: '??',
   };
-  const grafanaVersion = `${config.buildInfo.version} (${config.buildInfo.commit})`;
+  const grafanaVersion = config.buildInfo.versionString;
 
   let md = `| Key | Value |
 |--|--|
@@ -75,7 +75,7 @@ export async function getDebugDashboard(panel: PanelModel, rand: Randomize, time
 
   const dsref = panel.datasource;
   const frames = randomizeData(getPanelDataFrames(data), rand);
-  const grafanaVersion = `${config.buildInfo.version} (${config.buildInfo.commit})`;
+  const grafanaVersion = config.buildInfo.versionString;
   const queries = saveModel?.targets ?? [];
   const html = `<table width="100%">
     <tr>