108 lines
3.7 KiB
JavaScript
108 lines
3.7 KiB
JavaScript
import { useState } from 'react';
|
||
import YamlEditor from './YamlEditor';
|
||
import './ResourceCard.css';
|
||
|
||
function ResourceCard({ resource, projectId, onUpdate, onClick }) {
|
||
const [isExpanded, setIsExpanded] = useState(false);
|
||
const [activeTab, setActiveTab] = useState('summary');
|
||
|
||
const toggleExpand = () => {
|
||
setIsExpanded(!isExpanded);
|
||
if (!isExpanded) {
|
||
onClick && onClick();
|
||
}
|
||
};
|
||
|
||
return (
|
||
<div className={`resource-card ${isExpanded ? 'expanded' : ''}`} data-kind={resource.kind}>
|
||
{/* Card Header */}
|
||
<div className="resource-header" onClick={toggleExpand}>
|
||
<div className="resource-info">
|
||
<div className="resource-kind">
|
||
<span className="kind-badge" data-kind={resource.kind}>{resource.kind}</span>
|
||
{resource.modified && <span className="badge badge-warning">Modified</span>}
|
||
</div>
|
||
<h4 className="resource-name">{resource.name}</h4>
|
||
{resource.namespace && (
|
||
<p className="resource-namespace">ns: {resource.namespace}</p>
|
||
)}
|
||
</div>
|
||
<button className="expand-btn">
|
||
{isExpanded ? '−' : '+'}
|
||
</button>
|
||
</div>
|
||
|
||
{/* Expanded Content */}
|
||
{isExpanded && (
|
||
<div className="resource-content">
|
||
{/* Tabs */}
|
||
<div className="tabs">
|
||
<button
|
||
className={`tab ${activeTab === 'summary' ? 'active' : ''}`}
|
||
onClick={() => setActiveTab('summary')}
|
||
>
|
||
Summary
|
||
</button>
|
||
<button
|
||
className={`tab ${activeTab === 'yaml' ? 'active' : ''}`}
|
||
onClick={() => setActiveTab('yaml')}
|
||
>
|
||
YAML
|
||
</button>
|
||
</div>
|
||
|
||
{/* Tab Content */}
|
||
<div className="tab-content">
|
||
{activeTab === 'summary' && (
|
||
<div className="summary-tab">
|
||
<div className="summary-row">
|
||
<span className="summary-label">API Version:</span>
|
||
<span className="summary-value">{resource.apiVersion}</span>
|
||
</div>
|
||
<div className="summary-row">
|
||
<span className="summary-label">Kind:</span>
|
||
<span className="summary-value">{resource.kind}</span>
|
||
</div>
|
||
<div className="summary-row">
|
||
<span className="summary-label">Name:</span>
|
||
<span className="summary-value">{resource.name}</span>
|
||
</div>
|
||
{resource.namespace && (
|
||
<div className="summary-row">
|
||
<span className="summary-label">Namespace:</span>
|
||
<span className="summary-value">{resource.namespace}</span>
|
||
</div>
|
||
)}
|
||
{resource.labels && Object.keys(resource.labels).length > 0 && (
|
||
<div className="summary-section">
|
||
<h5>Labels</h5>
|
||
{Object.entries(resource.labels).map(([key, value]) => (
|
||
<div key={key} className="label-item">
|
||
<code>{key}: {value}</code>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{activeTab === 'yaml' && (
|
||
<div className="yaml-tab">
|
||
<YamlEditor
|
||
value={resource.rawYaml}
|
||
resourceKind={resource.kind}
|
||
onChange={(newYaml) => onUpdate(resource.uid, newYaml)}
|
||
projectId={projectId}
|
||
resourceUid={resource.uid}
|
||
/>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export default ResourceCard;
|