Wilcox Development Solutions Blog

Review of the CircleCI VSC Extension

January 04, 2023

Introduction

CircleCI recently announced an extension for Visual Studio Code, allowing you to view the status of your CircleCI pipelines.

I decided to run this tool for a week to evaluate how well it would work for a mid-sized development project. The result? It’s neat, with significant drawbacks, but might be a timesaver if you’re also in Visual Studio Code all day (unfortunately this is not my normal workflow).

The overall experience

Project Status

CircleCI has the concept of Following projects. This extension leans further into this concept: you only see build information about projects you follow.

As someone who’s primarily working in one repo, but occasionally working in others, I’d like to be able to see build information about the currently open Git project, in addition to the projects I’m following, but that’s not how it work.

The Good: I don’t have to open any folders to see builds happening - I did use VSC as a dedicated Circle job viewer with nothing else open!

The Bad: if I’m working on a random project that I may not care about in general, this extension is not that useful. I don’t want to have to follow a project, then unfollow it when I’m done (I know I’ll never unfollow it).

Pipelines & Builds List

If you do a lot of builds you may end up with information overload. The VSC extension lets you filter to only see my jobs, or to see all builds for everyone working on the project. Here’s what I saw sitting down to work one afternoon (yes, all this mess was made by me):

list of pipelines

Note the Pipeline information only has pipeline number, no dates or anything. Which is the build from this morning? If I’m looking for the pipeline with the most recently executed job, which pipeline is it? Maybe the top one, but it makes comparison a hard task.

A ton of my work tends to be on CI/CD configuration itself, where I’m pushing code very often to test something. This may be less of a problem for less build engineering focused engineers.

It is even harder if you’re on multiple branches in the same repository during the same day. (I hope you’re not, but it does happen!)

What I really wanted to do was to filter out some pipelines, either by name or by date. Only show me my builds in the last hour, or only show me builds on branches whose name contains “10988”.

Back to the UI: these pipeline entries are expandable: you can see the individual workflows an jobs created. This is awesome!

Circle has this neat ability to construct dynamic pipelines (in addition to more static workflows of course!) and this UI reflects both the “setup” job that constructs these and when all the dynamic workflows started building the pipelines show up in the VSC extension outline. This is great!

Except it gets loud. These pipelines here are closed not just for privacy but also because my setup job creates at least 10 dynamic workflows, and sometimes up to 40. Yes, really. Pipelines this large take up a lot of screen real estate.

I would really like to be able to filter out only items in the outline that contain a word or phrase.

Take a simple example: working on an Node project that has a Rust binary package it builds for some reason. There are two dynamic workflows: one building the Rust project if it changed and one building the Node project. In this example, today I’m focused on the Rust workflow, but with the VSC extension I have to see everything. I would very much like a feature in the UI where I could search for just “Rust” and see only the workflow named “Rust”: seeing the build status etc.

The Good: The extension did handle situations with dynamic workflows, by showing all the generated jobs/workflows (after setup step is completed). I was glad this mildly obscure feature was supported.

The Bad: no filtering beyond “mine” builds vs “all”

What the UI can do, and what it can’t

Or: “random odds and sods”

Does not give you an easy way to cancel builds (but does notify you if Circle has cancelled them for you)

One really neat thing is that you can do approvals right in the UI. In fact, if a workflow has jobs with multiple approvals you can do them both at the same time. This may or may not be bad, depending on what exactly you’re approving, but it’s nice to have the option.

pending jobs for approval dialog

If I want to see the output of a job - let’s say I’m debugging a failed job - I can see that the job failed inside the VSC extension (indicated by a red icon), but clicking on the job sends me to the browser. This isn’t an integrated experience, it’s more like a pipeline status tool. Which is maybe what Circle was going for, but I don’t want to context switch I want to see build results in my editor.

Having to flip over to the browser actually found a sharp (or security focused?) edge in Visual Studio Code called “manage trusted domains”. I forget why getting this set up for Circle was annoying, but it was (maybe I ignored something at first pass that I shouldn’t have??, or maybe the documentation for Circle, or Microsoft, could have been better?)

The icons you do see in the extension were - at least to my eyes or my 15 year old non retina/4K monitor - it’s hard to know if a job is going or if it’s blocked. A filled in circle icon = running, circle with dash = blocked, but again the icons are hard to see.

The Good: Approvals in the app, using VSC’s notification system, is kinda nice. I could be working on something, or waiting for a build, and boom notification of an approval I need to do.

The Bad: Mostly gave you a list then booted you out to the browser to do things, which ok cool but also ugh browser switching.

Conclusion

This might be nice for small development teams (say 7 developers), mostly using Visual Studio Code, working on a couple of the same repos all the time, with relatively infrequent builds.

This was not me. In fact, my primary ticket in my test was work on the Circle config itself - something that often requires frequent, small pushes, especially for dynamic configurations.

I did not feel like I could recommend it to my IntelliJ using colleagues though: not enough benefit for the cost of also running memory heavy VSC along with memory heavy IntelliJ.

I do hope this is the initial version of this, as there’s a lot going for it, but I don’t think it’s there yet for larger projects.

Ideally I’d like to see the following things from Circle along these lines:

  1. I want to see job output in VSC, and not be jumped out into my web browser
  2. If I open a Git project I want to (at best) get build notifications for that project if it’s set up in Circle, or at worse get a notification asking me if I want to follow the project.
  3. Filtering in the builds list
  4. A version of this, but for IntelliJ plugin

But it’s neat to see things beyond the browser come out of Circle, even if this might be a bit niche (or not for me)!


Tagged with:

Written by Ryan Wilcox Chief Developer, Wilcox Development Solutions... and other things