Zakaria
536 lines
22 KiB
TypeScript
536 lines
22 KiB
TypeScript
import {useState} from 'react'
|
|
import {useMutation, useQueryClient} from '@tanstack/react-query'
|
|
import { K8sEngineDetails } from "@/features/k8s/K8sEngineDetails";
|
|
import { LogsExplorerPanel } from "@/components/LogsExplorerPanel";
|
|
import { LogsQueryPanel } from "@/components/LogsQueryPanel";
|
|
import type { CloudProvider } from "@/types/cloud";
|
|
import type { CloudResource, StorageObject } from "@/types/resource";
|
|
import {formatBytes} from "@/lib/format";
|
|
import {CopyValueButton} from "@/components/CopyValueButton";
|
|
import {rebootCloudResource, startCloudResource, stopCloudResource} from "@/api/cloudProxyClient";
|
|
import {cloudQueryKeys} from "@/api/queries/cloudQueries";
|
|
import {decodeRawMime, htmlMimePart, inlineMimeImages, parseMimeAttachments} from '@/lib/emailMime'
|
|
|
|
interface ResourceInspectorProps {
|
|
resource?: CloudResource;
|
|
object?: StorageObject;
|
|
cloud?: CloudProvider;
|
|
runtimeReachable?: boolean;
|
|
serviceName?: string;
|
|
}
|
|
|
|
export function ResourceInspector({
|
|
resource,
|
|
object,
|
|
cloud,
|
|
runtimeReachable,
|
|
serviceName,
|
|
}: ResourceInspectorProps) {
|
|
if (!resource) {
|
|
return (
|
|
<div className="resource-inspector empty compact">
|
|
<p className="eyebrow">Resource Inspector</p>
|
|
<h3>Select a resource</h3>
|
|
<p>Inspect normalized metadata returned by the cloud proxy.</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (object) {
|
|
return (
|
|
<aside className="resource-inspector">
|
|
<div className="widget-header">
|
|
<h3>{object.name}</h3>
|
|
<span className="badge neutral">{object.type}</span>
|
|
</div>
|
|
<div className="inspector-grid">
|
|
<InspectorItem label="Cloud" value={resource.cloud} />
|
|
<InspectorItem label="Resource" value={resource.name} />
|
|
<InspectorItem label="Key" value={object.key} />
|
|
<InspectorItem
|
|
label="Size"
|
|
value={object.size === null ? "-" : formatBytes(object.size)}
|
|
/>
|
|
<InspectorItem
|
|
label="Last Modified"
|
|
value={object.lastModified ?? "-"}
|
|
/>
|
|
</div>
|
|
<MetadataPanel metadata={object.metadata} />
|
|
</aside>
|
|
);
|
|
}
|
|
|
|
if (resource.type === 'email') {
|
|
return <EmailInspector key={resource.id} resource={resource} />
|
|
}
|
|
|
|
const tags = getTags(resource.metadata.tags);
|
|
const tagsUnavailable = getBooleanMetadata(resource.metadata.tagsUnavailable) ?? false;
|
|
const versioning = getStringMetadata(resource.metadata.versioning);
|
|
const versioningEnabled = getBooleanMetadata(
|
|
resource.metadata.versioningEnabled,
|
|
);
|
|
const isDatabase =
|
|
resource.service === "database" || resource.type === "db-instance";
|
|
const isAwsDatabase = isDatabase && resource.cloud === "aws";
|
|
const isK8sEngine = resource.service === "k8s" || resource.type === "cluster";
|
|
const isLambda =
|
|
resource.service === "serverless" || resource.type === "lambda";
|
|
const isLogGroup = resource.cloud === "aws" && (resource.service === "logs" || resource.type === "log-group");
|
|
|
|
return (
|
|
<aside className="resource-inspector">
|
|
<div className="widget-header">
|
|
<h3>{resource.name}</h3>
|
|
<span className="badge neutral">{resource.type}</span>
|
|
</div>
|
|
<div className="inspector-grid">
|
|
<InspectorItem label="Cloud" value={resource.cloud} />
|
|
<InspectorItem label="Resource ID" value={resource.id} copyable />
|
|
<InspectorItem label="Service" value={serviceName ?? resource.service} />
|
|
<InspectorItem label="Region" value={resource.region ?? "-"} />
|
|
<InspectorItem label="Created At" value={resource.createdAt ?? "-"} />
|
|
{resource.status && (
|
|
<InspectorItem label="Status" value={resource.status} />
|
|
)}
|
|
{resource.engine && (
|
|
<InspectorItem label="Engine" value={resource.engine} />
|
|
)}
|
|
{resource.version && (
|
|
<InspectorItem label="Version" value={resource.version} />
|
|
)}
|
|
{resource.instanceClass && (
|
|
<InspectorItem label="Class" value={resource.instanceClass} />
|
|
)}
|
|
{versioning && <InspectorItem label="Versioning" value={versioning} />}
|
|
{versioningEnabled !== null && (
|
|
<InspectorItem
|
|
label="Versioning Enabled"
|
|
value={versioningEnabled ? "Yes" : "No"}
|
|
/>
|
|
)}
|
|
<InspectorItem
|
|
label="Tags"
|
|
value={tagsUnavailable ? "Unavailable" : `${tags.length}`}
|
|
/>
|
|
{isLambda && (
|
|
<>
|
|
<InspectorItem
|
|
label="Runtime"
|
|
value={getStringMetadata(resource.metadata.runtime) ?? "-"}
|
|
/>
|
|
<InspectorItem
|
|
label="Handler"
|
|
value={getStringMetadata(resource.metadata.handler) ?? "-"}
|
|
/>
|
|
<InspectorItem
|
|
label="Package Type"
|
|
value={getStringMetadata(resource.metadata.packageType) ?? "-"}
|
|
/>
|
|
</>
|
|
)}
|
|
</div>
|
|
<section className="inspector-section">
|
|
<p className="metric-label">Tags</p>
|
|
{tagsUnavailable ? (
|
|
<p className="muted compact-text">
|
|
Tags unavailable: the provider denied or failed the tag lookup.
|
|
</p>
|
|
) : tags.length === 0 ? (
|
|
<p className="muted compact-text">
|
|
No tags returned for this resource.
|
|
</p>
|
|
) : (
|
|
<div className="metadata-tags">
|
|
{tags.map((tag) => (
|
|
<span className="metadata-tag" key={`${tag.key}:${tag.value}`}>
|
|
<strong>{tag.key}</strong>
|
|
<span>{tag.value}</span>
|
|
</span>
|
|
))}
|
|
</div>
|
|
)}
|
|
</section>
|
|
{isDatabase && (
|
|
<DatabaseConnectionsSection metadata={resource.metadata} engine={resource.engine} status={resource.status} />
|
|
)}
|
|
{isAwsDatabase && <DatabaseLifecycleSection resource={resource} />}
|
|
{isDatabase && !isAwsDatabase && (
|
|
<ProviderDatabaseSection cloud={resource.cloud} />
|
|
)}
|
|
{isK8sEngine && (
|
|
<K8sEngineDetails cloud={resource.cloud} clusterName={resource.name} />
|
|
)}
|
|
{isLambda && (
|
|
<section className="inspector-section">
|
|
<p className="metric-label">Lambda Details</p>
|
|
<div className="inspector-grid compact-grid">
|
|
<InspectorItem
|
|
label="ARN"
|
|
value={getStringMetadata(resource.metadata.arn) ?? "-"}
|
|
copyable
|
|
/>
|
|
<InspectorItem
|
|
label="Last Modified"
|
|
value={getStringMetadata(resource.metadata.lastModified) ?? "-"}
|
|
/>
|
|
<InspectorItem
|
|
label="Memory"
|
|
value={
|
|
getNumberMetadata(resource.metadata.memorySize) === null
|
|
? "-"
|
|
: `${getNumberMetadata(resource.metadata.memorySize)} MB`
|
|
}
|
|
/>
|
|
<InspectorItem
|
|
label="Timeout"
|
|
value={
|
|
getNumberMetadata(resource.metadata.timeout) === null
|
|
? "-"
|
|
: `${getNumberMetadata(resource.metadata.timeout)}s`
|
|
}
|
|
/>
|
|
</div>
|
|
</section>
|
|
)}
|
|
<pre className="metadata-block">
|
|
{JSON.stringify(resource.metadata, null, 2)}
|
|
</pre>
|
|
<MetadataPanel metadata={resource.metadata} />
|
|
{isLogGroup && cloud && (
|
|
<>
|
|
<LogsQueryPanel cloud={cloud} logGroupName={resource.id} runtimeReachable={runtimeReachable ?? false} />
|
|
<LogsExplorerPanel cloud={cloud} resource={resource} runtimeReachable={runtimeReachable ?? false} />
|
|
</>
|
|
)}
|
|
</aside>
|
|
);
|
|
}
|
|
|
|
function EmailInspector({resource}: {resource: CloudResource}) {
|
|
const [tab, setTab] = useState<'preview' | 'text' | 'raw'>('preview')
|
|
const source = getStringMetadata(resource.metadata.source) ?? '-'
|
|
const toAddresses = getStringList(resource.metadata.toAddresses)
|
|
const ccAddresses = getStringList(resource.metadata.ccAddresses)
|
|
const bccAddresses = getStringList(resource.metadata.bccAddresses)
|
|
const replyToAddresses = getStringList(resource.metadata.replyToAddresses)
|
|
const textBody = getStringMetadata(resource.metadata.textBody)
|
|
const htmlBody = getStringMetadata(resource.metadata.htmlBody)
|
|
const rawData = getStringMetadata(resource.metadata.rawData)
|
|
const rawMime = rawData ? decodeRawMime(rawData) : null
|
|
const attachments = rawMime ? parseMimeAttachments(rawMime) : []
|
|
const inlineImages = rawMime ? inlineMimeImages(rawMime) : {}
|
|
const rawHtmlBody = rawMime ? htmlMimePart(rawMime) : null
|
|
const previewHtml = htmlBody ?? rawHtmlBody
|
|
const hasPreview = Boolean(previewHtml || textBody)
|
|
const activeTab = tab === 'preview' && !hasPreview ? (rawData ? 'raw' : 'text') : tab
|
|
|
|
return (
|
|
<aside className="resource-inspector">
|
|
<div className="widget-header">
|
|
<h3 title={resource.name}>{resource.name}</h3>
|
|
<span className="badge neutral">{getStringMetadata(resource.metadata.messageType) ?? 'email'}</span>
|
|
</div>
|
|
<div className="inspector-grid">
|
|
<InspectorItem label="From" value={source} />
|
|
<InspectorItem label="To" value={toAddresses.join(', ') || '-'} />
|
|
{ccAddresses.length > 0 && <InspectorItem label="Cc" value={ccAddresses.join(', ')} />}
|
|
{bccAddresses.length > 0 && <InspectorItem label="Bcc" value={bccAddresses.join(', ')} />}
|
|
{replyToAddresses.length > 0 && <InspectorItem label="Reply-To" value={replyToAddresses.join(', ')} />}
|
|
<InspectorItem label="Captured At" value={resource.createdAt ?? '-'} />
|
|
</div>
|
|
<section className="inspector-section">
|
|
<div className="drawer-tabs" style={{marginBottom: 10}}>
|
|
<button className={`drawer-tab ${activeTab === 'preview' ? 'active' : ''}`} disabled={!hasPreview} onClick={() => setTab('preview')}>Preview</button>
|
|
<button className={`drawer-tab ${activeTab === 'text' ? 'active' : ''}`} disabled={!textBody} onClick={() => setTab('text')}>Text</button>
|
|
<button className={`drawer-tab ${activeTab === 'raw' ? 'active' : ''}`} disabled={!rawData} onClick={() => setTab('raw')}>Raw</button>
|
|
{rawMime && <button className="button compact" type="button" onClick={() => downloadRawEmail(resource.id, rawMime)}>Download MIME</button>}
|
|
</div>
|
|
{activeTab === 'preview' && previewHtml ? (
|
|
<iframe
|
|
title="Email HTML preview"
|
|
sandbox=""
|
|
referrerPolicy="no-referrer"
|
|
srcDoc={safeEmailDocument(previewHtml, inlineImages)}
|
|
style={{width: '100%', minHeight: 260, border: '1px solid var(--border)', borderRadius: 4, background: '#fff'}}
|
|
/>
|
|
) : activeTab === 'preview' ? (
|
|
<pre className="metadata-block" style={{whiteSpace: 'pre-wrap', margin: 0}}>{textBody ?? 'No preview content captured.'}</pre>
|
|
) : activeTab === 'text' ? (
|
|
<pre className="metadata-block" style={{whiteSpace: 'pre-wrap', margin: 0}}>{textBody ?? 'No text body captured.'}</pre>
|
|
) : (
|
|
<pre className="metadata-block" style={{whiteSpace: 'pre-wrap', wordBreak: 'break-all', margin: 0}}>{rawMime ?? 'No raw MIME data captured.'}</pre>
|
|
)}
|
|
</section>
|
|
{attachments.length > 0 && <section className="inspector-section">
|
|
<p className="metric-label">MIME attachments</p>
|
|
{attachments.map((attachment, index) => <div className="apigateway-route-item" key={`${attachment.filename}-${index}`}>
|
|
<div><code>{attachment.filename ?? '(unnamed MIME part)'}</code><small>{attachment.contentType} · {attachment.disposition}</small>{attachment.contentId && <small>Content-ID: {attachment.contentId} ({attachment.disposition === 'inline' ? 'inline' : 'referenced part'})</small>}</div>
|
|
</div>)}
|
|
</section>}
|
|
</aside>
|
|
)
|
|
}
|
|
|
|
function downloadRawEmail(id: string, rawData: string): void {
|
|
const url = URL.createObjectURL(new Blob([rawData], {type: 'message/rfc822'}))
|
|
const link = document.createElement('a')
|
|
link.href = url
|
|
link.download = `${id || 'message'}.eml`
|
|
link.click()
|
|
URL.revokeObjectURL(url)
|
|
}
|
|
|
|
|
|
function safeEmailDocument(html: string, inlineImages: Record<string, string> = {}): string {
|
|
const withInlineImages = html.replace(/cid:([^"'\s>]+)/gi, (reference, contentId: string) => inlineImages[contentId] ?? reference)
|
|
return `<!doctype html><html><head><meta charset="utf-8"><meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src data:; style-src 'unsafe-inline'"></head><body>${withInlineImages}</body></html>`
|
|
}
|
|
|
|
function ProviderDatabaseSection({ cloud }: { cloud: string }) {
|
|
const label =
|
|
cloud === "azure"
|
|
? "Azure database"
|
|
: cloud === "gcp"
|
|
? "Google Cloud SQL"
|
|
: "Database";
|
|
|
|
return (
|
|
<section className="inspector-section">
|
|
<p className="metric-label">Lifecycle</p>
|
|
<p className="muted compact-text">
|
|
{label} lifecycle and snapshot actions are exposed through the
|
|
normalized resource metadata only.
|
|
</p>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
function DatabaseConnectionsSection({
|
|
metadata,
|
|
engine,
|
|
status,
|
|
}: {
|
|
metadata: Record<string, unknown>;
|
|
engine?: string | null;
|
|
status?: string | null;
|
|
}) {
|
|
const endpoint = getRecordMetadata(metadata.endpoint);
|
|
const subnetGroup = getRecordMetadata(metadata.subnetGroup);
|
|
const securityGroups = getSecurityGroups(metadata.vpcSecurityGroups);
|
|
const address = getStringMetadata(endpoint?.address);
|
|
const port = getNumberMetadata(endpoint?.port);
|
|
const vpcId = getStringMetadata(subnetGroup?.vpcId);
|
|
const subnetGroupName = getStringMetadata(subnetGroup?.name);
|
|
const subnetGroupStatus = getStringMetadata(subnetGroup?.status);
|
|
|
|
return (
|
|
<section className="inspector-section">
|
|
<p className="metric-label">Connections</p>
|
|
<DatabaseConnectionHealth status={status} hasEndpoint={Boolean(address && port !== null)} />
|
|
<div className="inspector-grid compact-grid">
|
|
<InspectorItem label="Endpoint" value={address ?? "-"} />
|
|
<InspectorItem
|
|
label="Port"
|
|
value={port === null ? "-" : String(port)}
|
|
/>
|
|
<InspectorItem label="VPC" value={vpcId ?? "-"} />
|
|
<InspectorItem label="Subnet Group" value={subnetGroupName ?? "-"} />
|
|
<InspectorItem label="Subnet Status" value={subnetGroupStatus ?? "-"} />
|
|
<InspectorItem
|
|
label="Security Groups"
|
|
value={`${securityGroups.length}`}
|
|
/>
|
|
</div>
|
|
{address && port !== null && engine && <DatabaseConnectionCommand engine={engine} address={address} port={port} database={getStringMetadata(metadata.dbName) ?? (engine.includes('postgres') ? 'postgres' : '')} username={getStringMetadata(metadata.masterUsername) ?? (engine.includes('postgres') ? 'postgres' : 'root')} />}
|
|
{securityGroups.length > 0 && (
|
|
<div className="metadata-tags">
|
|
{securityGroups.map((group) => (
|
|
<span className="metadata-tag" key={`${group.id}:${group.status}`}>
|
|
<strong>{group.id}</strong>
|
|
<span>{group.status}</span>
|
|
</span>
|
|
))}
|
|
</div>
|
|
)}
|
|
</section>
|
|
);
|
|
}
|
|
|
|
function DatabaseConnectionHealth({status, hasEndpoint}: {status?: string | null; hasEndpoint: boolean}) {
|
|
const normalized = status?.toLowerCase()
|
|
const state = normalized === 'available' && hasEndpoint
|
|
? {label: 'Ready', detail: 'The provider reports this instance as available with a connection endpoint.'}
|
|
: normalized === 'failed'
|
|
? {label: 'Unavailable', detail: 'The provider reports the backing database as failed.'}
|
|
: !hasEndpoint
|
|
? {label: 'Endpoint unavailable', detail: 'The provider has not returned a usable database endpoint.'}
|
|
: {label: status ?? 'Unknown', detail: 'Connection readiness follows the provider-reported instance status.'}
|
|
|
|
return <p className="muted compact-text" role="status"><strong>Connection health: {state.label}.</strong> {state.detail}</p>
|
|
}
|
|
|
|
function DatabaseConnectionCommand({ engine, address, port, database, username }: { engine: string; address: string; port: number; database: string; username: string }) {
|
|
const host = address.startsWith('172.') ? 'localhost' : address
|
|
const command = engine.includes('postgres')
|
|
? `psql "host=${host} port=${port} dbname=${database} user=${username} password=<password>"`
|
|
: engine.includes('mysql') || engine.includes('mariadb')
|
|
? `mysql --host=${host} --port=${port} --user=${username} --password ${database}`
|
|
: `sqlcmd -S ${host},${port} -U ${username} -P <password> -d ${database}`
|
|
const uri = engine.includes('postgres')
|
|
? `postgresql://${username}:<password>@${host}:${port}/${database}`
|
|
: engine.includes('mysql') || engine.includes('mariadb')
|
|
? `mysql://${username}:<password>@${host}:${port}/${database}`
|
|
: `Server=${host},${port};Database=${database};User Id=${username};Password=<password>;`
|
|
return <div className="metadata-block"><p className="metric-label">Terminal connection</p><p className="copy-value mono">{command}<CopyValueButton value={command} label="Connection command" /></p><p className="metric-label">Client connection URI</p><p className="copy-value mono">{uri}<CopyValueButton value={uri} label="Connection URI" /></p><p className="muted compact-text">Paste the URI into a compatible database client, then replace the password placeholder. The password is never retained by the console.</p></div>
|
|
}
|
|
|
|
function DatabaseLifecycleSection({resource}: {resource: CloudResource}) {
|
|
const queryClient = useQueryClient()
|
|
const lifecycle = useMutation({
|
|
mutationFn: async (action: "start" | "stop" | "reboot") => {
|
|
if (action === "start") return startCloudResource(resource.cloud, resource.service, resource.id)
|
|
if (action === "stop") return stopCloudResource(resource.cloud, resource.service, resource.id)
|
|
return rebootCloudResource(resource.cloud, resource.service, resource.id)
|
|
},
|
|
onSuccess: () => {
|
|
void queryClient.invalidateQueries({queryKey: cloudQueryKeys.resources(resource.cloud, resource.service)})
|
|
void queryClient.invalidateQueries({queryKey: cloudQueryKeys.resource(resource.cloud, resource.service, resource.id)})
|
|
},
|
|
})
|
|
const status = resource.status?.toLowerCase()
|
|
const isPending = lifecycle.isPending
|
|
|
|
return (
|
|
<section className="inspector-section">
|
|
<p className="metric-label">Lifecycle</p>
|
|
<div className="lifecycle-actions">
|
|
<button className="button compact" type="button" disabled={isPending || status !== "stopped"} onClick={() => lifecycle.mutate("start")}>
|
|
Start
|
|
</button>
|
|
<button className="button compact" type="button" disabled={isPending || status !== "available"} onClick={() => lifecycle.mutate("stop")}>
|
|
Stop
|
|
</button>
|
|
<button className="button compact" type="button" disabled={isPending || status !== "available"} onClick={() => lifecycle.mutate("reboot")}>
|
|
Reboot
|
|
</button>
|
|
</div>
|
|
<p className="muted compact-text">
|
|
Current status: {resource.status ?? "unknown"}.
|
|
</p>
|
|
{lifecycle.error && <p className="muted compact-text">{lifecycle.error instanceof Error ? lifecycle.error.message : "Unable to update DB instance lifecycle."}</p>}
|
|
</section>
|
|
);
|
|
}
|
|
|
|
|
|
function InspectorItem({ label, value, copyable = false }: { label: string; value: string; copyable?: boolean }) {
|
|
return (
|
|
<div>
|
|
<p className="metric-label">{label}</p>
|
|
<p className="metric-value mono copy-value">
|
|
{value}
|
|
{copyable && value !== "-" && <CopyValueButton value={value} label={label} />}
|
|
</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function MetadataPanel({ metadata }: { metadata: Record<string, unknown> }) {
|
|
const rows = Object.entries(metadata).filter(
|
|
([, value]) => value !== undefined && value !== null && value !== "",
|
|
);
|
|
|
|
if (rows.length === 0) {
|
|
return (
|
|
<div className="metadata-block empty-metadata">
|
|
<span>No metadata returned</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="metadata-block metadata-table">
|
|
{rows.map(([key, value]) => (
|
|
<div key={key}>
|
|
<span>{humanizeKey(key)}</span>
|
|
<span className="copy-value">
|
|
<code>{formatMetadataValue(value)}</code>
|
|
{isCopyableMetadata(key, value) && <CopyValueButton value={formatMetadataValue(value)} label={humanizeKey(key)} />}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function isCopyableMetadata(key: string, value: unknown): value is string | number {
|
|
return (typeof value === "string" || typeof value === "number") && /id$|arn|ip|endpoint|url|uri|key|hash|token/i.test(key);
|
|
}
|
|
|
|
function formatMetadataValue(value: unknown): string {
|
|
return typeof value === "object" ? JSON.stringify(value) : String(value);
|
|
}
|
|
|
|
function humanizeKey(value: string): string {
|
|
return value
|
|
.replace(/([a-z])([A-Z])/g, "$1 $2")
|
|
.replace(/[_-]+/g, " ")
|
|
.replace(/\b\w/g, (char) => char.toUpperCase());
|
|
}
|
|
|
|
|
|
function getStringMetadata(value: unknown): string | null {
|
|
return typeof value === "string" ? value : null;
|
|
}
|
|
|
|
function getStringList(value: unknown): string[] {
|
|
return Array.isArray(value)
|
|
? value.filter((entry): entry is string => typeof entry === "string")
|
|
: [];
|
|
}
|
|
|
|
function getBooleanMetadata(value: unknown): boolean | null {
|
|
return typeof value === "boolean" ? value : null;
|
|
}
|
|
|
|
function getNumberMetadata(value: unknown): number | null {
|
|
return typeof value === "number" ? value : null;
|
|
}
|
|
|
|
function getRecordMetadata(value: unknown): Record<string, unknown> | null {
|
|
return value && typeof value === "object" && !Array.isArray(value)
|
|
? (value as Record<string, unknown>)
|
|
: null;
|
|
}
|
|
|
|
function getTags(value: unknown): Array<{ key: string; value: string }> {
|
|
if (!Array.isArray(value)) return [];
|
|
return value.flatMap((item) => {
|
|
if (!item || typeof item !== "object") return [];
|
|
const tag = item as Record<string, unknown>;
|
|
return typeof tag.key === "string" && typeof tag.value === "string"
|
|
? [{ key: tag.key, value: tag.value }]
|
|
: [];
|
|
});
|
|
}
|
|
|
|
function getSecurityGroups(
|
|
value: unknown,
|
|
): Array<{ id: string; status: string }> {
|
|
if (!Array.isArray(value)) return [];
|
|
return value.flatMap((item) => {
|
|
if (!item || typeof item !== "object") return [];
|
|
const group = item as Record<string, unknown>;
|
|
return typeof group.id === "string"
|
|
? [
|
|
{
|
|
id: group.id,
|
|
status: typeof group.status === "string" ? group.status : "-",
|
|
},
|
|
]
|
|
: [];
|
|
});
|
|
}
|