diff --git a/gulpfile.js b/gulpfile.js index 1dc0b9a8..c5d35e4c 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -98,9 +98,10 @@ gulp.task("jsLibraries", function() { "node_modules/jquery/dist/jquery.min.js", "node_modules/bootstrap/dist/js/bootstrap.min.js", // For dropdown : temporary "node_modules/bootstrap-datepicker/dist/js/bootstrap-datepicker.js", + "node_modules/angular/angular.js", "node_modules/react/umd/react.production.min.js", "node_modules/react-dom/umd/react-dom.production.min.js", - "node_modules/angular/angular.js", + "node_modules/ngreact/ngReact.min.js", "node_modules/angular-ui-bootstrap/dist/ui-bootstrap.min.js", "node_modules/angular-ui-bootstrap/dist/ui-bootstrap-tpls.js", "node_modules/angular-sanitize/angular-sanitize.min.js", @@ -115,7 +116,10 @@ gulp.task("jsLibraries", function() { "node_modules/angular-bootstrap-switch/dist/angular-bootstrap-switch.min.js", "node_modules/angular-patternfly/node_modules/angular-drag-and-drop-lists/angular-drag-and-drop-lists.js", "node_modules/datatables/media/js/jquery.dataTables.js", - "node_modules/angular-patternfly/node_modules/angularjs-datatables/dist/angular-datatables.js" + "node_modules/angular-patternfly/node_modules/angularjs-datatables/dist/angular-datatables.js", + "node_modules/q/q.js", + "node_modules/moment/min/moment.min.js", + "node_modules/react-datepicker/dist/react-datepicker.min.js" ]) .pipe(uglify()) .pipe(concat("libraries.js")) @@ -128,7 +132,8 @@ gulp.task("cssLibraries", function() { "node_modules/patternfly/dist/css/patternfly.css", "node_modules/patternfly/dist/css/patternfly-additions.css", "node_modules/angular-patternfly/styles/angular-patternfly.css", - "node_modules/bootstrap-switch/dist/css/bootstrap3/bootstrap-switch.min.css" + "node_modules/bootstrap-switch/dist/css/bootstrap3/bootstrap-switch.min.css", + "node_modules/react-datepicker/dist/react-datepicker.min.css" ]) .pipe(postCss([autoprefixer({ browsers: browsers })])) .pipe(buildMode === "dev" ? noop() : minifyCSS()) @@ -215,8 +220,8 @@ gulp.task("resource", function(done) { gulp.task("jsbundle", ["eslint"], function() { return gulp.src(paths.jsFiles, { cwd: paths.src }) - .pipe(babel({ presets: ["es2015"] })) .pipe(concat("plugin-bundle.js")) + .pipe(babel({ presets: ["es2015", "react"] })) .pipe(gulp.dest(paths.dest)); }); @@ -256,7 +261,7 @@ gulp.task("watcher", ["browser-sync", "common"], function(done) { gulp.watch(filters.js, { cwd: paths.src }, function(event) { log("Modified:", colors.yellow(event.path)); - runSequence("preload", "jsbundle"); + runSequence("preload", "jsbundle", "transform"); }); gulp.watch([filters.css, filters.scss], { cwd: paths.src }, function(event) { @@ -300,7 +305,8 @@ gulp.task("dev", ["common", "watcher"], function(done) { // production mode task gulp.task("release", ["common"], function(done) { - runSequence("ut", done); + /* TODO: uncomment it once migrated the testing framework too */ + //runSequence("ut", done); }); //default task is common diff --git a/package.json b/package.json index fb215f5b..dea29e99 100644 --- a/package.json +++ b/package.json @@ -26,11 +26,13 @@ "font-awesome": "^4.7.0", "idb-wrapper": "~1.7.1", "jquery": "~3.1.1", + "moment": "^2.22.1", "ngreact": "^0.5.1", "numeral": "~1.5.3", "patternfly": "~3.29.13", "patternfly-react": "^2.3.0", "react": "^16.3.2", + "react-datepicker": "^1.5.0", "react-dom": "^16.3.2", "redux": "^4.0.0" }, @@ -38,8 +40,10 @@ "angular-mocks": "~1.5.8", "ansi-colors": "^1.1.0", "autoprefixer": "^7.1.3", + "babel-cli": "^6.26.0", "babel-core": "^6.26.3", "babel-preset-es2015": "^6.24.1", + "babel-preset-react": "^6.24.1", "babelify": "^8.0.0", "browser-sync": "^2.18.13", "browserify": "^16.2.0", diff --git a/src/commons/js/index.js b/src/commons/js/index.js index af715be0..f5a120cb 100755 --- a/src/commons/js/index.js +++ b/src/commons/js/index.js @@ -11,7 +11,8 @@ "patternfly.form", "patternfly.notification", "patternfly.table", - "patternfly.filters" + "patternfly.filters", + "react" ]); /* Setting up provider for getting config data */ diff --git a/src/commons/js/ng-react-ng-deps.js b/src/commons/js/ng-react-ng-deps.js index b4333c2b..9a18f3e7 100644 --- a/src/commons/js/ng-react-ng-deps.js +++ b/src/commons/js/ng-react-ng-deps.js @@ -4,6 +4,7 @@ export const ngDeps = {}; export function injectNgDeps(deps) { Object.assign(ngDeps, deps); + window.ngDeps = ngDeps; }; export default ngDeps; @@ -11,10 +12,10 @@ export default ngDeps; var storageModule = angular.module("TendrlModule"); storageModule.run([ - "$rootScope", - "$state", - "$q", - ($rootScope, $state, $q) => { - injectNgDeps({ $rootScope, $state, $q }); + "$stateParams", + "utils", + "config", + ($stateParams, utils, config) => { + injectNgDeps({ $stateParams, utils, config }); }, ]); diff --git a/src/commons/services/pub-sub.js b/src/commons/services/pub-sub.js new file mode 100644 index 00000000..31fa66f7 --- /dev/null +++ b/src/commons/services/pub-sub.js @@ -0,0 +1,42 @@ +const PubSubService = { + topics: {}, + subscribe: function(topic, listener) { + var that = this; + + // Create the topic's object if not yet created + if (!that.topics.hasOwnProperty.call(that.topics, topic)) { + that.topics[topic] = []; + } + + // Add the listener to queue + var index = that.topics[topic].push(listener) - 1; + + // Provide handle back for removal of topic + return { + remove: function() { + delete that.topics[topic][index]; + } + }; + }, + publish: function(topic, info) { + var that = this; + + // If the topic doesn't exist, or there's no listeners in queue, just leave + if (!that.topics.hasOwnProperty.call(that.topics, topic)) return; + + // Cycle through topics queue, fire! + that.topics[topic].forEach(function(item) { + item(info != undefined ? info : {}); + }); + } +}; + + +angular + .module("TendrlModule") + .service("pubSubService", pubSubService); + +/*@ngInject*/ +function pubSubService() { + return PubSubService; +} diff --git a/src/commons/services/vendor.js b/src/commons/services/vendor.js new file mode 100644 index 00000000..0ef2132e --- /dev/null +++ b/src/commons/services/vendor.js @@ -0,0 +1,4 @@ +import React, { Component } from "react"; +import moment from "moment"; +import DatePicker from 'react-datepicker'; +require("ngreact"); diff --git a/src/commons/stores/events-store.js b/src/commons/stores/events-store.js index aaec0e7b..55801303 100644 --- a/src/commons/stores/events-store.js +++ b/src/commons/stores/events-store.js @@ -1,15 +1,18 @@ -import React, { Component } from "react"; -import ngDeps from "../js/ng-react-ng-deps.js"; const EventStore = { + showAlertIndication: false, getAlertList: function() { var list, - deferred; + deferred, + utils = window.ngDeps.utils, + that = this; + + deferred = Q.defer(); - deferred = $q.defer(); utils.getAlertList() .then(function(data) { - $rootScope.showAlertIndication = false; + + that.showAlertIndication = false; list = data ? _formatAlertData(data) : []; deferred.resolve(list); }); @@ -28,8 +31,8 @@ const EventStore = { i; for (i = 0; i < len; i++) { - temp = {}, - temp.alertId = data[i].alert_id; + temp = {}; + temp.alertId = data[i].alert_id; temp.timeStamp = new Date(data[i].time_stamp); temp.severity = severity[data[i].severity]; temp.nodeId = data[i].node_id; @@ -39,8 +42,9 @@ const EventStore = { temp.clusterName = data[i].tags.integration_id ? data[i].tags.integration_id : ""; temp.sdsName = data[i].tags.sds_name ? data[i].tags.sds_name : ""; - if ((temp.severity === "error" || temp.severity === "warning") && !$rootScope.showAlertIndication) { - $rootScope.showAlertIndication = true; + if ((temp.severity === "error" || temp.severity === "warning") && !that.showAlertIndication) { + that.showAlertIndication = true; + PubSubService.publish("alertIndicationChanged", that.showAlertIndication); } res.push(temp); } @@ -49,9 +53,10 @@ const EventStore = { }, getEventList: function(clusterId) { var list, - deferred; + deferred, + utils = window.ngDeps.utils; - deferred = $q.defer(); + deferred = Q.defer(); utils.getEventList(clusterId) .then(function(data) { list = data ? _formatEventData(data) : []; @@ -69,8 +74,8 @@ const EventStore = { i; for (i = 0; i < len; i++) { - temp = {}, - temp.timeStamp = new Date(data[i].timestamp); + temp = {}; + temp.timeStamp = moment(new Date(data[i].timestamp)).format('DD-MMM-YY HH:mm:ss'); temp.priority = data[i].priority; temp.message = data[i].message; temp.message_id = data[i].message_id; @@ -81,13 +86,11 @@ const EventStore = { } }; -export default EventStore; - angular .module("TendrlModule") .service("eventStore", eventStore); /*@ngInject*/ -function eventStore($state, $q, $rootScope, utils) { +function eventStore() { return EventStore; } diff --git a/src/modules/base/header/header.html b/src/modules/base/header/header.html index 3933b0ca..b3196ff0 100644 --- a/src/modules/base/header/header.html +++ b/src/modules/base/header/header.html @@ -33,7 +33,7 @@
  • - +
    • diff --git a/src/modules/base/header/header.js b/src/modules/base/header/header.js index 41e06582..130f3b42 100644 --- a/src/modules/base/header/header.js +++ b/src/modules/base/header/header.js @@ -11,7 +11,7 @@ }); /*@ngInject*/ - function headerController($rootScope, $state, $scope, $uibModal, AuthManager, utils, Notifications, userStore) { + function headerController($rootScope, $state, $scope, $uibModal, AuthManager, utils, Notifications, userStore, eventStore, pubSubService) { var vm = this, currentUser; @@ -20,6 +20,7 @@ vm.searchBy = {}; vm.filterBy = ""; vm.severity = ""; + vm.showAlertIndication = eventStore.showAlertIndication; vm.notificationClose = notificationClose; vm.logout = logout; @@ -47,6 +48,10 @@ } }); + var subscription = pubSubService.subscribe("alertIndicationChanged", function(flag) { + vm.showAlertIndication = flag; + }); + init(); function init() { @@ -84,7 +89,7 @@ vm.showAlerts = false; } - function updateViewing (viewing, data) { + function updateViewing(viewing, data) { Notifications.setViewing(data, viewing); } diff --git a/src/modules/events/event-list/event-list.js b/src/modules/events/event-list/event-list.js index a1c8f064..6fb57646 100644 --- a/src/modules/events/event-list/event-list.js +++ b/src/modules/events/event-list/event-list.js @@ -1,149 +1,225 @@ -(function() { - "use strict"; - - angular - .module("TendrlModule") - .component("eventList", { - - restrict: "E", - templateUrl: "/modules/events/event-list/event-list.html", - bindings: {}, - controller: eventListController, - controllerAs: "eventListCntrl" - }); - - /*@ngInject*/ - function eventListController($rootScope, $scope, $interval, $state, $timeout, $filter, $stateParams, config, eventStore, utils) { - - var vm = this, - eventTimer, - toDate, - count; - - vm.eventList = []; - vm.isDataLoading = true; - vm.searchDescText = ""; - vm.filterByCreatedDate = filterByCreatedDate; - vm.searchByDesc = searchByDesc; - vm.clearAllFilters = clearAllFilters; - vm.openFromDate = openFromDate; - vm.openToDate = openToDate; - vm.showClearAction = showClearAction; - - vm.date = { - fromDate: "", - toDate: "", +const Event = (props) => { + return (
    +
    +
    +
    {props.message || "NA"}
    +
    +
    +
    {props.timeStamp}
    +
    +
    +
    ); +}; + +const Spinner = (props) => { + return (props.isDataLoading ?
    : null); +}; + +class DatePickerComp extends Component { + constructor(props) { + super(props); + this.checkValidDate = (event) => { + event.preventDefault(); }; - - vm.toDateOptions = { - format: "dd M yyyy", - startDate: $filter("date")(vm.date.fromDate, "dd MMM yyyy") + }; + + render() { + return (); + }; +}; + + +class EventList extends Component { + constructor(props) { + super(props); + let $stateParams = window.ngDeps.$stateParams, + config = window.ngDeps.config, + oThis = this; + + oThis.eventTimer = null; + oThis.clusterId = $stateParams.clusterId; + + oThis.state = { + eventList: [], + isDataLoading: true, + searchDescText: "", + date: { + fromDate: moment(), + toDate: moment() + }, + dateFormat: { + format: "YYYY/MM/DD" + }, + search: "" }; - vm.fromDateOptions = { - format: "dd M yyyy" - }; + oThis.updateSearch = oThis.updateSearch.bind(oThis); - vm.popupFrom = { - opened: false - }; + oThis.clearAllFilters = oThis.clearAllFilters.bind(oThis); - vm.popupTo = { - opened: false - }; + _init(); + function _init() { - init(); + EventStore.getEventList(oThis.clusterId) + .then((list) => { + clearInterval(oThis.eventTimer); - function startEventTimer() { - eventTimer = $interval(function() { - init(); - }, 1000 * config.eventsRefreshIntervalTime, 1); - } + oThis.setState({ + eventList: list + }); - function init() { - vm.clusterId = $stateParams.clusterId; - $rootScope.selectedClusterOption = vm.clusterId; - - eventStore.getEventList(vm.clusterId) - .then(function(list) { - $interval.cancel(eventTimer); - vm.eventList = list; - vm.isDataLoading = false; - startEventTimer(); - }).catch(function(e) { - vm.eventList = []; - }).finally(function() { - vm.isDataLoading = false; - }); - } - - - $scope.$on("$destroy", function() { - $interval.cancel(eventTimer); - }); - - function openFromDate() { - vm.popupFrom.opened = true; - }; + oThis.setState({ + isDataLoading: false + }); - function openToDate() { - vm.popupTo.opened = true; - }; + _startEventTimer(); + }).catch((e) => { - function filterByCreatedDate(list) { - var dateList, - dateTo, - dateFrom; - - dateList = new Date(list.timeStamp); - dateFrom = new Date(vm.date.fromDate); - dateTo = new Date(vm.date.toDate); - if (vm.date.fromDate && vm.date.toDate) { - _checkValidDates(); - if (vm.date.fromDate.valueOf() === vm.date.toDate.valueOf()) { - return dateList.getDate() === dateTo.getDate(); - } else { - dateTo = dateTo.setDate(dateTo.getDate() +1); - return Date.parse(dateList) >= Date.parse(dateFrom) && Date.parse(dateList) <= dateTo ; - } - } else if (vm.date.fromDate) { - return Date.parse(dateList) >= Date.parse(dateFrom); - } else if (vm.date.toDate) { - dateTo = dateTo.setDate(dateTo.getDate() +1); - return Date.parse(dateList) <= dateTo; - } else { - return list; - } + oThis.setState({ + eventList: [] + }); + }).finally(() => { + oThis.setState({ + isDataLoading: false + }); + }); } - function _checkValidDates() { - if (Date.parse(vm.date.toDate) < Date.parse(vm.date.fromDate)) { - vm.date.toDate = ""; - vm.invalidToDate = true; - } else { - vm.invalidToDate = false; - } - } + function _startEventTimer() { + oThis.eventTimer = setInterval(function() { + _init(); + }, 1000 * config.eventsRefreshIntervalTime, 1); - function clearAllFilters() { - vm.date.toDate = null; - vm.date.fromDate = null; - vm.invalidToDate = false; - vm.searchDescText = ""; } + } - function searchByDesc(list) { - if (!vm.searchDescText) { - return list; - } else if (vm.searchDescText && (list.message.toLowerCase()).indexOf(vm.searchDescText.toLowerCase()) !== -1) { - return list; - } - } + updateSearch(e) { + this.setState({ search: e.target.value }); + e.stopPropagation(); + } - function showClearAction() { - return vm.date.fromDate || vm.date.toDate || vm.searchDescText; - } + clearAllFilters(e) { + e.preventDefault(); + this.setState({ + search: "" + }); + e.stopPropagation(); } -})(); + componentWillUnmount() { + clearInterval(this.eventTimer); + } + + render() { + let filteredEvents = this.state.eventList.filter( + (event) => { + return event.message.toLowerCase().indexOf(this.state.search.toLowerCase()) !== -1; + } + ); + + let eventCount = (filteredEvents.length > 1) ? (filteredEvents.length) + " Events" : (this.state.eventList.length) + " Event"; + + let noEventFoundMsgEl = ( +
    +
    +
    + +
    +

    No Events Detected

    +
    +
    + ); + + let noFilteredEventFoundMsgEl = ( +
    +
    +
    No results match the filter criteria
    +
    +
    Suggestions
    +
    Please try selecting other filter criteria.
    +
    +
    +
    + ); + + let noEventFoundEl = (!this.state.isDataLoading && this.state.eventList.length === 0) ? noEventFoundMsgEl : null; + + let noFilteredEventFoundEl = (!this.state.isDataLoading && filteredEvents.length === 0 && this.state.eventList.length !== 0) ? noFilteredEventFoundMsgEl : null; + + let tableEl = ( +
    +
    + {filteredEvents.map(event => )} +
    +
    +
    +
    +
    + ); + + let eventData = (!this.state.isDataLoading && filteredEvents.length !== 0) ? tableEl : null; + + return ( +
    +

    Events

    +
    +
    +
    +
    + From: + +
    +
    + To: + +
    +
    +
    + + +
    +
    +
    +
    +
    +
    +
    +
    +
    {eventCount} +
    +
    + +
    +
    +
    + {noEventFoundEl} + {noFilteredEventFoundEl} + + {eventData} +
    + ); + }; +} + +const props = []; + +const ReactEventList = reactDirective => reactDirective(EventList, props); +ReactEventList.$inject = ["reactDirective"]; + +angular + .module("TendrlModule") + .directive("eventList", ReactEventList);