Release0.4 - Release
Published: 2021-12-11 01:59:35

The issues [2519](https://github.com/Seneca-CDOT/telescope/issues/2519) has completed, and it closed by PR [2556](https://github.com/Seneca-CDOT/telescope/pull/2556). The issue [2542](https://github.com/Seneca-CDOT/telescope/issues/2542) has completed, and it is being reviewed by PR [2562](https://github.com/Seneca-CDOT/telescope/pull/2562). I also reviewed two PR [2543](https://github.com/Seneca-CDOT/telescope/pull/2543) and [2582](https://github.com/Seneca-CDOT/telescope/pull/2582).

###Issue [2519](https://github.com/Seneca-CDOT/telescope/issues/2519)
At the beginning, I edit the windows size. 
```
const width = window.innerWidth;
const height = window.innerHeight;
```
It is work, but it duplicates what we already have with https://www.npmjs.com/package/xterm-addon-fit. The right way to do this is to have the parent element that holds the terminal fill the available width and height, and then it will automatically use that. So I , I will try to fix CSS. I used the following code, and the windows size looks good, but The terminal shouldn't display the text on many lines, and it has glitchy text instead.
```
.xterm {
  padding: 0.5rem;
  position: fixed;
  width: 100%;
  height: 89%;
}
```
I use `vh` instead of `%` and the issue fixed.
```
.xterm {
  padding: 0.5rem;
  position: relative;
  width: 100vh;
  height: 89vh;
}
``` 
However there are two lines doesn't seem to be necessary. It is optimized to solve this problem with only one line of code. Please refer to the PR [2556](https://github.com/Seneca-CDOT/telescope/pull/2556).

###Issue [2542](https://github.com/Seneca-CDOT/telescope/issues/2542)
This issue has almost done a part of it is being fixed some issue. ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ptoulqxi8k704ek612nu.PNG)
We can check the code of PR [2562](https://github.com/Seneca-CDOT/telescope/pull/2562). 
I add the following code in the src/api/status/src/views/builds.hbs file.  If the build done, hide loading and error and show success. if it is loading hide error, success, and show loading. If it has error, hide loading, success, and show error.
```
<div class="container-fluid py-2">
    <div class="table-responsive">
      <div class="row mb-2">
        <div class="col col-md-1 text-xs">status</div>
        <div class="col col-md-2 text-xs">Build in progress</div>
      </div>
      <div class="row">
        <div class="col text-sm">
          <div class="align-center">
            <span hidden id="build-loading" class="material-icons fa-spin fa-9x " style="font-size: 24px; color:rgb(255, 196, 0) !important" >motion_photos_on</span>
            <span  hidden id="build-success" class="material-icons"  style="font-size: 22px; color:green">check_circle</span>
            <span hidden id="build-fail" class="material-icons" style="font-size: 23px; color:red">cancel</span>
            <span id="calculatorData" style="float: center; color:blue" ></span>
          </div>
        </div>   
      </div>
    </div>
  </div>
```
The following code is datetime-calculator, and it decide which icon will be hidden.
```
const buildDateCaltulator = document.getElementById('calculatorData');
const buildLoading = document.getElementById('build-loading');
const buildSuccess = document.getElementById('build-success');
const buildFail = document.getElementById('build-fail');

export default function calculatorBuildInfo(data) {
  const startedAtValue = data.startedAt;
  const stoppedAtValue = data.stoppedAt;
  const resultValue = data.result;

  if (startedAtValue !== 'null' && stoppedAtValue === 'null') {
    const date = Math.abs((new Date(startedAtValue).getTime() / 1000).toFixed(0));
    const currentDate = Math.abs((new Date().getTime() / 1000).toFixed(0));
    const diff = currentDate - date;
    const hours = Math.floor(diff / 3600) % 24;
    const minutes = Math.floor(diff / 60) % 60;
    const seconds = diff % 60;
    buildDateCaltulator.innerText = `${hours} h ${minutes} m ${seconds} s`;
    buildFail.hidden = true;
    buildSuccess.hidden = true;
    buildLoading.hidden = false;
  } else if (resultValue === 0 && stoppedAtValue !== 'null') {
    const date = Math.abs((new Date(startedAtValue).getTime() / 1000).toFixed(0));
    const currentDate = Math.abs((new Date(stoppedAtValue).getTime() / 1000).toFixed(0));
    const diff = currentDate - date;
    const hours = Math.floor(diff / 3600) % 24;
    const minutes = Math.floor(diff / 60) % 60;
    const seconds = diff % 60;
    buildDateCaltulator.innerText = `${hours} h ${minutes} m ${seconds} s`;
    buildLoading.hidden = true;
    buildFail.hidden = true;
    buildSuccess.hidden = false;
  } else if (resultValue !== 0 && stoppedAtValue !== 'null') {
    const date = Math.abs((new Date(startedAtValue).getTime() / 1000).toFixed(0));
    const currentDate = Math.abs((new Date(stoppedAtValue).getTime() / 1000).toFixed(0));
    const diff = currentDate - date;
    const hours = Math.floor(diff / 3600) % 24;
    const minutes = Math.floor(diff / 60) % 60;
    const seconds = diff % 60;
    buildDateCaltulator.innerText = `${hours} h ${minutes} m ${seconds} s`;
    buildLoading.hidden = true;
    buildSuccess.hidden = true;
    buildFail.hidden = false;
  }
}
```
The following code can connect the above two documents:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hlu5pkgbk6342wndnz8b.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2go0e90pxnuziei5rc80.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z5o4ipmoj1okurnjrsyx.png)
 

### Review PR [2543](https://github.com/Seneca-CDOT/telescope/pull/2543) and [2582](https://github.com/Seneca-CDOT/telescope/pull/2582).
I retest the PR 2543 and provide my suggestion.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7toj3x5h22gck4an1u9k.png)
I also retest the PR 2582, and the provide the following review comment:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dl3vc37k58mgo8jbdam9.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jzx0w4n45iwdcoyg9pir.png)
### What did I learn from OSD600
1. I improved my soft skill of networking and collaborating with community members. I mastered Slack, Dev and Discord.
2. I learned lots of knowledge about GitHub including forking, cloning, creating branch, creating pull request and so on. I also mastered some command, for instance, checkout, rebase, remote, merge, pull, push, fetch and so on.
3. I handed on the Markdown language.
4. I learned some feature about Docusaurus, and I have saved some skill which I noted using Docusaurus.
5. I learned how to apply Black to format Python code; how to apply a linter - Flake8, how to integrate  my project.
6. I learned how to use Pytest to create test case and test my SSG.
7. I learned how to use PyPI to package and release SSG.
8. I learned lots of skills about Python, JS, CSS and other languages.