345 lines
17 KiB
HTML
345 lines
17 KiB
HTML
{% extends "dashboard/layout.html" %}
|
|
|
|
{% block title %}ThreeFold Dashboard - Application Provider{% endblock %}
|
|
|
|
{% block dashboard_content %}
|
|
<div class="my-4">
|
|
<h1>Application Provider Dashboard</h1>
|
|
<p class="lead">Develop, deploy, and manage applications for the ThreeFold ecosystem</p>
|
|
|
|
<!-- Status Summary -->
|
|
<div class="row mt-4">
|
|
<div class="col-md-3">
|
|
<div class="stats-card info">
|
|
<h5 class="card-title">Published Apps</h5>
|
|
<div class="d-flex justify-content-between align-items-end">
|
|
<h2 class="mb-0">{% if application_provider_data is defined and application_provider_data.published_apps is defined %}{{ application_provider_data.published_apps }}{% else %}0{% endif %}</h2>
|
|
<small class="text-muted">Active</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="stats-card primary">
|
|
<h5 class="card-title">Active Deployments</h5>
|
|
<div class="d-flex justify-content-between align-items-end">
|
|
<h2 class="mb-0">{% if application_provider_data is defined and application_provider_data.active_deployments is defined %}{{ application_provider_data.active_deployments }}{% else %}0{% endif %}</h2>
|
|
<small class="text-muted">Instances</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="stats-card warning">
|
|
<h5 class="card-title">Customer Base</h5>
|
|
<div class="d-flex justify-content-between align-items-end">
|
|
<h2 class="mb-0">{% if application_provider_data is defined and application_provider_data.total_deployments is defined %}{{ application_provider_data.total_deployments }}{% else %}0{% endif %}</h2>
|
|
<small class="text-muted">Total Deployments</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="stats-card success">
|
|
<h5 class="card-title">Monthly Earnings</h5>
|
|
<div class="d-flex justify-content-between align-items-end">
|
|
<h2 class="mb-0">{% if application_provider_data is defined and application_provider_data.monthly_revenue_usd is defined %}{{ application_provider_data.monthly_revenue_usd }}{% else %}0{% endif %}</h2>
|
|
<small class="text-muted">$/month</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Register New App Button -->
|
|
<div class="row mt-4">
|
|
<div class="col-12">
|
|
<div class="d-flex justify-content-end">
|
|
<a href="#" class="btn btn-info" data-bs-toggle="modal" data-bs-target="#registerAppModal">
|
|
<i class="bi bi-plus-circle me-2"></i> Register New Application
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Published Applications Section -->
|
|
<div class="row mt-4">
|
|
<div class="col-12">
|
|
<div class="dashboard-section">
|
|
<h3>My Published Applications</h3>
|
|
<div class="table-responsive">
|
|
<table class="table table-striped table-hover align-middle">
|
|
<thead>
|
|
<tr>
|
|
<th>Application</th>
|
|
<th>Type</th>
|
|
<th>Status</th>
|
|
<th>Version</th>
|
|
<th>Active Deployments</th>
|
|
<th>Average Rating</th>
|
|
<th>Monthly Revenue</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="apps-list-tbody">
|
|
<!-- Apps will be populated by JavaScript -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Application Deployments Section -->
|
|
<div class="row mt-4">
|
|
<div class="col-12">
|
|
<div class="dashboard-section">
|
|
<h3>Active Deployments</h3>
|
|
<div class="alert alert-info">
|
|
<i class="bi bi-info-circle me-2"></i>
|
|
Each application can have multiple deployments across different users and environments.
|
|
</div>
|
|
<div class="table-responsive">
|
|
<table class="table table-striped table-hover align-middle">
|
|
<thead>
|
|
<tr>
|
|
<th>Deployment ID</th>
|
|
<th>Application</th>
|
|
<th>Customer</th>
|
|
<th>Region</th>
|
|
<th>Instances</th>
|
|
<th>Deployed On</th>
|
|
<th>Status</th>
|
|
<th>Health</th>
|
|
<th>Resource Usage</th>
|
|
<th>Revenue</th>
|
|
<th>Monitoring</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="active-deployments-tbody">
|
|
<!-- Active deployments will be populated by JavaScript -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="d-flex justify-content-center mt-3">
|
|
<nav aria-label="Deployments pagination">
|
|
<ul class="pagination">
|
|
<li class="page-item disabled">
|
|
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
|
|
</li>
|
|
<li class="page-item active"><a class="page-link" href="#">1</a></li>
|
|
<li class="page-item"><a class="page-link" href="#">2</a></li>
|
|
<li class="page-item"><a class="page-link" href="#">3</a></li>
|
|
<li class="page-item">
|
|
<a class="page-link" href="#">Next</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<!-- Development Resources Section -->
|
|
<div class="row mt-4">
|
|
<div class="col-12">
|
|
<div class="dashboard-section">
|
|
<h3>Developer Resources</h3>
|
|
<div class="row">
|
|
<div class="col-md-6 mb-4">
|
|
<div class="card h-100">
|
|
<div class="card-body">
|
|
<h5><i class="bi bi-book me-2 text-primary"></i> Documentation</h5>
|
|
<p>Access guides, tutorials, and API references for developing ThreeFold applications</p>
|
|
<a href="https://manual.threefold.io" target="_blank" class="btn btn-sm btn-outline-primary">
|
|
<i class="bi bi-box-arrow-up-right me-1"></i>Browse Documentation
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 mb-4">
|
|
<div class="card h-100">
|
|
<div class="card-body">
|
|
<h5><i class="bi bi-people me-2 text-info"></i> Developer Community</h5>
|
|
<p>Connect with other ThreeFold application developers, share insights, and get help</p>
|
|
<a href="https://t.me/threefoldtesting" target="_blank" class="btn btn-sm btn-outline-info">
|
|
<i class="bi bi-box-arrow-up-right me-1"></i>Join Community
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Revenue Monitoring Section -->
|
|
<div class="row mt-4">
|
|
<div class="col-12">
|
|
<div class="dashboard-section">
|
|
<h3>Revenue Monitoring</h3>
|
|
<div class="row">
|
|
<div class="col-md-8">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5>Monthly Revenue Trend</h5>
|
|
</div>
|
|
<div class="card-body d-flex justify-content-center align-items-center">
|
|
<canvas id="revenueChart" width="400" height="300"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5>Revenue by Application</h5>
|
|
</div>
|
|
<div class="card-body d-flex justify-content-center align-items-center">
|
|
<canvas id="revenueDistributionChart" width="400" height="300"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Additional Charts Row -->
|
|
<div class="row mt-4">
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5>Deployment Trend</h5>
|
|
</div>
|
|
<div class="card-body d-flex justify-content-center align-items-center">
|
|
<canvas id="deploymentTrendChart" width="400" height="300"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5>App Performance</h5>
|
|
</div>
|
|
<div class="card-body d-flex justify-content-center align-items-center">
|
|
<canvas id="appPerformanceChart" width="400" height="300"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% block scripts %}
|
|
{{ super() }}
|
|
<!-- Hydration JSON for initial app provider dashboard data (safe, non-executable) -->
|
|
<script id="ap-dashboard-hydration" type="application/json">
|
|
{% if application_provider_data is defined %}
|
|
{{ application_provider_data | json_encode() }}
|
|
{% else %}
|
|
null
|
|
{% endif %}
|
|
</script>
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.1/dist/chart.min.js"></script>
|
|
<script src="/static/js/dashboard-application-provider.js"></script>
|
|
<style>
|
|
/* Ensure charts have consistent sizes */
|
|
.card-body {
|
|
min-height: 340px;
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
<!-- Register Application Modal -->
|
|
<div class="modal fade" id="registerAppModal" tabindex="-1" aria-labelledby="registerAppModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="registerAppModalLabel">Register New Application</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form>
|
|
<div class="mb-3">
|
|
<label for="appName" class="form-label">Application Name</label>
|
|
<input type="text" class="form-control" id="appName" placeholder="Enter application name">
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="appDesc" class="form-label">Description</label>
|
|
<textarea class="form-control" id="appDesc" rows="3" placeholder="Describe your application"></textarea>
|
|
</div>
|
|
<div class="row mb-3">
|
|
<div class="col-md-6">
|
|
<label for="appCategory" class="form-label">Category</label>
|
|
<select class="form-select" id="appCategory">
|
|
<option selected>Select category</option>
|
|
<option value="productivity">Productivity</option>
|
|
<option value="communication">Communication</option>
|
|
<option value="business">Business</option>
|
|
<option value="storage">Storage & Backup</option>
|
|
<option value="development">Development Tools</option>
|
|
<option value="analytics">Analytics & BI</option>
|
|
<option value="other">Other</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label for="appType" class="form-label">Deployment Type</label>
|
|
<select class="form-select" id="appType">
|
|
<option selected>Select type</option>
|
|
<option value="container">Container-based</option>
|
|
<option value="vm">Virtual Machine</option>
|
|
<option value="kubernetes">Kubernetes Workload</option>
|
|
<option value="custom">Custom Deployment</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="appRepo" class="form-label">Source Repository URL</label>
|
|
<input type="url" class="form-control" id="appRepo" placeholder="https://github.com/yourusername/yourrepo">
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="resourceRequirements" class="form-label">Minimum Resource Requirements</label>
|
|
<div class="row">
|
|
<div class="col-md-4 mb-2">
|
|
<input type="number" class="form-control" id="minCPU" placeholder="vCPU Cores">
|
|
</div>
|
|
<div class="col-md-4 mb-2">
|
|
<input type="number" class="form-control" id="minRAM" placeholder="RAM (GB)">
|
|
</div>
|
|
<div class="col-md-4 mb-2">
|
|
<input type="number" class="form-control" id="minStorage" placeholder="Storage (GB)">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="appPrice" class="form-label">Pricing Model</label>
|
|
<div class="row">
|
|
<div class="col-md-6 mb-2">
|
|
<select class="form-select" id="pricingType">
|
|
<option selected>Select pricing model</option>
|
|
<option value="subscription">Subscription (per user/month)</option>
|
|
<option value="usage">Usage-based</option>
|
|
<option value="fixed">Fixed price (per instance)</option>
|
|
<option value="free">Free</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-6 mb-2">
|
|
<div class="input-group">
|
|
<input type="number" class="form-control" id="priceAmount" placeholder="Amount">
|
|
<span class="input-group-text">$</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3 form-check">
|
|
<input type="checkbox" class="form-check-input" id="selfHealing">
|
|
<label class="form-check-label" for="selfHealing">Enable self-healing capabilities</label>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
|
<button type="button" class="btn btn-info" id="registerAppBtn">Register Application</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %} |