@@ -45,6 +45,15 @@ let CloningNote = ({ app, clone_status, clone_progress }) => {
45
45
return < div > Cloning is { progress } % complete</ div >
46
46
} ;
47
47
48
+ let CountsSection = ( props ) => {
49
+ return (
50
+ < div className = { props . className } >
51
+ < div className = { styles . section } > { props . title } </ div >
52
+ { props . children }
53
+ </ div >
54
+ ) ;
55
+ } ;
56
+
48
57
let Metric = ( props ) => {
49
58
return (
50
59
< div className = { styles . count } >
@@ -54,20 +63,46 @@ let Metric = (props) => {
54
63
) ;
55
64
} ;
56
65
57
- let AppCard = ( {
58
- app,
59
- icon,
60
- } ) => < li onClick = { ( ) => history . pushState ( null , html `/apps/${ app . slug } /browser` ) } >
61
- { icon ? < a className = { styles . icon } > < img src = { icon } /> </ a > : null }
62
- < div className = { styles . details } >
63
- < a className = { styles . appname } > { app . name } </ a >
64
- { app . is_cloning ? < CloningNote
65
- app = { app }
66
- clone_status = { app . clone_status }
67
- clone_progress = { app . clone_progress } /> :
68
- < div > Server version: < span className = { styles . ago } > { app . enabledFeatures . serverVersion || 'unknown' } </ span > </ div > }
69
- </ div >
70
- </ li >
66
+ let AppCard = ( props ) => {
67
+ let sharing = null ;
68
+ if ( props . app . collabInfo ) {
69
+ if ( props . app . isOwner ( ) ) {
70
+ sharing = 'shared with ' + pluralize ( props . app . collaboratorCount , 'person' , 'people' ) ;
71
+ } else {
72
+ sharing = html `shared by ${ props . app . owner } ` ;
73
+ }
74
+ }
75
+ return (
76
+ < li onClick = { ( ) => history . pushState ( null , html `/apps/${ props . app . slug } /browser` ) } >
77
+ < a className = { styles . icon } >
78
+ { props . icon ? < img src = { props . icon } /> : < Icon width = { 56 } height = { 56 } name = 'blank-app-outline' fill = '#1E384D' /> }
79
+ </ a >
80
+ < CountsSection className = { styles . plan } title = 'Current plan' >
81
+ < Metric number = { dash ( props . app . requestLimit ) } label = 'requests/s' />
82
+ < Metric number = { dash ( props . app . requestLimit , Math . floor ( props . app . requestLimit / 20 ) ) } label = 'background job' />
83
+ < Metric number = { dash ( props . app . requestLimit , '$' + ( props . app . requestLimit - 30 ) * 10 ) } label = 'monthly' />
84
+ < a href = { html `/apps/${ props . app . slug } /settings` } className = { styles . edit } onClick = { ( e ) => {
85
+ e . stopPropagation ( ) ;
86
+ history . pushState ( null , html `/apps/${ props . app . slug } /settings` ) ;
87
+ } } > Edit</ a >
88
+ </ CountsSection >
89
+ < CountsSection className = { styles . glance } title = 'At a glance' >
90
+ < Metric number = { dash ( props . app . requests , prettyNumber ( props . app . requests ) ) } label = 'requests' />
91
+ < Metric number = { dash ( props . app . users , prettyNumber ( props . app . users ) ) } label = 'total users' />
92
+ < Metric number = { dash ( props . app . installations , prettyNumber ( props . app . installations ) ) } label = 'total installations' />
93
+ </ CountsSection >
94
+ < div className = { styles . details } >
95
+ < a className = { styles . appname } > { props . app . name } </ a >
96
+ { props . app . is_cloning ? < CloningNote
97
+ app = { props . app }
98
+ clone_status = { props . app . clone_status }
99
+ clone_progress = { props . app . clone_progress } /> :
100
+ < div > Created < span className = { styles . ago } > { howLongAgo ( props . app . createdAt ) } </ span > </ div > }
101
+ </ div >
102
+ { sharing }
103
+ </ li >
104
+ )
105
+ } ;
71
106
72
107
export default class AppsIndex extends React . Component {
73
108
constructor ( ) {
0 commit comments