Intro
For the last release, I have to work on something larger and more impactful than anything I have done in the previous three releases. This blog will be separated into 3 other blogs, Release 0.4 - Planning, Release 0.4 - Progress, and Release 0.4 - Release.
In this part, I will talk about how I will solve those issues, and make them ready for Pull request.
Solving
Issue #2418
First I remove all unnecessary column, and add Service, staging, and production column. Then I remove all the rows. After I will add a loading message, so if the fetching takes time loading message will show first.
<td colspan="3">
<div class="px-2 py-4">
<h6 class="mb-0 text-lg" id="request-message">
<i class="fa-spin fas fa-hourglass-half px-2"></i>Loading...
</h6>
</div>
</td>
After that we need to setup a route to expose API status from telescope/src/api/status/src/services.js
to public.
service.router.get('/v1/status/status', (req, res) => {
check()
.then((status) => {
// This status response shouldn't be cached (we need current status info)
res.set('Cache-Control', 'no-store, max-age=0');
return res.json(status);
})
.catch((err) => res.status(500).json({ error: err.message }));
});
Now to get all the api status data we call <apiURL>/v1/status/status
.
Now we can create a script to fetch the data and put it into the table.
I create a file call serviceStatus.js
which contains script to fetch the data and process to put it into the table.
export default function getAllServicesStatus() {
fetch('/v1/status/status')
.then((res) => {
if (res.ok) return res.json();
const messageReport = requestMessageReport();
if (messageReport) {
messageReport.innerHTML = '';
const icon = document.createElement('i');
icon.className = 'fas fa-server px-2';
messageReport.appendChild(icon);
messageReport.innerHTML += `${res.status} Unable to get API status.`;
}
throw new Error('unable to get API status');
})
.then((results) => {
reportTbody().innerHTML = '';
results.forEach((result) => serviceRowFormat(result));
return setTimeout(getAllServicesStatus, 5000);
})
.catch((err) => console.error(err));
}
This function will handle all of the cases, first, we fetch the data, if the request-response is 200, return res.json()
and go to next then()
, in the next steps we removed the loading HTML, and replace by the row with the service name, service status staging, and service status production generated by serviceRowFormat(). After that, I return a timeout to recall the same function each 5 sec.
If this function fails when the fetch request is not 200, It prints an error message and throws an error. Also, the function will not recall itself in the next 5 sec.
Issue #2506
I first locate the card where avatar Author
is displayed. After that I add a HTML next to that which going to represent sha commit.
<p class="mb-0">
<a
href=""
title="User"
target="_blank"
id="latest-author-telescope"
class="text-capitalize"
> </a
>
<a
href=""
title="Commit"
target="_blank"
id="latest-author-commit-telescope"
class="font-monospace btn-link text-xs"
></a>
</>
Then I add an id for the location of the HTML. I did the same thing for satellite card.
After this we can get the data from the GitHub commit info and displayed to the HTML.
const commitURL = data[0].html_url;
const shortSha = data[0].sha.substr(0, 7);
document.getElementById(`latest-author-commit-${repo}`).innerHTML = shortSha;
document.getElementById(`latest-author-commit-${repo}`).title = shortSha;
document.getElementById(`latest-author-commit-${repo}`).href = commitURL;
Issue #113
For this issue, I will download every image from ict.senecacollege.ca. I first locate everywhere where it's still using ict.senecacollege.ca URL for the data by using the search feature in my IDE (search by https://ict.senecacollege.ca//~ipc144/pages/images
). Then I copy and paste each URL and download each image then paste to static/img
. After that I replace everywhere matching https://ict.senecacollege.ca//~ipc144/pages/images
to /img
using IDE it's a 1 click step.
Prepare for Pull Request
Issue #2418
I first do npm run dev
to run the check if everything is working fine. I do some testing by reducing the network speed for the loading to appear and replace by the service row when data got fetched. Then I also check if the fetch doesn't return a status of 200, I make sure it will show that error code and error message on the page.
After that I do a npm run prettier && npm run lint
to check the formatting.
After formatting pass, I commit my code.
Issue #2506
I first do npm run dev
to run the check if everything is working fine. I make sure the right commit is shown, and that when I click on the commit it opens up a page showing the latest commit.
After that, I do a npm run prettier && npm run lint
to check the formatting.
After formatting pass, I commit my code.
Issue #113
I first do yarn start
to run the check if everything is working fine. I check that every link is working fine. Also, do a yarn build && yarn serve
to build the project and check the build version that it doesn't have broken links.
After that, I commit my code.
Top comments (0)