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/03/07 14:34:23 UTC
[incubator-streampipes] branch dev updated: STREAMPIPES-58: Add
traffic light widget
This is an automated email from the ASF dual-hosted git repository.
riemer pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/incubator-streampipes.git
The following commit(s) were added to refs/heads/dev by this push:
new 3fff83f STREAMPIPES-58: Add traffic light widget
3fff83f is described below
commit 3fff83fc5d025267bc05314301d45cfe460232ea
Author: Dominik Riemer <ri...@fzi.de>
AuthorDate: Sat Mar 7 15:34:04 2020 +0100
STREAMPIPES-58: Add traffic light widget
---
ui/package.json | 1 +
.../widget/dashboard-widget.component.css | 14 +++
.../widget/dashboard-widget.component.html | 14 ++-
.../widget/dashboard-widget.component.ts | 6 +
.../widgets/html/html-widget.component.html | 2 +-
.../widgets/raw/raw-widget.component.html | 2 +-
.../widgets/trafficlight/traffic-light-config.ts | 48 ++++++++
.../traffic-light-widget.component.css | 56 ++++++++++
.../traffic-light-widget.component.html} | 10 +-
.../trafficlight/traffic-light-widget.component.ts | 124 +++++++++++++++++++++
ui/src/app/dashboard-v2/dashboard.module.ts | 4 +-
.../app/dashboard-v2/registry/widget-registry.ts | 4 +-
ui/src/assets/fonts/MaterialIcons-Regular.css | 54 ---------
ui/src/assets/fonts/MaterialIcons-Regular.eot | Bin 143258 -> 0 bytes
ui/src/assets/fonts/MaterialIcons-Regular.ttf | Bin 128180 -> 0 bytes
ui/src/assets/fonts/MaterialIcons-Regular.woff | Bin 57620 -> 0 bytes
ui/src/assets/fonts/MaterialIcons-Regular.woff2 | Bin 44300 -> 0 bytes
ui/src/scss/main.scss | 2 +-
18 files changed, 279 insertions(+), 62 deletions(-)
diff --git a/ui/package.json b/ui/package.json
index 37a251a..26ca537 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -82,6 +82,7 @@
"konva": "^3.2.4",
"leaflet": "^1.6.0",
"lodash": "3.10.1",
+ "material-design-icons": "^3.0.1",
"ng-dynamic-component": "4.0.3",
"ng-file-upload": "9.0.13",
"@danielmoncada/angular-datetime-picker": "^9.2.0",
diff --git a/ui/src/app/dashboard-v2/components/widget/dashboard-widget.component.css b/ui/src/app/dashboard-v2/components/widget/dashboard-widget.component.css
index dea206d..4e5f73c 100644
--- a/ui/src/app/dashboard-v2/components/widget/dashboard-widget.component.css
+++ b/ui/src/app/dashboard-v2/components/widget/dashboard-widget.component.css
@@ -51,3 +51,17 @@
flex: 0 1 auto;
}
+.pipeline-not-running {
+ background: #ef9a9a;
+ padding: 20px;
+ display:flex;
+ align-items: center;
+ justify-content: center;
+ width:100%;
+}
+
+.disconnect-icon {
+ font-size:36pt;
+ color:#f44336;
+}
+
diff --git a/ui/src/app/dashboard-v2/components/widget/dashboard-widget.component.html b/ui/src/app/dashboard-v2/components/widget/dashboard-widget.component.html
index 48ef820..be13fd8 100644
--- a/ui/src/app/dashboard-v2/components/widget/dashboard-widget.component.html
+++ b/ui/src/app/dashboard-v2/components/widget/dashboard-widget.component.html
@@ -30,7 +30,13 @@
</div>
<div class="h-100 p-0 row content">
<!-- <div *ngIf="widget."></div>-->
- <div *ngIf="widgetLoaded" class="h-100">
+ <div *ngIf="widgetLoaded && pipelineNotRunning" class="h-100 pipeline-not-running" fxFlex="100"
+ fxLayout="column"
+ fxLayoutAlign="center center">
+ <i class="material-icons disconnect-icon">block</i>
+ <h5 style="text-align:center;">corresponding pipeline is not running</h5>
+ </div>
+ <div *ngIf="widgetLoaded && !pipelineNotRunning" class="h-100">
<div *ngIf="widget.widgetType === 'number'" class="h-100 p-0">
<number-widget [gridsterItemComponent]="gridsterItemComponent" [gridsterItem]="item"
[widget]="widget" [editMode]="editMode"
@@ -82,6 +88,12 @@
[widgetConfig]="configuredWidget"
[widgetDataConfig]="widgetDataConfig" class="h-100"></html-widget>
</div>
+ <div *ngIf="widget.widgetType === 'trafficlight'" class="h-100 p-0">
+ <traffic-light-widget [gridsterItemComponent]="gridsterItemComponent"
+ [gridsterItem]="item" [widget]="widget" [editMode]="editMode"
+ [widgetConfig]="configuredWidget"
+ [widgetDataConfig]="widgetDataConfig" class="h-100"></traffic-light-widget>
+ </div>
</div>
</div>
</div>
diff --git a/ui/src/app/dashboard-v2/components/widget/dashboard-widget.component.ts b/ui/src/app/dashboard-v2/components/widget/dashboard-widget.component.ts
index 042f4df..ce6c408 100644
--- a/ui/src/app/dashboard-v2/components/widget/dashboard-widget.component.ts
+++ b/ui/src/app/dashboard-v2/components/widget/dashboard-widget.component.ts
@@ -44,6 +44,8 @@ export class DashboardWidgetComponent implements OnInit {
configuredWidget: DashboardWidget;
widgetDataConfig: VisualizablePipeline;
+ pipelineNotRunning: boolean = false;
+
constructor(private dashboardService: DashboardService,
private dialog: MatDialog) {
}
@@ -53,7 +55,11 @@ export class DashboardWidgetComponent implements OnInit {
this.configuredWidget = response;
this.dashboardService.getVisualizablePipelineByTopic(this.configuredWidget.visualizablePipelineTopic).subscribe(pipeline => {
this.widgetDataConfig = pipeline;
+ this.pipelineNotRunning = false;
+ this.widgetLoaded = true;
+ }, err => {
this.widgetLoaded = true;
+ this.pipelineNotRunning = true;
});
});
}
diff --git a/ui/src/app/dashboard-v2/components/widgets/html/html-widget.component.html b/ui/src/app/dashboard-v2/components/widgets/html/html-widget.component.html
index 1a65126..d12511a 100644
--- a/ui/src/app/dashboard-v2/components/widgets/html/html-widget.component.html
+++ b/ui/src/app/dashboard-v2/components/widgets/html/html-widget.component.html
@@ -19,7 +19,7 @@
<div class="title-panel mt-20" *ngIf="hasTitlePanelSettings">
{{selectedTitle}}
</div>
- <div [ngStyle]="{'width': width + 'px', 'height': width + 'px'}">
+ <div [ngStyle]="{'width': width + 'px', 'height': height + 'px'}">
<div [innerHTML]="item"></div>
</div>
</div>
\ No newline at end of file
diff --git a/ui/src/app/dashboard-v2/components/widgets/raw/raw-widget.component.html b/ui/src/app/dashboard-v2/components/widgets/raw/raw-widget.component.html
index 94dd9ab..3335445 100644
--- a/ui/src/app/dashboard-v2/components/widgets/raw/raw-widget.component.html
+++ b/ui/src/app/dashboard-v2/components/widgets/raw/raw-widget.component.html
@@ -19,7 +19,7 @@
<div class="title-panel mt-20" *ngIf="hasTitlePanelSettings">
{{selectedTitle}}
</div>
- <div [ngStyle]="{'width': width + 'px', 'height': width + 'px'}" class="p-10">
+ <div [ngStyle]="{'width': width + 'px', 'height': height + 'px'}" class="p-10">
<div *ngFor="let item of items">
{{item}}
</div>
diff --git a/ui/src/app/dashboard-v2/components/widgets/trafficlight/traffic-light-config.ts b/ui/src/app/dashboard-v2/components/widgets/trafficlight/traffic-light-config.ts
new file mode 100644
index 0000000..842c306
--- /dev/null
+++ b/ui/src/app/dashboard-v2/components/widgets/trafficlight/traffic-light-config.ts
@@ -0,0 +1,48 @@
+/*
+ * 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 {WidgetConfigBuilder} from "../../../registry/widget-config-builder";
+import {SchemaRequirementsBuilder} from "../../../sdk/schema-requirements-builder";
+import {DashboardWidgetSettings} from "../../../../core-model/dashboard/DashboardWidgetSettings";
+import {WidgetConfig} from "../base/base-config";
+import {EpRequirements} from "../../../sdk/ep-requirements";
+
+export class TrafficLightConfig extends WidgetConfig {
+
+ static readonly NUMBER_MAPPING_KEY = "number-field";
+ static readonly CRITICAL_VALUE_KEY = "critical-value-key";
+ static readonly CRITICAL_VALUE_LIMIT = "critical-value-limit";
+ static readonly WARNING_RANGE_KEY = "warning-range";
+
+
+ constructor() {
+ super();
+ }
+
+ getConfig(): DashboardWidgetSettings {
+ return WidgetConfigBuilder.createWithSelectableColorsAndTitlePanel("trafficlight", "trafficlight")
+ .requiredSchema(SchemaRequirementsBuilder
+ .create()
+ .requiredPropertyWithUnaryMapping(TrafficLightConfig.NUMBER_MAPPING_KEY, "Field to observe", "", EpRequirements.numberReq())
+ .build())
+ .requiredIntegerParameter(TrafficLightConfig.CRITICAL_VALUE_KEY, "Threshold", "")
+ .requiredSingleValueSelection(TrafficLightConfig.CRITICAL_VALUE_LIMIT, "Operator", "", ["Upper Limit", "Under Limit"])
+ .requiredIntegerParameter(TrafficLightConfig.WARNING_RANGE_KEY, "Warning range (percent)", "")
+ .build();
+ }
+
+}
\ No newline at end of file
diff --git a/ui/src/app/dashboard-v2/components/widgets/trafficlight/traffic-light-widget.component.css b/ui/src/app/dashboard-v2/components/widgets/trafficlight/traffic-light-widget.component.css
new file mode 100644
index 0000000..741e10d
--- /dev/null
+++ b/ui/src/app/dashboard-v2/components/widgets/trafficlight/traffic-light-widget.component.css
@@ -0,0 +1,56 @@
+/*
+ * 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.
+ */
+
+.h-100 {
+ height: 100%;
+}
+
+.tl-container {
+ background-color: gray;
+ display:flex;
+ align-items: center;
+ justify-content: space-between;
+ flex-direction: column;
+ padding: 10px;
+}
+
+.light {
+ background-color:rgba(0, 0, 0, 0.3);
+ border-radius:50%;
+}
+
+.light-red {
+ background-color: red;
+ box-shadow: 0 0 20px 5px red;
+}
+
+.light-yellow {
+ background-color: yellow;
+ box-shadow: 0 0 20px 5px yellow;
+}
+
+.light-green {
+ background-color: green;
+ box-shadow: 0 0 20px 5px green;
+}
+
+.title-panel {
+ font-size:20px;
+ height:30px;
+ margin-top:10px;
+ margin-bottom: 10px;
+}
\ No newline at end of file
diff --git a/ui/src/app/dashboard-v2/components/widgets/html/html-widget.component.html b/ui/src/app/dashboard-v2/components/widgets/trafficlight/traffic-light-widget.component.html
similarity index 63%
copy from ui/src/app/dashboard-v2/components/widgets/html/html-widget.component.html
copy to ui/src/app/dashboard-v2/components/widgets/trafficlight/traffic-light-widget.component.html
index 1a65126..cc45c57 100644
--- a/ui/src/app/dashboard-v2/components/widgets/html/html-widget.component.html
+++ b/ui/src/app/dashboard-v2/components/widgets/trafficlight/traffic-light-widget.component.html
@@ -19,7 +19,13 @@
<div class="title-panel mt-20" *ngIf="hasTitlePanelSettings">
{{selectedTitle}}
</div>
- <div [ngStyle]="{'width': width + 'px', 'height': width + 'px'}">
- <div [innerHTML]="item"></div>
+ <div class="p-10 h-100">
+ <div class="tl-container" [ngStyle]="{'width': containerWidth + 'px', 'height': containerHeight + 'px'}">
+ <div class="light" [ngClass]="{'light-red': activeClass === 'red'}" [ngStyle]="{'width': lightWidth + 'px', 'height': lightHeight + 'px'}"></div>
+ <div class="light" [ngClass]="{'light-yellow': activeClass === 'yellow'}" [ngStyle]="{'width': lightWidth +
+ 'px', 'height': lightHeight + 'px'}"></div>
+ <div class="light" [ngClass]="{'light-green': activeClass === 'green'}" [ngStyle]="{'width':
+ lightWidth + 'px', 'height': lightHeight + 'px'}"></div>
+ </div>
</div>
</div>
\ No newline at end of file
diff --git a/ui/src/app/dashboard-v2/components/widgets/trafficlight/traffic-light-widget.component.ts b/ui/src/app/dashboard-v2/components/widgets/trafficlight/traffic-light-widget.component.ts
new file mode 100644
index 0000000..17083e7
--- /dev/null
+++ b/ui/src/app/dashboard-v2/components/widgets/trafficlight/traffic-light-widget.component.ts
@@ -0,0 +1,124 @@
+/*
+ * 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 {Component, OnDestroy, OnInit} from "@angular/core";
+import {RxStompService} from "@stomp/ng2-stompjs";
+import {BaseStreamPipesWidget} from "../base/base-widget";
+import {StaticPropertyExtractor} from "../../../sdk/extractor/static-property-extractor";
+import {ResizeService} from "../../../services/resize.service";
+import {TrafficLightConfig} from "./traffic-light-config";
+
+@Component({
+ selector: 'traffic-light-widget',
+ templateUrl: './traffic-light-widget.component.html',
+ styleUrls: ['./traffic-light-widget.component.css']
+})
+export class TrafficLightWidgetComponent extends BaseStreamPipesWidget implements OnInit, OnDestroy {
+
+ items: Array<string>;
+ width: number;
+ height: number;
+
+ containerWidth: number;
+ containerHeight: number;
+
+ lightWidth: number;
+ lightHeight: number;
+
+ selectedWarningRange: number;
+ selectedFieldToObserve: string;
+ selectedLimitGreaterThan: boolean
+ selectedThreshold: number;
+
+ activeClass = 'red';
+
+ constructor(rxStompService: RxStompService, resizeService: ResizeService) {
+ super(rxStompService, resizeService, false);
+ }
+
+ ngOnInit(): void {
+ super.ngOnInit();
+ this.width = this.computeCurrentWidth(this.gridsterItemComponent);
+ this.height = this.computeCurrentHeight(this.gridsterItemComponent);
+ this.updateContainerSize();
+ this.updateLightSize();
+ this.items = [];
+ }
+
+ updateContainerSize() {
+ this.containerHeight = this.height - 60;
+ this.containerWidth = this.containerHeight / 3;
+ }
+
+ updateLightSize() {
+ this.lightWidth = (this.containerHeight - 60) / 3;
+ this.lightHeight = this.lightWidth;
+ }
+
+ ngOnDestroy(): void {
+ super.ngOnDestroy();
+ }
+
+ extractConfig(extractor: StaticPropertyExtractor) {
+ this.selectedThreshold = extractor.integerParameter(TrafficLightConfig.CRITICAL_VALUE_KEY);
+ this.selectedFieldToObserve = extractor.mappingPropertyValue(TrafficLightConfig.NUMBER_MAPPING_KEY);
+ this.selectedWarningRange = extractor.integerParameter(TrafficLightConfig.WARNING_RANGE_KEY);
+ this.selectedLimitGreaterThan = extractor.selectedSingleValue(TrafficLightConfig.CRITICAL_VALUE_LIMIT) === "Upper Limit";
+ }
+
+
+ protected onEvent(event: any) {
+ let item = event[this.selectedFieldToObserve];
+ if (this.isInOkRange(item)) {
+ this.activeClass = "green";
+ } else if (this.isInWarningRange(item)) {
+ this.activeClass = "yellow";
+ } else {
+ this.activeClass = "red";
+ }
+ }
+
+ exceedsThreshold(value) {
+ if (this.selectedLimitGreaterThan) {
+ return value >= this.selectedThreshold;
+ } else {
+ return value <= this.selectedThreshold;
+ }
+ }
+
+ isInWarningRange(value) {
+ if (this.exceedsThreshold(value)) return false;
+ else {
+ if (this.selectedLimitGreaterThan) {
+ return value >= (this.selectedThreshold - this.selectedThreshold*(this.selectedWarningRange/100));
+ } else {
+ return value <= (this.selectedThreshold + this.selectedThreshold*(this.selectedWarningRange/100));
+ }
+ }
+ }
+ isInOkRange(value) {
+ return !this.exceedsThreshold(value) && !this.isInWarningRange(value);
+ }
+
+ protected onSizeChanged(width: number, height: number) {
+ this.width = width;
+ this.height = height;
+ this.updateContainerSize();
+ this.updateLightSize();
+ }
+
+}
\ No newline at end of file
diff --git a/ui/src/app/dashboard-v2/dashboard.module.ts b/ui/src/app/dashboard-v2/dashboard.module.ts
index 47a2e66..bc5c90e 100644
--- a/ui/src/app/dashboard-v2/dashboard.module.ts
+++ b/ui/src/app/dashboard-v2/dashboard.module.ts
@@ -53,6 +53,7 @@ import {MapWidgetComponent} from "./components/widgets/map/map-widget.component"
import {LeafletModule} from "@asymmetrik/ngx-leaflet";
import {RawWidgetComponent} from "./components/widgets/raw/raw-widget.component";
import {HtmlWidgetComponent} from "./components/widgets/html/html-widget.component";
+import {TrafficLightWidgetComponent} from "./components/widgets/trafficlight/traffic-light-widget.component";
const dashboardWidgets = [
@@ -94,7 +95,8 @@ const dashboardWidgets = [
ImageWidgetComponent,
MapWidgetComponent,
RawWidgetComponent,
- HtmlWidgetComponent
+ HtmlWidgetComponent,
+ TrafficLightWidgetComponent
],
providers: [
DashboardService,
diff --git a/ui/src/app/dashboard-v2/registry/widget-registry.ts b/ui/src/app/dashboard-v2/registry/widget-registry.ts
index 5bf593b..54d2e29 100644
--- a/ui/src/app/dashboard-v2/registry/widget-registry.ts
+++ b/ui/src/app/dashboard-v2/registry/widget-registry.ts
@@ -27,6 +27,7 @@ import {AreaConfig} from "../components/widgets/area/area-config";
import {MapConfig} from "../components/widgets/map/map-config";
import {RawConfig} from "../components/widgets/raw/raw-config";
import {HtmlConfig} from "../components/widgets/html/html-config";
+import {TrafficLightConfig} from "../components/widgets/trafficlight/traffic-light-config";
export class WidgetRegistry {
@@ -39,7 +40,8 @@ export class WidgetRegistry {
new AreaConfig(),
new MapConfig(),
new RawConfig(),
- new HtmlConfig()
+ new HtmlConfig(),
+ new TrafficLightConfig()
];
static getAvailableWidgetTemplates(): Array<DashboardWidgetSettings> {
diff --git a/ui/src/assets/fonts/MaterialIcons-Regular.css b/ui/src/assets/fonts/MaterialIcons-Regular.css
deleted file mode 100644
index 6d4fffc..0000000
--- a/ui/src/assets/fonts/MaterialIcons-Regular.css
+++ /dev/null
@@ -1,54 +0,0 @@
-/*
- * 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.
- *
- */
-
-@font-face {
- font-family: 'Material Icons';
- font-style: normal;
- font-weight: 400;
- src: url(MaterialIcons-Regular.eot); /* For IE6-8 */
- src: local('Material Icons'),
- local('MaterialIcons-Regular'),
- url(MaterialIcons-Regular.woff2) format('woff2'),
- url(MaterialIcons-Regular.woff) format('woff'),
- url(MaterialIcons-Regular.ttf) format('truetype');
-}
-
-.material-icons {
- font-family: 'Material Icons';
- font-weight: normal;
- font-style: normal;
- font-size: 24px;
- display: inline-block;
- line-height: 1;
- text-transform: none;
- letter-spacing: normal;
- word-wrap: normal;
- white-space: nowrap;
- direction: ltr;
-
- /* Support for all WebKit browsers. */
- -webkit-font-smoothing: antialiased;
- /* Support for Safari and Chrome. */
- text-rendering: optimizeLegibility;
-
- /* Support for Firefox. */
- -moz-osx-font-smoothing: grayscale;
-
- /* Support for IE. */
- font-feature-settings: 'liga';
-}
\ No newline at end of file
diff --git a/ui/src/assets/fonts/MaterialIcons-Regular.eot b/ui/src/assets/fonts/MaterialIcons-Regular.eot
deleted file mode 100644
index 70508eb..0000000
Binary files a/ui/src/assets/fonts/MaterialIcons-Regular.eot and /dev/null differ
diff --git a/ui/src/assets/fonts/MaterialIcons-Regular.ttf b/ui/src/assets/fonts/MaterialIcons-Regular.ttf
deleted file mode 100644
index 7015564..0000000
Binary files a/ui/src/assets/fonts/MaterialIcons-Regular.ttf and /dev/null differ
diff --git a/ui/src/assets/fonts/MaterialIcons-Regular.woff b/ui/src/assets/fonts/MaterialIcons-Regular.woff
deleted file mode 100644
index b648a3e..0000000
Binary files a/ui/src/assets/fonts/MaterialIcons-Regular.woff and /dev/null differ
diff --git a/ui/src/assets/fonts/MaterialIcons-Regular.woff2 b/ui/src/assets/fonts/MaterialIcons-Regular.woff2
deleted file mode 100644
index 9fa2112..0000000
Binary files a/ui/src/assets/fonts/MaterialIcons-Regular.woff2 and /dev/null differ
diff --git a/ui/src/scss/main.scss b/ui/src/scss/main.scss
index 34a9567..2e08972 100644
--- a/ui/src/scss/main.scss
+++ b/ui/src/scss/main.scss
@@ -36,8 +36,8 @@
@import '~angular-loading-bar/build/loading-bar.min.css';
@import '~shepherd.js/dist/css/shepherd-theme-default.css';
@import '~leaflet/dist/leaflet.css';
+@import '~material-design-icons/iconfont/material-icons.css';
-@import '../assets/fonts/MaterialIcons-Regular.css';
@import '../assets/fonts/Roboto-Regular.css';
@import './sp/shepherd-new';