Replace embedded static files with XStatic-*

Remove embedded js, add reference in settings,
add requirement xstatic libs.

Change-Id: I07685dfbde7c96c5b8da7e93af291df16c3b8bad
Depends-On: https://review.opendev.org/712744
Story: #2004051

requirements.txt

@@ -11,8 +11,14 @@ XStatic-Angular>=1.5.8.0 # MIT License
 XStatic-Angular-Bootstrap>=2.2.0.0 # MIT License
 XStatic-Bootstrap-Datepicker>=1.3.1.0 # Apache 2.0 License
 XStatic-Bootstrap-SCSS>=3.3.7.1 # Apache 2.0 License
+XStatic-Dagre>=0.6.4.0 # MIT License
+XStatic-Dagre-D3>=0.4.17.0 # MIT License
 XStatic-D3>=3.5.17.0  # BSD License (3 clause)
 XStatic-Font-Awesome>=4.7.0.0 # SIL OFL 1.1 License, MIT License
+XStatic-Graphlib>=1.0.7.0 # MIT License
 XStatic-jQuery>=1.8.2.1 # MIT License
+XStatic-lodash>=4.16.4.1 # MIT License
+XStatic-moment>=2.8.4.1 # MIT License
+XStatic-Moment-Timezone>=0.5.22.0 # MIT License
 XStatic-smart-table>=1.4.13.2 # MIT License
 python-vitrageclient>=2.5.0  # Apache-2.

vitrage_dashboard/admin_alarms/templates/adminalarms/index.html

@@ -12,10 +12,5 @@
     <ng-include src="'{{STATIC_URL}}dashboard/project/alarmList/alarmList.html'"></ng-include>
 </div>
 
-<script src="{{STATIC_URL}}vendor/lodash/lodash.js"></script>
-<script src="{{STATIC_URL}}vendor/graphlib/graphlib.core.js"></script>
-<script src="{{STATIC_URL}}vendor/dagre/dagre.core.js"></script>
-<script src="{{STATIC_URL}}vendor/dagre-d3/dagre-d3.core.js"></script>
-
 {% endblock %}
 

vitrage_dashboard/admin_dashboard/templates/admintopology/index.html

@@ -14,10 +14,5 @@
     <ng-include src="'{{STATIC_URL}}dashboard/project/layout/main/main.html'"></ng-include>
 </div>
 
-<script src="{{STATIC_URL}}vendor/lodash/lodash.js"></script>
-<script src="{{STATIC_URL}}vendor/graphlib/graphlib.core.js"></script>
-<script src="{{STATIC_URL}}vendor/dagre/dagre.core.js"></script>
-<script src="{{STATIC_URL}}vendor/dagre-d3/dagre-d3.core.js"></script>
-
 {% endblock %}
 

vitrage_dashboard/admin_entities/templates/adminentities/index.html

@@ -12,11 +12,6 @@
     <ng-include src="'{{STATIC_URL}}dashboard/project/entities/entities.html'"></ng-include>
 </div>
 
-<script src="{{STATIC_URL}}vendor/lodash/lodash.js"></script>
-<script src="{{STATIC_URL}}vendor/graphlib/graphlib.core.js"></script>
-<script src="{{STATIC_URL}}vendor/dagre/dagre.core.js"></script>
-<script src="{{STATIC_URL}}vendor/dagre-d3/dagre-d3.core.js"></script>
-
 <!--<div ng-cloak ng-init='init({{ TOPOLOGY_VITRAGE_SETTINGS }})'>-->
     <!--<ng-include src="'{{STATIC_URL}}dashboard/project/layout/system-health.html'"></ng-include>-->
 <!--</div>-->

vitrage_dashboard/admin_templates/templates/admintemplates/index.html

@@ -12,8 +12,5 @@
     <ng-include src="'{{STATIC_URL}}dashboard/project/templateList/templateList.html'"></ng-include>
 </div>
 
-<script src="{{STATIC_URL}}vendor/moment/moment.js"></script>
-<script src="{{STATIC_URL}}vendor/moment_timezone_with_data/moment-timezone-with-data-2012-2022.js"></script>
-
 {% endblock %}
 

vitrage_dashboard/alarms/templates/alarms/index.html

@@ -12,10 +12,5 @@
     <ng-include src="'{{STATIC_URL}}dashboard/project/alarmList/alarmList.html'"></ng-include>
 </div>
 
-<script src="{{STATIC_URL}}vendor/lodash/lodash.js"></script>
-<script src="{{STATIC_URL}}vendor/graphlib/graphlib.core.js"></script>
-<script src="{{STATIC_URL}}vendor/dagre/dagre.core.js"></script>
-<script src="{{STATIC_URL}}vendor/dagre-d3/dagre-d3.core.js"></script>
-
 {% endblock %}
 

vitrage_dashboard/dashboard/templates/topology/index.html

@@ -16,10 +16,5 @@
     <ng-include src="'{{STATIC_URL}}dashboard/project/layout/main/main.html'"></ng-include>
 </div>
 
-<script src="{{STATIC_URL}}vendor/lodash/lodash.js"></script>
-<script src="{{STATIC_URL}}vendor/graphlib/graphlib.core.js"></script>
-<script src="{{STATIC_URL}}vendor/dagre/dagre.core.js"></script>
-<script src="{{STATIC_URL}}vendor/dagre-d3/dagre-d3.core.js"></script>
-
 {% endblock %}
 

vitrage_dashboard/enabled/_4000_project_vitrage_panel_group.py

@@ -16,3 +16,10 @@ PANEL_GROUP = 'vitrage_panel_group'
 PANEL_GROUP_NAME = 'Vitrage'
 # The name of the dashboard the PANEL_GROUP associated with. Required.
 PANEL_GROUP_DASHBOARD = 'project'
+
+ADD_XSTATIC_MODULES = [
+    ('xstatic.pkg.lodash', ['lodash.js']),
+    ('xstatic.pkg.graphlib', ['graphlib.core.js']),
+    ('xstatic.pkg.dagre', ['dagre.core.js']),
+    ('xstatic.pkg.dagre_d3', ['dagre-d3.core.js']),
+]

vitrage_dashboard/enabled/_4040_project_template_vitrage_panel.py

@@ -25,3 +25,9 @@ ADD_INSTALLED_APPS = ['vitrage_dashboard.templates']
 ADD_ANGULAR_MODULES = ['horizon.dashboard.project.vitrage']
 
 AUTO_DISCOVER_STATIC_FILES = True
+
+ADD_XSTATIC_MODULES = [
+    ('xstatic.pkg.moment', ['moment.min.js']),
+    ('xstatic.pkg.moment_timezone',
+     ['moment-timezone-with-data-2012-2022.js']),
+]

vitrage_dashboard/enabled/_4100_admin_vitrage_panel_group.py

@@ -16,3 +16,10 @@ PANEL_GROUP = 'admin_vitrage_panel_group'
 PANEL_GROUP_NAME = 'Vitrage'
 # The name of the dashboard the PANEL_GROUP associated with. Required.
 PANEL_GROUP_DASHBOARD = 'admin'
+
+ADD_XSTATIC_MODULES = [
+    ('xstatic.pkg.lodash', ['lodash.js']),
+    ('xstatic.pkg.graphlib', ['graphlib.core.js']),
+    ('xstatic.pkg.dagre', ['dagre.core.js']),
+    ('xstatic.pkg.dagre_d3', ['dagre-d3.core.js']),
+]

vitrage_dashboard/enabled/_4140_admin_template_vitrage_panel.py

@@ -25,3 +25,9 @@ ADD_INSTALLED_APPS = ['vitrage_dashboard.admin_templates']
 ADD_ANGULAR_MODULES = ['horizon.dashboard.project.vitrage']
 
 AUTO_DISCOVER_STATIC_FILES = True
+
+ADD_XSTATIC_MODULES = [
+    ('xstatic.pkg.moment', ['moment.min.js']),
+    ('xstatic.pkg.moment_timezone',
+     ['moment-timezone-with-data-2012-2022.js']),
+]

vitrage_dashboard/entities/templates/entities/index.html

@@ -12,11 +12,6 @@
     <ng-include src="'{{STATIC_URL}}dashboard/project/entities/entities.html'"></ng-include>
 </div>
 
-<script src="{{STATIC_URL}}vendor/lodash/lodash.js"></script>
-<script src="{{STATIC_URL}}vendor/graphlib/graphlib.core.js"></script>
-<script src="{{STATIC_URL}}vendor/dagre/dagre.core.js"></script>
-<script src="{{STATIC_URL}}vendor/dagre-d3/dagre-d3.core.js"></script>
-
 <!--<div ng-cloak ng-init='init({{ TOPOLOGY_VITRAGE_SETTINGS }})'>-->
     <!--<ng-include src="'{{STATIC_URL}}dashboard/project/layout/system-health.html'"></ng-include>-->
 <!--</div>-->

vitrage_dashboard/templates/templates/templates/index.html

@@ -12,8 +12,5 @@
     <ng-include src="'{{STATIC_URL}}dashboard/project/templateList/templateList.html'"></ng-include>
 </div>
 
-<script src="{{STATIC_URL}}vendor/moment/moment.js"></script>
-<script src="{{STATIC_URL}}vendor/moment_timezone_with_data/moment-timezone-with-data-2012-2022.js"></script>
-
 {% endblock %}