You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@streampipes.apache.org by ri...@apache.org on 2020/08/19 09:13:32 UTC
[incubator-streampipes] branch STREAMPIPES-193 updated:
[STREAMPIPES-193] Improve home screen and remove old screenshots
This is an automated email from the ASF dual-hosted git repository.
riemer pushed a commit to branch STREAMPIPES-193
in repository https://gitbox.apache.org/repos/asf/incubator-streampipes.git
The following commit(s) were added to refs/heads/STREAMPIPES-193 by this push:
new 045eb2e [STREAMPIPES-193] Improve home screen and remove old screenshots
045eb2e is described below
commit 045eb2e4cedbf4465f63893ce6929d285618bb55
Author: Dominik Riemer <ri...@fzi.de>
AuthorDate: Wed Aug 19 11:13:13 2020 +0200
[STREAMPIPES-193] Improve home screen and remove old screenshots
---
ui/deployment/home.service.mst | 6 +-
ui/deployment/modules.yml | 20 +--
.../core/components/base-navigation.component.ts | 4 +-
ui/src/app/home/components/status.component.css | 15 ++-
ui/src/app/home/components/status.component.html | 14 ++-
ui/src/app/home/components/status.component.ts | 10 +-
ui/src/app/home/home.component.html | 48 +++++---
.../{home.component.css => home.component.scss} | 137 +++++++++++++++------
ui/src/app/home/home.component.ts | 2 +-
ui/src/app/home/home.module.ts | 8 +-
10 files changed, 188 insertions(+), 76 deletions(-)
diff --git a/ui/deployment/home.service.mst b/ui/deployment/home.service.mst
index d7bf05e..eab84e7 100644
--- a/ui/deployment/home.service.mst
+++ b/ui/deployment/home.service.mst
@@ -31,6 +31,7 @@ export class HomeService {
name: "{{title}}",
description: "{{description}}",
imageUrl: "{{{homeImage}}}",
+ icon: "{{{icon}}}",
link: {
newWindow: false,
value: "{{{link}}}"
@@ -39,11 +40,12 @@ export class HomeService {
{{/modulesActive}}
{
name: "Notifications",
- description: "Integrated notification manager",
+ description: "The notification module lets you view all notifications generated by pipelines.",
imageUrl: "assets/img/home/notifications.png",
+ icon: "chat",
link: {
newWindow: false,
- value: "streampipes.notifications"
+ value: "notifications"
}
}
];
diff --git a/ui/deployment/modules.yml b/ui/deployment/modules.yml
index cc3d5e3..0672b55 100644
--- a/ui/deployment/modules.yml
+++ b/ui/deployment/modules.yml
@@ -23,8 +23,8 @@ spEditor:
path: './editor/editor.module'
link: 'editor'
url: '/editor/:pipeline'
- title: 'Editor'
- description: 'editor'
+ title: 'Pipeline Editor'
+ description: 'The pipeline editor lets you create flexible data pipelines based on installed data streams, data sets, data processors and data sinks.'
icon: 'dashboard'
homeImage: '/assets/img/home/editor.png'
admin: false
@@ -37,8 +37,8 @@ spConnect:
path: './connect/connect.module'
link: 'connect'
url: '/connect'
- title: 'StreamPipes Connect'
- description: 'Missing Description'
+ title: 'Connect'
+ description: 'StremPipes Connect lets you easily connect new data sources for a variety of data formats and protocols.'
icon: 'power'
homeImage: '/assets/img/home/editor.png'
admin: False
@@ -52,7 +52,7 @@ spPipelines:
link: 'pipelines'
url: '/pipelines/:pipeline'
title: 'Pipelines'
- description: 'Pipelines'
+ description: 'All created pipelines are available in the pipeline view, where you can also start and stop pipelines.'
icon: 'play_arrow'
homeImage: '/assets/img/home/pipelines.png'
admin: False
@@ -79,7 +79,7 @@ spAdd:
link: 'add'
url: '/add'
title: 'Install Pipeline Elements'
- description: 'The marketplace can be used to extend StreamPipes with new algorithms and data sinks'
+ description: 'The pipeline element installation module can be used to extend StreamPipes with new algorithms and data sinks'
icon: 'cloud_download'
homeImage: '/assets/img/home/add.png'
admin: True
@@ -94,7 +94,7 @@ spConfiguration:
link: 'configuration'
url: '/configuration'
title: 'Configuration'
- description: 'Configuration'
+ description: 'In the configuration module, basic StreamPipes settings and services can be configured.'
icon: 'settings'
homeImage: '/assets/img/home/configuration.png'
admin: True
@@ -109,7 +109,7 @@ spAppOverview:
link: 'app-overview'
url: '/apps'
title: 'Apps'
- description: 'App Overview'
+ description: 'The app overview allows you to view and open additional StreamPipes plugins.'
icon: 'apps'
homeImage: '/assets/img/home/configuration.png'
admin: false
@@ -124,7 +124,7 @@ spDashboard:
link: 'dashboard'
url: '/dashboard'
title: 'Dashboard'
- description: 'The live dashboard visualizes data in real-time'
+ description: 'The live dashboard visualizes data in real-time.'
icon: 'insert_chart'
homeImage: '/assets/img/home/configuration.png'
admin: false
@@ -139,7 +139,7 @@ spDataExplorer:
link: 'dataexplorer'
url: '/dataexplorer'
title: 'Data Explorer'
- description: 'data-explorer'
+ description: 'The data explorer lets you visually inspect historical data from your connected sources.'
icon: 'search'
homeImage: '/assets/img/home/configuration.png'
admin: false
\ No newline at end of file
diff --git a/ui/src/app/core/components/base-navigation.component.ts b/ui/src/app/core/components/base-navigation.component.ts
index fd2209d..de09dd7 100644
--- a/ui/src/app/core/components/base-navigation.component.ts
+++ b/ui/src/app/core/components/base-navigation.component.ts
@@ -34,7 +34,7 @@ export abstract class BaseNavigationComponent {
},
{
link: 'editor',
- title: 'Editor',
+ title: 'Pipeline Editor',
icon: 'dashboard'
},
{
@@ -44,7 +44,7 @@ export abstract class BaseNavigationComponent {
},
{
link: 'connect',
- title: 'StreamPipes Connect',
+ title: 'Connect',
icon: 'power'
},
{
diff --git a/ui/src/app/home/components/status.component.css b/ui/src/app/home/components/status.component.css
index b076c66..e8d6824 100644
--- a/ui/src/app/home/components/status.component.css
+++ b/ui/src/app/home/components/status.component.css
@@ -21,8 +21,8 @@
height:150px;
width:80%;
color:white;
- margin:1%;
border-radius: 5px;
+ margin-bottom: 20px;
}
.status-container.pipelines {
@@ -33,6 +33,10 @@
background: rgb(59, 92, 149);
}
+.status-container.notifications {
+ background: rgb(88, 114, 146);
+}
+
.status-container.pipeline-elements-installed {
background: rgb(156, 156, 156);
}
@@ -41,6 +45,15 @@
font-size:46pt;
}
+.status-container:hover {
+ cursor: pointer;
+ opacity: 0.8;
+}
+
.status-container-text {
font-size:16pt;
+}
+
+.mr-20 {
+ margin-right: 20px;
}
\ No newline at end of file
diff --git a/ui/src/app/home/components/status.component.html b/ui/src/app/home/components/status.component.html
index bb9b1cd..1eef874 100644
--- a/ui/src/app/home/components/status.component.html
+++ b/ui/src/app/home/components/status.component.html
@@ -16,20 +16,26 @@
~
-->
-<div fxFlex="100">
- <div fxFlex="33" class="status-container pipelines">
+<div fxFlex="100" fxLayout="row">
+ <div fxFlex="25" class="status-container pipelines mr-20" (click)="navigate('pipelines')">
<div fxFill="100" fxLayout="column" fxLayoutAlign="center center">
<div class="status-container-number" fxLayoutAlign="start center">{{pipelines}}</div>
<div class="status-container-text">pipelines created</div>
</div>
</div>
- <div fxFlex="33" class="status-container pipelines-running">
+ <div fxFlex="25" class="status-container pipelines-running mr-20" (click)="navigate('pipelines')">
<div fxFill="100" fxLayout="column" fxLayoutAlign="center center">
<div class="status-container-number" fxLayoutAlign="start center">{{runningPipelines}}</div>
<div class="status-container-text">pipelines running</div>
</div>
</div>
- <div fxFlex="33" class="status-container pipeline-elements-installed">
+ <div fxFlex="25" class="status-container notifications mr-20" (click)="navigate('notifications')">
+ <div fxFill="100" fxLayout="column" fxLayoutAlign="center center">
+ <div class="status-container-number" fxLayoutAlign="start center">{{NotificationCountService.unreadNotificationCount}}</div>
+ <div class="status-container-text">unread notifications</div>
+ </div>
+ </div>
+ <div fxFlex="25" class="status-container pipeline-elements-installed" (click)="navigate('add')">
<div fxFill="100" fxLayout="column" fxLayoutAlign="center center">
<div class="status-container-number" fxLayoutAlign="start center">{{installedPipelineElements}}</div>
<div class="status-container-text">installed pipeline elements</div>
diff --git a/ui/src/app/home/components/status.component.ts b/ui/src/app/home/components/status.component.ts
index e4cc8f7..48261a0 100644
--- a/ui/src/app/home/components/status.component.ts
+++ b/ui/src/app/home/components/status.component.ts
@@ -18,6 +18,8 @@
import {Component} from "@angular/core";
import {RestApi} from "../../services/rest-api.service";
+import {Router} from "@angular/router";
+import {NotificationCountService} from "../../services/notification-count-service";
@Component({
selector: 'status',
@@ -30,7 +32,9 @@ export class StatusComponent {
runningPipelines: number = 0;
installedPipelineElements: number = 0;
- constructor(private RestApi: RestApi) {
+ constructor(private RestApi: RestApi,
+ private Router: Router,
+ public NotificationCountService: NotificationCountService) {
}
@@ -74,4 +78,8 @@ export class StatusComponent {
addPipelineElementList(msg) {
this.installedPipelineElements += msg.length;
}
+
+ navigate(url: string) {
+ this.Router.navigate([url]);
+ }
}
\ No newline at end of file
diff --git a/ui/src/app/home/home.component.html b/ui/src/app/home/home.component.html
index 9811109..9397764 100644
--- a/ui/src/app/home/home.component.html
+++ b/ui/src/app/home/home.component.html
@@ -19,23 +19,39 @@
<div fxLayout="column" class="page-container page-container-padding">
<div fxFlex fxLayout="row" fxLayoutAlign="start start">
<div fxFlex="100">
- <div class="md-padding">
- <h1>Welcome to Apache StreamPipes!</h1>
- <hr>
- <status></status>
- <div class="home-margin">
- <div class="assemblyOptions sp-blue-bg" style="padding:5px;">
- <h4>StreamPipes Modules</h4>
+ <div fxFlex="100" fxLayout="column">
+ <div class="p-10 header-margin" fxLayoutAlign="center center">
+ <div class="welcome-text">Welcome to Apache
+ <span class="welcome-green">S</span>
+ <span class="welcome-blue">tream</span>
+ <span class="welcome-green">P</span>
+ <span class="welcome-blue">ipes</span>!
</div>
- <div class="sp-blue-border home-padding">
- <mat-grid-list cols="3" gutterSize="1em" rowHeight="30:9">
- <mat-grid-tile attr.id="{{link.name.replace(' ', '-')}}-link" (click)="openLink(link)"
- *ngFor="let link of serviceLinks"
- class="home-image-wrapper">
- <div class="home-image" [style.background-image]="getBackground(link.imageUrl)"></div>
- <h4 class="home-image-caption sp-accent-bg">{{link.name}}</h4>
- </mat-grid-tile>
- </mat-grid-list>
+ </div>
+ <div fxLayout="column" fxFlex="100" class="home-margin">
+ <div fxFlex="100" fxLayoutAlign="start center">
+ <status fxFlex="100"></status>
+ </div>
+ <div fxFlex="100">
+ <div class="assemblyOptions sp-blue-bg mt-0 round-border" style="padding:5px;">
+ <h4>StreamPipes Modules</h4>
+ </div>
+ <div class="sp-blue-border pt-0" fxLayout="column">
+ <div fxFlex="100" fxLayout="column">
+ <mat-list class="modules-list">
+ <mat-list-item *ngFor="let link of serviceLinks"
+ (click)="openLink(link)" class="list-item">
+ <div mat-list-avatar
+ class="pipeline-avatar sp-accent-bg">
+ <mat-icon>{{link.icon}}</mat-icon>
+ </div>
+ <div mat-line style="font-weight:bold;font-size:14pt;">{{link.name}}</div>
+ <p mat-line class="module-description">{{link.description}}</p>
+ <mat-divider></mat-divider>
+ </mat-list-item>
+ </mat-list>
+ </div>
+ </div>
</div>
</div>
</div>
diff --git a/ui/src/app/home/home.component.css b/ui/src/app/home/home.component.scss
similarity index 56%
rename from ui/src/app/home/home.component.css
rename to ui/src/app/home/home.component.scss
index 7eaa832..f890fff 100644
--- a/ui/src/app/home/home.component.css
+++ b/ui/src/app/home/home.component.scss
@@ -1,38 +1,99 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You 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.
- *
- */
-
-.pageheadbar {
- padding: 0 0 0 10px;
- background-color: #f6f6f6;
- font-size: 14px;
- line-height: 24px;
- border-bottom: 1px solid #ccc;
-}
-
-.home-margin {
- margin: 1%;
-}
-
-.home-padding {
- padding: 15px;
-}
-
-.home-image-small {
- height:150px;
- width:100%;
-}
\ No newline at end of file
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You 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 '../../scss/variables';
+
+.pageheadbar {
+ padding: 0 0 0 10px;
+ background-color: #f6f6f6;
+ font-size: 14px;
+ line-height: 24px;
+ border-bottom: 1px solid #ccc;
+}
+
+.mt-0 {
+ margin-top: 0;
+}
+
+.round-border {
+ border-top-left-radius: 5px;
+ border-top-right-radius: 5px;
+}
+
+.welcome-text {
+ font-size: 30pt;
+ font-weight: bold;
+}
+
+.header-margin {
+ margin-top: 20px;
+}
+
+.welcome-green {
+ color: $sp-color-primary;
+}
+
+.welcome-blue {
+ color: $sp-color-accent;
+}
+
+
+.home-margin {
+ margin: 10px;
+}
+
+.home-padding {
+ padding: 15px;
+}
+
+.p-10 {
+ padding: 10px;
+}
+
+.home-image-small {
+ height:150px;
+ width:100%;
+}
+
+.pipeline-avatar {
+ align-items: center;
+ justify-content: center;
+ display: flex;
+ color:white;
+}
+
+.pt-0 {
+ padding-top: 0;
+}
+
+::ng-deep .modules-list.mat-list-base {
+ padding-top: 0;
+}
+
+.list-item:nth-child(even) {
+ background-color: #FAFAFA;
+}
+.list-item:nth-child(odd) {
+ background-color:#ffffff;
+}
+
+.list-item:hover {
+ background-color: #e2e2e2;
+ cursor: pointer;
+}
+
diff --git a/ui/src/app/home/home.component.ts b/ui/src/app/home/home.component.ts
index e832263..c638c80 100644
--- a/ui/src/app/home/home.component.ts
+++ b/ui/src/app/home/home.component.ts
@@ -23,7 +23,7 @@ import {Router} from "@angular/router";
@Component({
templateUrl: './home.component.html',
- styleUrls: ['./home.component.css']
+ styleUrls: ['./home.component.scss']
})
export class HomeComponent {
diff --git a/ui/src/app/home/home.module.ts b/ui/src/app/home/home.module.ts
index 4e3e47d..4d1c686 100644
--- a/ui/src/app/home/home.module.ts
+++ b/ui/src/app/home/home.module.ts
@@ -25,13 +25,19 @@ import {FlexLayoutModule} from '@angular/flex-layout';
import {CommonModule} from '@angular/common';
import {StatusComponent} from "./components/status.component";
import {RestApi} from "../services/rest-api.service";
+import {MatDividerModule} from "@angular/material/divider";
+import {MatButtonModule} from "@angular/material/button";
+import {MatListModule} from "@angular/material/list";
@NgModule({
imports: [
CommonModule,
FlexLayoutModule,
+ MatButtonModule,
MatGridListModule,
- MatIconModule
+ MatIconModule,
+ MatDividerModule,
+ MatListModule
],
declarations: [
HomeComponent,