RepoMirrors
/
alertmanager
mirror of https://github.com/prometheus/alertmanager
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

inject react-app in binary 

Signed-off-by: Augustin Husson <augustin.husson@amadeus.com>
This commit is contained in:
Augustin Husson 2023-02-28 12:54:30 +01:00
parent d450bed6f1
commit 25d1f32138
11 changed files with 153 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
Makefile
View File

@ -26,6 +26,18 @@ STATICCHECK_IGNORE =
# Will build both the front-end as well as the back-end # Will build both the front-end as well as the back-end
build-all: assets apiv2 build build-all: assets apiv2 build
.PHONY: build
build: build-react-app assets-compress common-build
.PHONY: build-react-app
build-react-app:
cd ui/react-app && npm install && npm run build
.PHONY: assets-compress
assets-compress:
@echo '>> compressing assets'
scripts/compress_assets.sh
.PHONY: assets .PHONY: assets
assets: asset/assets_vfsdata.go assets: asset/assets_vfsdata.go

1
go.mod
View File

@ -30,6 +30,7 @@ require (
github.com/pkg/errors v0.9.1 github.com/pkg/errors v0.9.1
github.com/prometheus/client_golang v1.14.0 github.com/prometheus/client_golang v1.14.0
github.com/prometheus/common v0.39.0 github.com/prometheus/common v0.39.0
github.com/prometheus/common/assets v0.2.0
github.com/prometheus/common/sigv4 v0.1.0 github.com/prometheus/common/sigv4 v0.1.0
github.com/prometheus/exporter-toolkit v0.8.2 github.com/prometheus/exporter-toolkit v0.8.2
github.com/rs/cors v1.8.3 github.com/rs/cors v1.8.3

2
go.sum
View File

@ -487,6 +487,8 @@ github.com/prometheus/common v0.26.0/go.mod h1:M7rCNAaPfAosfx8veZJCuw84e35h3Cfd9
github.com/prometheus/common v0.29.0/go.mod h1:vu+V0TpY+O6vW9J44gczi3Ap/oXXR10b+M/gUGO4Hls= github.com/prometheus/common v0.29.0/go.mod h1:vu+V0TpY+O6vW9J44gczi3Ap/oXXR10b+M/gUGO4Hls=
github.com/prometheus/common v0.39.0 h1:oOyhkDq05hPZKItWVBkJ6g6AtGxi+fy7F4JvUV8uhsI= github.com/prometheus/common v0.39.0 h1:oOyhkDq05hPZKItWVBkJ6g6AtGxi+fy7F4JvUV8uhsI=
github.com/prometheus/common v0.39.0/go.mod h1:6XBZ7lYdLCbkAVhwRsWTZn+IN5AB9F/NXd5w0BbEX0Y= github.com/prometheus/common v0.39.0/go.mod h1:6XBZ7lYdLCbkAVhwRsWTZn+IN5AB9F/NXd5w0BbEX0Y=
github.com/prometheus/common/assets v0.2.0 h1:0P5OrzoHrYBOSM1OigWL3mY8ZvV2N4zIE/5AahrSrfM=
github.com/prometheus/common/assets v0.2.0/go.mod h1:D17UVUE12bHbim7HzwUvtqm6gwBEaDQ0F+hIGbFbccI=
github.com/prometheus/common/sigv4 v0.1.0 h1:qoVebwtwwEhS85Czm2dSROY5fTo2PAPEVdDeppTwGX4= github.com/prometheus/common/sigv4 v0.1.0 h1:qoVebwtwwEhS85Czm2dSROY5fTo2PAPEVdDeppTwGX4=
github.com/prometheus/common/sigv4 v0.1.0/go.mod h1:2Jkxxk9yYvCkE5G1sQT7GuEXm57JrvHu9k5YwTjsNtI= github.com/prometheus/common/sigv4 v0.1.0/go.mod h1:2Jkxxk9yYvCkE5G1sQT7GuEXm57JrvHu9k5YwTjsNtI=
github.com/prometheus/exporter-toolkit v0.8.2 h1:sbJAfBXQFkG6sUkbwBun8MNdzW9+wd5YfPYofbmj0YM= github.com/prometheus/exporter-toolkit v0.8.2 h1:sbJAfBXQFkG6sUkbwBun8MNdzW9+wd5YfPYofbmj0YM=

37
scripts/compress_assets.sh Executable file
View File

@ -0,0 +1,37 @@
#!/usr/bin/env bash
#
# compress static assets
set -euo pipefail
cd ui/react-app
cp embed.go.tmpl embed.go
GZIP_OPTS="-fk"
# gzip option '-k' may not always exist in the latest gzip available on different distros.
if ! gzip -k -h &>/dev/null; then GZIP_OPTS="-f"; fi
dist="dist"
if ! [[ -d "${dist}" ]]; then
mkdir -p ${dist}
echo "<!doctype html>
<html lang=\"en\">
<head>
<meta charset=\"utf-8\">
<title>Node</title>
<base href=\"/\">
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">
<link rel=\"icon\" type=\"image/x-icon\" href=\"favicon.ico\">
</head>
<body>
<div>
<p> This is the default index, looks like you forget to generate the react app before generating the golang endpoint.</p>
</div>
</body>
</html>" > ${dist}/index.html
fi
find dist -type f -name '*.gz' -delete
find dist -type f -exec gzip $GZIP_OPTS '{}' \; -print0 | xargs -0 -I % echo %.gz | xargs echo //go:embed >> embed.go
echo var embedFS embed.FS >> embed.go

4
ui/react-app/.gitignore vendored
View File

@ -1 +1,5 @@
node_modules/ node_modules/
dist/
embed.go

16
ui/react-app/embed.go.tmpl Normal file
View File

@ -0,0 +1,16 @@
// Copyright 2023 The Prometheus Authors
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
package reactApp
import "embed"

2
ui/react-app/src/Router.tsx
View File

@ -8,7 +8,7 @@ function Router() {
return ( return (
<Suspense> <Suspense>
<Routes> <Routes>
<Route path="/status" element={<ViewStatus />} /> <Route path="/react-app/status" element={<ViewStatus />} />
</Routes> </Routes>
</Suspense> </Suspense>
); );

4
ui/react-app/src/components/navbar.tsx
View File

@ -13,7 +13,7 @@ export default function Navbar(): JSX.Element {
<Box sx={{ display: 'flex', flexDirection: 'row' }} flexGrow={1}> <Box sx={{ display: 'flex', flexDirection: 'row' }} flexGrow={1}>
<Button <Button
onClick={() => { onClick={() => {
navigate('/'); navigate('/react-app');
}} }}
> >
<Typography <Typography
@ -31,7 +31,7 @@ export default function Navbar(): JSX.Element {
<Button <Button
variant="text" variant="text"
onClick={() => { onClick={() => {
navigate('/status'); navigate('/react-app/status');
}} }}
> >
Status Status

23
ui/react-app/ui.go Normal file
View File

@ -0,0 +1,23 @@
// Copyright 2023 The Prometheus Authors
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
package reactApp
import (
"net/http"
"github.com/prometheus/common/assets"
)
//nolint:typecheck // Ignore undeclared embedFS, it is part of generated code.
var Assets = http.FS(assets.New(embedFS))

5
ui/react-app/webpack.prod.ts
View File

@ -15,8 +15,13 @@ import { Configuration } from 'webpack';
import { merge } from 'webpack-merge'; import { merge } from 'webpack-merge';
import { ESBuildMinifyPlugin } from 'esbuild-loader'; import { ESBuildMinifyPlugin } from 'esbuild-loader';
import { commonConfig } from './webpack.common'; import { commonConfig } from './webpack.common';
import path from 'path';
const prodConfig: Configuration = { const prodConfig: Configuration = {
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/react-app/',
},
mode: 'production', mode: 'production',
bail: true, bail: true,
devtool: 'source-map', devtool: 'source-map',

62
ui/web.go
View File

@ -15,17 +15,24 @@ package ui
import ( import (
"fmt" "fmt"
"io"
"net/http" "net/http"
_ "net/http/pprof" // Comment this line to disable pprof endpoint. _ "net/http/pprof" // Comment this line to disable pprof endpoint.
"path" "path"
"github.com/go-kit/log" "github.com/go-kit/log"
"github.com/prometheus/alertmanager/asset"
reactApp "github.com/prometheus/alertmanager/ui/react-app"
"github.com/prometheus/client_golang/prometheus/promhttp" "github.com/prometheus/client_golang/prometheus/promhttp"
"github.com/prometheus/common/route" "github.com/prometheus/common/route"
"github.com/prometheus/common/server"
"github.com/prometheus/alertmanager/asset"
) )
var reactRouterPaths = []string{
"/",
"/status",
}
// Register registers handlers to serve files for the web interface. // Register registers handlers to serve files for the web interface.
func Register(r *route.Router, reloadCh chan<- chan error, logger log.Logger) { func Register(r *route.Router, reloadCh chan<- chan error, logger log.Logger) {
r.Get("/metrics", promhttp.Handler().ServeHTTP) r.Get("/metrics", promhttp.Handler().ServeHTTP)
@ -62,7 +69,38 @@ func Register(r *route.Router, reloadCh chan<- chan error, logger log.Logger) {
fs.ServeHTTP(w, req) fs.ServeHTTP(w, req)
}) })
r.Post("/-/reload", http.HandlerFunc(func(w http.ResponseWriter, req *http.Request) { serveReactApp := func(w http.ResponseWriter, r *http.Request) {
f, err := reactApp.Assets.Open("/dist/index.html")
if err != nil {
w.WriteHeader(http.StatusInternalServerError)
fmt.Fprintf(w, "Error opening React index.html: %v", err)
return
}
defer func() { _ = f.Close() }()
idx, err := io.ReadAll(f)
if err != nil {
w.WriteHeader(http.StatusInternalServerError)
fmt.Fprintf(w, "Error reading React index.html: %v", err)
return
}
w.Write(idx)
}
// Static files required by the React app.
r.Get("/react-app/*filepath", func(w http.ResponseWriter, r *http.Request) {
for _, rt := range reactRouterPaths {
if r.URL.Path != "/react-app"+rt {
continue
}
serveReactApp(w, r)
return
}
r.URL.Path = path.Join("/dist", route.Param(r.Context(), "filepath"))
fs := server.StaticFileServer(reactApp.Assets)
fs.ServeHTTP(w, r)
})
r.Post("/-/reload", func(w http.ResponseWriter, req *http.Request) {
errc := make(chan error) errc := make(chan error)
defer close(errc) defer close(errc)
@ -70,22 +108,22 @@ func Register(r *route.Router, reloadCh chan<- chan error, logger log.Logger) {
if err := <-errc; err != nil { if err := <-errc; err != nil {
http.Error(w, fmt.Sprintf("failed to reload config: %s", err), http.StatusInternalServerError) http.Error(w, fmt.Sprintf("failed to reload config: %s", err), http.StatusInternalServerError)
} }
})) })
r.Get("/-/healthy", http.HandlerFunc(func(w http.ResponseWriter, _ *http.Request) { r.Get("/-/healthy", func(w http.ResponseWriter, _ *http.Request) {
w.WriteHeader(http.StatusOK) w.WriteHeader(http.StatusOK)
fmt.Fprintf(w, "OK") fmt.Fprintf(w, "OK")
})) })
r.Head("/-/healthy", http.HandlerFunc(func(w http.ResponseWriter, _ *http.Request) { r.Head("/-/healthy", func(w http.ResponseWriter, _ *http.Request) {
w.WriteHeader(http.StatusOK) w.WriteHeader(http.StatusOK)
})) })
r.Get("/-/ready", http.HandlerFunc(func(w http.ResponseWriter, _ *http.Request) { r.Get("/-/ready", func(w http.ResponseWriter, _ *http.Request) {
w.WriteHeader(http.StatusOK) w.WriteHeader(http.StatusOK)
fmt.Fprintf(w, "OK") fmt.Fprintf(w, "OK")
})) })
r.Head("/-/ready", http.HandlerFunc(func(w http.ResponseWriter, _ *http.Request) { r.Head("/-/ready", func(w http.ResponseWriter, _ *http.Request) {
w.WriteHeader(http.StatusOK) w.WriteHeader(http.StatusOK)
})) })
r.Get("/debug/*subpath", http.DefaultServeMux.ServeHTTP) r.Get("/debug/*subpath", http.DefaultServeMux.ServeHTTP)
r.Post("/debug/*subpath", http.DefaultServeMux.ServeHTTP) r.Post("/debug/*subpath", http.DefaultServeMux.ServeHTTP)