├── .eslintrc.js
├── .gitignore
├── .prettierrc
├── Dockerfile
├── README.md
├── components
    ├── Container.vue
    └── Service.vue
├── layouts
    └── default.vue
├── nuxt.config.js
├── package-lock.json
├── package.json
├── pages
    └── index.vue
├── plugins
    └── global-component-loader.js
├── server
    └── index.js
└── static
    └── favicon.ico


/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     browser: true,
 5 |     node: true
 6 |   },
 7 |   parserOptions: {
 8 |     parser: 'babel-eslint'
 9 |   },
10 |   extends: [
11 |     '@nuxtjs',
12 |     'plugin:nuxt/recommended',
13 |     'plugin:prettier/recommended',
14 |     'prettier',
15 |     'prettier/vue'
16 |   ],
17 |   plugins: [
18 |     'prettier'
19 |   ],
20 |   // add your custom rules here
21 |   rules: {
22 |     'nuxt/no-cjs-in-config': 'off'
23 |   }
24 | }
25 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Created by .ignore support plugin (hsz.mobi)
 2 | ### Node template
 3 | # Logs
 4 | logs
 5 | *.log
 6 | npm-debug.log*
 7 | yarn-debug.log*
 8 | yarn-error.log*
 9 | 
10 | # Runtime data
11 | pids
12 | *.pid
13 | *.seed
14 | *.pid.lock
15 | 
16 | # Directory for instrumented libs generated by jscoverage/JSCover
17 | lib-cov
18 | 
19 | # Coverage directory used by tools like istanbul
20 | coverage
21 | 
22 | # nyc test coverage
23 | .nyc_output
24 | 
25 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
26 | .grunt
27 | 
28 | # Bower dependency directory (https://bower.io/)
29 | bower_components
30 | 
31 | # node-waf configuration
32 | .lock-wscript
33 | 
34 | # Compiled binary addons (https://nodejs.org/api/addons.html)
35 | build/Release
36 | 
37 | # Dependency directories
38 | node_modules/
39 | jspm_packages/
40 | 
41 | # TypeScript v1 declaration files
42 | typings/
43 | 
44 | # Optional npm cache directory
45 | .npm
46 | 
47 | # Optional eslint cache
48 | .eslintcache
49 | 
50 | # Optional REPL history
51 | .node_repl_history
52 | 
53 | # Output of 'npm pack'
54 | *.tgz
55 | 
56 | # Yarn Integrity file
57 | .yarn-integrity
58 | 
59 | # dotenv environment variables file
60 | .env
61 | 
62 | # parcel-bundler cache (https://parceljs.org/)
63 | .cache
64 | 
65 | # next.js build output
66 | .next
67 | 
68 | # nuxt.js build output
69 | .nuxt
70 | 
71 | # Nuxt generate
72 | dist
73 | 
74 | # vuepress build output
75 | .vuepress/dist
76 | 
77 | # Serverless directories
78 | .serverless
79 | 
80 | # IDE / Editor
81 | .idea
82 | .editorconfig
83 | 
84 | # Service worker
85 | sw.*
86 | 
87 | # Mac OSX
88 | .DS_Store


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "semi": false,
3 |   "singleQuote": true
4 | }
5 | 


--------------------------------------------------------------------------------
/Dockerfile:
--------------------------------------------------------------------------------
 1 | FROM node:latest
 2 | 
 3 | ENV APP_ROOT /src
 4 | 
 5 | RUN mkdir ${APP_ROOT}
 6 | WORKDIR ${APP_ROOT}
 7 | ADD . ${APP_ROOT}
 8 | 
 9 | RUN npm install
10 | RUN npm rebuild
11 | RUN npm run build
12 | 
13 | EXPOSE 8080
14 | 
15 | ENV HOST 0.0.0.0
16 | ENV PORT 8080
17 | 
18 | HEALTHCHECK CMD curl -f http://localhost:8080/ || exit 1
19 | 
20 | CMD npm start
21 | LABEL startpage.hidden=true
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Docker Startpage
 2 | 
 3 | > Server Startpage designed for hub.pilgrim.me.uk with automatic docker api based link generation
 4 | 
 5 | ## Docker Setup
 6 | The image can be built with the command:
 7 | ```
 8 | docker build git@github.com:TGNThump/DockerStartpage.git -t tgnthump/startpage
 9 | ```
10 | 
11 | The environment variable `DOCKER_PATH` must be set to the location of the http docker api.
12 | Containers running will automatically get added to the listing provided they do not have the `startpage.hidden=true` label. Their urls will be set based upon the `traefik.frontend.rule` label, as configured with the Host paramater.
13 | 
14 | ## Development Setup
15 | 
16 | ``` bash
17 | # install dependencies
18 | $ npm install
19 | 
20 | # serve with hot reload at localhost:3000
21 | $ npm run dev
22 | 
23 | # build for production and launch server
24 | $ npm run build
25 | $ npm start
26 | 
27 | # generate static project
28 | $ npm run generate
29 | ```
30 | 


--------------------------------------------------------------------------------
/components/Container.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <main :class="{ container: !fluid, 'container-fluid': fluid }">
 3 |     <slot></slot>
 4 |   </main>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |   name: 'Container',
10 |   props: { fluid: Boolean }
11 | }
12 | </script>
13 | 


--------------------------------------------------------------------------------
/components/Service.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div v-if="!hidden" class="col-12 col-md-6 service">
  3 |     <a
  4 |       :href="'https://' + url"
  5 |       class="card text-reset text-decoration-none"
  6 |       :style="{
  7 |         'border-left':
  8 |           '5px solid ' + (value.State == 'running' ? '#28a745' : '#dc3545')
  9 |       }"
 10 |     >
 11 |       <div class="card-body">
 12 |         <div>
 13 |           <h1>{{ name }}</h1>
 14 |           <h2>{{ url }}</h2>
 15 |         </div>
 16 |       </div>
 17 |     </a>
 18 |   </div>
 19 | </template>
 20 | 
 21 | <style lang="scss">
 22 | .service {
 23 |   h1,
 24 |   h2 {
 25 |     margin: 0px;
 26 |     padding: 0px;
 27 |   }
 28 | 
 29 |   h1 {
 30 |     font-size: 1rem;
 31 |   }
 32 | 
 33 |   h2 {
 34 |     padding-top: 0.2em;
 35 |     font-size: 0.8rem;
 36 |     text-transform: lowercase;
 37 |   }
 38 | }
 39 | </style>
 40 | 
 41 | <script>
 42 | import upperFirst from 'lodash/upperFirst'
 43 | const unflatten = require('flat').unflatten
 44 | 
 45 | export default {
 46 |   name: 'Container',
 47 |   props: {
 48 |     value: {
 49 |       type: Object,
 50 |       default() {
 51 |         return {}
 52 |       }
 53 |     }
 54 |   },
 55 |   computed: {
 56 |     labels: function() {
 57 |       return unflatten(this.value.Labels)
 58 |     },
 59 |     segment: function() {
 60 |       if (!('traefik' in this.labels)) return
 61 |       return this.labels.traefik
 62 |     },
 63 |     name: function() {
 64 |       let name = this.value.Names[0]
 65 |       if (name.includes('_')) name = name.split('_')[1]
 66 |       if (name.startsWith('/')) name = name.substring(1)
 67 |       name = upperFirst(name)
 68 |       name = name.replace(/([A-Z])/g, ' $1').trim()
 69 |       return name
 70 |     },
 71 |     rule: function() {
 72 | 
 73 |       if (this.segment == undefined) return
 74 | 
 75 |       let segment = this.segment;
 76 |       if (this.segment.frontend === undefined){
 77 |         let keys = Object.keys(this.segment);
 78 |         if (keys.length == 0) return;
 79 |         segment = this.segment[keys[0]]
 80 |       }
 81 | 
 82 |       if (segment.frontend === undefined) return
 83 |       const rules = segment.frontend.rule.split(';')
 84 |       const result = {}
 85 | 
 86 |       for (const i in rules) {
 87 |         const split = rules[i].split(':')
 88 |         result[split[0].toLowerCase()] = split[1]
 89 |       }
 90 | 
 91 |       return result
 92 |     },
 93 |     url: function() {
 94 |       if (this.rule === undefined) {
 95 |         return ''
 96 |       }
 97 |       return this.rule.host
 98 |     },
 99 |     hidden: function() {
100 |       if (!('startpage' in this.labels)) return false
101 |       if (!('hidden' in this.labels.startpage)) return false
102 |       return this.labels.startpage.hidden
103 |     }
104 |   }
105 | }
106 | </script>
107 | 


--------------------------------------------------------------------------------
/layouts/default.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <nuxt class="app" />
 3 | </template>
 4 | 
 5 | <style lang="scss">
 6 | @import '~bootstrap/scss/bootstrap';
 7 | 
 8 | $fa-font-path: '~@fortawesome/fontawesome-free/webfonts';
 9 | @import '~@fortawesome/fontawesome-free/scss/fontawesome';
10 | @import '~@fortawesome/fontawesome-free/scss/solid';
11 | @import '~@fortawesome/fontawesome-free/scss/regular';
12 | @import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
13 | 
14 | body {
15 |   padding-top: 25px;
16 |   background: #30323d;
17 |   font-family: Roboto;
18 |   color: #dff8eb;
19 | }
20 | 
21 | .card {
22 |   border-radius: 5px;
23 |   box-shadow: 8px 14px 38px rgba(39, 44, 49, 0.06),
24 |     1px 3px 8px rgba(39, 44, 49, 0.03);
25 |   border: 0px;
26 |   margin: 10px 0;
27 |   padding: 0px;
28 | 
29 |   background-color: darken(#30323d, 3%);
30 | 
31 |   .card-body {
32 |     padding: 15px;
33 |   }
34 | }
35 | </style>
36 | 


--------------------------------------------------------------------------------
/nuxt.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   mode: 'universal',
 3 |   /*
 4 |    ** Headers of the page
 5 |    */
 6 |   head: {
 7 |     title: process.env.npm_package_name || '',
 8 |     meta: [
 9 |       { charset: 'utf-8' },
10 |       { name: 'viewport', content: 'width=device-width, initial-scale=1' },
11 |       {
12 |         hid: 'description',
13 |         name: 'description',
14 |         content: process.env.npm_package_description || ''
15 |       }
16 |     ],
17 |     link: [
18 |       { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
19 |       {
20 |         rel: 'stylesheet',
21 |         href: 'https://fonts.googleapis.com/css?family=Roboto'
22 |       }
23 |     ]
24 |   },
25 |   /*
26 |    ** Customize the progress-bar color
27 |    */
28 |   loading: { color: '#fff' },
29 |   /*
30 |    ** Global CSS
31 |    */
32 |   css: [],
33 |   /*
34 |    ** Plugins to load before mounting the App
35 |    */
36 |   plugins: ['~/plugins/global-component-loader.js'],
37 |   /*
38 |    ** Nuxt.js modules
39 |    */
40 |   modules: [
41 |     // Doc: https://bootstrap-vue.js.org/docs/
42 |     'bootstrap-vue/nuxt',
43 |     // Doc: https://axios.nuxtjs.org/usage
44 |     '@nuxtjs/axios',
45 |     '@nuxtjs/pwa',
46 |     // '@nuxtjs/eslint-module'
47 |   ],
48 |   /*
49 |    ** Axios module configuration
50 |    ** See https://axios.nuxtjs.org/options
51 |    */
52 |   axios: {
53 |     proxy: true
54 |   },
55 | 
56 |   proxy: {
57 |     '/docker/': {
58 |       target: process.env.DOCKER_PATH || 'http://localhost:3500',
59 |       pathRewrite: { '^/docker/': '' }
60 |     }
61 |   },
62 |   /*
63 |    ** Build configuration
64 |    */
65 |   build: {
66 |     /*
67 |      ** You can extend webpack config here
68 |      */
69 |     extend(config, ctx) {}
70 |   }
71 | }
72 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "hub.pilgrim.me.uk",
 3 |   "version": "1.0.0",
 4 |   "description": "Docker Server Startpage for hub.pilgrim.me.uk",
 5 |   "author": "Ben Pilgrim",
 6 |   "private": true,
 7 |   "scripts": {
 8 |     "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
 9 |     "precommit": "npm run lint",
10 |     "dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server",
11 |     "build": "nuxt build",
12 |     "start": "cross-env NODE_ENV=production node server/index.js",
13 |     "generate": "nuxt generate"
14 |   },
15 |   "dependencies": {
16 |     "@fortawesome/fontawesome-free": "^5.12.0",
17 |     "@nuxtjs/axios": "^5.9.3",
18 |     "@nuxtjs/proxy": "^1.3.3",
19 |     "@nuxtjs/pwa": "^2.6.0",
20 |     "bootstrap": "^4.4.1",
21 |     "bootstrap-vue": "^2.2.0",
22 |     "cross-env": "^5.2.1",
23 |     "express": "^4.16.4",
24 |     "flat": "^4.1.0",
25 |     "lodash": "latest",
26 |     "nuxt": "^2.11.0"
27 |   },
28 |   "devDependencies": {
29 |     "@nuxtjs/eslint-config": "^0.0.1",
30 |     "@nuxtjs/eslint-module": "^0.0.1",
31 |     "babel-eslint": "^10.0.3",
32 |     "eslint": "^5.15.1",
33 |     "eslint-config-prettier": "^4.1.0",
34 |     "eslint-config-standard": "^14.1.0",
35 |     "eslint-plugin-import": "^2.20.0",
36 |     "eslint-plugin-jest": "^23.5.0",
37 |     "eslint-plugin-node": "^11.0.0",
38 |     "eslint-plugin-nuxt": "^0.5.0",
39 |     "eslint-plugin-prettier": "^3.1.2",
40 |     "eslint-plugin-promise": "^4.2.1",
41 |     "eslint-plugin-standard": "^4.0.1",
42 |     "eslint-plugin-vue": "^5.2.3",
43 |     "nodemon": "^1.19.4",
44 |     "prettier": "^1.19.1",
45 |     "node-sass": "^4.13.0",
46 |     "sass-loader": "^7.3.1"
47 |   }
48 | }
49 | 


--------------------------------------------------------------------------------
/pages/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <container>
 3 |     <section id="header">
 4 |       <h2>{{ date }}</h2>
 5 |       <h1>{{ greeting }}</h1>
 6 |     </section>
 7 |     <section class="row">
 8 |       <service
 9 |         v-for="(value, key) in containers"
10 |         :key="key"
11 |         v-model="containers[key]"
12 |       ></service>
13 |     </section>
14 |   </container>
15 | </template>
16 | 
17 | <script>
18 | export default {
19 |   data() {
20 |     return {
21 |       containers: {}
22 |     }
23 |   },
24 |   computed: {
25 |     date: function() {
26 |       const days = [
27 |         'Monday',
28 |         'Tuesday',
29 |         'Wednesday',
30 |         'Thursday',
31 |         'Friday',
32 |         'Saturday',
33 |         'Sunday'
34 |       ]
35 | 
36 |       const months = [
37 |         'January',
38 |         'February',
39 |         'March',
40 |         'April',
41 |         'May',
42 |         'June',
43 |         'July',
44 |         'August',
45 |         'September',
46 |         'October',
47 |         'November',
48 |         'December'
49 |       ]
50 | 
51 |       const now = new Date()
52 | 
53 |       return (
54 |         days[(now.getDay() + 6) % 7] +
55 |         ', ' +
56 |         now.getDate() +
57 |         ' ' +
58 |         months[now.getMonth()] +
59 |         ' ' +
60 |         now.getFullYear()
61 |       )
62 |     },
63 |     greeting: function() {
64 |       const now = new Date()
65 | 
66 |       if (now.getHours() < 5) return 'Good Night!'
67 |       if (now.getHours() < 12) return 'Good Morning!'
68 |       if (now.getHours() < 20) return 'Good Afternoon!'
69 |       return 'Good Night!'
70 |     }
71 |   },
72 |   async asyncData({ $axios }) {
73 |     const containers = await $axios.$get('docker/containers/json?all=1')
74 |     return { containers }
75 |   }
76 | }
77 | </script>
78 | 
79 | <style lang="scss">
80 | section {
81 |   margin-top: 25px;
82 | 
83 |   h1 {
84 |     font-size: 3rem;
85 |   }
86 | 
87 |   h2 {
88 |     font-size: 1rem;
89 |     text-transform: uppercase;
90 |     font-weight: normal;
91 |     color: darken(#dff8eb, 50%);
92 |   }
93 | }
94 | </style>
95 | 


--------------------------------------------------------------------------------
/plugins/global-component-loader.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import _ from 'lodash'
 3 | 
 4 | const components = require.context('@/components', false, /[A-Z]\w+\.(vue)$/)
 5 | _.forEach(components.keys(), fileName => {
 6 |   const componentConfig = components(fileName)
 7 |   const componentName = fileName
 8 |     .split('/')
 9 |     .pop()
10 |     .split('.')[0]
11 |   Vue.component(componentName, componentConfig.default || componentConfig)
12 | })
13 | 


--------------------------------------------------------------------------------
/server/index.js:
--------------------------------------------------------------------------------
 1 | const express = require('express')
 2 | const consola = require('consola')
 3 | const { Nuxt, Builder } = require('nuxt')
 4 | const app = express()
 5 | 
 6 | // Import and Set Nuxt.js options
 7 | const config = require('../nuxt.config.js')
 8 | config.dev = !(process.env.NODE_ENV === 'production')
 9 | 
10 | async function start() {
11 |   // Init Nuxt.js
12 |   const nuxt = new Nuxt(config)
13 | 
14 |   const { host, port } = nuxt.options.server
15 | 
16 |   // Build only in dev mode
17 |   if (config.dev) {
18 |     const builder = new Builder(nuxt)
19 |     await builder.build()
20 |   } else {
21 |     await nuxt.ready()
22 |   }
23 | 
24 |   // Give nuxt middleware to express
25 |   app.use(nuxt.render)
26 | 
27 |   // Listen the server
28 |   app.listen(port, host)
29 |   consola.ready({
30 |     message: `Server listening on http://${host}:${port}`,
31 |     badge: true
32 |   })
33 | }
34 | start()
35 | 


--------------------------------------------------------------------------------
/static/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TGNThump/DockerStartpage/e5c05474803a0db0d500667e1efa5e9616cc6cc7/static/favicon.ico


--------------------------------------------------------------------------------