You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@brooklyn.apache.org by he...@apache.org on 2023/07/27 14:42:26 UTC
[brooklyn-ui] 01/02: add ability to store a description for ui modules and show it on the home page
This is an automated email from the ASF dual-hosted git repository.
heneveld pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/brooklyn-ui.git
commit dad3c1ccd1b186cd43fa294e9548cec563cb37ad
Author: Alex Heneveld <al...@cloudsoft.io>
AuthorDate: Thu Jul 27 15:34:31 2023 +0100
add ability to store a description for ui modules and show it on the home page
---
.../ui/modularity/module/api/UiModule.java | 5 +++
.../module/api/internal/UiModuleImpl.java | 18 ++++++++++
ui-modules/home/app/views/main/main.controller.js | 12 ++++++-
ui-modules/home/app/views/main/main.less | 38 ++++++++++++++++++++++
ui-modules/home/app/views/main/main.template.html | 19 +++++++++--
5 files changed, 89 insertions(+), 3 deletions(-)
diff --git a/modularity-server/module-api/src/main/java/org/apache/brooklyn/ui/modularity/module/api/UiModule.java b/modularity-server/module-api/src/main/java/org/apache/brooklyn/ui/modularity/module/api/UiModule.java
index 0c1d326a..72ae70e6 100644
--- a/modularity-server/module-api/src/main/java/org/apache/brooklyn/ui/modularity/module/api/UiModule.java
+++ b/modularity-server/module-api/src/main/java/org/apache/brooklyn/ui/modularity/module/api/UiModule.java
@@ -42,6 +42,11 @@ public interface UiModule {
*/
String getSlug();
+ /**
+ * @return A description of the module, in HTML format
+ */
+ String getDescription();
+
/**
* @return The icon to be used for the module
*/
diff --git a/modularity-server/module-api/src/main/java/org/apache/brooklyn/ui/modularity/module/api/internal/UiModuleImpl.java b/modularity-server/module-api/src/main/java/org/apache/brooklyn/ui/modularity/module/api/internal/UiModuleImpl.java
index fad974a4..f06a7bc3 100644
--- a/modularity-server/module-api/src/main/java/org/apache/brooklyn/ui/modularity/module/api/internal/UiModuleImpl.java
+++ b/modularity-server/module-api/src/main/java/org/apache/brooklyn/ui/modularity/module/api/internal/UiModuleImpl.java
@@ -34,6 +34,7 @@ public class UiModuleImpl implements UiModule {
private String id;
private String name;
private String slug;
+ private String description;
private String icon;
private Set<String> types = new LinkedHashSet<>();
private Set<String> supersedesBundles = new LinkedHashSet<>();
@@ -47,6 +48,7 @@ public class UiModuleImpl implements UiModule {
result.setName(src.getName());
result.setOrder(src.getOrder());
result.setSlug(src.getSlug());
+ result.setDescription(src.getDescription());
result.setIcon(src.getIcon());
if (src.getTypes()!=null) result.types.addAll(src.getTypes());
if (src.getSupersedesBundles()!=null) result.supersedesBundles.addAll(src.getSupersedesBundles());
@@ -62,6 +64,7 @@ public class UiModuleImpl implements UiModule {
result.setName(Optional.fromNullable((String) incomingMap.get("name")).or(result.getId()));
result.setOrder(Optional.fromNullable((Integer) incomingMap.get("order")).or(UiModule.DEFAULT_ORDER));
result.setSlug((String) incomingMap.get("slug"));
+ result.setDescription((String) incomingMap.get("description"));
result.setIcon(Optional.fromNullable((String) incomingMap.get("icon")).or(DEFAULT_ICON));
final Object types = incomingMap.get("types");
if (types != null && types instanceof List) {
@@ -108,6 +111,11 @@ public class UiModuleImpl implements UiModule {
public String getSlug() {
return slug;
}
+
+ @Override
+ public String getDescription() {
+ return description;
+ }
@Override
public Set<String> getTypes() {
@@ -153,10 +161,15 @@ public class UiModuleImpl implements UiModule {
public void setOrder(final int order){
this.order = order;
}
+
public void setSlug(final String slug) {
this.slug = slug;
}
+ public void setDescription(final String description) {
+ this.description = description;
+ }
+
public void setTypes(final Set<String> types) {
this.types = types;
}
@@ -197,6 +210,11 @@ public class UiModuleImpl implements UiModule {
return this;
}
+ public UiModuleImpl description(final String description) {
+ this.description = description;
+ return this;
+ }
+
public UiModuleImpl types(final Set<String> types) {
this.types = types;
return this;
diff --git a/ui-modules/home/app/views/main/main.controller.js b/ui-modules/home/app/views/main/main.controller.js
index 86586542..8f11db9f 100644
--- a/ui-modules/home/app/views/main/main.controller.js
+++ b/ui-modules/home/app/views/main/main.controller.js
@@ -22,10 +22,11 @@ import brooklynApi from 'brooklyn-ui-utils/brooklyn.api/brooklyn.api';
import uiRouter from 'angular-ui-router';
import {HIDE_INTERSTITIAL_SPINNER_EVENT} from 'brooklyn-ui-utils/interstitial-spinner/interstitial-spinner';
import template from './main.template.html';
+import angularSanitize from 'angular-sanitize';
const MODULE_NAME = 'states.main';
-angular.module(MODULE_NAME, [brooklynUiModulesApi, uiRouter, brooklynApi])
+angular.module(MODULE_NAME, [brooklynUiModulesApi, uiRouter, brooklynApi, angularSanitize])
.config(['$stateProvider', mainStateConfig]);
export default MODULE_NAME;
@@ -84,4 +85,13 @@ export function mainStateController($scope, $state, uiModules, catalogApps, brUt
page: 1,
itemsPerPage: 6
};
+
+ this.onModuleHoverEnter = (x) => {
+ console.log(x);
+ $scope.hoveredModule = x;
+ };
+ this.onModuleHoverLeave = (x) => {
+ $scope.hoveredModule = null;
+ };
+
}
diff --git a/ui-modules/home/app/views/main/main.less b/ui-modules/home/app/views/main/main.less
index c00012b3..7da527bf 100644
--- a/ui-modules/home/app/views/main/main.less
+++ b/ui-modules/home/app/views/main/main.less
@@ -19,6 +19,7 @@
@brooklyn-home-button-color: @brand-primary;
@brooklyn-home-button-color-hover: @primary-700;
+@brooklyn-home-detail-color: @primary-800;
.module-icon {
font-size: 30px;
@@ -244,3 +245,40 @@
}
}
}
+
+.brooklyn-module-detail {
+ display: flex;
+ color: @brooklyn-home-detail-color;
+ flex-direction: column;
+ align-items: center;
+ margin-top: 40px;
+ margin-bottom: 8px;
+ min-height: 160px;
+ > .main {
+ //background: white;
+ padding: 8px;
+ width: 66%;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ > .left {
+ flex: 0 0 auto;
+ width: 180px;
+ text-align: center;
+ align-self: flex-start;
+ }
+ > .right {
+ flex: 1 1 auto;
+ text-align: left;
+ .title {
+ //font-weight: 700;
+ display: none;
+ font-size: 200%;
+ margin-bottom: 8px;
+ }
+ .body {
+ font-size: 140%;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/ui-modules/home/app/views/main/main.template.html b/ui-modules/home/app/views/main/main.template.html
index 1491ca20..c413ae67 100644
--- a/ui-modules/home/app/views/main/main.template.html
+++ b/ui-modules/home/app/views/main/main.template.html
@@ -16,7 +16,7 @@
specific language governing permissions and limitations
under the License.
-->
-<div class="container">
+<div class="container" xmlns="http://www.w3.org/1999/html">
<br-card class="quick-launch-group">
<br-card-content>
<br-card-content-headline>
@@ -61,7 +61,7 @@
<div class="row brooklyn-modules">
- <div class="col-md-4" ng-repeat="uiModule in vm.uiModules">
+ <div class="col-md-4" ng-repeat="uiModule in vm.uiModules" ng-mouseenter="vm.onModuleHoverEnter(uiModule)" ng-mouseleave="vm.onModuleHoverLeave(uiModule)">
<a ng-href="{{uiModule.path}}/">
<br-card center="true">
<br-card-content>
@@ -76,6 +76,21 @@
</a>
</div>
</div>
+
+ <div class="row brooklyn-module-detail">
+ <div class="main" ng-if="hoveredModule && hoveredModule.description">
+ <div class="left">
+ <i class="module-icon fa" ng-class="hoveredModule.icon"></i>
+ </div>
+ <div class="right">
+ <div class="title">{{hoveredModule.name}}</div>
+ <div class="body">
+ <span ng-bind-html="hoveredModule.description"></span>
+ </div>
+ </div>
+ </div>
+ </div>
+
</div>
<ui-view />