Skip to main content

2 posts tagged with "circleci"

View All Tags

GitHub → CircleCI: Browse deployment

How does this help you?

  • One-click to browse the exact Git commit deployed to each environment
  • Reduces guesswork when debugging differences between environments

Preview

How it looks in the extension

ToolJump ... Other items ...

Approaches

  • Insights by workflow name (implemented): Use CircleCI Insights for conventional workflow names (e.g., deploy-staging, deploy-prod) on branch main, find the latest successful run, resolve the pipeline to get the commit SHA, and link to the GitHub tree. Simple and widely applicable.
  • Pipelines + workflows traversal: List recent pipelines for the repo/branch, then fetch workflows per pipeline to find the most recent successful deploy job per environment. More API calls, similar outcome.
  • Artifact or metadata lookup: Emit an artifact or store metadata (e.g., commit SHA, release tag, URL) during deploy jobs and fetch it via the Artifacts API. More setup, flexible if your org already publishes metadata.

Assumptions

  • Branch: main. Adjust in the example if your default deploy branch differs.
  • Workflows: deploy-staging and deploy-prod. Rename to match your pipeline.
  • Output: a dropdown labeled Browse deployment with Staging and Prod items linking to https://github.com/<org>/<repo>/tree/<sha>.

Prerequisites

For the code below to work, please follow the guide on Connecting to CircleCI. Provide CIRCLECI_API_TOKEN as a secret.

Code

github.circleci.browse.deployment.integration.example.js
module.exports = {
metadata: {
name: 'github-circleci-browse-deployment',
description: 'Dropdown to browse the deployed revisions (staging, QA) on GitHub using CircleCI workflows',
match: {
contextType: 'github',
context: {
'page.repository': { startsWith: 'my-org/' }
}
},
requiredSecrets: ['CIRCLECI_API_TOKEN'],
cache: 300
},
run: async function (context, secrets = {}) {
const CIRCLE_HOST = 'https://circleci.com/api/v2';
const repo = context.page.repository; // e.g., "org/repo"
const projectSlug = `gh/${repo}`;
const branch = 'main';

// Conventional workflow names used by many teams; customize if needed
const WORKFLOWS = {
staging: 'deploy-staging',
prod: 'deploy-prod'
};

const headers = {
'Circle-Token': secrets.CIRCLECI_API_TOKEN,
'Accept': 'application/json'
};

async function getDeployedShaForWorkflow(workflowName) {
// Use Insights to find the most recent successful run for the workflow on the target branch
const insightsUrl = `${CIRCLE_HOST}/insights/${encodeURIComponent(projectSlug)}/workflows/${encodeURIComponent(workflowName)}?branch=${encodeURIComponent(branch)}`;
const r1 = await fetch(insightsUrl, { headers });
if (!r1.ok) throw new Error(`CircleCI insights error (${workflowName}): ${r1.status} ${r1.statusText}`);
const j1 = await r1.json();
const items = Array.isArray(j1.items) ? j1.items : [];
const success = items.find(i => i.status === 'success');
if (!success) return null;

// Resolve pipeline id from pipeline number so we can get VCS revision (commit SHA)
const byNumberUrl = `${CIRCLE_HOST}/project/${encodeURIComponent(projectSlug)}/pipeline/${success.pipeline_number}`;
const r2 = await fetch(byNumberUrl, { headers });
if (!r2.ok) throw new Error(`CircleCI pipeline lookup error: ${r2.status} ${r2.statusText}`);
const j2 = await r2.json();
const pipelineId = j2.id;
if (!pipelineId) return null;

const pipelineUrl = `${CIRCLE_HOST}/pipeline/${pipelineId}`;
const r3 = await fetch(pipelineUrl, { headers });
if (!r3.ok) throw new Error(`CircleCI pipeline fetch error: ${r3.status} ${r3.statusText}`);
const j3 = await r3.json();
const sha = j3.vcs && j3.vcs.revision;
return sha || null;
}

const [stagingSha, prodSha] = await Promise.all([
getDeployedShaForWorkflow(WORKFLOWS.staging),
getDeployedShaForWorkflow(WORKFLOWS.prod)
]);

const items = [];
if (stagingSha) {
items.push({ content: 'Staging', href: `https://github.com/${repo}/tree/${stagingSha}` });
}
if (prodSha) {
items.push({ content: 'Prod', href: `https://github.com/${repo}/tree/${prodSha}` });
}

if (items.length === 0) return [];

return [{
type: 'dropdown',
content: 'Browse deployment',
icon: 'github',
items
}];
}
};

GitHub → CircleCI: Last production deploy

See time of last production deploy without leaving GitHub
🔒
https://github.com/mycompany/webshop
preload

How does this help you?

  • See when this repo was last deployed to production
  • Jump directly to the corresponding successful workflow run in CircleCI

Preview

How it looks in the extension

ToolJumpcircleciDeployed 5m ago ... Other items ...

High level approach

There are multiple ways to determine the last production deploy for a repository:

  1. Insights API by workflow name (simple): Query GET /insights/{project-slug}/workflows/{workflow_name} for the deploy-prod workflow on main and pick the most recent successful run.
  2. Pipelines → Workflows traversal: List pipelines for main via GET /project/{project-slug}/pipeline?branch=main, then for each pipeline call GET /pipeline/{id}/workflow and find the latest successful deploy-prod workflow.
  3. Job-level heuristics: If workflow names vary, filter workflow runs whose names contain both “deploy” and “prod”, or use a job name convention inside workflows.

The implementation below uses the Insights API (option 1) for simplicity.

Prerequisites

For the code below to work, please follow the guide on Connecting to CircleCI. Provide CIRCLECI_API_TOKEN as a secret.

Code

github.circleci.last-deploy.integration.example.js
module.exports = {
metadata: {
name: 'github-circleci-last-deploy',
description: 'Show when main was last deployed to production (deploy-prod workflow) and link to the workflow run',
match: {
contextType: 'github',
context: {
'url': { exists: true },
'page.repository': { startsWith: 'my-org/' }
}
},
requiredSecrets: ['CIRCLECI_API_TOKEN'],
cache: 300
},
run: async function (context, secrets = {}) {
const CIRCLE_HOST = 'https://circleci.com/api/v2';
const repo = context.page.repository; // e.g., "org/repo"
const projectSlug = `gh/${repo}`;
const workflowName = 'deploy-prod';
const branch = 'main';

// Helper to format "Deployed 3d ago" / "Deployed 3h ago"
function formatRelativeDuration(thenIso) {
const then = new Date(thenIso).getTime();
const now = Date.now();
const diffMs = Math.max(0, now - then);
const diffMin = Math.floor(diffMs / 60000);
const diffHr = Math.floor(diffMin / 60);
const diffDay = Math.floor(diffHr / 24);
if (diffDay >= 1) return `Deployed ${diffDay}d ago`;
if (diffHr >= 1) return `Deployed ${diffHr}h ago`;
return `Deployed ${Math.max(1, diffMin)}m ago`;
}

const headers = {
'Circle-Token': secrets.CIRCLECI_API_TOKEN,
'Accept': 'application/json'
};

// Insights API: latest runs for a workflow on a branch
const url = `${CIRCLE_HOST}/insights/${encodeURIComponent(projectSlug)}/workflows/${encodeURIComponent(workflowName)}?branch=${encodeURIComponent(branch)}`;
const resp = await fetch(url, { headers });
if (!resp.ok) {
throw new Error(`CircleCI API error: ${resp.status} ${resp.statusText}`);
}

const json = await resp.json();
const items = Array.isArray(json.items) ? json.items : [];
const success = items.find(i => i.status === 'success');
if (!success) {
return [];
}

const workflowId = success.id; // workflow UUID
const pipelineNumber = success.pipeline_number; // for deep link
const stoppedAt = success.stopped_at || success.created_at;

const relative = formatRelativeDuration(stoppedAt);
const link = `https://app.circleci.com/pipelines/gh/${repo}/${pipelineNumber}/workflows/${workflowId}`;

return [
{ type: 'link', content: relative, href: link, icon: 'circleci' }
];
}
};