Release0.4 - Release

The issues 2519 has completed, and it closed by PR 2556. The issue 2542 has completed, and it is being reviewed by PR 2562. I also reviewed two PR 2543 and 2582.

Issue 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.

Issue 2542

This issue has almost done a part of it is being fixed some issue.
We can check the code of PR 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:

Review PR 2543 and 2582.

I retest the PR 2543 and provide my suggestion.

I also retest the PR 2582, and the provide the following review comment:

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.