From: Samuel Guimarães <sguimaraes943(a)gmail.com&gt; Signed-off-by: Samuel Guimarães <sguimaraes943(a)gmail.com&gt; --- ui/config/tab-ext.xml | 1 + ui/css/bootstrap.custom.css | 20 +++++++++++++++++--- ui/css/src/modules/_wok-variables.scss | 6 ++++-- ui/css/wok.css | 14 +++++++++----- ui/js/src/wok.main.js | 8 ++++++++ 5 files changed, 39 insertions(+), 10 deletions(-) diff --git a/ui/config/tab-ext.xml b/ui/config/tab-ext.xml index 0b0e2b6..91ecdf3 100644 --- a/ui/config/tab-ext.xml +++ b/ui/config/tab-ext.xml @@ -5,6 +5,7 @@ <access role="admin" mode="admin"/> <access role="user" mode="none"/> <title>Settings</title> + <order>-1</order> <path>tabs/settings.html</path> </tab> </tabs-ext> diff --git a/ui/css/bootstrap.custom.css b/ui/css/bootstrap.custom.css index 69e5b5d..0830ca9 100644 --- a/ui/css/bootstrap.custom.css +++ b/ui/css/bootstrap.custom.css @@ -4564,9 +4564,9 @@ tbody.collapse.in { background-color: #7f1c7d !important; } -.navbar-default .navbar-nav > .active > a.administration, -.navbar-default .navbar-nav > .active > a.administration:hover, -.navbar-default .navbar-nav > .active > a.administration:focus { +.navbar-default .navbar-nav > .active > a.wok, +.navbar-default .navbar-nav > .active > a.wok:hover, +.navbar-default .navbar-nav > .active > a.wok:focus { height: 41px; background-color: #d9182d !important; } @@ -4592,6 +4592,20 @@ tbody.collapse.in { background-color: #8cc63f !important; } +.navbar-default .navbar-nav > .active > a.wokTab, +.navbar-default .navbar-nav > .active > a.wokTab:hover, +.navbar-default .navbar-nav > .active > a.wokTab:focus { + height: 41px; + background-color: #930c0c !important; +} + +.navbar-default .navbar-nav > .active > a.wokSelected, +.navbar-default .navbar-nav > .active > a.wokSelected:hover, +.navbar-default .navbar-nav > .active > a.wokSelected:focus { + height: 41px; + background-color: #d9182d !important; +} + .navbar-default .navbar-nav > .hostname { margin: 0; padding: 8px 10px; diff --git a/ui/css/src/modules/_wok-variables.scss b/ui/css/src/modules/_wok-variables.scss index 1cd5ed2..13e5d73 100644 --- a/ui/css/src/modules/_wok-variables.scss +++ b/ui/css/src/modules/_wok-variables.scss @@ -69,10 +69,12 @@ $colors: ( templates: #00a6a0, storage: #feb813, network: #7f1c7d, - administration: #d9182d, + wok: #d9182d, virtualizationTab: #59930c, hostTab: #00578c, - virtualizationSelected: #8cc63f + virtualizationSelected: #8cc63f, + wokTab: #930c0c, + wokSelected: #d9182d ); diff --git a/ui/css/wok.css b/ui/css/wok.css index c2fb62d..6831f72 100644 --- a/ui/css/wok.css +++ b/ui/css/wok.css @@ -153,10 +153,6 @@ background-color: #8cc63f !important; } -#administration-root-container .navbar-default.toolbar { - background-color: #008abf !important; -} - #tabPanel.hostSelected { background-color: #008abf !important; } @@ -181,7 +177,7 @@ background-color: #7f1c7d !important; } -#tabPanel.administration { +#tabPanel.wok { background-color: #d9182d !important; } @@ -197,6 +193,14 @@ background-color: #8cc63f !important; } +#tabPanel.wokTab { + background-color: #930c0c !important; +} + +#tabPanel.wokSelected { + background-color: #d9182d !important; +} + @media (min-width: 991px) and (max-width: 992px) { .host-dashboard .container { padding-right: 10px; diff --git a/ui/js/src/wok.main.js b/ui/js/src/wok.main.js index e0fbc13..1f3967d 100644 --- a/ui/js/src/wok.main.js +++ b/ui/js/src/wok.main.js @@ -117,12 +117,14 @@ wok.main = function() { return tabs; }; + var wokConfigUrl = 'ui/config/tab-ext.xml'; var pluginConfigUrl = 'plugins/{plugin}/ui/config/tab-ext.xml'; var pluginI18nUrl = 'plugins/{plugin}/i18n.json'; var DEFAULT_HASH; var buildTabs = function(callback) { var tabs = []; var functionalTabs = []; + var wokTabs = retrieveTabs(wokConfigUrl); wok.listPlugins(function(plugins) { $(plugins).each(function(i, p) { var url = wok.substitute(pluginConfigUrl, { @@ -146,6 +148,12 @@ wok.main = function() { //ordering of first level tab functionalTabs.sort(); + if(wokTabs.length > 0){ + //Adds wok to first index in list + functionalTabs.unshift(wokTabs[0].functionality); + //Adds Wok tabs to the list + tabs.unshift.apply(tabs, wokTabs); + } //sort second level tab based on their ordering number var orderedTabs = tabs.slice(0); -- 1.9.3

From: Samuel Guimarães <sguimaraes943(a)gmail.com&gt; This commit implements User Activity Log into a new tab named "Settings". This commit also includes some enhancements for other screens, such as: *Added new jQuery-UI Datepicker SCSS module *Added Typeahead.js SCSS module from Ginger into Wok Signed-off-by: samhenri <sguimaraes943(a)gmail.com&gt; Signed-off-by: Samuel Guimarães <sguimaraes943(a)gmail.com&gt; --- ui/css/Makefile.am | 8 +- ui/css/settings.css | 195 +++++++++++++++++++++ ui/css/src/modules/_datepicker.scss | 147 ++++++++++++++++ ui/css/src/modules/_toolbar.scss | 9 +- ui/css/src/modules/_typeahead.scss | 127 ++++++++++++++ ui/css/src/settings.scss | 132 ++++++++++++++ ui/css/src/wok.scss | 4 + ui/css/wok.css | 298 ++++++++++++++++++++++++++++++++ ui/js/wok.bootgrid.js | 141 +++++++++++++++ ui/js/wok.user-log.js | 246 ++++++++++++++++++++++++++ ui/pages/i18n.json.tmpl | 14 +- ui/pages/tabs/settings-search.html.tmpl | 73 ++++++++ ui/pages/tabs/settings.html.tmpl | 87 +++++++--- 13 files changed, 1454 insertions(+), 27 deletions(-) create mode 100644 ui/css/settings.css create mode 100644 ui/css/src/modules/_datepicker.scss create mode 100644 ui/css/src/modules/_typeahead.scss create mode 100644 ui/css/src/settings.scss create mode 100644 ui/js/wok.bootgrid.js create mode 100644 ui/js/wok.user-log.js create mode 100644 ui/pages/tabs/settings-search.html.tmpl diff --git a/ui/css/Makefile.am b/ui/css/Makefile.am index 875783d..aee33d7 100644 --- a/ui/css/Makefile.am +++ b/ui/css/Makefile.am @@ -22,7 +22,7 @@ SUBDIRS = fontawesome opensans EXTRA_DIST = theme-default cssdir = $(datadir)/wok/ui/css -dist_css_DATA = theme-default.min.css jquery-ui.custom.css wok.css bootstrap.custom.css bootstrap-select.custom.css +dist_css_DATA = theme-default.min.css jquery-ui.custom.css wok.css bootstrap.custom.css bootstrap-select.custom.css settings.css wok: src/wok.scss src/modules/*.scss echo "Compiling .scss file $<" @@ -32,11 +32,15 @@ bootstrap: src/bootstrap.custom.scss echo "Compiling .scss file $<" sassc -s expanded $< bootstrap.custom.css +settings: src/settings.scss + echo "Compiling .scss file $<" + sassc -s expanded $< settings.css + bootstrap-select: src/bootstrap-select.custom.scss echo "Compiling .scss file $<" sassc -s expanded $< bootstrap-select.custom.css -css: wok bootstrap bootstrap-select +css: wok bootstrap bootstrap-select settings theme-default.min.css: theme-default/*.css cat $^ > $@ diff --git a/ui/css/settings.css b/ui/css/settings.css new file mode 100644 index 0000000..77fc679 --- /dev/null +++ b/ui/css/settings.css @@ -0,0 +1,195 @@ +/* + * Project Wok + * + * Copyright IBM Corp, 2015-2016 + * + * Code derived from Project Kimchi + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +/* + * A partial implementation of the Ruby list functions from Compass: + * https://github.com/Compass/compass/blob/stable/lib/compass/sass_extension... + */ +/* + * A partial implementation of the Ruby constants functions from Compass: + * https://github.com/Compass/compass/blob/stable/lib/compass/sass_extension... + */ +/* + * A partial implementation of the Ruby display functions from Compass: + * https://github.com/Compass/compass/blob/stable/core/lib/compass/core/sass... + */ +#wok-root-container .accordion { + margin: 12px 20px 12px 60px; + padding-bottom: 18px; + border-bottom: 1px solid #eee; + overflow: visible; + clear: both; +} + +#wok-root-container .accordion:first-chld { + margin-top: 24px; +} + +#wok-root-container .accordion > h3 { + margin: 0; + padding: 0; + font-size: 26px; + font-weight: 300; + height: 44px; + display: block; +} + +#wok-root-container .accordion > h3 a { + color: #3a393b; + text-decoration: none; + display: block; + padding: 6px 30px; + margin-left: -30px; + margin-right: -30px; +} + +#wok-root-container .accordion > h3 a span.accordion-icon { + margin-left: -52px; + vertical-align: middle; + display: inline-block; + font: normal normal normal 32px/1 FontAwesome; + text-rendering: auto; + -webkit-font-smoothing: antialiased; + color: #3a393b; +} + +#wok-root-container .accordion > h3 a[aria-expanded="false"] span.accordion-icon:before { + content: "\f01a"; +} + +#wok-root-container .accordion > h3 a[aria-expanded="true"] span.accordion-icon:before { + content: "\f01b"; +} + +#wok-root-container .accordion > h3 a span.accordion-text { + margin-left: 23px; + display: inline-block; + vertical-align: middle; +} + +.wok div.modal-footer { + background-color: #d9182d; +} + +.wok .modal-body .nav-tabs > li.active > a, +.wok .modal-body .nav-tabs > li.active > a:hover, +.wok .modal-body .nav-tabs > li.active > a:focus { + border-color: -moz-use-text-color -moz-use-text-color #d9182d; +} + +.wok.modal .row.clearfix { + margin-left: -10px; + margin-right: -10px; +} + +.wok.modal .form-group.col-sm-6 { + padding-left: 10px; + padding-right: 10px; +} + +.action-group { + position: absolute; + z-index: 999; +} + +div#user-log-actions { + padding-top: 15px; +} + +.label { + display: inline-block; + vertical-align: middle; +} + +.label-primary.label-wok { + background-color: #d9182d; +} + +.label-primary.label-wok[href]:hover, +.label-primary.label-wok[href]:focus { + background-color: #ab1323; +} + +.label-primary.label-kimchi { + background-color: #8cc63f; +} + +.label-primary.label-kimchi[href]:hover, +.label-primary.label-kimchi[href]:focus { + background-color: #71a230; +} + +.label-primary.label-ginger { + background-color: #00578c; +} + +.label-primary.label-ginger[href]:hover, +.label-primary.label-ginger[href]:focus { + background-color: #003759; +} + +.label-primary.label-gingerbase { + background-color: #008abf; +} + +.label-primary.label-gingerbase[href]:hover, +.label-primary.label-gingerbase[href]:focus { + background-color: #00658c; +} + +.bootgrid-table th > .column-header-anchor > .icon.fa { + right: 6px; + top: 4px; +} + +span.trim { + display: inline-block; + width: 100%; + vertical-align: middle; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + padding-right: 6px; +} + +.table > tbody > tr > td { + vertical-align: middle; +} + +.tooltip > .tooltip-inner { + font-weight: 400; + font-size: 12.5pt; + padding: 8px !important; + max-width: 420px !important; + text-align: left; +} + +.search { + margin: 0 !important; + width: 514px !important; +} + +.pagination .button { + font-weight: 600; + cursor: pointer; +} + +.pagination .disabled .button { + cursor: not-allowed; +} diff --git a/ui/css/src/modules/_datepicker.scss b/ui/css/src/modules/_datepicker.scss new file mode 100644 index 0000000..261de36 --- /dev/null +++ b/ui/css/src/modules/_datepicker.scss @@ -0,0 +1,147 @@ +// +// Project Wok +// +// Copyright IBM Corp, 2015-2016 +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. +// +.ui-datepicker { + background: $body-bg; + border: 1px solid $input-border-focus; + border-radius: 4px; + box-shadow: 0 0 8px rgba(102,175,233,.6); + display: none; + margin-top: 4px; + padding: 10px; + width: 363px; +} + +.ui-datepicker .ui-state-hover { + background: none !important; + border: none !important; +} +.ui-datepicker a, +.ui-datepicker a:hover { + text-decoration: none; +} +.ui-datepicker a:hover, +.ui-datepicker td:hover a { + color: $highlights-color; + -webkit-transition: color 0.1s ease-in-out; + -moz-transition: color 0.1s ease-in-out; + -o-transition: color 0.1s ease-in-out; + transition: color 0.1s ease-in-out; +} +.ui-datepicker .ui-datepicker-header { + background: none !important; + border: none !important; + margin-bottom: 4px; + text-align: center; +} +.ui-datepicker .ui-datepicker-title { + font-weight: 700; + color: $gray-base; +} + +.ui-datepicker .ui-datepicker-next, +.ui-datepicker .ui-datepicker-prev { + top: 4px !important; + height: 26px; + min-width: 32px; + max-width: 32px; + text-align: center !important; + cursor: pointer; + color: transparent; + line-height: 26px; + box-sizing: content-box; +} +.ui-datepicker .ui-datepicker-next .ui-icon, +.ui-datepicker .ui-datepicker-prev .ui-icon { + color: transparent; + visibility: hidden; +} +.ui-datepicker .ui-datepicker-next:before, +.ui-datepicker .ui-datepicker-prev:before { + display: inline; + font-family: 'Font Awesome', FontAwesome; + -webkit-font-smoothing: antialiased; + font-style: normal; + font-weight: normal; + font-size: 14px; + content: "\f060"; + color: $gray-base !important; +} +.ui-datepicker .ui-datepicker-next:before { + content: "\f061"; +} +.ui-datepicker .ui-datepicker-prev { + float: left; +} +.ui-datepicker .ui-datepicker-prev-hover{ + left: 2px !important; +} +.ui-datepicker .ui-datepicker-next { + float: right; +} +.ui-datepicker .ui-datepicker-next-hover{ + right: 2px !important; +} +.ui-datepicker .ui-datepicker-calendar { + table-layout: fixed; + width: 100%; +} +.ui-datepicker td, +.ui-datepicker th { + border-radius: 0!important; +} +.ui-datepicker .ui-datepicker-calendar td { + padding: 0; + border-radius: 0; +} +.ui-datepicker td>a, +.ui-datepicker td>span { + border: 0 !important; + margin: 0 auto; + padding: 9px 0; + display: block; + text-align: center; + height: 36px; + min-width: 36px; + max-width: 36px; + background: none !important; + color: $gray-darker !important; + font-size: 13px; + font-weight: 400 !important; + text-decoration: none; + box-sizing: border-box; + @include transition(background-color 0.1s ease-in-out, color 0.1s ease-in-out); +} +.ui-datepicker .ui-datepicker-calendar td:hover { + background: transparent; + cursor: pointer; +} +.ui-datepicker td>a:hover { + background-color: $table-border-color !important; +} +.ui-datepicker .ui-datepicker-today { + background: none !important; +} +.ui-datepicker .ui-datepicker-today a { + background: $table-border-color; + color: $gray-base; + font-weight: 600 !important; +} +.ui-datepicker .ui-datepicker-calendar .ui-datepicker-unselectable:hover { + background-color: #fff; + cursor: default; +} \ No newline at end of file diff --git a/ui/css/src/modules/_toolbar.scss b/ui/css/src/modules/_toolbar.scss index 7f042c1..e9d5131 100644 --- a/ui/css/src/modules/_toolbar.scss +++ b/ui/css/src/modules/_toolbar.scss @@ -61,10 +61,13 @@ $bgcolor in $colors { ##{$page}-root-container .navbar-default.toolbar { @if $page=='guests' or $page=='templates' or $page=='storage' or $page=='network' { - background-color: $guests-color !important; + background-color: map-get($colors, guests) !important; } - @else if $page=='host' or $page=='administration' { - background-color: $hosts-color !important; + @else if $page=='host' { + background-color: map-get($colors, host) !important; + } + @else if $page=='wok' { + background-color: map-get($colors, wok) !important; } } } diff --git a/ui/css/src/modules/_typeahead.scss b/ui/css/src/modules/_typeahead.scss new file mode 100644 index 0000000..812770e --- /dev/null +++ b/ui/css/src/modules/_typeahead.scss @@ -0,0 +1,127 @@ +/* +* Project Wok +* +* Copyright IBM Corp, 2015-2016 +* +* Code derived from Project Kimchi +* +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +*/ + + span.twitter-typeahead .tt-menu, + span.twitter-typeahead .tt-dropdown-menu { + position: absolute; + top: 100%; + left: 0; + z-index: 1000; + display: none; + float: left; + min-width: 100%; + padding: 5px 0; + margin: 2px 0 0; + list-style: none; + font-size: 14px; + text-align: left; + background-color: $btn-default-bg; + border: 1px solid $btn-default-border; + border: 1px solid rgba(0, 0, 0, 0.15); + border-radius: 4px; + -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); + box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); + background-clip: padding-box; + } + span.twitter-typeahead .tt-suggestion { + display: block; + padding: 3px 20px; + clear: both; + font-weight: normal; + line-height: 1.42857143; + color: $list-group-link-heading-color; + white-space: nowrap; + } + span.twitter-typeahead .tt-suggestion.tt-cursor, + span.twitter-typeahead .tt-suggestion:hover, + span.twitter-typeahead .tt-suggestion:focus { + color: $dropdown-link-hover-color; + text-decoration: none; + outline: 0; + background-color: $dropdown-link-hover-bg; + } + .input-group.input-group-lg span.twitter-typeahead .form-control { + height: 46px; + padding: 10px 16px; + font-size: 18px; + line-height: 1.3333333; + border-radius: 6px; + } + .input-group.input-group-sm span.twitter-typeahead .form-control { + height: 30px; + padding: 5px 10px; + font-size: 12px; + line-height: 1.5; + border-radius: 3px; + } + span.twitter-typeahead { + width: 100%; + } + .input-group span.twitter-typeahead { + display: block !important; + height: 34px; + } + .input-group span.twitter-typeahead .tt-menu, + .input-group span.twitter-typeahead .tt-dropdown-menu { + top: 32px !important; + } + .input-group span.twitter-typeahead:not(:first-child):not(:last-child) .form-control { + border-radius: 0; + } + .input-group span.twitter-typeahead:first-child .form-control { + border-top-left-radius: 4px; + border-bottom-left-radius: 4px; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + .input-group span.twitter-typeahead:last-child .form-control { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-top-right-radius: 4px; + border-bottom-right-radius: 4px; + } + .input-group.input-group-sm span.twitter-typeahead { + height: 30px; + } + .input-group.input-group-sm span.twitter-typeahead .tt-menu, + .input-group.input-group-sm span.twitter-typeahead .tt-dropdown-menu { + top: 30px !important; + } + .input-group.input-group-lg span.twitter-typeahead { + height: 46px; + } + .input-group.input-group-lg span.twitter-typeahead .tt-menu, + .input-group.input-group-lg span.twitter-typeahead .tt-dropdown-menu { + top: 46px !important; + } + + .form-control.tt-input { + font-weight: 600; + color: $gray-base !important; + } + + .form-control.tt-hint { + font-weight: 600; + color: $gray-light !important; + } + + .form-control.tt-hint[disabled=disabled] { + background: $input-bg-disabled !important; + } diff --git a/ui/css/src/settings.scss b/ui/css/src/settings.scss new file mode 100644 index 0000000..ee6da39 --- /dev/null +++ b/ui/css/src/settings.scss @@ -0,0 +1,132 @@ +/* + * Project Wok + * + * Copyright IBM Corp, 2015-2016 + * + * Code derived from Project Kimchi + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +// Core variables +@import "modules/wok-variables"; +// Core variables and mixins +@import "vendor/bootstrap-sass/bootstrap/mixins"; +// Compass Mixins +@import "vendor/compass-mixins/lib/compass"; +// Wok Accordion Mixin +@import "modules/wok-accordion"; + +#wok-root-container{ + .accordion { + @include wok-accordion(); + } +} + +.wok { + div.modal-footer { + background-color: map-get($colors, wok); + } + .modal-body .nav-tabs > li.active > a, + .modal-body .nav-tabs > li.active > a:hover, + .modal-body .nav-tabs > li.active > a:focus { + border-color: -moz-use-text-color -moz-use-text-color map-get($colors, wok); + } + + &.modal { + .row.clearfix { + margin-left: -10px; + margin-right: -10px; + } + + .form-group.col-sm-6 { + padding-left: 10px; + padding-right: 10px; + } + } + +} + +.action-group { + position: absolute; + z-index: 999; +} + +div#user-log-actions { + padding-top: 15px; +} + +.label { + display: inline-block; + vertical-align: middle; +} + +.label-primary.label-wok { + @include label-variant(map-get($colors, wok)); +} + +.label-primary.label-kimchi { + @include label-variant(map-get($colors, virtualizationSelected)); +} + +.label-primary.label-ginger { + @include label-variant(map-get($colors, hostTab)); +} + +.label-primary.label-gingerbase { + @include label-variant(map-get($colors, hostSelected)); +} + +.bootgrid-table th>.column-header-anchor>.icon.fa { + right: 6px; + top: 4px; +} + +span.trim { + display: inline-block; + width: 100%; + vertical-align: middle; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + padding-right: 6px; +} + +.table > tbody > tr > td { + vertical-align: middle; +} + +.tooltip > .tooltip-inner { + font-weight: 400; + font-size: 12.5pt; + padding: 8px !important; + max-width: 420px !important; + text-align: left; +} + +.search { + margin: 0 !important; + width: 514px !important; +} + +.pagination { + + .button { + font-weight: 600; + cursor: pointer; + } + + .disabled .button { + cursor: not-allowed; + } +} \ No newline at end of file diff --git a/ui/css/src/wok.scss b/ui/css/src/wok.scss index ad3663c..c352077 100755 --- a/ui/css/src/wok.scss +++ b/ui/css/src/wok.scss @@ -66,6 +66,10 @@ @import "modules/wok-confirm"; // Form validation classes @import "modules/validation"; +// Typeahead.js +@import "modules/typeahead"; +// jQuery UI Datepicker CSS with Bootstrap values +@import "modules/datepicker"; // Wok About @import "modules/about"; // Utils diff --git a/ui/css/wok.css b/ui/css/wok.css index 6831f72..c6044d8 100644 --- a/ui/css/wok.css +++ b/ui/css/wok.css @@ -153,6 +153,10 @@ background-color: #8cc63f !important; } +#wok-root-container .navbar-default.toolbar { + background-color: #d9182d !important; +} + #tabPanel.hostSelected { background-color: #008abf !important; } @@ -1007,6 +1011,300 @@ input[type=radio].wok-radio + label { box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(217, 83, 79, 0.6); } +/* +* Project Wok +* +* Copyright IBM Corp, 2015-2016 +* +* Code derived from Project Kimchi +* +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +*/ +span.twitter-typeahead .tt-menu, +span.twitter-typeahead .tt-dropdown-menu { + position: absolute; + top: 100%; + left: 0; + z-index: 1000; + display: none; + float: left; + min-width: 100%; + padding: 5px 0; + margin: 2px 0 0; + list-style: none; + font-size: 14px; + text-align: left; + background-color: #fff; + border: 1px solid #ccc; + border: 1px solid rgba(0, 0, 0, 0.15); + border-radius: 4px; + -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); + box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); + background-clip: padding-box; +} + +span.twitter-typeahead .tt-suggestion { + display: block; + padding: 3px 20px; + clear: both; + font-weight: normal; + line-height: 1.42857143; + color: #333; + white-space: nowrap; +} + +span.twitter-typeahead .tt-suggestion.tt-cursor, +span.twitter-typeahead .tt-suggestion:hover, +span.twitter-typeahead .tt-suggestion:focus { + color: #151515; + text-decoration: none; + outline: 0; + background-color: #f5f5f5; +} + +.input-group.input-group-lg span.twitter-typeahead .form-control { + height: 46px; + padding: 10px 16px; + font-size: 18px; + line-height: 1.3333333; + border-radius: 6px; +} + +.input-group.input-group-sm span.twitter-typeahead .form-control { + height: 30px; + padding: 5px 10px; + font-size: 12px; + line-height: 1.5; + border-radius: 3px; +} + +span.twitter-typeahead { + width: 100%; +} + +.input-group span.twitter-typeahead { + display: block !important; + height: 34px; +} + +.input-group span.twitter-typeahead .tt-menu, +.input-group span.twitter-typeahead .tt-dropdown-menu { + top: 32px !important; +} + +.input-group span.twitter-typeahead:not(:first-child):not(:last-child) .form-control { + border-radius: 0; +} + +.input-group span.twitter-typeahead:first-child .form-control { + border-top-left-radius: 4px; + border-bottom-left-radius: 4px; + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} + +.input-group span.twitter-typeahead:last-child .form-control { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-top-right-radius: 4px; + border-bottom-right-radius: 4px; +} + +.input-group.input-group-sm span.twitter-typeahead { + height: 30px; +} + +.input-group.input-group-sm span.twitter-typeahead .tt-menu, +.input-group.input-group-sm span.twitter-typeahead .tt-dropdown-menu { + top: 30px !important; +} + +.input-group.input-group-lg span.twitter-typeahead { + height: 46px; +} + +.input-group.input-group-lg span.twitter-typeahead .tt-menu, +.input-group.input-group-lg span.twitter-typeahead .tt-dropdown-menu { + top: 46px !important; +} + +.form-control.tt-input { + font-weight: 600; + color: #000 !important; +} + +.form-control.tt-hint { + font-weight: 600; + color: #999 !important; +} + +.form-control.tt-hint[disabled=disabled] { + background: #eee !important; +} + +.ui-datepicker { + background: #fff; + border: 1px solid #66afe9; + border-radius: 4px; + box-shadow: 0 0 8px rgba(102, 175, 233, 0.6); + display: none; + margin-top: 4px; + padding: 10px; + width: 363px; +} + +.ui-datepicker .ui-state-hover { + background: none !important; + border: none !important; +} + +.ui-datepicker a, +.ui-datepicker a:hover { + text-decoration: none; +} + +.ui-datepicker a:hover, +.ui-datepicker td:hover a { + color: #fff; + -webkit-transition: color 0.1s ease-in-out; + -moz-transition: color 0.1s ease-in-out; + -o-transition: color 0.1s ease-in-out; + transition: color 0.1s ease-in-out; +} + +.ui-datepicker .ui-datepicker-header { + background: none !important; + border: none !important; + margin-bottom: 4px; + text-align: center; +} + +.ui-datepicker .ui-datepicker-title { + font-weight: 700; + color: #000; +} + +.ui-datepicker .ui-datepicker-next, +.ui-datepicker .ui-datepicker-prev { + top: 4px !important; + height: 26px; + min-width: 32px; + max-width: 32px; + text-align: center !important; + cursor: pointer; + color: transparent; + line-height: 26px; + box-sizing: content-box; +} + +.ui-datepicker .ui-datepicker-next .ui-icon, +.ui-datepicker .ui-datepicker-prev .ui-icon { + color: transparent; + visibility: hidden; +} + +.ui-datepicker .ui-datepicker-next:before, +.ui-datepicker .ui-datepicker-prev:before { + display: inline; + font-family: 'Font Awesome', FontAwesome; + -webkit-font-smoothing: antialiased; + font-style: normal; + font-weight: normal; + font-size: 14px; + content: "\f060"; + color: #000 !important; +} + +.ui-datepicker .ui-datepicker-next:before { + content: "\f061"; +} + +.ui-datepicker .ui-datepicker-prev { + float: left; +} + +.ui-datepicker .ui-datepicker-prev-hover { + left: 2px !important; +} + +.ui-datepicker .ui-datepicker-next { + float: right; +} + +.ui-datepicker .ui-datepicker-next-hover { + right: 2px !important; +} + +.ui-datepicker .ui-datepicker-calendar { + table-layout: fixed; + width: 100%; +} + +.ui-datepicker td, +.ui-datepicker th { + border-radius: 0 !important; +} + +.ui-datepicker .ui-datepicker-calendar td { + padding: 0; + border-radius: 0; +} + +.ui-datepicker td > a, +.ui-datepicker td > span { + border: 0 !important; + margin: 0 auto; + padding: 9px 0; + display: block; + text-align: center; + height: 36px; + min-width: 36px; + max-width: 36px; + background: none !important; + color: #222 !important; + font-size: 13px; + font-weight: 400 !important; + text-decoration: none; + box-sizing: border-box; + -webkit-transition: background-color 0.1s ease-in-out, color 0.1s ease-in-out; + -o-transition: background-color 0.1s ease-in-out, color 0.1s ease-in-out; + transition: background-color 0.1s ease-in-out, color 0.1s ease-in-out; +} + +.ui-datepicker .ui-datepicker-calendar td:hover { + background: transparent; + cursor: pointer; +} + +.ui-datepicker td > a:hover { + background-color: #eee !important; +} + +.ui-datepicker .ui-datepicker-today { + background: none !important; +} + +.ui-datepicker .ui-datepicker-today a { + background: #eee; + color: #000; + font-weight: 600 !important; +} + +.ui-datepicker .ui-datepicker-calendar .ui-datepicker-unselectable:hover { + background-color: #fff; + cursor: default; +} + #aboutModal .modal-body > .content { text-align: center; margin: 0 auto; diff --git a/ui/js/wok.bootgrid.js b/ui/js/wok.bootgrid.js new file mode 100644 index 0000000..94b45f6 --- /dev/null +++ b/ui/js/wok.bootgrid.js @@ -0,0 +1,141 @@ +/* + * Copyright IBM Corp, 2015-2016 + * + * This library is free software; you can redistribute it and/or + * modify it under the terms of the GNU Lesser General Public + * License as published by the Free Software Foundation; either + * version 2.1 of the License, or (at your option) any later version. + * + * This library is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * Lesser General Public License for more details. + * + * You should have received a copy of the GNU Lesser General Public + * License along with this library; if not, write to the Free Software + * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA + */ + +wok.createBootgrid = function(opts) { + var containerId = opts['id']; + var gridId = opts['gridId']; + noResults = opts['noResults']; + var fields = JSON.parse(opts['gridFields']); + var selection = ('selection' in opts) ? opts['selection'] : true; + var navigation = ('navigation' in opts) ? opts['navigation'] : 3; + + var gridMessage = ('loadingMessage' in opts && opts['loadingMessage'].trim() && opts['loadingMessage'].length > 0) ? opts['loadingMessage'] : i18n['WOKSETT0011M']; + var gridloadingHtml = ['<div id="' + gridId + '-loading" class="wok-list-mask">', + '<div class="wok-list-loader-container">', + '<div class="wok-list-loading">', + '<div class="wok-list-loading-icon"></div>', + '<div class="wok-list-loading-text">' + gridMessage + '</div>', + '</div>', + '</div>', + '</div>' + ].join(''); + + $(gridloadingHtml).appendTo('#' + containerId); + + var gridHtml = [ + '<table id="', gridId, '" class="table table-striped" >', + '<thead>', + '<tr>', + '</tr>', + '</thead>' + ].join(''); + $(gridHtml).appendTo('#' + containerId); + var gridHeader = $('tr', gridHtml); + + for (var i = 0; i < fields.length; i++) { + var columnHtml = [ + '<th data-type="', fields[i]["type"], '" data-column-id="', fields[i]["column-id"], '"', (fields[i].identifier) ? 'data-identifier="true"' : '', ("header-class" in fields[i]) ? 'data-header-css-class="gridHeader ' + fields[i]["header-class"] + '"' : 'gridHeader', ("data-class" in fields[i]) ? ' data-align="' + fields[i]["data-class"] + '"' + ' headerAlign="center"' : ' data-align="left" headerAlign="center"', ("formatter" in fields[i]) ? 'data-formatter=' + fields[i]["formatter"] : '', (fields[i].width) ? (' data-width="' + fields[i].width + '"') : '', + '>', ("title" in fields[i]) ? fields[i]["title"] : fields[i]["column-id"], + '</th>' + ].join(''); + $(columnHtml).appendTo($('tr', '#' + gridId)); + } + + var grid = $('#' + gridId).bootgrid({ + selection: selection, + multiSelect: false, + keepSelection: false, + rowCount: 15, + sorting: true, + multiSort: true, + columnSelection: false, + navigation: navigation, + rowSelect: false, + formatters: { + "settings-user-log-app": function(column, row) { + return '<span class="label label-primary label-'+row.app+'">' +row.app+ '</span> '; + }, + "settings-user-log-message": function(column, row) { + return '<span class="trim" data-toggle="tooltip" data-placement="auto bottom" title="'+row.message+'">' +row.message+ '</span> '; + } + }, + css: { + iconDown: "fa fa-sort-desc", + iconUp: "fa fa-sort-asc", + center: "text-center" + }, + labels: { + search: i18n['WOKSETT0008M'], + noResults: (opts['noResults']) ? opts['noResults'] : i18n['WOKSETT0010M'], + infos: i18n['WOKSETT0009M'] + } + }).on("loaded.rs.jquery.bootgrid", function(e) { + $('.input-group .glyphicon-search').remove(); + $('.search > div').removeClass('input-group'); + $('[data-toggle="tooltip"]').tooltip(); + if ($('#' + gridId).bootgrid('getTotalRowCount') > 0) { + // This need to be in if block to avoid showing no-record-found + wok.showBootgridData(opts); + } + }).on("load.rs.jquery.bootgrid", function(e) { + $('.input-group .glyphicon-search').remove(); + $('.search > div').removeClass('input-group'); + $('[data-toggle="tooltip"]').tooltip(); + }) + wok.hideBootgridLoading(opts); + return grid; +} + +wok.loadBootgridData = function(gridId, data) { + wok.clearBootgridData(gridId); + wok.appendBootgridData(gridId, data); +}; + +wok.clearBootgridData = function(gridId) { + $('#' + gridId).bootgrid("clear"); +}; + +wok.appendBootgridData = function(gridId, data) { + $('#' + gridId).bootgrid("append", data); +}; + +wok.reloadGridData = function(opts) { + return $('#' + opts['gridId']).bootgrid("reload"); +} + +wok.showBootgridLoading = function(opts) { + var gridMessage = ('loadingMessage' in opts && opts['loadingMessage'].trim() && opts['loadingMessage'].length > 0) ? opts['loadingMessage'] : 'Loading...'; + $("#" + opts['gridId'] + "-loading .wok-list-loading-text").text(gridMessage); + $("#" + opts['gridId'] + "-loading").show(); + $("#" + opts['gridId'] + "-loading").css("zIndex", 1); +}; + +wok.hideBootgridLoading = function(opts) { + var gridMessage = ('loadingMessage' in opts && opts['loadingMessage'].trim() && opts['loadingMessage'].length > 0) ? opts['loadingMessage'] : 'Loading...'; + $("#" + opts['gridId'] + "-loading .wok-list-loading-text").text(gridMessage); + $("#" + opts['gridId'] + "-loading").hide(); + $("#" + opts['gridId'] + "-loading").css("zIndex", 1); +}; + +wok.showBootgridData = function(opts) { + $("#" + opts['gridId'] + " tbody").show(); +}; + +wok.hideBootgridData = function(opts) { + $("#" + opts['gridId'] + " tbody").hide(); +}; \ No newline at end of file diff --git a/ui/js/wok.user-log.js b/ui/js/wok.user-log.js new file mode 100644 index 0000000..4ce055c --- /dev/null +++ b/ui/js/wok.user-log.js @@ -0,0 +1,246 @@ +/* + * Copyright IBM Corp, 2015-2016 + * + * This library is free software; you can redistribute it and/or + * modify it under the terms of the GNU Lesser General Public + * License as published by the Free Software Foundation; either + * version 2.1 of the License, or (at your option) any later version. + * + * This library is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * Lesser General Public License for more details. + * + * You should have received a copy of the GNU Lesser General Public + * License along with this library; if not, write to the Free Software + * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA + */ + + wok.initSettings = function() { + wok.opts_user_log = {}; + wok.opts_user_log['id'] = 'user-log-content'; + wok.opts_user_log['gridId'] = "user-log-grid"; + wok.opts_user_log['loadingMessage'] = i18n['WOKSETT0007M']; + wok.initUserLog(); +}; + +wok.initUserLogConfig = function() { + wok.listUserLogConfig(); +} + +wok.getUserLogs = function(suc, err) { + wok.requestJSON({ + url : 'logs', + type : 'GET', + contentType : 'application/json', + dataType : 'json', + resend : true, + success : suc, + error : err || function(data) { + wok.message.error(data.responseJSON.reason); + } + }); +}; + +wok.getFilteredUserLogs = function(suc, err, search) { + wok.requestJSON({ + url : 'logs?' + search, + type : 'GET', + contentType : 'application/json', + dataType : 'json', + success : suc, + error : err || function(data) { + wok.message.error(data.responseJSON.reason); + } + }); +}; + +wok.downloadLogs = function(suc, err, search) { + wok.requestJSON({ + url : 'logs?'+search+'download=True', + type : 'GET', + contentType : 'application/json', + dataType : 'json', + success : suc, + error : err || function(data) { + wok.message.error(data.responseJSON.reason); + } + }); +}; + +wok.listUserLogConfig = function() { + + var ulGrid = []; + var gridFields = []; + + gridFields = [{ + "column-id": 'app', + "converter": 'string', + "formatter": "settings-user-log-app", + "title": i18n['WOKSETT0001M'] + }, { + "column-id": 'user', + "converter": 'string', + "title": i18n['WOKSETT0002M'] + }, { + "column-id": 'req', + "converter": 'string', + "title": i18n['WOKSETT0003M'] + }, { + "column-id": 'date', + "formatter": "settings-user-log-date", + "converter": 'string', + "order": 'desc', + "title": i18n['WOKSETT0004M'] + }, { + "column-id": 'time', + "converter": 'string', + "order": 'desc', + "title": i18n['WOKSETT0005M'] + }, + { + "column-id": 'message', + "converter": 'string', + "formatter": "settings-user-log-message", + "sortable": false, + "width": "25%", + "title": i18n['WOKSETT0006M'] + } + ]; + + wok.opts_user_log['gridFields'] = JSON.stringify(gridFields); + + ulGrid = wok.createBootgrid(wok.opts_user_log); + wok.hideBootgridLoading(wok.opts_user_log); + wok.initUserLogConfigGridData(); +}; + +wok.initUserLogConfigGridData = function() { + wok.clearBootgridData(wok.opts_user_log['gridId']); + wok.hideBootgridData(wok.opts_user_log); + wok.showBootgridLoading(wok.opts_user_log); + + wok.getUserLogs(function(result) { + wok.loadBootgridData(wok.opts_user_log['gridId'], result); + wok.showBootgridData(wok.opts_user_log); + wok.hideBootgridLoading(wok.opts_user_log); + }, function(error) { + wok.message.error(error.responseJSON.reason, '#message-container-area'); + wok.hideBootgridLoading(wok.opts_user_log); + }); +}; + +wok.initUserLog = function() { + $(".content-area", "#wokSettings").css("height", "100%"); + wok.initUserLogConfig(); + $('#advanced-search-button').on('click',function(){ + wok.window.open('/tabs/settings-search.html'); + }); + + $("#download-button").on('click',function(){ + var search = $('#download-button').data('search'); + if(search){ + search +='&'; + }; + wok.downloadLogs(function(result) { + window.open(result.uri, '_blank'); + }, function(error) { + wok.message.error(error.responseJSON.reason, '#message-container-area'); + },search); + }); + +}; + +wok.initUserLogWindow = function() { + var currentLang = wok.lang.get(); + currentLang = currentLang.substring(0, currentLang.indexOf('_')); + $("#request-type").selectpicker(); + $.datepicker.setDefaults($.datepicker.regional[currentLang]); + $("#date").datepicker({ dateFormat: 'yy-mm-dd', + onSelect: function(dateText) { + $('#button-search').prop('disabled',false); + }, + beforeShow: function(input, inst) { + $('#ui-datepicker-div').removeClass(function() { + return $('input').get(0).id; + }); + $('#ui-datepicker-div').addClass(this.id); + } + }); + var pluginsData = []; + wok.listPlugins(function(pluginReturn) { + $.each(pluginReturn, function(i, obj) { + pluginsData.push({"app": obj}); + }); + pluginsData.unshift({"app": "wok"}); + var pluginsTt = new Bloodhound({ + datumTokenizer: Bloodhound.tokenizers.obj.whitespace('app'), + queryTokenizer: Bloodhound.tokenizers.whitespace, + local: pluginsData + }); + pluginsTt.initialize(); + + $('.typeahead').typeahead( + { + autoselect: false + }, { + name: 'application-name', + displayKey: 'app', + source: pluginsTt.ttAdapter() + }); + + }); + + $('#form-advanced-search').submit(function(event) { + event.preventDefault(); + var $inputs = $('#form-advanced-search :input').not('button'); + var values = {}; + $inputs.each(function() { + if($(this).val()) { + values[this.name] = $(this).val(); + } + }); + if(Object.keys(values).length){ + var form = $('#form-advanced-search').serialize(); + wok.getFilteredUserLogs(function(result) { + $("#"+wok.opts_user_log['gridId']).bootgrid("clear"); + $("#"+wok.opts_user_log['gridId']).bootgrid("append", result.records); + $("#reset-button").removeClass('hidden'); + $("#download-button").data('search',form); + wok.window.close(); + }, function(err) { + wok.message.error(err.responseJSON.reason, '#alert-modal-container'); + wok.hideBootgridLoading(wok.opts_user_log); + }, form); + }else { + wok.getUserLogs(function(result) { + $("#"+wok.opts_user_log['gridId']).bootgrid("clear"); + $("#"+wok.opts_user_log['gridId']).bootgrid("append", result); + }, function(error) { + wok.message.error(error.responseJSON.reason, '#message-container-area'); + wok.hideBootgridLoading(wok.opts_user_log); + }); + wok.window.close(); + } + }); + + $("#reset-button").on('click',function(){ + wok.getUserLogs(function(result) { + $("#"+wok.opts_user_log['gridId']).bootgrid("clear"); + $("#"+wok.opts_user_log['gridId']).bootgrid("append", result); + $("#reset-button").addClass('hidden'); + }, function(error) { + wok.message.error(error.responseJSON.reason, '#message-container-area'); + wok.hideBootgridLoading(wok.opts_user_log); + }); + }); + + $('#button-search').on('click',function(){ + $('#form-advanced-search :input').each(function(){ + if( $(this).val() === '' ){ + $(this).prop('disabled',true); + } + }); + $('#form-advanced-search').submit(); + }); +}; \ No newline at end of file diff --git a/ui/pages/i18n.json.tmpl b/ui/pages/i18n.json.tmpl index e9fbe0b..c3c5b69 100644 --- a/ui/pages/i18n.json.tmpl +++ b/ui/pages/i18n.json.tmpl @@ -35,5 +35,17 @@ "WOKGRD6003M": "$_("Retry")", "WOKGRD6004M": "$_("Detailed message:")", - "WOKHOST6001M": "$_("Max:")" + "WOKHOST6001M": "$_("Max:")", + + "WOKSETT0001M": "$_("Application")", + "WOKSETT0002M": "$_("User")", + "WOKSETT0003M": "$_("Request")", + "WOKSETT0004M": "$_("Date")", + "WOKSETT0005M": "$_("Time")", + "WOKSETT0006M": "$_("Message")", + "WOKSETT0007M": "$_("Please wait...")", + "WOKSETT0008M": "$_("Filter")", + "WOKSETT0009M": "$_("Showing {{ctx.start}} to {{ctx.end}} of {{ctx.total}} entries")", + "WOKSETT0010M": "$_("No results found!")", + "WOKSETT0011M": "$_("Loading...")" } diff --git a/ui/pages/tabs/settings-search.html.tmpl b/ui/pages/tabs/settings-search.html.tmpl new file mode 100644 index 0000000..5a87b60 --- /dev/null +++ b/ui/pages/tabs/settings-search.html.tmpl @@ -0,0 +1,73 @@ +<!DOCTYPE html> +<!-- +Copyright IBM Corp, 2016 + +This library is free software; you can redistribute it and/or +modify it under the terms of the GNU Lesser General Public +License as published by the Free Software Foundation; either +version 2.1 of the License, or (at your option) any later version. + +This library is distributed in the hope that it will be useful, +but WITHOUT ANY WARRANTY; without even the implied warranty of +MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU +Lesser General Public License for more details. + +You should have received a copy of the GNU Lesser General Public +License along with this library; if not, write to the Free Software +Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA +--> +#unicode UTF-8 +#import gettext +#from wok.cachebust import href +#silent t = gettext.translation($lang.domain, $lang.localedir, languages=$lang.lang, fallback=True) +#silent _ = t.gettext +#silent _t = t.gettext +<!DOCTYPE html> +<div class="modal-content"> + <div class="modal-header"> + <h4 class="modal-title">$_("Advanced Search")</h4> + </div> + <div class="modal-body"> + <span id='alert-modal-container'></span> + <form id="form-advanced-search" autocomplete="off"> + <div class="form-group"> + <p>$_("Search results by:")</p> + <label for="user-log-app-textbox">$_("Application")</label> + <input type="text" class="form-control typeahead" id="application-name" name="app" /> + </div> + <div class="form-group"> + <label for="user-log-user-textbox">$_("User")</label> + <input type="text" class="form-control" id="username" name="user" /> + </div> + <div class="form-group"> + <label for="user-log-name-textbox">$_("Request")</label> + <select class="form-control selectpicker" id="request-type" title="$_('Request Type')" name="req"> + <option value="">All Requests</option> + <option value="POST">POST</option> + <option value="GET">GET</option> + <option value="PUT">PUT</option> + <option value="DELETE">DELETE</option> + </select> + </div> + <div class="row clearfix"> + <div class="col-sm-12"> + <div class="form-group col-sm-6"> + <label for="user-log-name-textbox">$_("Date")</label> + <input type="text" placeholder="YYYY-MM-DD" class="form-control" id="date" name="date" /> + </div> + <div class="form-group col-sm-6"> + <label for="user-log-time-textbox">$_("Time")</label> + <input type="text" placeholder="HH:MM:SS" class="form-control" id="time" name="time" /> + </div> + </div> + </div> + </form> + </div> + <div class="modal-footer"> + <button type="button" id="button-search" class="btn btn-default">$_("Search")</button> + <button type="button" id="button-cancel" class="btn btn-default" data-dismiss="modal">$_("Cancel")</button> + </div> +</div> +<script> +wok.initUserLogWindow(); +</script> diff --git a/ui/pages/tabs/settings.html.tmpl b/ui/pages/tabs/settings.html.tmpl index 811f147..8493403 100644 --- a/ui/pages/tabs/settings.html.tmpl +++ b/ui/pages/tabs/settings.html.tmpl @@ -1,31 +1,76 @@ -#* -* Project Wok -* -* Copyright IBM Corp, 2016 -* -* Licensed under the Apache License, Version 2.0 (the "License"); -* you may not use this file except in compliance with the License. -* You may obtain a copy of the License at -* -* http://www.apache.org/licenses/LICENSE-2.0 -* -* Unless required by applicable law or agreed to in writing, software -* distributed under the License is distributed on an "AS IS" BASIS, -* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -* See the License for the specific language governing permissions and -* limitations under the License. -*# +<!DOCTYPE html> +<!-- +Copyright IBM Corp, 2015 + +This library is free software; you can redistribute it and/or +modify it under the terms of the GNU Lesser General Public +License as published by the Free Software Foundation; either +version 2.1 of the License, or (at your option) any later version. + +This library is distributed in the hope that it will be useful, +but WITHOUT ANY WARRANTY; without even the implied warranty of +MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU +Lesser General Public License for more details. + +You should have received a copy of the GNU Lesser General Public +License along with this library; if not, write to the Free Software +Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA +--> #unicode UTF-8 #import gettext -#from wok.cachebust import href -#silent t = gettext.translation($lang.domain, $lang.localedir, languages=$lang.lang, fallback=True) +#silent t = gettext.translation($lang.domain, $lang.localedir, languages=$lang.lang) #silent _ = t.gettext #silent _t = t.gettext -<!DOCTYPE html> <html> + <head> + <link rel="stylesheet" type="text/css" href="../../css/settings.css"> + <script type="text/javascript" src="../../js/wok.user-log.js"></script> + <script type="text/javascript" src="../../js/wok.bootgrid.js"></script> </head> + <body> -<p>Content here</p> + <div id="wok-root-container" class="wok"> + <nav class="navbar navbar-default toolbar"> + <div class="container"> + <div id="toolbar"></div> + </div> + </nav> + <div class="container"> + <div id="wokSettings" class="wok-settings"> + <!-- User Log Panel --> + <div class="panel-group content-area accordion" id="user-log-content-area-accordion" role="tablist" aria-multiselectable="true"> + <h3> + <a role="button" aria-expanded="true" data-toggle="collapse" data-parent="#user-log-content-area-accordion" href="#user-log-content-area" aria-expanded="false" aria-controls="user-log-content-area" class=""> + <span class="accordion-icon"></span> + <span class="accordion-text">$_("User Activity Log")</span> + </a> + </h3> + <div id="user-log-content-area" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"> + <div class="row" id="user-logs"> + <div class="clearfix"> + <span id='message-container-area' style='display: none;'></span> + <div class="action-group"> + <div id="user-log-actions" class="pull-left"> + <button id="advanced-search-button" class="btn btn-primary">$_('Advanced Search')</button> + <button id="download-button" class="btn btn-primary" data-search="">$_('Download')</button> + <button id="reset-button" class="btn btn-primary hidden">$_('Reset To Default')</button> + </div> + </div> + <div id="user-log-content" class="row col-md-12"> + </div> + </div> + </div> + </div> + </div> + </div> + </div> + </div> + <div id="modalWindow" class="modal fade settings-modal wok" tabindex="-1" role="dialog" aria-labelledby="settingsModalLabel" aria-hidden="true"> + </div> + <script> + wok.initSettings(); + </script> </body> + </html> -- 1.9.3