Skip to content
This repository has been archived by the owner on Nov 9, 2017. It is now read-only.

Commit

Permalink
HAWKULAR-516 : Wizard for installing JDBC Driver
Browse files Browse the repository at this point in the history
  • Loading branch information
ammendonca committed Sep 18, 2015
1 parent 8911368 commit 69a851c
Show file tree
Hide file tree
Showing 4 changed files with 392 additions and 12 deletions.
Original file line number Diff line number Diff line change
@@ -1,10 +1,38 @@
<section id="hk-datasources" class="hk-tab-content">

<div class="hk-resource-container" ng-repeat="ds in vm.resourceList">
<div class="clearfix">

<div class="hk-control-actions-bar pull-left">
<div class="hk-container-separator">
<input type="text" class="form-control separator" ng-model="vm.filter.properties.name" placeholder="Filter by Name...">
</div>

<div class="hk-container-separator">
<div class="btn-group" dropdown auto-close="always">
<button id="simple-btn-keyboard-nav" type="button" class="btn btn-primary" dropdown-toggle>
Sort {{vm.sortInv ? 'Z - A' : 'A - Z'}} <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="simple-btn-keyboard-nav">
<li ng-class="{'active': !vm.sortInv}"><a href="" ng-click="vm.sortInv = false" dropdown-toggle>Sort A - Z</a></li>
<li ng-class="{'active': vm.sortInv}"><a href="" ng-click="vm.sortInv = true" dropdown-toggle>Sort Z - A</a></li>
</ul>
</div>
</div>

<button class="btn btn-default" type="button" ng-click="vm.showDriverAddDialog()">Add Driver</button>
<button class="btn btn-default" type="button" ng-click="vm.showDatasourceAddDialog()" disabled>Add Datasource</button>
</div>

<h3 class="pull-left">{{ds.properties.name}}</h3>
<span class="hk-update pull-right" tooltip-trigger tooltip-placement="top" tooltip="Last update"><i class="fa fa-clock-o"></i>{{vm.endTimeStamp | date:'HH:mm:ss'}}</span>
</div>

<div class="hk-resource-container"
ng-repeat="ds in vm.resourceList | filter:vm.filter | orderBy:'properties.name':vm.sortInv">

<div class="panel panel-default hk-summary">
<div class="panel-heading">
<span class="hk-heading">{{ds.properties.name}}</span>
</div>
<div class="row">
<div class="col-sm-4 hk-summary-item">
<span class="hk-data">{{ds.alertList.length}} <i class="fa fa-flag" ng-show="ds.alertList.length > 0"></i></span>
Expand Down Expand Up @@ -80,6 +108,7 @@ <h3 class="pull-left">

<div class="hk-info-top clearfix">
<h3 class="pull-left">Metrics</h3>

<div class="hk-update pull-right">
<button class="btn btn-link hk-chart-update" tooltip-trigger tooltip-placement="top" tooltip="Update chart"><i class="fa fa-refresh"></i></button>
</div>
Expand All @@ -99,16 +128,16 @@ <h2>Availability</h2>
<div class="col-md-12">
<h4>Connection Availability</h4>
<div class="hk-graphselector hk-blue">
<input type="checkbox" checked="checked" disabled>
<label for="available1"><span>Available Connections</span></label>
<input id="connavail" type="checkbox" checked="checked" disabled>
<label for="connavail"><span>Available Connections</span></label>
</div>
<div class="hk-graphselector hk-green">
<input type="checkbox" checked="checked" disabled>
<label for="connections1"><span>Connections in Use</span></label>
<input id="conninuse" type="checkbox" checked="checked" disabled>
<label for="conninuse"><span>Connections in Use</span></label>
</div>
<div class="hk-graphselector hk-gray">
<input type="checkbox" checked="checked" disabled>
<label for="timed1"><span>Timed-out Connections</span></label>
<input id="conntimed" type="checkbox" checked="checked" disabled>
<label for="conntimed"><span>Timed-out Connections</span></label>
</div>
</div>
</div>
Expand All @@ -128,12 +157,12 @@ <h2>Responsiveness</h2>
<div class="col-md-12">
<h4>Responsiveness</h4>
<div class="hk-graphselector hk-yellow">
<input type="checkbox" checked="checked" disabled>
<label for="wait1"><span>Wait Time (Avg.)</span></label>
<input id="waittime" type="checkbox" checked="checked" disabled>
<label for="waittime"><span>Wait Time (Avg.)</span></label>
</div>
<div class="hk-graphselector hk-purple">
<input type="checkbox" checked="checked" disabled>
<label for="creation1"><span>Creation Time (Avg.)</span></label>
<input id="creationtime" type="checkbox" checked="checked" disabled>
<label for="creationtime"><span>Creation Time (Avg.)</span></label>
</div>
</div>
</div>
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,194 @@
<div class="modal-header">
<button type="button" class="close" aria-hidden="true" ng-click="dac.onClose()">
<span class="pficon pficon-close"></span>
</button>
<h4 class="modal-title">Add JDBC Driver</h4>
</div>

<wizard name="driverAdd" on-finish="dac.finishedAddDriverWizard()">

<wz-step title="Select a JDBC Driver File">
<div class="modal-body">
<p><strong>Step 1 of 3: Select JDBC Driver File</strong></p>

<form class="hk-form-horizontal" name="addJdbcDriverForm" novalidate>
<fieldset>
<div class="form-group">
<label for="driver-file">Download the JDBC driver from your database vendor</label>
<div class="row">
<div class="col-md-6">
<input class="form-control" fileread="dac.driverData.binaryFile" type="file" accept="application/zip"
ng-model="dac.driverData.filePath" hk-valid-file required
name="driverFile" id="driver-file"/>
</div>
</div>
</div>
</fieldset>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default hk-btn-distant" ng-click="dac.onClose()">Cancel</button>
<button type="button" class="btn btn-default" disabled >&#60; Back</button>
<button type="button" wz-next class="btn btn-primary"
ng-disabled="addJdbcDriverForm.$invalid"
ng-click="dac.exitStepFileSelect()">Next &#62;</button>
</div>
</wz-step>

<wz-step title="Define Parameters">
<div class="modal-body">
<p><strong>Step 2 of 3: Define Parameters</strong></p>

<form class="form-horizontal">
<fieldset>
<p class="hk-required-info pull-right"><span class="hk-required">*</span> Required field</p>
<div class="form-group">
<label class="col-sm-4 control-label">Driver File Name</label>
<div class="col-sm-6">
<span class="hk-input-text">{{dac.driverData.filePath}}</span>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="dn"><span class="hk-required">*</span> Driver Name
<a class="hk-btn-icon" tabindex="-1" role="button" popover-append-to-body="true"
popover-placement="top" popover-trigger="click" popover="The symbolic name of the driver to be
referenced by the Datsource(s)"><i class="fa fa-info-circle"></i></a>
</label>
<div class="col-sm-6">
<input type="text" id="dn" class="form-control" placeholder="e.g.: mysql" required
ng-model="dac.driverData.driverName">
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="dmn"><span class="hk-required">*</span> Driver Module Name
<a class="hk-btn-icon" tabindex="-1" role="button" popover-append-to-body="true"
popover-placement="top" popover-trigger="click" popover="The name of the module that will be created in
the EAP server"><i class="fa fa-info-circle"></i></a>
</label>
<div class="col-sm-6">
<input type="text" id="dmn" class="form-control" placeholder="e.g.: com.mysql" required
ng-model="dac.driverData.moduleName">
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="dc"><span class="hk-required">*</span> Driver Class</label>
<div class="col-sm-6">
<input type="text" id="dc" class="form-control" placeholder="e.g.: com.mysql.jdbc.Driver" required
ng-model="dac.driverData.driverClass">
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="dmv">Driver Major Version</label>
<div class="col-sm-6">
<input type="number" min="0" value="1" class="form-control hk-input-small" id="dmv"
ng-model="dac.driver.driverMajorVersion">
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="dmiv">Driver Minor Version</label>
<div class="col-sm-6">
<input type="number" min="0" value="1" class="form-control hk-input-small" id="dmiv"
ng-model="dac.driver.driverMinorVersion">
</div>
</div>
</fieldset>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default hk-btn-distant" ng-click="dac.onClose()">Cancel</button>
<button type="button" wz-previous class="btn btn-default">&#60; Back
</button>
<button type="button" wz-next class="btn btn-primary" ng-click="dac.exitStepDefineParameters()"
ng-disabled="!dac.driverData.driverName || !dac.driverData.moduleName || !dac.driverData.driverClass">
Next &#62;</button>
</div>
</wz-step>


<wz-step title="Review and Add Driver">

<div class="modal-body">
<p><strong>Step 3 of 3: Review and Add Driver</strong></p>

<div class="text-center hk-spinner-container" ng-show="dac.driverData.uploading">
<div class="spinner spinner-lg"></div>
</div>

<div class="alert alert-success" ng-show="dac.driverData.hasDeployedSuccessfully">
<span class="pficon pficon-ok"></span>
<strong>Success!</strong> The driver "{{dac.driverData.driverName}}" was installed.
</div>

<div class="alert alert-danger" ng-show="dac.driverData.hasDeploymentError">
<span class="pficon pficon-error-circle-o"></span>
<strong>Error!</strong> Driver file installation failed.
</div>

<form class="form-horizontal">
<fieldset>
<p class="hk-required-info pull-right"><span class="hk-required">*</span> Required field</p>
<div class="form-group">
<label class="col-sm-4 control-label">Driver File Name</label>
<div class="col-sm-6">
<span class="hk-input-text">{{dac.driverData.filePath}}</span>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="dn"><span class="hk-required">*</span> Driver Name
<a class="hk-btn-icon" tabindex="0" role="button" popover-append-to-body="true"
popover-placement="top" popover-trigger="click" popover="The symbolic name of the driver to be
referenced by the Datsource(s)"><i class="fa fa-info-circle"></i></a>
</label>
<div class="col-sm-6">
<span class="hk-input-text">{{dac.driverData.driverName}}</span>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="dmn"><span class="hk-required">*</span> Driver Module Name
<a class="hk-btn-icon" tabindex="0" role="button" popover-append-to-body="true"
popover-placement="top" popover-trigger="click" popover="The name of the module that will be created in
the EAP server"><i class="fa fa-info-circle"></i></a>
</label>
<div class="col-sm-6">
<span class="hk-input-text">{{dac.driverData.moduleName}}</span>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="dc"><span class="hk-required">*</span> Driver Class</label>
<div class="col-sm-6">
<span class="hk-input-text">{{dac.driverData.driverClass}}</span>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="dmv">Driver Major Version</label>
<div class="col-sm-6">
<span class="hk-input-text">{{dac.driver.driverMajorVersion || '-'}}</span>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="dmiv">Driver Minor Version</label>
<div class="col-sm-6">
<span class="hk-input-text">{{dac.driver.driverMinorVersion || '-'}}</span>
</div>
</div>
</fieldset>
</form>

</div>

<div class="modal-footer">
<button type="button" class="btn btn-default hk-btn-distant" ng-click="dac.onClose()"
ng-hide="dac.driverData.hasDeploymentError || dac.driverData.hasDeployedSuccessfully"
ng-disabled="dac.driverData.uploading">Cancel</button>
<button type="button" wz-previous class="btn btn-default" ng-disabled="dac.driverData.uploading"
ng-hide="dac.driverData.hasDeployedSuccessfully"> &#60; Back</button>
<button type="button" class="btn btn-primary" ng-click="dac.addDriver()"
ng-hide="dac.driverData.hasDeploymentError || dac.driverData.hasDeployedSuccessfully"
ng-disabled="dac.driverData.uploading">Add</button>
<button type="button" class="btn btn-primary" wz-finish ng-disabled="dac.driverData.uploading"
ng-show="dac.driverData.hasDeploymentError || dac.driverData.hasDeployedSuccessfully">Exit</button>
</div>

</wz-step>

</wizard>
Original file line number Diff line number Diff line change
Expand Up @@ -246,6 +246,22 @@ module HawkularMetrics {

}

public showDriverAddDialog():void {

/// create a new isolate scope for dialog inherited from current scope instead of default $rootScope
let driverAddDialog = this.$modal.open({
templateUrl: 'plugins/metrics/html/app-details/modals/detail-datasources-driver-add.html',
controller: 'AppServerDatasourcesDriverAddDialogController as dac',
scope: this.$scope.$new()
});

driverAddDialog.result.then((modalValue) => {
// handle any returned modalValue if required
}, (reason) => {
// handle any returned cancel reason if required
});
}

private formatBucketedChartOutput(response):IChartDataPoint[] {
// The schema is different for bucketed output
return _.map(response, (point:IChartDataPoint) => {
Expand Down

0 comments on commit 69a851c

Please sign in to comment.