[WIP][Wok 0/2] Use javascript libraries from rpms, not hardcoded
This isn't a patch yet since the commit "Change configuration files" are not working well. I need to change ui/libs/Makefile.am to set SUBDIRS variable (that trigger javascript hardcoded libs build) and change ui/pages/Makefile.am, to copy the template according to distro. Can you guys help me on makefile syntax? Ramon Medeiros (2): Use javascript libraries from rpms Change configuration files configure.ac | 11 ++ docs/fedora-deps.md | 4 +- docs/ubuntu-deps.md | 3 +- src/wok/config.py.in | 22 +++ ui/libs/Makefile.am | 10 +- ui/pages/Makefile.am | 9 ++ ui/pages/login.html.tmpl.fedora | 332 +++++++++++++++++++++++++++++++++++++++ ui/pages/login.html.tmpl.ubuntu | 332 +++++++++++++++++++++++++++++++++++++++ ui/pages/wok-ui.html.tmpl.fedora | 231 +++++++++++++++++++++++++++ ui/pages/wok-ui.html.tmpl.ubuntu | 231 +++++++++++++++++++++++++++ 10 files changed, 1182 insertions(+), 3 deletions(-) create mode 100644 ui/pages/login.html.tmpl.fedora create mode 100644 ui/pages/login.html.tmpl.ubuntu create mode 100644 ui/pages/wok-ui.html.tmpl.fedora create mode 100644 ui/pages/wok-ui.html.tmpl.ubuntu -- 2.5.5
Some javascript libraries didn't need to be hardcoded. So, add them to packages dependency and import them at frontend files Signed-off-by: Ramon Medeiros <ramonn@linux.vnet.ibm.com> --- docs/fedora-deps.md | 4 +- docs/ubuntu-deps.md | 3 +- src/wok/config.py.in | 22 +++ ui/pages/login.html.tmpl.fedora | 332 +++++++++++++++++++++++++++++++++++++++ ui/pages/login.html.tmpl.ubuntu | 332 +++++++++++++++++++++++++++++++++++++++ ui/pages/wok-ui.html.tmpl.fedora | 231 +++++++++++++++++++++++++++ ui/pages/wok-ui.html.tmpl.ubuntu | 231 +++++++++++++++++++++++++++ 7 files changed, 1153 insertions(+), 2 deletions(-) create mode 100644 ui/pages/login.html.tmpl.fedora create mode 100644 ui/pages/login.html.tmpl.ubuntu create mode 100644 ui/pages/wok-ui.html.tmpl.fedora create mode 100644 ui/pages/wok-ui.html.tmpl.ubuntu diff --git a/docs/fedora-deps.md b/docs/fedora-deps.md index e665cdb..337f75a 100644 --- a/docs/fedora-deps.md +++ b/docs/fedora-deps.md @@ -28,7 +28,9 @@ Runtime Dependencies $ sudo yum install python-cherrypy python-cheetah PyPAM m2crypto \ python-jsonschema python-psutil python-ldap \ python-lxml nginx openssl open-sans-fonts \ - fontawesome-fonts logrotate + fontawesome-fonts logrotate js-jquery \ + js-moment js-typeahead.js nodejs-lodash.noarch \ + nodejs-es5-shim # For RHEL systems, install the additional packages: $ sudo yum install python-ordereddict diff --git a/docs/ubuntu-deps.md b/docs/ubuntu-deps.md index 3a0f75c..0fe0038 100644 --- a/docs/ubuntu-deps.md +++ b/docs/ubuntu-deps.md @@ -18,7 +18,8 @@ Runtime Dependencies $ sudo apt-get install python-cherrypy3 python-cheetah python-pam \ python-m2crypto python-jsonschema \ python-psutil python-ldap python-lxml nginx \ - openssl fonts-font-awesome texlive-fonts-extra + openssl fonts-font-awesome texlive-fonts-extra \ + libjs-jquery libjs-lodash jquery-ui libjs-bootstrap Packages required for UI development ------------------------------------ diff --git a/src/wok/config.py.in b/src/wok/config.py.in index cbe585c..c007935 100644 --- a/src/wok/config.py.in +++ b/src/wok/config.py.in @@ -57,6 +57,15 @@ FONTS_PATH = { ] } +JS_LIBS = { + "jquery" : "/usr/share/javascript/jquery/2.1.3/jquery.min.js", + "lodash" : "/usr/lib/node_modules/lodash/lodash.js", + "moment" : "/usr/share/javascript/moment/min/moment-with-locales.min.js", + "typeahead" : "/usr/share/javascript/typeahead.js/dist/typeahead.bundle.min.js", + "es5-shim" : "/usr/lib/node_modules/es5-shim/es5-shim.min.js" +} + + def get_log_download_path(): return os.path.join(paths.state_dir, 'logs') @@ -103,6 +112,11 @@ class Paths(object): if os.path.exists(font_file): setattr(self, '%s_dir' % font, path) + for js in JS_LIBS.keys(): + path = JS_LIBS[js] + if os.path.exists(path): + setattr(self, '%s_dir' % js, path) + def get_prefix(self): if __file__.startswith("/"): base = os.path.dirname(__file__) @@ -172,6 +186,14 @@ class UIConfig(dict): 'tools.wokauth.on': False, 'tools.nocache.on': False} + for js, file in JS_LIBS.iteritems(): + if os.path.exists(file): + ui_configs['/js/%s' % os.path.basename(file) ] = { + 'tools.staticfile.on': True, + 'tools.staticfile.filename': file, + 'tools.wokauth.on': False, + 'tools.nocache.on': False} + self.update(ui_configs) diff --git a/ui/pages/login.html.tmpl.fedora b/ui/pages/login.html.tmpl.fedora new file mode 100644 index 0000000..22aa8f1 --- /dev/null +++ b/ui/pages/login.html.tmpl.fedora @@ -0,0 +1,332 @@ +#* + * Project Wok + * + * Copyright IBM Corp, 2014-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. + *# +#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 +#silent next = "?next=%s" % $getVar('data.next', '') if $getVar('data.next', '') else "" +#from wok.config import get_version +<!DOCTYPE html> +<html lang="$lang.lang[0]"> +<head> + <meta charset="UTF-8"> + <title>Wok</title> + <meta http-equiv="X-UA-Compatible" content="IE=edge" /> + <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" /> + <meta name="apple-mobile-web-app-capable" content="yes"> + <meta name="apple-mobile-web-app-title" content="Wok"> + <link href="$href('images/apple-touch-icon-57x57.png')" sizes="57x57" rel="apple-touch-icon-precomposed"> + <link href="$href('images/apple-touch-icon-72x72.png')" sizes="72x72" rel="apple-touch-icon-precomposed"> + <link href="$href('images/apple-touch-icon-76x76.png')" sizes="76x76" rel="apple-touch-icon-precomposed"> + <link href="$href('images/apple-touch-icon-114x114.png')" sizes="114x114" rel="apple-touch-icon-precomposed"> + <link href="$href('images/apple-touch-icon-144x144.png')" sizes="144x144" rel="apple-touch-icon-precomposed"> + <link href="$href('images/apple-touch-icon-152x152.png')" sizes="152x152" rel="apple-touch-icon-precomposed"> + <link href="$href('images/apple-touch-icon-180x180.png')" sizes="120x120" rel="apple-touch-icon-precomposed"> + <link rel="icon" type="image/png" href="$href('images/android-chrome-36x36.png')" sizes="36x36"> + <link rel="icon" type="image/png" href="$href('images/android-chrome-48x48.png')" sizes="48x48"> + <link rel="icon" type="image/png" href="$href('images/android-chrome-72x72.png')" sizes="72x72"> + <link rel="icon" type="image/png" href="$href('images/android-chrome-96x96.png')" sizes="96x96"> + <link rel="icon" type="image/png" href="$href('images/android-chrome-144x144.png')" sizes="144x144"> + <link rel="icon" type="image/png" href="$href('images/android-chrome-192x192.png')" sizes="192x192"> + <link rel="icon" type="image/png" href="$href('images/favicon-16x16.png')" sizes="16x16"> + <link rel="icon" type="image/png" href="$href('images/favicon-32x32.png')" sizes="32x32"> + <link rel="icon" type="image/png" href="$href('images/favicon-96x96.png')" sizes="96x96"> + <link rel="icon" type="image/png" href="$href('images/favicon-194x194.png')" sizes="194x194"> + <link rel="mask-icon" href="$href('images/safari-pinned-tab.svg')" color="#5bbad5"> + <meta name="application-name" content="Wok"> + <meta name="msapplication-config" content="none" /> + <meta name="msapplication-TileColor" content="#f73434" /> + <meta name="msapplication-square70x70logo" content="$href('images/mstile-70x70.png')" /> + <meta name="msapplication-square150x150logo" content="$href('images/mstile-150x150.png')" /> + <meta name="msapplication-wide310x150logo" content="$href('images/mstile-310x310.png')" /> + <meta name="msapplication-square310x310logo" content="$href('images/mstile-310x150.png')" /> + <link rel="stylesheet" href="$href('libs/jquery-ui/themes/base/jquery-ui.min.css')"> + <link rel="stylesheet" href="$href('css/jquery-ui.custom.css')"> + <link rel="stylesheet" href="$href('css/bootstrap.custom.css')"> + <link rel="stylesheet" href="$href('libs/bootstrap-select/dist/css/bootstrap-select.min.css')"> + <link rel="stylesheet" href="$href('libs/datatables/css/datatables.min.css')"> + <link rel="stylesheet" href="$href('css/fontawesome/fontawesome.css')"> + <link rel="stylesheet" href="$href('css/opensans/opensans.css')"> + <link rel="stylesheet" href="$href('css/bootstrap-select.custom.css')"> + <link rel="stylesheet" href="$href('css/datatables.bootstrap.css')"> + <link rel="stylesheet" href="$href('css/wok.css')"> + <script src="js/es5-shim.min.js"></script> + <script src="js/jquery.min.js"></script> + <script src="$href('libs/jquery-ui/jquery-ui.min.js')"></script> + <script src="$href('libs/jquery-ui/jquery-ui-i18n.min.js')"></script> + <script src="$href('libs/jquery-i18n/jquery.i18n.min.js')"></script> + <script src="$href('libs/bootstrap/bootstrap.min.js')"></script> + <script src="$href('libs/bootstrap-select/dist/js/bootstrap-select.min.js')"></script> + <script src="js/lodash.js"></script> + <script src="js/moment-with-locales.min.js"></script> + <script src="$href('libs/datatables/js/datatables.min.js')"></script> + <script src="$href('js/wok.min.js')"></script> +</head> +<body class="login" onload="wok.login_main()"> + <div class="topbar"> + <nav class="navbar navbar-inverse"> + <div class="container"> + <div class="navbar-header"> + <a class="navbar-brand" href="#">Wok</a> + </div> + </div> + </nav> + <nav class="navbar navbar-default"> + <div class="container"> + <div class="navbar-header"> + </div> + <ul class="nav navbar-nav"> + <li class="hostname"><span class="host-location"></span></li> + </ul> + </div> + </nav> + </div> + <div class="content"> + <div class="container"> + <div id="login-window" class="login-area row"> + <div class="err-area"> + <div id="messUserPass" class="alert alert-danger" style="display: none;">$_("The username or password you entered is incorrect. Please try again.")</div> + <div id="messSession" class="alert alert-danger" style="display: none;">$_("Session timeout, please re-login.")</div> + <div id="missServer" class="alert alert-danger" style="display: none;">$_("Server unreachable.")</div> + </div> + <form id="form-login" class="form-horizontal" method="post"> + <div class="form-group"> + <label for="username" class="sr-only">$_("User Name")</label> + <input type="text" class="form-control" id="username" name="username" required="required" placeholder="$_(" User Name ")" autofocus autocomplete="off" /> + <div id="username-msg" class="msg-required"></div> + </div> + <div class="form-group"> + <label for="password" class="sr-only">$_("Password")</label> + <input type="password" class="form-control" id="password" name="password" required="required" placeholder="$_(" Password ")" autocomplete="off" /> + <div id="password-msg" class="msg-required"></div> + </div> + <div class="form-group"> + <button id="btn-login" class="btn btn-login col-md-12 col-lg-12"> + <span id="login">$_("Log in")</span> + <span id="logging" style="display: none;">$_("Logging in...")</span> + </button> + </div> + <div class="form-group"> + <label for="userLang">$_("Language")</label> + <select id="userLang" class="selectpicker col-md-12 col-lg-12"> + <option value="en_US">English (US)</option> + <option value="zh_CN">中文（简体）</option> + <option value="pt_BR">Português (Brasil)</option> + <option value="de_DE">Deutsch (Deutschland)</option> + <option value="es_ES">Español (España)</option> + <option value="fr_FR">Français (France)</option> + <option value="it_IT">Italiano (Italia)</option> + <option value="ja_JP">日本語 (日本)</option> + <option value="ko_KR">한국어 (대한민국)</option> + <option value="ru_RU">Русский (Россия)</option> + <option value="zh_TW">中文（繁體）</option> + </select> + </div> + <div class="form-group"> + <label for="userLocale">$_("Locale")</label> + <select id="userLocale" class="selectpicker col-md-12 col-lg-12"> + <option value="af-ZA">Afrikaans (South Africa)</option> + <option value="sq-AL">Albanian (Albania)</option> + <option value="am-ET">Amharic (Ethiopia)</option> + <option value="ar-DZ">Arabic (Algeria)</option> + <option value="ar-BH">Arabic (Bahrain)</option> + <option value="ar-EG">Arabic (Egypt)</option> + <option value="ar-IQ">Arabic (Iraq)</option> + <option value="ar-JO">Arabic (Jordan)</option> + <option value="ar-KW">Arabic (Kuwait)</option> + <option value="ar-LB">Arabic (Lebanon)</option> + <option value="ar-LY">Arabic (Libya)</option> + <option value="ar-MR">Arabic (Mauritania)</option> + <option value="ar-MA">Arabic (Morocco)</option> + <option value="ar-OM">Arabic (Oman)</option> + <option value="ar-QA">Arabic (Qatar)</option> + <option value="ar-SA">Arabic (Saudi Arabia)</option> + <option value="ar-SY">Arabic (Syria)</option> + <option value="ar-TN">Arabic (Tunisia)</option> + <option value="ar-AE">Arabic (United Arab Emirates)</option> + <option value="ar-YE">Arabic (Yemen)</option> + <option value="hy-AM">Armenian (Armenia)</option> + <option value="as-IN">Assamese (India)</option> + <option value="az-AZ">Azerbaijani (Azerbaijan)</option> + <option value="eu-ES">Basque (Spain)</option> + <option value="be-BY">Belarusian (Belarus)</option> + <option value="bn-BD">Bengali (Bangladesh)</option> + <option value="bn-IN">Bengali (India)</option> + <option value="bs-BA">Bosnian (Bosnia)</option> + <option value="bg-BG">Bulgarian (Bulgaria)</option> + <option value="my-MM">Burmese (Myanmar)</option> + <option value="ca-ES">Catalan (Spain)</option> + <option value="zh-CN">Chinese-simplified (China)</option> + <option value="zh-SG">Chinese-simplified (Singapore)</option> + <option value="zh-HK">Chinese-traditional (Hong Kong S.A.R. of China)</option> + <option value="zh-MO">Chinese-traditional (Macao)</option> + <option value="zh-TW">Chinese-traditional (Taiwan)</option> + <option value="hr-HR">Croatian (Croatia)</option> + <option value="cs-CZ">Czech (Czech Republic)</option> + <option value="da-DK">Danish (Denmark)</option> + <option value="nl-BE">Dutch (Belgium)</option> + <option value="nl-NL">Dutch (The Netherlands)</option> + <option value="en-AU">English (Australia)</option> + <option value="en-BE">English (Belgium)</option> + <option value="en-CM">English (Cameroon)</option> + <option value="en-CA">English (Canada)</option> + <option value="en-GH">English (Ghana)</option> + <option value="en-HK">English (Hong Kong S.A.R. of China)</option> + <option value="en-IN">English (India)</option> + <option value="en-IE">English (Ireland)</option> + <option value="en-KE">English (Kenya)</option> + <option value="en-MU">English (Mauritius)</option> + <option value="en-NZ">English (New Zealand)</option> + <option value="en-NG">English (Nigeria)</option> + <option value="en-PH">English (Philippines)</option> + <option value="en-SG">English (Singapore)</option> + <option value="en-ZA">English (South Africa)</option> + <option value="en-TZ">English (Tanzania)</option> + <option value="en-GB">English (United Kingdom)</option> + <option value="en-US">English (United States)</option> + <option value="en-ZM">English (Zambia)</option> + <option value="et-EE">Estonian (Estonia)</option> + <option value="tl-PH">Filipino (Philippines)</option> + <option value="fi-FI">Finnish (Finland)</option> + <option value="fr-DZ">French (Algeria)</option> + <option value="fr-CM">French (Cameroon)</option> + <option value="fr-CD">French (Democratic Republic of the Congo)</option> + <option value="fr-BE">French (Belgium)</option> + <option value="fr-CA">French (Canada)</option> + <option value="fr-FR">French (France)</option> + <option value="fr-CI">French (Ivory Coast [Côte d’Ivoire])</option> + <option value="fr-LU">French (Luxembourg)</option> + <option value="fr-MR">French (Mauritania)</option> + <option value="fr-MU">French (Mauritius)</option> + <option value="fr-MA">French (Morocco)</option> + <option value="fr-SN">French (Senegal)</option> + <option value="fr-CH">French (Switzerland)</option> + <option value="fr-TN">French (Tunisia)</option> + <option value="gl-ES">Galician (Spain)</option> + <option value="lg-UG">Ganda (Uganda)</option> + <option value="ka-GE">Georgian (Georgia)</option> + <option value="de-AT">German (Austria)</option> + <option value="de-DE">German (Germany)</option> + <option value="de-LU">German (Luxembourg)</option> + <option value="de-CH">German (Switzerland)</option> + <option value="el-GR">Greek (Greece)</option> + <option value="gu-IN">Gujarati (India)</option> + <option value="ha-NG">Hausa (Nigeria)</option> + <option value="he-IL">Hebrew (Israel)</option> + <option value="hi-IN">Hindi (India)</option> + <option value="hu-HU">Hungarian (Hungary)</option> + <option value="is-IS">Icelandic (Iceland)</option> + <option value="ig-NG">Igbo (Nigeria)</option> + <option value="id-ID">Indonesian (Indonesia)</option> + <option value="it-IT">Italian (Italy)</option> + <option value="it-CH">Italian (Switzerland)</option> + <option value="ja-JP">Japanese (Japan)</option> + <option value="kn-IN">Kannada (India)</option> + <option value="kk-KZ">Kazakh (Kazakhstan)</option> + <option value="km-KH">Khmer (Cambodia)</option> + <option value="rw-RW">Kinyarwanda (Rwanda)</option> + <option value="kok-IN">Konkani (India)</option> + <option value="ko-KR">Korean (Korea, South)</option> + <option value="lo-LA">Lao (Laos)</option> + <option value="lv-LV">Latvian (Latvia)</option> + <option value="lt-LT">Lithuanian (Lithuania)</option> + <option value="mk-MK">Macedonian (Macedonia)</option> + <option value="ms-MY">Malay-Latin (Malaysia)</option> + <option value="ml-IN">Malayalam (India)</option> + <option value="mt-MT">Maltese (Malta)</option> + <option value="mr-IN">Marathi (India)</option> + <option value="mn-Cyrl-MN">Mongolian-Cyrillic (Mongolia)</option> + <option value="ne-IN">Nepali (India)</option> + <option value="ne-NP">Nepali (Nepal)</option> + <option value="nb-NO">Norwegian Bokmål (Norway)</option> + <option value="nn-NO">Norwegian Nynorsk (Norway)</option> + <option value="or-IN">Oriya [aka, Odia] (India)</option> + <option value="om-ET">Oromo (Ethiopia)</option> + <option value="pl-PL">Polish (Poland)</option> + <option value="pt-AO">Portuguese (Angola)</option> + <option value="pt-BR">Portuguese (Brazil)</option> + <option value="pt-MO">Portuguese (Macao)</option> + <option value="pt-MZ">Portuguese (Mozambique)</option> + <option value="pt-PT">Portuguese (Portugal)</option> + <option value="pa-IN">Punjabi (India)</option> + <option value="ro-RO">Romanian (Romania)</option> + <option value="ru-RU">Russian (Russia)</option> + <option value="sr-RS">Serbian-Cyrillic (Serbia)</option> + <option value="sr-ME">Serbian-Latin (Montenegro)</option> + <option value="sr-Latn-RS">Serbian-Latin (Serbia)</option> + <option value="si-LK">Sinhala (Sri Lanka)</option> + <option value="sk-SK">Slovak (Slovakia)</option> + <option value="sl-SI">Slovenian (Slovenia)</option> + <option value="es-AR">Spanish (Argentina)</option> + <option value="es-BO">Spanish (Bolivia)</option> + <option value="es-CL">Spanish (Chile)</option> + <option value="es-CO">Spanish (Colombia)</option> + <option value="es-CR">Spanish (Costa Rica)</option> + <option value="es-DO">Spanish (Dominican Republic)</option> + <option value="es-EC">Spanish (Ecuador)</option> + <option value="es-SV">Spanish (El Salvador)</option> + <option value="es-GT">Spanish (Guatemala)</option> + <option value="es-HN">Spanish (Honduras)</option> + <option value="es-MX">Spanish (Mexico)</option> + <option value="es-NI">Spanish (Nicaragua)</option> + <option value="es-PA">Spanish (Panama)</option> + <option value="es-PY">Spanish (Paraguay)</option> + <option value="es-PE">Spanish (Peru)</option> + <option value="es-PR">Spanish (Puerto Rico)</option> + <option value="es-ES">Spanish (Spain)</option> + <option value="es-US">Spanish (United States)</option> + <option value="es-UY">Spanish (Uruguay)</option> + <option value="es-VE">Spanish (Venezuela)</option> + <option value="sw-KE">Swahili (Kenya)</option> + <option value="sw-TZ">Swahili (Tanzania)</option> + <option value="sv-SE">Swedish (Sweden)</option> + <option value="ta-IN">Tamil (India)</option> + <option value="te-IN">Telugu (India)</option> + <option value="th-TH">Thai (Thailand)</option> + <option value="tr-TR">Turkish (Turkey)</option> + <option value="uk-UA">Ukrainian (Ukraine)</option> + <option value="ur-IN">Urdu (India)</option> + <option value="ur-PK">Urdu (Pakistan)</option> + <option value="uz-Cyrl-UZ">Uzbek-Cyrillic (Uzbekistan)</option> + <option value="uz-Latn-UZ">Uzbek-Latin (Uzbekistan)</option> + <option value="vi-VN">Vietnamese (Vietnam)</option> + <option value="cy-GB">Welsh (United Kingdom)</option> + <option value="yo-NG">Yoruba (Nigeria)</option> + <option value="zu-ZA">Zulu (South Africa)</option> + <option value="az-AZ">Azerbaijani-Latin (Azerbaijan)</option> + <option value="sr-CS">Serbian-Cyrillic ()</option> + <option value="sr-Cyrl-CS">Serbian-Cyrillic (Serbia and Montenegro)</option> + <option value="sr-Latn-CS">Serbian-Latin (Serbia and Montenegro)</option> + </select> + </div> + </form> + </div> + <div class="row"> + <div class="col-lg-4 delayed-fadein"> + <p class="text-muted powered hidden">Powered by:</p> + <ul id="wok-logos" class="list-inline"></ul> + </div> + </div> + </div> + </div> +</body> +</html> diff --git a/ui/pages/login.html.tmpl.ubuntu b/ui/pages/login.html.tmpl.ubuntu new file mode 100644 index 0000000..3d8ddcc --- /dev/null +++ b/ui/pages/login.html.tmpl.ubuntu @@ -0,0 +1,332 @@ +#* + * Project Wok + * + * Copyright IBM Corp, 2014-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. + *# +#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 +#silent next = "?next=%s" % $getVar('data.next', '') if $getVar('data.next', '') else "" +#from wok.config import get_version +<!DOCTYPE html> +<html lang="$lang.lang[0]"> +<head> + <meta charset="UTF-8"> + <title>Wok</title> + <meta http-equiv="X-UA-Compatible" content="IE=edge" /> + <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" /> + <meta name="apple-mobile-web-app-capable" content="yes"> + <meta name="apple-mobile-web-app-title" content="Wok"> + <link href="$href('images/apple-touch-icon-57x57.png')" sizes="57x57" rel="apple-touch-icon-precomposed"> + <link href="$href('images/apple-touch-icon-72x72.png')" sizes="72x72" rel="apple-touch-icon-precomposed"> + <link href="$href('images/apple-touch-icon-76x76.png')" sizes="76x76" rel="apple-touch-icon-precomposed"> + <link href="$href('images/apple-touch-icon-114x114.png')" sizes="114x114" rel="apple-touch-icon-precomposed"> + <link href="$href('images/apple-touch-icon-144x144.png')" sizes="144x144" rel="apple-touch-icon-precomposed"> + <link href="$href('images/apple-touch-icon-152x152.png')" sizes="152x152" rel="apple-touch-icon-precomposed"> + <link href="$href('images/apple-touch-icon-180x180.png')" sizes="120x120" rel="apple-touch-icon-precomposed"> + <link rel="icon" type="image/png" href="$href('images/android-chrome-36x36.png')" sizes="36x36"> + <link rel="icon" type="image/png" href="$href('images/android-chrome-48x48.png')" sizes="48x48"> + <link rel="icon" type="image/png" href="$href('images/android-chrome-72x72.png')" sizes="72x72"> + <link rel="icon" type="image/png" href="$href('images/android-chrome-96x96.png')" sizes="96x96"> + <link rel="icon" type="image/png" href="$href('images/android-chrome-144x144.png')" sizes="144x144"> + <link rel="icon" type="image/png" href="$href('images/android-chrome-192x192.png')" sizes="192x192"> + <link rel="icon" type="image/png" href="$href('images/favicon-16x16.png')" sizes="16x16"> + <link rel="icon" type="image/png" href="$href('images/favicon-32x32.png')" sizes="32x32"> + <link rel="icon" type="image/png" href="$href('images/favicon-96x96.png')" sizes="96x96"> + <link rel="icon" type="image/png" href="$href('images/favicon-194x194.png')" sizes="194x194"> + <link rel="mask-icon" href="$href('images/safari-pinned-tab.svg')" color="#5bbad5"> + <meta name="application-name" content="Wok"> + <meta name="msapplication-config" content="none" /> + <meta name="msapplication-TileColor" content="#f73434" /> + <meta name="msapplication-square70x70logo" content="$href('images/mstile-70x70.png')" /> + <meta name="msapplication-square150x150logo" content="$href('images/mstile-150x150.png')" /> + <meta name="msapplication-wide310x150logo" content="$href('images/mstile-310x310.png')" /> + <meta name="msapplication-square310x310logo" content="$href('images/mstile-310x150.png')" /> + <link rel="stylesheet" href="/usr/share/javascript/jquery-ui/css/smoothness/jquery-ui.min.css"> + <link rel="stylesheet" href="/usr/share/javascript/jquery-ui/css/smoothness/jquery-ui.css"> + <link rel="stylesheet" href="/usr/share/javascript/bootstrap/css/bootstrap.css"> + <link rel="stylesheet" href="$href('libs/bootstrap-select/dist/css/bootstrap-select.min.css')"> + <link rel="stylesheet" href="$href('libs/datatables/css/datatables.min.css')"> + <link rel="stylesheet" href="$href('css/fontawesome/fontawesome.css')"> + <link rel="stylesheet" href="$href('css/opensans/opensans.css')"> + <link rel="stylesheet" href="$href('css/bootstrap-select.custom.css')"> + <link rel="stylesheet" href="$href('css/datatables.bootstrap.css')"> + <link rel="stylesheet" href="$href('css/wok.css')"> + <script src="$href('libs/es5-shim/es5-shim.min.js')"></script> + <script src="/usr/share/javascript/jquery/jquery.min.js"></script> + <script src="/usr/share/javascript/jquery-ui/jquery-ui.min.js"></script> + <script src="/usr/share/javascript/jquery-ui/ui/i18n/jquery-ui-i18n.js"></script> + <script src="$href('libs/jquery-i18n/jquery.i18n.min.js')"></script> + <script src="/usr/share/javascript/bootstrap/js/bootstrap.min.js"></script> + <script src="$href('libs/bootstrap-select/dist/js/bootstrap-select.min.js')"></script> + <script src="/usr/share/javascript/lodash.js"></script> + <script src="$href('libs/moment/moment-with-locales.min.js')"></script> + <script src="$href('libs/datatables/js/datatables.min.js')"></script> + <script src="$href('js/wok.min.js')"></script> +</head> +<body class="login" onload="wok.login_main()"> + <div class="topbar"> + <nav class="navbar navbar-inverse"> + <div class="container"> + <div class="navbar-header"> + <a class="navbar-brand" href="#">Wok</a> + </div> + </div> + </nav> + <nav class="navbar navbar-default"> + <div class="container"> + <div class="navbar-header"> + </div> + <ul class="nav navbar-nav"> + <li class="hostname"><span class="host-location"></span></li> + </ul> + </div> + </nav> + </div> + <div class="content"> + <div class="container"> + <div id="login-window" class="login-area row"> + <div class="err-area"> + <div id="messUserPass" class="alert alert-danger" style="display: none;">$_("The username or password you entered is incorrect. Please try again.")</div> + <div id="messSession" class="alert alert-danger" style="display: none;">$_("Session timeout, please re-login.")</div> + <div id="missServer" class="alert alert-danger" style="display: none;">$_("Server unreachable.")</div> + </div> + <form id="form-login" class="form-horizontal" method="post"> + <div class="form-group"> + <label for="username" class="sr-only">$_("User Name")</label> + <input type="text" class="form-control" id="username" name="username" required="required" placeholder="$_(" User Name ")" autofocus autocomplete="off" /> + <div id="username-msg" class="msg-required"></div> + </div> + <div class="form-group"> + <label for="password" class="sr-only">$_("Password")</label> + <input type="password" class="form-control" id="password" name="password" required="required" placeholder="$_(" Password ")" autocomplete="off" /> + <div id="password-msg" class="msg-required"></div> + </div> + <div class="form-group"> + <button id="btn-login" class="btn btn-login col-md-12 col-lg-12"> + <span id="login">$_("Log in")</span> + <span id="logging" style="display: none;">$_("Logging in...")</span> + </button> + </div> + <div class="form-group"> + <label for="userLang">$_("Language")</label> + <select id="userLang" class="selectpicker col-md-12 col-lg-12"> + <option value="en_US">English (US)</option> + <option value="zh_CN">中文（简体）</option> + <option value="pt_BR">Português (Brasil)</option> + <option value="de_DE">Deutsch (Deutschland)</option> + <option value="es_ES">Español (España)</option> + <option value="fr_FR">Français (France)</option> + <option value="it_IT">Italiano (Italia)</option> + <option value="ja_JP">日本語 (日本)</option> + <option value="ko_KR">한국어 (대한민국)</option> + <option value="ru_RU">Русский (Россия)</option> + <option value="zh_TW">中文（繁體）</option> + </select> + </div> + <div class="form-group"> + <label for="userLocale">$_("Locale")</label> + <select id="userLocale" class="selectpicker col-md-12 col-lg-12"> + <option value="af-ZA">Afrikaans (South Africa)</option> + <option value="sq-AL">Albanian (Albania)</option> + <option value="am-ET">Amharic (Ethiopia)</option> + <option value="ar-DZ">Arabic (Algeria)</option> + <option value="ar-BH">Arabic (Bahrain)</option> + <option value="ar-EG">Arabic (Egypt)</option> + <option value="ar-IQ">Arabic (Iraq)</option> + <option value="ar-JO">Arabic (Jordan)</option> + <option value="ar-KW">Arabic (Kuwait)</option> + <option value="ar-LB">Arabic (Lebanon)</option> + <option value="ar-LY">Arabic (Libya)</option> + <option value="ar-MR">Arabic (Mauritania)</option> + <option value="ar-MA">Arabic (Morocco)</option> + <option value="ar-OM">Arabic (Oman)</option> + <option value="ar-QA">Arabic (Qatar)</option> + <option value="ar-SA">Arabic (Saudi Arabia)</option> + <option value="ar-SY">Arabic (Syria)</option> + <option value="ar-TN">Arabic (Tunisia)</option> + <option value="ar-AE">Arabic (United Arab Emirates)</option> + <option value="ar-YE">Arabic (Yemen)</option> + <option value="hy-AM">Armenian (Armenia)</option> + <option value="as-IN">Assamese (India)</option> + <option value="az-AZ">Azerbaijani (Azerbaijan)</option> + <option value="eu-ES">Basque (Spain)</option> + <option value="be-BY">Belarusian (Belarus)</option> + <option value="bn-BD">Bengali (Bangladesh)</option> + <option value="bn-IN">Bengali (India)</option> + <option value="bs-BA">Bosnian (Bosnia)</option> + <option value="bg-BG">Bulgarian (Bulgaria)</option> + <option value="my-MM">Burmese (Myanmar)</option> + <option value="ca-ES">Catalan (Spain)</option> + <option value="zh-CN">Chinese-simplified (China)</option> + <option value="zh-SG">Chinese-simplified (Singapore)</option> + <option value="zh-HK">Chinese-traditional (Hong Kong S.A.R. of China)</option> + <option value="zh-MO">Chinese-traditional (Macao)</option> + <option value="zh-TW">Chinese-traditional (Taiwan)</option> + <option value="hr-HR">Croatian (Croatia)</option> + <option value="cs-CZ">Czech (Czech Republic)</option> + <option value="da-DK">Danish (Denmark)</option> + <option value="nl-BE">Dutch (Belgium)</option> + <option value="nl-NL">Dutch (The Netherlands)</option> + <option value="en-AU">English (Australia)</option> + <option value="en-BE">English (Belgium)</option> + <option value="en-CM">English (Cameroon)</option> + <option value="en-CA">English (Canada)</option> + <option value="en-GH">English (Ghana)</option> + <option value="en-HK">English (Hong Kong S.A.R. of China)</option> + <option value="en-IN">English (India)</option> + <option value="en-IE">English (Ireland)</option> + <option value="en-KE">English (Kenya)</option> + <option value="en-MU">English (Mauritius)</option> + <option value="en-NZ">English (New Zealand)</option> + <option value="en-NG">English (Nigeria)</option> + <option value="en-PH">English (Philippines)</option> + <option value="en-SG">English (Singapore)</option> + <option value="en-ZA">English (South Africa)</option> + <option value="en-TZ">English (Tanzania)</option> + <option value="en-GB">English (United Kingdom)</option> + <option value="en-US">English (United States)</option> + <option value="en-ZM">English (Zambia)</option> + <option value="et-EE">Estonian (Estonia)</option> + <option value="tl-PH">Filipino (Philippines)</option> + <option value="fi-FI">Finnish (Finland)</option> + <option value="fr-DZ">French (Algeria)</option> + <option value="fr-CM">French (Cameroon)</option> + <option value="fr-CD">French (Democratic Republic of the Congo)</option> + <option value="fr-BE">French (Belgium)</option> + <option value="fr-CA">French (Canada)</option> + <option value="fr-FR">French (France)</option> + <option value="fr-CI">French (Ivory Coast [Côte d’Ivoire])</option> + <option value="fr-LU">French (Luxembourg)</option> + <option value="fr-MR">French (Mauritania)</option> + <option value="fr-MU">French (Mauritius)</option> + <option value="fr-MA">French (Morocco)</option> + <option value="fr-SN">French (Senegal)</option> + <option value="fr-CH">French (Switzerland)</option> + <option value="fr-TN">French (Tunisia)</option> + <option value="gl-ES">Galician (Spain)</option> + <option value="lg-UG">Ganda (Uganda)</option> + <option value="ka-GE">Georgian (Georgia)</option> + <option value="de-AT">German (Austria)</option> + <option value="de-DE">German (Germany)</option> + <option value="de-LU">German (Luxembourg)</option> + <option value="de-CH">German (Switzerland)</option> + <option value="el-GR">Greek (Greece)</option> + <option value="gu-IN">Gujarati (India)</option> + <option value="ha-NG">Hausa (Nigeria)</option> + <option value="he-IL">Hebrew (Israel)</option> + <option value="hi-IN">Hindi (India)</option> + <option value="hu-HU">Hungarian (Hungary)</option> + <option value="is-IS">Icelandic (Iceland)</option> + <option value="ig-NG">Igbo (Nigeria)</option> + <option value="id-ID">Indonesian (Indonesia)</option> + <option value="it-IT">Italian (Italy)</option> + <option value="it-CH">Italian (Switzerland)</option> + <option value="ja-JP">Japanese (Japan)</option> + <option value="kn-IN">Kannada (India)</option> + <option value="kk-KZ">Kazakh (Kazakhstan)</option> + <option value="km-KH">Khmer (Cambodia)</option> + <option value="rw-RW">Kinyarwanda (Rwanda)</option> + <option value="kok-IN">Konkani (India)</option> + <option value="ko-KR">Korean (Korea, South)</option> + <option value="lo-LA">Lao (Laos)</option> + <option value="lv-LV">Latvian (Latvia)</option> + <option value="lt-LT">Lithuanian (Lithuania)</option> + <option value="mk-MK">Macedonian (Macedonia)</option> + <option value="ms-MY">Malay-Latin (Malaysia)</option> + <option value="ml-IN">Malayalam (India)</option> + <option value="mt-MT">Maltese (Malta)</option> + <option value="mr-IN">Marathi (India)</option> + <option value="mn-Cyrl-MN">Mongolian-Cyrillic (Mongolia)</option> + <option value="ne-IN">Nepali (India)</option> + <option value="ne-NP">Nepali (Nepal)</option> + <option value="nb-NO">Norwegian Bokmål (Norway)</option> + <option value="nn-NO">Norwegian Nynorsk (Norway)</option> + <option value="or-IN">Oriya [aka, Odia] (India)</option> + <option value="om-ET">Oromo (Ethiopia)</option> + <option value="pl-PL">Polish (Poland)</option> + <option value="pt-AO">Portuguese (Angola)</option> + <option value="pt-BR">Portuguese (Brazil)</option> + <option value="pt-MO">Portuguese (Macao)</option> + <option value="pt-MZ">Portuguese (Mozambique)</option> + <option value="pt-PT">Portuguese (Portugal)</option> + <option value="pa-IN">Punjabi (India)</option> + <option value="ro-RO">Romanian (Romania)</option> + <option value="ru-RU">Russian (Russia)</option> + <option value="sr-RS">Serbian-Cyrillic (Serbia)</option> + <option value="sr-ME">Serbian-Latin (Montenegro)</option> + <option value="sr-Latn-RS">Serbian-Latin (Serbia)</option> + <option value="si-LK">Sinhala (Sri Lanka)</option> + <option value="sk-SK">Slovak (Slovakia)</option> + <option value="sl-SI">Slovenian (Slovenia)</option> + <option value="es-AR">Spanish (Argentina)</option> + <option value="es-BO">Spanish (Bolivia)</option> + <option value="es-CL">Spanish (Chile)</option> + <option value="es-CO">Spanish (Colombia)</option> + <option value="es-CR">Spanish (Costa Rica)</option> + <option value="es-DO">Spanish (Dominican Republic)</option> + <option value="es-EC">Spanish (Ecuador)</option> + <option value="es-SV">Spanish (El Salvador)</option> + <option value="es-GT">Spanish (Guatemala)</option> + <option value="es-HN">Spanish (Honduras)</option> + <option value="es-MX">Spanish (Mexico)</option> + <option value="es-NI">Spanish (Nicaragua)</option> + <option value="es-PA">Spanish (Panama)</option> + <option value="es-PY">Spanish (Paraguay)</option> + <option value="es-PE">Spanish (Peru)</option> + <option value="es-PR">Spanish (Puerto Rico)</option> + <option value="es-ES">Spanish (Spain)</option> + <option value="es-US">Spanish (United States)</option> + <option value="es-UY">Spanish (Uruguay)</option> + <option value="es-VE">Spanish (Venezuela)</option> + <option value="sw-KE">Swahili (Kenya)</option> + <option value="sw-TZ">Swahili (Tanzania)</option> + <option value="sv-SE">Swedish (Sweden)</option> + <option value="ta-IN">Tamil (India)</option> + <option value="te-IN">Telugu (India)</option> + <option value="th-TH">Thai (Thailand)</option> + <option value="tr-TR">Turkish (Turkey)</option> + <option value="uk-UA">Ukrainian (Ukraine)</option> + <option value="ur-IN">Urdu (India)</option> + <option value="ur-PK">Urdu (Pakistan)</option> + <option value="uz-Cyrl-UZ">Uzbek-Cyrillic (Uzbekistan)</option> + <option value="uz-Latn-UZ">Uzbek-Latin (Uzbekistan)</option> + <option value="vi-VN">Vietnamese (Vietnam)</option> + <option value="cy-GB">Welsh (United Kingdom)</option> + <option value="yo-NG">Yoruba (Nigeria)</option> + <option value="zu-ZA">Zulu (South Africa)</option> + <option value="az-AZ">Azerbaijani-Latin (Azerbaijan)</option> + <option value="sr-CS">Serbian-Cyrillic ()</option> + <option value="sr-Cyrl-CS">Serbian-Cyrillic (Serbia and Montenegro)</option> + <option value="sr-Latn-CS">Serbian-Latin (Serbia and Montenegro)</option> + </select> + </div> + </form> + </div> + <div class="row"> + <div class="col-lg-4 delayed-fadein"> + <p class="text-muted powered hidden">Powered by:</p> + <ul id="wok-logos" class="list-inline"></ul> + </div> + </div> + </div> + </div> +</body> +</html> diff --git a/ui/pages/wok-ui.html.tmpl.fedora b/ui/pages/wok-ui.html.tmpl.fedora new file mode 100644 index 0000000..1dcf0df --- /dev/null +++ b/ui/pages/wok-ui.html.tmpl.fedora @@ -0,0 +1,231 @@ +#* + * 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. + *# +#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 +#from wok.config import get_version +<!DOCTYPE html> +<html lang="$lang.lang[0]"> +<head> + <meta charset="UTF-8"> + <title>Wok</title> + <meta http-equiv="X-UA-Compatible" content="IE=edge" /> + <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" /> + <meta name="apple-mobile-web-app-capable" content="yes"> + <meta name="apple-mobile-web-app-title" content="Wok"> + <link href="$href('images/apple-touch-icon-57x57.png')" sizes="57x57" rel="apple-touch-icon-precomposed"> + <link href="$href('images/apple-touch-icon-72x72.png')" sizes="72x72" rel="apple-touch-icon-precomposed"> + <link href="$href('images/apple-touch-icon-76x76.png')" sizes="76x76" rel="apple-touch-icon-precomposed"> + <link href="$href('images/apple-touch-icon-114x114.png')" sizes="114x114" rel="apple-touch-icon-precomposed"> + <link href="$href('images/apple-touch-icon-144x144.png')" sizes="144x144" rel="apple-touch-icon-precomposed"> + <link href="$href('images/apple-touch-icon-152x152.png')" sizes="152x152" rel="apple-touch-icon-precomposed"> + <link href="$href('images/apple-touch-icon-180x180.png')" sizes="120x120" rel="apple-touch-icon-precomposed"> + <link rel="icon" type="image/png" href="$href('images/android-chrome-36x36.png')" sizes="36x36"> + <link rel="icon" type="image/png" href="$href('images/android-chrome-48x48.png')" sizes="48x48"> + <link rel="icon" type="image/png" href="$href('images/android-chrome-72x72.png')" sizes="72x72"> + <link rel="icon" type="image/png" href="$href('images/android-chrome-96x96.png')" sizes="96x96"> + <link rel="icon" type="image/png" href="$href('images/android-chrome-144x144.png')" sizes="144x144"> + <link rel="icon" type="image/png" href="$href('images/android-chrome-192x192.png')" sizes="192x192"> + <link rel="icon" type="image/png" href="$href('images/favicon-16x16.png')" sizes="16x16"> + <link rel="icon" type="image/png" href="$href('images/favicon-32x32.png')" sizes="32x32"> + <link rel="icon" type="image/png" href="$href('images/favicon-96x96.png')" sizes="96x96"> + <link rel="icon" type="image/png" href="$href('images/favicon-194x194.png')" sizes="194x194"> + <link rel="mask-icon" href="$href('images/safari-pinned-tab.svg')" color="#5bbad5"> + <meta name="application-name" content="Wok"> + <meta name="msapplication-config" content="none" /> + <meta name="msapplication-TileColor" content="#f73434" /> + <meta name="msapplication-square70x70logo" content="$href('images/mstile-70x70.png')" /> + <meta name="msapplication-square150x150logo" content="$href('images/mstile-150x150.png')" /> + <meta name="msapplication-wide310x150logo" content="$href('images/mstile-310x310.png')" /> + <meta name="msapplication-square310x310logo" content="$href('images/mstile-310x150.png')" /> + <link rel="stylesheet" href="$href('libs/jquery-ui/themes/base/jquery-ui.min.css')"> + <link rel="stylesheet" href="$href('css/jquery-ui.custom.css')"> + <link rel="stylesheet" href="$href('css/bootstrap.custom.css')"> + <link rel="stylesheet" href="$href('libs/bootstrap-select/dist/css/bootstrap-select.min.css')"> + <link rel="stylesheet" href="$href('libs/jquery-bootgrid/dist/css/jquery.bootgrid.min.css')"> + <link rel="stylesheet" href="$href('libs/bootstrap-switch/dist/css/bootstrap-switch.min.css')"> + <link rel="stylesheet" href="$href('libs/bootstrap-editable/dist/css/bootstrap-editable.css')"> + <link rel="stylesheet" href="$href('libs/datatables/css/datatables.min.css')"> + <link rel="stylesheet" href="$href('css/fontawesome/fontawesome.css')"> + <link rel="stylesheet" href="$href('css/opensans/opensans.css')"> + <link rel="stylesheet" href="$href('css/bootstrap-select.custom.css')"> + <link rel="stylesheet" href="$href('css/datatables.bootstrap.css')"> + <link rel="stylesheet" href="$href('css/wok.css')"> + <script src="js/es5-shim.min.js"></script> + <script src="js/jquery.min.js"></script> + <script src="$href('libs/jquery-containsNC/jquery.containsNC.js')"></script> + <script src="$href('libs/jquery-ui/jquery-ui.min.js')"></script> + <script src="$href('libs/jquery-ui/jquery-ui-i18n.min.js')"></script> + <script src="$href('libs/jquery-i18n/jquery.i18n.min.js')"></script> + <script src="$href('libs/list-js/list.min.js')"></script> + <script src="$href('libs/bootstrap/bootstrap.min.js')"></script> + <script src="$href('libs/bootstrap-select/dist/js/bootstrap-select.min.js')"></script> + <script src="$href('libs/jquery-bootgrid/dist/js/jquery.bootgrid.min.js')"></script> + <script src="$href('libs/bootstrap-switch/dist/js/bootstrap-switch.min.js')"></script> + <script src="$href('libs/bootstrap-editable/dist/js/bootstrap-editable.min.js')"></script> + <script src="js/typeahead.bundle.min.js"></script> + <script src="js/lodash.js"></script> + <script src="js/moment-with-locales.min.js"></script> + <script src="$href('libs/datatables/js/datatables.min.js')"></script> + <script src="$href('base64/jquery.base64.js')"></script> + <script src="$href('js/wok.min.js')"></script> + <!-- This is used for detecting if the UI needs to be built --> + <style type="text/css"> + #buildme { + position: fixed; + background: rgba(0, 0, 0, 0.5); + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 10000; + } + #buildme div { + background-color: #FFB2C0; + border-style: solid; + border-color: #FF0000; + padding: 30px; + width: 75%; + margin-left: auto; + margin-right: auto; + margin-top: 50px; + -moz-border-radius: 15px; + border-radius: 15px; + } + </style> + </head> +<body onload="wok.main()"> + <div class="topbar"> + <nav class="navbar navbar-inverse"> + <div class="container"> + <div class="navbar-header"> + <a id="logo" class="navbar-brand" href="#" title="Wok">Wok</a> + </div> + <ul class="nav navbar-nav navbar-right"> + <li class="dropdown hide-content peers" id="peers"> + <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="topbar-text">$_("Peers")</span><span class="caret"></span></a> + <ul class="dropdown-menu"> + <li id="search-peers"><span>$_("Searching")...</span></li> + <li id="no-peers" class="hide-content">$_("No peers found.")</li> + </ul> + </li> + <li class="dropdown" id="user-login"> + <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> + <i class="fa fa-user" id="user-icon"></i><span class="topbar-text empty-when-logged-off" id="user-name"></span><span class="caret"></span> + </a> + <ul class="dropdown-menu"> + <li class="critical"><a id="btn-logout" href="javascript: void(0);"><i class="fa fa-ban"></i><span>$_("Log out")</span></a></li> + </ul> + </li> + <li class="dropdown"> + <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="fa fa-question-circle"></i><span class="topbar-text">$_("Help")</span><span class="caret"></span></a> + <ul class="dropdown-menu"> + <li><a id="btn-help" href="javascript: void(0);">$_("Help")</a></li> + <li><a id="btn-about" href="#" data-toggle="modal" data-target="#aboutModal">$_("About")</a></li> + </ul> + </li> + </ul> + </div> + </nav> + <nav class="navbar navbar-default"> + <div class="container" id="navigation-bar"> + <div class="navbar-header"> + <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav-menu" aria-expanded="false"> + <span class="sr-only">$_("Toggle navigation")</span> + <span class="icon-bar"><!-- Hamburguer button here --></span> + </button> + </div> + <div id="functionalTabPanel" class="collapse navbar-collapse"> + <ul class="nav navbar-nav"> + <li class="hostname"><span class="host-location"></span></li> + </ul> + </div> + <div id="tabPanel" class="collapse navbar-collapse"> + <ul class="nav navbar-nav"> + </ul> + </div> + </div> + </nav> + </div> + <div class="content"> + <div id="main"> + </div> + </div> + </div> + + <div id="buildme" style="display:none"> + <div><p>Oops! It looks like I am running from a source tree and you forgot to build! + Please run the following command from the wok and plugins directories and reload this page:</p> + <p><code>make</code></p> + </div> + </div> + + <div class="modal fade host-modal" id="aboutModal" tabindex="-1" role="dialog" labelledby="aboutModalLabel" aria-hidden="true"> + </div> + + + <div class="fade in session-expiring" id="session-expiring-alert" hidden> + <button type="button" class="close">×</button> + <div class="well"> + <p>$_("Your session will expire on: 30s. Do you want to renew it?")</p> + <div class="form-group"> + <button class="btn btn-primary btn-xs" id="renew-session-button" onclick="wok.session.renewSession();">Renew</button> + <button class="btn btn-primary btn-xs" id="dismiss-session-button" onclick="wok.session.hideExpiringAlert();">Dismiss</button> + </div> + </div> + </div> + + + <script id="about-tmpl" type="wok/template"> + <div class="modal-dialog" role="document"> + <div class="modal-content" > + <div class="modal-header"> + <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> + <h4 class="modal-title">$_("About")</h4> + </div> + <div class="modal-body"> + <div class="content"> + <div class="col-md-10"> + <ul id="wok-about" class="list-inline"> + <li> + <img src="$href('images/wok.svg')" alt="Wok $get_version()" title="Wok"> + <span class="plugin-title">Wok</span> + <span class="plugin-version">$get_version()</span> + </li> + </ul> + </div> + </div> + </div> + </div> + </div> + </script> + <footer class="footer"> + <div class="container"> + <p class="text-muted powered hidden">$_("Powered by"):</p> + <ul id="plugins"> + </ul> + <span class="wok-version">Wok Version: $get_version()</span> + </div> + </footer> +</body> +</html> diff --git a/ui/pages/wok-ui.html.tmpl.ubuntu b/ui/pages/wok-ui.html.tmpl.ubuntu new file mode 100644 index 0000000..b458a6c --- /dev/null +++ b/ui/pages/wok-ui.html.tmpl.ubuntu @@ -0,0 +1,231 @@ +#* + * 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. + *# +#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 +#from wok.config import get_version +<!DOCTYPE html> +<html lang="$lang.lang[0]"> +<head> + <meta charset="UTF-8"> + <title>Wok</title> + <meta http-equiv="X-UA-Compatible" content="IE=edge" /> + <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" /> + <meta name="apple-mobile-web-app-capable" content="yes"> + <meta name="apple-mobile-web-app-title" content="Wok"> + <link href="$href('images/apple-touch-icon-57x57.png')" sizes="57x57" rel="apple-touch-icon-precomposed"> + <link href="$href('images/apple-touch-icon-72x72.png')" sizes="72x72" rel="apple-touch-icon-precomposed"> + <link href="$href('images/apple-touch-icon-76x76.png')" sizes="76x76" rel="apple-touch-icon-precomposed"> + <link href="$href('images/apple-touch-icon-114x114.png')" sizes="114x114" rel="apple-touch-icon-precomposed"> + <link href="$href('images/apple-touch-icon-144x144.png')" sizes="144x144" rel="apple-touch-icon-precomposed"> + <link href="$href('images/apple-touch-icon-152x152.png')" sizes="152x152" rel="apple-touch-icon-precomposed"> + <link href="$href('images/apple-touch-icon-180x180.png')" sizes="120x120" rel="apple-touch-icon-precomposed"> + <link rel="icon" type="image/png" href="$href('images/android-chrome-36x36.png')" sizes="36x36"> + <link rel="icon" type="image/png" href="$href('images/android-chrome-48x48.png')" sizes="48x48"> + <link rel="icon" type="image/png" href="$href('images/android-chrome-72x72.png')" sizes="72x72"> + <link rel="icon" type="image/png" href="$href('images/android-chrome-96x96.png')" sizes="96x96"> + <link rel="icon" type="image/png" href="$href('images/android-chrome-144x144.png')" sizes="144x144"> + <link rel="icon" type="image/png" href="$href('images/android-chrome-192x192.png')" sizes="192x192"> + <link rel="icon" type="image/png" href="$href('images/favicon-16x16.png')" sizes="16x16"> + <link rel="icon" type="image/png" href="$href('images/favicon-32x32.png')" sizes="32x32"> + <link rel="icon" type="image/png" href="$href('images/favicon-96x96.png')" sizes="96x96"> + <link rel="icon" type="image/png" href="$href('images/favicon-194x194.png')" sizes="194x194"> + <link rel="mask-icon" href="$href('images/safari-pinned-tab.svg')" color="#5bbad5"> + <meta name="application-name" content="Wok"> + <meta name="msapplication-config" content="none" /> + <meta name="msapplication-TileColor" content="#f73434" /> + <meta name="msapplication-square70x70logo" content="$href('images/mstile-70x70.png')" /> + <meta name="msapplication-square150x150logo" content="$href('images/mstile-150x150.png')" /> + <meta name="msapplication-wide310x150logo" content="$href('images/mstile-310x310.png')" /> + <meta name="msapplication-square310x310logo" content="$href('images/mstile-310x150.png')" /> + <link rel="stylesheet" href="/usr/share/javascript/jquery-ui/css/smoothness/jquery-ui.min.css"> + <link rel="stylesheet" href="/usr/share/javascript/jquery-ui/css/smoothness/jquery-ui.css"> + <link rel="stylesheet" href="/usr/share/javascript/bootstrap/css/bootstrap.css"> + <link rel="stylesheet" href="$href('libs/bootstrap-select/dist/css/bootstrap-select.min.css')"> + <link rel="stylesheet" href="$href('libs/jquery-bootgrid/dist/css/jquery.bootgrid.min.css')"> + <link rel="stylesheet" href="$href('libs/bootstrap-switch/dist/css/bootstrap-switch.min.css')"> + <link rel="stylesheet" href="$href('libs/bootstrap-editable/dist/css/bootstrap-editable.css')"> + <link rel="stylesheet" href="$href('libs/datatables/css/datatables.min.css')"> + <link rel="stylesheet" href="$href('css/fontawesome/fontawesome.css')"> + <link rel="stylesheet" href="$href('css/opensans/opensans.css')"> + <link rel="stylesheet" href="$href('css/bootstrap-select.custom.css')"> + <link rel="stylesheet" href="$href('css/datatables.bootstrap.css')"> + <link rel="stylesheet" href="$href('css/wok.css')"> + <script src="$href('libs/es5-shim/es5-shim.min.js')"></script> + <script src="/usr/share/javascript/jquery/jquery.min.js""></script> + <script src="$href('libs/jquery-containsNC/jquery.containsNC.js')"></script> + <script src="/usr/share/javascript/jquery-ui/jquery-ui.min.js"></script> + <script src="/usr/share/javascript/jquery-ui/ui/i18n/jquery-ui-i18n.js"></script> + <script src="$href('libs/jquery-i18n/jquery.i18n.min.js')"></script> + <script src="$href('libs/list-js/list.min.js')"></script> + <script src="/usr/share/javascript/bootstrap/js/bootstrap.min.js"></script> + <script src="$href('libs/bootstrap-select/dist/js/bootstrap-select.min.js')"></script> + <script src="$href('libs/jquery-bootgrid/dist/js/jquery.bootgrid.min.js')"></script> + <script src="$href('libs/bootstrap-switch/dist/js/bootstrap-switch.min.js')"></script> + <script src="$href('libs/bootstrap-editable/dist/js/bootstrap-editable.min.js')"></script> + <script src="$href('libs/typeahead/typeahead.bundle.min.js')"></script> + <script src="/usr/share/javascript/lodash.js"></script> + <script src="$href('libs/moment/moment-with-locales.min.js')"></script> + <script src="$href('libs/datatables/js/datatables.min.js')"></script> + <script src="$href('base64/jquery.base64.js')"></script> + <script src="$href('js/wok.min.js')"></script> + <!-- This is used for detecting if the UI needs to be built --> + <style type="text/css"> + #buildme { + position: fixed; + background: rgba(0, 0, 0, 0.5); + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 10000; + } + #buildme div { + background-color: #FFB2C0; + border-style: solid; + border-color: #FF0000; + padding: 30px; + width: 75%; + margin-left: auto; + margin-right: auto; + margin-top: 50px; + -moz-border-radius: 15px; + border-radius: 15px; + } + </style> + </head> +<body onload="wok.main()"> + <div class="topbar"> + <nav class="navbar navbar-inverse"> + <div class="container"> + <div class="navbar-header"> + <a id="logo" class="navbar-brand" href="#" title="Wok">Wok</a> + </div> + <ul class="nav navbar-nav navbar-right"> + <li class="dropdown hide-content peers" id="peers"> + <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="topbar-text">$_("Peers")</span><span class="caret"></span></a> + <ul class="dropdown-menu"> + <li id="search-peers"><span>$_("Searching")...</span></li> + <li id="no-peers" class="hide-content">$_("No peers found.")</li> + </ul> + </li> + <li class="dropdown" id="user-login"> + <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> + <i class="fa fa-user" id="user-icon"></i><span class="topbar-text empty-when-logged-off" id="user-name"></span><span class="caret"></span> + </a> + <ul class="dropdown-menu"> + <li class="critical"><a id="btn-logout" href="javascript: void(0);"><i class="fa fa-ban"></i><span>$_("Log out")</span></a></li> + </ul> + </li> + <li class="dropdown"> + <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="fa fa-question-circle"></i><span class="topbar-text">$_("Help")</span><span class="caret"></span></a> + <ul class="dropdown-menu"> + <li><a id="btn-help" href="javascript: void(0);">$_("Help")</a></li> + <li><a id="btn-about" href="#" data-toggle="modal" data-target="#aboutModal">$_("About")</a></li> + </ul> + </li> + </ul> + </div> + </nav> + <nav class="navbar navbar-default"> + <div class="container" id="navigation-bar"> + <div class="navbar-header"> + <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav-menu" aria-expanded="false"> + <span class="sr-only">$_("Toggle navigation")</span> + <span class="icon-bar"><!-- Hamburguer button here --></span> + </button> + </div> + <div id="functionalTabPanel" class="collapse navbar-collapse"> + <ul class="nav navbar-nav"> + <li class="hostname"><span class="host-location"></span></li> + </ul> + </div> + <div id="tabPanel" class="collapse navbar-collapse"> + <ul class="nav navbar-nav"> + </ul> + </div> + </div> + </nav> + </div> + <div class="content"> + <div id="main"> + </div> + </div> + </div> + + <div id="buildme" style="display:none"> + <div><p>Oops! It looks like I am running from a source tree and you forgot to build! + Please run the following command from the wok and plugins directories and reload this page:</p> + <p><code>make</code></p> + </div> + </div> + + <div class="modal fade host-modal" id="aboutModal" tabindex="-1" role="dialog" labelledby="aboutModalLabel" aria-hidden="true"> + </div> + + + <div class="fade in session-expiring" id="session-expiring-alert" hidden> + <button type="button" class="close">×</button> + <div class="well"> + <p>$_("Your session will expire on: 30s. Do you want to renew it?")</p> + <div class="form-group"> + <button class="btn btn-primary btn-xs" id="renew-session-button" onclick="wok.session.renewSession();">Renew</button> + <button class="btn btn-primary btn-xs" id="dismiss-session-button" onclick="wok.session.hideExpiringAlert();">Dismiss</button> + </div> + </div> + </div> + + + <script id="about-tmpl" type="wok/template"> + <div class="modal-dialog" role="document"> + <div class="modal-content" > + <div class="modal-header"> + <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> + <h4 class="modal-title">$_("About")</h4> + </div> + <div class="modal-body"> + <div class="content"> + <div class="col-md-10"> + <ul id="wok-about" class="list-inline"> + <li> + <img src="$href('images/wok.svg')" alt="Wok $get_version()" title="Wok"> + <span class="plugin-title">Wok</span> + <span class="plugin-version">$get_version()</span> + </li> + </ul> + </div> + </div> + </div> + </div> + </div> + </script> + <footer class="footer"> + <div class="container"> + <p class="text-muted powered hidden">$_("Powered by"):</p> + <ul id="plugins"> + </ul> + <span class="wok-version">Wok Version: $get_version()</span> + </div> + </footer> +</body> +</html> -- 2.5.5
On 08/12/2016 01:55 PM, Ramon Medeiros wrote:
Some javascript libraries didn't need to be hardcoded. So, add them to packages dependency and import them at frontend files
Signed-off-by: Ramon Medeiros <ramonn@linux.vnet.ibm.com> --- docs/fedora-deps.md | 4 +- docs/ubuntu-deps.md | 3 +- src/wok/config.py.in | 22 +++
ui/pages/login.html.tmpl.fedora | 332 +++++++++++++++++++++++++++++++++++++++ ui/pages/login.html.tmpl.ubuntu | 332 +++++++++++++++++++++++++++++++++++++++ ui/pages/wok-ui.html.tmpl.fedora | 231 +++++++++++++++++++++++++++ ui/pages/wok-ui.html.tmpl.ubuntu | 231 +++++++++++++++++++++++++++
You don't need to create a specific file for each distro to get the right file path placed there. All the files *.html.tmpl are processed in the backend. Look at default() function in root.py The render() function in template.py does the magic. The 'data' parameter is a dict of data. In the *.html.tmpl file you just need to add a variable, for example: <script src="$jquery-ui-file-path"></script> Then you need to proper add 'jquery-ui-file-path' to the data dict and the Template will be set as desired. Does that make sense? Please, let me know if you need help to do that.
7 files changed, 1153 insertions(+), 2 deletions(-) create mode 100644 ui/pages/login.html.tmpl.fedora create mode 100644 ui/pages/login.html.tmpl.ubuntu create mode 100644 ui/pages/wok-ui.html.tmpl.fedora create mode 100644 ui/pages/wok-ui.html.tmpl.ubuntu
diff --git a/docs/fedora-deps.md b/docs/fedora-deps.md index e665cdb..337f75a 100644 --- a/docs/fedora-deps.md +++ b/docs/fedora-deps.md @@ -28,7 +28,9 @@ Runtime Dependencies $ sudo yum install python-cherrypy python-cheetah PyPAM m2crypto \ python-jsonschema python-psutil python-ldap \ python-lxml nginx openssl open-sans-fonts \ - fontawesome-fonts logrotate + fontawesome-fonts logrotate js-jquery \ + js-moment js-typeahead.js nodejs-lodash.noarch \ + nodejs-es5-shim
# For RHEL systems, install the additional packages: $ sudo yum install python-ordereddict diff --git a/docs/ubuntu-deps.md b/docs/ubuntu-deps.md index 3a0f75c..0fe0038 100644 --- a/docs/ubuntu-deps.md +++ b/docs/ubuntu-deps.md @@ -18,7 +18,8 @@ Runtime Dependencies $ sudo apt-get install python-cherrypy3 python-cheetah python-pam \ python-m2crypto python-jsonschema \ python-psutil python-ldap python-lxml nginx \ - openssl fonts-font-awesome texlive-fonts-extra + openssl fonts-font-awesome texlive-fonts-extra \ + libjs-jquery libjs-lodash jquery-ui libjs-bootstrap
Packages required for UI development ------------------------------------ diff --git a/src/wok/config.py.in b/src/wok/config.py.in index cbe585c..c007935 100644 --- a/src/wok/config.py.in +++ b/src/wok/config.py.in @@ -57,6 +57,15 @@ FONTS_PATH = { ] }
+JS_LIBS = { + "jquery" : "/usr/share/javascript/jquery/2.1.3/jquery.min.js",
Having the version number as part of the file path is really dangerous for us. That means the UI will not work as expected when some newer or older version is installed. Said that, I recommend to use the glob module to find the file path. For example. import glob filepaths = glob.glob('/usr/share/javascript/jquery/*/jquery.min.js') That will return a list of files found. So you sort the result and get the newer version. Does that make sense?
+ "lodash" : "/usr/lib/node_modules/lodash/lodash.js", + "moment" : "/usr/share/javascript/moment/min/moment-with-locales.min.js", + "typeahead" : "/usr/share/javascript/typeahead.js/dist/typeahead.bundle.min.js", + "es5-shim" : "/usr/lib/node_modules/es5-shim/es5-shim.min.js" +} + +
def get_log_download_path(): return os.path.join(paths.state_dir, 'logs') @@ -103,6 +112,11 @@ class Paths(object): if os.path.exists(font_file): setattr(self, '%s_dir' % font, path)
+ for js in JS_LIBS.keys(): + path = JS_LIBS[js] + if os.path.exists(path): + setattr(self, '%s_dir' % js, path) + def get_prefix(self): if __file__.startswith("/"): base = os.path.dirname(__file__) @@ -172,6 +186,14 @@ class UIConfig(dict): 'tools.wokauth.on': False, 'tools.nocache.on': False}
+ for js, file in JS_LIBS.iteritems(): + if os.path.exists(file): + ui_configs['/js/%s' % os.path.basename(file) ] = { + 'tools.staticfile.on': True, + 'tools.staticfile.filename': file, + 'tools.wokauth.on': False, + 'tools.nocache.on': False} + self.update(ui_configs)
On 08/22/2016 01:35 PM, Aline Manera wrote:
On 08/12/2016 01:55 PM, Ramon Medeiros wrote:
Some javascript libraries didn't need to be hardcoded. So, add them to packages dependency and import them at frontend files
Signed-off-by: Ramon Medeiros <ramonn@linux.vnet.ibm.com> --- docs/fedora-deps.md | 4 +- docs/ubuntu-deps.md | 3 +- src/wok/config.py.in | 22 +++
ui/pages/login.html.tmpl.fedora | 332 +++++++++++++++++++++++++++++++++++++++ ui/pages/login.html.tmpl.ubuntu | 332 +++++++++++++++++++++++++++++++++++++++ ui/pages/wok-ui.html.tmpl.fedora | 231 +++++++++++++++++++++++++++ ui/pages/wok-ui.html.tmpl.ubuntu | 231 +++++++++++++++++++++++++++
You don't need to create a specific file for each distro to get the right file path placed there.
All the files *.html.tmpl are processed in the backend. Look at default() function in root.py The render() function in template.py does the magic. The 'data' parameter is a dict of data. In the *.html.tmpl file you just need to add a variable, for example:
<script src="$jquery-ui-file-path"></script>
Then you need to proper add 'jquery-ui-file-path' to the data dict and the Template will be set as desired.
Does that make sense?
yes. Can i have the distro from this dict? if true, i can import the logic from the makefiles and skip the problem
Please, let me know if you need help to do that.
7 files changed, 1153 insertions(+), 2 deletions(-) create mode 100644 ui/pages/login.html.tmpl.fedora create mode 100644 ui/pages/login.html.tmpl.ubuntu create mode 100644 ui/pages/wok-ui.html.tmpl.fedora create mode 100644 ui/pages/wok-ui.html.tmpl.ubuntu
diff --git a/docs/fedora-deps.md b/docs/fedora-deps.md index e665cdb..337f75a 100644 --- a/docs/fedora-deps.md +++ b/docs/fedora-deps.md @@ -28,7 +28,9 @@ Runtime Dependencies $ sudo yum install python-cherrypy python-cheetah PyPAM m2crypto \ python-jsonschema python-psutil python-ldap \ python-lxml nginx openssl open-sans-fonts \ - fontawesome-fonts logrotate + fontawesome-fonts logrotate js-jquery \ + js-moment js-typeahead.js nodejs-lodash.noarch \ + nodejs-es5-shim # For RHEL systems, install the additional packages: $ sudo yum install python-ordereddict diff --git a/docs/ubuntu-deps.md b/docs/ubuntu-deps.md index 3a0f75c..0fe0038 100644 --- a/docs/ubuntu-deps.md +++ b/docs/ubuntu-deps.md @@ -18,7 +18,8 @@ Runtime Dependencies $ sudo apt-get install python-cherrypy3 python-cheetah python-pam \ python-m2crypto python-jsonschema \ python-psutil python-ldap python-lxml nginx \ - openssl fonts-font-awesome texlive-fonts-extra + openssl fonts-font-awesome texlive-fonts-extra \ + libjs-jquery libjs-lodash jquery-ui libjs-bootstrap Packages required for UI development ------------------------------------ diff --git a/src/wok/config.py.in b/src/wok/config.py.in index cbe585c..c007935 100644 --- a/src/wok/config.py.in +++ b/src/wok/config.py.in @@ -57,6 +57,15 @@ FONTS_PATH = { ] }
+JS_LIBS = { + "jquery" : "/usr/share/javascript/jquery/2.1.3/jquery.min.js",
Having the version number as part of the file path is really dangerous for us. That means the UI will not work as expected when some newer or older version is installed.
Said that, I recommend to use the glob module to find the file path. For example.
import glob
filepaths = glob.glob('/usr/share/javascript/jquery/*/jquery.min.js')
That will return a list of files found. So you sort the result and get the newer version.
Does that make sense?
+ "lodash" : "/usr/lib/node_modules/lodash/lodash.js", + "moment" : "/usr/share/javascript/moment/min/moment-with-locales.min.js", + "typeahead" : "/usr/share/javascript/typeahead.js/dist/typeahead.bundle.min.js", + "es5-shim" : "/usr/lib/node_modules/es5-shim/es5-shim.min.js" +} + + def get_log_download_path(): return os.path.join(paths.state_dir, 'logs') @@ -103,6 +112,11 @@ class Paths(object): if os.path.exists(font_file): setattr(self, '%s_dir' % font, path) + for js in JS_LIBS.keys(): + path = JS_LIBS[js] + if os.path.exists(path): + setattr(self, '%s_dir' % js, path) + def get_prefix(self): if __file__.startswith("/"): base = os.path.dirname(__file__) @@ -172,6 +186,14 @@ class UIConfig(dict): 'tools.wokauth.on': False, 'tools.nocache.on': False} + for js, file in JS_LIBS.iteritems(): + if os.path.exists(file): + ui_configs['/js/%s' % os.path.basename(file) ] = { + 'tools.staticfile.on': True, + 'tools.staticfile.filename': file, + 'tools.wokauth.on': False, + 'tools.nocache.on': False} + self.update(ui_configs)
-- Ramon Nunes Medeiros Kimchi Developer Linux Technology Center Brazil IBM Systems & Technology Group Phone : +55 19 2132 7878 ramonn@br.ibm.com
Change configure.ac to receive parameter "--with-js-rpms" and set Makefile to apply changes when configured by automake. Signed-off-by: Ramon Medeiros <ramonn@linux.vnet.ibm.com> --- configure.ac | 11 +++++++++++ ui/libs/Makefile.am | 10 +++++++++- ui/pages/Makefile.am | 9 +++++++++ 3 files changed, 29 insertions(+), 1 deletion(-) diff --git a/configure.ac b/configure.ac index c7a2787..bfc8b59 100644 --- a/configure.ac +++ b/configure.ac @@ -85,6 +85,17 @@ AC_ARG_WITH( ) AM_CONDITIONAL([WITH_SPICE], [test "x$with_spice_html5" = xyes]) +AC_ARG_WITH( + [js-rpms], + [AS_HELP_STRING([--with-js-rpms], + [Build Kimchi with js libraries from rpms @<:@default=no@:>@])], + [with_js_rpms="yes"], + [with_js_rpms="no"]) + +AM_CONDITIONAL([WITH_JS_RPMS], [test "x$with_js_rpms" == xyes ]) +AM_CONDITIONAL([WITH_JS_RPMS_FEDORA], [test "x$with_js_rpms" = xyes && -f /etc/redhat_release]) +AM_CONDITIONAL([WITH_JS_RPMS_UBUNTU], [test "x$with_js_rpms" = xyes && -f /etc/debian_version]) + AC_CONFIG_FILES([ po/Makefile.in po/gen-pot diff --git a/ui/libs/Makefile.am b/ui/libs/Makefile.am index 9732499..8614320 100644 --- a/ui/libs/Makefile.am +++ b/ui/libs/Makefile.am @@ -17,4 +17,12 @@ # See the License for the specific language governing permissions and # limitations under the License. -SUBDIRS = bootstrap jquery jquery-ui bootstrap-select es5-shim jquery-i18n list-js jquery-bootgrid bootstrap-switch bootstrap-editable typeahead jquery-containsNC lodash datatables moment +SUBDIRS = bootstrap-select jquery-i18n list-js jquery-bootgrid bootstrap-switch bootstrap-editable jquery-containsNC datatables + +if WITH_JS_RPMS_FEDORA +SUBDIRS += bootstrap jquery-ui +else if WITH_JS_RPMS_UBUNTU +SUBDIRS += es5-shim typeahead lodash moment +else +SUBDIRS += bootstrap jquery-ui es5-shim typeahead lodash moment jquery +endif diff --git a/ui/pages/Makefile.am b/ui/pages/Makefile.am index dde6026..d08909b 100644 --- a/ui/pages/Makefile.am +++ b/ui/pages/Makefile.am @@ -17,6 +17,15 @@ # See the License for the specific language governing permissions and # limitations under the License. +if WITH_JS_RPMS_FEDORA +sh -c 'cp login.html.tmpl.fedora login.html.tmpl' +sh -c 'cp wok-ui.html.tmpl.fedora wok-ui.html.tmpl' +endif +if WITH_JS_RPMS_UBUNTU +sh -c 'cp login.html.tmpl.ubuntu login.html.tmpl' +sh -c 'cp wok-ui.html.tmpl.ubuntu wok-ui.html.tmpl' +endif + SUBDIRS = help tabs htmldir = $(datadir)/wok/ui/pages -- 2.5.5
On 08/12/2016 01:55 PM, Ramon Medeiros wrote:
Change configure.ac to receive parameter "--with-js-rpms" and set Makefile to apply changes when configured by automake.
Signed-off-by: Ramon Medeiros <ramonn@linux.vnet.ibm.com> --- configure.ac | 11 +++++++++++ ui/libs/Makefile.am | 10 +++++++++- ui/pages/Makefile.am | 9 +++++++++ 3 files changed, 29 insertions(+), 1 deletion(-)
diff --git a/configure.ac b/configure.ac index c7a2787..bfc8b59 100644 --- a/configure.ac +++ b/configure.ac @@ -85,6 +85,17 @@ AC_ARG_WITH( ) AM_CONDITIONAL([WITH_SPICE], [test "x$with_spice_html5" = xyes])
+AC_ARG_WITH( + [js-rpms], + [AS_HELP_STRING([--with-js-rpms], + [Build Kimchi with js libraries from rpms @<:@default=no@:>@])], + [with_js_rpms="yes"], + [with_js_rpms="no"]) + +AM_CONDITIONAL([WITH_JS_RPMS], [test "x$with_js_rpms" == xyes ]) +AM_CONDITIONAL([WITH_JS_RPMS_FEDORA], [test "x$with_js_rpms" = xyes && -f /etc/redhat_release]) +AM_CONDITIONAL([WITH_JS_RPMS_UBUNTU], [test "x$with_js_rpms" = xyes && -f /etc/debian_version]) +
Will all the imported JS files be replaced by RPM packages on Fedora/RHEL distros? Is not there any those packages for Ubuntu/Debian? I am asking that to know if it is not better to have an option per JS lib instead of just one 'with-js-rpms'.
AC_CONFIG_FILES([ po/Makefile.in po/gen-pot diff --git a/ui/libs/Makefile.am b/ui/libs/Makefile.am index 9732499..8614320 100644 --- a/ui/libs/Makefile.am +++ b/ui/libs/Makefile.am @@ -17,4 +17,12 @@ # See the License for the specific language governing permissions and # limitations under the License.
-SUBDIRS = bootstrap jquery jquery-ui bootstrap-select es5-shim jquery-i18n list-js jquery-bootgrid bootstrap-switch bootstrap-editable typeahead jquery-containsNC lodash datatables moment +SUBDIRS = bootstrap-select jquery-i18n list-js jquery-bootgrid bootstrap-switch bootstrap-editable jquery-containsNC datatables + +if WITH_JS_RPMS_FEDORA +SUBDIRS += bootstrap jquery-ui +else if WITH_JS_RPMS_UBUNTU +SUBDIRS += es5-shim typeahead lodash moment +else +SUBDIRS += bootstrap jquery-ui es5-shim typeahead lodash moment jquery +endif
Is that what it is not working as you said in the cover letter?
diff --git a/ui/pages/Makefile.am b/ui/pages/Makefile.am index dde6026..d08909b 100644 --- a/ui/pages/Makefile.am +++ b/ui/pages/Makefile.am @@ -17,6 +17,15 @@ # See the License for the specific language governing permissions and # limitations under the License.
+if WITH_JS_RPMS_FEDORA +sh -c 'cp login.html.tmpl.fedora login.html.tmpl' +sh -c 'cp wok-ui.html.tmpl.fedora wok-ui.html.tmpl' +endif +if WITH_JS_RPMS_UBUNTU +sh -c 'cp login.html.tmpl.ubuntu login.html.tmpl' +sh -c 'cp wok-ui.html.tmpl.ubuntu wok-ui.html.tmpl' +endif + SUBDIRS = help tabs
Using the .html.tmpl file with variables (as I explained in the previous patch) you will not need the above block of code.
htmldir = $(datadir)/wok/ui/pages
On 08/22/2016 01:38 PM, Aline Manera wrote:
On 08/12/2016 01:55 PM, Ramon Medeiros wrote:
Change configure.ac to receive parameter "--with-js-rpms" and set Makefile to apply changes when configured by automake.
Signed-off-by: Ramon Medeiros <ramonn@linux.vnet.ibm.com> --- configure.ac | 11 +++++++++++ ui/libs/Makefile.am | 10 +++++++++- ui/pages/Makefile.am | 9 +++++++++ 3 files changed, 29 insertions(+), 1 deletion(-)
diff --git a/configure.ac b/configure.ac index c7a2787..bfc8b59 100644 --- a/configure.ac +++ b/configure.ac @@ -85,6 +85,17 @@ AC_ARG_WITH( ) AM_CONDITIONAL([WITH_SPICE], [test "x$with_spice_html5" = xyes])
+AC_ARG_WITH( + [js-rpms], + [AS_HELP_STRING([--with-js-rpms], + [Build Kimchi with js libraries from rpms @<:@default=no@:>@])], + [with_js_rpms="yes"], + [with_js_rpms="no"]) + +AM_CONDITIONAL([WITH_JS_RPMS], [test "x$with_js_rpms" == xyes ]) +AM_CONDITIONAL([WITH_JS_RPMS_FEDORA], [test "x$with_js_rpms" = xyes && -f /etc/redhat_release]) +AM_CONDITIONAL([WITH_JS_RPMS_UBUNTU], [test "x$with_js_rpms" = xyes && -f /etc/debian_version]) +
Will all the imported JS files be replaced by RPM packages on Fedora/RHEL distros?
Is not there any those packages for Ubuntu/Debian? Nop, take a look in the previous patch. There is listed the complete
Nop. We have less than half packages available. list of packages present on distros
I am asking that to know if it is not better to have an option per JS lib instead of just one 'with-js-rpms'.
AC_CONFIG_FILES([ po/Makefile.in po/gen-pot diff --git a/ui/libs/Makefile.am b/ui/libs/Makefile.am index 9732499..8614320 100644 --- a/ui/libs/Makefile.am +++ b/ui/libs/Makefile.am @@ -17,4 +17,12 @@ # See the License for the specific language governing permissions and # limitations under the License.
-SUBDIRS = bootstrap jquery jquery-ui bootstrap-select es5-shim jquery-i18n list-js jquery-bootgrid bootstrap-switch bootstrap-editable typeahead jquery-containsNC lodash datatables moment +SUBDIRS = bootstrap-select jquery-i18n list-js jquery-bootgrid bootstrap-switch bootstrap-editable jquery-containsNC datatables + +if WITH_JS_RPMS_FEDORA +SUBDIRS += bootstrap jquery-ui +else if WITH_JS_RPMS_UBUNTU +SUBDIRS += es5-shim typeahead lodash moment +else +SUBDIRS += bootstrap jquery-ui es5-shim typeahead lodash moment jquery +endif
Is that what it is not working as you said in the cover letter?
Yep, the commands isn't running due my low knowledge on makefile
diff --git a/ui/pages/Makefile.am b/ui/pages/Makefile.am index dde6026..d08909b 100644 --- a/ui/pages/Makefile.am +++ b/ui/pages/Makefile.am @@ -17,6 +17,15 @@ # See the License for the specific language governing permissions and # limitations under the License.
+if WITH_JS_RPMS_FEDORA +sh -c 'cp login.html.tmpl.fedora login.html.tmpl' +sh -c 'cp wok-ui.html.tmpl.fedora wok-ui.html.tmpl' +endif +if WITH_JS_RPMS_UBUNTU +sh -c 'cp login.html.tmpl.ubuntu login.html.tmpl' +sh -c 'cp wok-ui.html.tmpl.ubuntu wok-ui.html.tmpl' +endif + SUBDIRS = help tabs
Using the .html.tmpl file with variables (as I explained in the previous patch) you will not need the above block of code.
htmldir = $(datadir)/wok/ui/pages
-- Ramon Nunes Medeiros Kimchi Developer Linux Technology Center Brazil IBM Systems & Technology Group Phone : +55 19 2132 7878 ramonn@br.ibm.com
Hi Ramon and all, I like the idea but I bit worried on impact it can have on different distributions. For example, on KVM distribution for s390x platform it will be very challenging situation in getting the rpms of every package that are available on the other platforms. Given that said, I would be very cautious here. Is it possible to still rely the way we are in for the platforms where there is no guarantee of package availability as rpms ? If not we will brake for many distribution like KVM distribution for s390x platform. @All: Please feel free to provide your opinion which can work with out troubling platforms where support of rpm is a challenge. Thanks and Regards Chandra On 8/12/16 10:25 PM, Ramon Medeiros wrote:
This isn't a patch yet since the commit "Change configuration files" are not working well.
I need to change ui/libs/Makefile.am to set SUBDIRS variable (that trigger javascript hardcoded libs build) and change ui/pages/Makefile.am, to copy the template according to distro.
Can you guys help me on makefile syntax?
Ramon Medeiros (2): Use javascript libraries from rpms Change configuration files
configure.ac | 11 ++ docs/fedora-deps.md | 4 +- docs/ubuntu-deps.md | 3 +- src/wok/config.py.in | 22 +++ ui/libs/Makefile.am | 10 +- ui/pages/Makefile.am | 9 ++ ui/pages/login.html.tmpl.fedora | 332 +++++++++++++++++++++++++++++++++++++++ ui/pages/login.html.tmpl.ubuntu | 332 +++++++++++++++++++++++++++++++++++++++ ui/pages/wok-ui.html.tmpl.fedora | 231 +++++++++++++++++++++++++++ ui/pages/wok-ui.html.tmpl.ubuntu | 231 +++++++++++++++++++++++++++ 10 files changed, 1182 insertions(+), 3 deletions(-) create mode 100644 ui/pages/login.html.tmpl.fedora create mode 100644 ui/pages/login.html.tmpl.ubuntu create mode 100644 ui/pages/wok-ui.html.tmpl.fedora create mode 100644 ui/pages/wok-ui.html.tmpl.ubuntu
Hi Chandra, the main propose of this patch isn't remove the libs right now. But, map all libraries that are available at distros repositories and use them. Don't worry :) On 08/24/2016 07:51 AM, Chandra Shekhar Reddy Potula wrote:
Hi Ramon and all,
I like the idea but I bit worried on impact it can have on different distributions. For example, on KVM distribution for s390x platform it will be very challenging situation in getting the rpms of every package that are available on the other platforms.
Given that said, I would be very cautious here. Is it possible to still rely the way we are in for the platforms where there is no guarantee of package availability as rpms ?
If not we will brake for many distribution like KVM distribution for s390x platform.
@All: Please feel free to provide your opinion which can work with out troubling platforms where support of rpm is a challenge.
Thanks and Regards
Chandra
On 8/12/16 10:25 PM, Ramon Medeiros wrote:
This isn't a patch yet since the commit "Change configuration files" are not working well.
I need to change ui/libs/Makefile.am to set SUBDIRS variable (that trigger javascript hardcoded libs build) and change ui/pages/Makefile.am, to copy the template according to distro.
Can you guys help me on makefile syntax?
Ramon Medeiros (2): Use javascript libraries from rpms Change configuration files
configure.ac | 11 ++ docs/fedora-deps.md | 4 +- docs/ubuntu-deps.md | 3 +- src/wok/config.py.in | 22 +++ ui/libs/Makefile.am | 10 +- ui/pages/Makefile.am | 9 ++ ui/pages/login.html.tmpl.fedora | 332 +++++++++++++++++++++++++++++++++++++++ ui/pages/login.html.tmpl.ubuntu | 332 +++++++++++++++++++++++++++++++++++++++ ui/pages/wok-ui.html.tmpl.fedora | 231 +++++++++++++++++++++++++++ ui/pages/wok-ui.html.tmpl.ubuntu | 231 +++++++++++++++++++++++++++ 10 files changed, 1182 insertions(+), 3 deletions(-) create mode 100644 ui/pages/login.html.tmpl.fedora create mode 100644 ui/pages/login.html.tmpl.ubuntu create mode 100644 ui/pages/wok-ui.html.tmpl.fedora create mode 100644 ui/pages/wok-ui.html.tmpl.ubuntu
_______________________________________________ Kimchi-devel mailing list Kimchi-devel@ovirt.org http://lists.ovirt.org/mailman/listinfo/kimchi-devel
-- Ramon Nunes Medeiros Kimchi Developer Linux Technology Center Brazil IBM Systems & Technology Group Phone : +55 19 2132 7878 ramonn@br.ibm.com
Hi, What if instead of using RPM packages, we use NodeJS / NPM? Is it overkill? I think with this we would avoid problems like incorrect versions. For the record: https://fedoraproject.org/wiki/Packaging:Node.js?rd=Node.js/Packagers "Client-side JavaScript Many node modules contain JavaScript that can be used both client-side and server-side and it is sometimes hard to identify code intended only for use in the browser. Since there are no current packaging guidelines for client-side JavaScript and bundling of such code is currently permitted in Fedora, it is currently permissible for client-side JavaScript to be bundled with nodejs modules in %{nodejs_sitelib}." Samuel -----Original Message----- From: kimchi-devel-bounces@ovirt.org [mailto:kimchi-devel-bounces@ovirt.org] On Behalf Of Ramon Medeiros Sent: quarta-feira, 24 de agosto de 2016 15:45 To: Chandra Shekhar Reddy Potula <chandra@linux.vnet.ibm.com>; kimchi-devel@ovirt.org Subject: Re: [Kimchi-devel] [WIP][Wok 0/2] Use javascript libraries from rpms, not hardcoded Hi Chandra, the main propose of this patch isn't remove the libs right now. But, map all libraries that are available at distros repositories and use them. Don't worry :) On 08/24/2016 07:51 AM, Chandra Shekhar Reddy Potula wrote:
Hi Ramon and all,
I like the idea but I bit worried on impact it can have on different distributions. For example, on KVM distribution for s390x platform it will be very challenging situation in getting the rpms of every package that are available on the other platforms.
Given that said, I would be very cautious here. Is it possible to still rely the way we are in for the platforms where there is no guarantee of package availability as rpms ?
If not we will brake for many distribution like KVM distribution for s390x platform.
@All: Please feel free to provide your opinion which can work with out troubling platforms where support of rpm is a challenge.
Thanks and Regards
Chandra
On 8/12/16 10:25 PM, Ramon Medeiros wrote:
This isn't a patch yet since the commit "Change configuration files" are not working well.
I need to change ui/libs/Makefile.am to set SUBDIRS variable (that trigger javascript hardcoded libs build) and change ui/pages/Makefile.am, to copy the template according to distro.
Can you guys help me on makefile syntax?
Ramon Medeiros (2): Use javascript libraries from rpms Change configuration files
configure.ac | 11 ++ docs/fedora-deps.md | 4 +- docs/ubuntu-deps.md | 3 +- src/wok/config.py.in | 22 +++ ui/libs/Makefile.am | 10 +- ui/pages/Makefile.am | 9 ++ ui/pages/login.html.tmpl.fedora | 332 +++++++++++++++++++++++++++++++++++++++ ui/pages/login.html.tmpl.ubuntu | 332 +++++++++++++++++++++++++++++++++++++++ ui/pages/wok-ui.html.tmpl.fedora | 231 +++++++++++++++++++++++++++ ui/pages/wok-ui.html.tmpl.ubuntu | 231 +++++++++++++++++++++++++++ 10 files changed, 1182 insertions(+), 3 deletions(-) create mode 100644 ui/pages/login.html.tmpl.fedora create mode 100644 ui/pages/login.html.tmpl.ubuntu create mode 100644 ui/pages/wok-ui.html.tmpl.fedora create mode 100644 ui/pages/wok-ui.html.tmpl.ubuntu
_______________________________________________ Kimchi-devel mailing list Kimchi-devel@ovirt.org http://lists.ovirt.org/mailman/listinfo/kimchi-devel
-- Ramon Nunes Medeiros Kimchi Developer Linux Technology Center Brazil IBM Systems & Technology Group Phone : +55 19 2132 7878 ramonn@br.ibm.com _______________________________________________ Kimchi-devel mailing list Kimchi-devel@ovirt.org http://lists.ovirt.org/mailman/listinfo/kimchi-devel
participants (4)
-
Aline Manera -
Chandra Shekhar Reddy Potula -
Ramon Medeiros -
Samuel Henrique De Oliveira Guimaraes