OPC # 0006: OPC Git Trunk-Based management
This commit is contained in:
amadzarak
@@ -121,6 +121,7 @@ export interface LinkedCommit {
|
||||
date: string;
|
||||
subject: string;
|
||||
files: string[];
|
||||
branches: string[];
|
||||
}
|
||||
|
||||
export async function getLinkedCommits(opcNumber: string): Promise<LinkedCommit[]> {
|
||||
@@ -208,18 +209,35 @@ export async function getBranchCoverageForRepo(repoKey: string, hashes: string[]
|
||||
// Reuses LinkedCommit shape — repoKey identifies which repo each commit came from.
|
||||
|
||||
export async function getChangesets(
|
||||
page = 1,
|
||||
limit = 25,
|
||||
repo = 'all',
|
||||
page = 1,
|
||||
limit = 25,
|
||||
repo = 'all',
|
||||
grep?: string,
|
||||
branch?: string,
|
||||
): Promise<LinkedCommit[]> {
|
||||
const params = new URLSearchParams({ page: String(page), limit: String(limit), repo });
|
||||
if (grep) params.set('grep', grep);
|
||||
if (grep) params.set('grep', grep);
|
||||
if (branch) params.set('branch', branch);
|
||||
const res = await fetch(`${BASE_URL}/api/git/log?${params}`);
|
||||
if (!res.ok) throw new Error(`Failed to load changesets: ${res.statusText}`);
|
||||
return res.json();
|
||||
}
|
||||
|
||||
// ── Local git branches (from LibGit2 repos) ───────────────────────────────────
|
||||
|
||||
export interface RepoBranchInfo {
|
||||
repoKey: string;
|
||||
name: string;
|
||||
hash: string;
|
||||
isHead: boolean;
|
||||
}
|
||||
|
||||
export async function getBranches(repo = 'all'): Promise<RepoBranchInfo[]> {
|
||||
const res = await fetch(`${BASE_URL}/api/git/branches?repo=${encodeURIComponent(repo)}`);
|
||||
if (!res.ok) throw new Error(`Failed to load branches: ${res.statusText}`);
|
||||
return res.json();
|
||||
}
|
||||
|
||||
// ── Commit detail (full diff) ─────────────────────────────────────────────────
|
||||
|
||||
export interface CommitFile {
|
||||
|
||||
@@ -1292,3 +1292,50 @@ body {
|
||||
min-width: 60px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cs-page-with-tree {
|
||||
display: flex;
|
||||
gap: 1.5rem;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.cs-branch-tree {
|
||||
width: 200px;
|
||||
flex-shrink: 0;
|
||||
position: sticky;
|
||||
top: 1rem;
|
||||
border: 1px solid #dce0e6;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
padding: 0.25rem 0;
|
||||
max-height: calc(100vh - 8rem);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.cs-branch-tree .bp6-tree-node-content {
|
||||
font-size: 0.82rem;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
.cs-branch-tree .bp6-tree-node-content:hover {
|
||||
background: #f6f7f9;
|
||||
}
|
||||
|
||||
.cs-branch-tree .bp6-tree-node.bp6-tree-node-selected > .bp6-tree-node-content {
|
||||
background: #e8f0fb;
|
||||
color: #215db0;
|
||||
}
|
||||
|
||||
.cs-content-area {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.cs-branch-badge {
|
||||
font-size: 0.67rem;
|
||||
letter-spacing: 0.01em;
|
||||
white-space: nowrap;
|
||||
margin-left: 0.5rem;
|
||||
opacity: 0.85;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import { Button, HTMLSelect, InputGroup, Intent, NonIdealState, Spinner, Tag, Tooltip } from '@blueprintjs/core';
|
||||
import { useState, useEffect, useCallback, useMemo } from 'react';
|
||||
import { Button, HTMLSelect, InputGroup, Intent, NonIdealState, Spinner, Tag, Tooltip, Tree } from '@blueprintjs/core';
|
||||
import type { TreeNodeInfo } from '@blueprintjs/core';
|
||||
import { GitCommitDrawer } from '../components/GitCommitDrawer';
|
||||
import { getChangesets } from '../api/opcApi';
|
||||
import { getChangesets, getBranches } from '../api/opcApi';
|
||||
import type { LinkedCommit } from '../api/opcApi';
|
||||
|
||||
const PAGE_SIZE = 25;
|
||||
@@ -19,23 +20,62 @@ const REPO_INTENT: Record<string, Intent> = {
|
||||
Gateway: Intent.SUCCESS,
|
||||
};
|
||||
|
||||
export default function ChangesetsPage() {
|
||||
const [commits, setCommits] = useState<LinkedCommit[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [page, setPage] = useState(1);
|
||||
const [hasMore, setHasMore] = useState(false);
|
||||
const [repoFilter, setRepoFilter] = useState('all');
|
||||
const [grepFilter, setGrepFilter] = useState('');
|
||||
const [grepInput, setGrepInput] = useState('');
|
||||
const [viewingHash, setViewingHash] = useState<string | null>(null);
|
||||
const REPO_COLOR: Record<string, string> = {
|
||||
Clarity: '#215db0',
|
||||
OPC: '#935610',
|
||||
Gateway: '#1c6e42',
|
||||
};
|
||||
|
||||
const load = useCallback(async (p: number, repo: string, grep: string) => {
|
||||
const SDLC_ORDER = ['develop', 'staging', 'uat', 'main'] as const;
|
||||
|
||||
function getBranchLabel(branches: string[]): string | null {
|
||||
if (branches.length === 0) return null;
|
||||
const sdlc = branches.filter(b => (SDLC_ORDER as readonly string[]).includes(b));
|
||||
if (sdlc.length === 0) return branches[0];
|
||||
const highest = sdlc.reduce((a, b) =>
|
||||
SDLC_ORDER.indexOf(b as typeof SDLC_ORDER[number]) > SDLC_ORDER.indexOf(a as typeof SDLC_ORDER[number]) ? b : a,
|
||||
);
|
||||
const idx = SDLC_ORDER.indexOf(highest as typeof SDLC_ORDER[number]);
|
||||
if (idx > 0) {
|
||||
const prev = SDLC_ORDER[idx - 1];
|
||||
if (branches.includes(prev)) return `${prev} → ${highest}`;
|
||||
}
|
||||
return highest;
|
||||
}
|
||||
|
||||
export default function ChangesetsPage() {
|
||||
const [commits, setCommits] = useState<LinkedCommit[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [page, setPage] = useState(1);
|
||||
const [hasMore, setHasMore] = useState(false);
|
||||
const [repoFilter, setRepoFilter] = useState('all');
|
||||
const [grepFilter, setGrepFilter] = useState('');
|
||||
const [grepInput, setGrepInput] = useState('');
|
||||
const [viewingHash, setViewingHash] = useState<string | null>(null);
|
||||
const [branchMap, setBranchMap] = useState<Record<string, string[]>>({});
|
||||
const [selectedBranch, setSelectedBranch] = useState<{ repoKey: string; branch: string } | null>(null);
|
||||
const [expandedRepos, setExpandedRepos] = useState<Set<string>>(new Set());
|
||||
|
||||
// Load branches for the tree once on mount
|
||||
useEffect(() => {
|
||||
getBranches('all')
|
||||
.then(data => {
|
||||
const map: Record<string, string[]> = {};
|
||||
for (const b of data) {
|
||||
if (!map[b.repoKey]) map[b.repoKey] = [];
|
||||
map[b.repoKey].push(b.name);
|
||||
}
|
||||
setBranchMap(map);
|
||||
})
|
||||
.catch(() => { /* branch tree is non-critical */ });
|
||||
}, []);
|
||||
|
||||
const load = useCallback(async (p: number, repo: string, grep: string, branch?: string) => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
// Fetch one extra to detect whether there's a next page
|
||||
const rows = await getChangesets(p, PAGE_SIZE + 1, repo, grep || undefined);
|
||||
const rows = await getChangesets(p, PAGE_SIZE + 1, repo, grep || undefined, branch);
|
||||
setHasMore(rows.length > PAGE_SIZE);
|
||||
setCommits(rows.slice(0, PAGE_SIZE));
|
||||
} catch (e) {
|
||||
@@ -47,25 +87,77 @@ export default function ChangesetsPage() {
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
load(page, repoFilter, grepFilter);
|
||||
}, [load, page, repoFilter, grepFilter]);
|
||||
const effectiveRepo = selectedBranch ? selectedBranch.repoKey : repoFilter;
|
||||
const effectiveBranch = selectedBranch?.branch;
|
||||
load(page, effectiveRepo, grepFilter, effectiveBranch);
|
||||
}, [load, page, repoFilter, grepFilter, selectedBranch]);
|
||||
|
||||
const applySearch = () => {
|
||||
setPage(1);
|
||||
setGrepFilter(grepInput);
|
||||
};
|
||||
|
||||
const clearSearch = () => {
|
||||
setGrepInput('');
|
||||
setGrepFilter('');
|
||||
setPage(1);
|
||||
};
|
||||
const applySearch = () => { setPage(1); setGrepFilter(grepInput); };
|
||||
const clearSearch = () => { setGrepInput(''); setGrepFilter(''); setPage(1); };
|
||||
|
||||
const handleRepoChange = (repo: string) => {
|
||||
setPage(1);
|
||||
setSelectedBranch(null);
|
||||
setRepoFilter(repo);
|
||||
};
|
||||
|
||||
const treeNodes = useMemo((): TreeNodeInfo[] => [
|
||||
{
|
||||
id: 'all',
|
||||
label: 'All Branches',
|
||||
icon: 'git-branch',
|
||||
isSelected: selectedBranch === null,
|
||||
},
|
||||
...Object.keys(branchMap).map(repoKey => ({
|
||||
id: `repo|${repoKey}`,
|
||||
label: <span style={{ color: REPO_COLOR[repoKey] ?? 'inherit', fontWeight: 500 }}>{repoKey}</span>,
|
||||
icon: (expandedRepos.has(repoKey) ? 'folder-open' : 'folder-close') as TreeNodeInfo['icon'],
|
||||
isExpanded: expandedRepos.has(repoKey),
|
||||
isSelected: false,
|
||||
childNodes: branchMap[repoKey].map(name => ({
|
||||
id: `branch|${repoKey}|${name}`,
|
||||
label: name,
|
||||
icon: 'git-commit' as TreeNodeInfo['icon'],
|
||||
isSelected: selectedBranch?.repoKey === repoKey && selectedBranch?.branch === name,
|
||||
})),
|
||||
})),
|
||||
], [branchMap, expandedRepos, selectedBranch]);
|
||||
|
||||
const handleNodeClick = (node: TreeNodeInfo) => {
|
||||
const id = String(node.id);
|
||||
if (id === 'all') {
|
||||
setPage(1);
|
||||
setSelectedBranch(null);
|
||||
} else if (id.startsWith('branch|')) {
|
||||
const [, repoKey, ...rest] = id.split('|');
|
||||
setPage(1);
|
||||
setSelectedBranch({ repoKey, branch: rest.join('|') });
|
||||
} else if (id.startsWith('repo|')) {
|
||||
const repoKey = id.slice(5);
|
||||
setExpandedRepos(s => {
|
||||
const next = new Set(s);
|
||||
next.has(repoKey) ? next.delete(repoKey) : next.add(repoKey);
|
||||
return next;
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleNodeExpand = (node: TreeNodeInfo) => {
|
||||
const id = String(node.id);
|
||||
if (id.startsWith('repo|')) setExpandedRepos(s => new Set([...s, id.slice(5)]));
|
||||
};
|
||||
|
||||
const handleNodeCollapse = (node: TreeNodeInfo) => {
|
||||
const id = String(node.id);
|
||||
if (id.startsWith('repo|')) setExpandedRepos(s => { const n = new Set(s); n.delete(id.slice(5)); return n; });
|
||||
};
|
||||
|
||||
const doRefresh = () => {
|
||||
const effectiveRepo = selectedBranch ? selectedBranch.repoKey : repoFilter;
|
||||
const effectiveBranch = selectedBranch?.branch;
|
||||
load(page, effectiveRepo, grepFilter, effectiveBranch);
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="page-header">
|
||||
@@ -73,100 +165,132 @@ export default function ChangesetsPage() {
|
||||
<h1>Changesets</h1>
|
||||
<p>Chronological commit timeline across all three repos.</p>
|
||||
</div>
|
||||
<Button icon="refresh" minimal onClick={() => load(page, repoFilter, grepFilter)} />
|
||||
<Button icon="refresh" minimal onClick={doRefresh} />
|
||||
</div>
|
||||
|
||||
{/* Filter bar */}
|
||||
<div className="opc-filter-bar">
|
||||
<HTMLSelect
|
||||
value={repoFilter}
|
||||
onChange={e => handleRepoChange(e.target.value)}
|
||||
options={REPO_OPTIONS}
|
||||
/>
|
||||
<InputGroup
|
||||
leftIcon="search"
|
||||
placeholder="Filter commits by text or OPC number…"
|
||||
value={grepInput}
|
||||
onChange={e => setGrepInput(e.target.value)}
|
||||
onKeyDown={e => { if (e.key === 'Enter') applySearch(); }}
|
||||
style={{ width: 320 }}
|
||||
rightElement={
|
||||
<Button minimal icon="arrow-right" intent={Intent.PRIMARY}
|
||||
disabled={!grepInput.trim()} onClick={applySearch} />
|
||||
}
|
||||
/>
|
||||
{grepFilter && (
|
||||
<Button minimal small icon="cross" text="Clear" onClick={clearSearch} />
|
||||
)}
|
||||
<span className="opc-count-badge">{loading ? '…' : `${commits.length} shown`}</span>
|
||||
</div>
|
||||
<div className="cs-page-with-tree">
|
||||
{/* Branch tree */}
|
||||
<div className="cs-branch-tree">
|
||||
<Tree
|
||||
contents={treeNodes}
|
||||
onNodeClick={handleNodeClick}
|
||||
onNodeExpand={handleNodeExpand}
|
||||
onNodeCollapse={handleNodeCollapse}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
{loading ? (
|
||||
<NonIdealState icon={<Spinner />} title="Loading changesets…" />
|
||||
) : error ? (
|
||||
<NonIdealState icon="warning-sign" title="Could not load commits"
|
||||
description={error} intent={Intent.DANGER} />
|
||||
) : commits.length === 0 ? (
|
||||
<NonIdealState icon="git-commit" title="No commits found"
|
||||
description="Try changing the repo filter or clearing the search." />
|
||||
) : (
|
||||
<div className="cs-timeline">
|
||||
{commits.map(c => (
|
||||
<div
|
||||
key={`${c.repoKey}-${c.hash}`}
|
||||
className="cs-row"
|
||||
onClick={() => setViewingHash(c.hash)}
|
||||
>
|
||||
<div className="cs-row-left">
|
||||
<Tag
|
||||
intent={REPO_INTENT[c.repoKey] ?? Intent.NONE}
|
||||
minimal round
|
||||
className="cs-repo-badge"
|
||||
>
|
||||
{c.repoKey || '?'}
|
||||
</Tag>
|
||||
</div>
|
||||
{/* Main content */}
|
||||
<div className="cs-content-area">
|
||||
{/* Filter bar */}
|
||||
<div className="opc-filter-bar">
|
||||
<HTMLSelect
|
||||
value={repoFilter}
|
||||
onChange={e => handleRepoChange(e.target.value)}
|
||||
options={REPO_OPTIONS}
|
||||
disabled={!!selectedBranch}
|
||||
/>
|
||||
<InputGroup
|
||||
leftIcon="search"
|
||||
placeholder="Filter commits by text or OPC number…"
|
||||
value={grepInput}
|
||||
onChange={e => setGrepInput(e.target.value)}
|
||||
onKeyDown={e => { if (e.key === 'Enter') applySearch(); }}
|
||||
style={{ width: 320 }}
|
||||
rightElement={
|
||||
<Button minimal icon="arrow-right" intent={Intent.PRIMARY}
|
||||
disabled={!grepInput.trim()} onClick={applySearch} />
|
||||
}
|
||||
/>
|
||||
{grepFilter && (
|
||||
<Button minimal small icon="cross" text="Clear" onClick={clearSearch} />
|
||||
)}
|
||||
{selectedBranch && (
|
||||
<Tag
|
||||
minimal
|
||||
intent={REPO_INTENT[selectedBranch.repoKey] ?? Intent.NONE}
|
||||
icon="git-branch"
|
||||
onRemove={() => { setPage(1); setSelectedBranch(null); }}
|
||||
>
|
||||
{selectedBranch.repoKey} / {selectedBranch.branch}
|
||||
</Tag>
|
||||
)}
|
||||
<span className="opc-count-badge">{loading ? '…' : `${commits.length} shown`}</span>
|
||||
</div>
|
||||
|
||||
<div className="cs-row-body">
|
||||
<div className="cs-row-top">
|
||||
<Tooltip content="View diff" placement="top">
|
||||
<code className="opc-commit-hash">{c.shortHash}</code>
|
||||
</Tooltip>
|
||||
<span className="cs-subject">{c.subject}</span>
|
||||
</div>
|
||||
<div className="cs-row-meta">
|
||||
{c.author} · {c.date}
|
||||
{c.files.length > 0 && (
|
||||
<span className="cs-file-count"> · {c.files.length} file{c.files.length !== 1 ? 's' : ''}</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{/* Content */}
|
||||
{loading ? (
|
||||
<NonIdealState icon={<Spinner />} title="Loading changesets…" />
|
||||
) : error ? (
|
||||
<NonIdealState icon="warning-sign" title="Could not load commits"
|
||||
description={error} />
|
||||
) : commits.length === 0 ? (
|
||||
<NonIdealState icon="git-commit" title="No commits found"
|
||||
description="Try changing the repo filter or clearing the search." />
|
||||
) : (
|
||||
<div className="cs-timeline">
|
||||
{commits.map(c => {
|
||||
const branchLabel = getBranchLabel(c.branches ?? []);
|
||||
return (
|
||||
<div
|
||||
key={`${c.repoKey}-${c.hash}`}
|
||||
className="cs-row"
|
||||
onClick={() => setViewingHash(c.hash)}
|
||||
>
|
||||
<div className="cs-row-left">
|
||||
<Tag
|
||||
intent={REPO_INTENT[c.repoKey] ?? Intent.NONE}
|
||||
minimal round
|
||||
className="cs-repo-badge"
|
||||
>
|
||||
{c.repoKey || '?'}
|
||||
</Tag>
|
||||
</div>
|
||||
|
||||
<div className="cs-row-body">
|
||||
<div className="cs-row-top">
|
||||
<Tooltip content="View diff" placement="top">
|
||||
<code className="opc-commit-hash">{c.shortHash}</code>
|
||||
</Tooltip>
|
||||
<span className="cs-subject">{c.subject}</span>
|
||||
</div>
|
||||
<div className="cs-row-meta">
|
||||
{c.author} · {c.date}
|
||||
{c.files.length > 0 && (
|
||||
<span className="cs-file-count"> · {c.files.length} file{c.files.length !== 1 ? 's' : ''}</span>
|
||||
)}
|
||||
{branchLabel && (
|
||||
<Tag minimal className="cs-branch-badge">{branchLabel}</Tag>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
)}
|
||||
|
||||
{/* Pagination */}
|
||||
{!loading && !error && (commits.length > 0 || page > 1) && (
|
||||
<div className="cs-pagination">
|
||||
<Button
|
||||
icon="arrow-left"
|
||||
minimal
|
||||
text="Previous"
|
||||
disabled={page <= 1}
|
||||
onClick={() => setPage(p => p - 1)}
|
||||
/>
|
||||
<span className="cs-page-label">Page {page}</span>
|
||||
<Button
|
||||
rightIcon="arrow-right"
|
||||
minimal
|
||||
text="Next"
|
||||
disabled={!hasMore}
|
||||
onClick={() => setPage(p => p + 1)}
|
||||
/>
|
||||
{/* Pagination */}
|
||||
{!loading && !error && (commits.length > 0 || page > 1) && (
|
||||
<div className="cs-pagination">
|
||||
<Button
|
||||
icon="arrow-left"
|
||||
minimal
|
||||
text="Previous"
|
||||
disabled={page <= 1}
|
||||
onClick={() => setPage(p => p - 1)}
|
||||
/>
|
||||
<span className="cs-page-label">Page {page}</span>
|
||||
<Button
|
||||
rightIcon="arrow-right"
|
||||
minimal
|
||||
text="Next"
|
||||
disabled={!hasMore}
|
||||
onClick={() => setPage(p => p + 1)}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<GitCommitDrawer hash={viewingHash} onClose={() => setViewingHash(null)} />
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user