Release 0.4 Progress

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"
                        >&nbsp;</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.