Improvement on web server (#215)

source/app/mocks/api/axios/get/nightscout.mjs

@@ -5,7 +5,6 @@ export default function({faker, url}) {
         //Get Nightscout Data
           console.debug(`metrics/compute/mocks > mocking nightscout api result > ${url}`)
           const lastInterval = Math.floor(new Date() / 300000) * 300000
-          const directionArray = ["SingleUp", "DoubleUp", "FortyFiveUp", "Flat", "FortyFiveDown", "SingleDown", "DoubleDown"]
           return ({
             status:200,
             data:new Array(12).fill(null).map(_ => ({
@@ -15,7 +14,7 @@ export default function({faker, url}) {
               dateString:new Date(lastInterval).toISOString(),
               sgv:faker.random.number({min:40, max:400}),
               delta:faker.random.number({min:-10, max:10}),
-              direction:directionArray[Math.floor(Math.random() * directionArray.length)],
+              direction:faker.random.arrayElement(["SingleUp", "DoubleUp", "FortyFiveUp", "Flat", "FortyFiveDown", "SingleDown", "DoubleDown"]),
               type:"sgv",
               filtered:0,
               unfiltered:0,

source/app/web/statics/app.js

@@ -86,6 +86,7 @@
             descriptions:{
               classic:"Classic template",
               terminal:"Terminal template",
+              markdown:"(hidden)",
               repository:"(hidden)",
             },
           },
@@ -97,6 +98,10 @@
         },
       //Computed data
         computed:{
+          //Unusable plugins
+            unusable() {
+              return this.plugins.list.filter(({name}) => this.plugins.enabled[name]).filter(({enabled}) => !enabled).map(({name}) => name)
+            },
           //User's avatar
             avatar() {
               return this.generated.content ? `https://github.com/${this.user}.png` : null

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

@@ -332,11 +332,15 @@
               ...(set.plugins.enabled.nightscout ? ({
                 nightscout:{
                   url: options["nightscout.url"] != null && options["nightscout.url"] != "https://example.herokuapp.com" ? options["nightscout.url"]: "https://testapp.herokuapp.com/",
-                  datapoints: faker.random.number({min: 8, max: 12}),
+                  data:new Array(12).fill(null).map(_ => ({
-                  lowalert: faker.random.number({min: 60, max: 90}),
+                    timeUTCHumanReadable:`${new Date().getUTCHours()}:${new Date().getUTCMinutes()}`,
-                  highalert: faker.random.number({min: 150, max: 200}),
+                    color:faker.random.arrayElement(["#9be9a8", "#40c463", "#30a14e", "#216e39"]),
-                  urgentlowalert: faker.random.number({min: 40, max: 59}),
+                    sgv:faker.random.number({min:40, max:400}),
-                  urgenthighalert: faker.random.number({min: 201, max: 300})
+                    delta:faker.random.number({min:-10, max:10}),
+                    direction:faker.random.arrayElement(["SingleUp", "DoubleUp", "FortyFiveUp", "Flat", "FortyFiveDown", "SingleDown", "DoubleDown"]),
+                    alert:faker.random.arrayElement(["Normal", "Urgent High", "Urgent Low", "High", "Low"]),
+                    arrowHumanReadable:faker.random.arrayElement(["↑↑", "↑", "↗", "→", "↘", "↓", "↓↓"]),
+                  })),
                 }
               }) : null),
               //Pagespeed

source/app/web/statics/index.html

@@ -28,11 +28,11 @@
               <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M0 1.75A.75.75 0 01.75 1h4.253c1.227 0 2.317.59 3 1.501A3.744 3.744 0 0111.006 1h4.245a.75.75 0 01.75.75v10.5a.75.75 0 01-.75.75h-4.507a2.25 2.25 0 00-1.591.659l-.622.621a.75.75 0 01-1.06 0l-.622-.621A2.25 2.25 0 005.258 13H.75a.75.75 0 01-.75-.75V1.75zm8.755 3a2.25 2.25 0 012.25-2.25H14.5v9h-3.757c-.71 0-1.4.201-1.992.572l.004-7.322zm-1.504 7.324l.004-5.073-.002-2.253A2.25 2.25 0 005.003 2.5H1.5v9h3.757a3.75 3.75 0 011.994.574z"></path></svg>
               Overview
             </div>
-            <div @click="generated.content ? tab = 'action' : null" :class="{active:tab === 'action', disabled:!generated.content}">
+            <div @click="user ? tab = 'action' : null" :class="{active:tab === 'action', disabled:!user}">
               <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zM8 0a8 8 0 100 16A8 8 0 008 0zM6.379 5.227A.25.25 0 006 5.442v5.117a.25.25 0 00.379.214l4.264-2.559a.25.25 0 000-.428L6.379 5.227z"></path></svg>
               Action code
             </div>
-            <div @click="generated.content ? tab = 'markdown' : null" :class="{active:tab === 'markdown', disabled:!generated.content}">
+            <div @click="user ? tab = 'markdown' : null" :class="{active:tab === 'markdown', disabled:!user}">
               <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M4 1.75C4 .784 4.784 0 5.75 0h5.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v8.586A1.75 1.75 0 0114.25 15h-9a.75.75 0 010-1.5h9a.25.25 0 00.25-.25V6h-2.75A1.75 1.75 0 0110 4.25V1.5H5.75a.25.25 0 00-.25.25v2.5a.75.75 0 01-1.5 0v-2.5zm7.5-.188V4.25c0 .138.112.25.25.25h2.688a.252.252 0 00-.011-.013l-2.914-2.914a.272.272 0 00-.013-.011zM5.72 6.72a.75.75 0 000 1.06l1.47 1.47-1.47 1.47a.75.75 0 101.06 1.06l2-2a.75.75 0 000-1.06l-2-2a.75.75 0 00-1.06 0zM3.28 7.78a.75.75 0 00-1.06-1.06l-2 2a.75.75 0 000 1.06l2 2a.75.75 0 001.06-1.06L1.81 9.25l1.47-1.47z"></path></svg>
               Markdown code
             </div>
@@ -46,10 +46,13 @@
             <div class="ui-avatar" :style="{backgroundImage:avatar ? `url(${avatar})` : 'none'}"></div>
 
             <input type="text" v-model="user" placeholder="Your GitHub username">
-            <button @click="generate" :disabled="(!user)||(generated.pending)">
+            <button @click="generate" :disabled="(!user)||(generated.pending)||(unusable.length > 0)">
               {{ generated.pending ? 'Working on it :)' : 'Generate your metrics!' }}
             </button>
             <small>{{ requests.remaining }} GitHub requests remaining</small>
+            <div class="warning" v-if="unusable.length">
+              Metrics cannot be generated because the following plugins are not available on this web instance: {{ unusable.join(", ") }}
+            </div>
 
             <div class="configuration">
               <b>🖼️ Template</b>
@@ -70,7 +73,7 @@
             <div class="configuration" v-if="plugins.list.length">
               <b>🧩 Additional plugins</b>
               <label v-for="plugin in plugins.list" :key="plugin" :class="{'not-available':!plugin.enabled}" :title="!plugin.enabled ? 'This plugin is not enabled on web instance, use it with GitHub actions !' : ''">
-                <input type="checkbox" v-model="plugins.enabled[plugin.name]" @change="mock" :disabled="(!plugin.enabled)||(generated.pending)">
+                <input type="checkbox" v-model="plugins.enabled[plugin.name]" @change="mock" :disabled="generated.pending">
                 {{ plugins.descriptions[plugin.name] || plugin.name }}
               </label>
             </div>

source/app/web/statics/style.css

@@ -117,8 +117,7 @@ body {
   }
 
   .configuration .not-available {
-    cursor: not-allowed;
+    color: var(--color-text-secondary);
-    opacity: .5;
   }
 
   .option {
@@ -252,6 +251,17 @@ body {
     border-radius: 6px;
   }
 
+/* Warning */
+  .warning {
+    padding: .5rem .75rem;
+    background-image: linear-gradient(var(--color-alert-warn-bg),var(--color-alert-warn-bg));
+    color: var(--color-alert-warn-text);
+    border: 1px solid var(--color-alert-warn-border);
+    border-radius: 6px;
+    font-size: .8rem;
+    margin-top: .25rem;
+  }
+
 /* Footer */
   main > footer {
     margin: 1rem 0;

source/plugins/achievements/metadata.yml

@@ -44,6 +44,7 @@ inputs:
     type: array
     format: comma-separated
     default: ""
+    example: octonaut, automater, explorer
 
   # List of unlocked achievements to display
   # Names must be given in lower case, without rank adjective
@@ -53,3 +54,4 @@ inputs:
     type: array
     format: comma-separated
     default: ""
+    example: octonaut, automater, explorer

source/plugins/contributors/metadata.yml

@@ -17,6 +17,7 @@ inputs:
     description: Base reference
     type: string
     default: ""
+    example: commit, tag or branch
 
   # Head reference (commit, tag, branch, etc.)
   plugin_contributors_head:

source/plugins/people/metadata.yml

@@ -57,6 +57,7 @@ inputs:
     type: array
     format: comma-separated
     default: ""
+    example: octocat, hubot
 
   # Add specified users to GitHub sponsors ("sponsors" must be specified in "plugin_people_types")
   # This is useful to list sponsors from unsupported GitHub sponsors sources
@@ -65,6 +66,7 @@ inputs:
     type: array
     format: comma-separated
     default: ""
+    example: octocat, hubot
 
   # Use GitHub identicons instead of users' avatar (for privacy purposes)
   plugin_people_identicons:

source/plugins/rss/metadata.yml

@@ -19,6 +19,7 @@ inputs:
     description: RSS feed source
     type: string
     default: ""
+    example: https://news.ycombinator.com/rss
 
   # Number of items to display
   # Set to 0 to disable limitations

source/plugins/stock/metadata.yml

@@ -25,6 +25,7 @@ inputs:
     description: Company stock symbol
     type: string
     default: ""
+    example: MSFT
 
   # Time range to display (relative to current date)
   plugin_stock_duration: