Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add new features for the ui of the vic plugin auto install functionality #1790

Merged
16 commits merged into from
Jun 5, 2018
+6,417 −57
Merged

Add new features for the ui of the vic plugin auto install functionality #1790

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
7820026
Provision vic-ui in the ova (#1758)
May 18, 2018
ebec98b
- Adding new modal for thumbprint validation
lmalvins May 21, 2018
f3a4af1
Adding callback functionality when make async calls to the server
lmalvins May 24, 2018
d81c87a
Add some refactors and validations for wrong vcenter ip or fqdn
lmalvins May 25, 2018
9ac7b0a
Add blocks with success or failure install messages
lmalvins May 25, 2018
c685878
Removing do not used message feedback alerts
lmalvins May 25, 2018
084f162
Fix spacing and adds alert for vSphere client servies restart
lmalvins May 25, 2018
93a8fcb
Add little refactors
lmalvins May 25, 2018
ee4bdc0
Separate the script to a new file and adds reference on index.html page
lmalvins May 31, 2018
df9105e
Add nodejs environment with karma runner for jasmine test framework
lmalvins May 31, 2018
01c8f60
Adds index.html fixture and spec file with the test
lmalvins May 31, 2018
63bd524
Adds gitignore file
lmalvins May 31, 2018
875fbdc
Adds little refactor
lmalvins May 31, 2018
1844734
adding input validators with new unit tests
lmalvins Jun 4, 2018
c001e6b
Removing not necessary lines
lmalvins Jun 4, 2018
d135954
Fixing TestGroups.md file
lmalvins Jun 5, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 41 additions & 0 deletions installer/fileserver/html/.gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
# Created by https://www.gitignore.io/api/node

### Node ###
# Logs
logs
*.log
npm-debug.log*

# Runtime data
pids
*.pid
*.seed
*.pid.lock

# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov

# Coverage directory used by tools like istanbul
coverage

# nyc test coverage
.nyc_output

# Compiled binary addons (http://nodejs.org/api/addons.html)
build/Release

# Dependency directories
node_modules/
jspm_packages/

# Optional npm cache directory
.npm

# Optional eslint cache
.eslintcache

# Output of 'npm pack'
*.tgz

# dotenv environment variables file
.env
130 changes: 73 additions & 57 deletions installer/fileserver/html/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@
<link rel="stylesheet" href="css/clarity-icons.min.css">
<link rel="stylesheet" href="css/fontello.css">
<link rel="stylesheet" href="css/style.css">

</head>

<body id="body">
Expand All @@ -30,35 +29,34 @@
</div>
</header>
<main class="content-container">
<div class="content-area">
<div id="getting-started-items-container">
{{if .InitErrorFeedback }}
Copy link

@ghost ghost May 25, 2018 •
edited by ghost
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We need to keep this variable here - it can be populated by messages other than those which you have put here.

<div id="feedback-alert" class="alert alert-danger">
<div class="alert-item">
<span class="alert-text">{{ .InitErrorFeedback }}</span>
<div class="alert-actions">
<a href="/?login=true" title="Login" class="alert-action">Re-initialize</a>
<div class="content-area" id="contentArea">
<div id="getting-started-items-container" class="mt-0">
{{if .InitErrorFeedback }}
<div id="feedback-alert" class="alert alert-danger">
<div class="alert-item">
<span class="alert-text">{{ .InitErrorFeedback}}</span>
<div class="alert-actions">
<a href="/?login=true" title="Login" class="alert-action">Re-initialize</a>
</div>
</div>
</div>
</div>
{{ end }}
{{if .InitSuccessFeedback }}
<div id="feedback-alert" class="alert alert-success">
<div class="alert-item">
<span class="alert-text">{{ .InitSuccessFeedback }}</span>
{{ end }}
{{if .InitSuccessFeedback }}
<div id="feedback-alert" class="alert alert-success">
<div class="alert-item">
<span class="alert-text">{{ .InitSuccessFeedback }}</span>
</div>
</div>
</div>
{{ end }}
<div class="row flex-items-xs-middle my-1 mx-0">
<div class="col-xs"></div>
<div class="col-xs">
<h1 class="text-center my-0">Getting Started</h1>
{{ end }}
<div class="row flex-items-xs-middle my-1 mx-0 pl-3">
<div class="col-xs text-left">
<h1 class="mx-0 mb-2 pl-0">vSphere Integrated
Containers Appliance</h1>
</div>
<div class="col-xs text-right">
<a href="https://vmware.github.io/vic-product/assets/files/html/1.4/" target="_blank" title="Documentation" class="btn btn-outline mx-0">Documentation</a>
</div>
<a href="https://vmware.github.io/vic-product/assets/files/html/1.4/" target="_blank" title="Documentation" class="btn btn-primary mx-1">Documentation</a>
</div>
</div>

<div class="row flex-items-xs-center mx-0">
<div class="col-xs-10">
<div class="row">
Expand Down Expand Up @@ -141,13 +139,49 @@ <h4>Infrastructure Deployment Tools</h4>
</div>
</div>
</div>
<a href="/?login=true" id="feedback-link" class="btn btn-link px-0 my-2">
<div><a href="/?login=true" id="feedback-link"
class="btn btn-link px-0 mt-1 mb-0">
Re-initialize the vSphere Integrated Container Appliance
</a>
</a></div>
</div>
</div>
{{if .NeedLogin}}
<div class="modal">
<div class="modal" id="plugin-modal" style="display: none">
<div class="modal-dialog" role="dialog"aria-hidden="false">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Complete VIC plugin installation</h3>
</div>
<div id="plugin-spinner" style="display: none;text-align: center">
<div class="spinner"></div>
</div>
<div class="modal-body">
<form id="plugin-form" method="post" class="pt-0">
<div id="plugin-body">

<p class="mt-0 mb-1">
Certificate thumbprint for
vCenter Server <label id="vcenter"></label>
</p>
<input id="thumbprint-show" type="text" style="width: 85%;" value="" onkeyup="checkThumbrintInput()"></input>
<p class="mt-1 mb-1">
Click Continue to validate
this certificate or cancel
if the thumbprint is not valid
</p>
<a href="https://vmware.github.io/vic-product/assets/files/html/1.4/vic_vsphere_admin/obtain_thumbprint.html" class="btn btn-link" >Read more...</a>
</div>
<div class="modal-footer">
<button class="btn btn-outline" type="button" onclick="window.location.href='/?login=true'">Cancel</button>
<button id="plugin-submit" class="btn btn-primary" type="submit">Continue</button>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="modal-backdrop" id="areaBackdrop" aria-hidden="true"></div>
<div class="modal" id="login-modal">
<div class="modal-dialog" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="modal-header">
Expand All @@ -168,18 +202,24 @@ <h3 class="modal-title">Complete VIC appliance installation</h3>
</div>
</div>
{{ end }}
<div class="alert alert-danger mt-0 mb-2" style="display: none" id="thumbprint-alert-div">
<div class="alert-item">
<span id="thumbprint-alert-span" class="alert-text">
</span>
</div>
</div>
<p class="mt-0 mb-1">
Please enter your vCenter credentials to complete the vSphere Integrated
Containers Appliance installation and PSC settings if using an external instance.
</p>
<div class="form-group">
<label for="target" class="required">vCenter Server</label>
<input id="target" type="text" name="target" placeholder="FQDN or IP">
<input id="target" type="text" name="target" placeholder="FQDN or IP" onkeyup="checkRegistryForm()" value="">
</div>
<div class="form-group">
<label for="user" class="required">vCenter Server credentials</label>
<input id="user" type="text" name="user" placeholder="[email protected]">
<input type="password" name="password" placeholder="Password" />
<input id="user" type="text" name="user" placeholder="[email protected]" onkeyup="checkRegistryForm()" value="">
<input id="password" type="password" name="password" placeholder="Password" onkeyup="checkRegistryForm()" value="">
</div>
<div class="form-group">
<label for="psc">External PSC Instance</label>
Expand All @@ -189,9 +229,10 @@ <h3 class="modal-title">Complete VIC appliance installation</h3>
<label for="pscDomain">External PSC Admin Domain</label>
<input id="pscDomain" type="text" name="pscDomain" placeholder="vsphere.local">
</div>
<input id="thumbprint" type="hidden" name="thumbprint" placeholder="">
</div>
<div class="text-sm-right">
<button id="login-submit" type="submit" class="btn btn-primary">Continue</button>
<button id="login-submit" onclick="submitRegistration()" disabled class="btn btn-primary">Continue</button>
</div>
</form>
</div>
Expand All @@ -203,31 +244,6 @@ <h3 class="modal-title">Complete VIC appliance installation</h3>
</div>
</main>
</div>

<script>

(function() {

$form = document.getElementById('login-form');
$spinner = document.getElementById('login-spinner');
$body = document.getElementById('login-body');
$submit = document.getElementById('login-submit');

if ($form) {
$form.addEventListener('submit', function(event) {
event.preventDefault();
$submit.setAttribute('disabled', 'disabled');
$body.style.display = 'none';
$spinner.style.display = '';
setTimeout(function() {
$form.submit();
});
})
}

})();

</script>
<script src="js/index-handler.js"></script>
</body>

</html>
96 changes: 96 additions & 0 deletions installer/fileserver/html/js/fixtures/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,96 @@
<div id="main-container">
<div class="modal" id="login-modal">
<div class="modal-dialog" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Complete VIC appliance installation</h3>
</div>
<div id="login-spinner" style="display: none">
<div class="spinner"></div>
</div>
<div class="modal-body">
<form id="login-form" method="post" class="pt-0">
<div id="login-body">
{{if .ValidationError }}
<div class="alert alert-danger mt-0 mb-2">
<div class="alert-item">
<span class="alert-text">
Validation failed: {{ .ValidationError }}
</span>
</div>
</div>
{{ end }}
<div class="alert alert-danger mt-0
mb-2" style="display: none" id="thumbprint-alert-div">
<div class="alert-item">
<span id="thumbprint-alert-span" class="alert-text">
</span>
</div>
</div>
<p class="mt-0 mb-1">
Please enter your vCenter credentials to complete the vSphere Integrated
Containers Appliance installation and PSC settings if using an external instance.
</p>
<div class="form-group">
<label for="target" class="required">vCenter Server</label>
<input id="target" type="text" name="target" placeholder="FQDN or IP" onkeyup="checkRegistryForm()" value="">
</div>
<div class="form-group">
<label for="user" class="required">vCenter Server credentials</label>
<input id="user" type="text" name="user" placeholder="[email protected]" onkeyup="checkRegistryForm()" value="">
<input id="password" type="password" name="password" placeholder="Password" onkeyup="checkRegistryForm()" value="">
</div>
<div class="form-group">
<label for="psc">External PSC Instance</label>
<input id="psc" type="text" name="psc" placeholder="FQDN">
</div>
<div class="form-group">
<label for="pscDomain">External PSC Admin Domain</label>
<input id="pscDomain" type="text" name="pscDomain" placeholder="vsphere.local">
</div>
<input id="thumbprint" type="hidden" name="thumbprint" placeholder="">
</div>
<div class="text-sm-right">
<button id="login-submit" onclick="submitRegistration()" disabled class="btn btn-primary">Continue</button>
</div>
</form>
</div>
</div>
</div>
</div>

<div class="modal" id="plugin-modal" style="display: none">
<div class="modal-dialog" role="dialog"aria-hidden="false">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Complete VIC plugin installation</h3>
</div>
<div id="plugin-spinner" style="display: none;text-align: center">
<div class="spinner"></div>
</div>
<div class="modal-body">
<form id="plugin-form" method="post" class="pt-0">
<div id="plugin-body">

<p class="mt-0 mb-1">
Certificate thumbprint for
vCenter Server <label id="vcenter"></label>
</p>
<input id="thumbprint-show" type="text" style="width: 85%;" value="" onkeyup="checkThumbrintInput()"></input>
<p class="mt-1 mb-1">
Click Continue to validate
this certificate or cancel
if the thumbprint is not valid
</p>
<a href="https://vmware.github.io/vic-product/assets/files/html/1.4/vic_vsphere_admin/obtain_thumbprint.html" class="btn btn-link" >Read more...</a>
</div>
<div class="modal-footer">
<button class="btn btn-outline" type="button" onclick="window.location.href='/?login=true'">Cancel</button>
<button id="plugin-submit" class="btn btn-primary" type="submit">Continue</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
Loading