RIFT-15726 - optimize download size -> lodash usage in UI
- Isolate specific lodash utilities to be included
- covert usage of underscore library to lodash
- did not make changes to backend api
Change-Id: Ic2fb75c0f25e35dee179c3603ab8f714e51e32af
Signed-off-by: Bob Gallagher <bob.gallagher@riftio.com>
diff --git a/skyquake/framework/widgets/listy/listy.js b/skyquake/framework/widgets/listy/listy.js
index ac0e58a..d032f97 100644
--- a/skyquake/framework/widgets/listy/listy.js
+++ b/skyquake/framework/widgets/listy/listy.js
@@ -16,7 +16,9 @@
*
*/
import React from 'react';
-import _ from 'lodash';
+import _isArrayLike from 'lodash/isArrayLike';
+import _isObjectLike from 'lodash/isObjectLike';
+import _isEmpty from 'lodash/isEmpty';
/**
*
@@ -40,10 +42,10 @@
var listNode = null;
var self = this;
- if (_.isArrayLike(data) && _.isObjectLike(data)) {
+ if (_isArrayLike(data) && _isObjectLike(data)) {
var children = [];
data.forEach(function(element, index, array) {
- if ( _.isArrayLike(element) || _.isObjectLike(element)) {
+ if ( _isArrayLike(element) || _isObjectLike(element)) {
children.push(self.createList(element, iter+1));
} else {
children.push(React.createElement(itemTag, {
@@ -57,10 +59,10 @@
key: iter,
className: groupClass }, children);
}
- else if (_.isObjectLike(data)) {
+ else if (_isObjectLike(data)) {
var children = [];
for (var key in data) {
- if ( _.isArrayLike(data[key]) || _.isObjectLike(data[key])) {
+ if ( _isArrayLike(data[key]) || _isObjectLike(data[key])) {
children.push(
React.createElement(listHeaderTag, {
key: key + '_header',
@@ -103,7 +105,7 @@
return React.createElement("div", {
className: "listy" },
- _.isEmpty(data) ?
+ _isEmpty(data) ?
this.noDataMessage() :
this.createList(data)
)
@@ -116,7 +118,7 @@
if (!obj)
return new Error('Validation failed. "%" is undefined', fullAttr);
- if (!obj.hasOwnProperty("tag") || _.isEmpty(obj.tag))
+ if (!obj.hasOwnProperty("tag") || _isEmpty(obj.tag))
return new Error('Validation failed. "%s" missing attribute "tag"', fullAttr);
if (!obj.hasOwnProperty("className") || obj.className == undefined)
return new Error('Validation failed. "%s" missing attribute "className"', fullAttr);
diff --git a/skyquake/framework/widgets/login/login.jsx b/skyquake/framework/widgets/login/login.jsx
index 1506809..840a2bd 100644
--- a/skyquake/framework/widgets/login/login.jsx
+++ b/skyquake/framework/widgets/login/login.jsx
@@ -19,7 +19,8 @@
import Utils from 'utils/utils.js';
import Button from 'widgets/button/rw.button.js';
import './login.scss'
-let rw = require('utils/rw.js');
+import rw from 'utils/rw.js';
+
class LoginScreen extends React.Component{
constructor(props) {
super(props);
diff --git a/skyquake/framework/widgets/skyquake_container/eventCenter.jsx b/skyquake/framework/widgets/skyquake_container/eventCenter.jsx
index 75d2d52..7df4e3e 100644
--- a/skyquake/framework/widgets/skyquake_container/eventCenter.jsx
+++ b/skyquake/framework/widgets/skyquake_container/eventCenter.jsx
@@ -28,7 +28,9 @@
import Utils from 'utils/utils.js';
import Crouton from 'react-crouton';
import TreeView from 'react-treeview';
-import _ from 'lodash';
+import _isEqual from 'lodash/isEqual';
+import _merge from 'lodash/merge';
+import _indexOf from 'lodash/indexOf';
import '../../../node_modules/react-treeview/react-treeview.css';
import './eventCenter.scss';
@@ -48,7 +50,7 @@
if (props.newNotificationEvent && props.newNotificationMsg) {
if (latestNotification) {
latestNotification = JSON.parse(latestNotification);
- if (!_.isEqual(props.newNotificationMsg, latestNotification)) {
+ if (!_isEqual(props.newNotificationMsg, latestNotification)) {
stateObject.newNotificationEvent = props.newNotificationEvent;
stateObject.newNotificationMsg = props.newNotificationMsg;
sessionStorage.setItem('latestNotification', JSON.stringify(stateObject.newNotificationMsg));
@@ -67,7 +69,7 @@
}
if (notificationList) {
- stateObject.notifications = _.merge(notificationList, props.notifications);
+ stateObject.notifications = _merge(notificationList, props.notifications);
} else {
stateObject.notifications = props.notifications;
}
@@ -112,7 +114,7 @@
notificationFields.eventTime = notification.eventTime;
Object.keys(notification).map((notificationKey) => {
- if (_.indexOf(['source', 'eventTime'], notificationKey) == -1) {
+ if (_indexOf(['source', 'eventTime'], notificationKey) == -1) {
notificationFields.eventKey = notificationKey;
notificationFields.details = notification[notificationFields.eventKey];
}
diff --git a/skyquake/framework/widgets/skyquake_container/skyquakeContainer.jsx b/skyquake/framework/widgets/skyquake_container/skyquakeContainer.jsx
index bf036e2..d53d85f 100644
--- a/skyquake/framework/widgets/skyquake_container/skyquakeContainer.jsx
+++ b/skyquake/framework/widgets/skyquake_container/skyquakeContainer.jsx
@@ -24,7 +24,6 @@
import SkyquakeContainerStore from './skyquakeContainerStore.js';
// import Breadcrumbs from 'react-breadcrumbs';
import Utils from 'utils/utils.js';
-import _ from 'lodash';
import Crouton from 'react-crouton';
import ScreenLoader from 'widgets/screen-loader/screenLoader.jsx';
import './skyquakeApp.scss';
diff --git a/skyquake/framework/widgets/skyquake_container/skyquakeContainerSource.js b/skyquake/framework/widgets/skyquake_container/skyquakeContainerSource.js
index ae2147a..76dffea 100644
--- a/skyquake/framework/widgets/skyquake_container/skyquakeContainerSource.js
+++ b/skyquake/framework/widgets/skyquake_container/skyquakeContainerSource.js
@@ -18,13 +18,14 @@
import Alt from './skyquakeAltInstance.js';
import $ from 'jquery';
import SkyquakeContainerActions from './skyquakeContainerActions'
+import rw from 'utils/rw.js';
+import Utils from 'utils/utils.js';
-let Utils = require('utils/utils.js');
-let API_SERVER = require('utils/rw.js').getSearchParams(window.location).api_server;
+let API_SERVER = rw.getSearchParams(window.location).api_server;
let HOST = API_SERVER;
-let NODE_PORT = require('utils/rw.js').getSearchParams(window.location).api_port || ((window.location.protocol == 'https:') ? 8443 : 8000);
-let DEV_MODE = require('utils/rw.js').getSearchParams(window.location).dev_mode || false;
-let RW_REST_API_PORT = require('utils/rw.js').getSearchParams(window.location).rw_rest_api_port || 8008;
+let NODE_PORT = rw.getSearchParams(window.location).api_port || ((window.location.protocol == 'https:') ? 8443 : 8000);
+let DEV_MODE = rw.getSearchParams(window.location).dev_mode || false;
+let RW_REST_API_PORT = rw.getSearchParams(window.location).rw_rest_api_port || 8008;
if (DEV_MODE) {
HOST = window.location.protocol + '//' + window.location.hostname;
diff --git a/skyquake/framework/widgets/skyquake_container/skyquakeContainerStore.js b/skyquake/framework/widgets/skyquake_container/skyquakeContainerStore.js
index f69014e..56ebdda 100644
--- a/skyquake/framework/widgets/skyquake_container/skyquakeContainerStore.js
+++ b/skyquake/framework/widgets/skyquake_container/skyquakeContainerStore.js
@@ -20,9 +20,10 @@
import Alt from './skyquakeAltInstance.js';
import SkyquakeContainerSource from './skyquakeContainerSource.js';
import SkyquakeContainerActions from './skyquakeContainerActions';
-import _ from 'lodash';
+import _indexOf from 'lodash/indexOf';
//Temporary, until api server is on same port as webserver
-var rw = require('utils/rw.js');
+import rw from 'utils/rw.js';
+
var API_SERVER = rw.getSearchParams(window.location).api_server;
var UPLOAD_SERVER = rw.getSearchParams(window.location).upload_server;
@@ -100,7 +101,7 @@
} else {
// Temp to test before adding multi-sources
data.notification.source = streamSource;
- if (_.indexOf(self.notifications, data.notification) == -1) {
+ if (_indexOf(self.notifications, data.notification) == -1) {
// newly appreared event.
// Add to the notifications list and setState
self.notifications.unshift(data.notification);
diff --git a/skyquake/framework/widgets/skyquake_container/skyquakeNav.jsx b/skyquake/framework/widgets/skyquake_container/skyquakeNav.jsx
index 73a2f02..8814a18 100644
--- a/skyquake/framework/widgets/skyquake_container/skyquakeNav.jsx
+++ b/skyquake/framework/widgets/skyquake_container/skyquakeNav.jsx
@@ -23,7 +23,8 @@
import 'style/common.scss';
//Temporary, until api server is on same port as webserver
-var rw = require('utils/rw.js');
+import rw from 'utils/rw.js';
+
var API_SERVER = rw.getSearchParams(window.location).api_server;
var UPLOAD_SERVER = rw.getSearchParams(window.location).upload_server;
diff --git a/skyquake/framework/widgets/topology/topologyTree.jsx b/skyquake/framework/widgets/topology/topologyTree.jsx
index 5e0d895..9c77c13 100644
--- a/skyquake/framework/widgets/topology/topologyTree.jsx
+++ b/skyquake/framework/widgets/topology/topologyTree.jsx
@@ -20,7 +20,7 @@
import ReactDOM from 'react-dom';
import d3 from 'd3';
import DashboardCard from '../dashboard_card/dashboard_card.jsx';
-import _ from 'lodash';
+import _cloneDeep from 'lodash/cloneDeep';
import $ from 'jquery';
import './topologyTree.scss';
@@ -66,7 +66,7 @@
//this.props.selectNode(props.data);
}
if(this.svg) {
- this.update(_.cloneDeep(props.data));
+ this.update(_cloneDeep(props.data));
// this.selectedID = props.data.id;
}
}