Skip to content

Implement OCI Layout Explorer#483

Open
jpinz wants to merge 5 commits into
microsoft:mainfrom
jpinz:dev/jpinz/oci-layout-explorer
Open

Implement OCI Layout Explorer#483
jpinz wants to merge 5 commits into
microsoft:mainfrom
jpinz:dev/jpinz/oci-layout-explorer

Conversation

@jpinz
Copy link
Copy Markdown
Member

@jpinz jpinz commented May 22, 2026

This pull request introduces comprehensive support for OCI (Open Container Initiative) image layouts in the Container Tools extension for Visual Studio Code. The changes add a new "OCI Layout Explorer" view, commands to explore and export images as OCI layouts, settings for layout export and JSON detection, and documentation updates. This enables users to inspect, browse, and stage OCI layouts directly from VS Code, enhancing workflows for image inspection and supply chain tooling.

Major features and improvements:

OCI Layout Explorer and Commands:

  • Added a new "OCI Layout Explorer" view (vscode-containers.views.ociLayout) to the activity bar, allowing users to browse OCI image layouts, manifests, configs, and blobs directly in VS Code. [1] [2]
  • Introduced new commands: "Explore Image as OCI Layout...", "Export to OCI Layout...", and "Refresh" for OCI layouts, with appropriate command palette and context menu integration. [1] [2] Fea48f13L55R56, [3] [4]
  • Implemented command handlers for exploring images as OCI layouts and exporting images to OCI layouts, supporting selection from local folders, container runtimes, or registries. [1] [2] [3] [4]

Settings and Localization:

  • Added new settings: containers.oci.exportPath (controls export directory for OCI layouts) and containers.oci.jsonDetectionMaxBytes (controls automatic JSON language detection for descriptor files), with localization and documentation. [1] [2] [3]

Extension Initialization:

  • Registered OCI descriptor support during extension activation to enable features like JSON detection and descriptor navigation in the editor. [1] [2]

Documentation:

  • Updated README.md with a detailed section on working with OCI image layouts, describing the new explorer, commands, settings, and usage notes for Docker and Podman runtimes. [1] [2]

These enhancements significantly improve the extension’s capabilities for advanced container image workflows, especially for users working with OCI-compliant tools and registries.

This is a reimplementation of the extension I made earlier this week: https://github.com/jpinz/vscode-oci-extension with the webviews removed, and updated ORAS + Podman Compatibility

Screenshots

image "Explore Image as OCI Layout..."

Demo

OCI.Layout.Export.mp4

NOTE: There's a desync between the cursor clicks and movements and what actually happens in the video, but I think it still gets across. Sorry!

@jpinz jpinz requested a review from a team as a code owner May 22, 2026 14:55
Copilot AI review requested due to automatic review settings May 22, 2026 14:55
Copy link
Copy Markdown

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copilot encountered an error and was unable to review this pull request. You can try again by re-requesting a review.

- Introduced command to show prerequisites help for OCI Layout.
- Added prerequisites documentation for using Podman or ORAS.
- Implemented prerequisite warning in the OCI Layout tree item if podman isnt in use and oras is missing
- Created a constant for `oras` to use across the OCI tooling.
@jpinz jpinz requested a review from Copilot May 22, 2026 16:00
Copy link
Copy Markdown

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copilot encountered an error and was unable to review this pull request. You can try again by re-requesting a review.

jpinz added 3 commits May 22, 2026 13:43
… handling. This fixes issues with images published as a docker manifest v2, not OCI compatible when using docker save
…ndling

- Introduced custom labels configuration in package.json and localization strings in package.nls.json.
- Implemented logic for loading and matching custom label rules in customLabels.ts.
- Added OciBlobContentProvider for handling OCI blob URIs and displaying content.
- Updated OCI layout parsing to utilize custom labels and modified tree item classes to support new functionality.
Update README to explain the custom labels options.
@jpinz jpinz requested a review from Copilot May 22, 2026 18:53
Copy link
Copy Markdown

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copilot's findings

  • Files reviewed: 23/23 changed files
  • Comments generated: 8

Comment thread src/oci/ociExport.ts
Comment on lines +188 to +198
async function podmanSaveToOciLayout(
podmanCommandName: string,
reference: string,
outputDir: string
): Promise<void> {
await runTask(
podmanCommandName,
['save', '--format', 'oci-dir', '--output', outputDir, reference],
vscode.l10n.t('Save {0} as OCI layout', reference)
);
}
Comment thread src/utils/findOnPath.ts
Comment on lines +15 to +27
const isWindows = process.platform === 'win32';
const separator = isWindows ? ';' : ':';
const extensions = isWindows
? (process.env.PATHEXT ?? '.COM;.EXE;.BAT;.CMD').split(';').filter(Boolean)
: [''];

for (const dir of pathEnv.split(separator)) {
if (!dir) {
continue;
}

for (const ext of extensions) {
const candidate = path.join(dir, executable + ext);
Comment thread src/oci/ociLayout.ts
kind: getReadableKind(descriptor.mediaType, jsonResult ? jsonResult.json : null),
digest,
mediaType: descriptor.mediaType || null,
size: descriptor.size || null,
Comment thread src/oci/customLabels.ts
}

function compileGlob(pattern: string): RegExp {
const escaped = pattern.replace(/[.+^${}()|[\]\\]/g, '\\$&').replace(/\*/g, '.*');
}

const markdown = new vscode.MarkdownString(lines.join('\n'));
markdown.isTrusted = true;
Comment on lines +18 to +27
export class OciBlobContentProvider implements vscode.TextDocumentContentProvider {
public provideTextDocumentContent(uri: vscode.Uri): string {
const raw = fs.readFileSync(uri.fsPath, 'utf8');
try {
return JSON.stringify(JSON.parse(raw) as unknown, null, 4);
} catch {
return raw;
}
}
}
Comment thread package.nls.json
"vscode-containers.config.containers.truncateLongRegistryPaths": "Set to true to truncate long image and container registry paths in Container Images view",
"vscode-containers.config.containers.truncateMaxLength": "Maximum length of a registry paths displayed in Container Images view, including ellipsis. The truncateLongRegistryPaths setting must be set to true for truncateMaxLength setting to be effective.",
"vscode-containers.config.containers.environment": "Environment variables that will be applied to all VS Code terminals and to all background processes started by the Container Tools extension. Use for variables like `DOCKER_HOST`, etc.",
"vscode-containers.config.containers.oci.exportPath": "Directory where images exported as OCI layouts are stored. Leave empty to be prompted on first export. Supports `${workspaceFolder}` substitution.",
Comment on lines +131 to +137
if (position.character >= start && position.character <= end) {
return {
range: new vscode.Range(position.line, start, position.line, end),
algorithm: match[1].toLowerCase(),
hash: match[2].toLowerCase(),
};
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants