Refactor code to make sidebar in sync with the main view (#2134) (#2440)

* Refactor code to make sidebar in sync with the main view (#2134)

Signed-off-by: Gaurav Kumar <gaurav.kumar9825@gmail.com>

* Remove redundancy and cleanup code

Signed-off-by: Gaurav Kumar <gaurav.kumar9825@gmail.com>

* Remove extra space and add new line

Signed-off-by: Gaurav Kumar <gaurav.kumar9825@gmail.com>

web/app/js/components/NavigationResource.jsx

@@ -48,18 +48,7 @@ class NavigationResource extends React.Component {
 
   constructor(props) {
     super(props);
-
-    let resources = props.metrics
-      .filter(m => m.pods.meshedPods !== "0")
-      .map(m =>
-        _merge(m, {
-          menuName: props.type === "namespaces" ? m.name : `${m.namespace}/${m.name}`
-        })
-      );
-    this.resources = _orderBy(resources, r => r.menuName);
-
     this.to = props.api.prefixLink("/" + props.type);
-
     this.state = {open: false};
   }
 
@@ -82,14 +71,23 @@ class NavigationResource extends React.Component {
       <MenuItem
         className={classes.navMenuItem}
         onClick={this.handleOnClick}>
-        {this.listItemIcon(this.resources)}
+        {this.listItemIcon()}
         <ListItemText primary={friendlyTitle(type).plural} />
       </MenuItem>
     );
   }
 
   subMenu() {
-    const { api, classes } = this.props;
+    const { api, classes, metrics } = this.props;
+
+    const resources = _orderBy(metrics
+      .filter(m => m.pods.meshedPods !== "0")
+      .map(m =>
+        _merge(m, {
+          menuName: this.props.type === "namespaces" ? m.name : `${m.namespace}/${m.name}`
+        })
+      ), r => r.menuName);
+
 
     return (
       <MenuList dense component="div" disablePadding>
@@ -107,7 +105,7 @@ class NavigationResource extends React.Component {
             className={classes.navResourceText} />
         </MenuItem>
         {
-          this.resources.map(r => {
+          resources.map(r => {
             let url = api.prefixLink(api.generateResourceURL(r));
             return (
               <MenuItem

web/app/js/components/NavigationResources.jsx

@@ -30,7 +30,7 @@ class NavigationResourcesBase extends React.Component {
 
   constructor(props) {
     super(props);
-    this.state = {open: false};
+    this.state = { open: false };
   }
 
   handleOnClick = () => {
@@ -92,7 +92,7 @@ class NavigationResourcesBase extends React.Component {
 
 export default withREST(
   withContext(withStyles(styles, { withTheme: true })(NavigationResourcesBase)),
-  ({api}) => [
+  ({ api }) => [
     // TODO: modify "all" to also retrieve namespaces, also share fetch with parent component
     api.fetchMetrics(api.urlsForResource("all")),
     api.fetchMetrics(api.urlsForResource("namespace")),