[Kimchi-devel] [PATCH][Wok 1/2] Use javascript libraries from rpms

[Aline Manera]

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 at 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)
>   
>