Skip to content

Commit 8030cde

Browse files
imlucasimlucas
committed
Merge pull request #46 from 10gen/INT-141
feature(collection): INT-141 Show collection stats
2 parents 29817ee + b0b93f7 commit 8030cde

File tree

10 files changed

+125
-56
lines changed

10 files changed

+125
-56
lines changed

‎scout-style/10strap.less‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ hr.inverse {
5656
code {
5757
font-family: Menlo, monospace;
5858
color: @gray1;
59-
background-color: @gray6; // @worldhack: was @gray8
59+
background-color: @gray7;
6060
}
6161

6262
input,

‎scout-style/index.less‎

Lines changed: 47 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@
44
@import "bootstrap";
55

66
// Configuration
7-
@import "./variables.less";
7+
// @import "./variables.less";
8+
@octicons-font-path: "fonts";
89

910
// Tweaks to bootstrap
1011
@import "./10strap.less";
@@ -50,8 +51,6 @@ html, body{
5051
}
5152
}
5253

53-
54-
5554
#statusbar {
5655
background: 0 0;
5756
position: fixed;
@@ -60,7 +59,6 @@ html, body{
6059
right: 0;
6160
z-index: 1020;
6261

63-
6462
.progress {
6563
position: fixed;
6664
top: 0;
@@ -71,6 +69,7 @@ html, body{
7169
z-index: 2000;
7270
border-radius: 0;
7371
transition: height 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
72+
7473
.progress-bar {
7574
background-color: @component-active-bg;
7675
}
@@ -80,15 +79,14 @@ html, body{
8079
.spinner-circles {
8180
width: 40px;
8281
height: 40px;
83-
8482
position: relative;
8583
margin: 40px auto;
8684

8785
.circle-1, .circle-2 {
8886
width: 100%;
8987
height: 100%;
9088
border-radius: 50%;
91-
background-color: @brand-primary;
89+
background-color: @green2;
9290
opacity: 0.6;
9391
position: absolute;
9492
top: 0;
@@ -120,6 +118,48 @@ html, body{
120118
}
121119

122120

123-
// styles for demo
124121

122+
// component styles
123+
.collection-stats-holder {
124+
position: absolute;
125+
right: 20px;
126+
}
127+
.collection-stats {
128+
float: left;
129+
font-weight: 200;
130+
list-style: none;
131+
padding: 0 30px 0 0;
132+
margin: 11px 30px 0 0;
133+
border-right: 1px solid @gray7;
134+
135+
&:last-child {
136+
border-right: none;
137+
padding: 0;
138+
margin: 11px 0 0 0;
139+
}
140+
}
141+
.collection-stats-item {
142+
display: inline-block;
143+
margin-right: 10px;
125144

145+
&:last-child {
146+
margin-right: 0;
147+
}
148+
}
149+
.collection-stats-primary-label {
150+
text-transform: uppercase;
151+
letter-spacing: 1px;
152+
font-size: 12px;
153+
color: @gray3;
154+
}
155+
.collection-stats-primary-value {
156+
font-size: 36px;
157+
line-height: 36px;
158+
}
159+
.collection-stats-label {
160+
font-size: 11px;
161+
color: @gray3;
162+
}
163+
.collection-stats-value {
164+
font-size: 14px;
165+
}

‎scout-style/sidebar.less‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
@sidebar-bg: @pw;
2+
@sidebar-border: @gray7;
3+
@sidebar-width: 220px;
4+
15
.sidebar {
26
border-radius: 0;
37
position: fixed;
@@ -20,7 +24,7 @@
2024
padding: 5px 5px 5px 30px;
2125
height: auto;
2226
background: @pw;
23-
border-color: @gray6;
27+
// border-color: @gray6;
2428
}
2529
input[type=search] {
2630
border-radius: 18px;

‎scout-style/variables.less‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
//
22
// Variables
33
// --------------------------------------------------
4-
@sidebar-bg: @pw;
5-
@sidebar-border: @gray6; // @worldhack: was @gray7
6-
@sidebar-width: 220px;
4+
// @sidebar-bg: @pw;
5+
// @sidebar-border: @gray6; // @worldhack: was @gray7
6+
// @sidebar-width: 220px;
77

88
@octicons-font-path: "fonts";
99
//== Colors

‎scout-ui/src/collection-stats/index.jade‎

Lines changed: 21 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,21 @@
1-
div.row.hidden
2-
.col-md-6
3-
dl.dl-horizontal
4-
dt # documents
5-
dd(data-hook='document_count')
6-
dt total document size
7-
dd(data-hook='document_size')
8-
dt average document size
9-
dd(data-hook='document_size_average')
10-
.col-md-6
11-
dl.dl-horizontal
12-
dt # indexes
13-
dd(data-hook='index_count')
14-
dt total index size
15-
dd(data-hook='index_size')
16-
dt average index size
17-
dd(data-hook='index_size_average')
1+
div.collection-stats-holder
2+
ul.collection-stats
3+
li.collection-stats-item
4+
.collection-stats-primary-label Documents
5+
.collection-stats-primary-value(data-hook='document_count')
6+
li.collection-stats-item
7+
.collection-stats-label total size
8+
.collection-stats-value(data-hook='document_size')
9+
li.collection-stats-item
10+
.collection-stats-label avg. size
11+
.collection-stats-value(data-hook='document_size_average')
12+
ul.collection-stats
13+
li.collection-stats-item
14+
.collection-stats-primary-label Indexes
15+
.collection-stats-primary-value(data-hook='index_count')
16+
li.collection-stats-item
17+
.collection-stats-label total size
18+
.collection-stats-value(data-hook='index_size')
19+
li.collection-stats-item
20+
.collection-stats-label avg. size
21+
.collection-stats-value(data-hook='index_size_average')

‎scout-ui/src/field-list/index.less‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99

1010
hr.field-divider {
1111
margin-bottom: 12px;
12-
border-top: 1px solid @gray6; // @worldhack: was @gray7
12+
border-top: 1px solid @gray7;
1313
}
1414

1515
.schema-field-list {

‎scout-ui/src/home/collection.jade‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
.collection-view
2-
.header
3-
.container-fluid
4-
h3(data-hook='name')
5-
.row
6-
.col-md-12
7-
div(data-hook='stats-subview')
8-
.row
9-
.col-md-12
10-
div(data-hook='refine-bar')
2+
.sampling-status
3+
span This report is based on a sample of 1000 documents. #[a(href='#') Learn More]
4+
header
5+
.row
6+
.col-md-6
7+
h1(data-hook='name')
8+
.col-md-6
9+
div(data-hook='stats-subview')
10+
div(data-hook='refine-bar')
1111
.column-container
1212
.column.main
1313
div(data-hook='fields-subview')

‎scout-ui/src/home/index.less‎

Lines changed: 30 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -53,24 +53,45 @@
5353
}
5454

5555
.collection-view {
56+
.sampling-status {
57+
position: absolute;
58+
margin: 3px 0 0 6px;
59+
z-index: 2;
5660

57-
@header-height: 120px;
61+
span {
62+
font-size: 13px;
63+
font-weight: 200;
5864

59-
.header {
60-
padding-left: 20px;
61-
display: flex;
65+
a {
66+
font-weight: normal;
67+
}
68+
}
69+
}
70+
header {
71+
padding: 12px 20px;
6272
position: relative;
63-
z-index: 10;
64-
height: @header-height;
73+
z-index: 1;
6574
}
75+
.refine-view-container {
76+
background: @gray8;
77+
padding: 12px 20px;
78+
position: relative;
79+
z-index: 1;
6680

81+
input.form-control.input-sm {
82+
width: 90%;
83+
background: @pw;
84+
height: 28px;
85+
margin-right: 10px;
86+
}
87+
}
6788
.column-container {
6889
padding-right: 20px;
6990
display: flex;
7091
overflow: hidden;
7192
height: 100vh;
72-
margin-top: -@header-height;
73-
padding-top: @header-height;
93+
margin-top: -168px; // total computed header + .refine-view-container height
94+
padding-top: 168px; // total computed header + .refine-view-container height
7495
position: relative;
7596
width: 100%;
7697
}
@@ -85,6 +106,7 @@
85106
}
86107

87108
.main {
109+
padding: 0 0 0 20px;
88110
flex: 1;
89111
}
90112

‎scout-ui/src/minicharts/index.less‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
@mc-blue4: lighten(@mc-blue0, 30%);
77
@mc-blue5: lighten(@mc-blue0, 37.5%);
88

9-
@mc-bg: @gray6; // @worldhack: was #F2F4F5
9+
@mc-bg: @gray8;
1010
@mc-fg: @mc-blue0;
1111

1212
div.minichart.unique {
@@ -66,7 +66,7 @@ svg.minichart {
6666
font-size: 10px;
6767

6868
text {
69-
fill: @gray2; // @worldhack: was @gray4
69+
fill: @gray4;
7070
font-weight: bold;
7171
}
7272

@@ -129,11 +129,11 @@ svg.minichart {
129129

130130
.legend {
131131
text {
132-
fill: @gray4; // @worldhack: was @gray5
132+
fill: @gray5;
133133
}
134134

135135
line {
136-
stroke: @gray6; // @worldhack: was @gray7
136+
stroke: @gray7;
137137
}
138138
shape-rendering: crispEdges;
139139
}

‎scout-ui/src/refine-view/index.jade‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
.refine-view-container
2-
form
3-
.input-group(data-hook='refine-input-group')
4-
input#refineInput.form-control(type='text', data-hook='refine-input')
5-
span.input-group-btn
6-
button.btn.btn-default(type='button', data-hook='refine-button') Refine
2+
form.form-inline
3+
div(data-hook='refine-input-group')
4+
input#refineInput.form-control.input-sm(type='text', data-hook='refine-input')
5+
button.btn.btn-default.btn-sm(type='button', data-hook='refine-button') Refine

0 commit comments

Comments
 (0)