mxGraphInit.html

	<!-- VueJS Plugins -->
	<script type="text/javascript" src="js/vendor/libs/vue-toastr.min.js"></script>

	<script type="text/javascript" src="js/vendor/deflate/pako.min.js"></script>
	<script type="text/javascript" src="js/vendor/deflate/base64.js"></script>
	<script type="text/javascript" src="js/vendor/jscolor/jscolor.js"></script>
	<script type="text/javascript" src="js/vendor/sanitizer/sanitizer.min.js"></script>

	<!-- mxGraph library extensions -->
	<script type="text/javascript" src="js/vendor/extend/CTAPI.js"></script>
	<script type="text/javascript" src="js/vendor/extend/Utils.js"></script>
	<script type="text/javascript" src="js/vendor/extend/Init.js"></script>

	<!-- mxGraph library -->
	<script type="text/javascript" src="js/vendor/mxgraph/src/js/mxClient.js"></script>

	<script type="text/javascript">

		var vueApp = new Vue({
			el: '#app',
			data: {
				properties: [],
				activeNodeLabel: 'Not Available',
				activeTemplate: 'NA',
				newTemplate: '',
				isNodeSelected: true,
				isGraphEmpty: true,
				isUpdatingTemplate: true,
				isLoadingTemplate: false,
				isToolbarExpanded: true,
				isSidebarExpanded: true,
				doingAPIAction: false,
				deleteTemplateUUID: '',
				topologyStatus: null,
				filteredTopologyStatus: null,
				searchTemplate: '',
				selectedNodeId: -1,
				cluster: {
					status: 'Unprovisioned',
					privacy: false,
					elapsedTime: '00:00:00',
					elapsedTimeFormat: 'DD:MM:SS',
					uuid: null
				},
				isObjectSelected: false,
				modals: {
					showSaveModal: false,
					showDeleteModal: false,
					showListTemplatesModal: false,
					showNewModal: false
				},
				topologyTemplates: []
			},

			components: {
				'vue-toastr': window.vueToastr
			},

			computed: {
				filteredTemplates: function () {
					var self = this;
					return this.topologyTemplates.filter(function (template) {
						return template.name.toLowerCase().indexOf(self.searchTemplate.toLowerCase()) >= 0;
					});
				}
			},

			filters: {
				pipeFilter: function (value) {
					if (!value) return '';
					value = value.toString();
					return (value.indexOf('|') > 0) ? value.substring(0, value.indexOf('|')) : value;
				},

				toCamelCase: function (value) {
					if (!value) return '';
					value = value.toString();
					return value.charAt(0).toUpperCase() + value.slice(1);
				}
			},

			methods: {},

			mounted: function(){
				this.$toastr.defaultPosition = 'toast-bottom-left';
				this.$toastr.timeout = 9000;
				this.autoSaveUpdateTemplate();
			},

			created: function(){
				this.Filters = this.$options.filters;
			}
		});

	</script>

	<script type="text/javascript" src="js/vendor/extend/EditorUi.js"></script>
	<script type="text/javascript" src="js/vendor/extend/Editor.js"></script>
	<script type="text/javascript" src="js/vendor/extend/Subclass.js"></script>
	<script type="text/javascript" src="js/vendor/extend/Sidebar.js"></script>
	<script type="text/javascript" src="js/vendor/extend/Graph.js"></script>
	<script type="text/javascript" src="js/vendor/extend/Actions.js"></script>
	<script type="text/javascript" src="js/vendor/extend/Properties.js"></script>
	<script type="text/javascript" src="js/vendor/extend/Overrides.js"></script>

	<!-- APP specific JS -->
	<script src="js/app.min.js"></script>