add wallboard view

closes codecentric#313

Author: joshiste

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

@@ -30,6 +30,7 @@
  "moment": "^2.21.0",
  "moment-shortformat": "^2.1.0",
  "pretty-bytes": "^4.0.2",
+ "resize-observer-polyfill": "^1.5.0",
  "rxjs": "^5.5.7",
  "vue": "^2.5.16",
  "vue-clickaway": "^2.1.0",
@@ -50,9 +51,9 @@
  "clean-webpack-plugin": "^0.1.19",
  "cross-env": "^5.1.4",
  "css-hot-loader": "^1.3.8",
- "css-loader": "^0.28.10",
+ "css-loader": "^0.28.11",
  "css-mqpacker": "^6.0.2",
- "eslint": "^4.18.2",
+ "eslint": "^4.19.0",
  "eslint-loader": "^1.9.0",
  "eslint-plugin-html": "^4.0.2",
  "eslint-plugin-vue": "^4.3.0",
@@ -66,11 +67,11 @@
  "lodash-webpack-plugin": "^0.11.4",
  "node-sass": "^4.8.2",
  "optimize-css-assets-webpack-plugin": "^3.2.0",
- "postcss-loader": "^2.1.1",
+ "postcss-loader": "^2.1.2",
  "sass-loader": "^6.0.7",
  "style-loader": "^0.20.3",
  "url-loader": "^0.6.2",
- "vue-jest": "^2.1.1",
+ "vue-jest": "^2.2.1",
  "vue-loader": "^14.2.1",
  "vue-svg-loader": "^0.5.0",
  "vue-template-compiler": "^2.5.16",

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

@@ -18,6 +18,24 @@
 @import "~bulma/bulma";
 @import "~bulma-badge/dist/bulma-badge";
 
+html {
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
+}
+
+body {
+ flex-grow: 1;
+ display: flex;
+ flex-direction: column;
+
+ & > div {
+ flex-grow: 1;
+ display: flex;
+ flex-direction: column;
+ }
+}
+
 .is-breakable {
  word-break: break-all;
 }
@@ -50,7 +68,6 @@
  }
 }
 
-
 //Loading spinner
 .section.is-loading,
 .content.is-loading {

spring-boot-admin-server-ui/src/main/frontend/assets/css/base.scss

@@ -0,0 +1,47 @@
+/*
+ * 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.
+ */
+
+import ResizeObserver from 'resize-observer-polyfill';
+
+const observers = new WeakMap();
+
+const bind = (el, binding) => {
+ unbind(el);
+ const observer = new ResizeObserver(binding.value);
+ observer.observe(el);
+ observers.set(el, observer);
+
+};
+
+const unbind = (el) => {
+ const observer = observers.get(el);
+ if (observer) {
+ observer.disconnect();
+ observers.delete(el);
+ }
+};
+
+export default {
+ bind,
+ update(el, binding) {
+ if (binding.value === binding.oldValue) {
+ return
+ }
+ bind(el, binding)
+ },
+ unbind
+}
+

spring-boot-admin-server-ui/src/main/frontend/directives/on-resize.js

@@ -18,6 +18,7 @@ import {view as aboutView} from './about';
 import {view as applicationView} from './applications';
 import instanceViews from './instances';
 import {view as journalView} from './journal';
+import {view as wallboardView} from './wallboard';
 
 export default router => {
  const views = [];
@@ -49,9 +50,11 @@ export default router => {
  views.register(applicationView);
  views.register(journalView);
  views.register(aboutView);
+ views.register(wallboardView);
  instanceViews.forEach(views.register);
+ views.sort((a, b) => a.order - b.order);
 
  router.addRoutes([{path: '/', redirect: {name: 'applications'}}]);
 
  return views;
-}
+}

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

@@ -0,0 +1,41 @@
+/*
+ * 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.
+ */
+
+import * as hm from './hex-mesh'
+
+describe('calcLayout', () => {
+
+ it('should calculate optimum layout for 12 in 1594x879', () => {
+ const result = hm.calcLayout(12, 1594, 879);
+
+ expect(result).toEqual({
+ rows: 3,
+ cols: 5,
+ sidelength: 175.8
+ });
+ });
+
+ it('should calculate optimum layout for 1 in 100x100', () => {
+ const result = hm.calcLayout(1, 100, 100);
+
+ expect(result).toEqual({
+ rows: 1,
+ cols: 1,
+ sidelength: 50
+ });
+ });
+
+});