Skip to content

Commit

Permalink
Prepare for first release to OpenVSX
Browse files Browse the repository at this point in the history
- Renamed the  build workflow to ci-cd and made modifications:
  - added a publish job, that publishes the .vsix extension to openvsx.org,
    triggered only when a release tag (v<something>) is pushed to the repo.
  - merged the build and ui tests jobs. They were redundent, both building
    the project
  - removed yarn package caching: practically it helped very little, cutting
    only ~5% vs the time it takes to install the dependencies without
    ~(25s vs 26s) in the best case (cache hit). With a cache miss (run with
    modified yarn.lock), we had a 100+% penalty, if we count the overhead
    of the cache being saved to GitHub infrastructure.
- created a "release" workflow that uses "pipe-cd/actions-gh-release" to
  to create a release tag and corresponding GitHub release, when a change
  is detected in root file "RELEASE".
    - TL;DR: this is how a release is triggered, by adding the tag value
      reflecting release version, to RELEASE file as part of a PR. The
      action will add tentative release notes to the PR that can be edited
      as needed. Upon merging the PR, a release tag will be created in the
      repo, which will trigger the publish job, that will eventually result
      in the new version of the extension being deployed to openvsx.org
    - it looks like the RELEASE file must exist before its first use in a PR,
      so created one with no active content.
- added "doc/Publishing.md" to briefly document how to go about creating new
  releases / publish new releases to openvsx.org
- renamed public-facing name (displayName) of the extension to "Trace Viewer
  for VSCode",  to better  reflect its nature
- changed public-facing mentions of "vscode" to the canonical "VSCode"
- changed extension's publisher, to align with the configuration of the CDT
  Cloud OpenVSX publisher user: "eclipse-cdt". See:
  https://www.open-vsx.org/namespace/eclipse-cdt
- other misc updates to the extension's package.json: added/massaged important
  fields
  (https://www.open-vsx.org/namespace/eclipse-cdt).
- kept developer-specific information in repo's root README.md but moved
  generic information, useful to users of the extension, to extension's
  README (which becomes the information page for the extension when published
  or installed).
- Added an icon for the extension. Though probably not the best ever, re-used
  the one from repo "theia-trace-extension"

Closes #69

Signed-off-by: Marc Dumais <[email protected]>
  • Loading branch information
marcdumais-work committed Jan 30, 2024
1 parent ac4d706 commit 3bd0a87
Show file tree
Hide file tree
Showing 15 changed files with 274 additions and 130 deletions.
101 changes: 0 additions & 101 deletions .github/workflows/build.yml

This file was deleted.

116 changes: 116 additions & 0 deletions .github/workflows/ci-cd.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,116 @@
name: CI/CD

on:
push:
branches: [ master ]
tags:
- 'v*'
pull_request:
branches: [ master ]

jobs:

build-test:
name: Build and run UI Tests
timeout-minutes: 60
runs-on: ${{ matrix.os }}
strategy:
matrix:
os: [ubuntu-latest]
node-version: [16]

steps:
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
node-version: ${{ matrix.node-version }}
- uses: actions/setup-java@v3
with:
distribution: 'temurin'
java-version: '17'
- name: Install npm dependencies and build
run: yarn --frozen-lockfile
- name: Package as VSCode Extension
run: yarn vsce:package
- name: Download sample traces
run: yarn download:sample-traces
- name: Download trace server
run: yarn download:server
- name: Start trace server
run: yarn start:server &
- name: Download openvscode-server
run: yarn download:openvscode-server
- name: Configure openvscode-server
run: yarn configure:openvscode-server
- name: Start openvscode-server
run: yarn start:openvscode-server &
- name: Install Playwright Browsers
run: yarn playwright install --with-deps
- name: Run Playwright tests
run: yarn playwright test
- uses: actions/upload-artifact@v3
if: always()
with:
name: playwright-report
path: playwright-report/
retention-days: 30
# Save the extension .vsix file for potential publishing
# in later step (if appropriate)
- uses: actions/upload-artifact@v4
with:
name: extension
path: vscode-trace-extension/*.vsix

code-lint:
name: Run linter
runs-on: ${{ matrix.os }}
strategy:
matrix:
os: [ubuntu-latest]
node-version: [16]

steps:
- name: Check out Git repository
uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
node-version: ${{ matrix.node-version }}
# ESLint and Prettier must be in `package.json`
- name: Install dependencies
run: yarn --frozen-lockfile --ignore-scripts
- name: Run lint
run: yarn lint
- name: Run format check
run: yarn format:check

publish:
name: Publish extension to openvsx.org
runs-on: ${{ matrix.os }}
needs:
- build-test
strategy:
matrix:
os: [ubuntu-latest]
node-version: [16]
# Only execute when the trigger was a tag (new release)
if: startsWith(github.ref, 'refs/tags/')

steps:
- uses: actions/checkout@v3
- uses: actions/download-artifact@v4
with:
name: extension
path: vscode-trace-extension
- uses: actions/setup-node@v3
with:
node-version: ${{ matrix.node-version }}
- name: Install dependencies
run: yarn --frozen-lockfile --ignore-scripts
- name: Publish extension
run: |
ls -al vscode-trace-extension/*.vsix
npx ovsx publish vscode-trace-extension/*.vsix
env:
# have ovsx consume the PAT from environment - if it's not handled explicitly
# in the workflow, less risk to leak it
OVSX_PAT: ${{ secrets.OPEN_VSX_TOKEN }}
29 changes: 29 additions & 0 deletions .github/workflows/release.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
name: Create or prepare GitHub release

on:
push:
branches:
- master
paths:
- 'RELEASE'
pull_request:
types: [opened, synchronize]
branches:
- master
paths:
- 'RELEASE'

jobs:
gh-release:
name: GitHub release
runs-on: ubuntu-latest

steps:
- uses: actions/checkout@v3
with:
fetch-depth: 0
- uses: pipe-cd/[email protected]
with:
release_file: 'RELEASE'
token: ${{ secrets.GITHUB_TOKEN }}

3 changes: 0 additions & 3 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
Expand Up @@ -82,10 +82,7 @@ file. Adding the SHA-1 of a commit to this file will make `git-blame` ignore tha

* For GitHub, this file is automatically detected and will ignore all the commits that are included in the file.
* With Git CLI, run `git blame --ignore-revs-file=.git-blame-ignore-revs <pathToSomeFile>` to ignore the commits.
<<<<<<< HEAD
* `git config --global blame.ignoreRevsFile .git-blame-ignore-revs` will automatically detect these files for every repository.
=======
>>>>>>> d126837 (Repository formatted with prettier)

## Contact

Expand Down
32 changes: 17 additions & 15 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,10 +1,12 @@
# VSCode Trace Extension

This project started from the [vscode webview react project][vscode-webview-react]. It works this way, with the extension itself being in the `vscode-trace-extension` directory and the react application being in the `vscode-trace-webapps` directory.
This document contains information that may be useful for developers that want to build, modify, enhance and/or debug this extension. If you only intend to consume the extension, it might be easier to get it from the [public OpenVSX registry](https://www.open-vsx.org/extension/eclipse-cdt/vscode-trace-extension),

This project started from the [VSCode webview react project][vscode-webview-react]. It works this way, with the extension itself being in the `vscode-trace-extension` directory and the react application being in the `vscode-trace-webapps` directory.

**👋 Want to help?** Read our [contributor guide](CONTRIBUTING.md) and follow the instructions to contribute code.

## Installation instructions
## Installation Instructions

The code was migrated from the [PR in theia-trace-extension][init-contrib].

Expand All @@ -15,37 +17,37 @@ It depends on the trace viewer plugins from the [theia trace extension package][
- traceviewer-react-components
- tsp-typescript-client

To build the vscode extension, run the `yarn` command:
To build the VSCode extension, run the `yarn` command:

``` bash
yarn
```

## Running the extension

Then from vscode, press `f5` to run the extension. The trace server needs to be started separately as described [here](#run-the-trace-server).
Then from VSCode, press `f5` to run the extension. The trace server needs to be started separately as described [here](#run-the-trace-server).

To open a trace use the VSCode file explorer to navigate to the trace directory. Then right mouse click on the trace and select menu option `Open with Trace Viewer`. See [here](#get-sample-traces) to get some sample traces.

Open the `Trace Viewer` view (`View` -> `Open view...`).

![open-trace][open-trace]

2 tabs will be visible: `Traces` and `Views`. The `Traces` tab will show all available traces on the trace server.
Two tabs will be visible: `Traces` and `Views`. The `Traces` tab will show all available traces on the trace server.

The `Views` tab shows all the available views for the selected trace. Click on a view to open the view under the timeline.

![open-output][open-output]

## Package as VsCode extension
## Package as a VSCode extension (.vsix)

To package it as VsCode extension, run the command `yarn vsce:package`. If you get errors about case-sensitive files, just delete the node_modules folder and run `yarn` again.
To package it as VSCode extension, run the command `yarn vsce:package`. If you get errors about case-sensitive files, just delete the node_modules folder and run `yarn` again.

The packaging will produce a `vscode-trace-extension-x.x.x.vsix` file in the subdirectory `vscode-trace-extension` of the repository.

## Running the extension in VsCode, VsCodium or Theia application
## Running the extension in VSCode, VsCodium or Theia application

The packaged VSIX file can be installed in an existing `VsCode`, `VsCodium` or `Theia` application by using [Install from a vsix][install].
The packaged VSIX file can be installed in an existing `VSCode`, `VSCodium` or `Theia` application by using [Install from a vsix][install].

The trace server needs to be started separately as described [here](#run-the-trace-server).

Expand All @@ -62,15 +64,15 @@ ln -s <vscode-trace-extension root>/vscode-trace-extension-x.x.x.vsix ./

From the root directory execute `yarn run watch`. This will watch and bundle `vscode-trace-common`, `vscode-trace-extension`, and `vscode-trace-webviews`. All outputs will be in one terminal. Changes can be observed and tested in the `Extension Development Host` by pressing `F5`.

For more information about `VsCode WebView API` see [here][vscode-webview].
For more information about `VSCode WebView API` see [here][vscode-webview].

### Communication between components

To communicate between VsCode extension and webviews use the [VsCode message API][vscode-messages]. When using `vscode.postMessage(data)` data structure `data` will be serialized to JSON before being propagated. Be aware that it cannot include data structures like `BigInt`. Proper handling of such data structures need to be implemented when sending and receiving messages.
To communicate between VSCode extension and webviews use the [VSCode message API][vscode-messages]. When using `vscode.postMessage(data)` data structure `data` will be serialized to JSON before being propagated. Be aware that it cannot include data structures like `BigInt`. Proper handling of such data structures need to be implemented when sending and receiving messages.

Inside a webview or inside the extension signals can be used where data structures can be passed on.

The following sequence diagram shows how the `experiment-selected` signal (with payload `Experiment`) is propagated inside the application. The webview `Opened Traces WebView App` is sending the signal to the`VsCode extension` which is forwarding the signal to the `Available Views WebView App`.
The following sequence diagram shows how the `experiment-selected` signal (with payload `Experiment`) is propagated inside the application. The webview `Opened Traces WebView App` is sending the signal to the`VSCode extension` which is forwarding the signal to the `Available Views WebView App`.

```mermaid
sequenceDiagram
Expand Down Expand Up @@ -98,9 +100,9 @@ sequenceDiagram

### Debugging the extension

It is straightforward to debug the code of the vscode extension itself (the code in `vscode-trace-extension`) by just putting breakpoints in vscode and running the extension with `f5`.
It is straightforward to debug the code of the VSCode extension itself (the code in `vscode-trace-extension`) by just putting breakpoints in VSCode and running the extension with `f5`.

The react-app is another matter. The panel is a webview that is running in its own context, so current vscode does not have access to it. _(Patches welcome!)_
The react-app is another matter. The panel is a webview that is running in its own context, so current VSCode does not have access to it. _(Patches welcome!)_

Each panel is its own small web application, so to debug, while in the context of the webview, press `ctrl-shift-p` and enter the command `Developer: Open Webview Developer Tools`. This will open the developer tools. The code is in the `Sources` tab of the developer tools window that opens.

Expand Down Expand Up @@ -230,7 +232,7 @@ onWebviewPanelCreated(listener: (data: vscode.WebviewPanel) => void): void

```javascript
//The following retrieves the API object from the vscode-trace-extension
const ext = vscode.extensions.getExtension("tracecompass-community.vscode-trace-extension");
const ext = vscode.extensions.getExtension("eclipse-cdt.vscode-trace-extension");
const importedApi = ext.exports;
```

Expand Down
1 change: 1 addition & 0 deletions RELEASE
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
# Release file - see documentation: https://github.com/pipe-cd/actions-gh-release#usage
16 changes: 16 additions & 0 deletions doc/Publishing.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
# Releasing/Publishing the Trace Viewer Extension

The Github workflows are setup to make this relatively simple.

When it's desired to have a new release:

- open a Pull Request that steps the version of the extension in `vscode-trace-extension/package.json`
- As part of the PR, update file RELEASE \[1\] in the repo root. Add or modify it to reflect the new version-to-be-released.
e.g.
> tag: v0.1.0 # The tag number will be created. Required.
- The PR should be automatically updated, and automatically generated release noted added to it
- Upon merging the PR, the GH release will automatically be created, and the release notes added to document it. A release tag, for the new relase will also be created in the repo.
- The release tag should trigger a publish workflow that will build and release a new version of the extension to openvsx.org

\[1\]: Here is the action that we use. For more details see its documentation: https://github.com/pipe-cd/actions-gh-release#actions-gh-release
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@
"copy-webpack-plugin": "^11.0.0",
"eslint-config-prettier": "^9.0.0",
"lerna": "^7.0.0",
"ovsx": "latest",
"prettier": "^3.0.2"
},
"workspaces": [
Expand Down
1 change: 0 additions & 1 deletion vscode-trace-common/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
"name": "vscode-trace-common",
"private": "true",
"version": "0.0.0",
"publisher": "tracecompass-community",
"categories": [
"Other"
],
Expand Down
Loading

0 comments on commit 3bd0a87

Please sign in to comment.