jodyheavener / circleci-vscode

💻 CircleCI for VS Code

Jody's Extension for CircleCI

November 9 2022 - This extension is now deprecated. Please consider using CircleCI's official VS Code extension. Thank you for trying it out. I have renamed this extension to "Jody's Extension for CircleCI" and updated the branding at their request to make clear that it isn't offered or endorsed by CircleCI.

A simple extension for VS Code to allow you to monitor, manage, and inspect your Pipelines on CircleCI.

⚠️ This project is still in beta. It uses CircleCI's V2 API, which includes endpoints that are still evolving, and as such may result in this extension breaking. I'll do my best to keep it updated, but it will remain in beta until those endpoints are finalized. You can report issues here.

How to Use

💻 You have two options for installation:

• From the Visual Studio Marketplace. Just search for "CircleCI" from the Marketplace extension.
• Manually from the Releases page. Download the latest release of the .vsix file. In VS Code you can open the command palette, type "vsix", choose "Extensions: Install from VSIX...", and select the downloaded file.

📝 Either ./circle.yaml or .circleci/config.yaml must exist in your workspace.

🔑 An API Token is required. It can be created from your Personal API Tokens page. Open settings and search for "CircleCI" (specifically circleci.apiToken) and fill in your token.

⚙️ Beyond the API Token you can also configure:

• "VCS Provider" allows you to choose the version control system that your repository uses. This can be GitHub or Bitbucket.
• "Custom Branches" will, for each one, load Workflows from that branch in addition to the branch you're currently one. This can allow you to be on a feature branch but also monitor your default branch (e.g. main).
• "Auto Load Workflows" and "Auto Load Workflow Jobs" are safeguard options that you can use to stop the extension from automatically performing API requests for each Job from each Workflow. Don't want you to get rate-limited, after all.
• "Pipeline Reload Interval" determines how frequently, in seconds, the extension should poll CircleCI for updates to a Pipeline. Set to 0 to disable.
• "Workflow Reload Interval" determines how frequently, in seconds, we should poll CircleCI for an update to an active Workflow (one that is actively running). Set to 0 to disable.

✅ You're all set. When you open VS Code the extension will open in the background and use the Git information from your Workspace's first/main folder to look for a CircleCI Project and the branch with which to query Pipeline Workflows.

✨ Features

The main functionality of this extension is a Tree View containing CircleCI Project activity. From this tree you can watch your Pipeline Workflows as they complete Jobs, and from individual Jobs you can explore details like status and duration, as well as their Artifacts and Tests. Across all these objects you can trigger certain events, open them in your browser, and copy information. To learn more about what all these terms mean, check out the CircleCI Glossary.

Project View

The Project View is just the container for the tree. Along the top right you will see that you can:

• Open in browser. This will open the Project in your default web browser.
• Reload details. This will reload everything in the Project View.

Pipelines

Pipelines are the top level tree item, and they contain all your Workflows. Hovering over a Pipeline allows you to:

• Open in browser. This will open the branch-specific Pipeline in your default web browser.
• Reload details. This will reload the Pipeline and everything below it.

Workflows

Workflows are nested under each Pipeline and contain Jobs. Hovering over a Workflow allows you to:

• Open in browser. This will open the Workflow in your default web browser.
• Reload details. This will reload the Workflow and everything below it. This does not re-trigger the Workflow.
• Retry all Jobs. This will retry all Jobs belonging to the Workflow.
• Retry failed Jobs. Only visible if the Workflow is in a failed state. This will retry only failed Jobs belong to the Workflow.
• Cancel Workflow. Only visible if the Workflow is in a running state. This will cancel all active Jobs belonging to the Workflow.

Right-clicking on a Workflow allows you to:

• Copy Workflow ID. Will copy the Workflow's ID to your clipboard.

Jobs

Jobs exist under Workflows. Hovering over a Job allows you to:

• Open in browser. This will open the Job in your default web browser.
• Reload details. This will reload the Job and everything below it. This does not re-trigger the Job.
• Cancel Job. Only visible if the Job is in a running state. This will cancel the individual Job.
• Approve Job. Only visible if the Job is an Approval Job. This will mark the Job as approved and reload the Workflow.

Right-clicking on a Job allows you to:

• Copy Job ID. Will copy the Job's ID to your clipboard.
• Copy Job number. Only visible if the Job is not an Approval Job, which has no number. Will copy the Job's number to your clipboard.

Within a Job you can:

• View its Duration in seconds.
• Click "Look up Artifacts" to load any Artifacts created by the Job. Clicking on an individual Artifact will attempt to open it. If it's a text-based file it will be opened in VS Code; if it's a binary file, such as an image, it will open in your default app for the file type.
• Click "View Tests" to open a webview containing the Test metadata produced by your Job, if it is available.

Viewing Test Results

If your Job is configured to collect Test metadata you can open them right in VS Code. From within a Job tree item click "View Tests" and they'll open inside a webview. From this webview you can:

• View each Test, including its programmatic location, name, and failure details. Where possible, paths within the failure details output will link back to source files.
• Sort them by status (success, failed), alphabetically, or the length of time each one took.
• Search through all Tests by name, description, or status.
• Open the Job in your browser.

🤔 Troubleshooting

If you encounter problems that are not answered below please file an issue. It would be helpful if you included output from the Debug Console.

Q: I see the error message: "A CircleCI API token (circleci.apiToken) must be set." A: First retrieve an API token from your Personal API Tokens page. Then head to Settings, search for "CircleCI API Token", and paste it in that text field.

Q: I see the error message: "Could not retrieve Git info. Is the "origin" remote set?" A: This could be due to a number of things:

• If this is a new project ensure that there is an active Git instance (e.g. git init).
• Is the origin remote set? This extension relies on the correct name of the origin remote, and not a local directory name, to query against CircleCI.
• If you recently renamed your repository, ensure the remote is up to date. GitHub handily forwards recently changed remotes, but the extension needs it to be up to date.

Q: I see the error: "Could not retrieve Git branch." A: Check to ensure you're on a fully qualified branch, and not a rebase commit, detached HEAD, or other funky Git state. The extension check for the non-ambiguous name of the ref.

Q: I see the error message: "There was an issue loading Pipeline/Workflow/Job/etc..." A: An error occurred during an API request. These are a little hard to debug, but you should ensure that your API token is valid.

Development

This extension is built with Node (yarn), TypeScript, vsce, the VS Code Extension API, and the CircleCI V2 API. Development is pretty straightforward:

• Clone the project.
• Install dependencies: yarn install.
• Build and watch for changes: yarn watch
• Run the extension locally by pressing F5 or triggering Start Debugging from the command palette.
• Use the on-screen debugging tools to restart and stop debugging
• If debugging webviews, trigger Open Webview Developer Tools from the command palette.

When you're ready to package for distribution run vsce package. Don't forget to version bump.

License and more...

• This extension is provided under the MIT License
• While I certainly hope they like it, this extension is not built or endorsed by CircleCI.
• By using this extension you agree not to come after me if something goes wrong and it accidentally burns through all your CircleCI credits.
• Shout out to Eric Amodio (whose GitLens extension provided great reference), Paul Johnston, and others in the VS Code Dev Slack.

circleci-vscode's Issues

Get the API token from the CLI's config file

The circleci command line tool stores the token in ~/.circleci/cli.yml. It would be great if you could pull this one if it is present.

I am not getting the information. I already put the key, but it's not identifying

I am not getting the information. I already put the key, but it's not identifying.

The apiKey was defined in settings, but doesnt work

Can help me?

Support for workspace

When using this extension on a workspace with multiple codebases open, only the first project is picked up by the extension. It would be great if it can show all the projects. (Sort of like “Source Control” panel works in VSC)

Great job on the extension, btw.

Self managed server

Would it be possible to add a parameter to define the CircleCI API endpoint? This would be very helpful for the ones running their own server

Cannot read property 'branch' of undefined / Could not retrieve Git info...

I'm getting these two errors.

Can you help, please?

Thanks in advance

Not working! Was working before v0.2.0

Was working flawlessly before this new version 0.2.0.

I'm using the correct API token from CircleCi but always gives me "No workflow found".

Can you help us all?

Couldn't load details for Job Error

Couldn't load details for Job 908df14c-e07f-42fd-92eb-0d5d23dd521c

When I select the tab, and jobs display I immediately get a flurry of toasts looking like the above.

It's unclear if the functionality is impacted as it seems to still display details.

👀 New version coming soon!

Just wanted to leave a quick note here for anyone considering filing an issue: thank you for using this extension!

I have been incredibly busy the last year and have not had the time to address the issues filed here. That's why I'm excited to announce that I am actively working on a rewrite of CircleCI for VS Code 🎉

This rewrite seeks to add many improvements and a handful of new features (e.g. #7, #21), but importantly its goal is to fix some of the common issues filed in this repo (e.g. #3, #6, #19).

I don't have a timeline but it's currently about half done. If you'd like to request a feature please feel free to file an issue and I'll consider it. Thanks for your patience.

Extension warns that all private orbs are invalid

I work with an entirely private GitHub orb, and all of our published CircleCI orbs are private.

When opening any of my pipelines in the editor, the extension warns that all of my private orbs are invalid.

Given my API token has access to the orbs, it would be great if the call to lookup orbs used my API token instead of (what I presume is?) just a public query.

Download artifacts is missing authentication

Hello,

While trying to download artifacts with this extension, I get a file with the proper name, but its contents are must be logged in instead of the actual contents.

Browsing into the code, I have seen that it's using downloadFile method, using a simple http GET, hence it's missing the apiToken that would contain the authentication details.

Would it be possible to fix this?

Icons broken in v0.1.5

TreeView icons are broken as of v0.1.5. Seems like bundling broke it.

After installing the extension I get and error "Cannot read properties of undefined (reading 'branch')"

Meanwhile, the sidebar is blank.

I am getting the error "Could not retrieve Git info. Is the "origin" remote set?". Does this extension work with github enterprise?

Cannot read property 'branch' of undefined

I've placed the CCI API token in my VS Code setting - however, I receive the error "Cannot read property 'branch' of undefined" and I don't see any of my workflows in the extension tab. Also, when I click on the "open in browser" button I receive the error "Running the contributed command: 'circleci.openPage' failed."