Skip to content

Commit

Permalink
Improve Azure Service Operator installation UI (#64)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Tatsinnit
Tatsinnit authored Apr 30, 2021
1 parent 747307f commit b0b4dc1
Show file tree
Hide file tree
Showing 3 changed files with 68 additions and 73 deletions.
16 changes: 0 additions & 16 deletions resources/webviews/azureserviceoperator/azureserviceoperator.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,20 +71,4 @@ th {

label {
cursor: pointer;
}

/* Loader icon */
.loader {
border: 16px solid #f3f3f3; /* Light grey */
border-top: 16px solid #3498db; /* Blue */
border-radius: 50%;
width: 120px;
height: 120px;
align-content: center;
animation: spin 2s linear infinite;
}

@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
123 changes: 67 additions & 56 deletions resources/webviews/azureserviceoperator/azureserviceoperator.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,25 +17,24 @@
const vscode = acquireVsCodeApi();

$(document).ready(function () {
$('.asooutput').hide();
$('.loader').hide();

$(".toggleoutput").click(function () {
$('.asooutput').toggle('slow');
});

$(".toggle").click(function(){
$('.allocatebody').toggle('slow');
});
$('#spsubmit').click(function () {
var appid = $('#spappid').val();
var password = $('#spcred').val();

if (appid.length > 0 && password.length > 0) {
$('.loader').show();
$('.spform').hide();
$(".spinner").show();
$('#serviceprincipalform').hide();
vscode.postMessage({ appid: appid, password: password });
}
})


});

</script>
Expand All @@ -44,60 +43,73 @@
<body>
<div class="heading">
<h2 class="content-header">Azure Service Operator</h2>
<br\> The Azure Service Operator comprises of:
<br />
- The Custom Resource Definitions (CRDs) for each of the Azure services a Kubernetes user can provision.
<br />
- The Kubernetes controller that watches for requests to create Custom Resources for each of these CRDs and
creates them.
<br />
To help you analyse and identify potential problems or easily share the information during the
troubleshooting process.
<a href="https://aka.ms/aks/aso-debug">Learn more</a></a>
<br\> The Azure Service Operator helps you provision Azure resources and connect your applications to them from within Kubernetes.
<a href="https://aka.ms/aks/aso">Learn more</a></a>
</div>
{{#if getUserInput}}

<div class="container">
<div class="loader"></div>

<div class="panel panel-default data-container spform">
<i class="fa fa-wpforms" aria-hidden="true"
style="font-size:14px;padding-right:5px;padding-bottom:15px;"></i>
Please provide service principal appid and password, as detailed in <a
href="https://operatorhub.io/operator/azure-service-operator">step 4 of Azure Service Operator docs</a>.
<br />
<blockquote cite="https://operatorhub.io/operator/azure-service-operator">
Service Principal with Contributor permissions for your subscription is required,
so ASO can create resources in your subscription on your behalf.
Note that the <a
href="https://docs.microsoft.com/en-us/cli/azure/create-an-azure-service-principal-azure-cli">ServicePrincipal</a>
you pass to the command below needs to have
access to create resources in your subscription.
</blockquote>
<form id="serviceprincipalform" class="allocatebody">
<label for="spappid">Enter App ID of service principal:</label>
<input required id="spappid" name="spappid" size="50" type="text"
placeholder="e.g. 041ccd53-e72f-45d1-bbff-382c82f6f9a1" /><br><br>
<label for="spcred">Enter Password of Service Principal:</label>
<input required id="spcred" name="spcred" size="50" type="text"
placeholder="Service principal password" /><br><br>
<input id="spsubmit" type="submit" value="Submit">
</form>
</div>
</div>
{{else}}
<div class="container">
{{#if isSuccess}}
<div class="panel panel-default data-container">
<i class="fa status-icon fa-check-circle"
style="font-size:14px;color:green;padding-right:5px;padding-bottom:15px;"></i>
{{mainMessage}}
</div>
{{else}}
<div class="critical">
<i class="fa fa-times-circle" style="font-size:14px;color:red"></i>
{{mainMessage}}
<a class="toggle" onclick="$('#collapsed-chevron-form').toggleClass('fa-rotate-180')"
style="padding-top:5px;color:black;">
<i class="fa fa-chevron-down" id="collapsed-chevron-form"
style="font-size:14px;padding-right:5px;;color:#605E5C;"></i>
Install Azure Service Operator
</a>

<div class="spinner" style="display:none;padding-top: 10px;">
<span class="fa fa-spinner fa-spin" style="font-size:14px;color:blue;"></span>
Azure Service Operator installation in progress
</div>
<div class="allocatebody">
{{#if getUserInput}}
<form id="serviceprincipalform" >

<div style="background: #F0F6FF; border-radius: 2px; width: 654px; padding: 10px;">
<span class="fa status-icon fa-info-circle" style="font-size:14px;color:blue;"></span>
Provide the App Id and password of the Service Principal with Contributor permissions for your subscription. This allows ASO to create resources in your subscription on your behalf.
<a href="https://docs.microsoft.com/en-us/cli/azure/create-an-azure-service-principal-azure-cli">Learn more</a>
</div>
<br/>
<div style="background: #F0F6FF; border-radius: 2px; width: 654px; padding: 10px;">
<span class="fa status-icon fa-info-circle" style="font-size:14px;color:blue;"></span>
There is a limitation on ASO with Service Principal validation which will allow installation to succeed with incorrect Service Principal credentials. Please ensure that your Service Principal is correct.
<a href="https://operatorhub.io/operator/azure-service-operator">Learn more</a>
</div>
<br/>

<label for="spappid">Enter App ID of service principal:</label>
<input required id="spappid" name="spappid" size="50" type="text"
placeholder="e.g. 041ccd53-e72f-45d1-bbff-382c82f6f9a1" /><br><br>
<label for="spcred">Enter Password of Service Principal:</label>
<input required id="spcred" name="spcred" size="50" type="text"
placeholder="Service principal password" /><br><br>

<div>
<button class="btn" id="spsubmit"><i class="fa"></i>
Submit
</button>
</div>
</form>
{{else}}
{{#if isSuccess}}
<div class="success">
<i class="fa status-icon fa-check-circle"
style="font-size:14px;color:green;padding-right:5px;padding-bottom:15px;"></i>
{{mainMessage}}
</div>
{{else}}
<div class="critical">
<i class="fa fa-times-circle"
style="font-size:14px;color:red;padding-right:5px;padding-bottom:15px;"></i>
{{{mainMessage}}}
</div>
{{/if}}
{{/if}}
</div>
</div>
{{/if}}
</div>

<div class="container">
<div class="panel panel-default data-container">
<a class="toggleoutput" onclick="$('#collapsed-chevron-output').toggleClass('fa-rotate-180')"
Expand All @@ -115,7 +127,6 @@ <h2 class="content-header">Azure Service Operator</h2>
</div>
</div>
</div>
{{/if}}
</body>

</html>
2 changes: 1 addition & 1 deletion src/commands/azureServiceOperators/helpers/azureservicehtmlhelper.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@ function getOrganisedInstallResult(
if (installResults.succeeded) {
installResults.mainMessage = `Azure Service Operator Successfully installed on ${clustername}. Please see the console output below for more details.`;
} else {
installResults.mainMessage = `Azure Service Operator Failed to install on ${clustername}. Please see the console output below for more details.`;
installResults.mainMessage = `Azure Service Operator Failed to install on ${clustername}. Please see the console output below for more details. <a href="https://aka.ms/aks/aso-debug">Learn more about common issues.</a>`;
}

installResults.logs = installationLogsResponse(installResultCollection);
Expand Down

0 comments on commit b0b4dc1

Please sign in to comment.