Spaces:

jebin2
/

apigateway

Sleeping

App Files Files Community

jebin2 commited on 21 days ago

Commit

0c30f00

1 Parent(s): a2c1726

Add HTML UI with paginated table view

Browse files

Files changed (2) hide show

app.py +71 -1
templates/index.html +337 -0

app.py CHANGED Viewed

@@ -10,8 +10,10 @@ from typing import Optional
 from fastapi import FastAPI, Query, Request, Depends, HTTPException, status
 from fastapi.middleware.cors import CORSMiddleware
-from fastapi.responses import JSONResponse
 from sqlalchemy.ext.asyncio import AsyncSession
 from database import get_db, init_db
 from models import BlinkData
@@ -70,6 +72,74 @@ async def health_check():
     return {"status": "healthy", "service": "url-blink-api"}
 @app.get("/blink")
 async def blink(
     request: Request,

 from fastapi import FastAPI, Query, Request, Depends, HTTPException, status
 from fastapi.middleware.cors import CORSMiddleware
+from fastapi.responses import JSONResponse, HTMLResponse
+from fastapi.staticfiles import StaticFiles
 from sqlalchemy.ext.asyncio import AsyncSession
+from sqlalchemy import select, func
 from database import get_db, init_db
 from models import BlinkData
     return {"status": "healthy", "service": "url-blink-api"}
+@app.get("/", response_class=HTMLResponse)
+async def root():
+    """
+    Serve the main HTML page.
+    """
+    import os
+    template_path = os.path.join(os.path.dirname(__file__), "templates", "index.html")
+    with open(template_path, "r") as f:
+        return HTMLResponse(content=f.read())
+@app.get("/api/data")
+async def get_data(
+    page: int = Query(1, ge=1, description="Page number"),
+    limit: int = Query(100, ge=1, le=500, description="Items per page"),
+    db: AsyncSession = Depends(get_db)
+):
+    """
+    Get paginated blink data.
+    Args:
+        page: Page number (1-indexed)
+        limit: Number of items per page
+        db: Database session
+    Returns:
+        Paginated list of blink data records
+    """
+    try:
+        offset = (page - 1) * limit
+        # Get total count
+        total_result = await db.execute(select(func.count(BlinkData.id)))
+        total = total_result.scalar() or 0
+        # Get unique users count
+        unique_result = await db.execute(select(func.count(func.distinct(BlinkData.user_id))))
+        unique_users = unique_result.scalar() or 0
+        # Get paginated items
+        query = select(BlinkData).order_by(BlinkData.id.desc()).offset(offset).limit(limit)
+        result = await db.execute(query)
+        items = result.scalars().all()
+        return {
+            "items": [
+                {
+                    "id": item.id,
+                    "user_id": item.user_id,
+                    "refer_url": item.refer_url,
+                    "json_data": item.json_data,
+                    "created_at": item.created_at.isoformat() if item.created_at else None
+                }
+                for item in items
+            ],
+            "total": total,
+            "unique_users": unique_users,
+            "page": page,
+            "limit": limit
+        }
+    except Exception as e:
+        logger.error(f"Error fetching data: {e}")
+        raise HTTPException(
+            status_code=status.HTTP_500_INTERNAL_SERVER_ERROR,
+            detail="Error fetching data"
+        )
 @app.get("/blink")
 async def blink(
     request: Request,

templates/index.html ADDED Viewed

	@@ -0,0 +1,337 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>API Gateway - Blink Data</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
+            min-height: 100vh;
+            color: #e4e4e4;
+            padding: 20px;
+        }
+        .container {
+            max-width: 1400px;
+            margin: 0 auto;
+        }
+        header {
+            text-align: center;
+            margin-bottom: 30px;
+        }
+        h1 {
+            font-size: 2.5rem;
+            background: linear-gradient(90deg, #00d4ff, #7b2cbf);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 10px;
+        }
+        .subtitle {
+            color: #888;
+            font-size: 1rem;
+        }
+        .stats {
+            display: flex;
+            gap: 20px;
+            justify-content: center;
+            margin-bottom: 30px;
+        }
+        .stat-card {
+            background: rgba(255, 255, 255, 0.05);
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            border-radius: 12px;
+            padding: 20px 40px;
+            text-align: center;
+        }
+        .stat-value {
+            font-size: 2rem;
+            font-weight: bold;
+            color: #00d4ff;
+        }
+        .stat-label {
+            color: #888;
+            font-size: 0.9rem;
+            margin-top: 5px;
+        }
+        .table-container {
+            background: rgba(255, 255, 255, 0.03);
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            border-radius: 16px;
+            overflow: hidden;
+        }
+        table {
+            width: 100%;
+            border-collapse: collapse;
+        }
+        th {
+            background: rgba(0, 212, 255, 0.1);
+            padding: 16px;
+            text-align: left;
+            font-weight: 600;
+            color: #00d4ff;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+        }
+        td {
+            padding: 14px 16px;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+            vertical-align: top;
+        }
+        tr:hover {
+            background: rgba(255, 255, 255, 0.03);
+        }
+        .user-id {
+            font-family: 'Courier New', monospace;
+            color: #7b2cbf;
+            font-weight: 500;
+        }
+        .json-data {
+            font-family: 'Courier New', monospace;
+            font-size: 0.85rem;
+            background: rgba(0, 0, 0, 0.3);
+            padding: 8px 12px;
+            border-radius: 6px;
+            max-width: 500px;
+            overflow-x: auto;
+            white-space: pre-wrap;
+            word-break: break-all;
+        }
+        .refer-url {
+            color: #888;
+            font-size: 0.9rem;
+            max-width: 200px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+        .timestamp {
+            color: #666;
+            font-size: 0.85rem;
+        }
+        .pagination {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            gap: 15px;
+            padding: 20px;
+            background: rgba(0, 0, 0, 0.2);
+        }
+        .pagination button {
+            background: linear-gradient(135deg, #00d4ff, #7b2cbf);
+            border: none;
+            color: white;
+            padding: 10px 24px;
+            border-radius: 8px;
+            cursor: pointer;
+            font-weight: 600;
+            transition: all 0.3s ease;
+        }
+        .pagination button:hover:not(:disabled) {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 15px rgba(0, 212, 255, 0.3);
+        }
+        .pagination button:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+        .page-info {
+            color: #888;
+        }
+        .loading {
+            text-align: center;
+            padding: 60px;
+            color: #888;
+        }
+        .spinner {
+            width: 40px;
+            height: 40px;
+            border: 3px solid rgba(255, 255, 255, 0.1);
+            border-top-color: #00d4ff;
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+            margin: 0 auto 20px;
+        }
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
+        .empty-state {
+            text-align: center;
+            padding: 60px;
+            color: #666;
+        }
+        .empty-state svg {
+            width: 80px;
+            height: 80px;
+            margin-bottom: 20px;
+            opacity: 0.3;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <header>
+            <h1>🔗 API Gateway</h1>
+            <p class="subtitle">Blink Data Viewer</p>
+        </header>
+        <div class="stats">
+            <div class="stat-card">
+                <div class="stat-value" id="totalRecords">-</div>
+                <div class="stat-label">Total Records</div>
+            </div>
+            <div class="stat-card">
+                <div class="stat-value" id="uniqueUsers">-</div>
+                <div class="stat-label">Unique Users</div>
+            </div>
+        </div>
+        <div class="table-container">
+            <table>
+                <thead>
+                    <tr>
+                        <th>ID</th>
+                        <th>User ID</th>
+                        <th>Refer URL</th>
+                        <th>JSON Data</th>
+                        <th>Created At</th>
+                    </tr>
+                </thead>
+                <tbody id="tableBody">
+                    <tr>
+                        <td colspan="5">
+                            <div class="loading">
+                                <div class="spinner"></div>
+                                Loading data...
+                            </div>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+            <div class="pagination">
+                <button id="prevBtn" onclick="prevPage()" disabled>← Previous</button>
+                <span class="page-info">Page <span id="currentPage">1</span> of <span id="totalPages">1</span></span>
+                <button id="nextBtn" onclick="nextPage()">Next →</button>
+            </div>
+        </div>
+    </div>
+    <script>
+        const PAGE_SIZE = 100;
+        let currentPage = 1;
+        let totalRecords = 0;
+        async function fetchData(page = 1) {
+            try {
+                const response = await fetch(`/api/data?page=${page}&limit=${PAGE_SIZE}`);
+                const data = await response.json();
+                return data;
+            } catch (error) {
+                console.error('Error fetching data:', error);
+                return { items: [], total: 0, unique_users: 0 };
+            }
+        }
+        function renderTable(items) {
+            const tbody = document.getElementById('tableBody');
+            if (items.length === 0) {
+                tbody.innerHTML = `
+                    <tr>
+                        <td colspan="5">
+                            <div class="empty-state">
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" />
+                                </svg>
+                                <p>No data available</p>
+                            </div>
+                        </td>
+                    </tr>
+                `;
+                return;
+            }
+            tbody.innerHTML = items.map(item => `
+                <tr>
+                    <td>${item.id}</td>
+                    <td class="user-id">${item.user_id}</td>
+                    <td class="refer-url" title="${item.refer_url || ''}">${item.refer_url || '-'}</td>
+                    <td><pre class="json-data">${JSON.stringify(item.json_data, null, 2)}</pre></td>
+                    <td class="timestamp">${new Date(item.created_at).toLocaleString()}</td>
+                </tr>
+            `).join('');
+        }
+        function updatePagination() {
+            const totalPages = Math.ceil(totalRecords / PAGE_SIZE) || 1;
+            document.getElementById('currentPage').textContent = currentPage;
+            document.getElementById('totalPages').textContent = totalPages;
+            document.getElementById('prevBtn').disabled = currentPage <= 1;
+            document.getElementById('nextBtn').disabled = currentPage >= totalPages;
+        }
+        async function loadPage(page) {
+            currentPage = page;
+            const data = await fetchData(page);
+            totalRecords = data.total;
+            document.getElementById('totalRecords').textContent = data.total.toLocaleString();
+            document.getElementById('uniqueUsers').textContent = data.unique_users.toLocaleString();
+            renderTable(data.items);
+            updatePagination();
+        }
+        function prevPage() {
+            if (currentPage > 1) {
+                loadPage(currentPage - 1);
+            }
+        }
+        function nextPage() {
+            const totalPages = Math.ceil(totalRecords / PAGE_SIZE);
+            if (currentPage < totalPages) {
+                loadPage(currentPage + 1);
+            }
+        }
+        // Initial load
+        loadPage(1);
+    </script>
+</body>
+</html>