seaweedfs/weed/admin/view/app/s3vectors_bucket_details.templ

package app

import (
	"bytes"
	"encoding/json"
	"fmt"
	"strings"

	"github.com/seaweedfs/seaweedfs/weed/admin/dash"
)

templ S3VectorsBucketDetails(data dash.S3VectorsBucketData) {
	<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
		<div>
			<h1 class="h2 mb-0">
				<i class="bi bi-bounding-box-circles me-2"></i>{ data.Bucket.Name }
			</h1>
			<nav aria-label="breadcrumb">
				<ol class="breadcrumb mb-0 mt-1">
					<li class="breadcrumb-item"><a href={ dash.PUrl(ctx, "/object-store/vector-buckets") }>Vector Buckets</a></li>
					<li class="breadcrumb-item active" aria-current="page">{ data.Bucket.Name }</li>
				</ol>
			</nav>
		</div>
	</div>
	<div class="card shadow mb-4">
		<div class="card-body">
			<dl class="row mb-0">
				<dt class="col-sm-2">ARN</dt>
				<dd class="col-sm-10"><code>{ data.Bucket.ARN }</code></dd>
				<dt class="col-sm-2">Created</dt>
				<dd class="col-sm-10">{ data.Bucket.CreatedAt.Format("2006-01-02 15:04:05") }</dd>
				<dt class="col-sm-2">Encryption</dt>
				<dd class="col-sm-10">
					if data.Bucket.Encryption != "" {
						<span class="badge bg-success">{ data.Bucket.Encryption }</span>
					} else {
						<span class="text-muted">None</span>
					}
				</dd>
			</dl>
		</div>
	</div>
	<div class="card shadow mb-4">
		<div class="card-header py-3">
			<h6 class="m-0 font-weight-bold text-primary">
				<i class="bi bi-list-ul me-2"></i>{ fmt.Sprintf("%d indexes", data.TotalIndexes) }
				if data.Truncated {
					<span class="text-muted small ms-2">{ fmt.Sprintf("showing the first %d; list the rest with an S3 Vectors client", data.TotalIndexes) }</span>
				}
			</h6>
		</div>
		<div class="card-body">
			<div class="table-responsive">
				<table class="table table-hover" width="100%" cellspacing="0" id="s3vectorsIndexesTable">
					<thead>
						<tr>
							<th>Name</th>
							<th>Data Type</th>
							<th>Dimension</th>
							<th>Distance Metric</th>
							<th>Non-filterable Metadata Keys</th>
							<th>Created</th>
							<th>Actions</th>
						</tr>
					</thead>
					<tbody>
						for _, index := range data.Indexes {
							<tr>
								<td>
									{ index.IndexName }
									<div class="text-muted small">{ index.IndexArn }</div>
								</td>
								<td>{ index.DataType }</td>
								<td>{ fmt.Sprintf("%d", index.Dimension) }</td>
								<td>{ index.DistanceMetric }</td>
								<td>
									if index.MetadataConfiguration != nil && len(index.MetadataConfiguration.NonFilterableMetadataKeys) > 0 {
										<code>{ strings.Join(index.MetadataConfiguration.NonFilterableMetadataKeys, ", ") }</code>
									} else {
										<span class="text-muted">None</span>
									}
								</td>
								<td>{ index.CreationTime.Format("2006-01-02 15:04") }</td>
								<td>
									<button type="button" class="btn btn-outline-danger btn-sm s3vectors-delete-index-btn" data-index-name={ index.IndexName } title="Delete">
										<i class="bi bi-trash"></i>
									</button>
								</td>
							</tr>
						}
						if len(data.Indexes) == 0 {
							<tr>
								<td colspan="7" class="text-center text-muted py-4">
									No indexes. Create one with an S3 Vectors client, e.g. <code>aws s3vectors create-index</code>.
								</td>
							</tr>
						}
					</tbody>
				</table>
			</div>
		</div>
	</div>
	<div class="card shadow mb-4">
		<div class="card-header py-3">
			<h6 class="m-0 font-weight-bold text-primary">
				<i class="bi bi-shield me-2"></i>Bucket Policy
			</h6>
		</div>
		<div class="card-body">
			if data.Policy != "" {
				<pre class="bg-light p-3 border rounded mb-0" id="s3vectorsBucketPolicy">{ indentJSON(data.Policy) }</pre>
			} else {
				<span class="text-muted">No policy. Set one with <code>PutVectorBucketPolicy</code>.</span>
			}
		</div>
	</div>
	<div class="modal fade" id="deleteS3VectorsIndexModal" tabindex="-1" aria-labelledby="deleteS3VectorsIndexModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title" id="deleteS3VectorsIndexModalLabel">
						<i class="bi bi-exclamation-triangle me-2 text-warning"></i>Delete Index
					</h5>
					<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
				</div>
				<div class="modal-body">
					<p>Delete the index <strong id="deleteS3VectorsIndexName"></strong> and all its vectors?</p>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
					<button type="button" class="btn btn-danger" id="deleteS3VectorsIndexBtn">
						<i class="bi bi-trash me-1"></i>Delete
					</button>
				</div>
			</div>
		</div>
	</div>
	<div id="s3vectorsBucketDetails" data-bucket-name={ data.Bucket.Name }></div>
	<script>
		document.addEventListener('DOMContentLoaded', function () {
			const bucket = document.getElementById('s3vectorsBucketDetails').dataset.bucketName;
			const modalEl = document.getElementById('deleteS3VectorsIndexModal');
			const modal = new bootstrap.Modal(modalEl);
			document.querySelectorAll('.s3vectors-delete-index-btn').forEach(button => {
				button.addEventListener('click', function () {
					modalEl.dataset.indexName = this.dataset.indexName || '';
					document.getElementById('deleteS3VectorsIndexName').textContent = this.dataset.indexName || '';
					modal.show();
				});
			});
			document.getElementById('deleteS3VectorsIndexBtn').addEventListener('click', async function () {
				const index = modalEl.dataset.indexName;
				if (!bucket || !index) return;
				try {
					const response = await fetch(s3tBasePath('/api/s3vectors/indexes?bucket=' + encodeURIComponent(bucket) + '&index=' + encodeURIComponent(index)), { method: 'DELETE', headers: s3tWriteHeaders() });
					const data = await response.json();
					if (!response.ok) {
						alert(data.error || 'Failed to delete index');
						return;
					}
					location.reload();
				} catch (error) {
					alert('Failed to delete index: ' + error.message);
				}
			});
		});
	</script>
}

const maxIndentedJSONDepth = 32

func indentJSON(s string) string {
	if jsonDepth(s) > maxIndentedJSONDepth {
		return s
	}
	var out bytes.Buffer
	if json.Indent(&out, []byte(s), "", "  ") != nil {
		return s
	}
	return out.String()
}

func jsonDepth(s string) int {
	depth, maxDepth := 0, 0
	inString, escaped := false, false
	for i := 0; i < len(s); i++ {
		c := s[i]
		switch {
		case escaped:
			escaped = false
		case inString:
			if c == '\\' {
				escaped = true
			} else if c == '"' {
				inString = false
			}
		case c == '"':
			inString = true
		case c == '{' || c == '[':
			depth++
			if depth > maxDepth {
				maxDepth = depth
			}
		case c == '}' || c == ']':
			depth--
		}
	}
	return maxDepth
}