Commit a688e0a2 by Johannes Edmeier

add about page

parent db22f4e0
......@@ -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",
......
......@@ -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",
......
......@@ -77,6 +77,9 @@
<argument>run</argument>
<argument>build</argument>
</arguments>
<environmentVariables>
<PROJECT_VERSION>${project.version}</PROJECT_VERSION>
</environmentVariables>
</configuration>
</execution>
<execution>
......
......@@ -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
......
<!--
- 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>
......@@ -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;
}
}
}
......
......@@ -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: [{
......
<!--
- 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
......@@ -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
},
......
......@@ -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,
......
......@@ -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'],
......
......@@ -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>
......
......@@ -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 {
......
......@@ -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/),
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment