diff --git a/dashboard/Apps/AppsIndex.react.js b/dashboard/Apps/AppsIndex.react.js index a27fd11032..2cd60ab61d 100644 --- a/dashboard/Apps/AppsIndex.react.js +++ b/dashboard/Apps/AppsIndex.react.js @@ -45,14 +45,11 @@ let CloningNote = ({ app, clone_status, clone_progress }) => { return
Cloning is {progress}% complete
}; -let CountsSection = (props) => { - return ( -
-
{props.title}
- {props.children} -
- ); -}; +let CountsSection = ({ className, title, children }) => +
+
{title}
+ {children} +
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 ( -
  • history.pushState(null, html`/apps/${props.app.slug}/browser`)}> - - {props.icon ? : } - - - - - - { - e.stopPropagation(); - history.pushState(null, html`/apps/${props.app.slug}/settings`); - }}>Edit - - - - - - -
    - {props.app.name} - {props.app.is_cloning ? : -
    Created {howLongAgo(props.app.createdAt)}
    } -
    - {sharing} -
  • - ) -}; +let AppCard = ({ + app, + icon, +}) =>
  • history.pushState(null, html`/apps/${app.slug}/browser`)}> + {icon ? : null} + + + + +
    + {app.name} +
    Server version: {app.enabledFeatures.serverVersion || 'unknown'}
    +
    +
  • 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(); }); } diff --git a/dashboard/Apps/AppsIndex.scss b/dashboard/Apps/AppsIndex.scss index 1a68c1b996..9ceaaf6b29 100644 --- a/dashboard/Apps/AppsIndex.scss +++ b/dashboard/Apps/AppsIndex.scss @@ -105,7 +105,7 @@ margin: 14px 0; padding: 0 9px; height: 74px; - + &:hover{ background: #172C3B; } @@ -124,16 +124,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; @@ -153,29 +151,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 { @@ -200,6 +177,10 @@ font-size: 11px; } +.serverVersion { + @include ellipsis(); +} + .edit { @include DIN17Font; position: absolute; diff --git a/lib/AppsManager.js b/lib/AppsManager.js index 60bb2caecc..4b2001ef8b 100644 --- a/lib/AppsManager.js +++ b/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