public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

FEMT: Call /bootdata and render grafana (#105176)

Browse Source 
* rename /mtfe route to /femt to match project name

* set correct navTree JSON property name

* call GetWebAssets in the request handler to prevent stale assets during development

* Call /bootdata and render grafana

* set nonce on script

* write csp header in index handler

* write report-only csp as well

* debug stuff

* more debug logging

* move importing app into a seperate, async-loaded module

* Clean up comments

* make /femt redirect to / in the frontend

* remove console.log

* remove stale commented code

* call __grafana_load_failed if bootstrap fails

* comment for __grafana_boot_data_promise

* remove console.log

* remove blank newline

* codeowners
This commit is contained in:
Josh Hunt
2025-05-13 09:58:46 +01:00
committed by GitHub
parent 621414ea6f
commit 91d9cac157
11 changed files with 156 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.github/CODEOWNERS
+1
View File
@@ -605,6 +605,7 @@ playwright.config.ts @grafana/plugins-platform-frontend
/public/app/dev.ts @grafana/frontend-ops
/public/app/core/utils/metrics.ts @grafana/plugins-platform-frontend
/public/app/index.ts @grafana/frontend-ops
/public/app/initApp.ts @grafana/frontend-ops
/public/app/AppWrapper.tsx @grafana/frontend-ops
/public/app/partials/ @grafana/grafana-frontend-platform
packages/grafana-runtime/src/config.ts
+13 -5
View File
@@ -306,11 +306,19 @@ function overrideFeatureTogglesFromUrl(config: GrafanaBootConfig) {
});
}
const bootData = (window as any).grafanaBootData || {
settings: {},
user: {},
navTree: [],
};
let bootData = (window as any).grafanaBootData;
if (!bootData) {
if (process.env.NODE_ENV !== 'test') {
console.error('window.grafanaBootData was not set by the time config was initialized');
}
bootData = {
settings: {},
user: {},
navTree: [],
};
}
const options = bootData.settings;
options.bootData = bootData;
pkg/api/api.go
+1 -1
View File
@@ -91,7 +91,7 @@ func (hs *HTTPServer) registerRoutes() {
if err != nil {
panic(err) // ???
}
r.Get("/mtfe", index.HandleRequest)
r.Get("/femt", index.HandleRequest)
// Temporarily expose the full bootdata via API
r.Get("/bootdata", reqNoAuth, hs.GetBootdata)
pkg/api/dtos/index.go
+1 -1
View File
@@ -15,7 +15,7 @@ type IndexViewData struct {
GoogleAnalytics4Id string `json:"-"`
GoogleAnalytics4SendManualPageViews bool `json:"-"`
GoogleTagManagerId string `json:"-"`
NavTree *navtree.NavTreeRoot `json:"navtree"`
NavTree *navtree.NavTreeRoot `json:"navTree"`
BuildVersion string `json:"-"`
BuildCommit string `json:"-"`
ThemeType string `json:"-"`
pkg/services/frontend/index.go
+27 -10
View File
@@ -24,9 +24,13 @@ type IndexProvider struct {
}
type IndexViewData struct {
CSPContent string
CSPEnabled bool
IsDevelopmentEnv bool
CSPContent string
CSPReportOnlyContent string
CSPEnabled bool
IsDevelopmentEnv bool
Config *setting.Cfg
License licensing.Licensing
AppSubUrl string
BuildVersion string
@@ -49,10 +53,6 @@ var (
)
func NewIndexProvider(cfg *setting.Cfg, license licensing.Licensing) (*IndexProvider, error) {
assets, err := webassets.GetWebAssets(context.Background(), cfg, license)
if err != nil {
return nil, err
}
t := htmlTemplates.Lookup("index.html")
if t == nil {
return nil, fmt.Errorf("missing index template")
@@ -66,10 +66,12 @@ func NewIndexProvider(cfg *setting.Cfg, license licensing.Licensing) (*IndexProv
AppSubUrl: cfg.AppSubURL, // Based on the request?
BuildVersion: cfg.BuildVersion,
BuildCommit: cfg.BuildCommit,
Assets: assets,
Config: cfg,
License: license,
CSPEnabled: cfg.CSPEnabled,
CSPContent: cfg.CSPTemplate,
CSPEnabled: cfg.CSPEnabled,
CSPContent: cfg.CSPTemplate,
CSPReportOnlyContent: cfg.CSPReportOnlyTemplate,
IsDevelopmentEnv: cfg.Env == setting.Dev,
},
@@ -95,8 +97,23 @@ func (p *IndexProvider) HandleRequest(writer http.ResponseWriter, request *http.
if data.CSPEnabled {
data.CSPContent = middleware.ReplacePolicyVariables(p.data.CSPContent, p.data.AppSubUrl, data.Nonce)
writer.Header().Set("Content-Security-Policy", data.CSPContent)
policy := middleware.ReplacePolicyVariables(p.data.CSPReportOnlyContent, p.data.AppSubUrl, data.Nonce)
writer.Header().Set("Content-Security-Policy-Report-Only", policy)
}
// TODO: moved to request handler to prevent stale assets during dev,
// but should we do this differently?
assets, err := webassets.GetWebAssets(context.Background(), data.Config, data.License)
if err != nil {
p.log.Error("error getting assets", "err", err)
writer.WriteHeader(500)
return
}
data.Assets = assets
writer.Header().Set("Content-Type", "text/html; charset=UTF-8")
writer.WriteHeader(200)
if err := p.index.Execute(writer, &data); err != nil {
pkg/services/frontend/index.html
+75 -2
View File
@@ -24,10 +24,83 @@
performance.mark('frontend_boot_css_time_seconds');
</script>
<style>
/*
Dev indicator that the page was loaded from the FEMT index.html.
TODO: Will remove before deploying to staging.
*/
.femt-dev-frame {
position: fixed;
top: 0;
bottom: 1px;
left: 0;
right: 0;
z-index: 99999;
pointer-events: none;
border: 2px solid white;
border-image-source: linear-gradient(to left, #F55F3E, #FF8833);
border-image-slice: 1;
}
</style>
</head>
<body>
<h1>Grafana Frontend Server ([[.BuildVersion]])</h1>
<p>This is a simple static HTML page served by the Grafana frontend server module.</p>
<div class="femt-dev-frame"></div>
<div id="reactRoot"></div>
<script nonce="[[.Nonce]]">
[[if .Nonce]]
window.nonce = '[[.Nonce]]';
[[end]]
window.__grafana_load_failed = function(...args) {
console.error('Failed to load Grafana', ...args);
};
window.__grafana_boot_data_promise = new Promise(async (resolve) => {
const bootData = await fetch("/bootdata");
const rawBootData = await bootData.json();
window.grafanaBootData = {
_femt: true,
...rawBootData,
}
// The per-theme CSS still contains some global styles needed
// to render the page correctly.
const cssLink = document.createElement("link");
cssLink.rel = 'stylesheet';
let theme = window.grafanaBootData.user.theme;
if (theme === "system") {
const darkQuery = window.matchMedia("(prefers-color-scheme: dark)");
theme = darkQuery.matches ? 'dark' : 'light';
}
if (theme === "light") {
document.body.classList.add("theme-light");
cssLink.href = window.grafanaBootData.assets.light;
window.grafanaBootData.user.lightTheme = true;
} else if (theme === "dark") {
document.body.classList.add("theme-dark");
cssLink.href = window.grafanaBootData.assets.dark;
window.grafanaBootData.user.lightTheme = false;
}
document.head.appendChild(cssLink);
resolve();
});
</script>
[[range $asset := .Assets.JSFiles]]
<script
nonce="[[$.Nonce]]"
src="[[$asset.FilePath]]"
type="text/javascript"
defer
></script>
[[end]]
</body>
</html>
public/app/index.ts
+16 -5
View File
@@ -1,6 +1,6 @@
import './core/trustedTypePolicies';
declare let __webpack_public_path__: string;
declare let __webpack_nonce__: string;
// The new index.html fetches window.grafanaBootData asynchronously.
// Since much of Grafana depends on it in includes side effects at import time,
// we delay loading the rest of the app using import() until the boot data is ready.
// Check if we are hosting files on cdn and set webpack public path
if (window.public_cdn_path) {
@@ -18,6 +18,17 @@ if (window.nonce) {
// This is an indication to the window.onLoad failure check that the app bundle has loaded.
window.__grafana_app_bundle_loaded = true;
import app from './app';
async function bootstrapWindowData() {
// Wait for window.grafanaBootData is ready. The new index.html loads it from
// an API call, but the old one just sets an immediately resolving promise.
await window.__grafana_boot_data_promise;
app.init();
// Use eager to ensure the app is included in the initial chunk and does not
// require additional network requests to load.
await import(/* webpackMode: "eager" */ './initApp');
}
bootstrapWindowData().catch((error) => {
console.error('Error bootstrapping Grafana', error);
window.__grafana_load_failed();
});
public/app/initApp.ts
+7
View File
@@ -0,0 +1,7 @@
// See ./index.ts for why this is in a seperate file
// Trusted types must be initialised before the rest of the world is imported
import './core/trustedTypePolicies';
import app from './app';
app.init();
public/app/routes/routes.tsx
+5
View File
@@ -527,6 +527,11 @@ export function getAppRoutes(): RouteDescriptor[] {
() => import(/* webpackChunkName: "BookmarksPage"*/ 'app/features/bookmarks/BookmarksPage')
),
},
{
// Redirect the /femt dev page to the root
path: '/femt',
component: () => <Navigate replace to="/" />,
},
...getPluginCatalogRoutes(),
...getSupportBundleRoutes(),
...getAlertingRoutes(),
public/app/types/window.d.ts
Vendored
+7
View File
@@ -4,6 +4,13 @@ export declare global {
__grafana_app_bundle_loaded: boolean;
__grafana_public_path__: string;
__grafana_load_failed: () => void;
/**
* (Potential) wait for API call to fetch boot data and place it on `window.grafanaBootData`.
* Required in new index.html to fetch necessary data before app init()
**/
__grafana_boot_data_promise: Promise<void>;
public_cdn_path: string;
nonce: string | undefined;
System: typeof System;
public/views/index.html
+3
View File
@@ -275,6 +275,9 @@
assets: [[.Assets]]
};
// FEMT index.html uses this, and we want to keep the index.ts the same for both
window.__grafana_boot_data_promise = Promise.resolve();
// Set theme to match system only on startup.
// Do not react to changes in system theme after startup.
if (window.grafanaBootData.user.theme === "system") {