You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@metron.apache.org by sa...@apache.org on 2019/03/05 15:20:26 UTC
[metron] branch master updated: METRON-1987 Upgrade Alert UI to
stable Bootstrap 4 (sardell) closes apache/metron#1336
This is an automated email from the ASF dual-hosted git repository.
sardell pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/metron.git
The following commit(s) were added to refs/heads/master by this push:
new 42ce88e METRON-1987 Upgrade Alert UI to stable Bootstrap 4 (sardell) closes apache/metron#1336
42ce88e is described below
commit 42ce88e05c60e3e2a7005e9804b2e74332951d0a
Author: sardell <sh...@gmail.com>
AuthorDate: Tue Mar 5 16:17:06 2019 +0100
METRON-1987 Upgrade Alert UI to stable Bootstrap 4 (sardell) closes apache/metron#1336
---
metron-interface/metron-alerts/angular.json | 4 +-
metron-interface/metron-alerts/package-lock.json | 27 +++-----
metron-interface/metron-alerts/package.json | 4 +-
metron-interface/metron-alerts/src/_variables.scss | 6 +-
.../alerts/alerts-list/alerts-list.component.html | 24 +++----
.../table-view/table-view.component.html | 8 +--
.../alerts-list/tree-view/tree-view.component.html | 2 +-
.../configure-rows/configure-rows.component.html | 2 +-
.../metron-alerts/src/app/app.component.html | 2 +-
.../metron-alerts/src/app/app.component.ts | 13 ----
.../app/pcap/pcap-panel/pcap-panel.component.scss | 4 ++
.../app/shared/collapse/collapse.component.html | 2 +-
.../shared/date-picker/date-picker.component.html | 4 +-
.../shared/time-range/time-range.component.html | 8 +--
.../metron-alerts/src/confirm-popover.scss | 20 +++++-
metron-interface/metron-alerts/src/styles.scss | 4 ++
metron-interface/metron-alerts/src/vendor.scss | 74 +++++++++++-----------
17 files changed, 111 insertions(+), 97 deletions(-)
diff --git a/metron-interface/metron-alerts/angular.json b/metron-interface/metron-alerts/angular.json
index 0cad417..853ac68 100644
--- a/metron-interface/metron-alerts/angular.json
+++ b/metron-interface/metron-alerts/angular.json
@@ -28,7 +28,7 @@
],
"scripts": [
"node_modules/jquery/dist/jquery.js",
- "node_modules/tether/dist/js/tether.js",
+ "node_modules/popper.js/dist/umd/popper.js",
"node_modules/ace-builds/src-noconflict/ace.js"
]
},
@@ -89,7 +89,7 @@
"tsConfig": "src/tsconfig.spec.json",
"scripts": [
"node_modules/jquery/dist/jquery.js",
- "node_modules/tether/dist/js/tether.js",
+ "node_modules/popper.js/dist/umd/popper.js",
"node_modules/ace-builds/src-noconflict/ace.js"
],
"styles": [
diff --git a/metron-interface/metron-alerts/package-lock.json b/metron-interface/metron-alerts/package-lock.json
index f23f879..8ce6443 100644
--- a/metron-interface/metron-alerts/package-lock.json
+++ b/metron-interface/metron-alerts/package-lock.json
@@ -6622,13 +6622,9 @@
"dev": true
},
"bootstrap": {
- "version": "4.0.0-alpha.6",
- "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.0.0-alpha.6.tgz",
- "integrity": "sha1-T1TdM6wN6sOyhAe8LffsYIhpycg=",
- "requires": {
- "jquery": ">=1.9.1",
- "tether": "^1.4.0"
- }
+ "version": "4.2.1",
+ "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.2.1.tgz",
+ "integrity": "sha512-tt/7vIv3Gm2mnd/WeDx36nfGGHleil0Wg8IeB7eMrVkY0fZ5iTaBisSh8oNANc2IBsCc6vCgCNTIM/IEN0+50Q=="
},
"brace-expansion": {
"version": "1.1.7",
@@ -11910,9 +11906,9 @@
}
},
"jquery": {
- "version": "3.2.1",
- "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.2.1.tgz",
- "integrity": "sha1-XE2d5lKvbNCncBVKYxu6ErAVx4c="
+ "version": "3.3.1",
+ "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.3.1.tgz",
+ "integrity": "sha512-Ubldcmxp5np52/ENotGxlLe6aGMvmF4R8S6tZjsP6Knsaxd/xp3Zrh50cG93lR6nPXyUFwzN3ZSOQI0wRJNdGg=="
},
"js-base64": {
"version": "2.1.9",
@@ -15220,9 +15216,9 @@
}
},
"popper.js": {
- "version": "1.14.4",
- "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.14.4.tgz",
- "integrity": "sha1-juwdj/AqWjoVLdQ0FKFce3n9abY="
+ "version": "1.14.7",
+ "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.14.7.tgz",
+ "integrity": "sha512-4q1hNvoUre/8srWsH7hnoSJ5xVmIL4qgz+s4qf2TnJIMyZFUFMGH+9vE7mXynAlHSZ/NdTmmow86muD0myUkVQ=="
},
"portfinder": {
"version": "1.0.17",
@@ -17641,11 +17637,6 @@
"inherits": "2"
}
},
- "tether": {
- "version": "1.4.0",
- "resolved": "https://registry.npmjs.org/tether/-/tether-1.4.0.tgz",
- "integrity": "sha1-D5+hcfdb9YSF2BSelHmdeudNHBo="
- },
"throttleit": {
"version": "0.0.2",
"resolved": "https://registry.npmjs.org/throttleit/-/throttleit-0.0.2.tgz",
diff --git a/metron-interface/metron-alerts/package.json b/metron-interface/metron-alerts/package.json
index f17ac11..4b21386 100644
--- a/metron-interface/metron-alerts/package.json
+++ b/metron-interface/metron-alerts/package.json
@@ -31,12 +31,14 @@
"ace-builds": "^1.2.6",
"ajv": "^6.5.1",
"angular-confirmation-popover": "^4.2.0",
- "bootstrap": "4.0.0-alpha.6",
+ "bootstrap": "^4.2.1",
"core-js": "^2.4.1",
"font-awesome": "^4.7.0",
+ "jquery": "^3.3.1",
"moment": "^2.22.2",
"ng2-dragula": "^1.5.0",
"pikaday-time": "^1.6.1",
+ "popper.js": "^1.14.7",
"puppeteer": "^1.7.0",
"rxjs": "^6.3.0",
"ts-node": "^7.0.0",
diff --git a/metron-interface/metron-alerts/src/_variables.scss b/metron-interface/metron-alerts/src/_variables.scss
index d7e9359..fe83cd7 100644
--- a/metron-interface/metron-alerts/src/_variables.scss
+++ b/metron-interface/metron-alerts/src/_variables.scss
@@ -144,4 +144,8 @@ $pd-week-color: #999;
.list-group-item {
font-size: 14px;
-}
\ No newline at end of file
+}
+
+$theme-colors: (
+ "primary": #006ea0
+);
diff --git a/metron-interface/metron-alerts/src/app/alerts/alerts-list/alerts-list.component.html b/metron-interface/metron-alerts/src/app/alerts/alerts-list/alerts-list.component.html
index 2a1802c..0b6f36d 100644
--- a/metron-interface/metron-alerts/src/app/alerts/alerts-list/alerts-list.component.html
+++ b/metron-interface/metron-alerts/src/app/alerts/alerts-list/alerts-list.component.html
@@ -14,28 +14,28 @@
<div class="container-fluid px-0">
<div class="mrow">
<div class="col-md-12 px-0">
- <div class="col-padding-50">
- <div class="input-group search">
- <span class="input-group-btn">
+ <div >
+ <div class="input-group flex-nowrap search">
+ <span class="input-group-prepend">
<button class="btn btn-secondary btn-saved-searches" type="button" (click)="showSavedSearches()">Searches</button>
</span>
<div appAceEditor style="width:100%;" placeholder="Search Alerts" [text]="queryBuilder.displayQuery" (textChanged)="onSearch($event)"> </div>
- <span class="input-group-btn">
+ <span class="input-group-append">
<button class="btn btn-secondary btn-search-clear" type="button" (click)="onClear()"></button>
</span>
- <span class="input-group-btn">
- <app-time-range (timeRangeChange)="onTimeRangeChange($event)" [disabled]="timeStampfilterPresent" [selectedTimeRange]="selectedTimeRange"> </app-time-range>
+ <span class="input-group-append" style="white-space: nowrap;">
+ <app-time-range class="d-flex position-relative" (timeRangeChange)="onTimeRangeChange($event)" [disabled]="timeStampfilterPresent" [selectedTimeRange]="selectedTimeRange"> </app-time-range>
</span>
- <span class="input-group-btn">
- <button class="btn btn-secondary btn-search" type="button" data-name="search" (click)="onSearch(alertSearchDirective.getSeacrhText())"></button>
+ <span class="input-group-append">
+ <button class="btn btn-secondary btn-search rounded-right" type="button" data-name="search" (click)="onSearch(alertSearchDirective.getSeacrhText())"></button>
</span>
+ <div class="input-group-append">
+ <span class="save-button" (click)="showSaveSearch()">
+ </span>
+ </div>
</div>
</div>
</div>
- <div class="col-fixed-50">
- <span class="save-button" (click)="showSaveSearch()">
- </span>
- </div>
</div>
<div class="mrow">
<div class="col-md-9 px-0">
diff --git a/metron-interface/metron-alerts/src/app/alerts/alerts-list/table-view/table-view.component.html b/metron-interface/metron-alerts/src/app/alerts/alerts-list/table-view/table-view.component.html
index 718a41f..597cd45 100644
--- a/metron-interface/metron-alerts/src/app/alerts/alerts-list/table-view/table-view.component.html
+++ b/metron-interface/metron-alerts/src/app/alerts/alerts-list/table-view/table-view.component.html
@@ -110,8 +110,8 @@
</tbody>
</table>
</div>
-<div clas="row">
- <div class="col-md-3 push-md-5">
- <metron-table-pagination [(pagination)]="pagination" (pageChange)="onPageChange()"> </metron-table-pagination>
- </div>
+
+<div class="col-md-3 offset-md-5">
+ <metron-table-pagination [(pagination)]="pagination" (pageChange)="onPageChange()"> </metron-table-pagination>
</div>
+
diff --git a/metron-interface/metron-alerts/src/app/alerts/alerts-list/tree-view/tree-view.component.html b/metron-interface/metron-alerts/src/app/alerts/alerts-list/tree-view/tree-view.component.html
index fa0baaa..cd87cbc 100644
--- a/metron-interface/metron-alerts/src/app/alerts/alerts-list/tree-view/tree-view.component.html
+++ b/metron-interface/metron-alerts/src/app/alerts/alerts-list/tree-view/tree-view.component.html
@@ -31,7 +31,7 @@
</div>
</div>
<div class="collapse" role="tabpanel" [ngClass]="{'show': group.expand}">
- <div class="card-block">
+ <div class="card-body">
<div class="table-wrapper">
<table class="table table-sm" metron-config-table [data]="alerts" [cellSelectable]="true" (onSort)="sortTreeSubGroup($event, group)" style="white-space: nowrap;" (window:resize)="resize()" #table>
<thead>
diff --git a/metron-interface/metron-alerts/src/app/alerts/configure-rows/configure-rows.component.html b/metron-interface/metron-alerts/src/app/alerts/configure-rows/configure-rows.component.html
index d765d5e..ea08736 100644
--- a/metron-interface/metron-alerts/src/app/alerts/configure-rows/configure-rows.component.html
+++ b/metron-interface/metron-alerts/src/app/alerts/configure-rows/configure-rows.component.html
@@ -13,7 +13,7 @@
-->
<i class="fa fa-sort-asc" aria-hidden="true" *ngIf="showView"></i>
<div class="card" *ngIf="showView">
- <div class="card-block">
+ <div class="card-body p-3">
<h6 class="card-title">Settings</h6>
<form>
<label> REFRESH RATE </label>
diff --git a/metron-interface/metron-alerts/src/app/app.component.html b/metron-interface/metron-alerts/src/app/app.component.html
index 1e1e9bf..a531dc8 100644
--- a/metron-interface/metron-alerts/src/app/app.component.html
+++ b/metron-interface/metron-alerts/src/app/app.component.html
@@ -16,7 +16,7 @@
<a class="" href="#">
<img alt="" src="assets/images/logo.png" width="135" height="45">
</a>
- <ul class="nav ml-4">
+ <ul class="nav ml-4 h-100">
<li class="nav-item" routerLinkActive="active">
<a class="nav-link " routerLink="/alerts-list" routerLinkActive="active">Alerts</a>
</li>
diff --git a/metron-interface/metron-alerts/src/app/app.component.ts b/metron-interface/metron-alerts/src/app/app.component.ts
index 52dee23..e2fc0f8 100644
--- a/metron-interface/metron-alerts/src/app/app.component.ts
+++ b/metron-interface/metron-alerts/src/app/app.component.ts
@@ -19,8 +19,6 @@ import { Component, OnInit } from '@angular/core';
import {AuthenticationService} from './service/authentication.service';
import { environment } from 'environments/environment';
-declare var $;
-
@Component({
selector: 'metron-alerts-root',
templateUrl: './app.component.html',
@@ -38,17 +36,6 @@ export class AppComponent implements OnInit {
}
ngOnInit(): void {
- $('body').tooltip({
- trigger : 'hover',
- selector: '[data-toggle="tooltip"]'
- });
- $('body').on('show.bs.tooltip ', function () {
- $('.tooltip').tooltip('hide');
- });
-
- $(document).on('click', function () {
- $('.tooltip').tooltip('hide');
- });
}
}
diff --git a/metron-interface/metron-alerts/src/app/pcap/pcap-panel/pcap-panel.component.scss b/metron-interface/metron-alerts/src/app/pcap/pcap-panel/pcap-panel.component.scss
index 523f5ce..d13f2e4 100644
--- a/metron-interface/metron-alerts/src/app/pcap/pcap-panel/pcap-panel.component.scss
+++ b/metron-interface/metron-alerts/src/app/pcap/pcap-panel/pcap-panel.component.scss
@@ -29,6 +29,10 @@
animation-duration: 2s;
}
+.progress {
+ height: 34px;
+}
+
.progress-bar {
width: 0;
height: 34px;
diff --git a/metron-interface/metron-alerts/src/app/shared/collapse/collapse.component.html b/metron-interface/metron-alerts/src/app/shared/collapse/collapse.component.html
index c83007c..9df8351 100644
--- a/metron-interface/metron-alerts/src/app/shared/collapse/collapse.component.html
+++ b/metron-interface/metron-alerts/src/app/shared/collapse/collapse.component.html
@@ -20,7 +20,7 @@
<i> {{ 'No ' + data.groupName | centerEllipses: strLength }} </i>
</div>
<ul *ngIf="data.groupItems.length > 0" class="list-group">
- <li *ngFor="let groupItem of data.groupItems" class="list-group-item justify-content-between anchor"
+ <li *ngFor="let groupItem of data.groupItems" class="list-group-item justify-content-between anchor d-flex"
[ngClass]="{'font-size-12' : fontSize === 12, 'font-size-15' : fontSize === 15}" [attr.title]="groupItem.name"
(click)="onSelectClick(groupItem.name)">
{{ groupItem.name | centerEllipses: strLength }}
diff --git a/metron-interface/metron-alerts/src/app/shared/date-picker/date-picker.component.html b/metron-interface/metron-alerts/src/app/shared/date-picker/date-picker.component.html
index 475d7fc..05840df 100644
--- a/metron-interface/metron-alerts/src/app/shared/date-picker/date-picker.component.html
+++ b/metron-interface/metron-alerts/src/app/shared/date-picker/date-picker.component.html
@@ -13,5 +13,7 @@
-->
<div #inputText class="input-group">
<input class="form-control" [(ngModel)]="dateStr" (click)="toggleDatePicker($event)">
- <span class="input-group-addon calendar"></span>
+ <div class="input-group-append">
+ <span class="input-group-text calendar"></span>
+ </div>
</div>
diff --git a/metron-interface/metron-alerts/src/app/shared/time-range/time-range.component.html b/metron-interface/metron-alerts/src/app/shared/time-range/time-range.component.html
index fed679a..3078f60 100644
--- a/metron-interface/metron-alerts/src/app/shared/time-range/time-range.component.html
+++ b/metron-interface/metron-alerts/src/app/shared/time-range/time-range.component.html
@@ -16,12 +16,12 @@
<br/> <span class="time-range-value"> {{ selectedTimeRangeValue === 'All time' ? '' : fromDateStr +' to ' + toDateStr }}</span>
</button>
-<div #datePicker class="collapse" id="time-range">
- <div class="card card-block">
+<div #datePicker class="collapse mt-5" id="time-range">
+ <div class="card p-3">
<div class="container-fluid no-gutters h-100">
<div class="row h-100">
<div class="col-4 time-range">
- <div class="title">Time Range</div> <br>
+ <div class="title">Time Range</div>
<form>
<div class="form-group">
<label>FROM</label>
@@ -35,7 +35,7 @@
</form>
</div>
<div class="col-8 quick-ranges pr-0">
- <div class="title"> Quick Ranges </div> <br>
+ <div class="title"> Quick Ranges </div>
<div class="row no-gutters">
<div class="col-3">
<span *ngFor="let key of timeRangeMappingCol1 | mapKeys" (click)="selectTimeRange($event, timeRangeMappingCol1[key])" [attr.id]="timeRangeMappingCol1[key]"> {{ key }} </span> <br>
diff --git a/metron-interface/metron-alerts/src/confirm-popover.scss b/metron-interface/metron-alerts/src/confirm-popover.scss
index 2c05270..6917abe 100644
--- a/metron-interface/metron-alerts/src/confirm-popover.scss
+++ b/metron-interface/metron-alerts/src/confirm-popover.scss
@@ -91,5 +91,23 @@ $popover-border-color: #1B596C;
border-left-color: $popover-background-color;
right: -9px;
}
+ .arrow {
+ transform: translateY(calc(-50% - .25rem));
+ }
+ }
+}
+
+.bs-popover-left {
+
+ .arrow::before {
+ border-left-color: #1B596C;
+ }
+
+ .arrow::after {
+ border-left-color: #0C3B43;
+ }
+
+ .popover-body {
+ color: inherit;
}
-}
\ No newline at end of file
+}
diff --git a/metron-interface/metron-alerts/src/styles.scss b/metron-interface/metron-alerts/src/styles.scss
index 614d539..50ea6ab 100644
--- a/metron-interface/metron-alerts/src/styles.scss
+++ b/metron-interface/metron-alerts/src/styles.scss
@@ -337,3 +337,7 @@ $background_color_3: #2196F3;
animation: none !important;
}
+.dropdown-item.disabled {
+ cursor: not-allowed;
+ pointer-events: all;
+}
diff --git a/metron-interface/metron-alerts/src/vendor.scss b/metron-interface/metron-alerts/src/vendor.scss
index 9e343e7..e94169e 100644
--- a/metron-interface/metron-alerts/src/vendor.scss
+++ b/metron-interface/metron-alerts/src/vendor.scss
@@ -22,50 +22,52 @@
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/
+ // Variables with theme overrides
+ @import "variables";
+
// Core variables and mixins
-@import "~bootstrap/scss/variables";
-@import "~bootstrap/scss/mixins";
-@import "variables";
+@import "../node_modules/bootstrap/scss/functions";
+@import "../node_modules/bootstrap/scss/variables";
+@import "../node_modules/bootstrap/scss/mixins";
// Reset and dependencies
-@import "~bootstrap/scss/normalize";
-@import "~bootstrap/scss/print";
+@import "../node_modules/bootstrap/scss/print";
// Core CSS
-@import "~bootstrap/scss/reboot";
-@import "~bootstrap/scss/type";
-@import "~bootstrap/scss/images";
-@import "~bootstrap/scss/code";
-@import "~bootstrap/scss/grid";
-@import "~bootstrap/scss/tables";
-@import "~bootstrap/scss/forms";
-@import "~bootstrap/scss/buttons";
+@import "../node_modules/bootstrap/scss/reboot";
+@import "../node_modules/bootstrap/scss/type";
+@import "../node_modules/bootstrap/scss/images";
+@import "../node_modules/bootstrap/scss/code";
+@import "../node_modules/bootstrap/scss/grid";
+@import "../node_modules/bootstrap/scss/tables";
+@import "../node_modules/bootstrap/scss/forms";
+@import "../node_modules/bootstrap/scss/buttons";
// Components
-@import "~bootstrap/scss/transitions";
-@import "~bootstrap/scss/dropdown";
-@import "~bootstrap/scss/button-group";
-@import "~bootstrap/scss/input-group";
-@import "~bootstrap/scss/custom-forms";
-@import "~bootstrap/scss/nav";
-@import "~bootstrap/scss/navbar";
-@import "~bootstrap/scss/card";
-@import "~bootstrap/scss/breadcrumb";
-@import "~bootstrap/scss/pagination";
-@import "~bootstrap/scss/badge";
-@import "~bootstrap/scss/jumbotron";
-@import "~bootstrap/scss/alert";
-@import "~bootstrap/scss/progress";
-@import "~bootstrap/scss/media";
-@import "~bootstrap/scss/list-group";
-@import "~bootstrap/scss/responsive-embed";
-@import "~bootstrap/scss/close";
+@import "../node_modules/bootstrap/scss/alert";
+@import "../node_modules/bootstrap/scss/transitions";
+@import "../node_modules/bootstrap/scss/dropdown";
+@import "../node_modules/bootstrap/scss/button-group";
+@import "../node_modules/bootstrap/scss/input-group";
+@import "../node_modules/bootstrap/scss/custom-forms";
+@import "../node_modules/bootstrap/scss/nav";
+@import "../node_modules/bootstrap/scss/navbar";
+@import "../node_modules/bootstrap/scss/card";
+@import "../node_modules/bootstrap/scss/breadcrumb";
+@import "../node_modules/bootstrap/scss/pagination";
+@import "../node_modules/bootstrap/scss/badge";
+@import "../node_modules/bootstrap/scss/jumbotron";
+@import "../node_modules/bootstrap/scss/alert";
+@import "../node_modules/bootstrap/scss/progress";
+@import "../node_modules/bootstrap/scss/media";
+@import "../node_modules/bootstrap/scss/list-group";
+@import "../node_modules/bootstrap/scss/close";
// Components w/ JavaScript
-@import "~bootstrap/scss/modal";
-@import "~bootstrap/scss/tooltip";
-@import "~bootstrap/scss/popover";
-@import "~bootstrap/scss/carousel";
+@import "../node_modules/bootstrap/scss/modal";
+@import "../node_modules/bootstrap/scss/tooltip";
+@import "../node_modules/bootstrap/scss/popover";
+@import "../node_modules/bootstrap/scss/carousel";
// Utility classes
-@import "~bootstrap/scss/utilities";
+@import "../node_modules/bootstrap/scss/utilities";