Skip to content

Commit 003a2af

Browse files
syntrydysyntrydy
committed
feat(admin-ui): show active users page on dashboard #43 
1 parent ae8b1e1 commit 003a2af

File tree

5 files changed

+110
-68
lines changed

5 files changed

+110
-68
lines changed

‎admin-ui/app/redux/sagas/MauSaga.js

+6-3
Original file line numberDiff line numberDiff line change
@@ -54,8 +54,11 @@ function buildEntry(el) {
5454
let entry = new Object()
5555
entry['month'] = el.month
5656
entry['mau'] = el.monthly_active_users
57-
entry['cc_at'] = el.token_count_per_granttype.client_credentials.access_token
58-
entry['ac_at'] = el.token_count_per_granttype.authorization_code.access_token
59-
entry['ac_id'] = el.token_count_per_granttype.authorization_code.id_token
57+
entry['client_credentials_access_token_count'] =
58+
el.token_count_per_granttype.client_credentials.access_token
59+
entry['authz_code_access_token_count'] =
60+
el.token_count_per_granttype.authorization_code.access_token
61+
entry['authz_code_idtoken_count'] =
62+
el.token_count_per_granttype.authorization_code.id_token
6063
return entry
6164
}

‎admin-ui/app/routes/Dashboards/ActiveUsersGraph.js

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import React from 'react'
2+
import {
3+
XAxis,
4+
YAxis,
5+
Tooltip,
6+
LineChart,
7+
Line,
8+
Legend,
9+
CartesianGrid,
10+
ResponsiveContainer,
11+
} from 'recharts'
12+
import { useTranslation } from 'react-i18next'
13+
14+
function ActiveUsersGraph({ data }) {
15+
const { t } = useTranslation()
16+
return (
17+
<ResponsiveContainer className="mau" width="80%" height={350}>
18+
<LineChart height={400} data={data}>
19+
<XAxis dataKey="month" />
20+
<YAxis />
21+
<CartesianGrid stroke="#eee" strokeDasharray="5 5" />
22+
<Line
23+
name={t('fields.monthly_active_users')}
24+
type="monotone"
25+
dataKey="mau"
26+
stroke="#8884d8"
27+
/>
28+
<Tooltip />
29+
<Legend />
30+
</LineChart>
31+
</ResponsiveContainer>
32+
)
33+
}
34+
35+
export default ActiveUsersGraph

‎admin-ui/app/routes/Dashboards/CustomLineChart.js

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import React from 'react'
2+
import {
3+
LineChart,
4+
XAxis,
5+
YAxis,
6+
Line,
7+
CartesianGrid,
8+
Legend,
9+
ResponsiveContainer,
10+
} from 'recharts'
11+
function CustomLineChart({ data }) {
12+
return (
13+
<ResponsiveContainer className="bar" width="100%" height={400}>
14+
<LineChart width={400} height={400} data={data}>
15+
<XAxis dataKey="month" />
16+
<YAxis />
17+
<CartesianGrid stroke="#eee" strokeDasharray="5 5" />
18+
<Line
19+
name="Client credentials access token"
20+
type="monotone"
21+
dataKey="client_credentials_access_token_count"
22+
stroke="#8884d8"
23+
/>
24+
<Line
25+
name="Authorization code access token"
26+
type="monotone"
27+
dataKey="authz_code_access_token_count"
28+
stroke="#82ca9d"
29+
/>
30+
<Line
31+
name="Authorization code id token"
32+
type="monotone"
33+
dataKey="authz_code_idtoken_count"
34+
stroke="#00C9FF"
35+
/>
36+
<Legend />
37+
</LineChart>
38+
</ResponsiveContainer>
39+
)
40+
}
41+
42+
export default CustomLineChart

‎admin-ui/app/routes/Dashboards/CustomPieGraph.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -25,9 +25,9 @@ function CustomPieGraph({ data }) {
2525
<YAxis />
2626
<Tooltip />
2727
<Legend />
28-
<Bar dataKey="cc_at" fill="#00C9FF" />
29-
<Bar dataKey="ac_at" fill="#82ca9d" />
30-
<Bar dataKey="ac_id" fill="#92FE9D" />
28+
<Bar dataKey="client_credentials_access_token_count" fill="#00C9FF" />
29+
<Bar dataKey="authz_code_access_token_count" fill="#82ca9d" />
30+
<Bar dataKey="authz_code_idtoken_count" fill="#92FE9D" />
3131
</BarChart>
3232
</ResponsiveContainer>
3333
)

‎admin-ui/app/routes/Dashboards/DashboardPage.js

+24-62
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
import React, { useState, useEffect } from 'react'
2-
import { addMonths, subMonths } from 'date-fns'
2+
import { subMonths } from 'date-fns'
33
import moment from 'moment'
44
import CustomPieGraph from './CustomPieGraph'
5+
import CustomLineChart from './CustomLineChart'
6+
import ActiveUsersGraph from './ActiveUsersGraph'
57
import DatePicker from 'react-datepicker'
68
import 'react-datepicker/dist/react-datepicker.css'
79
import GluuLoader from '../Apps/Gluu/GluuLoader'
@@ -25,24 +27,27 @@ import {
2527
STAT_READ,
2628
STAT_JANS_READ,
2729
} from '../../utils/PermChecker'
28-
import {
29-
LineChart,
30-
XAxis,
31-
YAxis,
32-
Line,
33-
CartesianGrid,
34-
Tooltip,
35-
Legend,
36-
ResponsiveContainer,
37-
} from 'recharts'
3830
import { useTranslation } from 'react-i18next'
3931
import { connect } from 'react-redux'
4032

4133
function DashboardPage({ statData, permissions, loading, dispatch }) {
42-
statData.push({ month: 202201, mau: 5, cc_at: 68, ac_at: 785, ac_id: 567 })
34+
statData.push({
35+
month: 202111,
36+
mau: 5,
37+
client_credentials_access_token_count: 68,
38+
authz_code_access_token_count: 785,
39+
authz_code_idtoken_count: 567,
40+
})
41+
statData.push({
42+
month: 202112,
43+
mau: 5,
44+
client_credentials_access_token_count: 28,
45+
authz_code_access_token_count: 75,
46+
authz_code_idtoken_count: 257,
47+
})
4348
const { t } = useTranslation()
44-
const [startDate, setStartDate] = useState(subMonths(new Date(), 2))
45-
const [endDate, setEndDate] = useState(addMonths(new Date(), 2))
49+
const [startDate, setStartDate] = useState(subMonths(new Date(), 3))
50+
const [endDate, setEndDate] = useState(new Date())
4651
const userAction = {}
4752
const options = {}
4853
useEffect(() => {
@@ -66,9 +71,9 @@ function DashboardPage({ statData, permissions, loading, dispatch }) {
6671
let newEntry = new Object()
6772
newEntry['month'] = parseInt(getYearMonth(new Date(ele)), 10)
6873
newEntry['mau'] = 0
69-
newEntry['cc_at'] = 0
70-
newEntry['ac_at'] = 0
71-
newEntry['ac_id'] = 0
74+
newEntry['client_credentials_access_token_count'] = 0
75+
newEntry['authz_code_access_token_count'] = 0
76+
newEntry['authz_code_idtoken_count'] = 0
7277
stat.push(newEntry)
7378
}
7479
}
@@ -169,57 +174,14 @@ function DashboardPage({ statData, permissions, loading, dispatch }) {
169174
<FormGroup row />
170175
<FormGroup row />
171176
<FormGroup row>
172-
<ResponsiveContainer className="mau" width="80%" height={350}>
173-
<LineChart height={400} data={doDataAugmentation(statData)}>
174-
<XAxis dataKey="month" />
175-
<YAxis />
176-
<CartesianGrid stroke="#eee" strokeDasharray="5 5" />
177-
<Line
178-
name={t('fields.monthly_active_users')}
179-
type="monotone"
180-
dataKey="mau"
181-
stroke="#8884d8"
182-
/>
183-
<Tooltip />
184-
<Legend />
185-
</LineChart>
186-
</ResponsiveContainer>
177+
<ActiveUsersGraph data={doDataAugmentation(statData)} />
187178
</FormGroup>
188179
<FormGroup row>
189180
<Col sm={6}>
190181
<CustomPieGraph data={statData} />
191182
</Col>
192183
<Col sm={6}>
193-
<ResponsiveContainer className="bar" width="100%" height={400}>
194-
<LineChart
195-
width={400}
196-
height={400}
197-
data={doDataAugmentation(statData)}
198-
>
199-
<XAxis dataKey="month" />
200-
<YAxis />
201-
<CartesianGrid stroke="#eee" strokeDasharray="5 5" />
202-
<Line
203-
name="Client credentials access token"
204-
type="monotone"
205-
dataKey="cc_at"
206-
stroke="#8884d8"
207-
/>
208-
<Line
209-
name="Authorization code access token"
210-
type="monotone"
211-
dataKey="ac_at"
212-
stroke="#82ca9d"
213-
/>
214-
<Line
215-
name="Authorization code id token"
216-
type="monotone"
217-
dataKey="ac_id"
218-
stroke="#00C9FF"
219-
/>
220-
<Legend />
221-
</LineChart>
222-
</ResponsiveContainer>
184+
<CustomLineChart data={doDataAugmentation(statData)} />
223185
</Col>
224186
</FormGroup>
225187
<FormGroup row>

0 commit comments

Comments
 (0)