Skip to content

Commit 4d9ec83

Browse files
piyookpiyook
authored
Merge pull request #36 from piyook/chore/update-dashboard
chore(): update dashboard page
2 parents 95b922c + 28def64 commit 4d9ec83

File tree

6 files changed

+532
-116
lines changed

6 files changed

+532
-116
lines changed

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ npm start
6161

6262
The list of available APIs can be viewed on localhost:8000/api by default but this can be customised - see later.
6363

64-
A list of all endpoints can be viewed on http://localhost:8000/.
64+
A list of all endpoints can be viewed on the mock server dashboard at http://localhost:8000/.
6565

6666
The project has been set-up with demo endpoints that can be removed or modified as needed.
6767

‎cypress/e2e/server-page-spec.cy.ts‎

Lines changed: 28 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,35 @@
11
describe('Server page contains expected information', () => {
2-
it('passes', () => {
3-
const expectedEndpoints = [
4-
'/api/bikes',
5-
'/api/cats',
6-
'/api/images',
7-
'/api/json',
8-
'/api/lambda',
9-
'/api/markdown',
10-
'/api/posts',
11-
'/api/users',
12-
'/api/videos',
13-
'/api/error',
14-
];
15-
cy.visit('/');
16-
cy.get('h1').contains('Running');
2+
it('passes', () => {
3+
const expectedEndpoints = [
4+
'/api/bikes',
5+
'/api/cats',
6+
'/api/images',
7+
'/api/json',
8+
'/api/lambda',
9+
'/api/markdown',
10+
'/api/posts',
11+
'/api/users',
12+
'/api/videos',
13+
'/api/error',
14+
];
15+
cy.visit('/');
16+
cy.get('[cy-data="server_status"]').contains('Running');
1717

18-
cy.get('h3').contains('Server Address');
19-
cy.get('h3').contains('Server Port');
20-
cy.get('h3').contains('Server URL Prefix');
21-
cy.get('h3').contains('API endpoints');
18+
cy.get('[cy-data="server_address"]').contains('Server Address');
19+
cy.get('[cy-data="server_port"]').contains('Server Port');
20+
cy.get('[cy-data="server_prefix"]').contains('Server URL Prefix');
21+
cy.get('[cy-data="server_label"]').contains('API endpoints*');
2222

23-
cy.get('[cy-data="server_address"]').contains('localhost');
24-
cy.get('[cy-data="server_port"]').contains('8000');
25-
cy.get('[cy-data="url_prefix"]').contains('api');
23+
cy.get('[cy-data="server_address"]').contains('localhost');
24+
cy.get('[cy-data="server_port"]').contains('8000');
25+
cy.get('[cy-data="url_prefix"]').contains('api');
2626

27-
const endpoints = cy.get('[cy-data="endpoint"]');
27+
const endpoints = cy.get('[cy-data="endpoint"]');
2828

29-
endpoints.should('have.length', expectedEndpoints.length);
29+
endpoints.should('have.length', expectedEndpoints.length);
3030

31-
endpoints.each((endpoint) => {
32-
expect(expectedEndpoints).to.include(endpoint.text());
33-
});
34-
});
31+
endpoints.each((endpoint) => {
32+
expect(expectedEndpoints).to.include(endpoint.text());
33+
});
34+
});
3535
});

‎images/image.png‎

70.5 KB
Loading

‎images/logs.png‎

17.1 KB
Loading

‎src/utilities/log-page.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -28,10 +28,10 @@ const createHtml = () => {
2828
<header>
2929
<title>API Request Log</title>
3030
</header>
31-
<body style="margin: 0px; background-color: #00200B; display: flex; flex-direction: column; justify-content: center; align-items: center; min-height:100vh; font-family: sans-serif;">
31+
<body style="margin: 0px; background: linear-gradient(120deg, #20232a 0%, #23272F 70%, #0d1117 100%); display: flex; flex-direction: column; justify-content: center; align-items: center; min-height:100vh; font-family: sans-serif;">
3232
<h2 style="color:white" data-cy="logger-title">API Requests Made</h2>
3333
<h3 style="color:white">File can be viewed in /src/logs folder in container or local machine</h3>
34-
<h5 style="color:grey; margin-top:-10px;">LOG_REQUESTS env var must be set to 'ON' to log requests</h5>
34+
<h5 style="text-align: center; color:grey; margin-top:-10px;">LOG_REQUESTS env var must be set to 'ON' to log requests <br/>AND the logger function must be implemented in the api.ts file for that endpoint</h5>
3535
<div class="json-container" style="width: 100%; padding:20px; box-sizing: border-box;">
3636
${prettyPrintJson.toHtml(JSON.parse(readLogs()), { indent: 4, lineNumbers: true })}
3737
</div>
@@ -69,7 +69,7 @@ ol.json-lines >li::marker { font-family: system-ui, sans-serif; font-weight: nor
6969
7070
7171
/* Dark Mode */
72-
.json-container { background-color: #00200B; }
72+
.json-container { background-color: #20232a; }
7373
.json-key { color: indianred; }
7474
.json-string { color: khaki}
7575
.json-number { color: deepskyblue; }
@@ -81,8 +81,8 @@ ol.json-lines >li::marker { font-family: system-ui, sans-serif; font-weight: nor
8181
a.json-link:hover { color: violet; }
8282
a.json-link:active { color: slategray; }
8383
ol.json-lines >li::marker { color: silver; }
84-
ol.json-lines >li:nth-child(odd) { background-color: #293829; }
85-
ol.json-lines >li:nth-child(even) { background-color: #354135; }
84+
ol.json-lines >li:nth-child(odd) { background-color:rgb(67, 67, 67); }
85+
ol.json-lines >li:nth-child(even) { background-color:rgb(40, 40, 40); }
8686
ol.json-lines >li:hover { background-color: dimgray; }
8787
</style>
8888
</html>

0 commit comments

Comments
 (0)