tabler/preview/pages/logs.astro

---
import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
import Badge from '@ui/Badge.astro'
import Card from '@ui/Card.astro'
import CardBody from '@ui/CardBody.astro'
import CardFooter from '@ui/CardFooter.astro'
import { site } from '@shared/lib/site'
---

<DefaultLayout title="Logs" pageHeader="Logs" pageMenu="extra.logs">
  <div class="row">
    <div class="col-lg-6">
      <Card>
        <CardBody>
          <h4>Checked URL</h4>
          <div>
            <pre><code>GET <a class="text-reset" target="_blank" href={site.previewUrl}>{site.previewUrl}</a></code></pre>
          </div>

          <h4>Request Timing</h4>
          <div>
            <pre>Effective URL&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a class="text-reset" target="_blank" href={site.previewUrl}>{site.previewUrl}</a><br />Redirect count&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0<br />Name lookup time&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;3.4e-05<br />Connect time&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0.000521<br />Pre-transfer time&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0.0<br />Start-transfer time&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0.0<br />App connect time&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0.0<br />Redirect time&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0.0<br />Total time&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;28.000601<br />Response code&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0<br />Return keyword&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;operation_timedout</pre>
          </div>

          <h4>Response Headers</h4>
          <div>
            <pre>HTTP/1.1 200 Connection established</pre>
          </div>
        </CardBody>
        <CardFooter>
          <h4>Escalation</h4>
          <div>Entire team</div>
        </CardFooter>
      </Card>
    </div>
    <div class="col-lg-6">
      <Card>
        <CardBody>
          <h4>Application Log</h4>
          <div>
            <pre><code>2024-01-15 14:23:45 [INFO] Application started successfully
2024-01-15 14:23:46 [DEBUG] Database connection established
2024-01-15 14:23:47 [INFO] User authentication successful: user_id=12345
2024-01-15 14:23:48 [WARNING] Rate limit approaching: 85% of quota used
2024-01-15 14:23:49 [ERROR] Failed to process payment: transaction_id=tx_789
2024-01-15 14:23:50 [INFO] Cache cleared: keys=1523
2024-01-15 14:23:51 [DEBUG] API request completed: endpoint=/api/users, duration=234ms</code></pre>
          </div>

          <h4>Log Levels</h4>
          <div>
            <div class="mb-2">
              <Badge text="INFO" color="success" />
              <Badge text="WARNING" color="warning" />
              <Badge text="ERROR" color="disabled" />
              <Badge text="DEBUG" color="disabled" />
            </div>
          </div>
        </CardBody>
        <CardFooter>
          <h4>Log Source</h4>
          <div>Application Server (prod-01)</div>
        </CardFooter>
      </Card>
    </div>
  </div>
</DefaultLayout>