initial
This commit is contained in:
286
ts_web/elements/tsview-s3-keys.ts
Normal file
286
ts_web/elements/tsview-s3-keys.ts
Normal file
@@ -0,0 +1,286 @@
|
||||
import * as plugins from '../plugins.js';
|
||||
import { apiService, type IS3Object } from '../services/index.js';
|
||||
|
||||
const { html, css, cssManager, customElement, property, state, DeesElement } = plugins;
|
||||
|
||||
@customElement('tsview-s3-keys')
|
||||
export class TsviewS3Keys extends DeesElement {
|
||||
@property({ type: String })
|
||||
public accessor bucketName: string = '';
|
||||
|
||||
@property({ type: String })
|
||||
public accessor currentPrefix: string = '';
|
||||
|
||||
@state()
|
||||
private accessor allKeys: IS3Object[] = [];
|
||||
|
||||
@state()
|
||||
private accessor prefixes: string[] = [];
|
||||
|
||||
@state()
|
||||
private accessor loading: boolean = false;
|
||||
|
||||
@state()
|
||||
private accessor selectedKey: string = '';
|
||||
|
||||
@state()
|
||||
private accessor filterText: string = '';
|
||||
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
:host {
|
||||
display: block;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.keys-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.filter-bar {
|
||||
padding: 12px;
|
||||
border-bottom: 1px solid #333;
|
||||
}
|
||||
|
||||
.filter-input {
|
||||
width: 100%;
|
||||
padding: 8px 12px;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
border: 1px solid #444;
|
||||
border-radius: 6px;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.filter-input:focus {
|
||||
outline: none;
|
||||
border-color: #6366f1;
|
||||
}
|
||||
|
||||
.filter-input::placeholder {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.keys-list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
thead {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: #1a1a2e;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
th {
|
||||
text-align: left;
|
||||
padding: 10px 12px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: #666;
|
||||
text-transform: uppercase;
|
||||
border-bottom: 1px solid #333;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 8px 12px;
|
||||
font-size: 13px;
|
||||
border-bottom: 1px solid #2a2a3e;
|
||||
}
|
||||
|
||||
tr:hover td {
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
}
|
||||
|
||||
tr.selected td {
|
||||
background: rgba(99, 102, 241, 0.15);
|
||||
}
|
||||
|
||||
.key-cell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.key-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.folder-icon {
|
||||
color: #fbbf24;
|
||||
}
|
||||
|
||||
.key-name {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.size-cell {
|
||||
color: #888;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
padding: 32px;
|
||||
text-align: center;
|
||||
color: #666;
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
async connectedCallback() {
|
||||
super.connectedCallback();
|
||||
await this.loadObjects();
|
||||
}
|
||||
|
||||
updated(changedProperties: Map<string, unknown>) {
|
||||
if (changedProperties.has('bucketName') || changedProperties.has('currentPrefix')) {
|
||||
this.loadObjects();
|
||||
}
|
||||
}
|
||||
|
||||
private async loadObjects() {
|
||||
this.loading = true;
|
||||
try {
|
||||
const result = await apiService.listObjects(this.bucketName, this.currentPrefix, '/');
|
||||
this.allKeys = result.objects;
|
||||
this.prefixes = result.prefixes;
|
||||
} catch (err) {
|
||||
console.error('Error loading objects:', err);
|
||||
this.allKeys = [];
|
||||
this.prefixes = [];
|
||||
}
|
||||
this.loading = false;
|
||||
}
|
||||
|
||||
private handleFilterInput(e: Event) {
|
||||
this.filterText = (e.target as HTMLInputElement).value;
|
||||
}
|
||||
|
||||
private selectKey(key: string, isFolder: boolean) {
|
||||
this.selectedKey = key;
|
||||
|
||||
if (isFolder) {
|
||||
this.dispatchEvent(
|
||||
new CustomEvent('navigate', {
|
||||
detail: { prefix: key },
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
})
|
||||
);
|
||||
} else {
|
||||
this.dispatchEvent(
|
||||
new CustomEvent('key-selected', {
|
||||
detail: { key },
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
})
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
private getFileName(path: string): string {
|
||||
const parts = path.replace(/\/$/, '').split('/');
|
||||
return parts[parts.length - 1] || path;
|
||||
}
|
||||
|
||||
private formatSize(bytes?: number): string {
|
||||
if (!bytes) return '-';
|
||||
const units = ['B', 'KB', 'MB', 'GB', 'TB'];
|
||||
let size = bytes;
|
||||
let unitIndex = 0;
|
||||
while (size >= 1024 && unitIndex < units.length - 1) {
|
||||
size /= 1024;
|
||||
unitIndex++;
|
||||
}
|
||||
return `${size.toFixed(unitIndex > 0 ? 1 : 0)} ${units[unitIndex]}`;
|
||||
}
|
||||
|
||||
private get filteredItems() {
|
||||
const filter = this.filterText.toLowerCase();
|
||||
const folders = this.prefixes
|
||||
.filter((p) => !filter || this.getFileName(p).toLowerCase().includes(filter))
|
||||
.map((p) => ({ key: p, isFolder: true, size: undefined }));
|
||||
const files = this.allKeys
|
||||
.filter((o) => !filter || this.getFileName(o.key).toLowerCase().includes(filter))
|
||||
.map((o) => ({ key: o.key, isFolder: false, size: o.size }));
|
||||
return [...folders, ...files];
|
||||
}
|
||||
|
||||
render() {
|
||||
return html`
|
||||
<div class="keys-container">
|
||||
<div class="filter-bar">
|
||||
<input
|
||||
type="text"
|
||||
class="filter-input"
|
||||
placeholder="Filter files..."
|
||||
.value=${this.filterText}
|
||||
@input=${this.handleFilterInput}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="keys-list">
|
||||
${this.loading
|
||||
? html`<div class="empty-state">Loading...</div>`
|
||||
: this.filteredItems.length === 0
|
||||
? html`<div class="empty-state">No objects found</div>`
|
||||
: html`
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th style="width: 100px;">Size</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
${this.filteredItems.map(
|
||||
(item) => html`
|
||||
<tr
|
||||
class="${this.selectedKey === item.key ? 'selected' : ''}"
|
||||
@click=${() => this.selectKey(item.key, item.isFolder)}
|
||||
>
|
||||
<td>
|
||||
<div class="key-cell">
|
||||
${item.isFolder
|
||||
? html`
|
||||
<svg class="key-icon folder-icon" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" />
|
||||
</svg>
|
||||
`
|
||||
: html`
|
||||
<svg class="key-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
|
||||
</svg>
|
||||
`}
|
||||
<span class="key-name">${this.getFileName(item.key)}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="size-cell">
|
||||
${item.isFolder ? '-' : this.formatSize(item.size)}
|
||||
</td>
|
||||
</tr>
|
||||
`
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
`}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user