Skip to content

Commit 1a85616

Browse files
iuiniuin
committed
dashboard update
1 parent 3e49a85 commit 1a85616

File tree

6 files changed

+187
-135
lines changed

6 files changed

+187
-135
lines changed

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@
3030
"@clr/ui": "^0.12.3-patch.2",
3131
"@webcomponents/custom-elements": "^1.0.0",
3232
"angular-in-memory-web-api": "^0.6.0",
33+
"angular2-highcharts": "^0.5.5",
3334
"core-js": "^2.5.4",
3435
"node-sass": "^4.9.2",
3536
"rxjs": "6.2.1",
@@ -42,7 +43,7 @@
4243
"@angular/platform-server": "^6.0.7",
4344
"@types/jasmine": "~2.8.0",
4445
"@types/jasminewd2": "^2.0.3",
45-
"@types/node": "^6.0.45",
46+
"@types/node": "^6.0.114",
4647
"jasmine-core": "~2.99.1",
4748
"jasmine-spec-reporter": "~4.2.1",
4849
"karma": "~1.7.1",

‎src/app/app.module.ts‎

Lines changed: 47 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
declare var require: any;
12
import { NgModule } from '@angular/core';
23
import { BrowserModule } from '@angular/platform-browser';
34
import { FormsModule } from '@angular/forms';
@@ -35,52 +36,52 @@ import { DashBoardComponent } from './layout/dashboard/dashboard.component';
3536

3637
import { ChartModule } from "angular2-highcharts";
3738
@NgModule({
38-
imports: [
39-
BrowserModule,
40-
FormsModule,
41-
CommonModule,
42-
BrowserAnimationsModule,
43-
ClarityModule,
44-
CoreModule,
45-
SharedModule,
46-
NavModule,
47-
// import HttpClientModule after BrowserModule.
48-
HttpClientModule,
49-
HttpClientXsrfModule.withOptions({
50-
cookieName: 'My-Xsrf-Cookie',
51-
headerName: 'My-Xsrf-Header',
52-
}),
39+
imports: [
40+
BrowserModule,
41+
FormsModule,
42+
CommonModule,
43+
BrowserAnimationsModule,
44+
ClarityModule,
45+
CoreModule,
46+
SharedModule,
47+
NavModule,
48+
// import HttpClientModule after BrowserModule.
49+
HttpClientModule,
50+
HttpClientXsrfModule.withOptions({
51+
cookieName: 'My-Xsrf-Cookie',
52+
headerName: 'My-Xsrf-Header',
53+
}),
5354

54-
// The HttpClientInMemoryWebApiModule module intercepts HTTP requests
55-
// and returns simulated server responses.
56-
// Remove it when a real server is ready to receive requests.
57-
HttpClientInMemoryWebApiModule.forRoot(
58-
InMemoryDataService, {
59-
dataEncapsulation: false,
60-
passThruUnknownUrl: true,
61-
put204: false // return entity after PUT/update
62-
}
63-
),
64-
ROUTING,
65-
ChartModule.forRoot(require('highcharts'))
66-
],
67-
declarations: [
68-
AppComponent,
69-
ConfigComponent,
70-
DownloaderComponent,
71-
HeroesComponent,
72-
MessagesComponent,
73-
UploaderComponent,
74-
PackageSearchComponent,
75-
DashBoardComponent,
76-
],
77-
providers: [
78-
AuthService,
79-
HttpErrorHandler,
80-
MessageService,
81-
{ provide: RequestCache, useClass: RequestCacheWithMap },
82-
httpInterceptorProviders
83-
],
84-
bootstrap: [AppComponent]
55+
// The HttpClientInMemoryWebApiModule module intercepts HTTP requests
56+
// and returns simulated server responses.
57+
// Remove it when a real server is ready to receive requests.
58+
HttpClientInMemoryWebApiModule.forRoot(
59+
InMemoryDataService, {
60+
dataEncapsulation: false,
61+
passThruUnknownUrl: true,
62+
put204: false // return entity after PUT/update
63+
}
64+
),
65+
ROUTING,
66+
ChartModule.forRoot(require('highcharts'))
67+
],
68+
declarations: [
69+
AppComponent,
70+
ConfigComponent,
71+
DownloaderComponent,
72+
HeroesComponent,
73+
MessagesComponent,
74+
UploaderComponent,
75+
PackageSearchComponent,
76+
DashBoardComponent,
77+
],
78+
providers: [
79+
AuthService,
80+
HttpErrorHandler,
81+
MessageService,
82+
{ provide: RequestCache, useClass: RequestCacheWithMap },
83+
httpInterceptorProviders
84+
],
85+
bootstrap: [AppComponent]
8586
})
8687
export class AppModule { }

‎src/app/layout/dashboard/dashboard.component.html‎

Lines changed: 62 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -8,24 +8,30 @@
88
<div class="card-block assets-min-height" [ngStyle]="{'height': alertBlock.clientHeight + 'px'}">
99
<div class="row">
1010
<div class="col-sm-12 col-md-4 auto-center">
11-
<div class="dashboard-header-item-inner">
12-
<span class="dashboard-header-item-text">365</span>
13-
<h4>Discovered</h4>
14-
<p class="p1">Assets</p>
11+
<div class="dashboard-widget">
12+
<div class="widget-left-item">365</div>
13+
<div class="widget-right-item">
14+
<div>Discovered</div>
15+
<p>Assets</p>
16+
</div>
1517
</div>
1618
</div>
1719
<div class="col-sm-12 col-md-4 split-line auto-center">
18-
<div class="dashboard-header-item-inner">
19-
<span class="dashboard-header-item-text is-warning">10</span>
20-
<h4>Unprotected</h4>
21-
<p class="p1">Assets</p>
20+
<div class="dashboard-widget">
21+
<div class="widget-left-item is-warning">10</div>
22+
<div class="widget-right-item">
23+
<div>Unprotected</div>
24+
<p>Assets</p>
25+
</div>
2226
</div>
2327
</div>
2428
<div class="col-sm-12 col-md-4 split-line auto-center">
25-
<div class="dashboard-header-item-inner">
26-
<span class="dashboard-header-item-text is-error">101</span>
27-
<h4>Failed</h4>
28-
<p class="p1">Assets</p>
29+
<div class="dashboard-widget">
30+
<div class="widget-left-item is-error">101</div>
31+
<div class="widget-right-item">
32+
<div>Failed</div>
33+
<p>Assets</p>
34+
</div>
2935
</div>
3036
</div>
3137
</div>
@@ -70,17 +76,21 @@ <h4>Failed</h4>
7076
<div class="col-sm-12 col-md-4">
7177
<div class="row">
7278
<div class="col-sm-12 auto-center">
73-
<div class="dashboard-header-item-inner">
74-
<span class="dashboard-header-item-text">2TB</span>
75-
<h4>Storage</h4>
76-
<p class="p1">Used</p>
79+
<div class="dashboard-widget">
80+
<div class="widget-left-item">2 TB</div>
81+
<div class="widget-right-item">
82+
<div>Storage</div>
83+
<p>Used</p>
84+
</div>
7785
</div>
7886
</div>
7987
<div class="col-sm-12 auto-center split-line-top">
80-
<div class="dashboard-header-item-inner">
81-
<span class="dashboard-header-item-text">5GB</span>
82-
<h4>Used</h4>
83-
<p class="p1">In Last Week</p>
88+
<div class="dashboard-widget">
89+
<div class="widget-left-item">50 GB</div>
90+
<div class="widget-right-item">
91+
<div>Used</div>
92+
<p>In Last Week</p>
93+
</div>
8494
</div>
8595
</div>
8696
<div class="col-sm-12 auto-center split-line-top">
@@ -95,7 +105,7 @@ <h4>Used</h4>
95105
<table class="table table-noborder">
96106
<thead>
97107
<tr>
98-
<th>Location</th>
108+
<th class="left">Location</th>
99109
<th>Storage Used</th>
100110
<th>% Full</th>
101111
<th>Space Left</th>
@@ -104,7 +114,7 @@ <h4>Used</h4>
104114
</thead>
105115
<tbody>
106116
<tr>
107-
<td>GSAN</td>
117+
<td class="left">GSAN</td>
108118
<td>
109119
<div class="progress-block">
110120
<div class="progress-static error">
@@ -117,7 +127,7 @@ <h4>Used</h4>
117127
<td>10 days</td>
118128
</tr>
119129
<tr>
120-
<td>DD1</td>
130+
<td class="left">DD1</td>
121131
<td>
122132
<div class="progress-block">
123133
<div class="progress-static danger">
@@ -130,7 +140,7 @@ <h4>Used</h4>
130140
<td>300 days</td>
131141
</tr>
132142
<tr>
133-
<td>DD2</td>
143+
<td class="left">DD2</td>
134144
<td>
135145
<div class="progress-block">
136146
<div class="progress-static success">
@@ -167,7 +177,8 @@ <h4>Used</h4>
167177
<div class="col-sm-12 col-md-4">
168178
<div class="card">
169179
<div class="card-header">
170-
Alerts | All
180+
Alerts | All (Last 24 hours)
181+
<span class="card-header-right-text">View All</span>
171182
</div>
172183
<div class="card-block">
173184
<div class="card-text">
@@ -177,26 +188,33 @@ <h4>Used</h4>
177188
<div class="col-sm-4 auto-center">
178189
<div class="select">
179190
<select id="selects_1">
180-
<option>1</option>
181-
<option>2</option>
182-
<option>3</option>
183-
<option>4</option>
184-
<option>50000000</option>
191+
<option>All Alerts</option>
192+
<option>Failed Alerts</option>
193+
<option>Others</option>
185194
</select>
186195
</div>
187196
</div>
188197
<div class="col-sm-4 auto-center">
189-
<div class="dashboard-header-item-inner">
190-
<span class="dashboard-header-item-text is-warning">10</span>
191-
<h4>Alerts</h4>
192-
<p class="p1">Critcal</p>
198+
<div class="dashboard-widget">
199+
<div class="widget-left-item">
200+
<clr-icon shape="times-circle" class="is-solid is-error" size="26"></clr-icon>
201+
1024
202+
</div>
203+
<div class="widget-right-item">
204+
<div>Alerts</div>
205+
<p>Critcal</p>
206+
</div>
193207
</div>
194208
</div>
195209
<div class="col-sm-4 auto-center">
196-
<div class="dashboard-header-item-inner">
197-
<span class="dashboard-header-item-text is-warning">10</span>
198-
<h4>Alerts</h4>
199-
<p class="p1">Warning</p>
210+
<div class="dashboard-widget">
211+
<div class="widget-left-item">
212+
<clr-icon shape="warning-standard" class="is-solid is-warning" size="26"></clr-icon>
213+
27</div>
214+
<div class="widget-right-item">
215+
<div>Alerts</div>
216+
<p>Warning</p>
217+
</div>
200218
</div>
201219
</div>
202220
</div>
@@ -247,33 +265,33 @@ <h4>Alerts</h4>
247265
</thead>
248266
<tbody>
249267
<tr>
250-
<td>AIX File System</td>
268+
<td class="left">AIX File System</td>
251269
<td>32</td>
252270
<td>14931.17</td>
253271
</tr>
254272
<tr>
255-
<td>AIX File System</td>
273+
<td class="left">AIX File System</td>
256274
<td>32</td>
257275
<td>14931.17</td>
258276
</tr>
259277
<tr>
260-
<td>AIX File System</td>
278+
<td class="left">AIX File System</td>
261279
<td>32</td>
262280
<td>14931.17</td>
263281
</tr>
264282
<tr>
265-
<td>AIX File System</td>
283+
<td class="left">AIX File System</td>
266284
<td>32</td>
267285
<td>14931.17</td>
268286
</tr>
269287
<tr>
270-
<td>AIX File System</td>
288+
<td class="left">AIX File System</td>
271289
<td>32</td>
272290
<td>14931.17</td>
273291
</tr>
274292

275293
<tr>
276-
<td style="border-top: 1px solid #e4e4e4; font-weight: bold">Total</td>
294+
<td style="border-top: 1px solid #e4e4e4; font-weight: bold" class="left">Total</td>
277295
<td style="border-top: 1px solid #e4e4e4; font-weight: bold">64</td>
278296
<td style="border-top: 1px solid #e4e4e4; font-weight: bold">29962.34</td>
279297
</tr>

0 commit comments

Comments
 (0)