├── .dockerignore
├── .env.development
├── .env.prod
├── .gitignore
├── Dockerfile
├── README.md
├── images
    ├── dashboard_1.PNG
    ├── dashboard_2.PNG
    ├── dashboard_3.PNG
    ├── dashboard_4.PNG
    └── dashboard_5.PNG
├── nginx-dashboard.conf
├── package.json
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── App.vue
    ├── components
    │   ├── Job.vue
    │   ├── Menu.vue
    │   ├── Overview.vue
    │   ├── OverviewJobs.vue
    │   └── Run.vue
    ├── getEnvironmentSettings.js
    └── main.js
├── vue.config.js
└── yarn.lock


/.dockerignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | .git/


--------------------------------------------------------------------------------
/.env.development:
--------------------------------------------------------------------------------
1 | VUE_APP_SERVICES=[{"host": "localhost", "url": "http://localhost:8081/scheduled-jobs"}]


--------------------------------------------------------------------------------
/.env.prod:
--------------------------------------------------------------------------------
1 | VUE_APP_SERVICES=[{"host": "localhost", "url": "http://localhost:8081/scheduled-jobs"}]


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | 
13 | # Editor directories and files
14 | .idea
15 | .vscode
16 | *.suo
17 | *.ntvs*
18 | *.njsproj
19 | *.sln
20 | *.iml


--------------------------------------------------------------------------------
/Dockerfile:
--------------------------------------------------------------------------------
 1 | #==================== Building Stage ================================================ 
 2 | 
 3 | FROM node:10.9.0-alpine as node
 4 | 
 5 | # Create a directory where our app will be placed. This might not be necessary
 6 | RUN mkdir -p /dashboard
 7 | 
 8 | # Change directory so that our commands run inside this new directory
 9 | WORKDIR /dashboard
10 | 
11 | # Copy dependency definitions
12 | COPY package.json /dashboard
13 | 
14 | # Install dependencies
15 | RUN yarn install
16 | 
17 | # Get all the code needed to run the app
18 | COPY . /dashboard
19 | 
20 | # Expose the port the app runs in
21 | EXPOSE 8080
22 | 
23 | #Build the app
24 | RUN yarn build
25 | 
26 | #==================== Setting up stage ==================== 
27 | FROM nginx:1.15.2-alpine
28 | 
29 | COPY --from=node /dashboard/dist/ /usr/share/nginx/html
30 | 
31 | COPY ./nginx-dashboard.conf /etc/nginx/conf.d/default.conf


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # spring-boot-dashboard-scheduled-tasks
  2 | 
  3 | Dashboard to track scheduled tasks in a spring boot application.
  4 | 
  5 | This is a dashboard based on the data retrieved via https://github.com/kevcodez/spring-boot-track-scheduled-tasks
  6 | 
  7 | The dashboard allows the configuration of multiple services.
  8 | 
  9 | # Images
 10 | 
 11 | ## Overview
 12 | 
 13 | ![Overview of the jobs](images/dashboard_1.PNG?raw=true)
 14 | 
 15 | * Switch between environments
 16 | * List of all services configured
 17 | * Select a specific service to view jobs from the service
 18 | * Info about latest run
 19 | * Status from latest run (not run, failed, success)
 20 | 
 21 | ## Mobile View
 22 | 
 23 | ![Mobile view](images/dashboard_2.PNG?raw=true)
 24 | 
 25 | ## Specific Job
 26 | 
 27 | ![View runs from a specific job](images/dashboard_3.PNG?raw=true)
 28 | 
 29 | * Last 10 runs with timings
 30 | * Stats
 31 | ** Average runtime
 32 | ** Run count
 33 | ** Exceptions occured
 34 | * CRON settings
 35 | 
 36 | If the job did not run yet, it looks like this:
 37 | 
 38 | ![Specific job, when job did not run yet](images/dashboard_4.PNG?raw=true)
 39 | 
 40 | ## Specific run
 41 | 
 42 | ![Data from a specific run](images/dashboard_5.PNG?raw=true)
 43 | 
 44 | * View error details
 45 | * View timing
 46 | 
 47 | # Configuration
 48 | 
 49 | The getEnvironmentSettings.js includes the environments and URLs to the services providing scheduled task tracking data.
 50 | 
 51 | You can configure multiple services.
 52 | 
 53 | ```js
 54 | export function getEnvironmentSettings() {
 55 |     return {
 56 |         "Test": {
 57 |             "baseUrl": "https://my-api.test.de/",
 58 |             "services": [
 59 |                 {
 60 |                     "host": "Billing-Service",
 61 |                     "url": "billing-service/scheduled-jobs"
 62 |                 },
 63 |                 {
 64 |                     "host": "Contract-Service",
 65 |                     "url": "contract-service/scheduled-jobs"
 66 |                 }
 67 |             ]
 68 |         },
 69 |         "Production": {
 70 |             "baseUrl": "https://my-api.live.de/",
 71 |             "services": [
 72 |                 {
 73 |                     "host": "Billing-Service",
 74 |                     "url": "billing-service/scheduled-jobs"
 75 |                 },
 76 |                 {
 77 |                     "host": "Contract-Service",
 78 |                     "url": "contract-service/scheduled-jobs"
 79 |                 }
 80 |             ]
 81 |         }
 82 |     }
 83 | }
 84 | ```
 85 | 
 86 | # Features
 87 | 
 88 | * Switch between different environments
 89 | * Support for multiple services
 90 | * Get an overview of all jobs
 91 | * Get all jobs from a specific service
 92 | * View successful, failed and jobs that did not run yet
 93 | * View a run history of a any job
 94 | * Trigger a job
 95 | * View a specific run
 96 | * View errors from jobs, of occured
 97 | 
 98 | # Development
 99 | 
100 | Simple run `yarn serve` for starting a webserver with hot reload and everything you need. You should change the URLs in getEnvironmentSettings.js.
101 | 
102 | For fetching data from the services, [Vue-Resource](https://github.com/pagekit/vue-resource) is used. Vue-Resource also lets you add authentication very easily.
103 | 
104 | # Building for production
105 | 
106 | First configure your services in the getEnvironmentSettings.js file.
107 | 
108 | Build the docker image, nginx is used as server.
109 | 
110 | ```
111 | docker image build -t dashboard:latest .
112 | 
113 | docker run -d -p 80:80 dashboard:latest
114 | ```


--------------------------------------------------------------------------------
/images/dashboard_1.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kevcodez/spring-boot-dashboard-scheduled-tasks/08c3c7165deb6019d5c2df1a537b1e224145f8db/images/dashboard_1.PNG


--------------------------------------------------------------------------------
/images/dashboard_2.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kevcodez/spring-boot-dashboard-scheduled-tasks/08c3c7165deb6019d5c2df1a537b1e224145f8db/images/dashboard_2.PNG


--------------------------------------------------------------------------------
/images/dashboard_3.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kevcodez/spring-boot-dashboard-scheduled-tasks/08c3c7165deb6019d5c2df1a537b1e224145f8db/images/dashboard_3.PNG


--------------------------------------------------------------------------------
/images/dashboard_4.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kevcodez/spring-boot-dashboard-scheduled-tasks/08c3c7165deb6019d5c2df1a537b1e224145f8db/images/dashboard_4.PNG


--------------------------------------------------------------------------------
/images/dashboard_5.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kevcodez/spring-boot-dashboard-scheduled-tasks/08c3c7165deb6019d5c2df1a537b1e224145f8db/images/dashboard_5.PNG


--------------------------------------------------------------------------------
/nginx-dashboard.conf:
--------------------------------------------------------------------------------
 1 | server {
 2 |   listen 80;
 3 | 
 4 |   root /usr/share/nginx/html;
 5 | 
 6 |   location / {
 7 |     index index.html index.htm;
 8 |     try_files $uri $uri/ /index.html =404;
 9 |   }
10 | }


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "scheduled-tasks-dashboard",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "bulma": "0.7.1",
12 |     "moment": "2.22.2",
13 |     "vue": "2.5.17",
14 |     "vue-awesome": "3.1.0",
15 |     "vue-resource": "1.5.1",
16 |     "vue-router": "3.0.1"
17 |   },
18 |   "devDependencies": {
19 |     "@vue/cli-plugin-babel": "3.0.1",
20 |     "@vue/cli-plugin-eslint": "3.0.1",
21 |     "@vue/cli-service": "3.0.1",
22 |     "vue-template-compiler": "2.5.17"
23 |   },
24 |   "babel": {
25 |     "presets": [
26 |       "@vue/app"
27 |     ]
28 |   },
29 |   "eslintConfig": {
30 |     "root": true,
31 |     "extends": [
32 |       "plugin:vue/essential",
33 |       "eslint:recommended"
34 |     ]
35 |   },
36 |   "postcss": {
37 |     "plugins": {
38 |       "autoprefixer": {}
39 |     }
40 |   },
41 |   "browserslist": [
42 |     "> 1%",
43 |     "last 2 versions",
44 |     "not ie <= 8"
45 |   ]
46 | }
47 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kevcodez/spring-boot-dashboard-scheduled-tasks/08c3c7165deb6019d5c2df1a537b1e224145f8db/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="./favicon.ico">
 8 |     <title>scheduled-tasks-dashboard</title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but scheduled-tasks-dashboard doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div id="app">
 3 |         <Menu />
 4 |         <section class="section">
 5 |             <router-view></router-view>
 6 | 
 7 |         </section>
 8 | 
 9 |     </div>
10 | </template>
11 | 
12 | <script>
13 |     import Overview from './components/Overview.vue';
14 |     import Job from './components/Job.vue';
15 |     import Menu from './components/Menu.vue';
16 | 
17 |     export default {
18 |         name: 'app',
19 |         components: {
20 |             Overview,
21 |             Job,
22 |             Menu
23 |         }
24 |     }
25 | </script>


--------------------------------------------------------------------------------
/src/components/Job.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="job">
  3 |         <nav class="breadcrumb" aria-label="breadcrumbs">
  4 |             <ul>
  5 |                 <li>
  6 |                     <router-link to="/">Scheduled Jobs</router-link>
  7 |                 </li>
  8 |                 <li>
  9 |                     <router-link :to="'/' + this.$route.params.host">{{this.$route.params.host}}</router-link>
 10 |                 </li>
 11 |                 <li>
 12 |                     <router-link :to="'/' + this.$route.params.host + '/' + this.$route.params.class">{{this.$route.params.class}}</router-link>
 13 |                 </li>
 14 | 
 15 |                 <li class="is-active is-capitalized">
 16 |                     <a href="#">{{this.$route.params.method}}</a>
 17 |                 </li>
 18 |             </ul>
 19 |         </nav>
 20 | 
 21 |         <div v-if="errorTrigger" class="notification is-danger">
 22 |             Error while triggering job. Either the job was not found or the job is currently running.
 23 |         </div>
 24 | 
 25 |         <div v-if="job">
 26 |             <div class="columns">
 27 |                 <div class="column">
 28 |                     <div class="box">
 29 |                         <p class="title is-capitalized">{{this.$route.params.method}}
 30 |                             <a v-on:click="triggerJob()"><span class="is-pulled-right" title="Trigger Job"><icon style="height: 1em; width: auto" name="play-circle"/> </span></a>
 31 |                         </p>
 32 |                         <p class="subtitle">{{this.$route.params.class}}</p>
 33 | 
 34 |                         <hr/>
 35 | 
 36 |                         <p class="is-size-5 has-text-weight-semibold">Stats</p>
 37 |                         <p>Average time: {{job.stats.averageDurationInMs !== undefined ? job.stats.averageDurationInMs + ' ms' : '-'}}</p>
 38 |                         <p>Run count: {{job.stats.numberOfInvocations}}</p>
 39 |                         <p>Exceptions occured: {{job.stats.numberOfExceptions}}</p>
 40 | 
 41 |                         <hr/>
 42 | 
 43 |                         <p class="is-size-5 has-text-weight-semibold">Settings</p>
 44 |                         <p>Fixed Rate: {{job.fixedRate || job.fixedRateString || '-'}}</p>
 45 |                         <p>Initial Delay: {{job.initialDelay || job.initialDelayString || '-'}}</p>
 46 |                         <p>Zone: {{job.zone || '-'}}</p>
 47 |                         <p>CRON: {{job.cron || '-'}}</p>
 48 |                     </div>
 49 | 
 50 |                 </div>
 51 |                 <div class="column is-two-thirds">
 52 | 
 53 |                     <div v-if="!job.runs || job.runs.length === 0">
 54 |                         <div class="notification">
 55 |                             <p>Job did not not run yet.</p>
 56 |                         </div>
 57 |                     </div>
 58 | 
 59 |                     <div v-else>
 60 |                         <div v-bind:class="cssClassForRun(run)" v-for="(run, idx) in job.runs" v-bind:key="idx">
 61 | 
 62 |                             <div class="columns">
 63 |                                 <div class="column is-4">
 64 |                                     <icon name="play-circle"/>
 65 |                                     Started {{startTimeAsText(run.startedAt)}}
 66 |                                 </div>
 67 | 
 68 |                                 <div class="column is-4">
 69 |                                     <router-link :to="'/' + job.host + '/' + job.className + '/' + job.methodName + '/' + run.uuid">{{run.uuid}}</router-link>
 70 |                                 </div>
 71 | 
 72 |                                 <div class="column">
 73 |                                     <span v-if="!run.endedAt">
 74 |                                         <icon name="spinner" spin/> Currently running
 75 |                                     </span>
 76 |                                     <span v-else-if="run.exception">
 77 |                                         <icon name="exclamation-circle"/> Error after {{durationAsText(run.duration)}}
 78 |                                     </span>
 79 |                                     <span v-else>
 80 |                                         <icon name="check-circle"/> Took {{durationAsText(run.duration)}}
 81 |                                     </span>
 82 |                                 </div>
 83 |                             </div>
 84 |                         </div>
 85 |                     </div>
 86 |                 </div>
 87 |             </div>
 88 |         </div>
 89 | 
 90 |     </div>
 91 | </template>
 92 | 
 93 | <script>
 94 |     import moment from 'moment';
 95 |     import {getCurrentEnvironment} from "../getEnvironmentSettings";
 96 | 
 97 |     export default {
 98 |         name: "Job",
 99 |         data() {
100 |             return {
101 |                 loading: false,
102 |                 job: null,
103 |                 error: null,
104 |                 errorTrigger: null,
105 |                 services: getCurrentEnvironment().services
106 |             };
107 |         },
108 |         created() {
109 |             this.fetchData();
110 | 
111 |             setInterval(function () {
112 |                 this.fetchData();
113 |             }.bind(this), 10000);
114 |         },
115 |         watch: {
116 |             $route: "fetchData"
117 |         },
118 |         methods: {
119 |             triggerJob() {
120 |                 let self = this;
121 |                 self.errorTrigger = null;
122 | 
123 |                 let params = self.$route.params;
124 |                 let serviceByHost = JSON.parse(self.services).filter(it => it.host === params.host)[0];
125 | 
126 |                 this.$http.post(serviceByHost.url + '/' + params.class + '/' + params.method)
127 |                     .then(function (response) { self.fetchData()})
128 |                     .catch(function (err) {
129 |                         self.errorTrigger = err;
130 |                     });
131 |             },
132 |             cssClassForRun(run) {
133 |                 let style = 'is-primary';
134 | 
135 |                  if (run.exception)
136 |                     style = 'is-danger';
137 |                  else if (!run.endedAt)
138 |                      style = 'is-info';
139 | 
140 |                 return 'notification ' + style;
141 |             },
142 | 
143 |             durationAsText(duration) {
144 |                 return moment.duration(duration).humanize()
145 |             },
146 |             startTimeAsText(timeString) {
147 |                 return moment(timeString).fromNow();
148 |             },
149 |             fetchData() {
150 |                 this.error = null;
151 |                 this.loading = true;
152 |                 let self = this;
153 | 
154 |                 let params = self.$route.params;
155 |                 let serviceByHost = JSON.parse(self.services).filter(it => it.host === params.host)[0];
156 |                 this.$http.get(serviceByHost.url + '/' + params.class + '/' + params.method)
157 |                     .then(function (response) {
158 |                         self.loading = false;
159 |                         return response.json();
160 |                     })
161 |                     .then(function (myJson) {
162 |                         self.job = myJson;
163 |                         self.job.host = serviceByHost.host;
164 |                     })
165 |                     .catch(function (err) {
166 |                         self.loading = false;
167 |                         self.error = err;
168 |                     });
169 |             }
170 |         }
171 |     };
172 | </script>
173 | 


--------------------------------------------------------------------------------
/src/components/Menu.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div style="padding: 10px">
 3 |         <div class="select is-pulled-right">
 4 |             <select v-model="environment">
 5 |                 <option v-for="env in environments" v-bind:key="env">{{env}}</option>
 6 |             </select>
 7 |         </div>
 8 |     </div>
 9 | </template>
10 | 
11 | <script>
12 |     import {getEnvironments} from '../getEnvironmentSettings'
13 | 
14 |     export default {
15 |         name: "Menu",
16 |         data() {
17 |             return {
18 |                 environment: localStorage.getItem("env") || getEnvironments()[0],
19 |                 environments: getEnvironments()
20 |             }
21 |         },
22 |         watch: {
23 |             environment: function (newEnv, oldEnv) {
24 |                 localStorage.setItem("env", newEnv);
25 |                 location.reload()
26 |             }
27 |         }
28 |     }
29 | </script>


--------------------------------------------------------------------------------
/src/components/Overview.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="overview">
  3 |         <div style="margin-bottom: 20px">
  4 |             <router-link class="button is-light"
  5 |                          style="margin-right: 10px; margin-bottom: 10px"
  6 |                          :to="'/' + service.host"
  7 |                          active-class="is-dark"
  8 |                          v-for="service in services"
  9 |                         :key="service.host">
 10 |                 {{service.host}}
 11 |             </router-link>
 12 |         </div>
 13 | 
 14 |         <nav class="breadcrumb" aria-label="breadcrumbs">
 15 |             <ul>
 16 |                 <li v-bind:class="[this.$route.params.class || this.$route.params.host ? '' : 'is-active']">
 17 |                     <router-link to="/">Scheduled Jobs</router-link>
 18 |                 </li>
 19 | 
 20 |                 <li v-if="this.$route.params.host && !this.$route.params.class" class="is-active">
 21 |                     <a href="#">{{this.$route.params.host}}</a>
 22 |                 </li>
 23 |                 <li v-else-if="this.$route.params.host && this.$route.params.class">
 24 |                     <router-link :to="'/' + this.$route.params.host">{{this.$route.params.host}}</router-link>
 25 |                 </li>
 26 | 
 27 |                 <li v-if="this.$route.params.class" class="is-active">
 28 |                     <a href="#">{{this.$route.params.class}}</a>
 29 |                 </li>
 30 |             </ul>
 31 |         </nav>
 32 | 
 33 |         <div class="loading" v-if="!jobs">
 34 |             Loading...
 35 |         </div>
 36 | 
 37 |         <OverviewJobs v-bind:jobs="jobsWithError()" key="ERROR" v-if="jobsWithError()" style="margin-bottom: 20px"/>
 38 |         <OverviewJobs v-bind:jobs="jobsWithoutError()" key="WITHOUT_ERROR" v-if="jobsWithoutError()"/>
 39 |     </div>
 40 | </template>
 41 | 
 42 | <script>
 43 |     import OverviewJobs from "./OverviewJobs";
 44 |     import {getCurrentEnvironment} from "../getEnvironmentSettings";
 45 | 
 46 |     export default {
 47 |         name: "Overview",
 48 |         components: {OverviewJobs},
 49 |         data() {
 50 |             return {
 51 |                 jobs: null,
 52 |                 services: getCurrentEnvironment().services
 53 |             };
 54 |         },
 55 |         created() {
 56 |             this.fetchData();
 57 | 
 58 |             setInterval(function () {
 59 |                 this.fetchData();
 60 |             }.bind(this), 10000);
 61 |         },
 62 |         watch: {
 63 |             $route (to, from) {
 64 |                 this.jobs = null;
 65 |                 this.fetchData();
 66 |             }
 67 |         },
 68 |         methods: {
 69 |             jobsWithoutError() {
 70 |                 if (!this.jobs)
 71 |                     return [];
 72 | 
 73 |                 let allJobs = [];
 74 |                 this.jobs.forEach((value) => allJobs = allJobs.concat(value));
 75 |                 let jobsWithoutError = allJobs.filter(job => (!job.lastFinishedRun) || (job.lastFinishedRun && !job.lastFinishedRun.exception));
 76 |                 jobsWithoutError.sort(function (a, b) {
 77 |                     if (a.lastFinishedRun && !b.lastFinishedRun) {
 78 |                         return -1;
 79 |                     } else if (!a.lastFinishedRun && b.lastFinishedRun) {
 80 |                         return 1;
 81 |                     } else {
 82 |                         let methodName = a.methodName.localeCompare(b.methodName);
 83 | 
 84 |                         if (methodName === 0)
 85 |                             return a.className.localeCompare(b.className);
 86 | 
 87 |                         return methodName;
 88 |                     }
 89 |                 });
 90 | 
 91 |                 return jobsWithoutError;
 92 |             },
 93 |             jobsWithError() {
 94 |                 if (!this.jobs)
 95 |                     return [];
 96 | 
 97 |                 let allJobs = [];
 98 |                 this.jobs.forEach((value) => allJobs = allJobs.concat(value));
 99 | 
100 |                 let jobsWithError = allJobs.filter(job => job.lastFinishedRun && job.lastFinishedRun.exception);
101 |                 jobsWithError.sort(function (a, b) {
102 |                     return a.methodName.localeCompare(b.methodName);
103 |                 });
104 | 
105 |                 return jobsWithError;
106 |             },
107 |             fetchData() {
108 |                 let self = this;
109 | 
110 |                 let services = self.services;
111 |                 if (self.$route.params.host)
112 |                     services = services.filter(it => it.host === self.$route.params.host);
113 | 
114 |                 services.forEach(service => {
115 |                     this.$http.get(service.url)
116 |                         .then(function (response) {
117 |                             return response.json();
118 |                         })
119 |                         .then(function (myJson) {
120 |                             if (self.jobs == null)
121 |                                 self.jobs = new Map();
122 | 
123 |                             myJson.forEach(entry => entry.host = service.host);
124 | 
125 |                             self.jobs.delete(service.host);
126 |                             self.jobs.set(service.host, myJson);
127 | 
128 |                             self.$forceUpdate();
129 |                         })
130 |                         .catch(function (err) {
131 |                             console.log(err);
132 |                         });
133 |                 });
134 |             }
135 |         }
136 |     };
137 | </script>


--------------------------------------------------------------------------------
/src/components/OverviewJobs.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div>
  3 |         <div class="tile is-ancestor" v-for="(chunk, idx) in chunk(jobs, 3)" v-bind:key="idx">
  4 |             <div class="tile is-parent is-4" v-for="job in chunk" v-bind:key="job.name">
  5 |                 <div v-bind:class="cssClass(job)">
  6 |                     <p class="title is-capitalized is-size-4">
  7 |                         <router-link :to="job.host + '/' + job.className + '/' + job.methodName">{{job.methodName}}</router-link>
  8 |                     </p>
  9 |                     <p class="subtitle is-size-7">
 10 |                         <router-link :to="job.host + '/' + job.className">{{job.className}}</router-link>
 11 |                     </p>
 12 | 
 13 |                     <span v-if="job.latestRun" class="is-size-6"><icon name="play-circle"/> Last run started {{startTimeAsText(job.latestRun.startedAt)}}<br/></span>
 14 |                     <span v-else><icon name="pause"/> Job did not run yet.</span>
 15 | 
 16 |                 </div>
 17 |             </div>
 18 |         </div>
 19 |     </div>
 20 | </template>
 21 | 
 22 | <script>
 23 |     import moment from 'moment';
 24 | 
 25 |     export default {
 26 |         name: "OverviewJobs",
 27 |         props: {
 28 |             jobs: Array
 29 |         },
 30 |         methods: {
 31 |             chunk: function (arr, size) {
 32 |                 if (!arr) return null;
 33 |                 let newArr = [];
 34 |                 for (let i = 0; i < arr.length; i += size) {
 35 |                     newArr.push(arr.slice(i, i + size));
 36 |                 }
 37 |                 return newArr;
 38 |             },
 39 | 
 40 |             cssClass(job) {
 41 |                 let boxStyle = job.currentlyRunning ? 'blink' : '';
 42 |                 let lastRunStyle;
 43 |                 let lastFinishedRun = job.lastFinishedRun;
 44 |                 if (lastFinishedRun) {
 45 |                     if (lastFinishedRun.exception) {
 46 |                         lastRunStyle = 'is-danger';
 47 |                     } else {
 48 |                         lastRunStyle = 'is-primary';
 49 |                     }
 50 |                 }
 51 | 
 52 |                 return `tile is-child notification ${lastRunStyle} ${boxStyle}`
 53 |             },
 54 | 
 55 |             startTimeAsText(timeString) {
 56 |                 return moment(timeString).fromNow();
 57 |             }
 58 | 
 59 |         }
 60 |     }
 61 | </script>
 62 | 
 63 | <style scoped>
 64 |     @keyframes blink {
 65 |         0% {
 66 |             opacity: 1;
 67 |         }
 68 |         50% {
 69 |             opacity: 0.5;
 70 |         }
 71 |         100% {
 72 |             opacity: 1;
 73 |         }
 74 |     }
 75 | 
 76 |     @-webkit-keyframes blink {
 77 |         0% {
 78 |             opacity: 1;
 79 |         }
 80 |         50% {
 81 |             opacity: 0.5;
 82 |         }
 83 |         100% {
 84 |             opacity: 1;
 85 |         }
 86 |     }
 87 | 
 88 |     .blink {
 89 |         -moz-transition: all 0.5s ease-in-out;
 90 |         -webkit-transition: all 0.5s ease-in-out;
 91 |         -o-transition: all 0.5s ease-in-out;
 92 |         -ms-transition: all 0.5s ease-in-out;
 93 |         transition: all 0.5s ease-in-out;
 94 |         -moz-animation: blink normal 1.5s infinite ease-in-out;
 95 |         /* Firefox */
 96 |         -webkit-animation: blink normal 1.5s infinite ease-in-out;
 97 |         /* Webkit */
 98 |         -ms-animation: blink normal 1.5s infinite ease-in-out;
 99 |         /* IE */
100 |         animation: blink normal 1.5s infinite ease-in-out;
101 |     }
102 | </style>
103 | 


--------------------------------------------------------------------------------
/src/components/Run.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="run">
  3 |         <nav class="breadcrumb" aria-label="breadcrumbs">
  4 |             <ul>
  5 |                 <li>
  6 |                     <router-link to="/">Scheduled Jobs</router-link>
  7 |                 </li>
  8 |                 <li>
  9 |                     <router-link :to="'/' + this.$route.params.host">{{this.$route.params.host}}</router-link>
 10 |                 </li>
 11 |                 <li>
 12 |                     <router-link :to="'/' + this.$route.params.host + '/' + this.$route.params.class">
 13 |                         {{this.$route.params.class}}
 14 |                     </router-link>
 15 |                 </li>
 16 |                 <li class="is-capitalized">
 17 |                     <router-link
 18 |                         :to="'/' + this.$route.params.host + '/' + this.$route.params.class + '/' + this.$route.params.method">
 19 |                         {{this.$route.params.method}}
 20 |                     </router-link>
 21 |                 </li>
 22 | 
 23 |                 <li class="is-active is-capitalized">
 24 |                     <a href="#">Run {{this.$route.params.uuid}}</a>
 25 |                 </li>
 26 |             </ul>
 27 |         </nav>
 28 | 
 29 |         <div v-if="run">
 30 |             <div class="notification">
 31 |                 <table class="table is-fullwidth">
 32 |                     <tr>
 33 |                         <td>UUID</td>
 34 |                         <td>{{run.uuid}}</td>
 35 |                     </tr>
 36 |                     <tr>
 37 |                         <td>Started at</td>
 38 |                         <td>{{moment(run.startedAt).format('DD.MM.YYYY HH:mm:ss')}}</td>
 39 |                     </tr>
 40 |                     <tr>
 41 |                         <td>Ended at</td>
 42 |                         <td>{{moment(run.endedAt).format('DD.MM.YYYY HH:mm:ss')}}</td>
 43 |                     </tr>
 44 |                     <tr>
 45 |                         <td>Duration</td>
 46 |                         <td>{{run.duration ? durationAsText(run.duration) : '-'}}</td>
 47 |                     </tr>
 48 |                     <tr>
 49 |                         <td>Exception occured</td>
 50 |                         <td>{{run.exception ? 'Yes' : 'No'}}</td>
 51 |                     </tr>
 52 |                 </table>
 53 |             </div>
 54 | 
 55 |             <div v-if="run.exception" class="notification is-danger">
 56 |                 <p class="is-size-5">Exception message</p>
 57 |                 <p>{{run.exception.message}}</p>
 58 |                 <hr/>
 59 |                 <p class="is-size-5">Stacktrace</p>
 60 |                 <p>{{run.exception.stackTrace}}</p>
 61 |             </div>
 62 |         </div>
 63 | 
 64 |     </div>
 65 | </template>
 66 | 
 67 | <script>
 68 |     import moment from 'moment';
 69 |     import {getCurrentEnvironment} from "../getEnvironmentSettings";
 70 | 
 71 |     export default {
 72 |         name: "Run",
 73 |         data() {
 74 |             return {
 75 |                 loading: false,
 76 |                 run: null,
 77 |                 error: null
 78 |             };
 79 |         },
 80 |         created() {
 81 |             this.fetchData();
 82 | 
 83 |             setInterval(function () {
 84 |                 this.fetchData();
 85 |             }.bind(this), 10000);
 86 |         },
 87 |         watch: {
 88 |             $route: "fetchData"
 89 |         },
 90 |         methods: {
 91 |             moment: function (str) {
 92 |                 return moment(str);
 93 |             },
 94 |             durationAsText(duration) {
 95 |                 return moment.duration(duration).humanize();
 96 |             },
 97 |             fetchData() {
 98 |                 this.error = null;
 99 |                 this.loading = true;
100 |                 let self = this;
101 | 
102 |                 let params = this.$route.params;
103 |                 let serviceByHost = JSON.parse(getCurrentEnvironment()).filter(it => it.host === params.host)[0];
104 |                 this.$http.get(serviceByHost.url + '/' + params.class + '/' + params.method + '/' + params.uuid)
105 |                     .then(response => {
106 |                         self.loading = false;
107 |                         return response.json();
108 |                     })
109 |                     .then(myJson => {
110 |                         self.run = myJson;
111 |                     })
112 |                     .catch(err => {
113 |                         self.loading = false;
114 |                         self.error = err;
115 |                     });
116 |             }
117 |         }
118 |     };
119 | </script>
120 | 


--------------------------------------------------------------------------------
/src/getEnvironmentSettings.js:
--------------------------------------------------------------------------------
 1 | export function getEnvironments() {
 2 |     let environmentSettings = getEnvironmentSettings();
 3 |     let envs = [];
 4 |     for (let key in environmentSettings) {
 5 |         envs.push(key)
 6 |     }
 7 |     return envs
 8 | }
 9 | 
10 | export function getEnvironment(env) {
11 |     return getEnvironmentSettings()[env]
12 | }
13 | 
14 | export function getCurrentEnvironmentName() {
15 |     return localStorage.getItem("env") || getEnvironments()[0];
16 | }
17 | 
18 | export function getCurrentEnvironment() {
19 |     let environment = getCurrentEnvironmentName();
20 | 
21 |     return getEnvironment(environment)
22 | }
23 | 
24 | export function getEnvironmentSettings() {
25 |     return {
26 |         "Test": {
27 |             "baseUrl": "https://my-api.test.de/",
28 |             "services": [
29 |                 {
30 |                     "host": "Billing-Service",
31 |                     "url": "billing-service/scheduled-jobs"
32 |                 },
33 |                 {
34 |                     "host": "Contract-Service",
35 |                     "url": "contract-service/scheduled-jobs"
36 |                 }
37 |             ]
38 |         },
39 |         "Production": {
40 |             "baseUrl": "https://my-api.live.de/",
41 |             "services": [
42 |                 {
43 |                     "host": "Billing-Service",
44 |                     "url": "billing-service/scheduled-jobs"
45 |                 },
46 |                 {
47 |                     "host": "Contract-Service",
48 |                     "url": "contract-service/scheduled-jobs"
49 |                 }
50 |             ]
51 |         }
52 |     }
53 | }


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | import Overview from './components/Overview'
 4 | import Job from './components/Job'
 5 | import Run from './components/Run'
 6 | import VueRouter from 'vue-router'
 7 | import VueResource from 'vue-resource';
 8 | import 'bulma/css/bulma.css'
 9 | import 'vue-awesome/icons/play-circle';
10 | import 'vue-awesome/icons/spinner';
11 | import 'vue-awesome/icons/check-circle';
12 | import 'vue-awesome/icons/exclamation-circle';
13 | import 'vue-awesome/icons/pause';
14 | import Icon from 'vue-awesome/components/Icon';
15 | import {getCurrentEnvironment} from "./getEnvironmentSettings";
16 | 
17 | Vue.config.productionTip = false;
18 | 
19 | Vue.use(VueRouter);
20 | Vue.use(VueResource);
21 | Vue.component('icon', Icon);
22 | 
23 | Vue.http.options.root = getCurrentEnvironment().baseUrl;
24 | 
25 | const routes = [
26 |     {path: '/', component: Overview},
27 |     {path: '/:host', component: Overview},
28 |     {path: '/:host/:class', component: Overview},
29 |     {path: '/:host/:class/:method', component: Job},
30 |     {path: '/:host/:class/:method/:uuid', component: Run}
31 | ];
32 | 
33 | // 3. Create the router instance and pass the `routes` option
34 | // You can pass in additional options here, but let's
35 | // keep it simple for now.
36 | const router = new VueRouter({
37 |     routes
38 | });
39 | 
40 | new Vue({
41 |     router,
42 |     render: h => h(App)
43 | }).$mount('#app');
44 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |     baseUrl: './'
3 | };
4 | 


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