feat(new-vm): show resource set limits (#1563)

Fixes #1541

src/common/usage/index.js

@@ -50,3 +50,23 @@ Element.propTypes = {
   value: PropTypes.number.isRequired
 }
 export { Element as UsageElement }
+
+export const Limits = ({ used, toBeUsed, limit }) => {
+  const available = limit - used
+
+  return <span className='limits'>
+    <span
+      className='limits-used'
+      style={{ width: ((used || 0) / limit) * 100 + '%' }}
+    />
+    <span
+      className={toBeUsed > available ? 'limits-over-used' : 'limits-to-be-used'}
+      style={{ width: (Math.min((toBeUsed || 0), available) / limit) * 100 + '%' }}
+    />
+  </span>
+}
+Limits.propTypes = {
+  used: PropTypes.number,
+  toBeUsed: PropTypes.number,
+  limit: PropTypes.number.isRequired
+}

src/common/utils.js

@@ -361,38 +361,43 @@ export function rethrow (cb) {
 
 // ===================================================================
 
-export const resolveResourceSets = resourceSets => (
-  map(resourceSets, resourceSet => {
-    const { objects, ...attrs } = resourceSet
-    const resolvedObjects = {}
-    const resolvedSet = {
-      ...attrs,
-      missingObjects: [],
-      objectsByType: resolvedObjects
-    }
-    const state = store.getState()
+export const resolveResourceSet = resourceSet => {
+  if (!resourceSet) {
+    return
+  }
 
-    forEach(objects, id => {
-      const object = getObject(state, id, true) // true: useResourceSet to bypass permissions
+  const { objects, ...attrs } = resourceSet
+  const resolvedObjects = {}
+  const resolvedSet = {
+    ...attrs,
+    missingObjects: [],
+    objectsByType: resolvedObjects
+  }
+  const state = store.getState()
 
-      // Error, missing resource.
-      if (!object) {
-        resolvedSet.missingObjects.push(id)
-        return
-      }
+  forEach(objects, id => {
+    const object = getObject(state, id, true) // true: useResourceSet to bypass permissions
 
-      const { type } = object
+    // Error, missing resource.
+    if (!object) {
+      resolvedSet.missingObjects.push(id)
+      return
+    }
 
-      if (!resolvedObjects[type]) {
-        resolvedObjects[type] = [ object ]
-      } else {
-        resolvedObjects[type].push(object)
-      }
-    })
+    const { type } = object
 
-    return resolvedSet
+    if (!resolvedObjects[type]) {
+      resolvedObjects[type] = [ object ]
+    } else {
+      resolvedObjects[type].push(object)
+    }
   })
-)
+
+  return resolvedSet
+}
+
+export const resolveResourceSets = resourceSets =>
+  map(resourceSets, resolveResourceSet)
 
 // -------------------------------------------------------------------
 

src/index.scss

@@ -30,10 +30,10 @@ $fa-font-path: "./";
 
 // -------------------------------------------------------------------
 
-
 @import "./chartist";
 @import "./meter";
 @import "./icons";
+@import "./usage";
 
 // ROOT STYLES =================================================================
 
@@ -194,37 +194,6 @@ $select-input-height: 40px; // Bootstrap input height
   background: $gray-lighter;
 }
 
-// MEMORY/DISK BAR STYLE =======================================================
-
-.usage {
-  @extend .progress;
-  background-color: #eee;
-  height: 2em;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
-  margin-top: 1em;
-  margin-bottom: 2em;
-}
-
-.usage-element {
-  background-color: #5cb85c;
-  box-shadow: -1px 0 0 0 white;
-  height: 2em;
-  display: inline-block;
-  transition: all 0.3s ease 0s;
-}
-
-.usage-element-highlight {
-  background-color: $brand-primary;
-}
-
-.usage-element-others {
-  background-color: $brand-info;
-}
-
-.usage-element:hover {
-  opacity: 0.6;
-}
-
 // NOTIFICATIONS STYLE =========================================================
 
 .notify-container {

src/usage.scss

@@ -0,0 +1,62 @@
+// Usage
+
+.usage {
+  @extend .progress;
+  background-color: #eee;
+  height: 2em;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
+  margin-top: 1em;
+  margin-bottom: 2em;
+}
+
+.usage-element {
+  background-color: #5cb85c;
+  box-shadow: -1px 0 0 0 white;
+  height: 2em;
+  display: inline-block;
+  transition: all 0.3s ease 0s;
+}
+
+.usage-element-highlight {
+  background-color: $brand-primary;
+}
+
+.usage-element-others {
+  background-color: $brand-info;
+}
+
+.usage-element:hover {
+  opacity: 0.6;
+}
+
+// Limits
+
+.limits {
+  @extend .progress;
+  background-color: #eee;
+  height: 1.1em;
+  width: 100%;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
+}
+
+.limits-element {
+  background-color: #5cb85c;
+  height: 100%;
+  display: inline-block;
+  transition: all 0.3s ease 0s;
+}
+
+.limits-used {
+  @extend .limits-element;
+  background-color: $brand-primary;
+}
+
+.limits-to-be-used {
+  @extend .limits-element;
+  background-color: $brand-success;
+}
+
+.limits-over-used {
+  @extend .limits-element;
+  background-color: $brand-danger;
+}