Release 0.4 Progress

Tags: opensource
Published: 2021-12-07 02:04:50

## 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](https://github.com/Seneca-CDOT/telescope/issues/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.
```html
<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>
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/17w3sjsng1wc7zzyf6fd.png)
After that we need to setup a route to expose API status from `telescope/src/api/status/src/services.js` to public.
```js
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.
```js
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. 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n33ld6nqgis5vh0vqhzj.png)
 
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. 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4vrqz4a1ho62465i2hx5.png)

### Issue [#2506](https://github.com/Seneca-CDOT/telescope/issues/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.
```html
<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.
```js
  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](https://github.com/Seneca-ICTOER/IPC144/issues/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](https://github.com/Seneca-CDOT/telescope/issues/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](https://github.com/Seneca-CDOT/telescope/issues/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](https://github.com/Seneca-ICTOER/IPC144/issues/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.