From f789af3122b6b7433ab728518abc624e0d501e39 Mon Sep 17 00:00:00 2001 From: Neha Gupta Date: Mon, 21 May 2018 16:32:56 +0530 Subject: [PATCH] 1) Injected angularjs dependencies 2) Implemented Pub/Sub Model 3) Implemented event list view in react Signed-off-by: Neha Gupta --- gulpfile.js | 15 +- package.json | 222 ++++++++------- src/commons/js/index.js | 3 +- src/commons/js/ng-react-ng-deps.js | 11 +- src/commons/services/pub-sub.js | 42 +++ src/commons/services/utils.js | 4 +- src/commons/services/vendor.js | 4 + src/commons/stores/events-store.js | 35 +-- src/modules/base/header/header.html | 2 +- src/modules/base/header/header.js | 9 +- src/modules/events/event-list/event-list.js | 300 +++++++++++--------- 11 files changed, 373 insertions(+), 274 deletions(-) create mode 100644 src/commons/services/pub-sub.js create mode 100644 src/commons/services/vendor.js diff --git a/gulpfile.js b/gulpfile.js index 1dc0b9a8..c10a1cd0 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) { diff --git a/package.json b/package.json index fb215f5b..fc6f5a1e 100644 --- a/package.json +++ b/package.json @@ -1,112 +1,116 @@ { - "name": "Tendrl", - "description": "Dashboard", - "version": "1.6.3", - "dependencies": { - "@uirouter/angularjs": "^1.0.7", - "angular": "~1.5.8", - "angular-animate": "~1.5.8", - "angular-bootstrap-switch": "~0.5.2", - "angular-cookies": "~1.5.8", - "angular-growl-v2": "~0.7.5", - "angular-motion": "~0.4.4", - "angular-patternfly": "^4.0.0", - "angular-resource": "~1.5.8", - "angular-route": "~1.5.8", - "angular-sanitize": "~1.5.8", - "angular-strap": "~2.3.10", - "angular-ui-bootstrap": "~2.2.0", - "bootstrap": "^3.3.7", - "bootstrap-datepicker": "~1.6.4", - "bootstrap-tooltip": "~3.1.1", - "c3": "~0.4.11", - "c3-angular": "git://github.com/jettro/c3-angular-directive#1.3.1", - "d3": "~3.5.17", - "es6-shim": "~0.35.1", - "font-awesome": "^4.7.0", - "idb-wrapper": "~1.7.1", - "jquery": "~3.1.1", - "ngreact": "^0.5.1", - "numeral": "~1.5.3", - "patternfly": "~3.29.13", - "patternfly-react": "^2.3.0", - "react": "^16.3.2", - "react-dom": "^16.3.2", - "redux": "^4.0.0" + "name": "Tendrl", + "description": "Dashboard", + "version": "1.6.3", + "dependencies": { + "@uirouter/angularjs": "^1.0.7", + "angular": "~1.5.8", + "angular-animate": "~1.5.8", + "angular-bootstrap-switch": "~0.5.2", + "angular-cookies": "~1.5.8", + "angular-growl-v2": "~0.7.5", + "angular-motion": "~0.4.4", + "angular-patternfly": "^4.0.0", + "angular-resource": "~1.5.8", + "angular-route": "~1.5.8", + "angular-sanitize": "~1.5.8", + "angular-strap": "~2.3.10", + "angular-ui-bootstrap": "~2.2.0", + "bootstrap": "^3.3.7", + "bootstrap-datepicker": "~1.6.4", + "bootstrap-tooltip": "~3.1.1", + "c3": "~0.4.11", + "c3-angular": "git://github.com/jettro/c3-angular-directive#1.3.1", + "d3": "~3.5.17", + "es6-shim": "~0.35.1", + "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" + }, + "devDependencies": { + "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", + "chai": "^3.5.0", + "datatables": "^1.10.13", + "del": "*", + "fancy-log": "^1.3.2", + "glob": "~7.1.1", + "gulp": "^3.9.1", + "gulp-babel": "^7.0.1", + "gulp-browserify": "^0.5.1", + "gulp-clean-css": "^3.9.3", + "gulp-concat": "^2.6.0", + "gulp-cssimport": "^4.0.1", + "gulp-debug": "*", + "gulp-eslint": "^2.0.1", + "gulp-if": "^2.0.2", + "gulp-ignore": "^2.0.2", + "gulp-inject": "^4.1.0", + "gulp-load-plugins": "*", + "gulp-ng-annotate": "^2.0.0", + "gulp-noop": "^1.0.0", + "gulp-postcss": "^6.0.10", + "gulp-react": "^3.1.0", + "gulp-rename": "^1.2.2", + "gulp-sass": "^2.3.2", + "gulp-sourcemaps": "^2.6.4", + "gulp-uglify": "^2.0.0", + "http-proxy": "^1.16.2", + "karma": "~1.3.0", + "karma-chai": "~0.1.0", + "karma-coverage": "~1.1.1", + "karma-mocha": "~1.2.0", + "karma-mocha-reporter": "~2.2.0", + "karma-ng-html2js-preprocessor": "^1.0.0", + "karma-phantomjs-launcher": "^1.0.2", + "karma-sinon": "^1.0.5", + "merge-stream": "^1.0.0", + "minimist": "^1.2.0", + "mkdirp": "^0.5.1", + "mocha": "^3.1.2", + "request": "^2.78.0", + "run-sequence": "^1.2.2", + "sinon": "^1.17.6", + "vinyl-source-stream": "^2.0.0" + }, + "TendrlProps": { + "preloads": [], + "resources": { + "../node_modules/patternfly/dist/fonts/*.*": "fonts/", + "../node_modules/font-awesome/fonts/*.*": "fonts/", + "../node_modules/patternfly/node_modules/font-awesome/fonts/*.*": "dist/components/font-awesome/fonts" }, - "devDependencies": { - "angular-mocks": "~1.5.8", - "ansi-colors": "^1.1.0", - "autoprefixer": "^7.1.3", - "babel-core": "^6.26.3", - "babel-preset-es2015": "^6.24.1", - "babelify": "^8.0.0", - "browser-sync": "^2.18.13", - "browserify": "^16.2.0", - "chai": "^3.5.0", - "datatables": "^1.10.13", - "del": "*", - "fancy-log": "^1.3.2", - "glob": "~7.1.1", - "gulp": "^3.9.1", - "gulp-babel": "^7.0.1", - "gulp-browserify": "^0.5.1", - "gulp-clean-css": "^3.9.3", - "gulp-concat": "^2.6.0", - "gulp-cssimport": "^4.0.1", - "gulp-debug": "*", - "gulp-eslint": "^2.0.1", - "gulp-if": "^2.0.2", - "gulp-ignore": "^2.0.2", - "gulp-inject": "^4.1.0", - "gulp-load-plugins": "*", - "gulp-ng-annotate": "^2.0.0", - "gulp-noop": "^1.0.0", - "gulp-postcss": "^6.0.10", - "gulp-react": "^3.1.0", - "gulp-rename": "^1.2.2", - "gulp-sass": "^2.3.2", - "gulp-sourcemaps": "^2.6.4", - "gulp-uglify": "^2.0.0", - "http-proxy": "^1.16.2", - "karma": "~1.3.0", - "karma-chai": "~0.1.0", - "karma-coverage": "~1.1.1", - "karma-mocha": "~1.2.0", - "karma-mocha-reporter": "~2.2.0", - "karma-ng-html2js-preprocessor": "^1.0.0", - "karma-phantomjs-launcher": "^1.0.2", - "karma-sinon": "^1.0.5", - "merge-stream": "^1.0.0", - "minimist": "^1.2.0", - "mkdirp": "^0.5.1", - "mocha": "^3.1.2", - "request": "^2.78.0", - "run-sequence": "^1.2.2", - "sinon": "^1.17.6", - "vinyl-source-stream": "^2.0.0" - }, - "TendrlProps": { - "preloads": [], - "resources": { - "../node_modules/patternfly/dist/fonts/*.*": "fonts/", - "../node_modules/font-awesome/fonts/*.*": "fonts/", - "../node_modules/patternfly/node_modules/font-awesome/fonts/*.*": "dist/components/font-awesome/fonts" - }, - "targetBrowsers": [ - "last 2 version" - ], - "cssMain": "commons/scss/main.scss", - "jsFiles": [ - "commons/js/index.js", - "commons/**/*.js", - "modules/**/*.js" - ], - "htmlFiles": [ - "index.html" - ], - "config": "config.json", - "buildDestination": "./dist/", - "archiveExtension": ".tar.gz" - } + "targetBrowsers": [ + "last 2 version" + ], + "cssMain": "commons/scss/main.scss", + "jsFiles": [ + "commons/js/index.js", + "commons/**/*.js", + "modules/**/*.js" + ], + "htmlFiles": [ + "index.html" + ], + "config": "config.json", + "buildDestination": "./dist/", + "archiveExtension": ".tar.gz" + } } 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/utils.js b/src/commons/services/utils.js index de9000b0..53bb6ecd 100644 --- a/src/commons/services/utils.js +++ b/src/commons/services/utils.js @@ -235,8 +235,8 @@ getEventListRequest, request; - //url = "/api/events.json"; - url = config.baseUrl + "clusters/" + clusterId + "/notifications"; + url = "/api/events.json"; + //url = config.baseUrl + "clusters/" + clusterId + "/notifications"; getEventListRequest = { method: "GET", diff --git a/src/commons/services/vendor.js b/src/commons/services/vendor.js new file mode 100644 index 00000000..225391be --- /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"); \ No newline at end of file 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..9e61ebf6 100644 --- a/src/modules/events/event-list/event-list.js +++ b/src/modules/events/event-list/event-list.js @@ -1,149 +1,183 @@ -(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); + var $stateParams = window.ngDeps.$stateParams, + config = window.ngDeps.config, + oThis = this, + eventTimer; + + oThis.clusterId = $stateParams.clusterId; + + oThis.state = { + eventList: [], + isDataLoading: true, + searchDescText: "", + date: { + fromDate: moment(), + toDate: moment() + }, + dateFormat: { + format: "YYYY/MM/DD" + } }; - vm.fromDateOptions = { - format: "dd M yyyy" - }; + _init(); - vm.popupFrom = { - opened: false - }; + function _init() { - vm.popupTo = { - opened: false - }; + EventStore.getEventList(oThis.clusterId) + .then((list) => { + clearInterval(eventTimer); + oThis.setState({ + eventList: list + }); - init(); + oThis.setState({ + isDataLoading: false + }); - function startEventTimer() { - eventTimer = $interval(function() { - init(); - }, 1000 * config.eventsRefreshIntervalTime, 1); - } + _startEventTimer(); + }).catch((e) => { - 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; + oThis.setState({ + eventList: [] + }); + }).finally(() => { + oThis.setState({ + isDataLoading: false + }); }); } + function _startEventTimer() { + eventTimer = setInterval(function() { + _init(); + }, 1000 * config.eventsRefreshIntervalTime, 1); - $scope.$on("$destroy", function() { - $interval.cancel(eventTimer); - }); - - function openFromDate() { - vm.popupFrom.opened = true; - }; - - function openToDate() { - vm.popupTo.opened = true; - }; - - 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; - } - } - - function _checkValidDates() { - if (Date.parse(vm.date.toDate) < Date.parse(vm.date.fromDate)) { - vm.date.toDate = ""; - vm.invalidToDate = true; - } else { - vm.invalidToDate = false; - } - } - - 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; - } } - function showClearAction() { - return vm.date.fromDate || vm.date.toDate || vm.searchDescText; - } } - -})(); + render() { + + let eventCount = (this.state.eventList.length > 1) ? (this.state.eventList.length) + " Events" : (this.state.eventList.length) + " Event"; + + const noEventFoundMsgEl = ( +
    +
    +
    + +
    +

    No Events Detected

    +
    +
    + ); + + const noEventFoundEl = (!this.state.isDataLoading && this.state.eventList.length === 0) ? noEventFoundMsgEl : null; + + const tableEl = ( +
    +
    + {this.state.eventList.map(event => )} +
    +
    +
    +
    +
    + ); + + const eventData = (!this.state.isDataLoading && this.state.eventList.length !== 0) ? tableEl : null; + + return ( +
    +

    Events

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