Skip to content

Commit 66d7c79

Browse files
authored
Improve web instance (lowlighter#149)
1 parent a55942b commit 66d7c79

File tree

8 files changed

+124
-49
lines changed

8 files changed

+124
-49
lines changed

.github/readme/partials/setup/web.md

Lines changed: 0 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -101,22 +101,6 @@ systemctl status github_metrics
101101

102102
</details>
103103

104-
<details>
105-
<summary>⚠️ HTTP errors code</summary>
106-
107-
Following error codes may be encountered on web instance:
108-
109-
| Error code | Description |
110-
| ------------------------- | -------------------------------------------------------------------------- |
111-
| `400 Bad request` | Invalid query (e.g. unsupported template) |
112-
| `403 Forbidden` | User not allowed in `restricted` users list |
113-
| `404 Not found` | GitHub API did not found the requested user |
114-
| `429 Too many requests` | Thrown when rate limiter is trigerred |
115-
| `500 Internal error` | Server error while generating metrics images (check logs for more details) |
116-
| `503 Service unavailable` | Maximum user capacity reached, only cached images can be accessed for now |
117-
118-
</details>
119-
120104
<details>
121105
<summary>🔗 HTTP parameters</summary>
122106

source/app/web/instance.mjs

Lines changed: 30 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,8 @@
6363
skip(req, _res) {
6464
return !!cache.get(req.params.login)
6565
},
66-
message:"Too many requests",
66+
message:"Too many requests: retry later",
67+
headers:true,
6768
...ratelimiter,
6869
}))
6970
}
@@ -74,11 +75,11 @@
7475
})
7576

7677
//Base routes
77-
const limiter = ratelimit({max:debug ? Number.MAX_SAFE_INTEGER : 60, windowMs:60*1000})
78+
const limiter = ratelimit({max:debug ? Number.MAX_SAFE_INTEGER : 60, windowMs:60*1000, headers:false})
7879
const metadata = Object.fromEntries(Object.entries(conf.metadata.plugins)
79-
.filter(([key]) => !["base", "core"].includes(key))
80-
.map(([key, value]) => [key, Object.fromEntries(Object.entries(value).filter(([key]) => ["name", "icon", "categorie", "web", "supports"].includes(key)))]))
81-
const enabled = Object.entries(metadata).map(([name]) => ({name, enabled:plugins[name]?.enabled ?? false}))
80+
.map(([key, value]) => [key, Object.fromEntries(Object.entries(value).filter(([key]) => ["name", "icon", "categorie", "web", "supports"].includes(key)))])
81+
.map(([key, value]) => [key, key === "core" ? {...value, web:Object.fromEntries(Object.entries(value.web).filter(([key]) => /^config[.]/.test(key)).map(([key, value]) => [key.replace(/^config[.]/, ""), value]))} : value]))
82+
const enabled = Object.entries(metadata).filter(([_name, {categorie}]) => categorie !== "core").map(([name]) => ({name, enabled:plugins[name]?.enabled ?? false}))
8283
const templates = Object.entries(Templates).map(([name]) => ({name, enabled:(conf.settings.templates.enabled.length ? conf.settings.templates.enabled.includes(name) : true) ?? false}))
8384
const actions = {flush:new Map()}
8485
let requests = {limit:0, used:0, remaining:0, reset:NaN}
@@ -119,17 +120,18 @@
119120
app.get("/.js/prism.markdown.min.js", limiter, (req, res) => res.sendFile(`${conf.paths.node_modules}/prismjs/components/prism-markdown.min.js`))
120121
//Meta
121122
app.get("/.version", limiter, (req, res) => res.status(200).send(conf.package.version))
122-
app.get("/.requests", limiter, async(req, res) => res.status(200).json(requests))
123+
app.get("/.requests", limiter, (req, res) => res.status(200).json(requests))
124+
app.get("/.hosted", limiter, (req, res) => res.status(200).json(conf.settings.hosted || null))
123125
//Cache
124-
app.get("/.uncache", limiter, async(req, res) => {
126+
app.get("/.uncache", limiter, (req, res) => {
125127
const {token, user} = req.query
126128
if (token) {
127129
if (actions.flush.has(token)) {
128130
console.debug(`metrics/app/${actions.flush.get(token)} > flushed cache`)
129131
cache.del(actions.flush.get(token))
130132
return res.sendStatus(200)
131133
}
132-
return res.sendStatus(404)
134+
return res.sendStatus(400)
133135
}
134136
{
135137
const token = `${Math.random().toString(16).replace("0.", "")}${Math.random().toString(16).replace("0.", "")}`
@@ -139,25 +141,32 @@
139141
})
140142

141143
//Metrics
144+
const pending = new Set()
145+
app.get("/:login/:repository", ...middlewares, (req, res) => res.redirect(`/${req.params.login}?template=repository&repo=${req.params.repository}&${Object.entries(req.query).map(([key, value]) => `${key}=${encodeURIComponent(value)}`).join("&")}`))
142146
app.get("/:login", ...middlewares, async(req, res) => {
143147
//Request params
144148
const login = req.params.login?.replace(/[\n\r]/g, "")
145149
if ((restricted.length)&&(!restricted.includes(login))) {
146-
console.debug(`metrics/app/${login} > 403 (not in whitelisted users)`)
147-
return res.sendStatus(403)
150+
console.debug(`metrics/app/${login} > 403 (not in allowed users)`)
151+
return res.status(403).send(`Forbidden: "${login}" not in allowed users`)
148152
}
149153
//Read cached data if possible
150154
if ((!debug)&&(cached)&&(cache.get(login))) {
151155
const {rendered, mime} = cache.get(login)
152156
res.header("Content-Type", mime)
153-
res.send(rendered)
154-
return
157+
return res.send(rendered)
155158
}
156159
//Maximum simultaneous users
157160
if ((maxusers)&&(cache.size()+1 > maxusers)) {
158161
console.debug(`metrics/app/${login} > 503 (maximum users reached)`)
159-
return res.sendStatus(503)
162+
return res.status(503).send("Service Unavailable: maximum users reached, only cached metrics are available")
160163
}
164+
//Prevent multiples requests
165+
if (pending.has(login)) {
166+
console.debug(`metrics/app/${login} > 409 (multiple requests)`)
167+
return res.status(409).send(`Conflict: a request for "${login}" is being process, retry later`)
168+
}
169+
pending.add(login)
161170

162171
//Compute rendering
163172
try {
@@ -175,23 +184,27 @@
175184
cache.put(login, {rendered, mime}, cached)
176185
//Send response
177186
res.header("Content-Type", mime)
178-
res.send(rendered)
187+
return res.send(rendered)
179188
}
180189
//Internal error
181190
catch (error) {
182191
//Not found user
183192
if ((error instanceof Error)&&(/^user not found$/.test(error.message))) {
184193
console.debug(`metrics/app/${login} > 404 (user/organization not found)`)
185-
return res.sendStatus(404)
194+
return res.status(404).send(`Not found: unknown user or organization "${login}"`)
186195
}
187196
//Invalid template
188197
if ((error instanceof Error)&&(/^unsupported template$/.test(error.message))) {
189198
console.debug(`metrics/app/${login} > 400 (bad request)`)
190-
return res.sendStatus(400)
199+
return res.status(400).send(`Bad request: unsupported template "${req.query.template}"`)
191200
}
192201
//General error
193202
console.error(error)
194-
res.sendStatus(500)
203+
return res.status(500).send("Internal Server Error: failed to process metrics correctly")
204+
}
205+
//After rendering
206+
finally {
207+
pending.delete(login)
195208
}
196209
})
197210

source/app/web/settings.example.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,10 @@
1313
"mocked": false, "//": "Use mocked data instead of live APIs (use 'force' to use mocked token even if real token are defined)",
1414
"repositories": 100, "//": "Number of repositories to use",
1515
"padding": ["6%", "15%"], "//": "Image padding (default)",
16+
"hosted": {
17+
"by": "", "//": "Web instance host (displayed in footer)",
18+
"link": "", "//": "Web instance host link (displayed in footer)"
19+
},
1620
"community": {
1721
"templates": [], "//": "Additional community templates to setup"
1822
},

source/app/web/statics/app.js

Lines changed: 17 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,11 @@
55
const {data:metadata} = await axios.get("/.plugins.metadata")
66
const {data:base} = await axios.get("/.plugins.base")
77
const {data:version} = await axios.get("/.version")
8+
const {data:hosted} = await axios.get("/.hosted")
89
templates.sort((a, b) => (a.name.startsWith("@") ^ b.name.startsWith("@")) ? (a.name.startsWith("@") ? 1 : -1) : a.name.localeCompare(b.name))
10+
//Disable unsupported options
11+
delete metadata.core.web.output
12+
delete metadata.core.web.twemojis
913
//App
1014
return new Vue({
1115
//Initialization
@@ -52,10 +56,9 @@
5256
palette:"light",
5357
requests:{limit:0, used:0, remaining:0, reset:0},
5458
cached:new Map(),
55-
config:{
56-
timezone:"",
57-
animated:true,
58-
},
59+
config:Object.fromEntries(Object.entries(metadata.core.web).map(([key, {defaulted}]) => [key, defaulted])),
60+
metadata:Object.fromEntries(Object.entries(metadata).map(([key, {web}]) => [key, web])),
61+
hosted,
5962
plugins:{
6063
base,
6164
list:plugins,
@@ -118,12 +121,14 @@
118121
.filter(([key, value]) => `${value}`.length)
119122
.filter(([key, value]) => this.plugins.enabled[key.split(".")[0]])
120123
.map(([key, value]) => `${key}=${encodeURIComponent(value)}`)
124+
//Base options
125+
const base = Object.entries(this.plugins.options).filter(([key, value]) => (key in metadata.base.web)&&(value !== metadata.base.web[key]?.defaulted)).map(([key, value]) => `${key}=${encodeURIComponent(value)}`)
121126
//Config
122-
const config = Object.entries(this.config).filter(([key, value]) => value).map(([key, value]) => `config.${key}=${encodeURIComponent(value)}`)
127+
const config = Object.entries(this.config).filter(([key, value]) => (value)&&(value !== metadata.core.web[key]?.defaulted)).map(([key, value]) => `config.${key}=${encodeURIComponent(value)}`)
123128
//Template
124129
const template = (this.templates.selected !== templates[0]) ? [`template=${this.templates.selected}`] : []
125130
//Generated url
126-
const params = [...template, ...plugins, ...options, ...config].join("&")
131+
const params = [...template, ...base, ...plugins, ...options, ...config].join("&")
127132
return `${window.location.protocol}//${window.location.host}/${this.user}${params.length ? `?${params}` : ""}`
128133
},
129134
//Embedded generated code
@@ -157,9 +162,10 @@
157162
` template: ${this.templates.selected}`,
158163
` base: ${Object.entries(this.plugins.enabled.base).filter(([key, value]) => value).map(([key]) => key).join(", ")||'""'}`,
159164
...[
165+
...Object.entries(this.plugins.options).filter(([key, value]) => (key in metadata.base.web)&&(value !== metadata.base.web[key]?.defaulted)).map(([key, value]) => ` ${key.replace(/[.]/, "_")}: ${typeof value === "boolean" ? {true:"yes", false:"no"}[value] : value}`),
160166
...Object.entries(this.plugins.enabled).filter(([key, value]) => (key !== "base")&&(value)).map(([key]) => ` plugin_${key}: yes`),
161167
...Object.entries(this.plugins.options).filter(([key, value]) => value).filter(([key, value]) => this.plugins.enabled[key.split(".")[0]]).map(([key, value]) => ` plugin_${key.replace(/[.]/, "_")}: ${typeof value === "boolean" ? {true:"yes", false:"no"}[value] : value}`),
162-
...Object.entries(this.config).filter(([key, value]) => value).map(([key, value]) => ` config_${key.replace(/[.]/, "_")}: ${typeof value === "boolean" ? {true:"yes", false:"no"}[value] : value}`),
168+
...Object.entries(this.config).filter(([key, value]) => (value)&&(value !== metadata.core.web[key]?.defaulted)).map(([key, value]) => ` config_${key.replace(/[.]/, "_")}: ${typeof value === "boolean" ? {true:"yes", false:"no"}[value] : value}`),
163169
].sort(),
164170
].join("\n")
165171
},
@@ -185,7 +191,7 @@
185191
this.templates.placeholder.timeout = setTimeout(async () => {
186192
this.templates.placeholder.image = await placeholder(this)
187193
this.generated.content = ""
188-
this.generated.error = false
194+
this.generated.error = null
189195
}, timeout)
190196
},
191197
//Resize mock image
@@ -207,9 +213,9 @@
207213
try {
208214
await axios.get(`/.uncache?&token=${(await axios.get(`/.uncache?user=${this.user}`)).data.token}`)
209215
this.generated.content = (await axios.get(this.url)).data
210-
this.generated.error = false
211-
} catch {
212-
this.generated.error = true
216+
this.generated.error = null
217+
} catch (error) {
218+
this.generated.error = {code:error.response.status, message:error.response.data}
213219
}
214220
finally {
215221
this.generated.pending = false

source/app/web/statics/app.placeholder.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030
const data = {
3131
//Template elements
3232
style, fonts, errors:[],
33-
partials:new Set(partials),
33+
partials:new Set([...(set.config.order||"").split(",").map(x => x.trim()).filter(x => partials.includes(x)), ...partials]),
3434
//Plural helper
3535
s(value, end = "") {
3636
return value !== 1 ? {y:"ies", "":"s"}[end] : end

source/app/web/statics/index.html

Lines changed: 31 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
<main :class="[palette]">
1717
<template>
1818

19-
<header>
19+
<header v-once>
2020
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg>
2121
<a href="https://github.com/lowlighter/metrics">Metrics v{{ version }}</a>
2222
</header>
@@ -45,7 +45,7 @@
4545

4646
<div class="ui-avatar" :style="{backgroundImage:avatar ? `url(${avatar})` : 'none'}"></div>
4747

48-
<input type="text" v-model="user" placeholder="Your GitHub username" @keyup="mock">
48+
<input type="text" v-model="user" placeholder="Your GitHub username">
4949
<button @click="generate" :disabled="(!user)||(generated.pending)">
5050
{{ generated.pending ? 'Working on it :)' : 'Generate your metrics!' }}
5151
</button>
@@ -77,7 +77,6 @@
7777

7878
<div class="configuration" v-if="configure">
7979
<b>🔧 Configure plugins</b>
80-
8180
<template v-for="(input, key) in configure">
8281
<b v-if="typeof input === 'string'">{{ input }}</b>
8382
<label v-else class="option">
@@ -90,7 +89,25 @@
9089
<input type="text" v-else v-model="plugins.options[key]" @change="mock" :placeholder="input.placeholder">
9190
</label>
9291
</template>
92+
</div>
9393

94+
<div class="configuration">
95+
<details>
96+
<summary><b>⚙️ Additional settings</b></summary>
97+
<template v-for="{key, target} in [{key:'base', target:plugins.options}, {key:'core', target:config}]">
98+
<template v-for="(input, key) in metadata[key]">
99+
<label class="option">
100+
<i>{{ input.text }}</i>
101+
<input type="checkbox" v-if="input.type === 'boolean'" v-model="target[key]" @change="mock">
102+
<input type="number" v-else-if="input.type === 'number'" v-model="target[key]" @change="mock" :min="input.min" :max="input.max">
103+
<select v-else-if="input.type === 'select'" v-model="target[key]" @change="mock">
104+
<option v-for="value in input.values" :value="value">{{ value }}</option>
105+
</select>
106+
<input type="text" v-else v-model="target[key]" @change="mock" :placeholder="input.placeholder">
107+
</label>
108+
</template>
109+
</template>
110+
</details>
94111
</div>
95112

96113
</aside>
@@ -103,7 +120,10 @@
103120
</div>
104121

105122
<div v-if="tab == 'overview'">
106-
<div class="error" v-if="generated.error">An error occurred while generating your metrics :( Please try again later.</div>
123+
<div class="error" v-if="generated.error">
124+
An error occurred while generating your metrics :(<br>
125+
<small>{{ generated.error.message }}</small>
126+
</div>
107127
<div class="image" :class="{pending:generated.pending}" v-html="generated.content||templates.placeholder.image"></div>
108128
</div>
109129
<div v-else-if="tab == 'markdown'">
@@ -122,6 +142,13 @@
122142

123143
</div>
124144

145+
<footer v-once>
146+
<a href="https://github.com/lowlighter/metrics">Repository</a>
147+
<a href="https://github.com/lowlighter/metrics/blob/master/LICENSE">License</a>
148+
<a href="https://github.com/marketplace/actions/github-metrics-as-svg-image">GitHub Action</a>
149+
<span v-if="hosted">Hosted with ❤️ by <a :href="hosted.link">{{ hosted.by }}</a></span>
150+
</footer>
151+
125152
</template>
126153
</main>
127154
<!-- Scripts -->

source/app/web/statics/style.css

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -232,6 +232,46 @@ body {
232232
text-align: center;
233233
}
234234

235+
/* Details */
236+
details summary:hover {
237+
background-color: var(--color-input-contrast-bg);
238+
border-radius: 6px;
239+
cursor: pointer;
240+
}
241+
242+
details summary:focus {
243+
outline: none;
244+
}
245+
246+
/* Error */
247+
.error {
248+
padding: 1.25rem 1rem;
249+
background-image: linear-gradient(var(--color-alert-error-bg),var(--color-alert-error-bg));
250+
color: var(--color-alert-error-text);
251+
border: 1px solid var(--color-alert-error-border);
252+
border-radius: 6px;
253+
}
254+
255+
/* Footer */
256+
main > footer {
257+
margin: 1rem;
258+
margin-top: 2rem;
259+
padding-top: 1rem;
260+
font-size: .8rem;
261+
color: var(--color-text-secondary);
262+
border-top: 1px solid var(--color-border-secondary);
263+
font-style: normal;
264+
display: flex;
265+
justify-content: center;
266+
align-items: center;
267+
flex-direction: row;
268+
flex-wrap: wrap;
269+
}
270+
271+
main > footer > * {
272+
margin: 0 1rem;
273+
}
274+
235275
/* Media screen */
236276
@media only screen and (min-width: 740px) {
237277
.ui {

source/plugins/core/metadata.yml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,7 @@ inputs:
8787
type: array
8888
format: comma-separated
8989
default: ""
90+
example: base.header, base.repositories
9091

9192
# Use twemojis instead of emojis
9293
# May increase filesize but emojis will be rendered the same across all platforms

0 commit comments

Comments
 (0)