adpa-enterprise-framework-automation
Version:
Modular, standards-compliant Node.js/TypeScript automation framework for enterprise requirements, project, and data management. Provides CLI and API for BABOK v3, PMBOK 7th Edition, and DMBOK 2.0 (in progress). Production-ready Express.js API with TypeSpe
565 lines (493 loc) • 21.3 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Azure Subscription Resolution Helper</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
margin: 0;
padding: 20px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
}
.container {
max-width: 1000px;
margin: 0 auto;
background: white;
border-radius: 12px;
box-shadow: 0 8px 32px rgba(0,0,0,0.1);
overflow: hidden;
}
.header {
background: linear-gradient(135deg, #0078d4 0%, #106ebe 100%);
color: white;
padding: 30px;
text-align: center;
}
.header h1 {
margin: 0;
font-size: 2.5em;
font-weight: 300;
}
.subtitle {
margin: 10px 0 0 0;
opacity: 0.9;
font-size: 1.1em;
}
.content {
padding: 40px;
}
.status-card {
background: #fff3cd;
border: 2px solid #ffc107;
border-radius: 8px;
padding: 20px;
margin-bottom: 30px;
}
.status-card.error {
background: #f8d7da;
border-color: #dc3545;
}
.status-card.success {
background: #d4edda;
border-color: #28a745;
}
.option-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
margin: 30px 0;
}
.option-card {
border: 2px solid #e0e0e0;
border-radius: 8px;
padding: 25px;
transition: all 0.3s ease;
cursor: pointer;
}
.option-card:hover {
border-color: #0078d4;
box-shadow: 0 4px 12px rgba(0,120,212,0.15);
transform: translateY(-2px);
}
.option-card.recommended {
border-color: #28a745;
background: #f8fff9;
}
.option-header {
display: flex;
align-items: center;
margin-bottom: 15px;
}
.option-icon {
font-size: 2em;
margin-right: 15px;
}
.option-title {
font-size: 1.3em;
font-weight: 600;
margin: 0;
}
.option-time {
background: #0078d4;
color: white;
padding: 4px 8px;
border-radius: 4px;
font-size: 0.8em;
margin-left: auto;
}
.option-description {
color: #666;
margin-bottom: 15px;
}
.action-button {
background: #0078d4;
color: white;
border: none;
padding: 12px 20px;
border-radius: 6px;
cursor: pointer;
font-size: 1em;
transition: background 0.3s ease;
width: 100%;
}
.action-button:hover {
background: #106ebe;
}
.action-button.secondary {
background: #6c757d;
}
.action-button.secondary:hover {
background: #545b62;
}
.steps-list {
background: #f8f9fa;
border-radius: 8px;
padding: 20px;
margin: 20px 0;
}
.steps-list ol {
margin: 0;
padding-left: 20px;
}
.steps-list li {
margin: 10px 0;
padding: 5px 0;
}
.info-box {
background: #e3f2fd;
border-left: 4px solid #2196f3;
padding: 15px;
margin: 20px 0;
}
.cost-estimate {
background: #fff8e1;
border: 1px solid #ffc107;
border-radius: 8px;
padding: 20px;
margin: 20px 0;
}
.cost-item {
display: flex;
justify-content: space-between;
margin: 5px 0;
}
.cost-total {
border-top: 2px solid #ffc107;
margin-top: 10px;
padding-top: 10px;
font-weight: bold;
}
.progress-bar {
background: #e0e0e0;
border-radius: 10px;
height: 8px;
margin: 20px 0;
overflow: hidden;
}
.progress-fill {
background: #28a745;
height: 100%;
width: 0%;
transition: width 0.5s ease;
}
.hidden {
display: none;
}
@media (max-width: 768px) {
.option-grid {
grid-template-columns: 1fr;
}
.header h1 {
font-size: 2em;
}
.content {
padding: 20px;
}
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>🔧 Azure Subscription Resolution</h1>
<p class="subtitle">Step-by-step guide to resolve subscription issues and deploy API Center</p>
</div>
<div class="content">
<!-- Current Status -->
<div class="status-card error" id="statusCard">
<h3>📊 Current Status</h3>
<p><strong>Problem:</strong> No enabled Azure subscriptions found</p>
<ul>
<li>Pay-As-You-Go: <span style="color: #dc3545;">⚠️ Warned</span></li>
<li>CBA-Pay-As-You-Go: <span style="color: #dc3545;">❌ Disabled</span></li>
</ul>
<p><strong>Impact:</strong> Cannot deploy Azure API Center or other resources</p>
</div>
<!-- Resolution Options -->
<h2>🎯 Resolution Options</h2>
<div class="option-grid">
<!-- Option 1: Fix Current Subscription -->
<div class="option-card recommended" onclick="selectOption(1)">
<div class="option-header">
<span class="option-icon">🔧</span>
<h3 class="option-title">Fix Current Subscription</h3>
<span class="option-time">15-30 min</span>
</div>
<p class="option-description">
Resolve the "Warned" subscription by fixing billing issues. Fastest option if successful.
</p>
<button class="action-button" onclick="startOption1()">Start Resolution</button>
</div>
<!-- Option 2: Create Free Account -->
<div class="option-card" onclick="selectOption(2)">
<div class="option-header">
<span class="option-icon">🆓</span>
<h3 class="option-title">Create Free Account</h3>
<span class="option-time">30-45 min</span>
</div>
<p class="option-description">
Get $200 credit + 12 months free services. Best for development and testing.
</p>
<button class="action-button" onclick="startOption2()">Create Account</button>
</div>
<!-- Option 3: Contact Support -->
<div class="option-card" onclick="selectOption(3)">
<div class="option-header">
<span class="option-icon">🎫</span>
<h3 class="option-title">Contact Support</h3>
<span class="option-time">2-24 hours</span>
</div>
<p class="option-description">
Get help from Microsoft Azure support team for enterprise scenarios.
</p>
<button class="action-button secondary" onclick="startOption3()">Get Support</button>
</div>
</div>
<!-- Option 1 Details -->
<div id="option1Details" class="hidden">
<h3>🔧 Fix Current Subscription (Recommended)</h3>
<div class="steps-list">
<h4>Steps to resolve "Warned" subscription:</h4>
<ol>
<li>
<strong>Open Azure Portal</strong>
<br><button class="action-button" onclick="window.open('https://portal.azure.com', '_blank')">Open Azure Portal</button>
</li>
<li>
<strong>Navigate to Billing</strong>
<br>Search for "Cost Management + Billing" in the search bar
</li>
<li>
<strong>Check Payment Methods</strong>
<br>Verify your credit card is not expired or declined
</li>
<li>
<strong>Review Outstanding Charges</strong>
<br>Pay any due invoices or outstanding balances
</li>
<li>
<strong>Reactivate Subscription</strong>
<br>Look for "Reactivate" button in Subscriptions section
</li>
</ol>
</div>
<div class="info-box">
<strong>💡 Pro Tip:</strong> The "Warned" state usually indicates a billing issue that can be resolved quickly.
</div>
<button class="action-button" onclick="checkResolution()">Check If Resolved</button>
</div>
<!-- Option 2 Details -->
<div id="option2Details" class="hidden">
<h3>🆓 Create Azure Free Account</h3>
<div class="steps-list">
<h4>Get started with $200 credit:</h4>
<ol>
<li>
<strong>Visit Azure Free Page</strong>
<br><button class="action-button" onclick="window.open('https://azure.microsoft.com/free', '_blank')">Open Free Account Page</button>
</li>
<li>
<strong>Sign Up</strong>
<br>Use a different email if you've had a free trial before
</li>
<li>
<strong>Verify Identity</strong>
<br>Provide phone number and payment method for verification
</li>
<li>
<strong>Wait for Activation</strong>
<br>Usually takes 5-10 minutes
</li>
<li>
<strong>Login to Azure CLI</strong>
<br>Run: <code>az login</code> in your terminal
</li>
</ol>
</div>
<div class="info-box">
<strong>📝 Note:</strong> You won't be charged during the free period, but provide a payment method for verification.
</div>
</div>
<!-- Option 3 Details -->
<div id="option3Details" class="hidden">
<h3>🎫 Contact Azure Support</h3>
<div class="steps-list">
<h4>Create a support request:</h4>
<ol>
<li>
<strong>Open Azure Support</strong>
<br><button class="action-button" onclick="window.open('https://portal.azure.com/#blade/Microsoft_Azure_Support/HelpAndSupportBlade/newsupportrequest', '_blank')">Open Support Portal</button>
</li>
<li>
<strong>Issue Type</strong>
<br>Select "Billing"
</li>
<li>
<strong>Problem Type</strong>
<br>Select "Subscription Management"
</li>
<li>
<strong>Provide Details</strong>
<br>Include subscription ID: <code>3bb6fd82-796d-4ad5-87f0-4d9d47d09ae6</code>
</li>
<li>
<strong>Submit Request</strong>
<br>Expect response within 2-24 hours
</li>
</ol>
</div>
</div>
<!-- Cost Estimate -->
<div class="cost-estimate">
<h3>💰 Monthly Cost Estimate</h3>
<div class="cost-item">
<span>Azure API Center (Standard)</span>
<span>$5 - $15</span>
</div>
<div class="cost-item">
<span>Storage Account (for specs)</span>
<span>$1 - $5</span>
</div>
<div class="cost-item">
<span>Network & Data Transfer</span>
<span>$0 - $2</span>
</div>
<div class="cost-item cost-total">
<span><strong>Total Estimated</strong></span>
<span><strong>$6 - $22 /month</strong></span>
</div>
</div>
<!-- Progress Tracker -->
<div id="progressSection" class="hidden">
<h3>📈 Progress Tracker</h3>
<div class="progress-bar">
<div class="progress-fill" id="progressFill"></div>
</div>
<div id="progressText">Step 1 of 4: Resolving subscription issues...</div>
<div class="steps-list">
<h4>Next Steps After Resolution:</h4>
<ol>
<li>✅ <strong>Subscription Resolved</strong> - Login with enabled subscription</li>
<li>⏳ <strong>Deploy API Center</strong> - Run deployment script</li>
<li>⏳ <strong>Register APIs</strong> - Upload OpenAPI specifications</li>
<li>⏳ <strong>Configure Monitoring</strong> - Set up cost alerts and monitoring</li>
</ol>
</div>
<button class="action-button" onclick="deployAPICenter()">Proceed to Deployment</button>
</div>
<!-- Quick Actions -->
<div style="margin-top: 40px; padding-top: 20px; border-top: 2px solid #e0e0e0;">
<h3>⚡ Quick Actions</h3>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px;">
<button class="action-button" onclick="window.open('https://portal.azure.com', '_blank')">
🌐 Open Azure Portal
</button>
<button class="action-button secondary" onclick="window.open('https://azure.microsoft.com/free', '_blank')">
🆓 Get Free Account
</button>
<button class="action-button secondary" onclick="showCommandHelp()">
💻 CLI Commands
</button>
<button class="action-button secondary" onclick="copySubscriptionInfo()">
📋 Copy Sub Info
</button>
</div>
</div>
</div>
</div>
<script>
function selectOption(optionNumber) {
// Hide all option details
document.getElementById('option1Details').classList.add('hidden');
document.getElementById('option2Details').classList.add('hidden');
document.getElementById('option3Details').classList.add('hidden');
// Show selected option details
document.getElementById(`option${optionNumber}Details`).classList.remove('hidden');
// Scroll to details
document.getElementById(`option${optionNumber}Details`).scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
function startOption1() {
selectOption(1);
updateProgress(25, "Resolving billing issues...");
}
function startOption2() {
selectOption(2);
updateProgress(25, "Creating free account...");
}
function startOption3() {
selectOption(3);
updateProgress(25, "Contacting support...");
}
function updateProgress(percentage, text) {
document.getElementById('progressSection').classList.remove('hidden');
document.getElementById('progressFill').style.width = percentage + '%';
document.getElementById('progressText').textContent = text;
}
function checkResolution() {
// Simulate checking resolution
updateProgress(50, "Checking subscription status...");
setTimeout(() => {
if (confirm("Is your subscription now showing as 'Enabled' in Azure Portal?")) {
updateProgress(75, "Subscription resolved! Ready for deployment.");
document.getElementById('statusCard').className = 'status-card success';
document.getElementById('statusCard').innerHTML = `
<h3>✅ Status: Resolved</h3>
<p><strong>Success:</strong> Azure subscription is now enabled</p>
<p><strong>Next:</strong> Proceed with API Center deployment</p>
`;
} else {
alert("If the subscription is still not enabled, try Option 2 (Create Free Account) or Option 3 (Contact Support).");
}
}, 2000);
}
function deployAPICenter() {
updateProgress(100, "Deployment completed successfully!");
alert("🎉 Great! Now you can run the deployment script:\n\n.\\scripts\\deploy-to-azure-api-center.ps1\n\nOr use the Azure CLI commands provided in the documentation.");
}
function showCommandHelp() {
const commands = `
🖥️ USEFUL AZURE CLI COMMANDS:
Check current subscription:
az account show
List all subscriptions:
az account list --all
Switch subscription:
az account set --subscription "subscription-name"
Check subscription status:
az account show --query "state"
Login to Azure:
az login
Run deployment script:
.\\scripts\\deploy-to-azure-api-center.ps1
`;
alert(commands);
}
function copySubscriptionInfo() {
const info = `
Subscription Information:
- Current: Pay-As-You-Go (Warned)
- ID: 3bb6fd82-796d-4ad5-87f0-4d9d47d09ae6
- Tenant: 20cb7a52-c98f-424c-9b33-58a5877bd23b
- Alternative: CBA-Pay-As-You-Go (Disabled)
- Alt ID: 5f9a3cfa-4851-4953-bd16-a42bead33176
`;
navigator.clipboard.writeText(info.trim()).then(() => {
alert("📋 Subscription information copied to clipboard!");
}).catch(() => {
alert("Could not copy to clipboard. Please copy manually:\n\n" + info);
});
}
// Auto-scroll to top on load
window.addEventListener('load', () => {
window.scrollTo(0, 0);
});
</script>
</body>
</html>