add about page

spring-boot-admin-server-ui/package-lock.json

@@ -113,6 +113,26 @@
         }
       }
     },
+    "@fortawesome/fontawesome": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome/-/fontawesome-1.1.0.tgz",
+      "integrity": "sha512-HitzVVotHB70QGYaoKvkvaGqKL2P/xdpeg1KK1ESEyI5qBcZdRTWpH9W5XVB72Ev02V4Qo/Ldxjf4UL+kakWdw=="
+    },
+    "@fortawesome/fontawesome-free-brands": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free-brands/-/fontawesome-free-brands-5.0.2.tgz",
+      "integrity": "sha512-J7SyvuBFxx3/4VcuSkVlsWxDLCj34Pc1zkOkxQkBDIvmbv6uXC3IUqkhZjyV7AHSM9iDoDeI9CczLk0sJwW25g=="
+    },
+    "@fortawesome/fontawesome-free-solid": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free-solid/-/fontawesome-free-solid-5.0.2.tgz",
+      "integrity": "sha512-By7V/yO2XyMonzTmo6KxPcw0OLqycozNDJaASAcky+YZkIL7p1hJ8Ki5OlF4X2z1fMQfpXbbBVfeU6atr1rlUQ=="
+    },
+    "@fortawesome/vue-fontawesome": {
+      "version": "0.0.22",
+      "resolved": "https://registry.npmjs.org/@fortawesome/vue-fontawesome/-/vue-fontawesome-0.0.22.tgz",
+      "integrity": "sha512-KKQ1hVTWkXRaSGVMNI/dZsznVJIZ8dqLA2J6X8nZAIg7F2Gs1zIzBC9qxOKm+gktFAJU2aCCR7BTCoZIdjvGNw=="
+    },
     "@types/node": {
       "version": "8.5.2",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-8.5.2.tgz",
@@ -7322,11 +7342,6 @@
       "integrity": "sha1-2TPOuSBdgr3PSIb2dCvcK03qFG0=",
       "dev": true
     },
-    "material-design-icons": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/material-design-icons/-/material-design-icons-3.0.1.tgz",
-      "integrity": "sha1-mnHEh0chjrylHlGmbaaCA4zct78="
-    },
     "math-expression-evaluator": {
       "version": "1.2.17",
       "resolved": "https://registry.npmjs.org/math-expression-evaluator/-/math-expression-evaluator-1.2.17.tgz",

spring-boot-admin-server-ui/package.json

@@ -10,13 +10,16 @@
     "test:watch": "jest --watch"
   },
   "dependencies": {
+    "@fortawesome/fontawesome": "^1.1.0",
+    "@fortawesome/fontawesome-free-brands": "^5.0.2",
+    "@fortawesome/fontawesome-free-solid": "^5.0.2",
+    "@fortawesome/vue-fontawesome": "0.0.22",
     "axios": "^0.17.1",
     "bulma": "^0.6.1",
     "d3": "^4.12.2",
     "event-source-polyfill": "0.0.12",
     "linkifyjs": "^2.1.5",
     "lodash": "^4.17.4",
-    "material-design-icons": "^3.0.1",
     "moment": "^2.20.1",
     "moment-shortformat": "^2.1.0",
     "pretty-bytes": "^4.0.2",

spring-boot-admin-server-ui/pom.xml

@@ -77,6 +77,9 @@
                                 <argument>run</argument>
                                 <argument>build</argument>
                             </arguments>
+                            <environmentVariables>
+                                <PROJECT_VERSION>${project.version}</PROJECT_VERSION>
+                            </environmentVariables>
                         </configuration>
                     </execution>
                     <execution>

spring-boot-admin-server-ui/src/main/frontend/components/__snapshots__/sba-status.spec.js.snap

@@ -4,7 +4,9 @@ exports[`application-status should match the snapshot with custom status 1`] = `
 <div
   class="application-status"
 >
-  <!---->
+  <font-awesome-icon
+    class="application-status__icon application-status__icon--?"
+  />
    
   <!---->
 </div>
@@ -14,7 +16,10 @@ exports[`application-status should match the snapshot with status DOWN 1`] = `
 <div
   class="application-status"
 >
-  node_modules/material-design-icons/content/svg/production/ic_clear_24px.svg
+  <font-awesome-icon
+    class="application-status__icon application-status__icon--DOWN"
+    icon="times-circle"
+  />
    
   <!---->
 </div>
@@ -24,7 +29,10 @@ exports[`application-status should match the snapshot with status OFFLINE 1`] =
 <div
   class="application-status"
 >
-  node_modules/material-design-icons/content/svg/production/ic_remove_24px.svg
+  <font-awesome-icon
+    class="application-status__icon application-status__icon--OFFLINE"
+    icon="minus-circle"
+  />
    
   <!---->
 </div>
@@ -34,7 +42,10 @@ exports[`application-status should match the snapshot with status OUT_OF_SERVICE
 <div
   class="application-status"
 >
-  node_modules/material-design-icons/content/svg/production/ic_block_24px.svg
+  <font-awesome-icon
+    class="application-status__icon application-status__icon--OUT_OF_SERVICE"
+    icon="ban"
+  />
    
   <!---->
 </div>
@@ -44,7 +55,10 @@ exports[`application-status should match the snapshot with status RESTRICTED 1`]
 <div
   class="application-status"
 >
-  node_modules/material-design-icons/content/svg/production/ic_report_24px.svg
+  <font-awesome-icon
+    class="application-status__icon application-status__icon--RESTRICTED"
+    icon="exclamation"
+  />
    
   <!---->
 </div>
@@ -54,7 +68,10 @@ exports[`application-status should match the snapshot with status UNKNOWN 1`] =
 <div
   class="application-status"
 >
-  node_modules/material-design-icons/action/svg/production/ic_help_outline_24px.svg
+  <font-awesome-icon
+    class="application-status__icon application-status__icon--UNKNOWN"
+    icon="querstion-circle"
+  />
    
   <!---->
 </div>
@@ -64,7 +81,10 @@ exports[`application-status should match the snapshot with status UP with Timest
 <div
   class="application-status"
 >
-  node_modules/material-design-icons/action/svg/production/ic_done_24px.svg
+  <font-awesome-icon
+    class="application-status__icon application-status__icon--UP"
+    icon="check"
+  />
    
   <small>
     14m

spring-boot-admin-server-ui/src/main/frontend/components/sba-pageloader.vue

-<!--
-  - Copyright 2014-2018 the original author or authors.
-  -
-  - Licensed under the Apache License, Version 2.0 (the "License");
-  - you may not use this file except in compliance with the License.
-  - You may obtain a copy of the License at
-  -
-  -     http://www.apache.org/licenses/LICENSE-2.0
-  -
-  - Unless required by applicable law or agreed to in writing, software
-  - distributed under the License is distributed on an "AS IS" BASIS,
-  - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  - See the License for the specific language governing permissions and
-  - limitations under the License.
-  -->
-
-<template>
-    <div class="pageloader is-loading  ">
-    </div>
-</template>
-
-<script>
-  import searchIcon from 'material-design-icons/action/svg/production/ic_search_24px.svg';
-
-  export default {
-    components: {
-      searchIcon
-    },
-
-    props: {
-      value: String,
-    }
-  }
-</script>
-
-<style lang="scss">
-    @import "~@/assets/css/utilities";
-
-    .pageloader {
-        width: 100%;
-        height: 100%;
-        opacity: 0.5;
-        background: $dark;
-        transition: all $easing $speed;
-        will-change: opacity;
-
-        .is-active {
-        }
-    }
-</style>

spring-boot-admin-server-ui/src/main/frontend/components/sba-status.vue

@@ -16,8 +16,8 @@
 
 <template>
     <div class="application-status">
-        <component :is="icon"
-                   class="application-status__icon" :class="`application-status__icon--${status}`"></component>
+        <font-awesome-icon :icon="icon" class="application-status__icon"
+                           :class="`application-status__icon--${status}`"></font-awesome-icon>
         <small v-if="date">
             <sba-time-ago :date="date"></sba-time-ago>
         </small>
@@ -25,32 +25,20 @@
 </template>
 
 <script>
-  import upIcon from 'material-design-icons/action/svg/production/ic_done_24px.svg';
-  import unknownIcon from 'material-design-icons/action/svg/production/ic_help_outline_24px.svg';
-  import outOfServiceIcon from 'material-design-icons/content/svg/production/ic_block_24px.svg';
-  import downIcon from 'material-design-icons/content/svg/production/ic_clear_24px.svg';
-  import offlineIcon from 'material-design-icons/content/svg/production/ic_remove_24px.svg';
-  import restrictedIcon from 'material-design-icons/content/svg/production/ic_report_24px.svg';
   import sbaTimeAgo from './sba-time-ago';
 
   const icons = {
-    'UP': upIcon,
-    'RESTRICTED': restrictedIcon,
-    'OUT_OF_SERVICE': outOfServiceIcon,
-    'DOWN': downIcon,
-    'OFFLINE': offlineIcon,
-    'UNKNOWN': unknownIcon
+    'UP': 'check',
+    'RESTRICTED': 'exclamation',
+    'OUT_OF_SERVICE': 'ban',
+    'DOWN': 'times-circle',
+    'OFFLINE': 'minus-circle',
+    'UNKNOWN': 'querstion-circle'
   };
 
   export default {
     components: {
       sbaTimeAgo,
-      upIcon,
-      restrictedIcon,
-      outOfServiceIcon,
-      downIcon,
-      offlineIcon,
-      unknownIcon
     },
     props: {
       status: String,
@@ -65,6 +53,8 @@
 </script>
 
 <style lang="scss">
+    @import "~@/assets/css/utilities";
+
     .application-status {
         text-align: center;
         line-height: 1rem;
@@ -72,25 +62,25 @@
         flex-direction: column;
 
         &__icon {
-            fill: gray;
+            color: gray;
             margin: 0 auto;
 
             &--UP {
-                fill: green;
+                color: $success;
             }
 
             &--RESTRICTED {
-                fill: orange;
+                color: $warning;
             }
 
             &--OUT_OF_SERVICE,
             &--DOWN {
-                fill: red;
+                color: $danger;
             }
 
             &--UNKNOWN,
             &--OFFLINE {
-                fill: grey;
+                color: $grey;
             }
         }
     }

spring-boot-admin-server-ui/src/main/frontend/index.js

@@ -14,12 +14,20 @@
  * limitations under the License.
  */
 
+import fontawesome from '@fortawesome/fontawesome'
+import {faGithub, faGitter, faStackOverflow} from '@fortawesome/fontawesome-free-brands'
+import {
+  faBan, faBook, faCheck, faDownload, faExclamation, faMinusCircle, faQuestionCircle, faStepBackward,
+  faStepForward, faTimesCircle, faTrash
+} from '@fortawesome/fontawesome-free-solid'
+import FontAwesomeIcon from '@fortawesome/vue-fontawesome'
 import moment from 'moment';
 import Vue from 'vue'
 import VueRouter from 'vue-router'
 import './assets/css/base.scss'
 import './assets/img/favicon.png'
 import sbaComponents from './components'
+import sbaAbout from './views/about';
 import sbaApplications from './views/applications';
 import sbaInstancesDetails from './views/instances/details';
 import sbaInstancesEnv from './views/instances/env';
@@ -32,10 +40,14 @@ import sbaInstancesThreaddump from './views/instances/threaddump';
 import sbaInstancesTrace from './views/instances/trace';
 import sbaShell from './views/shell'
 
+fontawesome.library.add(faGithub, faStackOverflow, faGitter, faTrash, faDownload, faStepForward, faStepBackward, faCheck, faQuestionCircle, faBan, faTimesCircle, faMinusCircle, faExclamation,
+  faBook);
+
 moment.locale(window.navigator.language);
 
 Vue.use(VueRouter);
 Vue.use(sbaComponents);
+Vue.component('font-awesome-icon', FontAwesomeIcon);
 
 const router = new VueRouter({
   linkActiveClass: 'is-active'
@@ -69,7 +81,7 @@ views.register({
   component: sbaApplications
 });
 views.register({path: '/journal', name: 'journal', template: 'Journal', order: 100, component: sbaApplications});
-views.register({path: '/about', name: 'about', template: 'About', order: 200, component: sbaApplications});
+views.register({path: '/about', name: 'about', template: 'About', order: 200, component: sbaAbout});
 views.register({
   path: '/instances/:instanceId', component: sbaInstancesShell, props: true,
   children: [{

spring-boot-admin-server-ui/src/main/frontend/views/about/index.vue

+<!--
+  - Copyright 2014-2018 the original author or authors.
+  -
+  - Licensed under the Apache License, Version 2.0 (the "License");
+  - you may not use this file except in compliance with the License.
+  - You may obtain a copy of the License at
+  -
+  -     http://www.apache.org/licenses/LICENSE-2.0
+  -
+  - Unless required by applicable law or agreed to in writing, software
+  - distributed under the License is distributed on an "AS IS" BASIS,
+  - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  - See the License for the specific language governing permissions and
+  - limitations under the License.
+  -->
+
+<template>
+    <div class="section">
+        <div class="container">
+            <h1 class="title">About Spring Boot Admin</h1>
+            <h2 class="subtitle" v-if="version" v-text="`Version ${version}`"></h2>
+            <div class="content">
+                <p>
+                    This is an administration UI for Spring Boot applications.
+                </p>
+                <p>
+                    To monitor applications, they must be registered at this server. This is either done by including
+                    the <a
+                        href="http://codecentric.github.io/spring-boot-admin/@project.version@/#register-clients-via-spring-boot-admin">Spring
+                    Boot Admin Client</a>
+                    or using a <a
+                        href="http://codecentric.github.io/spring-boot-admin/@project.version@/#discover-clients-via-spring-cloud-discovery">Spring
+                    Cloud Discovery Client</a> implementation.
+                </p>
+                <p>
+                    If you have any question please consult the
+                    <a href="https://codecentric.github.io/spring-boot-admin/@project.version@">Reference Guide</a>, ask
+                    on <a href="https://stackoverflow.com/questions/tagged/spring-boot-admin"> Stack Overflow</a> or
+                    have a chat on the <a href="https://gitter.im/codecentric/spring-boot-admin">Gitter</a> channel.
+                </p>
+                <p>
+                    If you found a bug, want to propose a feature or submit a pull request please use the
+                    <a href="https://github.com/codecentric/spring-boot-admin/issues">issue tracker</a>.
+                </p>
+                <div class="about-links">
+                    <a class="button is-primary is-outlined"
+                       :href="`https://codecentric.github.io/spring-boot-admin/${version}`">
+                        <font-awesome-icon size="lg" icon="book"></font-awesome-icon>&nbsp;Reference Guide</a>
+                    <a class="button is-black is-outlined" href="https://github.com/codecentric/spring-boot-admin">
+                        <font-awesome-icon size="lg" :icon="['fab', 'github']"></font-awesome-icon>&nbsp;Sources</a>
+                    <a class="button is-stackoverflow is-outlined"
+                       href="https://stackoverflow.com/questions/tagged/spring-boot-admin">
+                        <font-awesome-icon size="lg" :icon="['fab', 'stack-overflow']"></font-awesome-icon>&nbsp;Stack
+                        Overflow</a>
+                    <a class="button is-gitter is-outlined" href="https://gitter.im/codecentric/spring-boot-admin">
+                        <font-awesome-icon size="lg" :icon="['fab', 'gitter']"></font-awesome-icon>&nbsp;Gitter</a>
+                </div>
+            </div>
+            <h1 class="title is-5">Trademarks and License</h1>
+            <div class="content">
+                <p>
+                    The source code of Spring Boot Admin is licensed under <a
+                        href="https://www.apache.org/licenses/LICENSE-2.0">Apache License 2.0</a>.
+                </p>
+                <p>
+                    Spring, Spring Boot and Spring Cloud are trademarks of <a href="https://pivotal.io/">Pivotal
+                    Software, Inc.</a> in the U.S. and other countries.
+                </p>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+  export default {
+    data: () => ({
+      version: __PROJECT_VERSION__
+    })
+  }
+</script>
+
+<style lang="scss">
+    .about-links {
+        display: flex;
+        align-items: center;
+
+        & > * {
+            margin-right: 0.5rem;
+        }
+    }
+
+    $stackoverflow: #f48024;
+    .button.is-stackoverflow.is-outlined {
+        background-color: transparent;
+        border-color: $stackoverflow;
+        color: $stackoverflow;
+
+        &:hover,
+        &:focus {
+            background-color: $stackoverflow;
+            border-color: $stackoverflow;
+            color: white;
+        }
+    }
+
+    $gitter: #ed1965;
+    .button.is-gitter.is-outlined {
+        background-color: transparent;
+        border-color: $gitter;
+        color: $gitter;
+
+        &:hover,
+        &:focus {
+            background-color: $gitter;
+            border-color: $gitter;
+            color: white;
+        }
+    }
+</style>
\ No newline at end of file

spring-boot-admin-server-ui/src/main/frontend/views/applications/applications-list.vue

@@ -39,7 +39,7 @@
                     <sba-icon-button
                             v-if="application.isUnregisterable"
                             @click.native.stop="unregister(application)">
-                        <delete-icon></delete-icon>
+                        <font-awesome-icon icon="trash"></font-awesome-icon>
                     </sba-icon-button>
                 </div>
             </div>
@@ -53,7 +53,7 @@
                         <sba-icon-button
                                 v-if="application.isUnregisterable"
                                 @click.native.stop="unregister(application)">
-                            <delete-icon></delete-icon>
+                            <font-awesome-icon icon="trash"></font-awesome-icon>
                         </sba-icon-button>
                     </div>
                 </div>
@@ -76,7 +76,7 @@
                         <div class="applications-list-item__actions">
                             <sba-icon-button v-if="instance.isUnregisterable"
                                              @click.native.stop="unregister(instance)">
-                                <delete-icon></delete-icon>
+                                <font-awesome-icon icon="trash"></font-awesome-icon>
                             </sba-icon-button>
                         </div>
                     </li>
@@ -87,13 +87,9 @@
 </template>
 
 <script>
-  import deleteIcon from 'material-design-icons/action/svg/production/ic_delete_24px.svg';
   import {directive as onClickaway} from 'vue-clickaway';
 
   export default {
-    components: {
-      deleteIcon
-    },
     directives: {
       onClickaway
     },

spring-boot-admin-server-ui/src/main/frontend/views/instances/logfile/index.vue

@@ -19,15 +19,14 @@
         <div class="logfile-view-actions">
             <div class="logfile-view-actions__navigation">
                 <sba-icon-button :disabled="atTop" @click.native="scrollToTop">
-                    <first-page-icon class="rotated"></first-page-icon>
+                    <font-awesome-icon icon="step-backward" size="lg" class="rotated"></font-awesome-icon>
                 </sba-icon-button>
                 <sba-icon-button :disabled="atBottom" @click.native="scrollToBottom">
-                    <last-page-icon class="rotated"></last-page-icon>
+                    <font-awesome-icon icon="step-forward" size="lg" class="rotated"></font-awesome-icon>
                 </sba-icon-button>
             </div>
             <a class="button" v-if="instance" :href="`instances/${instance.id}/logfile`" target="_blank">
-                <download-icon></download-icon>
-                Download
+                <font-awesome-icon icon="download"></font-awesome-icon>&nbsp;Download
             </a>
         </div>
         <p v-if="skippedBytes > 0" v-text="skippedHumanBytes"></p>
@@ -38,15 +37,9 @@
 <script>
   import {animationFrame, Observable} from '@/utils/rxjs';
   import _ from 'lodash';
-  import downloadIcon from 'material-design-icons/file/svg/production/ic_file_download_24px.svg';
-  import firstPageIcon from 'material-design-icons/navigation/svg/production/ic_first_page_24px.svg';
-  import lastPageIcon from 'material-design-icons/navigation/svg/production/ic_last_page_24px.svg';
   import prettyBytes from 'pretty-bytes';
 
   export default {
-    components: {
-      downloadIcon, firstPageIcon, lastPageIcon
-    },
     props: ['instance'],
     data: () => ({
       subscription: null,

spring-boot-admin-server-ui/src/main/frontend/views/instances/loggers/index.vue

@@ -73,7 +73,6 @@
 </template>
 
 <script>
-  import sbaPageloader from '@/components/sba-pageloader';
   import sbaLoggerControl from './logger-control.vue'
 
   const isPackageName = (name) => {
@@ -88,7 +87,6 @@
 
   export default {
     components: {
-      sbaPageloader,
       sbaLoggerControl
     },
     props: ['instance'],

spring-boot-admin-server-ui/src/main/frontend/views/instances/trace/index.vue

@@ -70,7 +70,7 @@
                 <sba-traces-list :traces="selectedTraces"></sba-traces-list>
             </div>
             <div class="content" v-else>
-                <p>No traces recorded.</p>
+                <p class="is-muted">No traces recorded.</p>
             </div>
         </div>
     </section>

spring-boot-admin-server-ui/src/main/frontend/views/shell/navbar.vue

@@ -20,7 +20,7 @@
             <div class="navbar-brand">
                 <a class="navbar-item logo" href="/">
                     <boot-logo></boot-logo>
-                    Admin
+                    Spring Boot Admin
                 </a>
                 <div class="navbar-burger burger" @click.stop="showMenu = !showMenu">
                     <span></span>
@@ -66,7 +66,7 @@
 
     .logo {
         font-size: 1.5rem;
-        font-weight: 500;
+        font-weight: 600;
         color: $white;
 
         & svg {

spring-boot-admin-server-ui/webpack.config.js

@@ -133,11 +133,14 @@ const config = {
     ]
   },
   plugins: [
-    new CleanWebpackPlugin(['dist'], {
+    new CleanWebpackPlugin(['target/dist'], {
       root: __dirname,
       verbose: true,
       dry: false,
     }),
+    new webpack.DefinePlugin({
+      '__PROJECT_VERSION__': `'${process.env.PROJECT_VERSION || ''}'`
+    }),
     new webpack.NamedModulesPlugin(),
     new LodashModuleReplacementPlugin(),
 //    new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /en/),