Remove css styles from html templates

Changes:
  1. Remove css styles from html templates.
  2. Transfer this styles to new css files.

Change-Id: I318b5fb4a6f15456d7756bc438e0d93b91255203
Closes-bug: 1421287

sahara_dashboard/content/data_processing/clusters/templates/clusters/_in_progress.html

@@ -1,6 +1,6 @@
 <div class="horizon-pending-bar">
   <div class="progress progress-striped active">
-    <div class="progress-bar" style="width: 100%">
+    <div class="progress-bar" id="cluster-progress-bar">
       {{ status }}
     </div>
   </div>

sahara_dashboard/content/data_processing/clusters/templates/clusters/_nodegroups_details.html

@@ -35,7 +35,7 @@
 
             <dt>{% trans "Security Groups" %}</dt>
             <dd>
-                <ul class="list-bullet" style="margin-left: 20px">
+                <ul class="list-bullet" id="sahara-bullet-list">
                     {% for group in node_group.security_groups_full %}
                         {% if group.id %}
                             <li><a href="{% url 'horizon:project:access_and_security:security_groups:detail' group.id %}">{{ group.name }}</a></li>
@@ -49,7 +49,7 @@
             <dt>{% trans "Node Processes" %}</dt>
             {% if node_group.node_processes %}
                 <dd>
-                    <ul class="list-bullet" style="margin-left: 20px">
+                    <ul class="list-bullet" id="sahara-bullet-list">
                         {% for process in node_group.node_processes %}
                             <li>{{ process }}</li>
                         {% endfor %}

sahara_dashboard/content/data_processing/clusters/templates/clusters/index.html

@@ -15,7 +15,7 @@
         if ($("#id_tags_list").val()) {
             var tags = JSON.parse($("#id_tags_list").val());
             $.each(tags, function (i, tag) {
-                var tagspan = '<span class="label label-info" style="float: left;display: block; margin: 2px;">' +
+                var tagspan = '<span class="label label-info" id="image-tag">' +
                         tag +
                         '<i class="fa fa-close" onclick="remove_tag(this);"></i></span>';
                 $("#image_tags_list").append(tagspan);

sahara_dashboard/content/data_processing/clusters/templates/image_registry/_list_tags.html

@@ -1,5 +1,5 @@
 <ul>
     {% for tag in image.tags %}
-        <li><span class="label label-info" style="float: left;display: block; margin: 2px;">{{ tag }}</span></li>
+        <li><span class="label label-info" id="image-tag">{{ tag }}</span></li>
     {% endfor %}
 </ul>

sahara_dashboard/content/data_processing/clusters/templates/image_registry/_tag_form.html

@@ -84,7 +84,7 @@
 
         var tags = get_current_tags();
         if ($.inArray(tag, tags) == -1) {
-          var span = ' <span class="label label-warning" style="float: left;display: block; margin: 2px;">$tag <i class="fa fa-close" onclick="remove_tag(this);"></i></span>'.replace("$tag", tag)
+          var span = ' <span class="label label-warning" id="image-tag">$tag <i class="fa fa-close" onclick="remove_tag(this);"></i></span>'.replace("$tag", tag)
           $("#image_tags_list").append(span);
           update_image_tags();
         }

sahara_dashboard/content/data_processing/jobs/templates/job_templates/library_template.html

@@ -3,15 +3,15 @@
     var remove_btn_label = '{% trans "Remove" %}';
     var lib_template = '<tr id_attr="$id">' +
             '<td>' +
-            '<div class="input form-group"  style="padding-right:15px;"><input disabled value="$lib_name" class="form-control" /></div>' +
+            '<div class="input form-group"  id="lib-name"><input disabled value="$lib_name" class="form-control" /></div>' +
             '</td>' +
             '<td>' +
-            '<div class="input form-group" style="float:left;padding-right:5px;">' +
+            '<div class="input form-group" id="btn-remove-lib">' +
             '<input type="button" class="btn btn-danger" id="delete_btn_$id" data-toggle="dropdown" onclick="delete_lib(this)" value="' + remove_btn_label +'" />' +
             '</div>' +
             '</td>' +
             '<td>' +
-            '<div class="input form-group" style="padding-right:15px;">' +
+            '<div class="input form-group" id="lib-name-hidden">' +
             '<input id="lib_name_$id" value="$lib_name" type="hidden" name="lib_name_$id">' +
             '</div>' +
             '</td>' +

sahara_dashboard/content/data_processing/static/dashboard/project/data_processing/css/clusters.scss

@@ -0,0 +1,13 @@
+#image-tag {
+    float: left;
+    display: block;
+    margin: 2px;
+}
+
+#cluster-progress-bar {
+    width: 100%;
+}
+
+#sahara-bullet-list {
+    margin-left: 20px;
+}

sahara_dashboard/content/data_processing/static/dashboard/project/data_processing/css/jobs.scss

@@ -0,0 +1,12 @@
+#lib-name {
+    padding-right: 15px;
+}
+
+#btn-remove-lib {
+    float: left;
+    padding-right: 5px;
+}
+
+#lib-name-hidden {
+    padding-right: 15px;
+}

sahara_dashboard/enabled/_1820_data_processing_clusters_panel.py

@@ -33,6 +33,10 @@ ADD_JS_FILES = [
     'dashboard/project/data_processing/js/data_processing.verifications.js'
 ]
 
+ADD_SCSS_FILES = [
+    'dashboard/project/data_processing/css/clusters.scss'
+]
+
 ADD_EXCEPTIONS = {
     'recoverable': exceptions.RECOVERABLE
 }

sahara_dashboard/enabled/_1840_data_processing_jobs_panel.py

@@ -31,6 +31,10 @@ ADD_JS_FILES = [
     'dashboard/project/data_processing/js/data_processing.job_launching.js'
 ]
 
+ADD_SCSS_FILES = [
+    'dashboard/project/data_processing/css/jobs.scss'
+]
+
 ADD_EXCEPTIONS = {
     'recoverable': exceptions.RECOVERABLE
 }