hibiken / asynqmon

Web UI for Asynq task queue

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Not work when used as a library and integrated with gin

chenlujjj opened this issue · comments

Code:

h := asynqmon.New(asynqmon.Options{
		RootPath:     "/monitoring", // RootPath specifies the root for asynqmon app
		RedisConnOpt: asynq.RedisClientOpt{Addr: "127.0.0.1:6379"},
})
e.GET(h.RootPath(), func(c *bm.Context) {
       h.ServeHTTP(c.Writer, c.Request)
})

But when I opened localhost:8000/monitoring in browser, it showed nothing.

I checked the html it returned, as following:

<!doctype html>
<html lang="en">

<head>
	<meta charset="utf-8" />
	<link rel="icon" type="image/png" href="/monitoring/favicon.ico" />
	<link rel="icon" type="image/png" sizes="32x32" href="/monitoring/favicon-32x32.png" />
	<link rel="icon" type="image/png" sizes="16x16" href="/monitoring/favicon-16x16.png" />
	<meta name="viewport" content="width=device-width,initial-scale=1" />
	<meta name="theme-color" content="#000000" />
	<meta name="description" content="Asynq monitoring web console" />
	<link rel="apple-touch-icon" sizes="180x180" href="/monitoring/apple-touch-icon.png" />
	<link rel="manifest" href="/monitoring/manifest.json" />
	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
	<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
	<script>
		window.FLAG_ROOT_PATH="\/monitoring",window.FLAG_PROMETHEUS_SERVER_ADDRESS="",window.FLAG_READ_ONLY="false"
	</script>
	<title>Asynq - Monitoring</title>
</head>

<body><noscript>You need to enable JavaScript to run this app.</noscript>
	<div id="root"></div>
	<script>
		!function(e){function t(t){for(var n,i,l=t[0],a=t[1],f=t[2],c=0,s=[];c<l.length;c++)i=l[c],Object.prototype.hasOwnProperty.call(o,i)&&o[i]&&s.push(o[i][0]),o[i]=0;for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n]);for(p&&p(t);s.length;)s.shift()();return u.push.apply(u,f||[]),r()}function r(){for(var e,t=0;t<u.length;t++){for(var r=u[t],n=!0,l=1;l<r.length;l++){var a=r[l];0!==o[a]&&(n=!1)}n&&(u.splice(t--,1),e=i(i.s=r[0]))}return e}var n={},o={1:0},u=[];function i(t){if(n[t])return n[t].exports;var r=n[t]={i:t,l:!1,exports:{}};return e[t].call(r.exports,r,r.exports,i),r.l=!0,r.exports}i.m=e,i.c=n,i.d=function(e,t,r){i.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.t=function(e,t){if(1&t&&(e=i(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(i.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)i.d(r,n,function(t){return e[t]}.bind(null,n));return r},i.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(t,"a",t),t},i.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},i.p="\/monitoring/";var l=this.webpackJsonpui=this.webpackJsonpui||[],a=l.push.bind(l);l.push=t,l=l.slice();for(var f=0;f<l.length;f++)t(l[f]);var p=a;r()}([])
	</script>
	<script src="/monitoring/static/js/2.83624df2.chunk.js"></script>
	<script src="/monitoring/static/js/main.5adda2da.chunk.js"></script>
</body>

</html>

It seems like that those static files cannot be found

@chenlujjj Thank you for reporting an issue!

I'm not familiar with gin framework, but what we need is all requests with h.RootPath() prefix in URL should be sent to the handler h in the example above (not just GET requests, but also POST, DELETE, etc). Let me know if you find an answer.

I don't have enough bandwidth to look into this right now, but I'll investigate when I do have time!

I don't think it's gin issue. We encountered similar issue and it seems like the content-type header for the static js files in response are text/plain instead of the application/javascript. Since we don't have the bandwidth to deep dive, we just overwrite the response header in our middleware.

g := gin.New()
h := asynqmon.New(asynqmon.Options{
    RootPath:     "/monitor", // RootPath specifies the root for asynqmon app
    RedisConnOpt: asynq.RedisClientOpt{Addr: ":6379"},
})
g.Any("/monitor/*a", gin.WrapH(h))

it works

i found it work only linux not windows

g := gin.New()
h := asynqmon.New(asynqmon.Options{
    RootPath:     "/monitor", // RootPath specifies the root for asynqmon app
    RedisConnOpt: asynq.RedisClientOpt{Addr: ":6379"},
})
g.Any("/monitor/*a", gin.WrapH(h))

它有效

这个gin框架还是无效,本地可以,但是 build 后就不行