Skip to content
This repository has been archived by the owner on Aug 21, 2021. It is now read-only.

Commit

Permalink
gui
Browse files Browse the repository at this point in the history
  • Loading branch information
@suvigyavijay
suvigyavijay committed Jun 4, 2017
1 parent bce5bf7 commit 9048285
Show file tree
Hide file tree
Showing 2 changed files with 188 additions and 133 deletions.
252 changes: 127 additions & 125 deletions src/app/components/dashboard/dashboard.html
View file
@@ -1,120 +1,121 @@
<div class="row" ng-if="!vm.embed">
<div class="col-md-6">
<form role="form" name="form">
<div class="input-group input-group-lg target" ng-class="{'has-error': form.host.$invalid && form.host.$dirty}">
<span class="input-group-addon" ng-click="flags.isHostnameExpanded = !flags.isHostnameExpanded;">Hostname &nbsp; <i class="fa fa-plus-square-o" ng-if="!flags.isHostnameExpanded"></i><i class="fa fa-minus-square-o" ng-if="flags.isHostnameExpanded"></i></span>
<input type="text" class="form-control hostname-input" id="hostnameInput" name="host" data-content="Please enter the instance hostname. Port can be specified using the <hostname>:<port> format. Expand to change hostspec." rel="popover" data-placement="bottom" data-trigger="hover" data-container="body" ng-model="vm.inputHost" ng-change="vm.updateHost()" ng-model-options="{ updateOn: 'default', debounce: 1000 }" delay="1000" ng-disabled="flags.contextUpdating == true || ( flags.disableContainerSelectNone && flags.disableHostnameInputContainerSelect)" required placeholder="Instance Hostname">
<i class="fa fa-refresh fa-2x form-control-feedback" ng-if="flags.contextUpdating"></i>
<i class="fa fa-check fa-2x form-control-feedback" ng-if="flags.contextAvailable"></i>
</div>
</form>
</div>
<div class="btn-group col-md-2 widget-wrapper" id="widgetWrapper">
<button id="widgetButton" type="button" class="dropdown-toggle btn btn-lg btn-default btn-block widget-button" data-toggle="dropdown">Widget <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li class="dropdown-submenu" ng-repeat="group in widgetDefs | groupBy: 'group'">
<a ng-click="void(0)" data-toggle="dropdown">{{group}}</a>
<ul class="dropdown-menu">
<li ng-repeat="widget in widgetDefs | groupFilter: group">
<a ng-click="vm.addWidget($event, widget);">{{widget.title}}</a>
</li>
</ul>
</li>
<li role="presentation" class="divider"></li>
<li>
<a href="javascript:void(0);" ng-click="loadWidgets(defaultWidgets); vm.addWidgetToURL(defaultWidgets);">Default Widgets</a>
</li>
<li>
<a href="javascript:void(0);" ng-click="loadWidgets(emptyWidgets); vm.removeAllWidgetFromURL();">Clear Widgets</a>
</li>
<li role="presentation" class="divider"></li>
<li>
<a href="javascript:void(0);" ng-click="vm.resetDashboard();">Reset Dashboard</a>
</li>
</ul>
</div>
<div class="col-md-2">
<form role="form">
<div class="input-group input-group-lg window" ng-class="{'has-error': form.window.$invalid && form.window.$dirty}">
<span class="input-group-addon">Window</span>
<select class="form-control" name="window" id="windowInput" data-content="The duration window for all charts in this dashboard." rel="popover" data-placement="bottom" data-trigger="hover" data-container="body" ng-model="properties.window" ng-change="vm.updateWindow()">
<option value="2">2 min</option>
<option value="5">5 min</option>
<option value="10">10 min</option>
</select>
</div>
</form>
</div>
<div class="col-md-2">
<form role="form">
<div class="input-group input-group-lg interval" ng-class="{'has-error': form.interval.$invalid && form.interval.$dirty}">
<span class="input-group-addon">Interval</span>
<select class="form-control" name="interval" id="intervalInput" data-content="The update interval used by all charts in this dashboard." rel="popover" data-placement="bottom" data-trigger="hover" data-container="body" ng-model="properties.interval" ng-change="vm.updateInterval()">
<option value="1">1 sec</option>
<option value="2">2 sec</option>
<option value="3">3 sec</option>
<option value="5">5 sec</option>
</select>
</div>
</form>
</div>
<div class="col-md-6">
<form role="form" name="form">
<div class="input-group input-group-lg target" ng-class="{'has-error': form.host.$invalid && form.host.$dirty}">
<span class="input-group-addon" ng-click="flags.isHostnameExpanded = !flags.isHostnameExpanded;">Hostname &nbsp; <i class="fa fa-plus-square-o" ng-if="!flags.isHostnameExpanded"></i><i class="fa fa-minus-square-o" ng-if="flags.isHostnameExpanded"></i></span>
<input type="text" class="form-control hostname-input" id="hostnameInput" name="host" data-content="Please enter the instance hostname. Port can be specified using the <hostname>:<port> format. Expand to change hostspec." rel="popover" data-placement="bottom" data-trigger="hover" data-container="body" ng-model="vm.inputHost" ng-change="vm.updateHost()" ng-model-options="{ updateOn: 'default', debounce: 1000 }" delay="1000" ng-disabled="flags.contextUpdating == true || ( flags.disableContainerSelectNone && flags.disableHostnameInputContainerSelect)" required placeholder="Instance Hostname">
<i class="fa fa-refresh fa-2x form-control-feedback" ng-if="flags.contextUpdating"></i>
<i class="fa fa-check fa-2x form-control-feedback" ng-if="flags.contextAvailable"></i>
</div>
</form>
</div>
<div class="btn-group btn-group-lg col-md-2" id="widgetWrapper">
<div class="btn-group btn-group-lg widget-wrapper">
<button id="widgetButton" type="button" class="dropdown-toggle btn btn-lg btn-default" data-toggle="dropdown">Widget <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li class="dropdown-submenu" ng-repeat="group in widgetDefs | groupBy: 'group'">
<a ng-click="void(0)" data-toggle="dropdown">{{group}}</a>
<ul class="dropdown-menu">
<li ng-repeat="widget in widgetDefs | groupFilter: group">
<a ng-click="vm.addWidget($event, widget);">{{widget.title}}</a>
</li>
</ul>
</li>
<li role="presentation" class="divider"></li>
<li>
<a href="javascript:void(0);" ng-click="loadWidgets(defaultWidgets); vm.addWidgetToURL(defaultWidgets);">Default Widgets</a>
</li>
<li>
<a href="javascript:void(0);" ng-click="loadWidgets(emptyWidgets); vm.removeAllWidgetFromURL();">Clear Widgets</a>
</li>
<li role="presentation" class="divider"></li>
<li>
<a href="javascript:void(0);" ng-click="vm.resetDashboard();">Reset Dashboard</a>
</li>
</ul>
</div>
<button id="customWidgetButton" type="button" class="btn btn-lg btn-default" data-toggle="modal" data-target="#customWidgetModal"><i class="fa fa-plus"></i></button>
</div>
<div class="col-md-2">
<form role="form">
<div class="input-group input-group-lg window" ng-class="{'has-error': form.window.$invalid && form.window.$dirty}">
<span class="input-group-addon">Window</span>
<select class="form-control" name="window" id="windowInput" data-content="The duration window for all charts in this dashboard." rel="popover" data-placement="bottom" data-trigger="hover" data-container="body" ng-model="properties.window" ng-change="vm.updateWindow()">
<option value="2">2 min</option>
<option value="5">5 min</option>
<option value="10">10 min</option>
</select>
</div>
</form>
</div>
<div class="col-md-2">
<form role="form">
<div class="input-group input-group-lg interval" ng-class="{'has-error': form.interval.$invalid && form.interval.$dirty}">
<span class="input-group-addon">Interval</span>
<select class="form-control" name="interval" id="intervalInput" data-content="The update interval used by all charts in this dashboard." rel="popover" data-placement="bottom" data-trigger="hover" data-container="body" ng-model="properties.interval" ng-change="vm.updateInterval()">
<option value="1">1 sec</option>
<option value="2">2 sec</option>
<option value="3">3 sec</option>
<option value="5">5 sec</option>
</select>
</div>
</form>
</div>
</div>
<div class="row" ng-show="flags.isHostnameExpanded" ng-if="!vm.embed">
<div class="col-md-6">
<form role="form" name="form">
<div class="input-group input-group-lg target" ng-show="!flags.disableHostspecInput" ng-class="{'has-error': form.hostspec.$invalid && form.hostspec.$dirty}">
<span class="input-group-addon">Hostspec</span>
<input type="text" class="form-control" id="hostspecInput" name="host" data-content="Please enter the instance hostspec." rel="popover" data-placement="bottom" data-trigger="hover" data-container="body" ng-model="properties.hostspec" ng-change="vm.updateHost()" ng-model-options="{ updateOn: 'default', debounce: 1000 }" delay="1000" ng-disabled="flags.contextUpdating == true || ( flags.disableContainerSelectNone && flags.disableHostnameInputContainerSelect )" required placeholder="Instance Hostspec">
</div>
<div class="input-group input-group-lg target" ng-show="flags.enableContainerWidgets && !flags.disableContainerFilter">
<span class="input-group-addon">Container Filter</span>
<input type="text" class="form-control" id="globalFilterInput" name="globalFilter" data-content="Global filter for container widgets" rel="popover" data-placement="bottom" data-trigger="hover" data-container="body" ng-model="properties.containerFilter" ng-change="vm.updateContainerFilter()" ng-model-options="{ updateOn: 'default', debounce: 1000 }" delay="1000" placeholder="Container Filter">
</div>
<div class="input-group input-group-lg target" ng-show="flags.enableContainerWidgets && !flags.disableContainerSelect">
<span class="input-group-addon" >Container Id</span>
<select id="selectedContainer" ng-model="properties.selectedContainer" ng-change="vm.updateContainer()" class="form-control">
<option ng-disabled="flags.disableContainerSelectNone && !flags.containerSelectOverride" value="">All</option>
<option ng-repeat="container in properties.containerList">{{container}}</option>
</select>
</div>
</form>
</div>
<div class="col-md-6">
<p class="lead hostname-label" id="hostnameLabel" data-content="PMCD hostname. The hostname from the actual instance you're monitoring." rel="popover" data-placement="bottom" data-trigger="hover" data-container="body">{{flags.contextAvailable && properties.hostname ? properties.hostname : 'Disconnected'}}</p>
</div>
<div class="col-md-6">
<form role="form" name="form">
<div class="input-group input-group-lg target" ng-show="!flags.disableHostspecInput" ng-class="{'has-error': form.hostspec.$invalid && form.hostspec.$dirty}">
<span class="input-group-addon">Hostspec</span>
<input type="text" class="form-control" id="hostspecInput" name="host" data-content="Please enter the instance hostspec." rel="popover" data-placement="bottom" data-trigger="hover" data-container="body" ng-model="properties.hostspec" ng-change="vm.updateHost()" ng-model-options="{ updateOn: 'default', debounce: 1000 }" delay="1000" ng-disabled="flags.contextUpdating == true || ( flags.disableContainerSelectNone && flags.disableHostnameInputContainerSelect )" required placeholder="Instance Hostspec">
</div>
<div class="input-group input-group-lg target" ng-show="flags.enableContainerWidgets && !flags.disableContainerFilter">
<span class="input-group-addon">Container Filter</span>
<input type="text" class="form-control" id="globalFilterInput" name="globalFilter" data-content="Global filter for container widgets" rel="popover" data-placement="bottom" data-trigger="hover" data-container="body" ng-model="properties.containerFilter" ng-change="vm.updateContainerFilter()" ng-model-options="{ updateOn: 'default', debounce: 1000 }" delay="1000" placeholder="Container Filter">
</div>
<div class="input-group input-group-lg target" ng-show="flags.enableContainerWidgets && !flags.disableContainerSelect">
<span class="input-group-addon">Container Id</span>
<select id="selectedContainer" ng-model="properties.selectedContainer" ng-change="vm.updateContainer()" class="form-control">
<option ng-disabled="flags.disableContainerSelectNone && !flags.containerSelectOverride" value="">All</option>
<option ng-repeat="container in properties.containerList">{{container}}</option>
</select>
</div>
</form>
</div>
<div class="col-md-6">
<p class="lead hostname-label" id="hostnameLabel" data-content="PMCD hostname. The hostname from the actual instance you're monitoring." rel="popover" data-placement="bottom" data-trigger="hover" data-container="body">{{flags.contextAvailable && properties.hostname ? properties.hostname : 'Disconnected'}}</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="btn-toolbar" ng-if="!options.hideToolbar">
<div class="btn-group" ng-if="!options.widgetButtons">
<button type="button" class="dropdown-toggle btn btn-primary" data-toggle="dropdown">Add Widget <span
class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li ng-repeat="widget in widgetDefs">
<a href="#" ng-click="addWidgetInternal($event, widget);"><span class="label label-primary">{{widget.name}}</span></a>
</li>
</ul>
</div>
<div class="col-md-12">
<div class="btn-toolbar" ng-if="!options.hideToolbar">
<div class="btn-group" ng-if="!options.widgetButtons">
<button type="button" class="dropdown-toggle btn btn-primary" data-toggle="dropdown">Add Widget <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li ng-repeat="widget in widgetDefs">
<a href="#" ng-click="addWidgetInternal($event, widget);"><span class="label label-primary">{{widget.name}}</span></a>
</li>
</ul>
</div>

<div class="btn-group" ng-if="options.widgetButtons">
<button ng-repeat="widget in widgetDefs"
ng-click="addWidgetInternal($event, widget);" type="button" class="btn btn-primary">
{{widget.name}}
</button>
</div>
<div class="btn-group" ng-if="options.widgetButtons">
<button ng-repeat="widget in widgetDefs" ng-click="addWidgetInternal($event, widget);" type="button" class="btn btn-primary">
{{widget.name}}
</button>
</div>

<button class="btn btn-warning" ng-click="resetWidgetsToDefault()">Default Widgets</button>
<button class="btn btn-warning" ng-click="resetWidgetsToDefault()">Default Widgets</button>

<button ng-if="options.storage && options.explicitSave" ng-click="options.saveDashboard()" class="btn btn-success" ng-disabled="!options.unsavedChangeCount">{{ !options.unsavedChangeCount ? "all saved" : "save changes (" + options.unsavedChangeCount + ")" }}</button>
<button ng-if="options.storage && options.explicitSave" ng-click="options.saveDashboard()" class="btn btn-success" ng-disabled="!options.unsavedChangeCount">{{ !options.unsavedChangeCount ? "all saved" : "save changes (" + options.unsavedChangeCount + ")" }}</button>

<button ng-click="clear();" type="button" class="btn btn-info">Clear</button>
</div>
<button ng-click="clear();" type="button" class="btn btn-info">Clear</button>
</div>

<div ui-sortable="sortableOptions" ng-model="widgets" class="dashboard-widget-area">
<div ng-repeat="widget in widgets" ng-style="widget.containerStyle" class="widget-container" widget>
<div class="widget panel panel-default">
<div class="widget-header panel-heading">
<h3 class="panel-title">
<div ui-sortable="sortableOptions" ng-model="widgets" class="dashboard-widget-area">
<div ng-repeat="widget in widgets" ng-style="widget.containerStyle" class="widget-container" widget>
<div class="widget panel panel-default">
<div class="widget-header panel-heading">
<h3 class="panel-title">
<span class="widget-title">{{widget.title}}</span>
<!-- <span class="widget-title" ng-dblclick="editTitle(widget)" ng-hide="widget.editingTitle">{{widget.title}}</span> -->
<!-- <form action="" class="widget-title" ng-show="widget.editingTitle" ng-submit="saveTitleEdit(widget)">
Expand All @@ -124,24 +125,25 @@ <h3 class="panel-title">
<span ng-click="removeWidget(widget); vm.removeWidgetFromURL(widget);" class="glyphicon glyphicon-remove" ng-if="!options.hideWidgetClose"></span>
<span ng-click="openWidgetSettings(widget);" class="glyphicon glyphicon-cog" ng-if="!options.hideWidgetSettings && widget.hasLocalSettings"></span>
</h3>
</div>
<div class="panel-body widget-content" ng-style="widget.contentStyle"></div>
<div class="widget-ew-resizer" ng-mousedown="grabResizer($event)"></div>
<div ng-if="widget.enableVerticalResize" class="widget-s-resizer" ng-mousedown="grabSouthResizer($event)"></div>
</div>
</div>
</div>
</div>
</div>
<div class="panel-body widget-content" ng-style="widget.contentStyle"></div>
<div class="widget-ew-resizer" ng-mousedown="grabResizer($event)"></div>
<div ng-if="widget.enableVerticalResize" class="widget-s-resizer" ng-mousedown="grabSouthResizer($event)"></div>
</div>
</div>
</div>
</div>
</div>
<div class="row version-div" ng-if="!vm.embed">Version: {{vm.version}}</div>

<script>
(function () {
'use strict';
$('#hostnameInput').popover();
$('#hostspecInput').popover();
$('#globalFilterInput').popover();
$('#windowInput').popover();
$('#intervalInput').popover();
$('#hostnameLabel').popover();
}());
</script>
(function () {
'use strict';
$('#hostnameInput').popover();
$('#hostspecInput').popover();
$('#globalFilterInput').popover();
$('#windowInput').popover();
$('#intervalInput').popover();
$('#hostnameLabel').popover();
}());
</script>

0 comments on commit 9048285

Please sign in to comment.