Merge pull request #25 from ParsePlatform/better-apps-index

Remove useless/unavailable info from AppsIndex

Author: drew-gross

dashboard/Apps/AppsIndex.react.js

@@ -45,14 +45,11 @@ let CloningNote = ({ app, clone_status, clone_progress }) => {
   return <div>Cloning is {progress}% complete</div>
 };
 
-let CountsSection = (props) => {
-  return (
-    <div className={props.className}>
-      <div className={styles.section}>{props.title}</div>
-      {props.children}
-    </div>
-  );
-};
+let CountsSection = ({ className, title, children }) =>
+ <div className={className}>
+   <div className={styles.section}>{title}</div>
+   {children}
+ </div>
 
 let Metric = (props) => {
   return (
@@ -63,46 +60,20 @@ let Metric = (props) => {
   );
 };
 
-let AppCard = (props) => {
-  let sharing = null;
-  if (props.app.collabInfo) {
-    if (props.app.isOwner()) {
-      sharing = 'shared with ' + pluralize(props.app.collaboratorCount, 'person', 'people');
-    } else {
-      sharing = html`shared by ${props.app.owner}`;
-    }
-  }
-  return (
-    <li onClick={() => history.pushState(null, html`/apps/${props.app.slug}/browser`)}>
-      <a className={styles.icon}>
-        {props.icon ? <img src={props.icon} /> : <Icon width={56} height={56} name='blank-app-outline' fill='#1E384D' />}
-      </a>
-      <CountsSection className={styles.plan} title='Current plan'>
-        <Metric number={dash(props.app.requestLimit)} label='requests/s' />
-        <Metric number={dash(props.app.requestLimit, Math.floor(props.app.requestLimit / 20))} label='background job' />
-        <Metric number={dash(props.app.requestLimit, '$' + (props.app.requestLimit - 30) * 10)} label='monthly' />
-        <a href={html`/apps/${props.app.slug}/settings`} className={styles.edit} onClick={(e) => {
-          e.stopPropagation();
-          history.pushState(null, html`/apps/${props.app.slug}/settings`);
-        }}>Edit</a>
-      </CountsSection>
-      <CountsSection className={styles.glance} title='At a glance'>
-        <Metric number={dash(props.app.requests, prettyNumber(props.app.requests))} label='requests' />
-        <Metric number={dash(props.app.users, prettyNumber(props.app.users))} label='total users' />
-        <Metric number={dash(props.app.installations, prettyNumber(props.app.installations))} label='total installations' />
-      </CountsSection>
-      <div className={styles.details}>
-        <a className={styles.appname}>{props.app.name}</a>
-        {props.app.is_cloning ? <CloningNote
-          app={props.app}
-          clone_status={props.app.clone_status}
-          clone_progress={props.app.clone_progress}/> :
-          <div>Created <span className={styles.ago}>{howLongAgo(props.app.createdAt)}</span></div>}
-      </div>
-      {sharing}
-    </li>
-  )
-};
+let AppCard = ({
+  app,
+  icon,
+}) => <li onClick={() => history.pushState(null, html`/apps/${app.slug}/browser`)}>
+  {icon ? <a className={styles.icon}><img src={icon} /></a> : null}
+  <CountsSection className={styles.glance} title='At a glance'>
+    <Metric number={dash(app.users, prettyNumber(app.users))} label='total users' />
+    <Metric number={dash(app.installations, prettyNumber(app.installations))} label='total installations' />
+  </CountsSection>
+  <div className={styles.details}>
+    <a className={styles.appname}>{app.name}</a>
+    <div className={styles.serverVersion}>Server version: <span className={styles.ago}>{app.enabledFeatures.serverVersion || 'unknown'}</span></div>
+  </div>
+</li>
 
 export default class AppsIndex extends React.Component {
   constructor() {
@@ -113,7 +84,7 @@ export default class AppsIndex extends React.Component {
 
   componentWillMount() {
     document.body.addEventListener('keydown', this.focusField);
-    AppsManager.getAppsInfo().then(() => {
+    AppsManager.getAllAppsIndexStats().then(() => {
       this.forceUpdate();
     });
   }

dashboard/Apps/AppsIndex.scss

@@ -129,16 +129,14 @@
 }
 
 .appname {
+  @include ellipsis();
   display: inline-block;
   font-size: 22px;
   color: white;
-  max-width: 180px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
 }
 
 .details {
+  @include ellipsis();
   padding: 9px 0;
   color: #788c97;
   font-size: 12px;
@@ -158,29 +156,8 @@
 
 .glance {
   float: right;
-  width: 340px;
   padding: 10px 12px;
   border-left: 1px solid #1e3b4d;
-  border-right: 1px solid #1e3b4d;
-}
-
-@media (max-width: 1300px) {
-  .glance {
-    display: none;
-  }
-}
-
-.plan {
-  float: right;
-  width: 300px;
-  padding: 10px 12px;
-  position: relative;
-}
-
-@media (max-width: 640px) {
-  .plan {
-    display: none;
-  }
 }
 
 .section {
@@ -205,6 +182,10 @@
   font-size: 11px;
 }
 
+.serverVersion {
+  @include ellipsis();
+}
+
 .edit {
   @include DIN17Font;
   position: absolute;

lib/AppsManager.js

@@ -5,6 +5,7 @@
  * This source code is licensed under the license found in the LICENSE file in
  * the root directory of this source tree.
  */
+import Parse              from 'parse';
 import ParseApp           from 'lib/ParseApp';
 import { get, post, del } from 'lib/AJAX';
 import { unescape }       from 'lib/StringEscaping';
@@ -66,25 +67,13 @@ const AppsManager = {
   },
 
   // Fetch the latest usage and request info for the apps index
-  getAppsInfo() {
-    return get('/apps_info').then((response) => {
-      this.apps().forEach((app) => {
-        let info = response[app.slug];
-        if (info) {
-          app.installations = info.installations;
-          app.requests = info.requests;
-          app.users = info.users;
-          app.requestLimit = info.requestLimit;
-
-          app.is_cloning = info.is_cloning;
-          if (app.is_cloning) {
-            app.clone_message = info.clone_message;
-            app.clone_status = info.clone_status;
-            app.clone_progress = info.clone_progress;
-          }
-        }
-      });
-    });
+  getAllAppsIndexStats() {
+    return Parse.Promise.when(this.apps().map(app => {
+      return Parse.Promise.when(
+        app.getClassCount('_Installation').then(count => app.installations = count),
+        app.getClassCount('_User').then(count => app.users = count)
+      );
+    }));
   },
 
   // Options should be a list containing a subset of