diff --git a/.gitignore b/.gitignore
index 2302b6711..7fa64f560 100644
--- a/.gitignore
+++ b/.gitignore
@@ -35,3 +35,5 @@ containers/.oci
 
 containers/oci/*
 !containers/oci/example_config
+
+!okitweb/static/model
diff --git a/CHANGELOG.md b/CHANGELOG.md
index b76339142..df21d92c3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,26 @@
 # Release Notes
 
 
+## Version 0.9.0 
+**Release Date**: 5th August 2020
+### Features
+1. Split Designer View functionality from OKIT Model (OKIT-89).
+2. Update Json associated with the Fragments to conform to new structure and remove non Reference Architecture templates because these are fragments. (OKIT-101).
+3. Check oci config file to identify if the key file exists in the container and if not display error icon with associated click / alert message (OKIT-48 / OKIT-96).
+4. Add preferences option (Hide Attached Artefacts) to indicate if Route Tables / Security List should be displayed as part of the Virtual Cloud Networks as well as an attachment.
+5. Hide Service CIDR when Service Gateway in Route Rule is selected.
+
+### Bug Fixes
+1. Resolve issue with the "description" for Network Security Groups which was being incorrectly rendered in the generated Terraform.
+2. Attached Route Tables / Security List property edits were lost. (OKIT-70).
+3. Resolve issue with the "compartment_id" for Compartment which was being incorrectly rendered in the generated Terraform.
+4. During query AD specific Subnets return Availability Domain as string not integer value, this is now converted (OKIT-105).
+5. Deleting Defined Tags did not remove them from the model (OKIT-106).
+6. Instance OS & Version information not retrieved during Query (OKIT-108).
+7. DRG Ansible template contains '=' not ':' (GitHub Issue #61).
+8. Quotes added to security Ingress / Egress rules (GitHub Issue #65).
+
+
 ## Version 0.8.0 
 **Release Date**: 15th July 2020
 ### Features
diff --git a/README.md b/README.md
index c88c1ad0d..c5f345bd9 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-# OCI Designer Toolkit [0.8.0](CHANGELOG.md#version-0.8.0)
+# OCI Designer Toolkit [0.9.0](CHANGELOG.md#version-0.9.0)
 
 OCI designer toolKIT (OKIT) is a set of tools for enabling design, deploy and visualise OCI environments 
 through a graphical web based interface. 
diff --git a/containers/docker/Dockerfile b/containers/docker/Dockerfile
index 9558fadf0..82021ef37 100644
--- a/containers/docker/Dockerfile
+++ b/containers/docker/Dockerfile
@@ -5,7 +5,7 @@
 FROM oraclelinux:7-slim
 LABEL "provider"="Oracle" \
       "issues"="https://github.com/oracle/oci-designer-toolkit/issues" \
-      "version"="0.8.0" \
+      "version"="0.9.0" \
       "description"="OKIT Web Server Container." \
       "copyright"="Copyright (c) 2020, Oracle and/or its affiliates."
 SHELL ["/bin/bash", "-c"]
@@ -23,27 +23,25 @@ EXPOSE 443
 # Install new yum repos
 RUN yum install -y \
     oracle-softwarecollection-release-el7 \
+    oraclelinux-developer-release-el7 \
 # Update base image
  && yum update -y \
 # Install additional packages
  && yum install -y \
         python36 \
         python3-pip \
+#        python36-pyyaml \
+#        python36-oci-sdk \
+#        rh-nginx114 \
  && rm -rf /var/cache/yum \
 # Upgrade pip
  && python3 -m pip install --upgrade pip==20.0.2 \
 # Install required python modules
  && pip3 install --no-cache-dir \
-        click==7.0 \
         flask==1.1.1 \
         gunicorn==20.0.4 \
-        itsdangerous==1.1.0 \
-        jinja2==2.10.3 \
-        markupsafe==1.1.1 \
         oci==2.6.0 \
         pyyaml==5.2 \
-        werkzeug==0.16.0 \
-        cryptography==2.8 \
 # Create Workspace
  && mkdir -p /okit/{config,log,visualiser,okitweb,workspace}
 # Copy source code
@@ -51,6 +49,5 @@ COPY okitweb /okit/okitweb
 COPY visualiser /okit/visualiser
 COPY containers/oci/* /root/.oci/
 # Add entrypoint to automatically start webserver
-#ENTRYPOINT gunicorn --workers=2 --limit-request-line 0 --bind=0.0.0.0:80 okitweb.wsgi:app
 ENTRYPOINT ["gunicorn"]
 CMD ["--workers=4", "--limit-request-line", "0", "--timeout", "120", "--bind=0.0.0.0:80", "okitweb.wsgi:app"]
diff --git a/documentation/Development.md b/documentation/Development.md
index ee53acb4f..c40bccb1c 100644
--- a/documentation/Development.md
+++ b/documentation/Development.md
@@ -36,7 +36,7 @@ to the system.
 - New Files
     - Frontend
         - **[Palette SVG](#palette-svg)**                             : [okitweb/static/okit/palette/storage/*Block_Storage_Volume*.svg](../okitweb/static/okit/palette/storage/Block_Storage_Volume.svg)
-        - **[Artifact Javascript](#artifact-javascript)**             : [okitweb/static/okit/js/oci_artefacts/*block_storage_volume*.js](../okitweb/static/okit/js/oci_artefacts/block_storage_volume.js)
+        - **[Artifact Model Javascript](#artifact-javascript)**       : [okitweb/static/okit/model/js/artefacts/*block_storage_volume*.js](../okitweb/static/okit/model/js/artefacts/block_storage_volume.js)
         - **[Properties HTML](#properties-html)**                     : [okitweb/templates/okit/propertysheets/*block_storage_volume*.html](../okitweb/templates/okit/propertysheets/block_storage_volume.html)
     - Backend
         - **[Python OCI Facade](#python-oci-facade)**                 : [visualiser/facades/oci*BlockStorageVolume*.py](../visualiser/facades/ociBlockStorageVolume.py)
@@ -62,7 +62,7 @@ file name will be manipulated (removing the underscore) and used to dynamically
 
 ## Palette SVG
 The palette svg defines the icon that will be displayed in the Drag & Drop palette. A number of existing SVG files can be
-downloaded from the confluence page [OCI Icon Set draw.io Stencils](https://confluence.oci.oraclecorp.com/pages/viewpage.action?spaceKey=~scross&title=OCI+Icon+Set+draw.io+Stencils).
+downloaded from the confluence page OCI Icon Set draw.io Stencils.
 
 One key requirement for this svg file is that all elements that draw the icon be contained within an "g" tag. The reason
 for this is that the common javascript svg display routine will look for this and extract it to use as the definition for
@@ -88,32 +88,22 @@ the icon. Hence the Block Storage Volume would look like the following
 Although the svg will display in the palette image without the "g" it will cause the designer to fail later if it is missing.
 
 ## Artifact Javascript
-The artifact javascript file is the key files for the BUI specifying all core code for the creation, drawing and querying 
+When creating an Artefact you will need to define two artefact specific files that provide the Model Definition and the associated Designer View
+functionality. The artifact javascript files are the key files for the BUI specifying all core code for the creation, drawing and querying 
 of the artifact. Each file has a standard set of variable definitions and function definitions which again are based on 
-the name of the artifact as follows. To add an artifact to the OKIT BUI you should copy the okit_template_artifact.js to 
-the "oci_artefacts" subdirectory and name it appropriately (In out example that would be block_storage_volume.js).
+the name of the artifact as follows. 
 
-Once the file has been copied to the oci_artefacts directory then is can be opened and the following global Find/Replace modification applied:
+All the example code in the following sections will be based on the **Block Storage Volume** Artefact.
 
-1. 'Okit Template Artifact' replaced by 'Artifact Name' - in our example this would be 'Block Storage Volume'.
-2. 'OkitTemplateArtifact' replaced by 'ArtifactName' - in our example this would be 'BlockStorageVolume'.
-3. 'template_artifact' replaced by 'artifact_name' - in our example this would be 'block_storage_volume'.
-4. 'parent_type_id' replaced by the id field associated with the parent container - in our example this would be 'compartment_id'.
-5. 'parent_type_list' replace by the okitJson list element corresponding to the parent - in our example this would be 'compartments'.
+### Artefact Model
+The Model javascript will be located in [okitweb/static/okit/model/js/artefacts](../okitweb/static/okit/model/js/artefacts) 
+directory and contains the definition of the Artefact and all properties will be in a structured format. Before fixing your
+model check the structure return from an OCI SDK Query of the Artefact.
 
-### Standard Definitions
-```javascript
-console.log('Loaded Block Storage Javascript');
-
-const block_storage_volume_query_cb = "block-storage-volume-query-cb";
-```
-Within this section we will define the target artifact where the new artifact can be dropped. For example the **Block Storage Volume** can be dropped on the *Compartment*. 
-
-### Class Definition
+#### Class Definition
 Each artifact is described by a JavaScript class inherited from the **OkitArtifact** Class and has a number of standard 
 methods associated with the class. for the majority of these you will not need to modify the code because the underlying
-super class will do all the work. If you are creating a new container then you will need to modify the class definition 
-to inherit from **OkitContainerArtifact** class.
+super class will do all the work. 
 
 The following will list the methods that need modification.
 
@@ -122,15 +112,15 @@ The following will list the methods that need modification.
     /*
     ** Create
      */
-    constructor (data={}, okitjson={}, parent=null) {
+    constructor (data={}, okitjson={}) {
         super(okitjson);
-        this.parent_id = data.parent_id;
         // Configure default values
         this.display_name = this.generateDefaultName(okitjson.block_storage_volumes.length + 1);
         this.compartment_id = data.parent_id;
         this.availability_domain = '1';
         this.size_in_gbs = 1024;
         this.backup_policy = 'bronze';
+        this.vpus_per_gb = '10';
         // Update with any passed data
         this.merge(data);
         this.convert();
@@ -139,15 +129,11 @@ The following will list the methods that need modification.
             this.region_availability_domain = this.availability_domain;
             this.availability_domain = this.region_availability_domain.slice(-1);
         }
-        // Add Get Parent function
-        if (parent !== null) {
-            this.getParent = () => {return parent};
-        }
     }
 ```
 This function is used to create a new json element to the OKIT json structure. The elements within this json will match those 
 that are returned from querying OCI. All artifacts will be contained within a top level list with a name that matches that
-of the artifact (e.g. block_storage_volumes). Once that new json element has been added it will be drawn on the SVG canvas.
+of the artifact (e.g. block_storage_volumes). Once that new json element has been added it will be drawn on the SVG canvas using an appropriate View class.
 
 #### Delete Children
 ```javascript
@@ -168,26 +154,11 @@ of the artifact (e.g. block_storage_volumes). Once that new json element has bee
 Although the main **delete** method will not need modifying the **deleteChildren** will need modification to remove any 
 references within linked artifacts or actual children in the case of a container.
 
-#### Artifact Dimensions
-```javascript
-    // Return Artifact Dimensions
-    getDimensions() {
-        console.groupCollapsed('Getting Dimensions of ' + this.getArtifactReference() + ' : ' + this.id);
-        let dimensions = this.getMinimumDimensions();
-        // Calculate Size based on Child Artifacts
-        // Check size against minimum
-        dimensions.width  = Math.max(dimensions.width,  this.getMinimumDimensions().width);
-        dimensions.height = Math.max(dimensions.height, this.getMinimumDimensions().height);
-        console.info('Overall Dimensions       : ' + JSON.stringify(dimensions));
-        console.groupEnd();
-        return dimensions;
-    }
-
-    getMinimumDimensions() {
-        return {width: icon_width, height:icon_height};
-    }
-```
+### Artefact View
+The Model javascript will be located in [okitweb/static/okit/view/designer/js/artefacts](../okitweb/static/okit/view/designer/js/artefacts) 
+directory and contains the definition of the SVG representation for the Artefact.
 
+#### Artifact Dimensions
 The function is used to calculate the dimensions of the artifact and will be called by container function to determine 
 how much space to reserve for drawing this artifact. If you are building a container artifact (e.g. subnet) then this
 function will call the dimensions function for all contained artifacts to calculate it's dimensions.
@@ -195,40 +166,26 @@ function will call the dimensions function for all contained artifacts to calcul
 #### Draw
 ```javascript
     draw() {
-        console.groupCollapsed('Drawing ' + this.getArtifactReference() + ' : ' + this.id + ' [' + this.parent_id + ']');
-        if (this.isAttached()) {
-            console.groupEnd();
-            return;
+        console.group('Drawing ' + this.getArtifactReference() + ' : ' + this.id + ' [' + this.parent_id + ']');
+        console.info(`Hide Attached : ${okitSettings.hide_attached}.`)
+        console.info(`Is Attached   : ${this.attached}.`)
+        if (!okitSettings.hide_attached || !this.attached) {
+            console.info(`${this.display_name} is either not attached and we are displaying attached`);
+            let svg = super.draw();
         }
-        let svg = drawArtifact(this.getSvgDefinition());
-        /*
-        ** Add Properties Load Event to created svg. We require the definition of the local variable "me" so that it can
-        ** be used in the function dur to the fact that using "this" in the function will refer to the function not the
-        ** Artifact.
-         */
-        let me = this;
-        svg.on("click", function() {
-            me.loadProperties();
-            d3.event.stopPropagation();
-        });
         console.groupEnd();
-        return svg;
     }
 
     // Return Artifact Specific Definition.
     getSvgDefinition() {
-        console.groupCollapsed('Getting Definition of ' + this.getArtifactReference() + ' : ' + this.id);
         let definition = this.newSVGDefinition(this, this.getArtifactReference());
-        let dimensions = this.getDimensions();
         let first_child = this.getParent().getChildOffset(this.getArtifactReference());
         definition['svg']['x'] = first_child.dx;
         definition['svg']['y'] = first_child.dy;
-        definition['svg']['width'] = dimensions['width'];
-        definition['svg']['height'] = dimensions['height'];
+        definition['svg']['width'] = this.dimensions['width'];
+        definition['svg']['height'] = this.dimensions['height'];
         definition['rect']['stroke']['colour'] = stroke_colours.bark;
         definition['rect']['stroke']['dash'] = 1;
-        console.info(JSON.stringify(definition, null, 2));
-        console.groupEnd();
         return definition;
     }
 ``` 
@@ -256,33 +213,76 @@ properties sheet into the "properties" pane and then load each of the form field
 json element. This method will only need modification if the properties sheet needs to select references of other artifacts. 
 For an example of this see the Subnet class which will load Route Table and security list information.
 
-### Query OCI
+### OkitJsonView
+To enable the Drag & Drop / Creation functionality you will need to modify the [okitweb/static/okit/view/js/okit_view.js](../okitweb/static/okit/view/js/okit_view.js) 
+adding 
+```javascript
+    // Block Storage
+    dropBlockStorageVolumeView(target) {
+        console.info('Drop Block Storage Volume View');
+        console.info(target);
+        let view_artefact = this.newBlockStorageVolume();
+        view_artefact.getArtefact().compartment_id = target.id;
+        console.info('View Artefact');
+        console.info(view_artefact)
+        return view_artefact;
+    }
+    newBlockStorageVolume(volume) {
+        this.block_storage_volumes.push(volume ? new BlockStorageVolumeView(volume, this) : new BlockStorageVolumeView(this.okitjson.newBlockStorageVolume(), this));
+        return this.block_storage_volumes[this.block_storage_volumes.length - 1];
+    }
+    getBlockStorageVolumes() {
+        return this.block_storage_volumes;
+    }
+    getBlockStorageVolume(id='') {
+        for (let artefact of this.getBlockStorageVolumes()) {
+            if (artefact.id === id) {
+                return artefact;
+            }
+        }
+        return undefined;
+    }
+    deleteBlockStorageVolume(id='') {
+        this.okitjson.deleteBlockStorageVolume(id);
+        this.update();
+    }
+    loadBlockStorageVolumes(block_storage_volumes) {
+        for (const artefact of block_storage_volumes) {
+            this.block_storage_volumes.push(new BlockStorageVolumeView(new BlockStorageVolume(artefact, this.okitjson), this));
+        }
+    }
+```
+
+### OkitOCIQuery
+To enable query functionality the [okitweb/static/okit/query/oci/js/okit_query.js](../okitweb/static/okit/query/oci/js/okit_query.js) will
+need to be modified to provide a new function to query the Artefact and an appropriate call from it's parent should be added.
+
 ```javascript
-    static query(request = {}, region='') {
+    queryBlockStorageVolumes(request) {
         console.info('------------- Block Storage Volume Query --------------------');
         console.info('------------- Compartment : ' + request.compartment_id);
         let me = this;
+        this.region_query_count[request.region]++;
         $.ajax({
             type: 'get',
-            url: 'oci/artifacts/BlockStorageVolume',
+            url: 'oci/artefacts/BlockStorageVolume',
             dataType: 'text',
             contentType: 'application/json',
             data: JSON.stringify(request),
             success: function(resp) {
                 let response_json = JSON.parse(resp);
-                regionOkitJson[region].load({block_storage_volumes: response_json});
-                for (let artifact of response_json) {
-                    console.info(me.getArtifactReference() + ' Query : ' + artifact.display_name);
+                regionOkitJson[request.region].load({block_storage_volumes: response_json});
+                //okitJsonView.loadBlockStorageVolumes(response_json);
+                for (let artefact of response_json) {
+                    console.info(artefact.display_name);
                 }
-                redrawSVGCanvas(region);
-                $('#' + block_storage_volume_query_cb).prop('checked', true);
-                hideQueryProgressIfComplete();
+                if (request.refresh) {okitJsonView.draw();}
+                me.region_query_count[request.region]-- && me.isComplete();
             },
             error: function(xhr, status, error) {
                 console.info('Status : ' + status)
                 console.info('Error : ' + error)
-                $('#' + block_storage_volume_query_cb).prop('checked', true);
-                hideQueryProgressIfComplete();
+                me.region_query_count[request.region]-- && me.isComplete();
             }
         });
     }
@@ -290,33 +290,6 @@ For an example of this see the Subnet class which will load Route Table and secu
 Uses Ajax to call the flask url to initiate an asynchronous query of OCI to retrieve all artifacts and then redraw the 
 svg canvas. On completion it will set the query progress for this artifact as complete.
 
-### Ready Function
-```javascript
-$(document).ready(function() {
-    // Setup Search Checkbox
-    let body = d3.select('#query-progress-tbody');
-    let row = body.append('tr');
-    let cell = row.append('td');
-    cell.append('input')
-        .attr('type', 'checkbox')
-        .attr('id', block_storage_volume_query_cb);
-    cell.append('label').text(BlockStorageVolume.getArtifactReference());
-
-    // Setup Query Display Form
-    body = d3.select('#query-oci-tbody');
-    row = body.append('tr');
-    cell = row.append('td')
-        .text(BlockStorageVolume.getArtifactReference());
-    cell = row.append('td');
-    let input = cell.append('input')
-        .attr('type', 'text')
-        .attr('class', 'query-filter')
-        .attr('id', 'block_storage_volume_name_filter')
-        .attr('name', 'block_storage_volume_name_filter');
-});
-```
-Add the query checkbox to the query progress table.
-
 ## Properties HTML
 The properties html is a simple piece of html that displays the properties associated with the artifact and as a minimum
 all required properties must be displayed. The htmi 'id' and 'name' attributes of the input will match the property they
diff --git a/documentation/Installation.md b/documentation/Installation.md
index f4a1bcca0..bad76e208 100644
--- a/documentation/Installation.md
+++ b/documentation/Installation.md
@@ -22,22 +22,22 @@ python modules are installed and in addition provide a simple flask server that
 ## Clone Repository
 Before the building either the Docker or Vagrant Images the project will nee to be cloned from the Git Repository (or downloaded)
 and it is recommended that the latest Stable Release be cloned. The latest stable version number if shown in the README
-and the associated Release tag is in the format vX.Y.Z hence for the version 0.8.0 the Release tag will be 
-**v0.8.0**. The command shows how this can be cloned to the local machine.
+and the associated Release tag is in the format vX.Y.Z hence for the version 0.9.0 the Release tag will be 
+**v0.9.0**. The command shows how this can be cloned to the local machine.
 
 ```bash
-git clone -b v0.8.0 --depth 1 git@github.com:oracle/oci-designer-toolkit.git
+git clone -b v0.9.0 --depth 1 git@github.com:oracle/oci-designer-toolkit.git
 ```
 
 or 
 
 ```bash
-git clone -b v0.8.0 --depth 1 https://github.com/oracle/oci-designer-toolkit.git
+git clone -b v0.9.0 --depth 1 https://github.com/oracle/oci-designer-toolkit.git
 ```
 
 ### Download
 If you do not have git installed locally the current release of OKIT can be retrieved by downloading it as a zip file from
-https://github.com/oracle/oci-designer-toolkit/archive/v0.8.0.zip
+https://github.com/oracle/oci-designer-toolkit/archive/v0.9.0.zip
 
 
 ## OCI Config File
diff --git a/okitweb/okitOci.py b/okitweb/okitOci.py
index 446a69aac..44112ba47 100644
--- a/okitweb/okitOci.py
+++ b/okitweb/okitOci.py
@@ -8,7 +8,7 @@
 # ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~#
 __author__ = ["Andrew Hopkinson (Oracle Cloud Solutions A-Team)"]
 __version__ = "1.0.0"
-__module__ = "okitPriceEstimator"
+__module__ = "okitOci"
 # ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~#
 
 import os
@@ -179,7 +179,7 @@ def ociQuery():
         return '404'
 
 
-@bp.route('/artifacts/<string:artifact>', methods=(['GET']))
+@bp.route('/artefacts/<string:artifact>', methods=(['GET']))
 def ociArtifacts(artifact):
     logger.info('Artifact : {0:s}'.format(str(artifact)))
     query_string = request.query_string
diff --git a/okitweb/okitWebDesigner.py b/okitweb/okitWebDesigner.py
index 5902656ce..b18be60b5 100644
--- a/okitweb/okitWebDesigner.py
+++ b/okitweb/okitWebDesigner.py
@@ -70,6 +70,23 @@ def getConfigFileValue(section, key, config_file='~/.oci/config'):
     config.read(abs_config_file)
     return config[section][key]
 
+def validateConfigFile(config_file='~/.oci/config'):
+    logger.debug('Config File {0!s:s}'.format(config_file))
+    abs_config_file = os.path.expanduser(config_file)
+    logger.debug('Config File {0!s:s}'.format(abs_config_file))
+    config = configparser.ConfigParser()
+    config.read(abs_config_file)
+    results = []
+    if len(config.sections()) == 0:
+        results.append('OCI Connect Config file is either missing or empty.')
+    else:
+        for section in config:
+            key_file = config[section]['key_file']
+            if not os.path.exists(os.path.expanduser(key_file)):
+                results.append('[{0!s:s}] Key File {1!s:s} does not exist.'.format(section, key_file))
+    logger.info(results)
+    return results
+
 #
 # Define Error Handlers
 #
@@ -96,10 +113,10 @@ def handle_exception(error):
 
 @bp.route('/designer', methods=(['GET']))
 def designer():
-    # Read Artifact Specific JavaScript Files
-    oci_assets_js = sorted(os.listdir(os.path.join(bp.static_folder, 'js', 'oci_artefacts')))
+    # Read Artifact Model Specific JavaScript Files
+    artefact_model_js_files = sorted(os.listdir(os.path.join(bp.static_folder, 'model', 'js', 'artefacts')))
     # Read Artifact View Specific JavaScript Files
-    artefact_view_js_files = sorted(os.listdir(os.path.join(bp.static_folder, 'view', 'designer', 'js', 'artefact')))
+    artefact_view_js_files = sorted(os.listdir(os.path.join(bp.static_folder, 'view', 'designer', 'js', 'artefacts')))
 
     # Get Palette Icon Groups / Icons
     svg_files = []
@@ -176,7 +193,7 @@ def designer():
 
     #Render The Template
     return render_template('okit/okit_designer.html',
-                           oci_assets_js=oci_assets_js,
+                           artefact_model_js_files=artefact_model_js_files,
                            artefact_view_js_files=artefact_view_js_files,
                            palette_icon_groups=palette_icon_groups,
                            fragment_icons=fragment_icons,
@@ -278,6 +295,14 @@ def configRegion(section):
     else:
         return 'Unknown Method', 500
 
+@bp.route('config/validate', methods=(['GET']))
+def configValidate():
+    if request.method == 'GET':
+        response = {"results": validateConfigFile()}
+        return response
+    else:
+        return 'Unknown Method', 500
+
 
 @bp.route('validate', methods=(['POST']))
 def validateJson():
diff --git a/okitweb/static/okit/css/okit_console.css b/okitweb/static/okit/css/okit_console.css
index bef3ff0ec..f49724ac6 100644
--- a/okitweb/static/okit/css/okit_console.css
+++ b/okitweb/static/okit/css/okit_console.css
@@ -161,6 +161,21 @@ textarea {
     align-items: center;
 }
 
+.okit-console-header-right {
+    display: block;
+    width: 80px;
+    text-align: right;
+    align-items: end;
+}
+
+.okit-console-header-right > a {
+}
+
+.config-icon {
+    width: 32px;
+    height: 32px;
+}
+
 .okit-console-main {
 }
 
diff --git a/okitweb/static/okit/css/okit_designer.css b/okitweb/static/okit/css/okit_designer.css
index 2fa4802c1..3cc2a56cb 100644
--- a/okitweb/static/okit/css/okit_designer.css
+++ b/okitweb/static/okit/css/okit_designer.css
@@ -294,3 +294,7 @@ rect.highlight {
     stroke-width: 3;
     stroke-dasharray: none;
 }
+
+rect.highlight-vnic {
+    fill: #00cc00;
+}
\ No newline at end of file
diff --git a/okitweb/static/okit/fragments/json/bastion_server.json b/okitweb/static/okit/fragments/json/bastion_server.json
index 0099f292d..6cb2869b3 100644
--- a/okitweb/static/okit/fragments/json/bastion_server.json
+++ b/okitweb/static/okit/fragments/json/bastion_server.json
@@ -1,91 +1,156 @@
 {
-  "title": "Bastion Server",
-  "description": "Bastion Server Fragment.",
+  "title": "OKIT OCI Visualiser Json",
+  "description": "OKIT Generic OCI Json which can be used to generate ansible, terraform, .......",
+  "okit_version": "0.9.0",
   "compartments": [
     {
-      "id": "okit-comp-86396bd7-50e7-4935-8747-6dd507b3ddf9",
-      "name": "okit",
-      "compartment_id": "okit-comp-86396bd7-50e7-4935-8747-6dd507b3ddf9",
-      "parent_id": "canvas",
+      "id": "okit.compartment.49f9e05d-9e95-419c-a7d9-4771935f9f6e",
+      "freeform_tags": {},
+      "defined_tags": {},
+      "compartment_id": null,
+      "name": "okit-comp001",
       "display_name": "okit-comp001"
     }
   ],
   "autonomous_databases": [],
   "block_storage_volumes": [],
+  "containers": [],
+  "database_systems": [],
   "dynamic_routing_gateways": [],
+  "fast_connects": [],
   "file_storage_systems": [],
   "instances": [
     {
-      "subnet_id": "okit-sn-a2cada96-6f11-436e-b4f1-41ee96f739dd",
-      "subnet": "okit-bastion-sn",
-      "compartment_id": "okit-comp-86396bd7-50e7-4935-8747-6dd507b3ddf9",
-      "availability_domain": "1",
-      "id": "okit-in-2f526c6d-3d93-442f-bc15-3d05689406f9",
+      "id": "okit.undefined.00bb10a8-a694-46b7-a461-e19ee26df8c6",
+      "freeform_tags": {},
+      "defined_tags": {},
       "display_name": "okit-bastion-server",
-      "hostname_label": "okit-in001",
-      "os": "Oracle Linux",
-      "version": "7.7",
+      "availability_domain": "1",
+      "compartment_id": "okit.compartment.49f9e05d-9e95-419c-a7d9-4771935f9f6e",
       "shape": "VM.Standard.E2.1",
-      "boot_volume_size_in_gbs": "50",
-      "authorized_keys": "",
-      "cloud_init_yaml": "#cloud-config\nwrite_files:\n  # Add aliases to bash (Note: At time of writing the append flag does not appear to be working)\n  - path: /etc/.bashrc\n    append: true\n    content: |\n      alias lh='ls -lash'\n      alias lt='ls -last'\n      alias env='/usr/bin/env | sort'\n      alias ssh='/usr/bin/ssh -oStrictHostKeyChecking=no -oUserKnownHostsFile=/dev/null -oConnectTimeout=10 -i /etc/ssh/ssh_host_rsa_key '\n\nssh_keys:\n  rsa_private: |\n    -----BEGIN OPENSSH PRIVATE KEY-----\n    Add Private Key\n    -----END OPENSSH PRIVATE KEY-----\n  rsa_public: ssh-rsa Add Public Key\n\nruncmd:\n  # Set Private Key to read everyone\n  - sudo chmod a+r /etc/ssh/ssh_host_rsa_key*\n  # Add additional environment information because append does not appear to work in write_file\n  - sudo bash -c \"echo 'source /etc/.bashrc' >> /etc/bashrc\"\n\nfinal_message: \"**** The Bastion Instance is finally up, after $UPTIME seconds ****\"\n",
+      "fault_domain": "",
+      "agent_config": {
+        "is_monitoring_disabled": false,
+        "is_management_disabled": false
+      },
+      "vnics": [
+        {
+          "subnet_id": "okit.subnet.5ce7287f-3c85-4546-81c4-f456850a2a8d",
+          "hostname_label": "okit-in001",
+          "assign_public_ip": true,
+          "skip_source_dest_check": false,
+          "nsg_ids": []
+        }
+      ],
+      "source_details": {
+        "os": "Oracle Linux",
+        "version": "7.7",
+        "boot_volume_size_in_gbs": "50",
+        "source_type": "image"
+      },
+      "metadata": {
+        "ssh_authorized_keys": "",
+        "user_data": "#cloud-config\nwrite_files:\n  # Add aliases to bash (Note: At time of writing the append flag does not appear to be working)\n  - path: /etc/.bashrc\n    append: true\n    content: |\n      alias lh='ls -lash'\n      alias lt='ls -last'\n      alias env='/usr/bin/env | sort'\n      alias ssh='/usr/bin/ssh -oStrictHostKeyChecking=no -oUserKnownHostsFile=/dev/null -oConnectTimeout=10 -i /etc/ssh/ssh_host_rsa_key '\n\nssh_keys:\n  rsa_private: |\n    -----BEGIN OPENSSH PRIVATE KEY-----\n    Add Private Key\n    -----END OPENSSH PRIVATE KEY-----\n  rsa_public: ssh-rsa Add Public Key\n\nruncmd:\n  # Set Private Key to read everyone\n  - sudo chmod a+r /etc/ssh/ssh_host_rsa_key*\n  # Add additional environment information because append does not appear to work in write_file\n  - sudo bash -c \"echo 'source /etc/.bashrc' >> /etc/bashrc\"\n\nfinal_message: \"**** The Bastion Instance is finally up, after $UPTIME seconds ****\"\n"
+      },
       "block_storage_volume_ids": [],
+      "object_storage_bucket_ids": [],
+      "autonomous_database_ids": [],
+      "preserve_boot_volume": false,
+      "is_pv_encryption_in_transit_enabled": false,
+      "subnet": "okit-bastion-sn",
       "block_storage_volumes": [],
-      "subnet_ids": [],
-      "parent_id": "okit-sn-a2cada96-6f11-436e-b4f1-41ee96f739dd"
+      "primary_vnic": {
+        "subnet_id": "okit.subnet.5ce7287f-3c85-4546-81c4-f456850a2a8d",
+        "hostname_label": "okit-in001",
+        "assign_public_ip": true,
+        "skip_source_dest_check": false,
+        "nsg_ids": []
+      }
     }
   ],
   "internet_gateways": [
     {
-      "vcn_id": "okit-vcn-a4b9e410-9527-43f2-8d46-d953ab1149b7",
-      "virtual_cloud_network": "okit-bastion-vcn",
-      "compartment_id": "okit-comp-86396bd7-50e7-4935-8747-6dd507b3ddf9",
-      "id": "okit-ig-d77f1212-81d7-4524-8927-722904202641",
+      "id": "okit.internetgateway.922b0191-85f9-46a2-8309-9d12de9ec8aa",
+      "freeform_tags": {},
+      "defined_tags": {},
       "display_name": "okit-bastion-ig",
-      "parent_id": "okit-vcn-a4b9e410-9527-43f2-8d46-d953ab1149b7"
+      "compartment_id": "okit.compartment.49f9e05d-9e95-419c-a7d9-4771935f9f6e",
+      "vcn_id": "okit.virtualcloudnetwork.d7bfcd1f-fb58-43fa-99b7-c8271819ace3",
+      "enabled": true,
+      "virtual_cloud_network": "okit-bastion-vcn"
     }
   ],
   "load_balancers": [],
+  "local_peering_gateways": [],
   "nat_gateways": [],
+  "network_security_groups": [],
   "object_storage_buckets": [],
+  "remote_peering_gateways": [],
   "route_tables": [
     {
-      "vcn_id": "okit-vcn-a4b9e410-9527-43f2-8d46-d953ab1149b7",
-      "virtual_cloud_network": "okit-bastion-vcn",
-      "compartment_id": "okit-comp-86396bd7-50e7-4935-8747-6dd507b3ddf9",
-      "id": "okit-rt-0ec379c2-9a1b-4a01-9203-9b5f3cc283c7",
+      "id": "okit.routetable.04fc2d1b-c707-4456-8a0c-30f8507a0624",
+      "freeform_tags": {},
+      "defined_tags": {},
       "display_name": "okit-bastion-rt",
+      "compartment_id": "okit.compartment.49f9e05d-9e95-419c-a7d9-4771935f9f6e",
+      "vcn_id": "okit.virtualcloudnetwork.d7bfcd1f-fb58-43fa-99b7-c8271819ace3",
       "route_rules": [
         {
           "destination_type": "CIDR_BLOCK",
           "destination": "0.0.0.0/0",
-          "network_entity_id": "okit-ig-d77f1212-81d7-4524-8927-722904202641"
+          "network_entity_id": "okit.internetgateway.922b0191-85f9-46a2-8309-9d12de9ec8aa",
+          "target_type": "internet_gateways"
         }
       ],
-      "parent_id": "okit-vcn-a4b9e410-9527-43f2-8d46-d953ab1149b7"
+      "virtual_cloud_network": "okit-bastion-vcn"
     }
   ],
   "security_lists": [
     {
-      "vcn_id": "okit-vcn-a4b9e410-9527-43f2-8d46-d953ab1149b7",
-      "virtual_cloud_network": "okit-bastion-vcn",
-      "compartment_id": "okit-comp-86396bd7-50e7-4935-8747-6dd507b3ddf9",
-      "id": "okit-sl-ff510077-a9af-41be-8fad-f6430c2a7732",
+      "id": "okit.securitylist.6ce13e7b-4609-4f00-b641-7f4a99e6d61f",
+      "freeform_tags": {},
+      "defined_tags": {},
       "display_name": "okit-bastion-sl",
+      "compartment_id": "okit.compartment.49f9e05d-9e95-419c-a7d9-4771935f9f6e",
+      "vcn_id": "okit.virtualcloudnetwork.d7bfcd1f-fb58-43fa-99b7-c8271819ace3",
       "egress_security_rules": [
         {
           "destination": "0.0.0.0/0",
           "destination_type": "CIDR_BLOCK",
-          "icmp_options": null,
+          "icmp_options": {
+            "code": "",
+            "type": ""
+          },
           "is_stateless": false,
           "protocol": "all",
-          "tcp_options": null,
-          "udp_options": null
+          "tcp_options": {
+            "source_port_range": {
+              "min": "",
+              "max": ""
+            },
+            "destination_port_range": {
+              "min": "",
+              "max": ""
+            }
+          },
+          "udp_options": {
+            "source_port_range": {
+              "min": "",
+              "max": ""
+            },
+            "destination_port_range": {
+              "min": "",
+              "max": ""
+            }
+          }
         }
       ],
       "ingress_security_rules": [
         {
-          "icmp_options": null,
+          "icmp_options": {
+            "code": "",
+            "type": ""
+          },
           "is_stateless": false,
           "protocol": "6",
           "source": "0.0.0.0/0",
@@ -95,9 +160,21 @@
               "max": 22,
               "min": 22
             },
-            "source_port_range": null
+            "source_port_range": {
+              "min": "",
+              "max": ""
+            }
           },
-          "udp_options": null
+          "udp_options": {
+            "source_port_range": {
+              "min": "",
+              "max": ""
+            },
+            "destination_port_range": {
+              "min": "",
+              "max": ""
+            }
+          }
         },
         {
           "icmp_options": {
@@ -108,8 +185,26 @@
           "protocol": "1",
           "source": "0.0.0.0/0",
           "source_type": "CIDR_BLOCK",
-          "tcp_options": null,
-          "udp_options": null
+          "tcp_options": {
+            "source_port_range": {
+              "min": "",
+              "max": ""
+            },
+            "destination_port_range": {
+              "min": "",
+              "max": ""
+            }
+          },
+          "udp_options": {
+            "source_port_range": {
+              "min": "",
+              "max": ""
+            },
+            "destination_port_range": {
+              "min": "",
+              "max": ""
+            }
+          }
         },
         {
           "icmp_options": {
@@ -120,41 +215,66 @@
           "protocol": "1",
           "source": "10.0.0.0/16",
           "source_type": "CIDR_BLOCK",
-          "tcp_options": null,
-          "udp_options": null
+          "tcp_options": {
+            "source_port_range": {
+              "min": "",
+              "max": ""
+            },
+            "destination_port_range": {
+              "min": "",
+              "max": ""
+            }
+          },
+          "udp_options": {
+            "source_port_range": {
+              "min": "",
+              "max": ""
+            },
+            "destination_port_range": {
+              "min": "",
+              "max": ""
+            }
+          }
         }
       ],
-      "parent_id": "okit-vcn-a4b9e410-9527-43f2-8d46-d953ab1149b7"
+      "virtual_cloud_network": "okit-bastion-vcn"
     }
   ],
   "service_gateways": [],
   "subnets": [
     {
-      "vcn_id": "okit-vcn-a4b9e410-9527-43f2-8d46-d953ab1149b7",
-      "virtual_cloud_network": "okit-bastion-vcn",
-      "compartment_id": "okit-comp-86396bd7-50e7-4935-8747-6dd507b3ddf9",
-      "id": "okit-sn-a2cada96-6f11-436e-b4f1-41ee96f739dd",
+      "id": "okit.subnet.5ce7287f-3c85-4546-81c4-f456850a2a8d",
+      "freeform_tags": {},
+      "defined_tags": {},
       "display_name": "okit-bastion-sn",
-      "cidr_block": "10.0.0.0/24",
+      "compartment_id": "okit.compartment.49f9e05d-9e95-419c-a7d9-4771935f9f6e",
+      "vcn_id": "okit.virtualcloudnetwork.d7bfcd1f-fb58-43fa-99b7-c8271819ace3",
+      "cidr_block": "10.1.0.0/24",
       "dns_label": "bastionsn",
       "prohibit_public_ip_on_vnic": false,
-      "route_table": "",
-      "route_table_id": "okit-rt-0ec379c2-9a1b-4a01-9203-9b5f3cc283c7",
-      "security_lists": [],
+      "route_table_id": "okit.routetable.04fc2d1b-c707-4456-8a0c-30f8507a0624",
       "security_list_ids": [
-        "okit-sl-ff510077-a9af-41be-8fad-f6430c2a7732"
+        "okit.securitylist.6ce13e7b-4609-4f00-b641-7f4a99e6d61f"
       ],
-      "parent_id": "okit-vcn-a4b9e410-9527-43f2-8d46-d953ab1149b7"
+      "availability_domain": "0",
+      "is_ipv6enabled": false,
+      "ipv6cidr_block": "",
+      "virtual_cloud_network": "okit-bastion-vcn",
+      "route_table": "",
+      "security_lists": []
     }
   ],
   "virtual_cloud_networks": [
     {
-      "compartment_id": "okit-comp-86396bd7-50e7-4935-8747-6dd507b3ddf9",
-      "id": "okit-vcn-a4b9e410-9527-43f2-8d46-d953ab1149b7",
+      "id": "okit.virtualcloudnetwork.d7bfcd1f-fb58-43fa-99b7-c8271819ace3",
+      "freeform_tags": {},
+      "defined_tags": {},
       "display_name": "okit-bastion-vcn",
-      "cidr_block": "10.0.0.0/16",
+      "compartment_id": "okit.compartment.49f9e05d-9e95-419c-a7d9-4771935f9f6e",
+      "cidr_block": "10.1.0.0/16",
       "dns_label": "bastionvcn",
-      "parent_id": "okit-comp-86396bd7-50e7-4935-8747-6dd507b3ddf9"
+      "is_ipv6enabled": false,
+      "ipv6cidr_block": ""
     }
   ]
 }
\ No newline at end of file
diff --git a/okitweb/static/okit/fragments/json/load_balanced_nginx.json b/okitweb/static/okit/fragments/json/load_balanced_nginx.json
index 94830d419..b0ea42341 100644
--- a/okitweb/static/okit/fragments/json/load_balanced_nginx.json
+++ b/okitweb/static/okit/fragments/json/load_balanced_nginx.json
@@ -1,203 +1,406 @@
 {
-  "title": "Load Balanced Nginx Instances",
-  "description": "Four load balanced nginx servers",
+  "title": "OKIT OCI Visualiser Json",
+  "description": "OKIT Generic OCI Json which can be used to generate ansible, terraform, .......",
+  "okit_version": "0.9.0",
   "compartments": [
     {
-      "id": "okit-comp-94636a16-5595-4a4b-b819-6aff3bee6536",
-      "name": "okit",
-      "parent_id": "canvas",
-      "compartment_id": "okit-comp-94636a16-5595-4a4b-b819-6aff3bee6536",
+      "id": "okit.compartment.87b90aa7-4c56-4800-b4d7-e404b89c6ceb",
+      "freeform_tags": {},
+      "defined_tags": {},
+      "compartment_id": null,
+      "name": "okit-comp001",
       "display_name": "okit-comp001"
     }
   ],
-  "open_compartment_index": 0,
-  "virtual_cloud_networks": [
-    {
-      "compartment_id": "okit-comp-94636a16-5595-4a4b-b819-6aff3bee6536",
-      "id": "okit-vcn-dcb74d63-9ae8-44c5-9913-1ba70e11d2b8",
-      "display_name": "okit-vcn001",
-      "cidr_block": "10.0.0.0/16",
-      "dns_label": "vcn001",
-      "parent_id": "okit-comp-94636a16-5595-4a4b-b819-6aff3bee6536"
-    }
-  ],
-  "subnets": [
-    {
-      "vcn_id": "okit-vcn-dcb74d63-9ae8-44c5-9913-1ba70e11d2b8",
-      "virtual_cloud_network": "okit-vcn001",
-      "compartment_id": "okit-comp-94636a16-5595-4a4b-b819-6aff3bee6536",
-      "id": "okit-sn-e8536648-721d-473f-828e-e6cfaa5c59eb",
-      "display_name": "okit-sn001",
-      "cidr_block": "10.0.0.0/24",
-      "dns_label": "sn001",
-      "prohibit_public_ip_on_vnic": false,
-      "route_table": "",
-      "route_table_id": "okit-rt-9634a102-9de8-4d3a-8124-821f036e0ac0",
-      "security_lists": [],
-      "security_list_ids": [
-        "okit-sl-912892db-b457-441e-b2c1-9ef9691154d2"
-      ],
-      "parent_id": "okit-vcn-dcb74d63-9ae8-44c5-9913-1ba70e11d2b8"
-    }
-  ],
-  "route_tables": [
-    {
-      "vcn_id": "okit-vcn-dcb74d63-9ae8-44c5-9913-1ba70e11d2b8",
-      "virtual_cloud_network": "okit-vcn001",
-      "compartment_id": "okit-comp-94636a16-5595-4a4b-b819-6aff3bee6536",
-      "id": "okit-rt-9634a102-9de8-4d3a-8124-821f036e0ac0",
-      "display_name": "okit-rt001",
-      "route_rules": [
-        {
-          "destination_type": "CIDR_BLOCK",
-          "destination": "0.0.0.0/0",
-          "network_entity_id": "okit-ig-9b4a5d64-9346-4c7f-a97a-a0c323500224"
-        }
-      ],
-      "parent_id": "okit-vcn-dcb74d63-9ae8-44c5-9913-1ba70e11d2b8"
-    }
-  ],
-  "security_lists": [
-    {
-      "vcn_id": "okit-vcn-dcb74d63-9ae8-44c5-9913-1ba70e11d2b8",
-      "virtual_cloud_network": "okit-vcn001",
-      "compartment_id": "okit-comp-94636a16-5595-4a4b-b819-6aff3bee6536",
-      "id": "okit-sl-912892db-b457-441e-b2c1-9ef9691154d2",
-      "display_name": "okit-sl001",
-      "egress_security_rules": [
-        {
-          "protocol": "all",
-          "is_stateless": false,
-          "destination_type": "CIDR_BLOCK",
-          "destination": "0.0.0.0/0"
-        }
-      ],
-      "ingress_security_rules": [
-        {
-          "protocol": "all",
-          "is_stateless": false,
-          "source_type": "CIDR_BLOCK",
-          "source": "0.0.0.0/0"
-        }
-      ],
-      "parent_id": "okit-vcn-dcb74d63-9ae8-44c5-9913-1ba70e11d2b8"
-    }
-  ],
+  "autonomous_databases": [],
+  "block_storage_volumes": [],
+  "containers": [],
+  "database_systems": [],
+  "dynamic_routing_gateways": [],
+  "fast_connects": [],
+  "file_storage_systems": [],
   "instances": [
     {
-      "subnet_id": "okit-sn-e8536648-721d-473f-828e-e6cfaa5c59eb",
-      "subnet": "okit-sn001",
-      "compartment_id": "okit-comp-94636a16-5595-4a4b-b819-6aff3bee6536",
+      "id": "okit.undefined.db39f276-9616-47db-8008-d7510e65a41e",
+      "freeform_tags": {},
+      "defined_tags": {},
+      "display_name": "nginx-server-01",
       "availability_domain": "1",
-      "id": "okit-in-ee74310b-457b-4b18-b566-ae7351a17d7a",
-      "display_name": "okit-in001",
-      "hostname_label": "okit-in001",
-      "os": "Oracle Linux",
-      "version": "7.7",
+      "compartment_id": "okit.compartment.87b90aa7-4c56-4800-b4d7-e404b89c6ceb",
       "shape": "VM.Standard2.1",
-      "boot_volume_size_in_gbs": "50",
-      "authorized_keys": "",
-      "cloud_init_yaml": "#cloud-config\npackages:\n  - nginx\n  - oci-utils\n  - python36\n  - python-oci-cli\n\nwrite_files:\n  # Add aliases to bash (Note: At time of writing the append flag does not appear to be working)\n  - path: /etc/.bashrc\n    append: true\n    content: |\n      alias lh='ls -lash'\n      alias lt='ls -last'\n      alias env='/usr/bin/env | sort'\n      alias whatsmyip='curl -X GET https://www.whatismyip.net | grep ipaddress'\n  # Create nginx index.html\n  - path: /usr/share/nginx/html/index1.html\n    permissions: '0644'\n    content: |\n      <html>\n      <head>\n      <title>OCI Loadbalancer backend {hostname}</title>\n      <meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\" />\n      <meta http-equiv=\"refresh\" content=\"10\" />\n      <style>\n      body {\n      background-image: url(\"bg.jpg\");\n      background-repeat: no-repeat;\n      background-size: contain;\n      background-position: center;\n      }\n      h1 {\n      text-align: center;\n      width: 100%;\n      }\n      </style>\n      </head>\n      <body>\n      <h1>OCI Regional Subnet Loadbalancer Backend {hostname}</h1>\n      </body>\n      </html>\n\nruncmd:\n  # Enable nginx\n  - sudo systemctl enable nginx.service\n  - sudo cp -v /usr/share/nginx/html/index1.html /usr/share/nginx/html/index.html\n  - sudo sed -i \"s/{hostname}/$(hostname)/g\" /usr/share/nginx/html/index.html\n  - sudo systemctl start nginx.service\n  # Set Firewall Rules\n  - sudo firewall-offline-cmd  --add-port=80/tcp\n  - sudo systemctl restart firewalld\n  # Add additional environment information because append does not appear to work in write_file\n  - sudo bash -c \"echo 'source /etc/.bashrc' >> /etc/bashrc\"\n\nfinal_message: \"**** The system is finally up, after $UPTIME seconds ****\"\n",
+      "fault_domain": "",
+      "agent_config": {
+        "is_monitoring_disabled": false,
+        "is_management_disabled": false
+      },
+      "vnics": [
+        {
+          "subnet_id": "okit.undefined.d3967bc6-40e8-42d3-adaf-9c5f374bca0b",
+          "hostname_label": "nginx001",
+          "assign_public_ip": true,
+          "skip_source_dest_check": false,
+          "nsg_ids": []
+        }
+      ],
+      "source_details": {
+        "os": "Oracle Linux",
+        "version": "7.7",
+        "boot_volume_size_in_gbs": "50",
+        "source_type": "image"
+      },
+      "metadata": {
+        "ssh_authorized_keys": "",
+        "user_data": "#cloud-config\npackages:\n  - nginx\n  - oci-utils\n  - python36\n  - python-oci-cli\n\nwrite_files:\n  # Add aliases to bash (Note: At time of writing the append flag does not appear to be working)\n  - path: /etc/.bashrc\n    append: true\n    content: |\n      alias lh='ls -lash'\n      alias lt='ls -last'\n      alias env='/usr/bin/env | sort'\n      alias whatsmyip='curl -X GET https://www.whatismyip.net | grep ipaddress'\n  # Create nginx index.html\n  - path: /usr/share/nginx/html/index1.html\n    permissions: '0644'\n    content: |\n      <html>\n      <head>\n      <title>OCI Loadbalancer backend {hostname}</title>\n      <meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\" />\n      <meta http-equiv=\"refresh\" content=\"10\" />\n      <style>\n      body {\n      background-image: url(\"bg.jpg\");\n      background-repeat: no-repeat;\n      background-size: contain;\n      background-position: center;\n      }\n      h1 {\n      text-align: center;\n      width: 100%;\n      }\n      </style>\n      </head>\n      <body>\n      <h1>OCI Regional Subnet Loadbalancer Backend {hostname}</h1>\n      </body>\n      </html>\n\nruncmd:\n  # Enable nginx\n  - sudo systemctl enable nginx.service\n  - sudo cp -v /usr/share/nginx/html/index1.html /usr/share/nginx/html/index.html\n  - sudo sed -i \"s/{hostname}/$(hostname)/g\" /usr/share/nginx/html/index.html\n  - sudo systemctl start nginx.service\n  # Set Firewall Rules\n  - sudo firewall-offline-cmd  --add-port=80/tcp\n  - sudo systemctl restart firewalld\n  # Add additional environment information because append does not appear to work in write_file\n  - sudo bash -c \"echo 'source /etc/.bashrc' >> /etc/bashrc\"\n\nfinal_message: \"**** The system is finally up, after $UPTIME seconds ****\"\n"
+      },
       "block_storage_volume_ids": [],
+      "object_storage_bucket_ids": [],
+      "autonomous_database_ids": [],
+      "preserve_boot_volume": false,
+      "is_pv_encryption_in_transit_enabled": false,
+      "subnet": "okit-sn001",
       "block_storage_volumes": [],
-      "parent_id": "okit-sn-e8536648-721d-473f-828e-e6cfaa5c59eb",
       "virtual_cloud_network": "okit-sn001",
-      "subnet_ids": []
+      "primary_vnic": {
+        "subnet_id": "okit.undefined.d3967bc6-40e8-42d3-adaf-9c5f374bca0b",
+        "hostname_label": "nginx001",
+        "assign_public_ip": true,
+        "skip_source_dest_check": false,
+        "nsg_ids": []
+      },
+      "name": "nginx-server-01"
     },
     {
-      "subnet_id": "okit-sn-e8536648-721d-473f-828e-e6cfaa5c59eb",
-      "subnet": "okit-sn001",
-      "compartment_id": "okit-comp-94636a16-5595-4a4b-b819-6aff3bee6536",
+      "id": "okit.undefined.00e1e3e6-edf0-4102-ab24-8a47e749c5ea",
+      "freeform_tags": {},
+      "defined_tags": {},
+      "display_name": "nginx-server-02",
       "availability_domain": "1",
-      "id": "okit-in-6ce3195d-7119-4666-8966-6555874819a8",
-      "display_name": "okit-in002",
-      "hostname_label": "okit-in002",
-      "os": "Oracle Linux",
-      "version": "7.7",
+      "compartment_id": "okit.compartment.87b90aa7-4c56-4800-b4d7-e404b89c6ceb",
       "shape": "VM.Standard.E2.1",
-      "boot_volume_size_in_gbs": "50",
-      "authorized_keys": "",
-      "cloud_init_yaml": "#cloud-config\npackages:\n  - nginx\n  - oci-utils\n  - python36\n  - python-oci-cli\n\nwrite_files:\n  # Add aliases to bash (Note: At time of writing the append flag does not appear to be working)\n  - path: /etc/.bashrc\n    append: true\n    content: |\n      alias lh='ls -lash'\n      alias lt='ls -last'\n      alias env='/usr/bin/env | sort'\n      alias whatsmyip='curl -X GET https://www.whatismyip.net | grep ipaddress'\n  # Create nginx index.html\n  - path: /usr/share/nginx/html/index1.html\n    permissions: '0644'\n    content: |\n      <html>\n      <head>\n      <title>OCI Loadbalancer backend {hostname}</title>\n      <meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\" />\n      <meta http-equiv=\"refresh\" content=\"10\" />\n      <style>\n      body {\n      background-image: url(\"bg.jpg\");\n      background-repeat: no-repeat;\n      background-size: contain;\n      background-position: center;\n      }\n      h1 {\n      text-align: center;\n      width: 100%;\n      }\n      </style>\n      </head>\n      <body>\n      <h1>OCI Regional Subnet Loadbalancer Backend {hostname}</h1>\n      </body>\n      </html>\n\nruncmd:\n  # Enable nginx\n  - sudo systemctl enable nginx.service\n  - sudo cp -v /usr/share/nginx/html/index1.html /usr/share/nginx/html/index.html\n  - sudo sed -i \"s/{hostname}/$(hostname)/g\" /usr/share/nginx/html/index.html\n  - sudo systemctl start nginx.service\n  # Set Firewall Rules\n  - sudo firewall-offline-cmd  --add-port=80/tcp\n  - sudo systemctl restart firewalld\n  # Add additional environment information because append does not appear to work in write_file\n  - sudo bash -c \"echo 'source /etc/.bashrc' >> /etc/bashrc\"\n\nfinal_message: \"**** The system is finally up, after $UPTIME seconds ****\"\n",
+      "fault_domain": "",
+      "agent_config": {
+        "is_monitoring_disabled": false,
+        "is_management_disabled": false
+      },
+      "vnics": [
+        {
+          "subnet_id": "okit.undefined.d3967bc6-40e8-42d3-adaf-9c5f374bca0b",
+          "hostname_label": "nginx002",
+          "assign_public_ip": true,
+          "skip_source_dest_check": false,
+          "nsg_ids": []
+        }
+      ],
+      "source_details": {
+        "os": "Oracle Linux",
+        "version": "7.7",
+        "boot_volume_size_in_gbs": "50",
+        "source_type": "image"
+      },
+      "metadata": {
+        "ssh_authorized_keys": "",
+        "user_data": "#cloud-config\npackages:\n  - nginx\n  - oci-utils\n  - python36\n  - python-oci-cli\n\nwrite_files:\n  # Add aliases to bash (Note: At time of writing the append flag does not appear to be working)\n  - path: /etc/.bashrc\n    append: true\n    content: |\n      alias lh='ls -lash'\n      alias lt='ls -last'\n      alias env='/usr/bin/env | sort'\n      alias whatsmyip='curl -X GET https://www.whatismyip.net | grep ipaddress'\n  # Create nginx index.html\n  - path: /usr/share/nginx/html/index1.html\n    permissions: '0644'\n    content: |\n      <html>\n      <head>\n      <title>OCI Loadbalancer backend {hostname}</title>\n      <meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\" />\n      <meta http-equiv=\"refresh\" content=\"10\" />\n      <style>\n      body {\n      background-image: url(\"bg.jpg\");\n      background-repeat: no-repeat;\n      background-size: contain;\n      background-position: center;\n      }\n      h1 {\n      text-align: center;\n      width: 100%;\n      }\n      </style>\n      </head>\n      <body>\n      <h1>OCI Regional Subnet Loadbalancer Backend {hostname}</h1>\n      </body>\n      </html>\n\nruncmd:\n  # Enable nginx\n  - sudo systemctl enable nginx.service\n  - sudo cp -v /usr/share/nginx/html/index1.html /usr/share/nginx/html/index.html\n  - sudo sed -i \"s/{hostname}/$(hostname)/g\" /usr/share/nginx/html/index.html\n  - sudo systemctl start nginx.service\n  # Set Firewall Rules\n  - sudo firewall-offline-cmd  --add-port=80/tcp\n  - sudo systemctl restart firewalld\n  # Add additional environment information because append does not appear to work in write_file\n  - sudo bash -c \"echo 'source /etc/.bashrc' >> /etc/bashrc\"\n\nfinal_message: \"**** The system is finally up, after $UPTIME seconds ****\"\n"
+      },
       "block_storage_volume_ids": [],
+      "object_storage_bucket_ids": [],
+      "autonomous_database_ids": [],
+      "preserve_boot_volume": false,
+      "is_pv_encryption_in_transit_enabled": false,
+      "subnet": "okit-sn001",
       "block_storage_volumes": [],
-      "parent_id": "okit-sn-e8536648-721d-473f-828e-e6cfaa5c59eb",
       "virtual_cloud_network": "okit-sn001",
-      "subnet_ids": []
+      "primary_vnic": {
+        "subnet_id": "okit.undefined.d3967bc6-40e8-42d3-adaf-9c5f374bca0b",
+        "hostname_label": "nginx002",
+        "assign_public_ip": true,
+        "skip_source_dest_check": false,
+        "nsg_ids": []
+      },
+      "name": "nginx-server-02"
     },
     {
-      "subnet_id": "okit-sn-e8536648-721d-473f-828e-e6cfaa5c59eb",
-      "subnet": "okit-sn001",
-      "compartment_id": "okit-comp-94636a16-5595-4a4b-b819-6aff3bee6536",
+      "id": "okit.undefined.933abf36-5c79-44b8-9b5a-d2f544b7d9f4",
+      "freeform_tags": {},
+      "defined_tags": {},
+      "display_name": "nginx-server-03",
       "availability_domain": "1",
-      "id": "okit-in-2195d4b3-07bc-4a57-a06b-627cf69b8c46",
-      "display_name": "okit-in003",
-      "hostname_label": "okit-in003",
-      "os": "Oracle Linux",
-      "version": "7.7",
+      "compartment_id": "okit.compartment.87b90aa7-4c56-4800-b4d7-e404b89c6ceb",
       "shape": "VM.Standard.E2.1",
-      "boot_volume_size_in_gbs": "50",
-      "authorized_keys": "",
-      "cloud_init_yaml": "#cloud-config\npackages:\n  - nginx\n  - oci-utils\n  - python36\n  - python-oci-cli\n\nwrite_files:\n  # Add aliases to bash (Note: At time of writing the append flag does not appear to be working)\n  - path: /etc/.bashrc\n    append: true\n    content: |\n      alias lh='ls -lash'\n      alias lt='ls -last'\n      alias env='/usr/bin/env | sort'\n      alias whatsmyip='curl -X GET https://www.whatismyip.net | grep ipaddress'\n  # Create nginx index.html\n  - path: /usr/share/nginx/html/index1.html\n    permissions: '0644'\n    content: |\n      <html>\n      <head>\n      <title>OCI Loadbalancer backend {hostname}</title>\n      <meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\" />\n      <meta http-equiv=\"refresh\" content=\"10\" />\n      <style>\n      body {\n      background-image: url(\"bg.jpg\");\n      background-repeat: no-repeat;\n      background-size: contain;\n      background-position: center;\n      }\n      h1 {\n      text-align: center;\n      width: 100%;\n      }\n      </style>\n      </head>\n      <body>\n      <h1>OCI Regional Subnet Loadbalancer Backend {hostname}</h1>\n      </body>\n      </html>\n\nruncmd:\n  # Enable nginx\n  - sudo systemctl enable nginx.service\n  - sudo cp -v /usr/share/nginx/html/index1.html /usr/share/nginx/html/index.html\n  - sudo sed -i \"s/{hostname}/$(hostname)/g\" /usr/share/nginx/html/index.html\n  - sudo systemctl start nginx.service\n  # Set Firewall Rules\n  - sudo firewall-offline-cmd  --add-port=80/tcp\n  - sudo systemctl restart firewalld\n  # Add additional environment information because append does not appear to work in write_file\n  - sudo bash -c \"echo 'source /etc/.bashrc' >> /etc/bashrc\"\n\nfinal_message: \"**** The system is finally up, after $UPTIME seconds ****\"\n",
+      "fault_domain": "",
+      "agent_config": {
+        "is_monitoring_disabled": false,
+        "is_management_disabled": false
+      },
+      "vnics": [
+        {
+          "subnet_id": "okit.undefined.d3967bc6-40e8-42d3-adaf-9c5f374bca0b",
+          "hostname_label": "nginx003",
+          "assign_public_ip": true,
+          "skip_source_dest_check": false,
+          "nsg_ids": []
+        }
+      ],
+      "source_details": {
+        "os": "Oracle Linux",
+        "version": "7.7",
+        "boot_volume_size_in_gbs": "50",
+        "source_type": "image"
+      },
+      "metadata": {
+        "ssh_authorized_keys": "",
+        "user_data": "#cloud-config\npackages:\n  - nginx\n  - oci-utils\n  - python36\n  - python-oci-cli\n\nwrite_files:\n  # Add aliases to bash (Note: At time of writing the append flag does not appear to be working)\n  - path: /etc/.bashrc\n    append: true\n    content: |\n      alias lh='ls -lash'\n      alias lt='ls -last'\n      alias env='/usr/bin/env | sort'\n      alias whatsmyip='curl -X GET https://www.whatismyip.net | grep ipaddress'\n  # Create nginx index.html\n  - path: /usr/share/nginx/html/index1.html\n    permissions: '0644'\n    content: |\n      <html>\n      <head>\n      <title>OCI Loadbalancer backend {hostname}</title>\n      <meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\" />\n      <meta http-equiv=\"refresh\" content=\"10\" />\n      <style>\n      body {\n      background-image: url(\"bg.jpg\");\n      background-repeat: no-repeat;\n      background-size: contain;\n      background-position: center;\n      }\n      h1 {\n      text-align: center;\n      width: 100%;\n      }\n      </style>\n      </head>\n      <body>\n      <h1>OCI Regional Subnet Loadbalancer Backend {hostname}</h1>\n      </body>\n      </html>\n\nruncmd:\n  # Enable nginx\n  - sudo systemctl enable nginx.service\n  - sudo cp -v /usr/share/nginx/html/index1.html /usr/share/nginx/html/index.html\n  - sudo sed -i \"s/{hostname}/$(hostname)/g\" /usr/share/nginx/html/index.html\n  - sudo systemctl start nginx.service\n  # Set Firewall Rules\n  - sudo firewall-offline-cmd  --add-port=80/tcp\n  - sudo systemctl restart firewalld\n  # Add additional environment information because append does not appear to work in write_file\n  - sudo bash -c \"echo 'source /etc/.bashrc' >> /etc/bashrc\"\n\nfinal_message: \"**** The system is finally up, after $UPTIME seconds ****\"\n"
+      },
       "block_storage_volume_ids": [],
+      "object_storage_bucket_ids": [],
+      "autonomous_database_ids": [],
+      "preserve_boot_volume": false,
+      "is_pv_encryption_in_transit_enabled": false,
+      "subnet": "okit-sn001",
       "block_storage_volumes": [],
-      "parent_id": "okit-sn-e8536648-721d-473f-828e-e6cfaa5c59eb",
       "virtual_cloud_network": "okit-sn001",
-      "subnet_ids": []
+      "primary_vnic": {
+        "subnet_id": "okit.undefined.d3967bc6-40e8-42d3-adaf-9c5f374bca0b",
+        "hostname_label": "nginx003",
+        "assign_public_ip": true,
+        "skip_source_dest_check": false,
+        "nsg_ids": []
+      },
+      "name": "nginx-server-03"
     },
     {
-      "subnet_id": "okit-sn-e8536648-721d-473f-828e-e6cfaa5c59eb",
-      "subnet": "okit-sn001",
-      "compartment_id": "okit-comp-94636a16-5595-4a4b-b819-6aff3bee6536",
+      "id": "okit.undefined.6152088d-4dbb-4d52-bf7c-9c0a2efb5f5d",
+      "freeform_tags": {},
+      "defined_tags": {},
+      "display_name": "nginx-server-04",
       "availability_domain": "1",
-      "id": "okit-in-f59e4c4c-012f-45de-a81a-8772131f1df1",
-      "display_name": "okit-in004",
-      "hostname_label": "okit-in004",
-      "os": "Oracle Linux",
-      "version": "7.7",
+      "compartment_id": "okit.compartment.87b90aa7-4c56-4800-b4d7-e404b89c6ceb",
       "shape": "VM.Standard.E2.1",
-      "boot_volume_size_in_gbs": "50",
-      "authorized_keys": "",
-      "cloud_init_yaml": "#cloud-config\npackages:\n  - nginx\n  - oci-utils\n  - python36\n  - python-oci-cli\n\nwrite_files:\n  # Add aliases to bash (Note: At time of writing the append flag does not appear to be working)\n  - path: /etc/.bashrc\n    append: true\n    content: |\n      alias lh='ls -lash'\n      alias lt='ls -last'\n      alias env='/usr/bin/env | sort'\n      alias whatsmyip='curl -X GET https://www.whatismyip.net | grep ipaddress'\n  # Create nginx index.html\n  - path: /usr/share/nginx/html/index1.html\n    permissions: '0644'\n    content: |\n      <html>\n      <head>\n      <title>OCI Loadbalancer backend {hostname}</title>\n      <meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\" />\n      <meta http-equiv=\"refresh\" content=\"10\" />\n      <style>\n      body {\n      background-image: url(\"bg.jpg\");\n      background-repeat: no-repeat;\n      background-size: contain;\n      background-position: center;\n      }\n      h1 {\n      text-align: center;\n      width: 100%;\n      }\n      </style>\n      </head>\n      <body>\n      <h1>OCI Regional Subnet Loadbalancer Backend {hostname}</h1>\n      </body>\n      </html>\n\nruncmd:\n  # Enable nginx\n  - sudo systemctl enable nginx.service\n  - sudo cp -v /usr/share/nginx/html/index1.html /usr/share/nginx/html/index.html\n  - sudo sed -i \"s/{hostname}/$(hostname)/g\" /usr/share/nginx/html/index.html\n  - sudo systemctl start nginx.service\n  # Set Firewall Rules\n  - sudo firewall-offline-cmd  --add-port=80/tcp\n  - sudo systemctl restart firewalld\n  # Add additional environment information because append does not appear to work in write_file\n  - sudo bash -c \"echo 'source /etc/.bashrc' >> /etc/bashrc\"\n\nfinal_message: \"**** The system is finally up, after $UPTIME seconds ****\"\n",
+      "fault_domain": "",
+      "agent_config": {
+        "is_monitoring_disabled": false,
+        "is_management_disabled": false
+      },
+      "vnics": [
+        {
+          "subnet_id": "okit.undefined.d3967bc6-40e8-42d3-adaf-9c5f374bca0b",
+          "hostname_label": "nginx004",
+          "assign_public_ip": true,
+          "skip_source_dest_check": false,
+          "nsg_ids": []
+        }
+      ],
+      "source_details": {
+        "os": "Oracle Linux",
+        "version": "7.7",
+        "boot_volume_size_in_gbs": "50",
+        "source_type": "image"
+      },
+      "metadata": {
+        "ssh_authorized_keys": "",
+        "user_data": "#cloud-config\npackages:\n  - nginx\n  - oci-utils\n  - python36\n  - python-oci-cli\n\nwrite_files:\n  # Add aliases to bash (Note: At time of writing the append flag does not appear to be working)\n  - path: /etc/.bashrc\n    append: true\n    content: |\n      alias lh='ls -lash'\n      alias lt='ls -last'\n      alias env='/usr/bin/env | sort'\n      alias whatsmyip='curl -X GET https://www.whatismyip.net | grep ipaddress'\n  # Create nginx index.html\n  - path: /usr/share/nginx/html/index1.html\n    permissions: '0644'\n    content: |\n      <html>\n      <head>\n      <title>OCI Loadbalancer backend {hostname}</title>\n      <meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\" />\n      <meta http-equiv=\"refresh\" content=\"10\" />\n      <style>\n      body {\n      background-image: url(\"bg.jpg\");\n      background-repeat: no-repeat;\n      background-size: contain;\n      background-position: center;\n      }\n      h1 {\n      text-align: center;\n      width: 100%;\n      }\n      </style>\n      </head>\n      <body>\n      <h1>OCI Regional Subnet Loadbalancer Backend {hostname}</h1>\n      </body>\n      </html>\n\nruncmd:\n  # Enable nginx\n  - sudo systemctl enable nginx.service\n  - sudo cp -v /usr/share/nginx/html/index1.html /usr/share/nginx/html/index.html\n  - sudo sed -i \"s/{hostname}/$(hostname)/g\" /usr/share/nginx/html/index.html\n  - sudo systemctl start nginx.service\n  # Set Firewall Rules\n  - sudo firewall-offline-cmd  --add-port=80/tcp\n  - sudo systemctl restart firewalld\n  # Add additional environment information because append does not appear to work in write_file\n  - sudo bash -c \"echo 'source /etc/.bashrc' >> /etc/bashrc\"\n\nfinal_message: \"**** The system is finally up, after $UPTIME seconds ****\"\n"
+      },
       "block_storage_volume_ids": [],
+      "object_storage_bucket_ids": [],
+      "autonomous_database_ids": [],
+      "preserve_boot_volume": false,
+      "is_pv_encryption_in_transit_enabled": false,
+      "subnet": "okit-sn001",
       "block_storage_volumes": [],
-      "parent_id": "okit-sn-e8536648-721d-473f-828e-e6cfaa5c59eb",
       "virtual_cloud_network": "okit-sn001",
-      "subnet_ids": []
+      "primary_vnic": {
+        "subnet_id": "okit.undefined.d3967bc6-40e8-42d3-adaf-9c5f374bca0b",
+        "hostname_label": "nginx004",
+        "assign_public_ip": true,
+        "skip_source_dest_check": false,
+        "nsg_ids": []
+      },
+      "name": "nginx-server-04"
+    }
+  ],
+  "internet_gateways": [
+    {
+      "id": "okit.undefined.5aa22dc1-f626-4b67-800b-8c22ae549d05",
+      "freeform_tags": {},
+      "defined_tags": {},
+      "display_name": "okit-ig001",
+      "compartment_id": "okit.compartment.87b90aa7-4c56-4800-b4d7-e404b89c6ceb",
+      "vcn_id": "okit.undefined.3e3f1f86-16f6-4433-963f-b52d70ba2452",
+      "enabled": true,
+      "virtual_cloud_network": "okit-vcn001"
     }
   ],
   "load_balancers": [
     {
+      "id": "okit.undefined.a63bb5a1-197e-4050-bb6c-351f04fdd0c9",
+      "freeform_tags": {},
+      "defined_tags": {},
+      "display_name": "okit-lb001",
+      "compartment_id": "okit.compartment.87b90aa7-4c56-4800-b4d7-e404b89c6ceb",
       "subnet_ids": [
-        "okit-sn-e8536648-721d-473f-828e-e6cfaa5c59eb"
+        "okit.undefined.d3967bc6-40e8-42d3-adaf-9c5f374bca0b"
+      ],
+      "is_private": false,
+      "shape": "100Mbps",
+      "protocol": "HTTP",
+      "port": "80",
+      "instance_ids": [
+        "okit.undefined.db39f276-9616-47db-8008-d7510e65a41e",
+        "okit.undefined.00e1e3e6-edf0-4102-ab24-8a47e749c5ea",
+        "okit.undefined.933abf36-5c79-44b8-9b5a-d2f544b7d9f4",
+        "okit.undefined.6152088d-4dbb-4d52-bf7c-9c0a2efb5f5d"
       ],
+      "ip_mode": "",
+      "network_security_group_ids": [],
+      "backend_policy": "ROUND_ROBIN",
+      "health_checker": {
+        "url_path": "/"
+      },
       "subnets": [
         ""
       ],
-      "compartment_id": "okit-comp-94636a16-5595-4a4b-b819-6aff3bee6536",
-      "id": "okit-lb-95c8b99f-3c7b-4e7a-94e8-a4622788f1fa",
-      "display_name": "okit-lb001",
-      "is_private": false,
-      "shape_name": "100Mbps",
       "instances": [],
-      "instance_ids": [
-        "okit-in-ee74310b-457b-4b18-b566-ae7351a17d7a",
-        "okit-in-6ce3195d-7119-4666-8966-6555874819a8",
-        "okit-in-2195d4b3-07bc-4a57-a06b-627cf69b8c46",
-        "okit-in-f59e4c4c-012f-45de-a81a-8772131f1df1"
-      ],
-      "parent_id": "okit-sn-e8536648-721d-473f-828e-e6cfaa5c59eb",
+      "parent_id": "okit.undefined.d3967bc6-40e8-42d3-adaf-9c5f374bca0b",
       "virtual_cloud_network": "okit-sn001"
     }
   ],
-  "internet_gateways": [
+  "local_peering_gateways": [],
+  "nat_gateways": [],
+  "network_security_groups": [],
+  "object_storage_buckets": [],
+  "remote_peering_gateways": [],
+  "route_tables": [
     {
-      "vcn_id": "okit-vcn-dcb74d63-9ae8-44c5-9913-1ba70e11d2b8",
+      "id": "okit.undefined.ed178ac3-df4d-4a84-a17a-f18dab229e63",
+      "freeform_tags": {},
+      "defined_tags": {},
+      "display_name": "okit-lb-rt",
+      "compartment_id": "okit.compartment.87b90aa7-4c56-4800-b4d7-e404b89c6ceb",
+      "vcn_id": "okit.undefined.3e3f1f86-16f6-4433-963f-b52d70ba2452",
+      "route_rules": [
+        {
+          "destination_type": "CIDR_BLOCK",
+          "destination": "0.0.0.0/0",
+          "network_entity_id": "okit.undefined.5aa22dc1-f626-4b67-800b-8c22ae549d05",
+          "target_type": "internet_gateways"
+        }
+      ],
       "virtual_cloud_network": "okit-vcn001",
-      "compartment_id": "okit-comp-94636a16-5595-4a4b-b819-6aff3bee6536",
-      "id": "okit-ig-9b4a5d64-9346-4c7f-a97a-a0c323500224",
-      "display_name": "okit-ig001",
-      "parent_id": "okit-vcn-dcb74d63-9ae8-44c5-9913-1ba70e11d2b8"
+      "name": "okit-lb-rt"
     }
   ],
-  "block_storage_volumes": []
+  "security_lists": [
+    {
+      "id": "okit.undefined.a9285860-6743-44fb-bd1e-b5cff6e19fad",
+      "freeform_tags": {},
+      "defined_tags": {},
+      "display_name": "okit-lb-sl",
+      "compartment_id": "okit.compartment.87b90aa7-4c56-4800-b4d7-e404b89c6ceb",
+      "vcn_id": "okit.undefined.3e3f1f86-16f6-4433-963f-b52d70ba2452",
+      "egress_security_rules": [
+        {
+          "protocol": "all",
+          "is_stateless": false,
+          "destination_type": "CIDR_BLOCK",
+          "destination": "0.0.0.0/0",
+          "tcp_options": {
+            "source_port_range": {
+              "min": "",
+              "max": ""
+            },
+            "destination_port_range": {
+              "min": "",
+              "max": ""
+            }
+          },
+          "udp_options": {
+            "source_port_range": {
+              "min": "",
+              "max": ""
+            },
+            "destination_port_range": {
+              "min": "",
+              "max": ""
+            }
+          },
+          "icmp_options": {
+            "code": "",
+            "type": ""
+          }
+        }
+      ],
+      "ingress_security_rules": [
+        {
+          "protocol": "all",
+          "is_stateless": false,
+          "source_type": "CIDR_BLOCK",
+          "source": "0.0.0.0/0",
+          "tcp_options": {
+            "source_port_range": {
+              "min": "",
+              "max": ""
+            },
+            "destination_port_range": {
+              "min": "",
+              "max": ""
+            }
+          },
+          "udp_options": {
+            "source_port_range": {
+              "min": "",
+              "max": ""
+            },
+            "destination_port_range": {
+              "min": "",
+              "max": ""
+            }
+          },
+          "icmp_options": {
+            "code": "",
+            "type": ""
+          }
+        }
+      ],
+      "virtual_cloud_network": "okit-vcn001",
+      "name": "okit-lb-sl"
+    }
+  ],
+  "service_gateways": [],
+  "subnets": [
+    {
+      "id": "okit.undefined.d3967bc6-40e8-42d3-adaf-9c5f374bca0b",
+      "freeform_tags": {},
+      "defined_tags": {},
+      "display_name": "okit-lb-sn",
+      "compartment_id": "okit.compartment.87b90aa7-4c56-4800-b4d7-e404b89c6ceb",
+      "vcn_id": "okit.undefined.3e3f1f86-16f6-4433-963f-b52d70ba2452",
+      "cidr_block": "10.2.0.0/24",
+      "dns_label": "sn001",
+      "prohibit_public_ip_on_vnic": false,
+      "route_table_id": "okit.undefined.ed178ac3-df4d-4a84-a17a-f18dab229e63",
+      "security_list_ids": [
+        "okit.undefined.a9285860-6743-44fb-bd1e-b5cff6e19fad"
+      ],
+      "availability_domain": "0",
+      "is_ipv6enabled": false,
+      "ipv6cidr_block": "",
+      "virtual_cloud_network": "okit-vcn001",
+      "route_table": "",
+      "security_lists": [],
+      "name": "okit-lb-sn"
+    }
+  ],
+  "virtual_cloud_networks": [
+    {
+      "id": "okit.undefined.3e3f1f86-16f6-4433-963f-b52d70ba2452",
+      "freeform_tags": {},
+      "defined_tags": {},
+      "display_name": "okit-lb-vcn",
+      "compartment_id": "okit.compartment.87b90aa7-4c56-4800-b4d7-e404b89c6ceb",
+      "cidr_block": "10.2.0.0/16",
+      "dns_label": "vcn001",
+      "is_ipv6enabled": false,
+      "ipv6cidr_block": "",
+      "name": "okit-lb-vcn"
+    }
+  ]
 }
\ No newline at end of file
diff --git a/okitweb/static/okit/js/oci_artefacts/autonomous_database.js b/okitweb/static/okit/js/oci_artefacts/autonomous_database.js
deleted file mode 100644
index 3ea6e137a..000000000
--- a/okitweb/static/okit/js/oci_artefacts/autonomous_database.js
+++ /dev/null
@@ -1,247 +0,0 @@
-/*
-** Copyright (c) 2020, Oracle and/or its affiliates.
-** Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl.
-*/
-console.info('Loaded Autonomous Database Javascript');
-
-const autonomous_database_query_cb = "autonomous-database-query-cb";
-
-/*
-** Define Autonomous Database Class
- */
-class AutonomousDatabase extends OkitArtifact {
-    /*
-    ** Create
-     */
-    constructor (data={}, okitjson={}, parent=null) {
-        super(okitjson);
-        this.parent_id = data.parent_id;
-        // Configure default values
-        this.display_name = this.generateDefaultName(okitjson.autonomous_databases.length + 1);
-        this.compartment_id = data.parent_id;
-        this.db_name = this.display_name.replace('-', '');
-        this.admin_password = generatePassword();
-        this.data_storage_size_in_tbs = 1;
-        this.cpu_core_count = 1;
-        this.db_workload = 'OLTP';
-        this.is_auto_scaling_enabled = true;
-        this.is_free_tier = false;
-        this.license_model = 'BRING_YOUR_OWN_LICENSE';
-        // Update with any passed data
-        this.merge(data);
-        this.convert();
-        // Add Get Parent function
-        if (parent !== null) {
-            this.getParent = () => {return parent};
-        }
-    }
-
-
-    /*
-    ** Clone Functionality
-     */
-    clone() {
-        return new AutonomousDatabase(this, this.getOkitJson());
-    }
-
-
-    /*
-    ** Delete Processing
-     */
-    deleteChildren() {
-        // Remove Instance references
-        for (let instance of this.getOkitJson().instances) {
-            for (let i=0; i < instance['autonomous_database_ids'].length; i++) {
-                if (instance.autonomous_database_ids[i] === this.id) {
-                    instance.autonomous_database_ids.splice(i, 1);
-                }
-            }
-        }
-    }
-
-
-    /*
-     ** SVG Processing
-     */
-    draw() {
-        console.groupCollapsed('Drawing ' + this.getArtifactReference() + ' : ' + this.id + ' [' + this.parent_id + ']');
-        if (this.isAttached()) {
-            console.groupEnd();
-            return;
-        }
-        let svg = super.draw();
-        /*
-        ** Add Properties Load Event to created svg. We require the definition of the local variable "me" so that it can
-        ** be used in the function dur to the fact that using "this" in the function will refer to the function not the
-        ** Artifact.
-         */
-        // Get Inner Rect to attach Connectors
-        let rect = svg.select("rect[id='" + safeId(this.id) + "']");
-        let boundingClientRect = rect.node().getBoundingClientRect();
-        // Add Connector Data
-        svg.attr("data-compartment-id", this.compartment_id)
-            .attr("data-connector-start-y", boundingClientRect.y + (boundingClientRect.height / 2))
-            .attr("data-connector-start-x", boundingClientRect.x)
-            .attr("data-connector-end-y", boundingClientRect.y + (boundingClientRect.height / 2))
-            .attr("data-connector-end-x", boundingClientRect.x)
-            .attr("data-connector-id", this.id)
-            .attr("dragable", true)
-            .selectAll("*")
-            .attr("data-connector-start-y", boundingClientRect.y + (boundingClientRect.height / 2))
-            .attr("data-connector-start-x", boundingClientRect.x)
-            .attr("data-connector-end-y", boundingClientRect.y + (boundingClientRect.height / 2))
-            .attr("data-connector-end-x", boundingClientRect.x)
-            .attr("data-connector-id", this.id)
-            .attr("dragable", true);
-        console.groupEnd();
-        return svg;
-    }
-
-    // Return Artifact Specific Definition.
-    getSvgDefinition() {
-        console.groupCollapsed('Getting Definition of ' + this.getArtifactReference() + ' : ' + this.id);
-        let definition = this.newSVGDefinition(this, this.getArtifactReference());
-        let dimensions = this.getDimensions();
-        let first_child = this.getParent().getChildOffset(this.getArtifactReference());
-        definition['svg']['x'] = first_child.dx;
-        definition['svg']['y'] = first_child.dy;
-        definition['svg']['width'] = dimensions['width'];
-        definition['svg']['height'] = dimensions['height'];
-        definition['rect']['stroke']['colour'] = stroke_colours.bark;
-        definition['rect']['stroke']['dash'] = 1;
-        console.info(JSON.stringify(definition, null, 2));
-        console.groupEnd();
-        return definition;
-    }
-
-    // Return Artifact Dimensions
-    getDimensions() {
-        console.groupCollapsed('Getting Dimensions of ' + this.getArtifactReference() + ' : ' + this.id);
-        let dimensions = this.getMinimumDimensions();
-        // Calculate Size based on Child Artifacts
-        // Check size against minimum
-        dimensions.width  = Math.max(dimensions.width,  this.getMinimumDimensions().width);
-        dimensions.height = Math.max(dimensions.height, this.getMinimumDimensions().height);
-        console.info('Overall Dimensions       : ' + JSON.stringify(dimensions));
-        console.groupEnd();
-        return dimensions;
-    }
-
-    getMinimumDimensions() {
-        return {width: icon_width, height:icon_height};
-    }
-
-    isAttached() {
-        for (let instance of this.getOkitJson().instances) {
-            if (instance.autonomous_database_ids.includes(this.id)) {
-                console.info(this.display_name + ' attached to instance '+ instance.display_name);
-                return true;
-            }
-        }
-        return false;
-    }
-
-
-    /*
-    ** Property Sheet Load function
-     */
-    loadProperties() {
-        let okitJson = this.getOkitJson();
-        let me = this;
-        $(jqId(PROPERTIES_PANEL)).load("propertysheets/autonomous_database.html", () => {
-            $('#is_free_tier').on('change', () => {
-                if($('#is_free_tier').is(':checked')) {
-                    $('#license_model').val("LICENSE_INCLUDED");
-                    $('#is_auto_scaling_enabled').prop('checked', false);
-                    $('#license_model').attr('disabled', true);
-                    $('#is_auto_scaling_enabled').attr('disabled', true);
-                } else {
-                    $('#license_model').removeAttr('disabled');
-                    $('#is_auto_scaling_enabled').removeAttr('disabled');
-                }
-            });
-            if (me.is_free_tier) {
-                me.license_model = "LICENSE_INCLUDED";
-                me.is_auto_scaling_enabled =  false;
-                $('#license_model').attr('disabled', true);
-                $('#is_auto_scaling_enabled').attr('disabled', true);
-            }
-            loadPropertiesSheet(me);
-        });
-    }
-
-    loadValueProposition() {
-        $(jqId(VALUE_PROPOSITION_PANEL)).load("valueproposition/autonomous_database.html");
-    }
-
-
-    getNamePrefix() {
-        return super.getNamePrefix() + 'ad';
-    }
-
-    /*
-    ** Static Functionality
-     */
-    static getArtifactReference() {
-        return 'Autonomous Database';
-    }
-
-    static getDropTargets() {
-        return [Compartment.getArtifactReference()];
-    }
-
-    static query(request = {}, region='') {
-        console.info('------------- Autonomous Database Query --------------------');
-        console.info('------------- Compartment : ' + request.compartment_id);
-        let me = this;
-        queryCount++;
-        $.ajax({
-            type: 'get',
-            url: 'oci/artifacts/AutonomousDatabase',
-            dataType: 'text',
-            contentType: 'application/json',
-            data: JSON.stringify(request),
-            success: function(resp) {
-                let response_json = JSON.parse(resp);
-                regionOkitJson[region].load({autonomous_databases: response_json});
-                for (let artifact of response_json) {
-                    console.info(me.getArtifactReference() + ' Query : ' + artifact.display_name);
-                }
-                redrawSVGCanvas(region);
-                $('#' + autonomous_database_query_cb).prop('checked', true);
-                queryCount--;
-                hideQueryProgressIfComplete();
-            },
-            error: function(xhr, status, error) {
-                console.info('Status : ' + status)
-                console.info('Error : ' + error)
-                $('#' + autonomous_database_query_cb).prop('checked', true);
-                queryCount--;
-                hideQueryProgressIfComplete();
-            }
-        });
-    }
-}
-
-$(document).ready(function() {
-    // Setup Search Checkbox
-    let body = d3.select('#query-progress-tbody');
-    let row = body.append('tr');
-    let cell = row.append('td');
-    cell.append('input')
-        .attr('type', 'checkbox')
-        .attr('id', autonomous_database_query_cb);
-    cell.append('label').text(AutonomousDatabase.getArtifactReference());
-
-    // Setup Query Display Form
-    body = d3.select('#query-oci-tbody');
-    row = body.append('tr');
-    cell = row.append('td')
-        .text(AutonomousDatabase.getArtifactReference());
-    cell = row.append('td');
-    let input = cell.append('input')
-        .attr('type', 'text')
-        .attr('class', 'query-filter')
-        .attr('id', 'autonomous_database_name_filter')
-        .attr('name', 'autonomous_database_name_filter');
-});
diff --git a/okitweb/static/okit/js/oci_artefacts/block_storage_volume.js b/okitweb/static/okit/js/oci_artefacts/block_storage_volume.js
deleted file mode 100644
index 1b378d7d7..000000000
--- a/okitweb/static/okit/js/oci_artefacts/block_storage_volume.js
+++ /dev/null
@@ -1,205 +0,0 @@
-/*
-** Copyright (c) 2020, Oracle and/or its affiliates.
-** Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl.
-*/
-console.info('Loaded Block Storage Volume Javascript');
-
-const block_storage_volume_query_cb = "block-storage-volume-query-cb";
-
-/*
-** Define Block Storage Volume Class
- */
-class BlockStorageVolume extends OkitArtifact {
-    /*
-    ** Create
-     */
-    constructor (data={}, okitjson={}, parent=null) {
-        super(okitjson);
-        this.parent_id = data.parent_id;
-        // Configure default values
-        this.display_name = this.generateDefaultName(okitjson.block_storage_volumes.length + 1);
-        this.compartment_id = data.parent_id;
-        this.availability_domain = '1';
-        this.size_in_gbs = 1024;
-        this.backup_policy = 'bronze';
-        this.vpus_per_gb = '10';
-        // Update with any passed data
-        this.merge(data);
-        this.convert();
-        // Check if built from a query
-        if (this.availability_domain.length > 1) {
-            this.region_availability_domain = this.availability_domain;
-            this.availability_domain = this.region_availability_domain.slice(-1);
-        }
-        // Add Get Parent function
-        if (parent !== null) {
-            this.getParent = () => {return parent};
-        }
-    }
-
-
-    /*
-    ** Clone Functionality
-     */
-    clone() {
-        return new BlockStorageVolume(this, this.getOkitJson());
-    }
-
-
-    /*
-    ** Delete Processing
-     */
-    deleteChildren() {
-        // Remove Instance references
-        for (let instance of this.getOkitJson().instances) {
-            for (let i=0; i < instance.block_storage_volume_ids.length; i++) {
-                if (instance.block_storage_volume_ids[i] === this.id) {
-                    instance.block_storage_volume_ids.splice(i, 1);
-                }
-            }
-        }
-    }
-
-
-    /*
-     ** SVG Processing
-     */
-    draw() {
-        console.groupCollapsed('Drawing ' + this.getArtifactReference() + ' : ' + this.id + ' [' + this.parent_id + ']');
-        if (this.isAttached()) {
-            console.groupEnd();
-            return;
-        }
-        let svg = super.draw();
-        console.groupEnd();
-        return svg;
-    }
-
-    // Return Artifact Specific Definition.
-    getSvgDefinition() {
-        console.groupCollapsed('Getting Definition of ' + this.getArtifactReference() + ' : ' + this.id);
-        let definition = this.newSVGDefinition(this, this.getArtifactReference());
-        let dimensions = this.getDimensions();
-        let first_child = this.getParent().getChildOffset(this.getArtifactReference());
-        definition['svg']['x'] = first_child.dx;
-        definition['svg']['y'] = first_child.dy;
-        definition['svg']['width'] = dimensions['width'];
-        definition['svg']['height'] = dimensions['height'];
-        definition['rect']['stroke']['colour'] = stroke_colours.bark;
-        definition['rect']['stroke']['dash'] = 1;
-        console.info(JSON.stringify(definition, null, 2));
-        console.groupEnd();
-        return definition;
-    }
-
-    // Return Artifact Dimensions
-    getDimensions() {
-        console.groupCollapsed('Getting Dimensions of ' + this.getArtifactReference() + ' : ' + this.id);
-        let dimensions = this.getMinimumDimensions();
-        // Calculate Size based on Child Artifacts
-        // Check size against minimum
-        dimensions.width  = Math.max(dimensions.width,  this.getMinimumDimensions().width);
-        dimensions.height = Math.max(dimensions.height, this.getMinimumDimensions().height);
-        console.info('Overall Dimensions       : ' + JSON.stringify(dimensions));
-        console.groupEnd();
-        return dimensions;
-    }
-
-    getMinimumDimensions() {
-        return {width: icon_width, height:icon_height};
-    }
-
-    isAttached() {
-        // Check if this is attached but exclude when parent is the attachment type.
-        if (this.getParent().getArtifactReference() !== Instance.getArtifactReference()) {
-            for (let instance of this.getOkitJson().instances) {
-                if (instance.block_storage_volume_ids.includes(this.id)) {
-                    console.info(this.display_name + ' attached to instance ' + instance.display_name);
-                    return true;
-                }
-            }
-        }
-        return false;
-    }
-
-
-    /*
-    ** Property Sheet Load function
-     */
-    loadProperties() {
-        let okitJson = this.getOkitJson();
-        let me = this;
-        $(jqId(PROPERTIES_PANEL)).load("propertysheets/block_storage_volume.html", () => {loadPropertiesSheet(me);});
-    }
-
-
-    getNamePrefix() {
-        return super.getNamePrefix() + 'bsv';
-    }
-
-    /*
-    ** Static Functionality
-     */
-    static getArtifactReference() {
-        return 'Block Storage Volume';
-    }
-
-    static getDropTargets() {
-        return [Compartment.getArtifactReference()];
-    }
-
-    static query(request = {}, region='') {
-        console.info('------------- Block Storage Volume Query --------------------');
-        console.info('------------- Compartment : ' + request.compartment_id);
-        let me = this;
-        queryCount++;
-        $.ajax({
-            type: 'get',
-            url: 'oci/artifacts/BlockStorageVolume',
-            dataType: 'text',
-            contentType: 'application/json',
-            data: JSON.stringify(request),
-            success: function(resp) {
-                let response_json = JSON.parse(resp);
-                regionOkitJson[region].load({block_storage_volumes: response_json});
-                for (let artifact of response_json) {
-                    console.info(me.getArtifactReference() + ' Query : ' + artifact.display_name);
-                }
-                redrawSVGCanvas(region);
-                $('#' + block_storage_volume_query_cb).prop('checked', true);
-                queryCount--;
-                hideQueryProgressIfComplete();
-            },
-            error: function(xhr, status, error) {
-                console.info('Status : ' + status)
-                console.info('Error : ' + error)
-                $('#' + block_storage_volume_query_cb).prop('checked', true);
-                queryCount--;
-                hideQueryProgressIfComplete();
-            }
-        });
-    }
-}
-
-$(document).ready(function() {
-    // Setup Search Checkbox
-    let body = d3.select('#query-progress-tbody');
-    let row = body.append('tr');
-    let cell = row.append('td');
-    cell.append('input')
-        .attr('type', 'checkbox')
-        .attr('id', block_storage_volume_query_cb);
-    cell.append('label').text(BlockStorageVolume.getArtifactReference());
-
-    // Setup Query Display Form
-    body = d3.select('#query-oci-tbody');
-    row = body.append('tr');
-    cell = row.append('td')
-        .text(BlockStorageVolume.getArtifactReference());
-    cell = row.append('td');
-    let input = cell.append('input')
-        .attr('type', 'text')
-        .attr('class', 'query-filter')
-        .attr('id', 'block_storage_volume_name_filter')
-        .attr('name', 'block_storage_volume_name_filter');
-});
diff --git a/okitweb/static/okit/js/oci_artefacts/compartment.js b/okitweb/static/okit/js/oci_artefacts/compartment.js
deleted file mode 100644
index 83ae61a94..000000000
--- a/okitweb/static/okit/js/oci_artefacts/compartment.js
+++ /dev/null
@@ -1,305 +0,0 @@
-/*
-** Copyright (c) 2020, Oracle and/or its affiliates.
-** Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl.
-*/
-console.info('Loaded Compartment Javascript');
-
-const compartment_query_cb = "compartment-query-cb";
-
-/*
-** Define Compartment Artifact Class
- */
-class Compartment extends OkitContainerArtifact {
-    /*
-    ** Create
-     */
-    constructor (data={}, okitjson={}, parent=null) {
-        super(okitjson);
-        // Configure default values
-        this.parent_id = 'canvas';
-        this.compartment_id = null;
-        this.name = this.generateDefaultName(okitjson.compartments.length + 1);
-        // Update with any passed data
-        this.merge(data);
-        this.convert();
-        this.display_name = this.name;
-        // Add Get Parent function
-        if (parent !== null) {
-            this.getParent = () => {return parent};
-        }
-    }
-
-    /*
-    ** Test If Top Level compartment
-     */
-
-    isTopLevel() {
-        //if (this.compartment_id) {
-        if (this.getParent()) {
-                return false;
-        }
-        return true;
-    }
-
-
-    /*
-    ** Clone Functionality
-     */
-    clone() {
-        return new Compartment(this, this.getOkitJson());
-    }
-
-
-    /*
-    ** Delete Processing
-     */
-    deleteChildren() {
-        console.groupCollapsed('Deleting Children of ' + this.getArtifactReference() + ' : ' + this.display_name);
-        // Remove Compartments
-        this.getOkitJson().compartments = this.getOkitJson().compartments.filter(function(child) {
-            if (child.compartment_id === this.id && child.id !== this.id) {
-                console.info('Deleting ' + child.display_name);
-                child.delete();
-                return false; // So the filter removes the element
-            }
-            return true;
-        }, this);
-        // Virtual Cloud Networks
-        this.getOkitJson().virtual_cloud_networks = this.getOkitJson().virtual_cloud_networks.filter(function(child) {
-            if (child.compartment_id === this.id) {
-                console.info('Deleting ' + child.display_name);
-                child.delete();
-                return false; // So the filter removes the element
-            }
-            return true;
-        }, this);
-        // Block Storage Volumes
-        this.getOkitJson().block_storage_volumes = this.getOkitJson().block_storage_volumes.filter(function(child) {
-            if (child.compartment_id === this.id) {
-                console.info('Deleting ' + child.display_name);
-                child.delete();
-                return false; // So the filter removes the element
-            }
-            return true;
-        }, this);
-        // Object Storage Buckets
-        this.getOkitJson().object_storage_buckets = this.getOkitJson().object_storage_buckets.filter(function(child) {
-            if (child.compartment_id === this.id) {
-                console.info('Deleting ' + child.display_name);
-                child.delete();
-                return false; // So the filter removes the element
-            }
-            return true;
-        }, this);
-        // Autonomous Databases
-        this.getOkitJson().autonomous_databases = this.getOkitJson().autonomous_databases.filter(function(child) {
-            if (child.compartment_id === this.id) {
-                console.info('Deleting ' + child.display_name);
-                child.delete();
-                return false; // So the filter removes the element
-            }
-            return true;
-        }, this);
-        console.groupEnd();
-        // Dynamic Routing Gateways
-        this.getOkitJson().dynamic_routing_gateways = this.getOkitJson().dynamic_routing_gateways.filter(function(child) {
-            if (child.compartment_id === this.id) {
-                console.info('Deleting ' + child.display_name);
-                child.delete();
-                return false; // So the filter removes the element
-            }
-            return true;
-        }, this);
-    }
-
-
-    /*
-     ** SVG Processing
-     */
-    draw() {
-        console.groupCollapsed('Drawing ' + Compartment.getArtifactReference() + ' : ' + this.id);
-        let svg = super.draw();
-        console.groupEnd();
-    }
-
-    getSvgDefinition() {
-        let dimensions = this.getDimensions(this.id);
-        let definition = this.newSVGDefinition(this, Compartment.getArtifactReference());
-        console.info('>>>>>>>> Parent');
-        console.info(this.getParent());
-        if (this.getParent()) {
-            let parent_first_child = this.getParent().getChildOffset(this.getArtifactReference());
-            definition['svg']['x'] = parent_first_child.dx;
-            definition['svg']['y'] = parent_first_child.dy;
-        }
-        definition['svg']['width'] = dimensions['width'];
-        definition['svg']['height'] = dimensions['height'];
-        definition['rect']['stroke']['colour'] = stroke_colours.bark;
-        definition['rect']['stroke']['dash'] = 5;
-        definition['rect']['stroke']['width'] = 2;
-        definition['icon']['x_translation'] = icon_translate_x_start;
-        definition['icon']['y_translation'] = icon_translate_y_start;
-        definition['name']['show'] = true;
-        definition['label']['show'] = true;
-        return definition;
-    }
-
-    getDimensions() {
-        return super.getDimensions('compartment_id');
-    }
-
-    getMinimumDimensions() {
-        // Check if this is the top level container
-        //if (this.id === this.compartment_id) {
-        if (this.isTopLevel()) {
-            return {width: $('#canvas-div').width(), height: $('#canvas-div').height()};
-        } else {
-            return {width: container_artifact_x_padding * 2, height: container_artifact_y_padding * 2};
-        }
-    }
-
-
-    /*
-    ** Property Sheet Load function
-     */
-    loadProperties() {
-        let okitJson = this.getOkitJson();
-        let me = this;
-        $(jqId(PROPERTIES_PANEL)).load("propertysheets/compartment.html", () => {loadPropertiesSheet(me);});
-    }
-
-
-    /*
-    ** Child Type Functions
-     */
-    getTopArtifacts() {
-        return [Instance.getArtifactReference()];
-    }
-
-    getContainerArtifacts() {
-        return [Compartment.getArtifactReference(), VirtualCloudNetwork.getArtifactReference()];
-    }
-
-    getLeftArtifacts() {
-        return [BlockStorageVolume.getArtifactReference()];
-    }
-
-    getRightArtifacts() {
-        return [DynamicRoutingGateway.getArtifactReference(), AutonomousDatabase.getArtifactReference(),
-            ObjectStorageBucket.getArtifactReference(), FastConnect.getArtifactReference()];
-    }
-
-
-    /*
-    ** Container Specific Overrides
-     */
-    // return the name of the element used by the child to reference this artifact
-    getParentKey() {
-        return 'compartment_id';
-    }
-
-
-    getNamePrefix() {
-        return super.getNamePrefix() + 'comp';
-    }
-
-    /*
-    ** Static Functionality
-     */
-    static getArtifactReference() {
-        return 'Compartment';
-    }
-
-    static getDropTargets() {
-        return [Compartment.getArtifactReference()];
-    }
-
-    static queryRoot(request = {}, region='') {
-        console.info('------------- Compartment Query --------------------');
-        let me = this;
-        queryCount++;
-        $.ajax({
-            type: 'get',
-            url: 'oci/artifacts/Compartment',
-            dataType: 'text',
-            contentType: 'application/json',
-            data: JSON.stringify(request),
-            success: function(resp) {
-                let response_json = JSON.parse(resp);
-                response_json.parent_id = ROOT_CANVAS_ID;
-                regionOkitJson[region].load({compartments: [response_json]});
-                console.info(me.getArtifactReference() + ' Query : ' + response_json.name);
-                me.querySubComponents(request, region, response_json.id);
-                redrawSVGCanvas(region);
-                $('#' + compartment_query_cb).prop('checked', true);
-                queryCount--;
-                hideQueryProgressIfComplete();
-            },
-            error: function(xhr, status, error) {
-                console.error('Status : ' + status);
-                console.error('Error  : ' + error);
-                $('#' + compartment_query_cb).prop('checked', true);
-                queryCount--;
-                hideQueryProgressIfComplete();
-            }
-        });
-    }
-
-    static query(request = {}, region='') {
-        console.info('------------- Compartments Query --------------------');
-        console.info('------------- Compartment           : ' + request.compartment_id);
-        let me = this;
-        queryCount++;
-        $.ajax({
-            type: 'get',
-            url: 'oci/artifacts/Compartments',
-            dataType: 'text',
-            contentType: 'application/json',
-            data: JSON.stringify(request),
-            success: function(resp) {
-                let response_json = JSON.parse(resp);
-                regionOkitJson[region].load({compartments: response_json});
-                for (let artifact of response_json) {
-                    console.info(me.getArtifactReference() + 's Query : ' + artifact.display_name);
-                    me.querySubComponents(request, region, artifact.id);
-                }
-                redrawSVGCanvas(region);
-                $('#' + compartment_query_cb).prop('checked', true);
-                queryCount--;
-                hideQueryProgressIfComplete();
-            },
-            error: function(xhr, status, error) {
-                console.error('Status : ' + status);
-                console.error('Error  : ' + error);
-                $('#' + compartment_query_cb).prop('checked', true);
-                queryCount--;
-                hideQueryProgressIfComplete();
-            }
-        });
-    }
-
-    static querySubComponents(request = {}, region='', id='') {
-        let sub_query_request = JSON.clone(request);
-        sub_query_request.compartment_id = id;
-        Compartment.query(sub_query_request, region);
-        VirtualCloudNetwork.query(sub_query_request, region);
-        BlockStorageVolume.query(sub_query_request, region);
-        DynamicRoutingGateway.query(sub_query_request, region);
-        AutonomousDatabase.query(sub_query_request, region);
-        ObjectStorageBucket.query(sub_query_request, region);
-        FastConnect.query(sub_query_request, region);
-        Instance.query(sub_query_request, region);
-        DatabaseSystem.query(sub_query_request, region);
-        FileStorageSystem.query(sub_query_request, region);
-    }
-}
-
-$(document).ready(function() {
-    let body = d3.select('#query-progress-tbody');
-    let row = body.append('tr');
-    let cell = row.append('td');
-    cell.append('input')
-        .attr('type', 'checkbox')
-        .attr('id', compartment_query_cb);
-    cell.append('label').text(Compartment.getArtifactReference());
-});
diff --git a/okitweb/static/okit/js/oci_artefacts/fast_connect.js b/okitweb/static/okit/js/oci_artefacts/fast_connect.js
deleted file mode 100644
index db4089cea..000000000
--- a/okitweb/static/okit/js/oci_artefacts/fast_connect.js
+++ /dev/null
@@ -1,189 +0,0 @@
-/*
-** Copyright (c) 2020, Oracle and/or its affiliates.
-** Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl.
-*/
-console.info('Loaded FastConnect Javascript');
-
-const fast_connect_query_cb = "fast-connect-query-cb";
-
-/*
-** Define FastConnect Class
- */
-class FastConnect extends OkitArtifact {
-    /*
-    ** Create
-     */
-    constructor (data={}, okitjson={}, parent=null) {
-        super(okitjson);
-        this.parent_id = data.parent_id;
-        // Configure default values
-        this.display_name = this.generateDefaultName(okitjson.fast_connects.length + 1);
-        this.compartment_id = data.parent_id;
-        // Update with any passed data
-        this.merge(data);
-        this.convert();
-        // Add Get Parent function
-        if (parent !== null) {
-            this.getParent = () => {return parent};
-        }
-    }
-
-
-    /*
-    ** Clone Functionality
-     */
-    clone() {
-        return new FastConnect(this, this.getOkitJson());
-    }
-
-
-    /*
-    ** Delete Processing
-     */
-    deleteChildren() {}
-
-
-    /*
-     ** SVG Processing
-     */
-    draw() {
-        console.groupCollapsed('Drawing ' + this.getArtifactReference() + ' : ' + this.id + ' [' + this.parent_id + ']');
-        let me = this;
-        let svg = super.draw();
-        // Get Inner Rect to attach Connectors
-        let rect = svg.select("rect[id='" + safeId(this.id) + "']");
-        let boundingClientRect = rect.node().getBoundingClientRect();
-        // Add Connector Data
-        svg.attr("data-compartment-id", this.compartment_id)
-            .attr("data-connector-start-y", boundingClientRect.y + (boundingClientRect.height / 2))
-            .attr("data-connector-start-x", boundingClientRect.x)
-            .attr("data-connector-end-y", boundingClientRect.y + (boundingClientRect.height / 2))
-            .attr("data-connector-end-x", boundingClientRect.x)
-            .attr("data-connector-id", this.id)
-            .attr("dragable", true)
-            .selectAll("*")
-            .attr("data-connector-start-y", boundingClientRect.y + (boundingClientRect.height / 2))
-            .attr("data-connector-start-x", boundingClientRect.x)
-            .attr("data-connector-end-y", boundingClientRect.y + (boundingClientRect.height / 2))
-            .attr("data-connector-end-x", boundingClientRect.x)
-            .attr("data-connector-id", this.id)
-            .attr("dragable", true);
-        console.groupEnd();
-        return svg;
-    }
-
-    // Return Artifact Specific Definition.
-    getSvgDefinition() {
-        console.groupCollapsed('Getting Definition of ' + this.getArtifactReference() + ' : ' + this.id);
-        let definition = this.newSVGDefinition(this, this.getArtifactReference());
-        let dimensions = this.getDimensions();
-        let first_child = this.getParent().getChildOffset(this.getArtifactReference());
-        definition['svg']['x'] = first_child.dx;
-        definition['svg']['y'] = first_child.dy;
-        definition['svg']['width'] = dimensions['width'];
-        definition['svg']['height'] = dimensions['height'];
-        definition['rect']['stroke']['colour'] = stroke_colours.purple;
-        definition['rect']['stroke']['dash'] = 1;
-        console.info(JSON.stringify(definition, null, 2));
-        console.groupEnd();
-        return definition;
-    }
-
-    // Return Artifact Dimensions
-    getDimensions() {
-        console.groupCollapsed('Getting Dimensions of ' + this.getArtifactReference() + ' : ' + this.id);
-        let dimensions = this.getMinimumDimensions();
-        // Calculate Size based on Child Artifacts
-        // Check size against minimum
-        dimensions.width  = Math.max(dimensions.width,  this.getMinimumDimensions().width);
-        dimensions.height = Math.max(dimensions.height, this.getMinimumDimensions().height);
-        console.info('Overall Dimensions       : ' + JSON.stringify(dimensions));
-        console.groupEnd();
-        return dimensions;
-    }
-
-    getMinimumDimensions() {
-        return {width: icon_width, height:icon_height};
-    }
-
-
-    /*
-    ** Property Sheet Load function
-     */
-    loadProperties() {
-        let okitJson = this.getOkitJson();
-        let me = this;
-        $(jqId(PROPERTIES_PANEL)).load("propertysheets/fast_connect.html", () => {loadPropertiesSheet(me);});
-    }
-
-
-    getNamePrefix() {
-        return super.getNamePrefix() + 'fc';
-    }
-
-    /*
-    ** Static Functionality
-     */
-    static getArtifactReference() {
-        return 'Fast Connect';
-    }
-
-    static getDropTargets() {
-        return [Compartment.getArtifactReference()];
-    }
-
-    static query(request = {}, region='') {
-        console.info('------------- Fast Connect Query --------------------');
-        console.info('------------- Compartment : ' + request.compartment_id);
-        let me = this;
-        queryCount++;
-        $.ajax({
-            type: 'get',
-            url: 'oci/artifacts/FastConnect',
-            dataType: 'text',
-            contentType: 'application/json',
-            data: JSON.stringify(request),
-            success: function(resp) {
-                let response_json = JSON.parse(resp);
-                regionOkitJson[region].load({fast_connects: response_json});
-                for (let artifact of response_json) {
-                    console.info(me.getArtifactReference() + ' Query : ' + artifact.display_name);
-                }
-                redrawSVGCanvas(region);
-                $('#' + fast_connect_query_cb).prop('checked', true);
-                queryCount--;
-                hideQueryProgressIfComplete();
-            },
-            error: function(xhr, status, error) {
-                console.info('Status : ' + status)
-                console.info('Error : ' + error)
-                $('#' + fast_connect_query_cb).prop('checked', true);
-                queryCount--;
-                hideQueryProgressIfComplete();
-            }
-        });
-    }
-}
-
-$(document).ready(function() {
-    // Setup Search Checkbox
-    let body = d3.select('#query-progress-tbody');
-    let row = body.append('tr');
-    let cell = row.append('td');
-    cell.append('input')
-        .attr('type', 'checkbox')
-        .attr('id', fast_connect_query_cb);
-    cell.append('label').text(FastConnect.getArtifactReference());
-
-    // Setup Query Display Form
-    body = d3.select('#query-oci-tbody');
-    row = body.append('tr');
-    cell = row.append('td')
-        .text(FastConnect.getArtifactReference());
-    cell = row.append('td');
-    let input = cell.append('input')
-        .attr('type', 'text')
-        .attr('class', 'query-filter')
-        .attr('id', 'fast_connect_name_filter')
-        .attr('name', 'fast_connect_name_filter');
-});
diff --git a/okitweb/static/okit/js/oci_artefacts/file_storage_system.js b/okitweb/static/okit/js/oci_artefacts/file_storage_system.js
deleted file mode 100644
index f4221d8b7..000000000
--- a/okitweb/static/okit/js/oci_artefacts/file_storage_system.js
+++ /dev/null
@@ -1,261 +0,0 @@
-/*
-** Copyright (c) 2020, Oracle and/or its affiliates.
-** Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl.
-*/
-console.info('Loaded File Storage System Javascript');
-
-const file_storage_system_query_cb = "file-storage-system-query-cb";
-
-/*
-** Define File Storage System Class
- */
-class FileStorageSystem extends OkitArtifact {
-    /*
-    ** Create
-     */
-    constructor (data={}, okitjson={}, parent=null) {
-        super(okitjson);
-        // Configure default values
-        this.display_name = this.generateDefaultName(okitjson.file_storage_systems.length + 1);
-        this.compartment_id = '';
-        this.availability_domain = '1';
-        this.exports = [];
-        this.mount_targets = [];
-        // Update with any passed data
-        this.merge(data);
-        // Check if built from a query
-        if (this.availability_domain.length > 1) {
-            this.region_availability_domain = this.availability_domain;
-            this.availability_domain = this.region_availability_domain.slice(-1);
-        }
-        if (this.exports.length > 0) {
-            this.primary_export = this.exports[0];
-        } else {
-            this.primary_export = {path: '/mnt', export_options: {source: this.getOkitJson().getSubnet(data.parent_id)['cidr_block'], access: 'READ_ONLY', anonymous_gid: '', anonymous_uid: '', identity_squash: 'NONE', require_privileged_source_port: true}};
-            this.exports[0] = this.primary_export;
-        }
-        if (this.mount_targets.length > 0) {
-            this.primary_mount_target = this.mount_targets[0];
-        } else {
-            this.primary_mount_target = {subnet_id: data.parent_id, hostname_label: this.display_name.toLowerCase(), nsg_ids: [], export_set: {max_fs_stat_bytes: '', max_fs_stat_files: ''}};
-            this.mount_targets[0] = this.primary_mount_target;
-        }
-        // Add Get Parent function
-        if (parent !== null) {
-            this.getParent = () => {return parent};
-        }
-        this.convert();
-        this.parent_id = this.primary_mount_target.subnet_id;
-    }
-
-
-    /*
-    ** Conversion Routine allowing loading of old json
-     */
-    convert() {
-        // Export Element
-        if (this.exports === undefined) {this.export = [];}
-        if (this.exports[0].export_options === undefined) {this.exports[0].export_options = {};}
-        if (this.path !== undefined) {this.exports[0].path = this.path; delete this.path;}
-        if (this.source !== undefined) {this.exports[0].export_options.source = this.source; delete this.source;}
-        if (this.access !== undefined) {this.exports[0].export_options.access = this.access; delete this.access;}
-        // Mount Target
-        if (this.mount_targets === undefined) {this.mount_target = [{}];}
-        if (this.subnet_id !== undefined) {this.mount_targets[0].subnet_id = this.subnet_id; delete this.subnet_id;}
-        if (this.hostname_label !== undefined) {this.mount_target[0].hostname_label = this.hostname_label; delete this.hostname_label;}
-    }
-
-    /*
-    ** Clone Functionality
-     */
-    clone() {
-        return new FileStorageSystem(this, this.getOkitJson());
-    }
-
-
-    /*
-    ** Delete Processing
-     */
-    deleteChildren() {}
-
-
-    /*
-     ** SVG Processing
-     */
-    draw() {
-        console.groupCollapsed('Drawing ' + this.getArtifactReference() + ' : ' + this.id + ' [' + this.parent_id + ']');
-        let me = this;
-        let svg = super.draw();
-        console.groupEnd();
-    }
-
-    // Return Artifact Specific Definition.
-    getSvgDefinition() {
-        console.groupCollapsed('Getting Definition of ' + this.getArtifactReference() + ' : ' + this.id);
-        let definition = this.newSVGDefinition(this, this.getArtifactReference());
-        let dimensions = this.getDimensions();
-        let first_child = this.getParent().getChildOffset(this.getArtifactReference());
-        definition['svg']['x'] = first_child.dx;
-        definition['svg']['y'] = first_child.dy;
-        definition['svg']['width'] = dimensions['width'];
-        definition['svg']['height'] = dimensions['height'];
-        definition['rect']['stroke']['colour'] = stroke_colours.bark;
-        definition['rect']['stroke']['dash'] = 1;
-        console.info(JSON.stringify(definition, null, 2));
-        console.groupEnd();
-        return definition;
-    }
-
-    // Return Artifact Dimensions
-    getDimensions() {
-        console.groupCollapsed('Getting Dimensions of ' + this.getArtifactReference() + ' : ' + this.id);
-        let dimensions = this.getMinimumDimensions();
-        // Calculate Size based on Child Artifacts
-        // Check size against minimum
-        dimensions.width  = Math.max(dimensions.width,  this.getMinimumDimensions().width);
-        dimensions.height = Math.max(dimensions.height, this.getMinimumDimensions().height);
-        console.info('Overall Dimensions       : ' + JSON.stringify(dimensions));
-        console.groupEnd();
-        return dimensions;
-    }
-
-    getMinimumDimensions() {
-        return {width: icon_width, height:icon_height};
-    }
-
-
-    /*
-    ** Property Sheet Load function
-     */
-    loadProperties() {
-        let okitJson = this.getOkitJson();
-        let me = this;
-        $(jqId(PROPERTIES_PANEL)).load("propertysheets/file_storage_system.html", () => {
-            // Build Network Security Groups
-            let nsg_select = $(jqId('nsg_ids'));
-            this.loadNetworkSecurityGroups(nsg_select, this.primary_mount_target.subnet_id);
-            // Load Properties
-            loadPropertiesSheet(me);
-        });
-    }
-
-    loadNetworkSecurityGroups(select, subnet_id) {
-        $(select).empty();
-        let vcn = this.getOkitJson().getVirtualCloudNetwork(this.getOkitJson().getSubnet(subnet_id).vcn_id);
-        for (let networkSecurityGroup of this.getOkitJson().network_security_groups) {
-            if (networkSecurityGroup.vcn_id === vcn.id) {
-                select.append($('<option>').attr('value', networkSecurityGroup.id).text(networkSecurityGroup.display_name));
-            }
-        }
-    }
-
-
-    /*
-    ** Child Offset Functions
-     */
-    getFirstChildOffset() {
-        let offset = {
-            dx: Math.round(positional_adjustments.padding.x + positional_adjustments.spacing.x),
-            dy: Math.round(positional_adjustments.padding.y + positional_adjustments.spacing.y * 2)
-        };
-        return offset;
-    }
-
-    getContainerChildOffset() {
-        let offset = this.getFirstContainerChildOffset();
-        return offset;
-    }
-
-    getTopEdgeChildOffset() {
-        let offset = this.getFirstTopEdgeChildOffset();
-        return offset;
-    }
-
-    getBottomEdgeChildOffset() {}
-
-    getLeftEdgeChildOffset() {}
-
-    getRightEdgeChildOffset() {}
-
-    getTopChildOffset() {
-        let offset = this.getTopEdgeChildOffset();
-        return offset;
-    }
-
-    getBottomChildOffset() {}
-
-    getLeftChildOffset() {}
-
-    getRightChildOffset() {}
-
-
-    getNamePrefix() {
-        return super.getNamePrefix() + 'fss';
-    }
-
-    /*
-    ** Static Functionality
-     */
-    static getArtifactReference() {
-        return 'File Storage System';
-    }
-
-    static getDropTargets() {
-        return [Subnet.getArtifactReference()];
-    }
-
-    static query(request = {}, region='') {
-        console.info('------------- queryFileStorageSystemAjax --------------------');
-        console.info('------------- Compartment : ' + request.compartment_id);
-        let me = this;
-        queryCount++;
-        $.ajax({
-            type: 'get',
-            url: 'oci/artifacts/FileStorageSystem',
-            dataType: 'text',
-            contentType: 'application/json',
-            data: JSON.stringify(request),
-            success: function(resp) {
-                let response_json = JSON.parse(resp);
-                regionOkitJson[region].load({file_storage_systems: response_json});
-                for (let artifact of response_json) {
-                    console.info(me.getArtifactReference() + ' Query : ' + artifact.display_name);
-                }
-                redrawSVGCanvas(region);
-                $('#' + file_storage_system_query_cb).prop('checked', true);
-                queryCount--;
-                hideQueryProgressIfComplete();
-            },
-            error: function(xhr, status, error) {
-                console.info('Status : ' + status)
-                console.info('Error : ' + error)
-                $('#' + file_storage_system_query_cb).prop('checked', true);
-                queryCount--;
-                hideQueryProgressIfComplete();
-            }
-        });
-    }
-}
-
-$(document).ready(function() {
-    // Setup Search Checkbox
-    let body = d3.select('#query-progress-tbody');
-    let row = body.append('tr');
-    let cell = row.append('td');
-    cell.append('input')
-        .attr('type', 'checkbox')
-        .attr('id', file_storage_system_query_cb);
-    cell.append('label').text(FileStorageSystem.getArtifactReference());
-
-    // Setup Query Display Form
-    body = d3.select('#query-oci-tbody');
-    row = body.append('tr');
-    cell = row.append('td')
-        .text(FileStorageSystem.getArtifactReference());
-    cell = row.append('td');
-    let input = cell.append('input')
-        .attr('type', 'text')
-        .attr('class', 'query-filter')
-        .attr('id', 'file_storage_system_name_filter')
-        .attr('name', 'file_storage_system_name_filter');
-});
diff --git a/okitweb/static/okit/js/oci_artefacts/internet_gateway.js b/okitweb/static/okit/js/oci_artefacts/internet_gateway.js
deleted file mode 100644
index 07746cb06..000000000
--- a/okitweb/static/okit/js/oci_artefacts/internet_gateway.js
+++ /dev/null
@@ -1,185 +0,0 @@
-/*
-** Copyright (c) 2020, Oracle and/or its affiliates.
-** Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl.
-*/
-console.info('Loaded Internet Gateway Javascript');
-
-const internet_gateway_query_cb = "internet-gateway-query-cb";
-
-/*
-** Define Internet Gateway Artifact Class
- */
-class InternetGateway extends OkitArtifact {
-    /*
-    ** Create
-     */
-    constructor (data={}, okitjson={}, parent=null) {
-        super(okitjson);
-        this.parent_id = data.parent_id;
-        // Configure default values
-        this.display_name = this.generateDefaultName(okitjson.internet_gateways.length + 1);
-        this.compartment_id = data.compartment_id;
-        this.vcn_id = data.parent_id;
-        this.enabled = true;
-        this.freeform_tags = {};
-        this.defined_tags = {};
-        // Update with any passed data
-        this.merge(data);
-        this.convert();
-        // Add Get Parent function
-        if (parent !== null) {
-            this.getParent = () => {return parent};
-        }
-    }
-
-
-    /*
-    ** Clone Functionality
-     */
-    clone() {
-        return new InternetGateway(this, this.getOkitJson());
-    }
-
-
-    /*
-    ** Delete Processing
-     */
-    deleteChildren() {
-        // Remove Internet Gateway references
-        for (let route_table of this.getOkitJson().route_tables) {
-            for (let i = 0; i < route_table.route_rules.length; i++) {
-                if (route_table.route_rules[i]['network_entity_id'] === this.id) {
-                    route_table.route_rules.splice(i, 1);
-                }
-            }
-        }
-    }
-
-
-    /*
-     ** SVG Processing
-     */
-    draw() {
-        console.groupCollapsed('Drawing ' + this.getArtifactReference() + ' : ' + this.id + ' [' + this.parent_id + ']');
-        let me = this;
-        let svg = super.draw();
-        console.groupEnd();
-    }
-
-    // Return Artifact Specific Definition.
-    getSvgDefinition() {
-        console.groupCollapsed('Getting Definition of ' + this.getArtifactReference() + ' : ' + this.id);
-        let position = 1;
-        let definition = this.newSVGDefinition(this, this.getArtifactReference());
-        let dimensions = this.getDimensions();
-        let first_child = this.getParent().getChildOffset(this.getArtifactReference());
-        definition['svg']['x'] = first_child.dx;
-        definition['svg']['y'] = first_child.dy;
-        definition['svg']['width'] = dimensions['width'];
-        definition['svg']['height'] = dimensions['height'];
-        definition['rect']['stroke']['colour'] = stroke_colours.purple;
-        definition['rect']['stroke']['dash'] = 1;
-        console.info(JSON.stringify(definition, null, 2));
-        console.groupEnd();
-        return definition;
-    }
-
-    // Return Artifact Dimensions
-    getDimensions() {
-        console.groupCollapsed('Getting Dimensions of ' + this.getArtifactReference() + ' : ' + this.id);
-        let dimensions = this.getMinimumDimensions();
-        // Calculate Size based on Child Artifacts
-        // Check size against minimum
-        dimensions.width  = Math.max(dimensions.width,  this.getMinimumDimensions().width);
-        dimensions.height = Math.max(dimensions.height, this.getMinimumDimensions().height);
-        console.info('Overall Dimensions       : ' + JSON.stringify(dimensions));
-        console.groupEnd();
-        return dimensions;
-    }
-
-    getMinimumDimensions() {
-        return {width: icon_width, height:icon_height};
-    }
-
-
-    /*
-    ** Property Sheet Load function
-     */
-    loadProperties() {
-        let okitJson = this.getOkitJson();
-        let me = this;
-        $(jqId(PROPERTIES_PANEL)).load("propertysheets/internet_gateway.html", () => {loadPropertiesSheet(me);});
-    }
-
-
-    getNamePrefix() {
-        return super.getNamePrefix() + 'ig';
-    }
-
-    /*
-    ** Static Functionality
-     */
-    static getArtifactReference() {
-        return 'Internet Gateway';
-    }
-
-    static getDropTargets() {
-        return [VirtualCloudNetwork.getArtifactReference()];
-    }
-
-    static query(request = {}, region='') {
-        console.info('------------- Internet Gateway Query --------------------');
-        console.info('------------- Compartment           : ' + request.compartment_id);
-        console.info('------------- Virtual Cloud Network : ' + request.vcn_id);
-        let me = this;
-        queryCount++;
-        $.ajax({
-            type: 'get',
-            url: 'oci/artifacts/InternetGateway',
-            dataType: 'text',
-            contentType: 'application/json',
-            data: JSON.stringify(request),
-            success: function(resp) {
-                let response_json = JSON.parse(resp);
-                regionOkitJson[region].load({internet_gateways: response_json});
-                for (let artifact of response_json) {
-                    console.info(me.getArtifactReference() + ' Query : ' + artifact.display_name);
-                }
-                redrawSVGCanvas(region);
-                $('#' + internet_gateway_query_cb).prop('checked', true);
-                queryCount--;
-                hideQueryProgressIfComplete();
-            },
-            error: function(xhr, status, error) {
-                console.info('Status : ' + status)
-                console.info('Error : ' + error)
-                $('#' + internet_gateway_query_cb).prop('checked', true);
-                queryCount--;
-                hideQueryProgressIfComplete();
-            }
-        });
-    }
-}
-
-$(document).ready(function() {
-    // Setup Search Checkbox
-    let body = d3.select('#query-progress-tbody');
-    let row = body.append('tr');
-    let cell = row.append('td');
-    cell.append('input')
-        .attr('type', 'checkbox')
-        .attr('id', internet_gateway_query_cb);
-    cell.append('label').text(InternetGateway.getArtifactReference());
-
-    // Setup Query Display Form
-    body = d3.select('#query-oci-tbody');
-    row = body.append('tr');
-    cell = row.append('td')
-        .text(InternetGateway.getArtifactReference());
-    cell = row.append('td');
-    let input = cell.append('input')
-        .attr('type', 'text')
-        .attr('class', 'query-filter')
-        .attr('id', 'internet_gateway_name_filter')
-        .attr('name', 'internet_gateway_name_filter');
-});
diff --git a/okitweb/static/okit/js/oci_artefacts/local_peering_gateway.js b/okitweb/static/okit/js/oci_artefacts/local_peering_gateway.js
deleted file mode 100644
index b964231c6..000000000
--- a/okitweb/static/okit/js/oci_artefacts/local_peering_gateway.js
+++ /dev/null
@@ -1,217 +0,0 @@
-/*
-** Copyright (c) 2020, Oracle and/or its affiliates.
-** Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl.
-*/
-console.info('Loaded Local Peering Gateway Javascript');
-
-const local_peering_gateway_query_cb = "local-peering-gateway-query-cb";
-
-/*
-** Define Local Peering Gateway Class
- */
-class LocalPeeringGateway extends OkitArtifact {
-    /*
-    ** Create
-     */
-    constructor (data={}, okitjson={}, parent=null) {
-        super(okitjson);
-        this.parent_id = data.parent_id;
-        // Configure default values
-        this.display_name = this.generateDefaultName(okitjson.local_peering_gateways.length + 1);
-        this.compartment_id = '';
-        this.vcn_id = data.parent_id;
-        this.route_table_id = '';
-        this.peer_id = '';
-        // Update with any passed data
-        this.merge(data);
-        this.convert();
-        // Add Get Parent function
-        if (parent !== null) {
-            this.getParent = () => {return parent};
-        }
-    }
-
-
-    /*
-    ** Clone Functionality
-     */
-    clone() {
-        return new LocalPeeringGateway(this, this.getOkitJson());
-    }
-
-
-    /*
-    ** Delete Processing
-     */
-    deleteChildren() {}
-
-
-    /*
-     ** SVG Processing
-     */
-    draw() {
-        console.groupCollapsed('Drawing ' + this.getArtifactReference() + ' : ' + this.id + ' [' + this.parent_id + ']');
-        let me = this;
-        let svg = super.draw();
-        // Add Highlighting
-        let fill = d3.select(d3Id(this.id)).attr('fill');
-        svg.on("mouseover", function () {
-            if (me.peer_id !== '') {
-                d3.selectAll(d3Id(me.peer_id)).attr('fill', svg_highlight_colour);
-                d3.select(d3Id(me.id)).attr('fill', svg_highlight_colour);
-            }
-            d3.event.stopPropagation();
-        });
-        svg.on("mouseout", function () {
-            if (me.peer_id !== '') {
-                d3.selectAll(d3Id(me.peer_id)).attr('fill', fill);
-                d3.select(d3Id(me.id)).attr('fill', fill);
-            }
-            d3.event.stopPropagation();
-        });
-        console.groupEnd();
-        return svg;
-    }
-
-    // Return Artifact Specific Definition.
-    getSvgDefinition() {
-        console.groupCollapsed('Getting Definition of ' + this.getArtifactReference() + ' : ' + this.id);
-        let definition = this.newSVGDefinition(this, this.getArtifactReference());
-        let dimensions = this.getDimensions();
-        let first_child = this.getParent().getChildOffset(this.getArtifactReference());
-        definition['svg']['x'] = first_child.dx;
-        definition['svg']['y'] = first_child.dy;
-        definition['svg']['width'] = dimensions['width'];
-        definition['svg']['height'] = dimensions['height'];
-        definition['rect']['stroke']['colour'] = stroke_colours.bark;
-        definition['rect']['stroke']['dash'] = 1;
-        console.info(JSON.stringify(definition, null, 2));
-        console.groupEnd();
-        return definition;
-    }
-
-    // Return Artifact Dimensions
-    getDimensions() {
-        console.groupCollapsed('Getting Dimensions of ' + this.getArtifactReference() + ' : ' + this.id);
-        let dimensions = this.getMinimumDimensions();
-        // Calculate Size based on Child Artifacts
-        // Check size against minimum
-        dimensions.width  = Math.max(dimensions.width,  this.getMinimumDimensions().width);
-        dimensions.height = Math.max(dimensions.height, this.getMinimumDimensions().height);
-        console.info('Overall Dimensions       : ' + JSON.stringify(dimensions));
-        console.groupEnd();
-        return dimensions;
-    }
-
-    getMinimumDimensions() {
-        return {width: icon_width, height:icon_height};
-    }
-
-
-    /*
-    ** Property Sheet Load function
-     */
-    loadProperties() {
-        let okitJson = this.getOkitJson();
-        let me = this;
-        $(jqId(PROPERTIES_PANEL)).load("propertysheets/local_peering_gateway.html", () => {
-            // Load Referenced Ids
-            let route_table_select = $(jqId('route_table_id'));
-            route_table_select.append($('<option>').attr('value', '').text(''));
-            for (let route_table of okitJson.route_tables) {
-                if (me.vcn_id === route_table.vcn_id) {
-                    route_table_select.append($('<option>').attr('value', route_table.id).text(route_table.display_name));
-                }
-            }
-            // Load Local Peering Gateways from other VCNs
-            let remote_peering_gateway_select = $(jqId('peer_id'));
-            remote_peering_gateway_select.append($('<option>').attr('value', '').text(''));
-            for (let local_peering_gateway of okitJson.local_peering_gateways) {
-                if (me.vcn_id !== local_peering_gateway.vcn_id) {
-                    remote_peering_gateway_select.append($('<option>').attr('value', local_peering_gateway.id).text(local_peering_gateway.display_name));
-                }
-            }
-            // Load Properties
-            loadPropertiesSheet(me);
-            $(jqId('peer_id')).on('blur', () => {okitJson.getLocalPeeringGateway(me.peer_id).peer_id = me.id;});
-        });
-    }
-
-
-    getNamePrefix() {
-        return super.getNamePrefix() + 'lpg';
-    }
-
-    /*
-    ** Static Functionality
-     */
-    static getArtifactReference() {
-        return 'Local Peering Gateway';
-    }
-
-    static getDropTargets() {
-        return [VirtualCloudNetwork.getArtifactReference()];
-    }
-
-    static query(request = {}, region='') {
-        console.info('------------- Local Peering Gateway Query --------------------');
-        console.info('------------- Compartment           : ' + request.compartment_id);
-        console.info('------------- Virtual Cloud Network : ' + request.vcn_id);
-        let me = this;
-        queryCount++;
-        $.ajax({
-            type: 'get',
-            url: 'oci/artifacts/LocalPeeringGateway',
-            dataType: 'text',
-            contentType: 'application/json',
-            data: JSON.stringify(request),
-            success: function(resp) {
-                let response_json = JSON.parse(resp);
-                regionOkitJson[region].load({local_peering_gateways: response_json});
-                for (let artifact of response_json) {
-                    console.info(me.getArtifactReference() + ' Query : ' + artifact.display_name);
-                }
-                redrawSVGCanvas(region);
-                $('#' + local_peering_gateway_query_cb).prop('checked', true);
-                queryCount--;
-                hideQueryProgressIfComplete();
-            },
-            error: function(xhr, status, error) {
-                console.info('Status : ' + status)
-                console.info('Error : ' + error)
-                $('#' + local_peering_gateway_query_cb).prop('checked', true);
-                queryCount--;
-                hideQueryProgressIfComplete();
-            }
-        });
-    }
-}
-
-function setPeeredGatewayPeerId(input_id, artifact) {
-    if (input_id === 'peer_id' && artifact.peer_id) {
-        okitJson.getLocalPeeringGateway(artifact.peer_id).peer_id = artifact.id;
-    }
-}
-
-$(document).ready(function() {
-    // Setup Search Checkbox
-    let body = d3.select('#query-progress-tbody');
-    let row = body.append('tr');
-    let cell = row.append('td');
-    cell.append('input')
-        .attr('type', 'checkbox')
-        .attr('id', local_peering_gateway_query_cb);
-    cell.append('label').text(LocalPeeringGateway.getArtifactReference());
-
-    // Setup Query Display Form
-    body = d3.select('#query-oci-tbody');
-    row = body.append('tr');
-    cell = row.append('td')
-        .text(LocalPeeringGateway.getArtifactReference());
-    cell = row.append('td');
-    let input = cell.append('input')
-        .attr('type', 'text')
-        .attr('class', 'query-filter')
-        .attr('id', 'local_peering_gateway_name_filter')
-        .attr('name', 'local_peering_gateway_name_filter');
-});
diff --git a/okitweb/static/okit/js/oci_artefacts/nat_gateway.js b/okitweb/static/okit/js/oci_artefacts/nat_gateway.js
deleted file mode 100644
index b9d9738a3..000000000
--- a/okitweb/static/okit/js/oci_artefacts/nat_gateway.js
+++ /dev/null
@@ -1,198 +0,0 @@
-/*
-** Copyright (c) 2020, Oracle and/or its affiliates.
-** Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl.
-*/
-console.info('Loaded NAT Gateway Javascript');
-
-const nat_gateway_query_cb = "nat-gateway-query-cb";
-
-/*
-** Define NAT Gateway Class
- */
-class NATGateway extends OkitArtifact {
-    /*
-    ** Create
-     */
-    constructor (data={}, okitjson={}, parent=null) {
-        super(okitjson);
-        this.parent_id = data.parent_id;
-        // Configure default values
-        this.display_name = this.generateDefaultName(okitjson.nat_gateways.length + 1);
-        this.compartment_id = '';
-        this.vcn_id = data.parent_id;
-        this.block_traffic = false;
-        // Update with any passed data
-        this.merge(data);
-        this.convert();
-        // Add Get Parent function
-        if (parent !== null) {
-            this.getParent = () => {return parent};
-        }
-    }
-
-
-    /*
-    ** Clone Functionality
-     */
-    clone() {
-        return new NATGateway(this, this.getOkitJson());
-    }
-
-
-    /*
-    ** Delete Processing
-     */
-    deleteChildren() {
-        // Remove Internet Gateway references
-        for (let route_table of this.getOkitJson().route_tables) {
-            for (let i = 0; i < route_table.route_rules.length; i++) {
-                if (route_table.route_rules[i]['network_entity_id'] === this.id) {
-                    route_table.route_rules.splice(i, 1);
-                }
-            }
-        }
-    }
-
-
-    /*
-     ** SVG Processing
-     */
-    draw() {
-        console.groupCollapsed('Drawing ' + this.getArtifactReference() + ' : ' + this.id + ' [' + this.parent_id + ']');
-        let me = this;
-        let svg = super.draw();
-        console.groupEnd();
-    }
-
-    // Return Artifact Specific Definition.
-    getSvgDefinition() {
-        console.groupCollapsed('Getting Definition of ' + this.getArtifactReference() + ' : ' + this.id);
-        let position = 1;
-        let definition = this.newSVGDefinition(this, this.getArtifactReference());
-        let dimensions = this.getDimensions();
-        let first_child = this.getParent().getChildOffset(this.getArtifactReference());
-        definition['svg']['x'] = first_child.dx;
-        definition['svg']['y'] = first_child.dy;
-        definition['svg']['width'] = dimensions['width'];
-        definition['svg']['height'] = dimensions['height'];
-        definition['rect']['stroke']['colour'] = stroke_colours.bark;
-        definition['rect']['stroke']['dash'] = 1;
-        console.info(JSON.stringify(definition, null, 2));
-        console.groupEnd();
-        return definition;
-    }
-
-    // Return Artifact Dimensions
-    getDimensions() {
-        console.groupCollapsed('Getting Dimensions of ' + this.getArtifactReference() + ' : ' + this.id);
-        let dimensions = this.getMinimumDimensions();
-        // Calculate Size based on Child Artifacts
-        // Check size against minimum
-        dimensions.width  = Math.max(dimensions.width,  this.getMinimumDimensions().width);
-        dimensions.height = Math.max(dimensions.height, this.getMinimumDimensions().height);
-        console.info('Overall Dimensions       : ' + JSON.stringify(dimensions));
-        console.groupEnd();
-        return dimensions;
-    }
-
-    getMinimumDimensions() {
-        return {width: icon_width, height:icon_height};
-    }
-
-
-    /*
-    ** Property Sheet Load function
-     */
-    loadProperties() {
-        let okitJson = this.getOkitJson();
-        let me = this;
-        $(jqId(PROPERTIES_PANEL)).load("propertysheets/nat_gateway.html", () => {loadPropertiesSheet(me);});
-    }
-
-
-    getNamePrefix() {
-        return super.getNamePrefix() + 'ng';
-    }
-
-    /*
-    ** Static Functionality
-     */
-    static getArtifactReference() {
-        return 'NAT Gateway';
-    }
-
-    static getDropTargets() {
-        return [VirtualCloudNetwork.getArtifactReference()];
-    }
-
-    static query(request = {}, region='') {
-        console.info('------------- NAT Gateway Query --------------------');
-        console.info('------------- Compartment           : ' + request.compartment_id);
-        console.info('------------- Virtual Cloud Network : ' + request.vcn_id);
-        let me = this;
-        queryCount++;
-        $.ajax({
-            type: 'get',
-            url: 'oci/artifacts/NATGateway',
-            dataType: 'text',
-            contentType: 'application/json',
-            data: JSON.stringify(request),
-            success: function(resp) {
-                let response_json = JSON.parse(resp);
-                regionOkitJson[region].load({nat_gateways: response_json});
-                for (let artifact of response_json) {
-                    console.info(me.getArtifactReference() + ' Query : ' + artifact.display_name);
-                }
-                redrawSVGCanvas(region);
-                $('#' + nat_gateway_query_cb).prop('checked', true);
-                queryCount--;
-                hideQueryProgressIfComplete();
-            },
-            error: function(xhr, status, error) {
-                console.info('Status : ' + status)
-                console.info('Error : ' + error)
-                $('#' + nat_gateway_query_cb).prop('checked', true);
-                queryCount--;
-                hideQueryProgressIfComplete();
-            }
-        });
-    }
-}
-
-$(document).ready(function() {
-    // Setup Search Checkbox
-    let body = d3.select('#query-progress-tbody');
-    let row = body.append('tr');
-    let cell = row.append('td');
-    cell.append('input')
-        .attr('type', 'checkbox')
-        .attr('id', nat_gateway_query_cb);
-    cell.append('label').text(NATGateway.getArtifactReference());
-
-    // Setup Query Display Form
-    body = d3.select('#query-oci-tbody');
-    row = body.append('tr');
-    cell = row.append('td')
-        .text(NATGateway.getArtifactReference());
-    cell = row.append('td');
-    let input = cell.append('input')
-        .attr('type', 'text')
-        .attr('class', 'query-filter')
-        .attr('id', 'nat_gateway_name_filter')
-        .attr('name', 'nat_gateway_name_filter');
-});
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/okitweb/static/okit/js/oci_artefacts/object_storage_bucket.js b/okitweb/static/okit/js/oci_artefacts/object_storage_bucket.js
deleted file mode 100644
index 6ed905104..000000000
--- a/okitweb/static/okit/js/oci_artefacts/object_storage_bucket.js
+++ /dev/null
@@ -1,240 +0,0 @@
-/*
-** Copyright (c) 2020, Oracle and/or its affiliates.
-** Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl.
-*/
-console.info('Loaded Object Storage Bucket Javascript');
-
-const object_storage_bucket_query_cb = "object-storage-bucket-query-cb";
-
-/*
-** Define Object Storage Bucket Class
- */
-class ObjectStorageBucket extends OkitArtifact {
-    /*
-    ** Create
-     */
-    constructor (data={}, okitjson={}, parent=null) {
-        super(okitjson);
-        this.parent_id = data.parent_id;
-        // Configure default values
-        this.display_name = this.generateDefaultName(okitjson.object_storage_buckets.length + 1);
-        this.compartment_id = data.parent_id;
-        this.name = this.display_name;
-        this.namespace = 'Tenancy Name';
-        this.storage_tier = 'Standard';
-        this.public_access_type = 'NoPublicAccess';
-        // Update with any passed data
-        this.merge(data);
-        this.convert();
-        // Add Get Parent function
-        if (parent !== null) {
-            this.getParent = () => {return parent};
-        }
-    }
-
-
-    /*
-    ** Clone Functionality
-     */
-    clone() {
-        return new ObjectStorageBucket(this, this.getOkitJson());
-    }
-
-
-    /*
-    ** Delete Processing
-     */
-    deleteChildren() {
-        for (let instance of this.getOkitJson().instances) {
-            for (let i=0; i < instance['object_storage_bucket_ids'].length; i++) {
-                if (instance.object_storage_bucket_ids[i] === this.id) {
-                    instance.object_storage_bucket_ids.splice(i, 1);
-                }
-            }
-        }
-    }
-
-
-    /*
-     ** SVG Processing
-     */
-    draw() {
-        console.groupCollapsed('Drawing ' + this.getArtifactReference() + ' : ' + this.id + ' [' + this.parent_id + ']');
-        let me = this;
-        let svg = super.draw();
-        // Get Inner Rect to attach Connectors
-        let rect = svg.select("rect[id='" + safeId(this.id) + "']");
-        let boundingClientRect = rect.node().getBoundingClientRect();
-        // Add Connector Data
-        svg.attr("data-compartment-id", this.compartment_id)
-            .attr("data-connector-start-y", boundingClientRect.y + (boundingClientRect.height / 2))
-            .attr("data-connector-start-x", boundingClientRect.x)
-            .attr("data-connector-end-y", boundingClientRect.y + (boundingClientRect.height / 2))
-            .attr("data-connector-end-x", boundingClientRect.x)
-            .attr("data-connector-id", this.id)
-            .attr("dragable", true)
-            .selectAll("*")
-            .attr("data-connector-start-y", boundingClientRect.y + (boundingClientRect.height / 2))
-            .attr("data-connector-start-x", boundingClientRect.x)
-            .attr("data-connector-end-y", boundingClientRect.y + (boundingClientRect.height / 2))
-            .attr("data-connector-end-x", boundingClientRect.x)
-            .attr("data-connector-id", this.id)
-            .attr("dragable", true);
-        console.groupEnd();
-        return svg;
-    }
-
-    // Return Artifact Specific Definition.
-    getSvgDefinition() {
-        console.groupCollapsed('Getting Definition of ' + this.getArtifactReference() + ' : ' + this.id);
-        let definition = this.newSVGDefinition(this, this.getArtifactReference());
-        let dimensions = this.getDimensions();
-        let first_child = this.getParent().getChildOffset(this.getArtifactReference());
-        definition['svg']['x'] = first_child.dx;
-        definition['svg']['y'] = first_child.dy;
-        definition['svg']['width'] = dimensions['width'];
-        definition['svg']['height'] = dimensions['height'];
-        definition['rect']['stroke']['colour'] = stroke_colours.bark;
-        definition['rect']['stroke']['dash'] = 1;
-        console.info(JSON.stringify(definition, null, 2));
-        console.groupEnd();
-        return definition;
-    }
-
-    // Return Artifact Dimensions
-    getDimensions() {
-        console.groupCollapsed('Getting Dimensions of ' + this.getArtifactReference() + ' : ' + this.id);
-        let dimensions = this.getMinimumDimensions();
-        // Calculate Size based on Child Artifacts
-        // Check size against minimum
-        dimensions.width  = Math.max(dimensions.width,  this.getMinimumDimensions().width);
-        dimensions.height = Math.max(dimensions.height, this.getMinimumDimensions().height);
-        console.info('Overall Dimensions       : ' + JSON.stringify(dimensions));
-        console.groupEnd();
-        return dimensions;
-    }
-
-    getMinimumDimensions() {
-        return {width: icon_width, height:icon_height};
-    }
-
-
-    /*
-    ** Property Sheet Load function
-     */
-    loadProperties() {
-        let okitJson = this.getOkitJson();
-        let me = this;
-        $(jqId(PROPERTIES_PANEL)).load("propertysheets/object_storage_bucket.html", () => {loadPropertiesSheet(me);});
-    }
-
-
-    /*
-    ** Child Offset Functions
-     */
-    getFirstChildOffset() {
-        let offset = {
-            dx: Math.round(positional_adjustments.padding.x + positional_adjustments.spacing.x),
-            dy: Math.round(positional_adjustments.padding.y + positional_adjustments.spacing.y * 2)
-        };
-        return offset;
-    }
-
-    getContainerChildOffset() {
-        let offset = this.getFirstContainerChildOffset();
-        return offset;
-    }
-
-    getTopEdgeChildOffset() {
-        let offset = this.getFirstTopEdgeChildOffset();
-        return offset;
-    }
-
-    getBottomEdgeChildOffset() {}
-
-    getLeftEdgeChildOffset() {}
-
-    getRightEdgeChildOffset() {}
-
-    getTopChildOffset() {
-        let offset = this.getTopEdgeChildOffset();
-        return offset;
-    }
-
-    getBottomChildOffset() {}
-
-    getLeftChildOffset() {}
-
-    getRightChildOffset() {}
-
-
-    getNamePrefix() {
-        return super.getNamePrefix() + 'osb';
-    }
-
-    /*
-    ** Static Functionality
-     */
-    static getArtifactReference() {
-        return 'Object Storage Bucket';
-    }
-
-    static getDropTargets() {
-        return [Compartment.getArtifactReference()];
-    }
-
-    static query(request = {}, region='') {
-        console.info('------------- Object Storage Bucket Query --------------------');
-        console.info('------------- Compartment : ' + request.compartment_id);
-        let me = this;
-        queryCount++;
-        $.ajax({
-            type: 'get',
-            url: 'oci/artifacts/ObjectStorageBucket',
-            dataType: 'text',
-            contentType: 'application/json',
-            data: JSON.stringify(request),
-            success: function(resp) {
-                let response_json = JSON.parse(resp);
-                regionOkitJson[region].load({object_storage_buckets: response_json});
-                for (let artifact of response_json) {
-                    console.info(me.getArtifactReference() + ' Query : ' + artifact.display_name);
-                }
-                redrawSVGCanvas(region);
-                $('#' + object_storage_bucket_query_cb).prop('checked', true);
-                queryCount--;
-                hideQueryProgressIfComplete();
-            },
-            error: function(xhr, status, error) {
-                console.info('Status : ' + status)
-                console.info('Error : ' + error)
-                $('#' + object_storage_bucket_query_cb).prop('checked', true);
-                queryCount--;
-                hideQueryProgressIfComplete();
-            }
-        });
-    }
-}
-
-$(document).ready(function() {
-    // Setup Search Checkbox
-    let body = d3.select('#query-progress-tbody');
-    let row = body.append('tr');
-    let cell = row.append('td');
-    cell.append('input')
-        .attr('type', 'checkbox')
-        .attr('id', object_storage_bucket_query_cb);
-    cell.append('label').text(ObjectStorageBucket.getArtifactReference());
-
-    // Setup Query Display Form
-    body = d3.select('#query-oci-tbody');
-    row = body.append('tr');
-    cell = row.append('td')
-        .text(ObjectStorageBucket.getArtifactReference());
-    cell = row.append('td');
-    let input = cell.append('input')
-        .attr('type', 'text')
-        .attr('class', 'query-filter')
-        .attr('id', 'object_storage_bucket_name_filter')
-        .attr('name', 'object_storage_bucket_name_filter');
-});
diff --git a/okitweb/static/okit/js/oci_artefacts/subnet.js b/okitweb/static/okit/js/oci_artefacts/subnet.js
deleted file mode 100644
index e3ee66d3e..000000000
--- a/okitweb/static/okit/js/oci_artefacts/subnet.js
+++ /dev/null
@@ -1,329 +0,0 @@
-/*
-** Copyright (c) 2020, Oracle and/or its affiliates.
-** Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl.
-*/
-console.info('Loaded Subnet Javascript');
-
-
-const subnet_query_cb = "subnet-query-cb";
-
-/*
-** Define Subnet Artifact Class
- */
-class Subnet extends OkitContainerArtifact {
-    /*
-    ** Create
-     */
-    constructor (data={}, okitjson={}, parent=null) {
-        super(okitjson);
-        this.parent_id = data.parent_id;
-        // Configure default values
-        this.display_name = this.generateDefaultName(okitjson.subnets.length + 1);
-        this.compartment_id = '';
-        this.vcn_id = data.parent_id;
-        this.cidr_block = this.generateCIDR(this.vcn_id);
-        this.dns_label = this.display_name.toLowerCase().slice(-5);
-        this.prohibit_public_ip_on_vnic = false;
-        this.route_table_id = '';
-        this.security_list_ids = [];
-        this.availability_domain = '0';
-        this.is_ipv6enabled = false;
-        this.ipv6cidr_block = '';
-        // Update with any passed data
-        this.merge(data);
-        this.convert();
-        // Add Get Parent function
-        if (parent !== null) {
-            this.getParent = () => {return parent};
-        }
-    }
-
-
-    /*
-    ** Clone Functionality
-     */
-    clone() {
-        return new Subnet(this, this.getOkitJson());
-    }
-
-
-    /*
-    ** Delete Processing
-     */
-    deleteChildren() {
-        console.groupCollapsed('Deleting Children of ' + this.getArtifactReference() + ' : ' + this.display_name);
-        // Remove Instances
-        this.getOkitJson().instances = this.getOkitJson().instances.filter(function(child) {
-            if (child.primary_vnic.subnet_id === this.id) {
-                console.info('Deleting ' + child.display_name);
-                //child.delete();
-                return false; // So the filter removes the element
-            }
-            return true;
-        }, this);
-        for (let instance of this.getOkitJson().instances) {
-            instance.vnics = instance.vnics.filter(function(child) {
-                if (child.subnet_id === this.id) {
-                    console.info('Deleting ' + child.hostname_label);
-                    return false; // So the filter removes the element
-                }
-                return true;
-            }, this);
-        }
-        // Remove Load Balancers
-        this.getOkitJson().load_balancers = this.getOkitJson().load_balancers.filter(function(child) {
-            if (child.subnet_id === this.id) {
-                console.info('Deleting ' + child.display_name);
-                //child.delete();
-                return false; // So the filter removes the element
-            }
-            return true;
-        }, this);
-        // Remove File Storage Systems
-        this.getOkitJson().file_storage_systems = this.getOkitJson().file_storage_systems.filter(function(child) {
-            if (child.subnet_id === this.id) {
-                console.info('Deleting ' + child.display_name);
-                //child.delete();
-                return false; // So the filter removes the element
-            }
-            return true;
-        }, this);
-        console.groupEnd();
-    }
-
-
-    /*
-     ** SVG Processing
-     */
-    draw() {
-        this.parent_id = this.vcn_id;
-        let id = this.id;
-        console.groupCollapsed('Drawing ' + Subnet.getArtifactReference() + ' : ' + this.id + ' [' + this.parent_id + ']');
-        let me = this;
-        let svg = super.draw();
-        let fill = d3.select(d3Id(this.id)).attr('fill');
-        svg.on("mouseover", function () {
-            d3.selectAll(d3Id(me.id + '-vnic')).attr('fill', svg_highlight_colour);
-            d3.event.stopPropagation();
-        });
-        svg.on("mouseout", function () {
-            d3.selectAll(d3Id(me.id + '-vnic')).attr('fill', fill);
-            d3.event.stopPropagation();
-        });
-        this.drawAttachments();
-        console.groupEnd();
-    }
-
-    drawAttachments() {
-        console.info('Drawing ' + Subnet.getArtifactReference() + ' : ' + this.id + ' Attachments');
-        let attachment_count = 0;
-        // Draw Route Table
-        if (this.route_table_id !== '') {
-            let attached_artefact = new RouteTable(this.getOkitJson().getRouteTable(this.route_table_id), this.getOkitJson(), this);
-            let parent_id = attached_artefact['parent_id'];
-            attached_artefact['parent_id'] = this.id;
-            console.info('Drawing ' + this.getArtifactReference() + ' Route Table : ' + attached_artefact.display_name);
-            attached_artefact.draw();
-            attached_artefact['parent_id'] = parent_id;
-            attachment_count += 1;
-        }
-        // Security Lists
-        for (let security_list_id of this.security_list_ids) {
-            let attached_artefact = new SecurityList(this.getOkitJson().getSecurityList(security_list_id), this.getOkitJson(), this);
-            let parent_id = attached_artefact['parent_id'];
-            attached_artefact['parent_id'] = this.id;
-            console.info('Drawing ' + this.getArtifactReference() + ' Security List : ' + attached_artefact.display_name);
-            attached_artefact.draw();
-            attached_artefact['parent_id'] = parent_id;
-            attachment_count += 1;
-        }
-    }
-
-    getSvgDefinition() {
-        console.groupCollapsed('Getting Definition of ' + this.getArtifactReference() + ' : ' + this.id);
-        let dimensions = this.getDimensions(this.id);
-        let definition = this.newSVGDefinition(this, Subnet.getArtifactReference());
-        // Get Parents First Child Container Offset
-        let parent_first_child = this.getParent().getChildOffset(this.getArtifactReference());
-        definition['svg']['x'] = parent_first_child.dx;
-        definition['svg']['y'] = parent_first_child.dy;
-        definition['svg']['width'] = dimensions['width'];
-        definition['svg']['height'] = dimensions['height'];
-        definition['rect']['stroke']['colour'] = stroke_colours.orange;
-        definition['rect']['stroke']['dash'] = 5;
-        definition['rect']['stroke']['width'] = 2;
-        definition['icon']['x_translation'] = icon_translate_x_start;
-        definition['icon']['y_translation'] = icon_translate_y_start;
-        definition['name']['show'] = true;
-        definition['label']['show'] = true;
-        if (this.prohibit_public_ip_on_vnic) {
-            definition['label']['text'] = 'Private ' + Subnet.getArtifactReference();
-        } else  {
-            definition['label']['text'] = 'Public ' + Subnet.getArtifactReference();
-        }
-        definition['info']['show'] = true;
-        definition['info']['text'] = this.cidr_block;
-        console.info(JSON.stringify(definition, null, 2));
-        console.groupEnd();
-        return definition;
-    }
-
-    getDimensions() {
-        return super.getDimensions('subnet_id');
-    }
-
-    getMinimumDimensions() {
-        return {width: 400, height: 150};
-    }
-
-
-    /*
-    ** Property Sheet Load function
-     */
-    loadProperties() {
-        let okitJson = this.getOkitJson();
-        let me = this;
-        $(jqId(PROPERTIES_PANEL)).load("propertysheets/subnet.html", () => {
-            // Load Referenced Ids
-            let route_table_select = $(jqId('route_table_id'));
-            route_table_select.append($('<option>').attr('value', '').text(''));
-            for (let route_table of okitJson.route_tables) {
-                if (me.vcn_id === route_table.vcn_id) {
-                    route_table_select.append($('<option>').attr('value', route_table.id).text(route_table.display_name));
-                }
-            }
-            let security_lists_select = $(jqId('security_list_ids'));
-            for (let security_list of okitJson.security_lists) {
-                if (me.vcn_id === security_list.vcn_id) {
-                    security_lists_select.append($('<option>').attr('value', security_list.id).text(security_list.display_name));
-                }
-            }
-            // Load Properties
-            loadPropertiesSheet(me);
-        });
-    }
-
-
-    /*
-    ** Utility Methods
-     */
-    generateCIDR(vcn_id) {
-        let vcn_cidr = '10.0.0.0/16';
-        for (let virtual_cloud_network of this.getOkitJson()['virtual_cloud_networks']) {
-            if (virtual_cloud_network['id'] == vcn_id) {
-                vcn_cidr = virtual_cloud_network['cidr_block'];
-                break;
-            }
-        }
-        let vcn_octets = vcn_cidr.split('/')[0].split('.');
-        for (let i = 0; i < this.getOkitJson().subnets.length; i++) {
-            if (this.getOkitJson().subnets[i].id === this.id) {
-                return vcn_octets[0] + '.' + vcn_octets[1] + '.' + i + '.' + vcn_octets[3] + '/24';
-            }
-        }
-        return vcn_octets[0] + '.' + vcn_octets[1] + '.' + this.getOkitJson().subnets.length + '.' + vcn_octets[3] + '/24';
-    }
-
-
-    /*
-    ** Child Artifact Functions
-     */
-    getTopEdgeArtifacts() {
-        return [RouteTable.getArtifactReference(), SecurityList.getArtifactReference()];
-    }
-
-    getTopArtifacts() {
-        return [LoadBalancer.getArtifactReference()];
-    }
-
-    getBottomArtifacts() {
-        return [Instance.getArtifactReference()];
-    }
-
-    getLeftArtifacts() {
-        return [FileStorageSystem.getArtifactReference(), DatabaseSystem.getArtifactReference()];
-    }
-
-
-    /*
-    ** Container Specific Overrides
-     */
-
-    getNamePrefix() {
-        return super.getNamePrefix() + 'sn';
-    }
-
-    /*
-    ** Static Functionality
-     */
-    static getArtifactReference() {
-        return 'Subnet';
-    }
-
-    static getDropTargets() {
-        return [VirtualCloudNetwork.getArtifactReference()];
-    }
-
-    static query(request = {}, region='') {
-        console.info('------------- Subnet Query --------------------');
-        console.info('------------- Compartment           : ' + request.compartment_id);
-        console.info('------------- Virtual Cloud Network : ' + request.vcn_id);
-        let me = this;
-        queryCount++;
-        $.ajax({
-            type: 'get',
-            url: 'oci/artifacts/Subnet',
-            dataType: 'text',
-            contentType: 'application/json',
-            data: JSON.stringify(request),
-            success: function (resp) {
-                let response_json = JSON.parse(resp);
-                regionOkitJson[region].load({subnets: response_json});
-                for (let artifact of response_json) {
-                    console.info(me.getArtifactReference() + ' Query : ' + artifact.display_name);
-                    me.querySubComponents(request, region, artifact.id);
-                }
-                redrawSVGCanvas(region);
-                $('#' + subnet_query_cb).prop('checked', true);
-                queryCount--;
-                hideQueryProgressIfComplete();
-            },
-            error: function (xhr, status, error) {
-                console.info('Status : ' + status)
-                console.info('Error : ' + error)
-                $('#' + subnet_query_cb).prop('checked', true);
-                queryCount--;
-                hideQueryProgressIfComplete();
-            }
-        });
-    }
-
-    static querySubComponents(request = {}, region='', id='') {
-        let sub_query_request = JSON.clone(request);
-        sub_query_request.subnet_id = id;
-        LoadBalancer.query(sub_query_request, region);
-    }
-}
-
-$(document).ready(function () {
-    // Setup Search Checkbox
-    let body = d3.select('#query-progress-tbody');
-    let row = body.append('tr');
-    let cell = row.append('td');
-    cell.append('input')
-        .attr('type', 'checkbox')
-        .attr('id', subnet_query_cb);
-    cell.append('label').text(Subnet.getArtifactReference());
-
-    // Setup Query Display Form
-    body = d3.select('#query-oci-tbody');
-    row = body.append('tr');
-    cell = row.append('td')
-        .text(Subnet.getArtifactReference());
-    cell = row.append('td');
-    let input = cell.append('input')
-        .attr('type', 'text')
-        .attr('class', 'query-filter')
-        .attr('id', 'subnet_name_filter')
-        .attr('name', 'subnet_name_filter');
-});
diff --git a/okitweb/static/okit/js/oci_artefacts/virtual_cloud_network.js b/okitweb/static/okit/js/oci_artefacts/virtual_cloud_network.js
deleted file mode 100644
index 51486cc3e..000000000
--- a/okitweb/static/okit/js/oci_artefacts/virtual_cloud_network.js
+++ /dev/null
@@ -1,400 +0,0 @@
-/*
-** Copyright (c) 2020, Oracle and/or its affiliates.
-** Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl.
-*/
-console.info('Loaded Virtual Cloud Network Javascript');
-
-const virtual_cloud_network_query_cb = "virtual-cloud-network-query-cb";
-
-/*
-** Define Virtual Cloud Network Artifact Class
- */
-class VirtualCloudNetwork extends OkitContainerArtifact {
-    /*
-    ** Create
-     */
-    constructor (data={}, okitjson={}, parent=null) {
-        super(okitjson);
-        this.parent_id = data.parent_id;
-        // Configure default values
-        this.display_name = this.generateDefaultName(okitjson.virtual_cloud_networks.length + 1);
-        this.compartment_id = data.parent_id;
-        // Generate Cidr
-        this.cidr_block = '10.' + okitjson.virtual_cloud_networks.length + '.0.0/16';
-        this.dns_label = this.display_name.toLowerCase().slice(-6);
-        this.is_ipv6enabled = false;
-        this.ipv6cidr_block = '';
-        // Update with any passed data
-        this.merge(data);
-        this.convert();
-        // Add Get Parent function
-        if (parent !== null) {
-            this.getParent = () => {return parent};
-        }
-        console.groupCollapsed('Check if default Security List & Route Table Should be created.');
-        if (okitSettings.is_default_route_table) {
-            console.info('Creating Default Route Table');
-            this.getOkitJson().newRouteTable({parent_id: this.id, vcn_id: this.id, compartment_id: this.compartment_id}, this);
-        }
-        if (okitSettings.is_default_security_list) {
-            console.info('Creating Default Security List');
-            let security_list = this.getOkitJson().newSecurityList({parent_id: this.id, vcn_id: this.id, compartment_id: this.compartment_id}, this);
-            security_list.addDefaultSecurityListRules(this.cidr_block);
-        }
-        console.groupEnd();
-    }
-
-
-    /*
-    ** Clone Functionality
-     */
-    clone() {
-        return new VirtualCloudNetwork(this, this.getOkitJson());
-    }
-
-
-    /*
-    ** Delete Processing
-     */
-    deleteChildren() {
-        console.groupCollapsed('Deleting Children of ' + this.getArtifactReference() + ' : ' + this.display_name);
-        // Remove Subnets
-        this.getOkitJson().subnets = this.getOkitJson().subnets.filter(function(child) {
-            if (child.vcn_id === this.id) {
-                console.info('Deleting ' + child.display_name);
-                child.delete();
-                return false; // So the filter removes the element
-            }
-            return true;
-        }, this);
-        // Remove Route_tables
-        this.getOkitJson().route_tables = this.getOkitJson().route_tables.filter(function(child) {
-            if (child.vcn_id === this.id) {
-                console.info('Deleting ' + child.display_name);
-                child.delete();
-                return false; // So the filter removes the element
-            }
-            return true;
-        }, this);
-        // Remove Security Lists
-        this.getOkitJson().security_lists = this.getOkitJson().security_lists.filter(function(child) {
-            if (child.vcn_id === this.id) {
-                console.info('Deleting ' + child.display_name);
-                child.delete();
-                return false; // So the filter removes the element
-            }
-            return true;
-        }, this);
-        // Remove Internet Gateways
-        this.getOkitJson().internet_gateways = this.getOkitJson().internet_gateways.filter(function(child) {
-            if (child.vcn_id === this.id) {
-                console.info('Deleting ' + child.display_name);
-                child.delete();
-                return false; // So the filter removes the element
-            }
-            return true;
-        }, this);
-        // Remove NAT Gateways
-        this.getOkitJson().nat_gateways = this.getOkitJson().nat_gateways.filter(function(child) {
-            if (child.vcn_id === this.id) {
-                console.info('Deleting ' + child.display_name);
-                child.delete();
-                return false; // So the filter removes the element
-            }
-            return true;
-        }, this);
-        // Remove Service Gateways
-        this.getOkitJson().service_gateways = this.getOkitJson().service_gateways.filter(function(child) {
-            if (child.vcn_id === this.id) {
-                console.info('Deleting ' + child.display_name);
-                child.delete();
-                return false; // So the filter removes the element
-            }
-            return true;
-        }, this);
-        // Local Peering Gateways
-        this.getOkitJson().local_peering_gateways = this.getOkitJson().local_peering_gateways.filter(function(child) {
-            if (child.vcn_id === this.id) {
-                console.info('Deleting ' + child.display_name);
-                child.delete();
-                return false; // So the filter removes the element
-            }
-            return true;
-        }, this);
-        console.groupEnd();
-    }
-
-
-    /*
-     ** SVG Processing
-     */
-    draw() {
-        this.parent_id = this.compartment_id;
-        console.groupCollapsed('Drawing ' + VirtualCloudNetwork.getArtifactReference() + ' : ' + this.id + ' [' + this.parent_id + ']');
-        let me = this;
-        let svg = super.draw();
-        console.groupEnd();
-    }
-
-    getSvgDefinition() {
-        console.groupCollapsed('Getting Definition of ' + this.getArtifactReference() + ' : ' + this.id);
-        let dimensions = this.getDimensions(this.id);
-        let definition = this.newSVGDefinition(this, VirtualCloudNetwork.getArtifactReference());
-        //let parent_first_child = getCompartmentFirstChildContainerOffset(this.compartment_id);
-        let parent_first_child = this.getParent().getChildOffset(this.getArtifactReference());
-        definition['svg']['x'] = parent_first_child.dx;
-        definition['svg']['y'] = parent_first_child.dy;
-        definition['svg']['width'] = dimensions['width'];
-        definition['svg']['height'] = dimensions['height'];
-        definition['rect']['stroke']['colour'] = stroke_colours.orange;
-        definition['rect']['stroke']['dash'] = 5;
-        definition['rect']['stroke']['width'] = 2;
-        definition['icon']['x_translation'] = icon_translate_x_start;
-        definition['icon']['y_translation'] = icon_translate_y_start;
-        definition['name']['show'] = true;
-        definition['label']['show'] = true;
-        definition['info']['show'] = true;
-        definition['info']['text'] = this.cidr_block;
-        console.info(JSON.stringify(definition, null, 2));
-        console.groupEnd();
-        return definition;
-    }
-
-    getDimensions() {
-        return super.getDimensions('vcn_id');
-    }
-
-    getMinimumDimensions() {
-        return {width: 400, height: 300};
-    }
-
-
-    /*
-    ** Property Sheet Load function
-     */
-    loadProperties() {
-        let okitJson = this.getOkitJson();
-        let me = this;
-        $(jqId(PROPERTIES_PANEL)).load("propertysheets/virtual_cloud_network.html", () => {
-            loadPropertiesSheet(me);
-            $(jqId('cidr_block')).on('change', function() {
-                console.info('CIDR Block Changed ' + $(jqId('cidr_block')).val());
-                for (let subnet of me.getOkitJson().subnets) {
-                    if (subnet.vcn_id === me.id) {
-                        subnet.cidr_block = subnet.generateCIDR(me.id);
-                    }
-                }
-                redrawSVGCanvas();
-            });
-        });
-    }
-
-
-    /*
-    ** Artifact Specific Functions
-     */
-    hasUnattachedSecurityList() {
-        for (let security_list of this.getOkitJson().security_lists) {
-            if (security_list.vcn_id === this.id) {
-                return true;
-            }
-        }
-        return false;
-    }
-
-    hasUnattachedRouteTable() {
-         for (let route_table of this.getOkitJson().route_tables) {
-            if (route_table.vcn_id === this.id) {
-                return true;
-            }
-        }
-        return false;
-    }
-
-    getGateways() {
-        let gateways = [];
-        // Internet Gateways
-        gateways.push(...this.getInternetGateways());
-        // NAT Gateways
-        gateways.push(...this.getNATGateways());
-        // Local Peering Gateways
-        gateways.push(...this.getLocalPeeringGateways());
-        // Service Gateways
-        gateways.push(...this.getServiceGateways());
-        // Dynamic Routing Gateways
-        gateways.push(...this.getDynamicRoutingGateways());
-        return gateways;
-    }
-
-    getInternetGateways() {
-        let gateways = [];
-        // Internet Gateways
-        for (let gateway of this.getOkitJson().internet_gateways) {
-            if (gateway.vcn_id === this.id) {
-                gateways.push(gateway);
-            }
-        }
-        return gateways;
-    }
-
-    getNATGateways() {
-        let gateways = [];
-        // NAT Gateways
-        for (let gateway of this.getOkitJson().nat_gateways) {
-            if (gateway.vcn_id === this.id) {
-                gateways.push(gateway);
-            }
-        }
-        return gateways;
-    }
-
-    getLocalPeeringGateways() {
-        let gateways = [];
-        // NAT Gateways
-        for (let gateway of this.getOkitJson().local_peering_gateways) {
-            if (gateway.vcn_id === this.id) {
-                gateways.push(gateway);
-            }
-        }
-        return gateways;
-    }
-
-    getServiceGateways() {
-        let gateways = [];
-        // Service Gateways
-        for (let gateway of this.getOkitJson().service_gateways) {
-            if (gateway.vcn_id === this.id) {
-                gateways.push(gateway);
-            }
-        }
-        return gateways;
-    }
-
-    getDynamicRoutingGateways() {
-        let gateways = [];
-        // Dynamic Routing Gateways
-        for (let gateway of this.getOkitJson().dynamic_routing_gateways) {
-            if (gateway.vcn_id === this.id) {
-                gateways.push(gateway);
-            }
-        }
-        return gateways;
-    }
-
-
-    /*
-    ** Child Artifact Functions
-     */
-    getTopEdgeArtifacts() {
-        return [InternetGateway.getArtifactReference(), NATGateway.getArtifactReference()];
-    }
-
-    getTopArtifacts() {
-        return [RouteTable.getArtifactReference(), SecurityList.getArtifactReference(), NetworkSecurityGroup.getArtifactReference()];
-    }
-
-    getContainerArtifacts() {
-        return [Subnet.getArtifactReference()];
-    }
-
-    getRightEdgeArtifacts() {
-        return[ServiceGateway.getArtifactReference(), DynamicRoutingGateway.getArtifactReference(), LocalPeeringGateway.getArtifactReference()]
-    }
-
-    getBottomEdgeArtifacts() {
-        return [];
-    }
-
-
-    /*
-    ** Container Specific Overrides
-     */
-    // return the name of the element used by the child to reference this artifact
-    getParentKey() {
-        return 'vcn_id';
-    }
-
-    getNamePrefix() {
-        return super.getNamePrefix() + 'vcn';
-    }
-
-    /*
-    ** Static Functionality
-     */
-    static getArtifactReference() {
-        return 'Virtual Cloud Network';
-    }
-
-    static getDropTargets() {
-        return [Compartment.getArtifactReference()];
-    }
-
-    static query(request = {}, region='') {
-        console.info('------------- Virtual Cloud Network Query --------------------');
-        console.info('------------- Compartment           : ' + request.compartment_id);
-        let me = this;
-        queryCount++;
-        $.ajax({
-            type: 'get',
-            url: 'oci/artifacts/VirtualCloudNetwork',
-            dataType: 'text',
-            contentType: 'application/json',
-            data: JSON.stringify(request),
-            success: function(resp) {
-                let response_json = JSON.parse(resp);
-                regionOkitJson[region].load({virtual_cloud_networks: response_json});
-                for (let artifact of response_json) {
-                    console.info(me.getArtifactReference() + ' Query : ' + artifact.display_name);
-                    me.querySubComponents(request, region, artifact.id);
-                }
-                redrawSVGCanvas(region);
-                $('#' + virtual_cloud_network_query_cb).prop('checked', true);
-                queryCount--;
-                hideQueryProgressIfComplete();
-            },
-            error: function(xhr, status, error) {
-                console.info('Status : ' + status)
-                console.info('Error  : ' + error)
-                $('#' + virtual_cloud_network_query_cb).prop('checked', true);
-                queryCount--;
-                hideQueryProgressIfComplete();
-            }
-        });
-    }
-
-    static querySubComponents(request = {}, region='', id='') {
-        let sub_query_request = JSON.clone(request);
-        sub_query_request.vcn_id = id;
-        InternetGateway.query(sub_query_request, region);
-        NATGateway.query(sub_query_request, region);
-        NetworkSecurityGroup.query(sub_query_request, region);
-        ServiceGateway.query(sub_query_request, region);
-        LocalPeeringGateway.query(sub_query_request, region);
-        RouteTable.query(sub_query_request, region);
-        SecurityList.query(sub_query_request, region);
-        Subnet.query(sub_query_request, region);
-    }
-}
-
-$(document).ready(function() {
-    // Setup Search Checkbox
-    let body = d3.select('#query-progress-tbody');
-    let row = body.append('tr');
-    let cell = row.append('td');
-    cell.append('input')
-        .attr('type', 'checkbox')
-        .attr('id', virtual_cloud_network_query_cb);
-    cell.append('label').text(VirtualCloudNetwork.getArtifactReference());
-
-    // Setup Query Display Form
-    body = d3.select('#query-oci-tbody');
-    row = body.append('tr');
-    cell = row.append('td')
-        .text(VirtualCloudNetwork.getArtifactReference());
-    cell = row.append('td');
-    let input = cell.append('input')
-        .attr('type', 'text')
-        .attr('class', 'query-filter')
-        .attr('id', 'virtual_cloud_network_name_filter')
-        .attr('name', 'virtual_cloud_network_name_filter');
-});
diff --git a/okitweb/static/okit/js/oci_artefacts/virtual_network_interface.js b/okitweb/static/okit/js/oci_artefacts/virtual_network_interface.js
deleted file mode 100644
index 560ba2f08..000000000
--- a/okitweb/static/okit/js/oci_artefacts/virtual_network_interface.js
+++ /dev/null
@@ -1,168 +0,0 @@
-/*
-** Copyright (c) 2020, Oracle and/or its affiliates.
-** Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl.
-*/
-console.info('Loaded Virtual Network Interface Javascript');
-
-/*
-** Set Artifact Constants
- */
-
-/*
-** Define Virtual Network Interface Class
- */
-class VirtualNetworkInterface extends OkitArtifact {
-    /*
-    ** Create
-     */
-    constructor (data={}, okitjson={}, parent=null) {
-        super(okitjson);
-        this.parent_id = data.parent_id;
-        // Configure default values
-        this.display_name = this.generateDefaultName(okitjson.subnets.length + 1);
-        this.compartment_id = '';
-        this.instance_id = data.parent_id;
-        this.vcn_id = data.parent_id;
-        this.cidr_block = '';
-        this.dns_label = this.display_name.toLowerCase().slice(-5);
-        this.prohibit_public_ip_on_vnic = false;
-        this.route_table_id = '';
-        this.security_list_ids = [];
-        // Update with any passed data
-        this.merge(data);
-        this.convert();
-        // Add Get Parent function
-        this.parent_id = this.instance_id;
-        if (parent !== null) {
-            this.getParent = () => {return parent};
-        }
-    }
-
-
-    /*
-    ** Clone Functionality
-     */
-    clone() {
-        return new VirtualNetworkInterface(this, this.getOkitJson());
-    }
-
-
-    /*
-    ** Delete Processing
-     */
-    deleteChildren() {}
-
-
-    /*
-     ** SVG Processing
-     */
-    draw() {
-        console.groupCollapsed('Drawing ' + this.getArtifactReference() + ' : ' + this.id + ' [' + this.parent_id + ']');
-        let me = this;
-        let svg = super.draw();
-        console.groupEnd();
-        return svg;
-    }
-
-    // Return Artifact Specific Definition.
-    getSvgDefinition() {
-        console.groupCollapsed('Getting Definition of ' + this.getArtifactReference() + ' : ' + this.id);
-        let definition = this.newSVGDefinition(this, this.getArtifactReference());
-        let dimensions = this.getDimensions();
-        let first_child = this.getParent().getChildOffset(this.getArtifactReference());
-        definition['svg']['x'] = first_child.dx;
-        definition['svg']['y'] = first_child.dy;
-        definition['svg']['width'] = dimensions['width'];
-        definition['svg']['height'] = dimensions['height'];
-        definition['rect']['stroke']['colour'] = stroke_colours.bark;
-        definition['rect']['stroke']['dash'] = 1;
-        console.info(JSON.stringify(definition, null, 2));
-        console.groupEnd();
-        return definition;
-    }
-
-    // Return Artifact Dimensions
-    getDimensions() {
-        console.groupCollapsed('Getting Dimensions of ' + this.getArtifactReference() + ' : ' + this.id);
-        let dimensions = this.getMinimumDimensions();
-        // Calculate Size based on Child Artifacts
-        // Check size against minimum
-        dimensions.width  = Math.max(dimensions.width,  this.getMinimumDimensions().width);
-        dimensions.height = Math.max(dimensions.height, this.getMinimumDimensions().height);
-        console.info('Overall Dimensions       : ' + JSON.stringify(dimensions));
-        console.groupEnd();
-        return dimensions;
-    }
-
-    getMinimumDimensions() {
-        return {width: icon_width, height:icon_height};
-    }
-
-
-    /*
-    ** Property Sheet Load function
-     */
-    loadProperties() {
-        let okitJson = this.getOkitJson();
-        let me = this;
-        $(jqId(PROPERTIES_PANEL)).load("propertysheets/template_artifact.html", () => {loadPropertiesSheet(me);});
-    }
-
-
-    /*
-    ** Child Offset Functions
-     */
-    getFirstChildOffset() {
-        let offset = {
-            dx: Math.round(positional_adjustments.padding.x + positional_adjustments.spacing.x),
-            dy: Math.round(positional_adjustments.padding.y + positional_adjustments.spacing.y * 2)
-        };
-        return offset;
-    }
-
-    getContainerChildOffset() {
-        let offset = this.getFirstContainerChildOffset();
-        return offset;
-    }
-
-    getTopEdgeChildOffset() {
-        let offset = this.getFirstTopEdgeChildOffset();
-        return offset;
-    }
-
-    getBottomEdgeChildOffset() {}
-
-    getLeftEdgeChildOffset() {}
-
-    getRightEdgeChildOffset() {}
-
-    getTopChildOffset() {
-        let offset = this.getTopEdgeChildOffset();
-        return offset;
-    }
-    getBottomChildOffset() {}
-
-    getLeftChildOffset() {}
-
-    getRightChildOffset() {}
-
-
-    getNamePrefix() {
-        return super.getNamePrefix() + 'vnic';
-    }
-
-    /*
-    ** Static Functionality
-     */
-    static getArtifactReference() {
-        return 'Virtual Network Interface';
-    }
-
-    static getDropTargets() {
-        return [];
-    }
-
-    static query(request = {}, region='') {}
-
-}
-
diff --git a/okitweb/static/okit/js/okit.js b/okitweb/static/okit/js/okit.js
index 05759000e..9f680e5c8 100644
--- a/okitweb/static/okit/js/okit.js
+++ b/okitweb/static/okit/js/okit.js
@@ -19,14 +19,27 @@ let selectedArtefact = null;
  */
 class OkitOCIConfig {
     constructor() {
+        this.results = [];
+        this.validate();
         this.load();
     }
 
     load() {
         let me = this;
-        $.getJSON('config/sections', function(resp) {$.extend(true, me, resp);console.info('Sections Response '+resp);});
+        $.getJSON('config/sections', function(resp) {$.extend(true, me, resp);console.info('Sections Response ' + JSON.stringify(resp));});
         console.info(this);
     }
+
+    validate() {
+        let me = this;
+        $.getJSON('config/validate', function(resp) {
+            console.info('Validate Response ' + JSON.stringify(resp));
+            me.results = resp.results;
+            if (me.results.length > 0) {
+                $('#config_link').removeClass('hidden');
+            }
+        });
+    }
 }
 
 class OkitOCIData {
@@ -131,6 +144,7 @@ class OkitSettings {
         this.icons_only = true;
         this.last_used_region = '';
         this.last_used_compartment = '';
+        this.hide_attached = true;
         this.load();
     }
 
@@ -150,6 +164,7 @@ class OkitSettings {
 
     save() {
         createCookie(this.getCookieName(), JSON.stringify(this));
+        console.info(this);
         redrawSVGCanvas();
     }
 
@@ -180,6 +195,7 @@ class OkitSettings {
                 me.is_timestamp_files = $(jqId('is_timestamp_files')).is(':checked');
                 me.is_optional_expanded = $(jqId('is_optional_expanded')).is(':checked');
                 me.is_variables = $(jqId('is_variables')).is(':checked');
+                me.hide_attached = $(jqId('hide_attached')).is(':checked');
                 me.profile = $(jqId('profile')).val();
                 me.save();
                 $(jqId('modal_dialog_wrapper')).addClass('hidden');
@@ -191,6 +207,7 @@ class OkitSettings {
         if (panel_name && panel_name !== '') {
             $(jqId(panel_name)).empty();
             let me = this;
+            // Build Table
             let table = d3.select(d3Id(panel_name)).append('div').append('div')
                 .attr('id', 'preferences_table')
                 .attr('class', 'table okit-table okit-modal-dialog-table');
@@ -206,7 +223,7 @@ class OkitSettings {
                 .property('checked', this.is_display_grid)
                 .on('change', function () {
                     if (autosave) {
-                        me.is_display_grid = $(this).is(':checked');
+                        me.is_display_grid = $('#is_display_grid').is(':checked');
                         me.save();
                     }
                 });
@@ -224,7 +241,7 @@ class OkitSettings {
                 .property('checked', this.is_default_route_table)
                 .on('change', function () {
                     if (autosave) {
-                        me.is_default_route_table = $(this).is(':checked');
+                        me.is_default_route_table = $('#is_default_route_table').is(':checked');
                         me.save();
                     }
                 });
@@ -242,7 +259,7 @@ class OkitSettings {
                 .property('checked', this.is_default_security_list)
                 .on('change', function () {
                     if (autosave) {
-                        me.is_default_security_list = $(this).is(':checked');
+                        me.is_default_security_list = $('#is_default_security_list').is(':checked');
                         me.save();
                     }
                 });
@@ -260,7 +277,7 @@ class OkitSettings {
                 .property('checked', this.is_timestamp_files)
                 .on('change', function () {
                     if (autosave) {
-                        me.is_timestamp_files = $(this).is(':checked');
+                        me.is_timestamp_files = $('#is_timestamp_files').is(':checked');
                         me.save();
                     }
                 });
@@ -278,7 +295,7 @@ class OkitSettings {
                 .property('checked', this.is_optional_expanded)
                 .on('change', function () {
                     if (autosave) {
-                        me.is_optional_expanded = $(this).is(':checked');
+                        me.is_optional_expanded = $('#is_optional_expanded').is(':checked');
                         me.save();
                     }
                 });
@@ -296,13 +313,31 @@ class OkitSettings {
                 .property('checked', this.is_variables)
                 .on('change', function () {
                     if (autosave) {
-                        me.is_optional_expanded = $(this).is(':checked');
+                        me.is_variables = $('#is_variables').is(':checked');
                         me.save();
                     }
                 });
             td.append('label')
                 .attr('for', 'is_variables')
                 .text('Use Variables in Generate');
+            // Hide Attached Artefacts
+            tr = tbody.append('div').attr('class', 'tr');
+            tr.append('div').attr('class', 'td').text('');
+            td = tr.append('div').attr('class', 'td');
+            td.append('input')
+                .attr('id', 'hide_attached')
+                .attr('name', 'hide_attached')
+                .attr('type', 'checkbox')
+                .property('checked', this.hide_attached)
+                .on('change', function () {
+                    if (autosave) {
+                        me.hide_attached = $('#hide_attached').is(':checked');
+                        me.save();
+                    }
+                });
+            td.append('label')
+                .attr('for', 'hide_attached')
+                .text('Hide Attached Artefacts');
             /*
             // Config Profile
             tr = tbody.append('div').attr('class', 'tr');
@@ -328,1821 +363,3 @@ class OkitSettings {
     }
 
 }
-
-class OkitArtifact {
-    /*
-    ** Create
-     */
-    constructor (okitjson) {
-        this.getOkitJson = function() {return okitjson};
-        // Add Id
-        this.id = 'okit.' + this.constructor.name.toLowerCase() + '.' + uuidv4();
-        this.parent_id = null;
-        // Add default for common Tag variables
-        this.freeform_tags = {};
-        this.defined_tags = {};
-    }
-
-
-    /*
-    ** Clone Functionality
-     */
-    clone() {
-        alert('Clone function "clone()" has not been implemented.');
-        return;
-    }
-
-    /*
-    ** Merge Functionality
-     */
-    merge(update) {
-        $.extend(true, this, update);
-    }
-
-    /*
-    ** Convert Functionality will be overridden to allow backwards compatibility
-     */
-    convert() {}
-
-    /*
-    ** Get this Artifacts Parent Object
-     */
-    getParent() {
-        if (this.getParentId() && $(jqId(this.getParentId())).data('type')) {
-            console.info('Parent Id : ' + this.getParentId());
-            const getFunction = 'get' + $(jqId(this.getParentId())).data('type').split(' ').join('');
-            console.info('>>>>>>>>> Parent ' + this.getOkitJson()[getFunction](this.getParentId()).display_name);
-            return this.getOkitJson()[getFunction](this.getParentId());
-        }
-        console.info('>>>>>>>>> Parent NULL');
-        return null;
-    }
-
-    getParentId() {
-        return this.parent_id;
-    }
-    /*
-    ** Get the Artifact name this Artifact will be know by.
-     */
-    getArtifactReference() {
-        //alert('Get Artifact Reference function "getArtifactReference()" has not been implemented.');
-        return this.constructor.getArtifactReference();
-    }
-
-    artifactToElement(name) {
-        return name.toLowerCase().split(' ').join('_') + 's';
-    }
-
-
-    /*
-    ** Delete Processing
-     */
-    delete() {
-        console.groupCollapsed('Delete (Default) ' + this.getArtifactReference() + ' : ' + this.id);
-        // Delete Child Artifacts
-        this.deleteChildren();
-        // Remove SVG Element
-        if ($(jqId(this.id + "-svg")).length) {$(jqId(this.id + "-svg")).remove()}
-        //d3.select("#" + this.id + "-svg").remove()
-        console.groupEnd();
-    }
-
-    deleteChildren() {
-        console.info('Default empty deleteChildren()');
-    }
-
-    getChildren(artifact) {
-        let children = [];
-        let key = this.getParentKey();
-        for (let child of this.getOkitJson()[this.artifactToElement(artifact)]) {
-            if (child[key] === this.id) {
-                children.push(child);
-            }
-        }
-        return children;
-    }
-
-
-    /*
-     ** SVG Processing
-     */
-    draw() {
-        console.groupCollapsed('Drawing (Default) ' + this.getArtifactReference() + ' : ' + this.id + ' [' + this.getParentId() + ']');
-        let svg = drawArtifact(this.getSvgDefinition());
-        /*
-        ** Add Properties Load Event to created svg. We require the definition of the local variable "me" so that it can
-        ** be used in the function dur to the fact that using "this" in the function will refer to the function not the
-        ** Artifact.
-         */
-        let me = this;
-        svg.on("click", function() {
-            console.info('Click........');
-            me.loadProperties();
-            $('.highlight:not(' + jqId(me.id) +')').removeClass('highlight');
-            $(jqId(me.id)).toggleClass('highlight');
-            $(jqId(me.id)).hasClass('highlight') ? selectedArtefact = me.id : selectedArtefact = null;
-            me.loadValueProposition();
-            d3.event.stopPropagation();
-        });
-        console.groupEnd();
-        return svg;
-    }
-
-    // Return Artifact Specific Definition.
-    getSvgDefinition() {
-        alert('Get Svg Definition function "getSvgDefinition()" has not been implemented.');
-        return;
-    }
-
-    // Return Artifact Dimensions
-    getDimensions() {
-        alert('Get Dimension function "getDimensions()" has not been implemented.');
-        return;
-    }
-
-    getMinimumDimensions() {
-        return {width: icon_width, height:icon_height};
-    }
-
-    newSVGDefinition(artifact, data_type) {
-        let definition = {};
-        definition['artifact'] = artifact;
-        definition['data_type'] = data_type;
-        definition['name'] = {show: false, text: artifact['display_name']};
-        definition['label'] = {show: false, text: data_type};
-        definition['info'] = {show: false, text: data_type};
-        definition['svg'] = {x: 0, y: 0, width: icon_width, height: icon_height};
-        definition['rect'] = {x: 0, y: 0,
-            width: icon_width, height: icon_height,
-            width_adjust: 0, height_adjust: 0,
-            stroke: {colour: '#F80000', dash: 5},
-            fill: 'white', style: 'fill-opacity: .25;'};
-        definition['icon'] = {show: true, x_translation: 0, y_translation: 0};
-        definition['title_keys'] = [];
-
-        return definition
-    }
-
-    isAttached() {return false;}
-
-    isParentOf(artifact) {
-        return (artifact && artifact.getParent() && artifact.getParent().id === this.id);
-    }
-
-    /*
-    ** Property Sheet Load function
-     */
-    loadProperties() {
-        alert('Load Properties function "loadProperties()" has not been implemented.')
-        return;
-    }
-
-
-    /*
-    ** Load and display Value Proposition
-     */
-    loadValueProposition() {
-        $(jqId(VALUE_PROPOSITION_PANEL)).load("valueproposition/oci.html");
-    }
-
-
-    /*
-    ** Child Offset Functions
-     */
-    getParentKey() {
-        return 'parent_id';
-    }
-
-    getChildOffset(child_type) {
-        console.groupCollapsed('Getting Offset for ' + child_type);
-        let offset = {dx: 0, dy: 0};
-        if (this.getTopEdgeArtifacts().includes(child_type)) {
-            console.info('Top Edge Artifact');
-            offset = this.getTopEdgeChildOffset();
-        } else if (this.getTopArtifacts().includes(child_type)) {
-            console.info('Top Artifact');
-            offset = this.getTopChildOffset();
-        } else if (this.getContainerArtifacts().includes(child_type)) {
-            console.info('Container Artifact');
-            offset = this.getContainerChildOffset();
-        } else if (this.getBottomArtifacts().includes(child_type)) {
-            console.info('Bottom Artifact');
-            offset = this.getBottomChildOffset();
-        } else if (this.getBottomEdgeArtifacts().includes(child_type)) {
-            console.info('Bottom Edge Artifact');
-            offset = this.getBottomEdgeChildOffset();
-        } else if (this.getLeftEdgeArtifacts().includes(child_type)) {
-            console.info('Left Edge Artifact');
-            offset = this.getLeftEdgeChildOffset();
-        } else if (this.getLeftArtifacts().includes(child_type)) {
-            console.info('Left Artifact');
-            offset = this.getLeftChildOffset();
-        } else if (this.getRightArtifacts().includes(child_type)) {
-            console.info('Right Artifact');
-            offset = this.getRightChildOffset();
-        } else if (this.getRightEdgeArtifacts().includes(child_type)) {
-            console.info('Right Edge Artifact');
-            offset = this.getRightEdgeChildOffset();
-        } else {
-            console.warn(child_type + ' Not Found for ' + this.display_name);
-        }
-        console.groupEnd();
-        return offset
-    }
-
-    getFirstChildOffset() {
-        alert('Get First Child function "getFirstChildOffset()" has not been implemented.');
-    }
-
-    // Top Edge
-    hasTopEdgeChildren() {
-        let children = false;
-        let key = this.getParentKey();
-        for (let group of this.getTopEdgeArtifacts()) {
-            for(let artifact of this.getOkitJson()[this.artifactToElement(group)]) {
-                if (artifact[key] === this.id) {
-                    children = true;
-                    break;
-                }
-            }
-        }
-        return children;
-    }
-
-    getTopEdgeChildrenMaxDimensions() {
-        let max_dimensions = {height: 0, width: 0};
-        let key = this.getParentKey();
-        for (let group of this.getTopEdgeArtifacts()) {
-            for(let artifact of this.getOkitJson()[this.artifactToElement(group)]) {
-                if (artifact[key] === this.id) {
-                    let dimension = artifact.getDimensions();
-                    max_dimensions.height = Math.max(max_dimensions.height, dimension.height);
-                    max_dimensions.width += Math.round(dimension.width + positional_adjustments.spacing.x);
-                }
-            }
-        }
-        return max_dimensions;
-    }
-
-    getFirstTopEdgeChildOffset() {
-        let offset = {
-            dx: Math.round(positional_adjustments.padding.x * 2 + positional_adjustments.spacing.x * 2),
-            dy: 0
-        };
-        return offset;
-    }
-
-    getTopEdgeChildOffset() {
-        alert('Get First Top Edge Child function "getTopEdgeChildOffset()" has not been implemented.');
-    }
-
-    // Top
-    hasTopChildren() {
-        let children = false;
-        let key = this.getParentKey();
-        for (let group of this.getTopArtifacts()) {
-            for(let artifact of this.getOkitJson()[this.artifactToElement(group)]) {
-                if (artifact.getParentId() === this.id) {
-                    children = true;
-                    break;
-                }
-            }
-        }
-        return children;
-    }
-
-    getTopChildrenMaxDimensions() {
-        let max_dimensions = {height: 0, width: 0};
-        let key = this.getParentKey();
-        for (let group of this.getTopArtifacts()) {
-            for(let artifact of this.getOkitJson()[this.artifactToElement(group)]) {
-                if (artifact.getParentId() === this.id) {
-                    let dimension = artifact.getDimensions();
-                    max_dimensions.height = Math.max(max_dimensions.height, dimension.height);
-                    max_dimensions.width += Math.round(dimension.width + positional_adjustments.spacing.x);
-                }
-            }
-        }
-        return max_dimensions;
-    }
-
-    getFirstTopChildOffset() {
-        let offset = this.getFirstLeftChildOffset();
-        if (this.hasLeftChildren()) {
-            offset.dx += Math.round(positional_adjustments.padding.x + positional_adjustments.spacing.x);
-        }
-        return offset;
-    }
-
-    getTopChildOffset() {
-        alert('Get Top Child function "getTopEdgeChildOffset()" has not been implemented.');
-    }
-
-    // Container
-    hasContainerChildren() {
-        let children = false;
-        let key = this.getParentKey();
-        for (let group of this.getContainerArtifacts()) {
-            for(let artifact of this.getOkitJson()[this.artifactToElement(group)]) {
-                if (artifact[key] === this.id) {
-                    children = true;
-                    break;
-                }
-            }
-        }
-        return children;
-    }
-
-    getContainerChildrenMaxDimensions() {
-        let max_dimensions = {height: 0, width: 0};
-        let key = this.getParentKey();
-        for (let group of this.getContainerArtifacts()) {
-            for(let artifact of this.getOkitJson()[this.artifactToElement(group)]) {
-                if (artifact[key] === this.id) {
-                    let dimension = artifact.getDimensions();
-                    max_dimensions.height += Math.round(dimension.height + positional_adjustments.spacing.y);
-                    max_dimensions.width = Math.max(max_dimensions.width, dimension.width);
-                }
-            }
-        }
-        return max_dimensions;
-    }
-
-    getFirstContainerChildOffset() {
-        let offset = this.getFirstTopChildOffset();
-        if (this.hasTopChildren()) {
-            let dimensions = this.getTopChildrenMaxDimensions();
-            offset.dy += Math.round(dimensions.height + positional_adjustments.spacing.y);
-        }
-        return offset;
-    }
-
-    getContainerChildOffset() {
-        alert('Get Container Child function "getContainerChildOffset()" has not been implemented.');
-    }
-
-    // Bottom
-    hasBottomChildren() {
-        let children = false;
-        let key = this.getParentKey();
-        for (let group of this.getBottomArtifacts()) {
-            for(let artifact of this.getOkitJson()[this.artifactToElement(group)]) {
-                if (artifact.getParentId() === this.id) {
-                    children = true;
-                    break;
-                }
-            }
-        }
-        return children;
-    }
-
-    getBottomChildrenMaxDimensions() {
-        let max_dimensions = {height: 0, width: 0};
-        let key = this.getParentKey();
-        for (let group of this.getBottomArtifacts()) {
-            for(let artifact of this.getOkitJson()[this.artifactToElement(group)]) {
-                if (artifact.getParentId() === this.id) {
-                    let dimension = artifact.getDimensions();
-                    max_dimensions.height = Math.max(max_dimensions.height, dimension.height);
-                    max_dimensions.width += Math.round(dimension.width + positional_adjustments.spacing.x);
-                }
-            }
-        }
-        return max_dimensions;
-    }
-
-    getFirstBottomChildOffset() {
-        let offset = this.getFirstTopChildOffset();
-        if (this.hasTopChildren()) {
-            let dimensions = this.getTopChildrenMaxDimensions();
-            offset.dy += Math.round(dimensions.height + positional_adjustments.spacing.y * 4);
-        }
-        if (this.hasContainerChildren()) {
-            let dimensions = this.getContainerChildrenMaxDimensions();
-            offset.dy += Math.round(dimensions.height + positional_adjustments.spacing.y);
-        }
-        return offset;
-    }
-
-    getBottomChildOffset() {
-        alert('Get Bottom Child function "getBottomEdgeChildOffset()" has not been implemented.');
-    }
-
-    // Bottom Edge
-    hasBottomEdgeChildren() {
-        let children = false;
-        let key = this.getParentKey();
-        for (let group of this.getBottomEdgeArtifacts()) {
-            for(let artifact of this.getOkitJson()[this.artifactToElement(group)]) {
-                if (artifact[key] === this.id) {
-                    children = true;
-                    break;
-                }
-            }
-        }
-        return children;
-    }
-
-    getBottomEdgeChildrenMaxDimensions() {
-        let max_dimensions = {height: 0, width: 0};
-        let key = this.getParentKey();
-        for (let group of this.getBottomEdgeArtifacts()) {
-            for(let artifact of this.getOkitJson()[this.artifactToElement(group)]) {
-                if (artifact[key] === this.id) {
-                    let dimension = artifact.getDimensions();
-                    max_dimensions.height = Math.max(max_dimensions.height, dimension.height);
-                    max_dimensions.width += Math.round(dimension.width + positional_adjustments.spacing.x);
-                }
-            }
-        }
-        return max_dimensions;
-    }
-
-    getFirstBottomEdgeChildOffset() {
-        let offset = {
-            dx: Math.round(positional_adjustments.spacing.x),
-            dy: 0
-        };
-        return offset;
-    }
-
-    getBottomEdgeChildOffset() {
-        alert('Get Bottom Edge Child function "getBottomEdgeChildOffset()" has not been implemented.');
-    }
-
-    // Left Edge
-    getLeftEdgeChildOffset() {
-        alert('Get Left Edge Child function "getLeftEdgeChildOffset()" has not been implemented.');
-    }
-
-    // Left
-    hasLeftChildren() {
-        let children = false;
-        let key = this.getParentKey();
-        for (let group of this.getLeftArtifacts()) {
-            for(let artifact of this.getOkitJson()[this.artifactToElement(group)]) {
-                if (artifact[key] === this.id) {
-                    children = true;
-                    break;
-                }
-            }
-        }
-        return children;
-    }
-
-    getLeftChildrenMaxDimensions() {
-        let max_dimensions = {height: 0, width: 0};
-        let key = this.getParentKey();
-        for (let group of this.getLeftArtifacts()) {
-            for(let artifact of this.getOkitJson()[this.artifactToElement(group)]) {
-                if (artifact[key] === this.id) {
-                    let dimension = artifact.getDimensions();
-                    max_dimensions.height += Math.round(dimension.height + positional_adjustments.spacing.y);
-                    max_dimensions.width = Math.max(max_dimensions.width, dimension.width);
-                }
-            }
-        }
-        return max_dimensions;
-    }
-
-    getFirstLeftChildOffset() {
-        let offset = {
-            dx: Math.round(positional_adjustments.spacing.x * 4),
-            dy: Math.round(positional_adjustments.padding.y + positional_adjustments.spacing.y * 2)
-        };
-        return offset;
-    }
-
-    getLeftChildOffset() {
-        alert('Get Left Child function "getLeftEdgeChildOffset()" has not been implemented.');
-    }
-
-    // Right
-    hasRightChildren() {
-        let children = false;
-        let key = this.getParentKey();
-        for (let group of this.getRightArtifacts()) {
-            for(let artifact of this.getOkitJson()[this.artifactToElement(group)]) {
-                if (artifact[key] === this.id) {
-                    children = true;
-                    break;
-                }
-            }
-        }
-        return children;
-    }
-
-    getRightChildrenMaxDimensions() {
-        let max_dimensions = {height: 0, width: 0};
-        let key = this.getParentKey();
-        for (let group of this.getRightArtifacts()) {
-            for(let artifact of this.getOkitJson()[this.artifactToElement(group)]) {
-                if (artifact[key] === this.id) {
-                    let dimension = artifact.getDimensions();
-                    max_dimensions.height += Math.round(dimension.height + positional_adjustments.spacing.y);
-                    max_dimensions.width = Math.max(max_dimensions.width, dimension.width);
-                }
-            }
-        }
-        return max_dimensions;
-    }
-
-    getFirstRightChildOffset() {
-        let offset = this.getFirstLeftChildOffset();
-        if (this.hasLeftChildren()) {
-            offset.dx += Math.round(positional_adjustments.padding.x + positional_adjustments.spacing.x);
-        }
-        if (this.hasContainerChildren()) {
-            let dimensions = this.getContainerChildrenMaxDimensions();
-            offset.dx += dimensions.width;
-            offset.dx += positional_adjustments.spacing.x;
-            offset.dx += positional_adjustments.padding.x;
-        }
-        return offset;
-    }
-
-    getRightChildOffset() {
-        alert('Get Right Child function "getRightEdgeChildOffset()" has not been implemented.');
-    }
-
-    // Right Edge
-    hasRightEdgeChildren() {
-        let children = false;
-        let key = this.getParentKey();
-        for (let group of this.getRightEdgeArtifacts()) {
-            for(let artifact of this.getOkitJson()[this.artifactToElement(group)]) {
-                if (artifact[key] === this.id) {
-                    children = true;
-                    break;
-                }
-            }
-        }
-        return children;
-    }
-
-    getFirstRightEdgeChildOffset() {
-        let offset = {
-            dx: Math.round(this.getDimensions().width - icon_width),
-            dy: Math.round(positional_adjustments.padding.x)
-        };
-        return offset;
-    }
-
-    getRightEdgeChildOffset() {
-        alert('Get Right Edge Child function "getRightEdgeChildOffset()" has not been implemented.');
-    }
-
-
-    /*
-    ** Child Type Functions
-     */
-    getTopEdgeArtifacts() {
-        return [];
-    }
-
-    getTopArtifacts() {
-        return [];
-    }
-
-    getContainerArtifacts() {
-        return [];
-    }
-
-    getBottomArtifacts() {
-        return [];
-    }
-
-    getBottomEdgeArtifacts() {
-        return [];
-    }
-
-    getLeftEdgeArtifacts() {
-        return [];
-    }
-
-    getLeftArtifacts() {
-        return [];
-    }
-
-    getRightArtifacts() {
-        return [];
-    }
-
-    getRightEdgeArtifacts() {
-        return [];
-    }
-
-
-    /*
-    ** Define Allowable SVG Drop Targets
-     */
-    getDropTargets() {
-        // Return list of Artifact names
-        return this.constructor.getDropTargets();
-    }
-
-
-    /*
-    ** Default name generation
-     */
-    generateDefaultName(count = 0) {
-        return this.getNamePrefix() + ('000' + count).slice(-3);
-    }
-
-
-    getNamePrefix() {
-        return 'okit-';
-    }
-
-
-    generateConnectorId(sourceid, destinationid) {
-        return sourceid + '-' + destinationid;
-    }
-
-    getAvailabilityDomainNumber(availability_domain) {
-        if (availability_domain) {
-            return availability_domain.slice(-1);
-        } else {
-            return availability_domain;
-        }
-    }
-
-
-    /*
-    ** Static Functionality
-     */
-    static getArtifactReference() {
-        alert('Get Artifact Reference function "getArtifactReference()" has not been implemented.');
-        return;
-    }
-
-    static getDropTargets() {
-        console.warn('Get Drop Targets not implements');
-        return [];
-    }
-
-    static getConnectTargets() {
-        console.warn('Get Connect Targets not implements');
-        return [];
-    }
-
-    static query(request={}, region='') {
-        console.error('Query not implemented');
-    }
-
-}
-
-class OkitContainerArtifact extends OkitArtifact {
-    /*
-    ** Create
-     */
-    constructor(okitjson = {}) {
-        super(okitjson);
-    }
-
-    /*
-    ** SVG Functions
-     */
-    getDimensions(id_key='') {
-        console.groupCollapsed('Getting Dimensions of ' + this.getArtifactReference() + ' : ' + this.id);
-        let padding = this.getPadding();
-        let dimensions = {width: 0, height: 0};
-        let offset = {dx: 0, dy: 0};
-        // Process Top Edge Artifacts
-        offset = this.getFirstTopEdgeChildOffset();
-        let top_edge_dimensions = this.getTopEdgeChildrenMaxDimensions();
-        dimensions.width  = Math.max(dimensions.width, top_edge_dimensions.width + offset.dx - padding.dx);
-        dimensions.height = Math.max(dimensions.height, top_edge_dimensions.height);
-        // Process Bottom Edge Artifacts
-        offset = this.getFirstBottomEdgeChildOffset();
-        let bottom_edge_dimensions = this.getBottomEdgeChildrenMaxDimensions();
-        dimensions.width  = Math.max(dimensions.width, bottom_edge_dimensions.width);
-        dimensions.height = Math.max(dimensions.height, bottom_edge_dimensions.height);
-        // Process Top Artifacts
-        offset = this.getFirstTopChildOffset();
-        let top_dimensions = this.getTopChildrenMaxDimensions();
-        dimensions.width   = Math.max(dimensions.width, top_dimensions.width);
-        dimensions.height += top_dimensions.height;
-        // Process Container Artifacts
-        offset = this.getFirstContainerChildOffset();
-        let container_dimensions = this.getContainerChildrenMaxDimensions();
-        dimensions.width   = Math.max(dimensions.width, container_dimensions.width);
-        dimensions.height += container_dimensions.height;
-        // Process Bottom Artifacts
-        offset = this.getFirstBottomChildOffset();
-        let bottom_dimensions = this.getBottomChildrenMaxDimensions();
-        dimensions.width   = Math.max(dimensions.width, bottom_dimensions.width);
-        dimensions.height += bottom_dimensions.height;
-        // Process Left Edge Artifacts
-        // Process Right Edge Artifacts
-        // Process Left Artifacts
-        let left_dimensions = this.getLeftChildrenMaxDimensions();
-        dimensions.width += left_dimensions.width;
-        dimensions.height = Math.max(dimensions.height, left_dimensions.height);
-        // Process Right Artifacts
-        let right_dimensions = this.getRightChildrenMaxDimensions();
-        dimensions.width += right_dimensions.width;
-        dimensions.height = Math.max(dimensions.height, right_dimensions.height);
-        if (this.hasRightChildren()) {
-            dimensions.width += positional_adjustments.spacing.x;
-            dimensions.width += positional_adjustments.padding.x;
-        }
-        // Add Padding
-        dimensions.width += padding.dx * 2;
-        dimensions.height += padding.dy * 2;
-        // Check size against minimum
-        dimensions['width']  = Math.max(dimensions['width'],  this.getMinimumDimensions().width);
-        dimensions['height'] = Math.max(dimensions['height'], this.getMinimumDimensions().height);
-        console.info('Overall Dimensions       : ' + JSON.stringify(dimensions));
-        console.groupEnd();
-        return dimensions;
-    }
-
-    getPadding() {
-        let padding = {
-            dx: Math.round(positional_adjustments.spacing.x * 4),
-            dy: Math.round(positional_adjustments.padding.y + positional_adjustments.spacing.y * 2)
-        };
-        return padding;
-    }
-
-    getChildTypes() {
-        let child_types = this.getContainerArtifacts().concat(
-            this.getLeftEdgeArtifacts(),   this.getLeftArtifacts(),
-            this.getRightEdgeArtifacts(),  this.getRightArtifacts(),
-            this.getTopEdgeArtifacts(),    this.getTopArtifacts(),
-            this.getBottomEdgeArtifacts(), this.getBottomArtifacts()
-            );
-        console.info('Child Types : ' + child_types);
-        return child_types;
-    }
-
-    getChildElements() {
-        let child_elements = [];
-        this.getChildTypes().forEach(element => child_elements.push(this.artifactToElement(element)));
-        return child_elements;
-    }
-
-    /*
-    ** Child Offset Functions
-     */
-    getTopEdgeChildOffset() {
-        let offset = this.getFirstTopEdgeChildOffset();
-        // Count how many top edge children and adjust.
-        let count = 0;
-        for (let child of this.getTopEdgeArtifacts()) {
-            count += $(jqId(this.id + '-svg')).children("svg[data-type='" + child + "']").length;
-        }
-        console.info('Top Edge Count : ' + count);
-        // Increment x position based on count
-        offset.dx += Math.round((icon_width * count) + (positional_adjustments.spacing.x * count));
-        return offset;
-    }
-
-    getTopChildOffset() {
-        let offset = this.getFirstTopChildOffset();
-        for (let child of this.getTopArtifacts()) {
-            $(jqId(this.id + '-svg')).children("svg[data-type='" + child + "']").each(
-                function() {
-                    offset.dx += Math.round(Number($(this).attr('width')) + positional_adjustments.spacing.x);
-                });
-        }
-        return offset;
-    }
-
-    getContainerChildOffset() {
-        console.info('Get Container Child Offset');
-        let offset = this.getFirstContainerChildOffset();
-        // Count how many top edge children and adjust.
-        for (let child of this.getContainerArtifacts()) {
-            //console.info('Container Child Count : ' + $(jqId(this.id + '-svg')).children("svg[data-type='" + child + "'][data-parent-id='" + this.id + "']").length);
-            $(jqId(this.id + '-svg')).children('svg[data-type="' + child + '"][data-parent-id="' + this.id + '"]').each(
-                function() {
-                    offset.dy += Math.round(Number($(this).attr('height')) + positional_adjustments.spacing.y);
-                });
-        }
-        console.info('Offset : ' + JSON.stringify(offset));
-        return offset;
-    }
-
-    getBottomChildOffset() {
-        let offset = this.getFirstBottomChildOffset();
-        for (let child of this.getBottomArtifacts()) {
-            $(jqId(this.id + '-svg')).children("svg[data-type='" + child + "']").each(
-                function() {
-                    offset.dx += Math.round(Number($(this).attr('width')) + positional_adjustments.spacing.x);
-                });
-        }
-        return offset;
-    }
-
-    getBottomEdgeChildOffset() {}
-
-    getLeftEdgeChildOffset() {}
-
-    getLeftChildOffset() {
-        let offset = this.getFirstLeftChildOffset();
-        for (let child of this.getLeftArtifacts()) {
-            $(jqId(this.id + '-svg')).children("svg[data-type='" + child + "']").each(
-                function() {
-                    offset.dy += Math.round(icon_height + positional_adjustments.spacing.y);
-                });
-        }
-        return offset;
-    }
-
-    getRightChildOffset() {
-        let offset = this.getFirstRightChildOffset();
-        for (let child of this.getRightArtifacts()) {
-            $(jqId(this.id + '-svg')).children("svg[data-type='" + child + "']").each(
-                function() {
-                    offset.dy += Math.round(icon_height + positional_adjustments.spacing.y);
-                });
-        }
-        return offset;
-    }
-
-    getRightEdgeChildOffset() {
-        let offset = this.getFirstRightEdgeChildOffset();
-        for (let child of this.getRightEdgeArtifacts()) {
-            $(jqId(this.id + '-svg')).children("svg[data-type='" + child + "']").each(
-                function() {
-                    offset.dy += Math.round(icon_height + positional_adjustments.spacing.y);
-                });
-        }
-        return offset;
-    }
-}
-
-class OkitJson {
-    /*
-    ** Create
-     */
-    constructor(okit_json_string = '', parent_id = 'canvas-div') {
-        this.title = "OKIT OCI Visualiser Json";
-        this.description = "OKIT Generic OCI Json which can be used to generate ansible, terraform, .......";
-        this.okit_version = okitVersion;
-        this.compartments = [];
-        this.autonomous_databases = [];
-        this.block_storage_volumes = [];
-        this.containers = [];
-        this.database_systems = [];
-        this.dynamic_routing_gateways = [];
-        this.fast_connects = [];
-        this.file_storage_systems = [];
-        this.instances = [];
-        this.internet_gateways = [];
-        this.load_balancers = [];
-        this.local_peering_gateways = [];
-        this.nat_gateways = [];
-        this.network_security_groups = [];
-        this.object_storage_buckets = [];
-        this.remote_peering_gateways = [];
-        this.route_tables = [];
-        this.security_lists = [];
-        this.service_gateways = [];
-        this.subnets = [];
-        this.virtual_cloud_networks = [];
-        this.web_application_firewalls = [];
-        this.parent_id = parent_id;
-
-        if (okit_json_string !== undefined && okit_json_string.length > 0) {
-            this.load(JSON.parse(okit_json_string));
-        }
-    }
-
-    /*
-    ** Load Simple Json Structure and build Object Based JSON
-     */
-    load(okit_json) {
-        console.groupCollapsed('Load OKIT Json');
-        // Compartments
-        if (okit_json.hasOwnProperty('compartments')) {
-            for (let artifact of okit_json['compartments']) {
-                if (artifact.parent_id && artifact.parent_id === ROOT_CANVAS_ID) {
-                    artifact.parent_id = ROOT_CANVAS_ID;
-                    console.info('Adding Root Compartment ' + artifact.name);
-                } else {
-                    artifact.parent_id = artifact.compartment_id;
-                }
-                let obj = this.newCompartment(artifact);
-                console.info(obj);
-            }
-        }
-
-        // Compartment Subcomponents
-        // Autonomous Databases
-        if (okit_json.hasOwnProperty('autonomous_databases')) {
-            for (let artifact of okit_json['autonomous_databases']) {
-                artifact.parent_id = artifact.compartment_id;
-                let obj = this.newAutonomousDatabase(artifact);
-                console.info(obj);
-            }
-        }
-        // Block Storage Volumes
-        if (okit_json.hasOwnProperty('block_storage_volumes')) {
-            for (let artifact of okit_json['block_storage_volumes']) {
-                artifact.parent_id = artifact.compartment_id;
-                let obj = this.newBlockStorageVolume(artifact);
-                console.info(obj);
-            }
-        }
-        // Object Storage Buckets
-        if (okit_json.hasOwnProperty('object_storage_buckets')) {
-            for (let artifact of okit_json['object_storage_buckets']) {
-                artifact.parent_id = artifact.compartment_id;
-                let obj = this.newObjectStorageBucket(artifact);
-                console.info(obj);
-            }
-        }
-        // Virtual Cloud Networks
-        // Turn Off Default Security List / Route Table Processing
-        let okitSettingsClone = JSON.clone(okitSettings);
-        okitSettings.is_default_route_table   = false;
-        okitSettings.is_default_security_list = false;
-        if (okit_json.hasOwnProperty('virtual_cloud_networks')) {
-            for (let artifact of okit_json['virtual_cloud_networks']) {
-                artifact.parent_id = artifact.compartment_id;
-                let obj = this.newVirtualCloudNetwork(artifact);
-                console.info(obj);
-            }
-        }
-        // Reset
-        okitSettings.is_default_route_table   = okitSettingsClone.is_default_route_table;
-        okitSettings.is_default_security_list = okitSettingsClone.is_default_security_list;
-        // Web Application Firewall
-        if (okit_json.hasOwnProperty('web_application_firewalls')) {
-            for (let artifact of okit_json['web_application_firewalls']) {
-                artifact.parent_id = artifact.compartment_id;
-                let obj = this.newWebApplicationFirewall(artifact);
-                console.info(obj);
-            }
-        }
-        // Dynamic Routing Gateways
-        if (okit_json.hasOwnProperty('dynamic_routing_gateways')) {
-            for (let artifact of okit_json['dynamic_routing_gateways']) {
-                artifact.parent_id = artifact.compartment_id;
-                let obj = this.newDynamicRoutingGateway(artifact);
-                console.info(obj);
-            }
-        }
-
-        // Virtual Cloud Network Sub Components
-        // Internet Gateways
-        if (okit_json.hasOwnProperty('internet_gateways')) {
-            for (let artifact of okit_json['internet_gateways']) {
-                artifact.parent_id = artifact.vcn_id;
-                let obj = this.newInternetGateway(artifact);
-                console.info(obj);
-            }
-        }
-        // NAT Gateway
-        if (okit_json.hasOwnProperty('nat_gateways')) {
-            for (let artifact of okit_json['nat_gateways']) {
-                artifact.parent_id = artifact.vcn_id;
-                let obj = this.newNATGateway(artifact);
-                console.info(obj);
-            }
-        }
-        // Route Tables
-        if (okit_json.hasOwnProperty('route_tables')) {
-            for (let artifact of okit_json['route_tables']) {
-                artifact.parent_id = artifact.vcn_id;
-                let obj = this.newRouteTable(artifact);
-                console.info(obj);
-            }
-        }
-        // Security Lists
-        if (okit_json.hasOwnProperty('security_lists')) {
-            for (let artifact of okit_json['security_lists']) {
-                artifact.parent_id = artifact.vcn_id;
-                let obj = this.newSecurityList(artifact);
-                console.info(obj);
-            }
-        }
-        // Network Security Groups
-        if (okit_json.hasOwnProperty('network_security_groups')) {
-            for (let artifact of okit_json['network_security_groups']) {
-                artifact.parent_id = artifact.vcn_id;
-                let obj = this.newNetworkSecurityGroup(artifact);
-                console.info(obj);
-            }
-        }
-        // Service Gateways
-        if (okit_json.hasOwnProperty('service_gateways')) {
-            for (let artifact of okit_json['service_gateways']) {
-                artifact.parent_id = artifact.vcn_id;
-                let obj = this.newServiceGateway(artifact);
-                console.info(obj);
-            }
-        }
-        // Local Peering Gateways
-        if (okit_json.hasOwnProperty('local_peering_gateways')) {
-            for (let artifact of okit_json['local_peering_gateways']) {
-                artifact.parent_id = artifact.vcn_id;
-                let obj = this.newLocalPeeringGateway(artifact);
-                console.info(obj);
-            }
-        }
-        // Subnets
-        if (okit_json.hasOwnProperty('subnets')) {
-            for (let artifact of okit_json['subnets']) {
-                artifact.parent_id = artifact.vcn_id;
-                let obj = this.newSubnet(artifact);
-                console.info(obj);
-            }
-        }
-
-        // Subnet Subcomponents
-        // File Storage Systems
-        if (okit_json.hasOwnProperty('file_storage_systems')) {
-            for (let artifact of okit_json['file_storage_systems']) {
-                artifact.parent_id = artifact.subnet_id;
-                let obj = this.newFileStorageSystem(artifact);
-                console.info(obj);
-            }
-        }
-        // Database Systems
-        if (okit_json.hasOwnProperty('database_systems')) {
-            for (let artifact of okit_json['database_systems']) {
-                artifact.parent_id = artifact.subnet_id;
-                let obj = this.newDatabaseSystem(artifact);
-                console.info(obj);
-            }
-        }
-        // Instances
-        if (okit_json.hasOwnProperty('instances')) {
-            for (let artifact of okit_json['instances']) {
-                let subnet = this.getSubnet(artifact.subnet_id)
-                if (subnet && subnet.compartment_id === artifact.compartment_id) {
-                    artifact.parent_id = artifact.subnet_id;
-                } else {
-                    artifact.parent_id = artifact.compartment_id;
-                }
-                let obj = this.newInstance(artifact);
-                console.info(obj);
-            }
-        }
-        // Load Balancers
-        if (okit_json.hasOwnProperty('load_balancers')) {
-            for (let artifact of okit_json['load_balancers']) {
-                if (artifact.hasOwnProperty('subnet_id')) {
-                    artifact.parent_id = artifact.subnet_id;
-                } else {
-                    artifact.parent_id = artifact.subnet_ids[0];
-                    artifact.subnet_id = artifact.subnet_ids[0];
-                }
-                let obj = this.newLoadBalancer(artifact);
-                console.info(obj);
-            }
-        }
-        console.groupEnd();
-    }
-
-    /*
-    ** Draw the JSON Data within this Object as SVG.
-     */
-    draw() {
-        console.groupCollapsed('Drawing SVG Canvas');
-        // Display Json
-        displayOkitJson();
-        // New canvas
-        let width = 0;
-        let height = 0;
-        for (let compartment of this.compartments) {
-            let dimensions = compartment.getDimensions();
-            width = Math.max(width, dimensions.width);
-            height = Math.max(height, dimensions.height);
-        }
-        newCanvas(this.parent_id, width, height);
-
-        console.info(this);
-
-        // Draw Compartments
-        for (let compartment of this.compartments) {
-            compartment.draw();
-        }
-
-        // Draw Compartment Sub Components
-        // Virtual Cloud Networks
-        for (let virtual_cloud_network of this.virtual_cloud_networks) {
-            virtual_cloud_network.draw();
-        }
-        // Block Storage Volumes
-        for (let block_storage_volume of this.block_storage_volumes) {
-            block_storage_volume.draw();
-        }
-        // Object Storage Buckets
-        for (let object_storage_bucket of this.object_storage_buckets) {
-            object_storage_bucket.draw();
-        }
-        // Autonomous Databases
-        for (let autonomous_database of this.autonomous_databases) {
-            autonomous_database.draw();
-        }
-        // FastConnects
-        for (let fast_connect of this.fast_connects) {
-            fast_connect.draw();
-        }
-
-        // Draw Virtual Cloud Network Sub Components
-        // Internet Gateways
-        for (let internet_gateway of this.internet_gateways) {
-            internet_gateway.draw();
-        }
-        // NAT Gateways
-        for (let nat_gateway of this.nat_gateways) {
-            nat_gateway.draw();
-        }
-        // Service Gateways
-        for (let service_gateway of this.service_gateways) {
-            service_gateway.draw();
-        }
-        // Dynamic Routing Gateways
-        for (let dynamic_routing_gateway of this.dynamic_routing_gateways) {
-            dynamic_routing_gateway.draw();
-        }
-        // Local Peering Gateways
-        for (let local_peering_gateway of this.local_peering_gateways) {
-            local_peering_gateway.draw();
-        }
-        // Route Tables
-        for (let route_table of this.route_tables) {
-            route_table.draw();
-        }
-        // Security Lists
-        for (let security_list of this.security_lists) {
-            security_list.draw();
-        }
-        // Network Security Groups
-        for (let network_security_group of this.network_security_groups) {
-            network_security_group.draw();
-        }
-        // Subnets
-        for (let subnet of this.subnets) {
-            subnet.draw();
-        }
-
-        // Draw Subnet Sub Components
-        // Database System
-        for (let database_system of this.database_systems) {
-            database_system.draw();
-        }
-        // File Storage System
-        for (let file_storage_system of this.file_storage_systems) {
-            file_storage_system.draw();
-        }
-        // Containers
-        for (let container of this.containers) {
-            container.draw();
-        }
-        // Instances
-        for (let instance of this.instances) {
-            instance.draw();
-        }
-        // Load Balancers
-        for (let load_balancer of this.load_balancers) {
-            load_balancer.draw();
-        }
-
-        // Resize Main Canvas if required
-        let canvas_svg = d3.select(d3Id("canvas-svg"));
-        console.info('Canvas Width   : ' + canvas_svg.attr('width'));
-        console.info('Canvas Height  : ' + canvas_svg.attr('height'));
-        console.info('Canvas viewBox : ' + canvas_svg.attr('viewBox'));
-        $(jqId("canvas-svg")).children("svg [data-type='" + Compartment.getArtifactReference() + "']").each(function () {
-            console.info('Id      : ' + this.getAttribute('id'));
-            console.info('Width   : ' + this.getAttribute('width'));
-            console.info('Height  : ' + this.getAttribute('height'));
-            console.info('viewBox : ' + this.getAttribute('viewBox'));
-            canvas_svg.attr('width', Math.max(Number(canvas_svg.attr('width')), Number(this.getAttribute('width'))));
-            canvas_svg.attr('height', Math.max(Number(canvas_svg.attr('height')), Number(this.getAttribute('height'))));
-            canvas_svg.attr('viewBox', '0 0 ' + canvas_svg.attr('width') + ' ' + canvas_svg.attr('height'));
-        });
-        console.info('Canvas Width   : ' + canvas_svg.attr('width'));
-        console.info('Canvas Height  : ' + canvas_svg.attr('height'));
-        console.info('Canvas viewBox : ' + canvas_svg.attr('viewBox'));
-        if (selectedArtefact) {
-            $(jqId(selectedArtefact)).toggleClass('highlight');
-        }
-        console.groupEnd();
-    }
-
-    /*
-    ** Artifact Processing
-     */
-
-    // Autonomous Database
-    newAutonomousDatabase(data, parent=null) {
-        console.info('New Autonomous Database');
-        // Because we are direct sub components of Compartment set compartment_id to parent_id not the parents compartment_id
-        data.compartment_id = data.parent_id;
-        this.autonomous_databases.push(new AutonomousDatabase(data, this, parent));
-        return this.autonomous_databases[this.autonomous_databases.length - 1];
-    }
-    getAutonomousDatabases() {
-        return this.autonomous_databases;
-    }
-    getAutonomousDatabase(id='') {
-        for (let artefact of this.getAutonomousDatabases()) {
-            if (artefact.id === id) {
-                return artefact;
-            }
-        }
-        return undefined;
-    }
-    deleteAutonomousDatabase(id) {
-        for (let i = 0; i < this.autonomous_databases.length; i++) {
-            if (this.autonomous_databases[i].id === id) {
-                this.autonomous_databases[i].delete();
-                this.autonomous_databases.splice(i, 1);
-                break;
-            }
-        }
-    }
-
-    // Block Storage Volume
-    newBlockStorageVolume(data, parent=null) {
-        console.info('New Block Storage Volume');
-        // Because we are direct sub components of Compartment set compartment_id to parent_id not the parents compartment_id
-        data.compartment_id = data.parent_id;
-        this.block_storage_volumes.push(new BlockStorageVolume(data, this, parent));
-        return this.block_storage_volumes[this.block_storage_volumes.length - 1];
-    }
-    getBlockStorageVolumes() {
-        return this.block_storage_volumes;
-    }
-    getBlockStorageVolume(id='') {
-        for (let artefact of this.getBlockStorageVolumes()) {
-            if (artefact.id === id) {
-                return artefact;
-            }
-        }
-        return undefined;
-    }
-    deleteBlockStorageVolume(id) {
-        for (let i = 0; i < this.block_storage_volumes.length; i++) {
-            if (this.block_storage_volumes[i].id === id) {
-                this.block_storage_volumes[i].delete();
-                this.block_storage_volumes.splice(i, 1);
-                break;
-            }
-        }
-    }
-
-    // Compartment
-    newCompartment(data = {}, parent=null) {
-        console.info('New Compartment');
-        // Because we are direct sub components of Compartment set compartment_id to parent_id not the parents compartment_id
-        data.compartment_id = data.parent_id;
-        this['compartments'].push(new Compartment(data, this, parent));
-        return this['compartments'][this['compartments'].length - 1];
-    }
-    getCompartments() {
-        return this.compartments;
-    }
-    getCompartment(id='') {
-        for (let artefact of this.getCompartments()) {
-            if (artefact.id === id) {
-                return artefact;
-            }
-        }
-        return undefined;
-    }
-    deleteCompartment(id) {
-        for (let i = 0; i < this.compartments.length; i++) {
-            if (this.compartments[i].id === id) {
-                this.compartments[i].delete();
-                this.compartments.splice(i, 1);
-                break;
-            }
-        }
-    }
-
-    // Database System
-    newDatabaseSystem(data, parent=null) {
-        console.info('New Database System');
-        this['database_systems'].push(new DatabaseSystem(data, this, parent));
-        return this['database_systems'][this['database_systems'].length - 1];
-    }
-    getDatabaseSystems() {
-        return this.database_systems;
-    }
-    getDatabaseSystem(id='') {
-        for (let artefact of this.getDatabaseSystems()) {
-            if (artefact.id === id) {
-                return artefact;
-            }
-        }
-        return undefined;
-    }
-    deleteDatabaseSystem(id) {
-        for (let i = 0; i < this.database_systems.length; i++) {
-            if (this.database_systems[i].id === id) {
-                this.database_systems[i].delete();
-                this.database_systems.splice(i, 1);
-                break;
-            }
-        }
-    }
-
-    // Dynamic Routing Gateway
-    newDynamicRoutingGateway(data, parent=null) {
-        console.info('New Dynamic Routing Gateway');
-        this['dynamic_routing_gateways'].push(new DynamicRoutingGateway(data, this, parent));
-        return this['dynamic_routing_gateways'][this['dynamic_routing_gateways'].length - 1];
-    }
-    getDynamicRoutingGateways() {
-        return this.dynamic_routing_gateways;
-    }
-    getDynamicRoutingGateway(id='') {
-        for (let artefact of this.getDynamicRoutingGateways()) {
-            if (artefact.id === id) {
-                return artefact;
-            }
-        }
-        return undefined;
-    }
-    deleteDynamicRoutingGateway(id) {
-        for (let i = 0; i < this.dynamic_routing_gateways.length; i++) {
-            if (this.dynamic_routing_gateways[i].id === id) {
-                this.dynamic_routing_gateways[i].delete();
-                this.dynamic_routing_gateways.splice(i, 1);
-                break;
-            }
-        }
-    }
-
-    // FastConnect
-    newFastConnect(data, parent=null) {
-        console.info('New FastConnect');
-        this['fast_connects'].push(new FastConnect(data, this, parent));
-        return this['fast_connects'][this['fast_connects'].length - 1];
-    }
-    getFastConnects() {
-        return this.fast_connects;
-    }
-    getFastConnect(id='') {
-        for (let artefact of this.getFastConnects()) {
-            if (artefact.id === id) {
-                return artefact;
-            }
-        }
-        return undefined;
-    }
-    deleteFastConnect(id) {
-        for (let i = 0; i < this.fast_connects.length; i++) {
-            if (this.fast_connects[i].id === id) {
-                this.fast_connects[i].delete();
-                this.fast_connects.splice(i, 1);
-                break;
-            }
-        }
-    }
-
-    // File Storage System
-    newFileStorageSystem(data, parent=null) {
-        console.info('New File Storage System');
-        this.file_storage_systems.push(new FileStorageSystem(data, this, parent));
-        return this.file_storage_systems[this.file_storage_systems.length - 1];
-    }
-    getFileStorageSystems() {
-        return this.file_storage_systems;
-    }
-    getFileStorageSystem(id='') {
-        for (let artefact of this.getFileStorageSystems()) {
-            if (artefact.id === id) {
-                return artefact;
-            }
-        }
-        return undefined;
-    }
-    deleteFileStorageSystem(id) {
-        for (let i = 0; i < this.file_storage_systems.length; i++) {
-            if (this.file_storage_systems[i].id === id) {
-                this.file_storage_systems[i].delete();
-                this.file_storage_systems.splice(i, 1);
-                break;
-            }
-        }
-    }
-
-    // Instance
-    newInstance(data, parent=null) {
-        console.info('New Instance');
-        this.instances.push(new Instance(data, this, parent));
-        return this.instances[this.instances.length - 1];
-    }
-    getInstances() {
-        return this.instances;
-    }
-    getInstance(id='') {
-        for (let artefact of this.getInstances()) {
-            if (artefact.id === id) {
-                return artefact;
-            }
-        }
-        return undefined;
-    }
-    deleteInstance(id) {
-        for (let i = 0; i < this.instances.length; i++) {
-            if (this.instances[i].id === id) {
-                this.instances[i].delete();
-                this.instances.splice(i, 1);
-                break;
-            }
-        }
-    }
-
-    // Internet Gateway
-    newInternetGateway(data, parent=null) {
-        console.info('New Internet Gateway');
-        for (let gateway of this.internet_gateways) {
-            if (gateway.vcn_id === data.parent_id) {
-                // We are only allowed a single Internet Gateway peer VCN
-                if (parent) {
-                    alert('The maximum limit of 1 for Internet Gateway per Virtual Cloud Network has been exceeded in ' + parent.display_name);
-                }
-                return null;
-            }
-        }
-        this['internet_gateways'].push(new InternetGateway(data, this, parent));
-        return this['internet_gateways'][this['internet_gateways'].length - 1];
-    }
-    getInternetGateways() {
-        return this.internet_gateways;
-    }
-    getInternetGateway(id='') {
-        for (let artefact of this.getInternetGateways()) {
-            if (artefact.id === id) {
-                return artefact;
-            }
-        }
-        return undefined;
-    }
-    deleteInternetGateway(id) {
-        for (let i = 0; i < this.internet_gateways.length; i++) {
-            if (this.internet_gateways[i].id === id) {
-                this.internet_gateways[i].delete();
-                this.internet_gateways.splice(i, 1);
-                break;
-            }
-        }
-    }
-
-    // Load Balancer
-    newLoadBalancer(data, parent=null) {
-        console.info('New Load Balancer');
-        this.load_balancers.push(new LoadBalancer(data, this, parent));
-        return this.load_balancers[this.load_balancers.length - 1];
-    }
-    getloadBalancers() {
-        return this.load_balancers;
-    }
-    getLoadBalancer(id='') {
-        for (let artefact of this.getloadBalancers()) {
-            if (artefact.id === id) {
-                return artefact;
-            }
-        }
-        return undefined;
-    }
-    deleteLoadBalancer(id) {
-        for (let i = 0; i < this.load_balancers.length; i++) {
-            if (this.load_balancers[i].id === id) {
-                this.load_balancers[i].delete();
-                this.load_balancers.splice(i, 1);
-                break;
-            }
-        }
-    }
-
-    // Local Peering Gateway
-    newLocalPeeringGateway(data, parent=null) {
-        console.info('New Local Peering Gateway');
-        this['local_peering_gateways'].push(new LocalPeeringGateway(data, this, parent));
-        return this['local_peering_gateways'][this['local_peering_gateways'].length - 1];
-    }
-    getLocalPeeringGateways() {
-        return this.local_peering_gateways;
-    }
-    getLocalPeeringGateway(id='') {
-        for (let artefact of this.getLocalPeeringGateways()) {
-            if (artefact.id === id) {
-                return artefact;
-            }
-        }
-        return undefined;
-    }
-    deleteLocalPeeringGateway(id) {
-        for (let i = 0; i < this.local_peering_gateways.length; i++) {
-            if (this.local_peering_gateways[i].id === id) {
-                this.local_peering_gateways[i].delete();
-                this.local_peering_gateways.splice(i, 1);
-                break;
-            }
-        }
-    }
-
-    // NAT Gateway
-    newNATGateway(data, parent=null) {
-        console.info('New NAT Gateway');
-        for (let gateway of this.nat_gateways) {
-            if (gateway.vcn_id === data.parent_id) {
-                // We are only allowed a single NAT Gateway peer VCN
-                if (parent) {
-                    alert('The maximum limit of 1 for NAT Gateway per Virtual Cloud Network has been exceeded in ' + parent.display_name);
-                }
-                return null;
-            }
-        }
-        this['nat_gateways'].push(new NATGateway(data, this, parent));
-        return this['nat_gateways'][this['nat_gateways'].length - 1];
-    }
-    getNATGateways() {
-        return this.nat_gateways;
-    }
-    getNATGateway(id='') {
-        for (let artefact of this.getNATGateways()) {
-            if (artefact.id === id) {
-                return artefact;
-            }
-        }
-        return undefined;
-    }
-    deleteNATGateway(id) {
-        for (let i = 0; i < this.nat_gateways.length; i++) {
-            if (this.nat_gateways[i].id === id) {
-                this.nat_gateways[i].delete();
-                this.nat_gateways.splice(i, 1);
-                break;
-            }
-        }
-    }
-
-    // Network Security Group
-    newNetworkSecurityGroup(data, parent=null) {
-        console.info('New Network Security Group');
-        this.network_security_groups.push(new NetworkSecurityGroup(data, this, parent));
-        return this.network_security_groups[this.network_security_groups.length - 1];
-    }
-    getNetworkSecurityGroups() {
-        return this.network_security_groups;
-    }
-    getNetworkSecurityGroup(id='') {
-        for (let artefact of this.getNetworkSecurityGroups()) {
-            if (artefact.id === id) {
-                return artefact;
-            }
-        }
-        return undefined;
-    }
-    deleteNetworkSecurityGroup(id) {
-        for (let i = 0; i < this.network_security_groups.length; i++) {
-            if (this.network_security_groups[i].id === id) {
-                this.network_security_groups[i].delete();
-                this.network_security_groups.splice(i, 1);
-                break;
-            }
-        }
-    }
-
-    // Object Storage Bucket
-    newObjectStorageBucket(data, parent=null) {
-        console.info('New Object Storage Bucket');
-        // Because we are direct sub components of Compartment set compartment_id to parent_id not the parents compartment_id
-        data.compartment_id = data.parent_id;
-        this.object_storage_buckets.push(new ObjectStorageBucket(data, this, parent));
-        return this.object_storage_buckets[this.object_storage_buckets.length - 1];
-    }
-    getObjectStorageBuckets() {
-        return this.object_storage_buckets;
-    }
-    getObjectStorageBucket(id='') {
-        for (let artefact of this.getObjectStorageBuckets()) {
-            if (artefact.id === id) {
-                return artefact;
-            }
-        }
-        return undefined;
-    }
-    deleteObjectStorageBucket(id) {
-        for (let i = 0; i < this.object_storage_buckets.length; i++) {
-            if (this.object_storage_buckets[i].id === id) {
-                this.object_storage_buckets[i].delete();
-                this.object_storage_buckets.splice(i, 1);
-                break;
-            }
-        }
-    }
-
-    // Route Table
-    newRouteTable(data, parent=null) {
-        console.info('New Route Table');
-        this.route_tables.push(new RouteTable(data, this, parent));
-        return this.route_tables[this.route_tables.length - 1];
-    }
-    getRouteTables() {
-        return this.route_tables;
-    }
-    getRouteTable(id='') {
-        for (let artefact of this.getRouteTables()) {
-            if (artefact.id === id) {
-                return artefact;
-            }
-        }
-        return undefined;
-    }
-    deleteRouteTable(id) {
-        for (let i = 0; i < this.route_tables.length; i++) {
-            if (this.route_tables[i].id === id) {
-                this.route_tables[i].delete();
-                this.route_tables.splice(i, 1);
-                break;
-            }
-        }
-    }
-
-    // Security List
-    newSecurityList(data, parent=null) {
-        console.info('New Security List');
-        this.security_lists.push(new SecurityList(data, this, parent));
-        return this.security_lists[this.security_lists.length - 1];
-    }
-    getSecurityLists() {
-        return this.security_lists;
-    }
-    getSecurityList(id='') {
-        for (let artefact of this.getSecurityLists()) {
-            if (artefact.id === id) {
-                return artefact;
-            }
-        }
-        return undefined;
-    }
-    deleteSecurityList(id) {
-        for (let i = 0; i < this.security_lists.length; i++) {
-            if (this.security_lists[i].id === id) {
-                this.security_lists[i].delete();
-                this.security_lists.splice(i, 1);
-                break;
-            }
-        }
-    }
-
-    // Service Gateway
-    newServiceGateway(data, parent=null) {
-        console.info('New Service Gateway');
-        for (let gateway of this.service_gateways) {
-            if (gateway.vcn_id === data.parent_id) {
-                // We are only allowed a single Service Gateway peer VCN
-                if (parent) {
-                    alert('The maximum limit of 1 for Service Gateway per Virtual Cloud Network has been exceeded in ' + parent.display_name);
-                }
-                return null;
-            }
-        }
-        this['service_gateways'].push(new ServiceGateway(data, this, parent));
-        return this['service_gateways'][this['service_gateways'].length - 1];
-    }
-    getServiceGateways() {
-        return this.service_gateways;
-    }
-    getServiceGateway(id='') {
-        for (let artefact of this.getServiceGateways()) {
-            if (artefact.id === id) {
-                return artefact;
-            }
-        }
-        return undefined;
-    }
-    deleteServiceGateway(id) {
-        for (let i = 0; i < this.service_gateways.length; i++) {
-            if (this.service_gateways[i].id === id) {
-                this.service_gateways[i].delete();
-                this.service_gateways.splice(i, 1);
-                break;
-            }
-        }
-    }
-
-    // Subnet
-    newSubnet(data, parent=null) {
-        console.info('New Subnet');
-        this['subnets'].push(new Subnet(data, this, parent));
-        return this['subnets'][this['subnets'].length - 1];
-    }
-    getSubnets() {
-        return this.subnets;
-    }
-    getSubnet(id='') {
-        for (let artefact of this.getSubnets()) {
-            if (artefact.id === id) {
-                return artefact;
-            }
-        }
-        return undefined;
-    }
-    deleteSubnet(id) {
-        for (let i = 0; i < this.subnets.length; i++) {
-            if (this.subnets[i].id === id) {
-                this.subnets[i].delete();
-                this.subnets.splice(i, 1);
-                break;
-            }
-        }
-    }
-
-    // Virtual Cloud Network
-    newVirtualCloudNetwork(data, parent=null) {
-        console.info('New Virtual Cloud Network');
-        // Because we are direct sub components of Compartment set compartment_id to parent_id not the parents compartment_id
-        data.compartment_id = data.parent_id;
-        this['virtual_cloud_networks'].push(new VirtualCloudNetwork(data, this, parent));
-        return this['virtual_cloud_networks'][this['virtual_cloud_networks'].length - 1];
-    }
-    getVirtualCloudNetworks() {
-        return this.virtual_cloud_networks;
-    }
-    getVirtualCloudNetwork(id='') {
-        for (let artefact of this.virtual_cloud_networks) {
-            if (artefact.id === id) {
-                return artefact;
-            }
-        }
-        return undefined;
-    }
-    deleteVirtualCloudNetwork(id) {
-        for (let i = 0; i < this.virtual_cloud_networks.length; i++) {
-            if (this.virtual_cloud_networks[i].id === id) {
-                this.virtual_cloud_networks[i].delete();
-                this.virtual_cloud_networks.splice(i, 1);
-                break;
-            }
-        }
-    }
-
-    // Fragment
-    newFragment(data, parent=null) {
-        console.info('New Fragment');
-        return new Fragment(data, this, parent);
-    }
-
-    getVcn(id='') {
-        return this.getVirtualCloudNetwork(id);
-    }
-
-    /*
-    ** Export Functions
-     */
-    // Terraform
-    exportTerraform() {}
-    // Ansible
-    exportAnsible() {}
-    // Resource Manager
-    exportResourceManager() {}
-
-    /*
-    ** Data Validation
-     */
-    validate(callback=null) {
-        $.ajax({
-            type: 'post',
-            url: 'validate',
-            dataType: 'text',
-            contentType: 'application/json',
-            data: JSON.stringify(this),
-            success: function(resp) {
-                console.info('Validation Response : ' + resp);
-                if (callback && callback !== null) callback(JSON.parse(resp));
-            },
-            error: function(xhr, status, error) {
-                console.info('Status : '+ status)
-                console.info('Error : '+ error)
-            }
-        });
-    }
-
-    /*
-    ** Calculate price
-     */
-    estimateCost(callback=null) {
-        $.ajax({
-            type: 'post',
-            url: 'pricing/estimate',
-            dataType: 'text',
-            contentType: 'application/json',
-            data: JSON.stringify(this),
-            success: function(resp) {
-                console.info('Validation Response : ' + resp);
-                if (callback && callback !== null) callback(JSON.parse(resp));
-            },
-            error: function(xhr, status, error) {
-                console.info('Status : '+ status)
-                console.info('Error : '+ error)
-            }
-        });
-    }
-
-}
-
diff --git a/okitweb/static/okit/js/okit_common.js b/okitweb/static/okit/js/okit_common.js
index ae835ea72..48af81ebb 100644
--- a/okitweb/static/okit/js/okit_common.js
+++ b/okitweb/static/okit/js/okit_common.js
@@ -4,6 +4,8 @@
 */
 console.info('Loaded OKIT Common Javascript');
 
+const developer_mode = false;
+
 function jqId(id) {
     return '#' + safeId(id);
 }
@@ -13,7 +15,7 @@ function d3Id(id) {
 }
 
 function safeId(id) {
-    return id.replace( /(:|\.|\[|\]|,|=|@)/g, "\\$1" );
+    return id ? id.replace( /(:|\.|\[|\]|,|=|@)/g, "\\$1" ) : id;
 }
 
 function uuidv4() {
diff --git a/okitweb/static/okit/js/okit_console.js b/okitweb/static/okit/js/okit_console.js
index 0b02fdb3b..acafed547 100644
--- a/okitweb/static/okit/js/okit_console.js
+++ b/okitweb/static/okit/js/okit_console.js
@@ -4,8 +4,8 @@
 */
 console.info('Loaded Console Javascript');
 
-const okitVersion = '0.8.0';
-const okitReleaseDate = '15th July 2020';
+const okitVersion = '0.9.0';
+const okitReleaseDate = '5th August 2020';
 // Validation
 const validate_error_colour = "#ff4d4d";
 const validate_warning_colour = "#ffd633";
@@ -25,6 +25,11 @@ function checkForUpdate() {
     });
 }
 
+function showConfigErrors() {
+    let msg = okitOciConfig.results.join('\n');
+    alert(msg);
+}
+
 $(document).ready(function() {
     /*
     ** Add handler functionality
diff --git a/okitweb/static/okit/js/okit_designer.js b/okitweb/static/okit/js/okit_designer.js
index eb4190858..d8b4356ef 100644
--- a/okitweb/static/okit/js/okit_designer.js
+++ b/okitweb/static/okit/js/okit_designer.js
@@ -10,7 +10,9 @@ console.info('Loaded Designer Javascript');
 const ROOT_CANVAS_ID = 'canvas';
 const PROPERTIES_PANEL = 'properties_panel';
 const SETTINGS_PANEL = 'settings_panel';
-const JSON_PANEL = 'json_panel';
+const JSON_MODEL_PANEL = 'json_model_panel';
+const JSON_VIEW_PANEL = 'json_view_panel';
+const JSON_REGION_PANEL = 'json_region_panel';
 const VALUE_PROPOSITION_PANEL = 'value_proposition_panel';
 const COST_ESTIMATE_PANEL = 'cost_estimate_panel';
 const VALIDATION_PANEL = 'validation_panel';
@@ -30,7 +32,8 @@ let right_drag_bar_start_x = 0;
 let ociRegions = [];
 
 function resetDesigner() {
-    okitJson = new OkitJson();
+    newModel();
+    newDesignerView();
     regionOkitJson = {};
     clearRegionTabBar();
     hideRegionTabBar();
@@ -77,11 +80,23 @@ function handleNew(evt) {
 }
 function newDiagram() {
     console.groupCollapsed('Creating New Diagram');
-    okitJson = new OkitJson();
-    newCanvas();
-    okitJson.newCompartment();
+    newModel();
+    newDesignerView();
+    okitJsonView.newCanvas();
+    okitJsonView.newCompartment();
+    console.info(okitJsonView);
     console.groupEnd();
 }
+function newDesignerView() {
+    okitJsonView = new OkitDesignerJsonView(okitJsonModel, 'canvas-div', okitSettings.is_display_grid, palette_svg);
+}
+function newModel() {
+    okitJsonModel = new OkitJson();
+}
+function newRegionsModel() {
+    regionOkitJson = new OkitRegions();
+}
+
 /*
 ** Load Existing Json
  */
@@ -104,15 +119,17 @@ function getAsJson(readFile) {
 function loaded(evt) {
     // Clear Existing Region
     regionOkitJson = {};
-    okitJson = null
+    okitJsonModel = null
     hideRegionTabBar();
     clearRegionTabBar();
     // Obtain the read file data
     let fileString = evt.target.result;
     let fileJson = JSON.parse(fileString);
+    console.info(fileJson);
     if (fileJson.hasOwnProperty('compartments')) {
         console.info('>> Single Region File')
-        okitJson = new OkitJson(fileString);
+        okitJsonModel = new OkitJson(fileString);
+        newDesignerView();
     } else {
         console.info('>> Multi Region File.')
         showRegionTabBar();
@@ -120,14 +137,15 @@ function loaded(evt) {
             console.info('>>>> Add Tab For ' + region);
             addRegionTab(region);
             regionOkitJson[region] = new OkitJson(JSON.stringify(fileJson[region]));
-            if (okitJson === null) {
-                okitJson = regionOkitJson[region];
+            if (okitJsonModel === null) {
+                okitJsonModel = regionOkitJson[region];
+                newDesignerView();
                 $(jqId(regionTabName(region))).trigger("click");
             }
         }
     }
     displayOkitJson();
-    okitJson.draw();
+    displayDesignerView();
     displayTreeView();
 }
 function errorHandler(evt) {
@@ -147,7 +165,7 @@ function handleSave(evt) {
         saveJson(JSON.stringify(regionOkitJson, null, 2), filename);
     } else {
         console.info('>> Saving Single Region File');
-        saveJson(JSON.stringify(okitJson, null, 2), filename);
+        saveJson(JSON.stringify(okitJsonModel, null, 2), filename);
     }
 }
 function saveJson(text, filename){
@@ -195,15 +213,15 @@ function handleSaveAs(evt) {
     $(jqId('modal_dialog_wrapper')).removeClass('hidden');
 }
 function handleSaveAsTemplate(e) {
-    okitJson.title = $(jqId('template_title')).val();
-    okitJson.description = $(jqId('template_description')).val();
-    okitJson.template_type = $(jqId('template_type')).val();
+    okitJsonModel.title = $(jqId('template_title')).val();
+    okitJsonModel.description = $(jqId('template_description')).val();
+    okitJsonModel.template_type = $(jqId('template_type')).val();
     $.ajax({
         type: 'post',
         url: 'saveas/template',
         dataType: 'text',
         contentType: 'application/json',
-        data: JSON.stringify(okitJson),
+        data: JSON.stringify(okitJsonModel),
         success: function(resp) {
             console.info('Response : ' + resp);
             // Hide modal dialog
@@ -228,8 +246,9 @@ function handleRedraw(evt) {
 function redrawSVGCanvas(region='') {
     console.info('>>>>>>>>> Redrawing Canvas (Region : ' + region +')');
     console.info('>>>>>>>>> Active Region            : ' + activeRegion);
+    console.info(okitJsonView);
     if (region === '' || region === activeRegion) {
-        okitJson.draw();
+        displayDesignerView();
     }
 }
 /*
@@ -253,9 +272,10 @@ function loadTemplate(template_url) {
         dataType: 'text',
         contentType: 'application/json',
         success: function(resp) {
-            okitJson = new OkitJson(resp);
+            okitJsonModel = new OkitJson(resp);
+            newDesignerView();
             displayOkitJson();
-            okitJson.draw();
+            displayDesignerView();
             displayTreeView();
         },
         error: function(xhr, status, error) {
@@ -419,6 +439,7 @@ function loadRegions() {
             ociRegions = jsonBody;
             for(let region of jsonBody ){
                 //console.info(region['display_name']);
+                //console.info(region['name']);
                 region_select.append('option')
                     .attr('value', region['name'])
                     .text(region['display_name']);
@@ -457,43 +478,46 @@ let queryCount = 0;
 function showQueryResults() {
     console.group('Generating Query Results');
     let regions = $(jqId('query_region_id')).val();
-    okitQueryRequestJson = {};
-    okitQueryRequestJson.compartment_id = $(jqId('query_compartment_id')).val();
-    okitQueryRequestJson.config_profile = $(jqId('config_profile')).val();
-    okitQueryRequestJson.region = '';
+    let request = {};
+    request.compartment_id = $(jqId('query_compartment_id')).val();
+    request.config_profile = $(jqId('config_profile')).val();
+    request.region = '';
     clearRegionTabBar();
     showRegionTabBar();
-    okitJson = new OkitJson('', 'canvas-div');
-    newCanvas();
+    newModel();
+    newDesignerView();
+    okitJsonView.newCanvas();
     console.info('Regions Ids : ' + regions);
-    regionOkitJson = {};
+    newRegionsModel();
     if (regions.length > 0) {
-        queryCount = 0;
         $(jqId('modal_loading_wrapper')).removeClass('hidden');
-        for (let region of regions) {
-            console.info('Processing Selected Region : ' + region);
-            okitQueryRequestJson.region = region;
+        okitOCIQuery = new OkitOCIQuery(regions);
+        // Add Tabs
+        for (const [i, region] of regions.entries()) {
             addRegionTab(region);
-            regionOkitJson[region] = new OkitJson();
-            let request = JSON.clone(okitQueryRequestJson);
-            request.region = region;
-            Compartment.queryRoot(request, region);
         }
         $(jqId(regionTabName(regions[0]))).trigger("click");
+        okitOCIQuery.query(request, function(region) {
+            console.info('Complete ' + region);
+            okitJsonModel = regionOkitJson[region];
+            newDesignerView();
+            redrawSVGCanvas(region);
+            displayTreeView();
+            $(jqId('modal_loading_wrapper')).addClass('hidden');
+        });
     } else {
         console.info('Region Not Selected.');
     }
     $(jqId('modal_dialog_wrapper')).addClass('hidden');
     console.groupEnd();
 }
-// TODO: Delete
-function hideQueryProgressIfComplete() {
-    console.info(`>>>>>>>>>>>>> Query Count: ${queryCount}`);
-}
 $(document).ajaxStop(function() {
     console.info('All Ajax Functions Stopped');
-    $(jqId('modal_loading_wrapper')).addClass('hidden');
-    displayTreeView();
+    //$(jqId('modal_loading_wrapper')).addClass('hidden');
+    console.info(okitJsonView);
+    console.info(okitJsonModel);
+    //displayTreeView();
+    console.info(okitOCIQuery);
 });
 /*
 ** Export the Model as various formats
@@ -503,11 +527,8 @@ $(document).ajaxStop(function() {
  */
 function handleExportToSVG(evt) {
     hideNavMenu();
-    if (!okitJson.hasOwnProperty('open_compartment_index')) {
-        okitJson['open_compartment_index'] = 0;
-    }
     let okitcanvas = document.getElementById("canvas-svg");
-    let name = okitJson.compartments[okitJson['open_compartment_index']]['name'];
+    let name = okitJsonModel.compartments[0]['name'];
     let filename = name + '.svg';
     if (okitSettings.is_timestamp_files) {
         filename = name + getTimestamp() + '.svg';
@@ -597,7 +618,8 @@ function addRegionTab(region) {
             $('#region_tab_bar > button').removeClass("okit-tab-active");
             $(jqId(regionTabName(region))).addClass("okit-tab-active");
             activeRegion = region;
-            okitJson = regionOkitJson[region];
+            okitJsonModel = regionOkitJson[region];
+            newDesignerView();
             redrawSVGCanvas(region);
         });
 }
@@ -612,12 +634,15 @@ function regionTabName(region) {
 ** Json / Source Code
  */
 function displayOkitJson() {
-    console.info('>>> Region Count ' + Object.keys(regionOkitJson).length);
-    if (Object.keys(regionOkitJson).length > 0) {
-        $(jqId(JSON_PANEL)).html('<pre><code>' + JSON.stringify(regionOkitJson, null, 2) + '</code></pre>');
-    } else {
-        $(jqId(JSON_PANEL)).html('<pre><code>' + JSON.stringify(okitJson, null, 2) + '</code></pre>');
-    }
+    $(jqId(JSON_MODEL_PANEL)).html('<pre><code>' + JSON.stringify(okitJsonModel, null, 2) + '</code></pre>');
+    $(jqId(JSON_VIEW_PANEL)).html('<pre><code>' + JSON.stringify(okitJsonView, null, 2) + '</code></pre>');
+    $(jqId(JSON_REGION_PANEL)).html('<pre><code>' + JSON.stringify(regionOkitJson, null, 2) + '</code></pre>');
+}
+/*
+** Draw Canvas
+ */
+function displayDesignerView() {
+    okitJsonView.draw();
 }
 /*
 ** Slidebar handlers
@@ -625,7 +650,7 @@ function displayOkitJson() {
 // Tree View
 function displayTreeView() {
     if ($('#toggle_explorer_button').hasClass('okit-bar-panel-displayed')) {
-        let okit_tree = new OkitJsonTreeView(okitJson, 'explorer_panel');
+        let okit_tree = new OkitJsonTreeView(okitJsonModel, 'explorer_panel');
         okit_tree.draw();
     }
 }
diff --git a/okitweb/static/okit/js/okit_designer_drag_drop.js b/okitweb/static/okit/js/okit_designer_drag_drop.js
index 601ddea8d..15744a9ca 100644
--- a/okitweb/static/okit/js/okit_designer_drag_drop.js
+++ b/okitweb/static/okit/js/okit_designer_drag_drop.js
@@ -23,42 +23,19 @@ let asset_delete_functions = {};
 let asset_query_functions = {};
 let asset_clear_functions = [];
 
-// TODO: Delete
-function addAssetToDropTarget(artifact, title, target_id, compartment_id, target_type) {
-    console.info('addAssetToDropTarget - Artifact       : ' + artifact);
-    console.info('addAssetToDropTarget - Title          : ' + title);
-    console.info('addAssetToDropTarget - Target Id      : ' + target_id);
-    console.info('addAssetToDropTarget - Target Type    : ' + target_type);
-    console.info('addAssetToDropTarget - Compartment Id : ' + compartment_id);
-    console.info('addAssetToDropTarget - Add Functions  : ' + JSON.stringify(asset_add_functions));
-    let newFunction = 'new' + artifact.split(' ').join('');
-    let getFunction = 'get' + target_type.split(' ').join('');
-    console.info('addAssetToDropTarget - New Function   : ' + newFunction);
-    console.info('addAssetToDropTarget - Get Function   : ' + getFunction);
-    //window[asset_add_functions[artifact]](target_id, compartment_id, title);
-    let parentArtifact = okitJson[getFunction](target_id);
-    console.info('addAssetToDropTarget - Parent         : ' + JSON.stringify(parentArtifact));
-    let result = okitJson[newFunction]({parent_id: target_id, compartment_id: compartment_id, title: title}, parentArtifact);
-    console.info(JSON.stringify(result, null, 2));
-    okitJson.draw();
-}
-
 function updateAssetTarget(title, source_type, source_id, target_id) {
     window[asset_update_functions[title]](source_type, source_id, target_id);
-    okitJson.draw();
+    okitJsonView.draw();
 }
 
-function deleteAssetFromSVG(artifact, id) {
-    console.info('deleteAssetFromSVG - Artifact       : ' + artifact);
+function deleteAssetFromSVG(artefact, id) {
+    console.info('deleteAssetFromSVG - Artifact       : ' + artefact);
     console.info('deleteAssetFromSVG - Id             : ' + id);
-    let deleteFunction = 'delete' + artifact.split(' ').join('');
+    let deleteFunction = 'delete' + artefact.split(' ').join('');
     console.info('Delete Function : ' + deleteFunction);
-    //window[asset_delete_functions[artifact]](id);
-    okitJson[deleteFunction](id);
+    okitJsonView[deleteFunction](id);
     // Hide Context Menu
     $("#context-menu").addClass("hidden");
-    // Redraw
-    redrawSVGCanvas();
 }
 
 /*
@@ -69,15 +46,22 @@ function deleteAssetFromSVG(artifact, id) {
 ** Define palette Drag & Drop functions
  */
 
-let palette_drag_artifact = null;
+let palette_drag_artefact = null;
+
+function dragStart(evt, artefact) {
+    evt.dataTransfer.effectAllowed = 'copy';
+    let palette_artefact_data = {artefact: artefact.getArtifactReference(), title: artefact.getArtifactReference()};
+    let data_string = JSON.stringify(palette_artefact_data);
+    evt.dataTransfer.setData('text/plain', data_string);
+    palette_drag_artefact = artefact;
+}
 
-function dragStart(evt, artifact) {
+function dragFragmentStart(evt, artefact, title) {
     evt.dataTransfer.effectAllowed = 'copy';
-    let palette_artifact_data = {artifact: artifact.getArtifactReference(), title: artifact.getArtifactReference()};
-    let data_string = JSON.stringify(palette_artifact_data);
+    let palette_artefact_data = {artefact: artefact.getArtifactReference(), title: title};
+    let data_string = JSON.stringify(palette_artefact_data);
     evt.dataTransfer.setData('text/plain', data_string);
-    evt.dataTransfer.setData('any', artifact);
-    palette_drag_artifact = artifact;
+    palette_drag_artefact = artefact;
 }
 
 function dragEnter(evt) {
@@ -100,7 +84,7 @@ function dragLeave(evt) {
 function dragEnterOverLeave(evt) {
     evt = evt || d3.event;
     let type = evt.target.getAttribute('data-type');
-    if (palette_drag_artifact !== undefined && palette_drag_artifact.getDropTargets().indexOf(type) >= 0) {
+    if (palette_drag_artefact !== undefined && palette_drag_artefact.getDropTargets().indexOf(type) >= 0) {
         evt.dataTransfer.dropEffect = 'copy';  // See the section on the DataTransfer object.
     } else {
         evt.dataTransfer.effectAllowed = "none";
@@ -116,25 +100,25 @@ function dragDrop(evt) {
     if (evt.preventDefault) {
         evt.preventDefault(); // Necessary. Allows us to drop.
     }
-    let artifact = palette_drag_artifact;
-    let target_type = evt.target.getAttribute('data-type');
-    let compartment_id = evt.target.getAttribute('data-compartment-id');
-    let target_id = evt.target.id;
-    if (target_type === Compartment.getArtifactReference()) {compartment_id = target_id;}
+    let palette_artefact_data = JSON.parse(evt.dataTransfer.getData('text/plain'));
+    let target = {
+        id: evt.target.id,
+        type: evt.target.getAttribute('data-type'),
+        compartment_id: evt.target.getAttribute('data-compartment-id'),
+        title: palette_artefact_data.title
+    };
+    let artefact = palette_drag_artefact;
     // Add the Artifact to the OKIT Json / Canvas
-    let newFunction = 'new' + artifact.name;
-    let getFunction = 'get' + target_type.split(' ').join('');
-    console.info('New Function : ' + newFunction);
-    console.info('Get Function : ' + getFunction);
-    let parentArtifact = okitJson[getFunction](target_id);
-    let result = okitJson[newFunction]({parent_id: target_id, compartment_id: compartment_id, title: artifact.getArtifactReference()}, parentArtifact);
+    let dropFunction = 'drop' + artefact.name;
+    console.info('Drop Function : ' + dropFunction);
+    let result = okitJsonView[dropFunction](target);
     if (result) {
         console.debug(JSON.stringify(result, null, 2));
     }
-    okitJson.draw();
+    okitJsonView.draw();
     // Clear Drag class
     this.classList.remove('over');  // this / e.target is previous target element.
-    palette_drag_artifact = null;
+    palette_drag_artefact = null;
     return false;
 }
 
@@ -277,7 +261,7 @@ function getMousePosition(evt) {
 function handleContextMenu() {
     let thisid = d3.select(this).attr('id');
     let okit_id = d3.select(this).attr('data-okit-id');
-    let artifact = d3.select(this).attr('data-type');
+    let artefact = d3.select(this).attr('data-type');
     console.info('Right Click on ' + thisid);
     d3.event.preventDefault();
     d3.event.stopPropagation();
@@ -286,6 +270,6 @@ function handleContextMenu() {
     element.style.top =  d3.event.clientY + 'px';
     element.style.left = d3.event.clientX + 'px';
     $("#context-menu").find("*").off();
-    $("#right-click-delete").on('click', function() {deleteAssetFromSVG(artifact, okit_id);});
+    $("#right-click-delete").on('click', function() {deleteAssetFromSVG(artefact, okit_id);});
 }
 
diff --git a/okitweb/static/okit/js/okit_designer_fragments.js b/okitweb/static/okit/js/okit_designer_fragments.js
deleted file mode 100644
index 6f90c71cc..000000000
--- a/okitweb/static/okit/js/okit_designer_fragments.js
+++ /dev/null
@@ -1,415 +0,0 @@
-/*
-** Copyright (c) 2020, Oracle and/or its affiliates.
-** Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl.
-*/
-console.info('Loaded Fragments Javascript');
-
-const fragment_artifact = 'Fragment';
-asset_add_functions[fragment_artifact] = "addFragment";
-
-/*
-** Add Asset to JSON Model
- */
-function addFragment(parent_id, compartment_id, fragment_title) {
-    console.groupCollapsed('Adding ' + fragment_artifact + ' ' + fragment_title);
-    let fragment = new Fragment(parent_id, compartment_id);
-    fragment.add(fragment_title);
-    console.groupEnd();
-}
-
-// Use global because the static class field fails in FireFox
-let fragmentType = null;
-
-class Fragment extends OkitArtifact {
-    //static _fragmentType = ''
-
-    /*
-    ** Create
-     */
-    constructor (data={}, okitjson={}, parent=null) {
-        super(okitjson);
-        // Configure default values
-        this.compartment_id = data.compartment_id;
-        this.vcn_id = data.parent_id;
-        this.title = data.title;
-        this.fragment_url = '/static/okit/fragments/json/' + this.title.toLowerCase().split(' ').join('_') + '.json';
-
-        // Update with any passed data
-        for (let key in data) {
-            this[key] = data[key];
-        }
-        // Get Parent Type
-        this.parent_type = d3.select(d3Id(data.parent_id)).attr('data-type');
-        console.log('Fragment Parent Type : ' + this.parent_type);
-        if (this.parent_type === Compartment.getArtifactReference()) {
-            this.compartment_id = data.parent_id;
-        } else if (this.parent_type === VirtualCloudNetwork.getArtifactReference()) {
-            this.vcn_id = data.parent_id;
-        }
-        // Add Get Parent function
-        if (parent !== null) {
-            this.getParent = function() {return parent};
-        } else {
-            for (let parent of okitjson[this.artifactToElement(this.parent_type)]) {
-                if (parent.id === this.parent_id) {
-                    this.getParent = function () {
-                        return parent
-                    };
-                    break;
-                }
-            }
-        }
-        this.load();
-    }
-
-
-    /*
-    ** Get Container Child Artifacts
-     */
-
-
-    /*
-    ** Add functionality
-     */
-    addToCompartment(fragment_json={}, compartment_id=null) {
-        console.info('Adding Fragment to Compartment ' + compartment_id);
-        // We always need to process containers first so the sequence is :
-        //  1. Compartments
-        //  2. Virtual Cloud Networks
-        //  3. Subnets
-
-        // Process Add Sub Compartments
-        // process Add Virtual Cloud Networks
-        fragment_json.virtual_cloud_networks.forEach(function (artifact) {
-            artifact.compartment_id = compartment_id;
-            artifact.parent_id = compartment_id;
-            this.getOkitJson().newVirtualCloudNetwork(artifact);
-        }, this);
-        // Remaining Artifacts
-        this.addToVirtualCloudNetwork(fragment_json, null);
-    }
-
-    addToVirtualCloudNetwork(fragment_json={}, vcn_id=null) {
-        console.info('Adding Fragment to Virtual Cloud Network ' + vcn_id);
-        let ignore_elements = [this.artifactToElement(Compartment.getArtifactReference()), this.artifactToElement(VirtualCloudNetwork.getArtifactReference()), this.artifactToElement(Subnet.getArtifactReference())];
-        // Process Subnets (Container)
-        fragment_json.subnets.forEach(function (artifact) {
-            artifact.compartment_id = this.compartment_id;
-            if (vcn_id !== null) {
-                artifact.vcn_id = vcn_id;
-            }
-            artifact.parent_id = artifact.vcn_id;
-            this.getOkitJson().newSubnet(artifact);
-        }, this);
-        // Process Remaining
-        for (let key in fragment_json) {
-            console.info('Processing ' + key);
-            if (Array.isArray(fragment_json[key])) {
-                if (ignore_elements.indexOf(key) >= 0) {
-                    // Ignore because these are compartment sub containers
-                    continue;
-                } else {
-                    this.addCommon(fragment_json, key, vcn_id);
-                }
-            }
-        }
-    }
-
-    addCommon(fragment_json, key, vcn_id=null) {
-        if (key === this.artifactToElement(AutonomousDatabase.getArtifactReference())) {
-            // Process Autonomous Databases
-            fragment_json.autonomous_databases.forEach(function (artifact) {
-                artifact.compartment_id = this.compartment_id;
-                this.getOkitJson().newAutonomousDatabase(artifact);
-            }, this);
-        } else if (key === this.artifactToElement(BlockStorageVolume.getArtifactReference())) {
-            // Process Block Storage Volumes
-            fragment_json.block_storage_volumes.forEach(function (artifact) {
-                artifact.compartment_id = this.compartment_id;
-                this.getOkitJson().newBlockStorageVolume(artifact);
-            }, this);
-        } else if (key === this.artifactToElement(DynamicRoutingGateway.getArtifactReference())) {
-            // Process Dynamic Routing Gateways
-            fragment_json.dynamic_routing_gateways.forEach(function (artifact) {
-                artifact.compartment_id = this.compartment_id;
-                if (vcn_id !== null) {
-                    artifact.vcn_id = vcn_id;
-                }
-                artifact.parent_id = artifact.vcn_id;
-                if (this.getOkitJson().newDynamicRoutingGateway(artifact) === null) {
-                    // Gateway already exists so we need to update Route Table entries
-                    this.updateRouteTableRoutes(fragment_json, artifact, DynamicRoutingGateway.getArtifactReference());
-                }
-            }, this);
-        } else if (key === this.artifactToElement(FastConnect.getArtifactReference())) {
-            // Process Fast Connects
-            fragment_json.fast_connects.forEach(function (artifact) {
-                artifact.compartment_id = this.compartment_id;
-                if (vcn_id !== null) {
-                    artifact.vcn_id = vcn_id;
-                }
-                this.getOkitJson().newFastConnect(artifact);
-            }, this);
-        } else if (key === this.artifactToElement(FileStorageSystem.getArtifactReference())) {
-            // Process File Storage System
-            fragment_json.file_storage_systems.forEach(function (artifact) {
-                artifact.compartment_id = this.compartment_id;
-                this.getOkitJson().newFileStorageSystem(artifact);
-            }, this);
-        } else if (key === this.artifactToElement(Instance.getArtifactReference())) {
-            // Process Instances
-            fragment_json.instances.forEach(function (artifact) {
-                artifact.compartment_id = this.compartment_id;
-                this.getOkitJson().newInstance(artifact);
-            }, this);
-        } else if (key === this.artifactToElement(InternetGateway.getArtifactReference())) {
-            // Process Internet Gateways
-            fragment_json.internet_gateways.forEach(function (artifact) {
-                artifact.compartment_id = this.compartment_id;
-                if (vcn_id !== null) {
-                    artifact.vcn_id = vcn_id;
-                }
-                artifact.parent_id = artifact.vcn_id;
-                if (this.getOkitJson().newInternetGateway(artifact) === null) {
-                    // Gateway already exists so we need to update Route Table entries
-                    this.updateRouteTableRoutes(fragment_json, artifact, InternetGateway.getArtifactReference());
-                }
-            }, this);
-        } else if (key === this.artifactToElement(LoadBalancer.getArtifactReference())) {
-            // Process Load Balancers
-            fragment_json.load_balancers.forEach(function (artifact) {
-                artifact.compartment_id = this.compartment_id;
-                this.getOkitJson().newLoadBalancer(artifact);
-            }, this);
-        } else if (key === this.artifactToElement(NATGateway.getArtifactReference())) {
-            // Process NAT Gateways
-            fragment_json.nat_gateways.forEach(function (artifact) {
-                artifact.compartment_id = this.compartment_id;
-                if (vcn_id !== null) {
-                    artifact.vcn_id = vcn_id;
-                }
-                artifact.parent_id = artifact.vcn_id;
-                if (this.getOkitJson().newNATGateway(artifact) === null) {
-                    // Gateway already exists so we need to update Route Table entries
-                    this.updateRouteTableRoutes(fragment_json, artifact, NATGateway.getArtifactReference());
-                }
-            }, this);
-        } else if (key === this.artifactToElement(ObjectStorageBucket.getArtifactReference())) {
-            // Process Object Storage Buckets
-            fragment_json.object_storage_buckets.forEach(function (artifact) {
-                artifact.compartment_id = this.compartment_id;
-                this.getOkitJson().newObjectStorageBucket(artifact);
-            }, this);
-        } else if (key === this.artifactToElement(RouteTable.getArtifactReference())) {
-            // Process Route Tables
-            fragment_json.route_tables.forEach(function (artifact) {
-                artifact.compartment_id = this.compartment_id;
-                if (vcn_id !== null) {
-                    artifact.vcn_id = vcn_id;
-                }
-                artifact.parent_id = artifact.vcn_id;
-                this.getOkitJson().newRouteTable(artifact);
-            }, this);
-        } else if (key === this.artifactToElement(SecurityList.getArtifactReference())) {
-            // Process Security Lists
-            fragment_json.security_lists.forEach(function (artifact) {
-                artifact.compartment_id = this.compartment_id;
-                if (vcn_id !== null) {
-                    artifact.vcn_id = vcn_id;
-                }
-                artifact.parent_id = artifact.vcn_id;
-                this.getOkitJson().newSecurityList(artifact);
-            }, this);
-        } else if (key === this.artifactToElement(ServiceGateway.getArtifactReference())) {
-            // Process Service Gateways
-            fragment_json.service_gateways.forEach(function (artifact) {
-                artifact.compartment_id = this.compartment_id;
-                if (vcn_id !== null) {
-                    artifact.vcn_id = vcn_id;
-                }
-                artifact.parent_id = artifact.vcn_id;
-                if (this.getOkitJson().newServiceGateway(artifact) === null) {
-                    // Gateway already exists so we need to update Route Table entries
-                    this.updateRouteTableRoutes(fragment_json, artifact, ServiceGateway.getArtifactReference());
-                }
-            }, this);
-        } else {
-            console.warn('Unknown Json Artifact List ' + key);
-        }
-    }
-
-    /*
-    ** Fragment  Load Functions
-     */
-    load() {
-        console.info('Loading ' + this.fragment_url);
-        console.info(this);
-        // Need local variables for ajax success to access
-        let me = this;
-        $.ajax({
-            type: 'get',
-            url: this.fragment_url,
-            dataType: 'text',
-            contentType: 'application/json',
-            success: function(resp) {
-                let fragment_json = me.updateIds(JSON.parse(resp));
-                // Add Fragment to Json
-                if (me.parent_type === Compartment.getArtifactReference()) {
-                    me.addToCompartment(fragment_json, me.compartment_id);
-                } else if (me.parent_type === VirtualCloudNetwork.getArtifactReference()) {
-                    me.addToVirtualCloudNetwork(fragment_json, me.vcn_id);
-                } else {
-                    console.warn('Invalid Drop Parent ' + me.parent_type);
-                }
-                displayOkitJson();
-                okitJson.draw();
-            },
-            error: function(xhr, status, error) {
-                console.error('Status : ' + status);
-                console.error('Error  : ' + error);
-            }
-        });
-    }
-
-    // TODO: Code update processing. First we need to change the way we get parent_id
-    updateIds(fragment_json) {
-        // Regenerate all Ids so the fragment can be dropped multiple times
-        //this.updateCompartmentIds(fragment_json);
-        return fragment_json;
-    }
-    updateCompartmentIds(fragment_json) {
-        for (let compartment of fragment_json.compartments) {
-            let id = compartment.id;
-            let new_id = 'okit.compartment.' + uuidv4();
-            // Autonomous Database
-            for (let artefact of fragment_json.autonomous_databases) {
-                if (artefact.compartment_id === id) {artefact.compartment_id = new_id;}
-            }
-            // Autonomous Database
-            for (let artefact of fragment_json.block_storage_volumes) {
-                if (artefact.compartment_id === id) {artefact.compartment_id = new_id;}
-            }
-            // Compartments
-            for (let artefact of fragment_json.compartments) {
-                if (artefact.compartment_id === id) {artefact.compartment_id = new_id;}
-            }
-            // Database Systems
-            for (let artefact of fragment_json.database_systems) {
-                if (artefact.compartment_id === id) {artefact.compartment_id = new_id;}
-            }
-            // Dynamic Routing Gateway
-            for (let artefact of fragment_json.dynamic_routing_gateways) {
-                if (artefact.compartment_id === id) {artefact.compartment_id = new_id;}
-            }
-            // Fast Connect
-            for (let artefact of fragment_json.fast_connects) {
-                if (artefact.compartment_id === id) {artefact.compartment_id = new_id;}
-            }
-            // File Storage Systems
-            for (let artefact of fragment_json.file_storage_systems) {
-                if (artefact.compartment_id === id) {artefact.compartment_id = new_id;}
-            }
-            // Instance
-            for (let artefact of fragment_json.instances) {
-                if (artefact.compartment_id === id) {artefact.compartment_id = new_id;}
-            }
-            // Internet Gateways
-            for (let artefact of fragment_json.internet_gateways) {
-                if (artefact.compartment_id === id) {artefact.compartment_id = new_id;}
-            }
-            // Load Balancers
-            for (let artefact of fragment_json.load_balancers) {
-                if (artefact.compartment_id === id) {artefact.compartment_id = new_id;}
-            }
-            // Local Peering Gateways
-            for (let artefact of fragment_json.local_peering_gateways) {
-                if (artefact.compartment_id === id) {artefact.compartment_id = new_id;}
-            }
-            // NAT Gateways
-            for (let artefact of fragment_json.nat_gateways) {
-                if (artefact.compartment_id === id) {artefact.compartment_id = new_id;}
-            }
-            // Network Security Groups
-            for (let artefact of fragment_json.network_security_groups) {
-                if (artefact.compartment_id === id) {artefact.compartment_id = new_id;}
-            }
-            // Object Storage Bucket
-            for (let artefact of fragment_json.object_storage_buckets) {
-                if (artefact.compartment_id === id) {artefact.compartment_id = new_id;}
-            }
-            // Route Tables
-            for (let artefact of fragment_json.route_tables) {
-                if (artefact.compartment_id === id) {artefact.compartment_id = new_id;}
-            }
-            // Security Lists
-            for (let artefact of fragment_json.security_lists) {
-                if (artefact.compartment_id === id) {artefact.compartment_id = new_id;}
-            }
-            // Subnets
-            for (let artefact of fragment_json.subnets) {
-                if (artefact.compartment_id === id) {artefact.compartment_id = new_id;}
-            }
-            // Virtual Cloud Network
-            for (let artefact of fragment_json.virtual_cloud_networks) {
-                if (artefact.compartment_id === id) {artefact.compartment_id = new_id;}
-            }
-            // Update this id
-            compartment.id = new_id;
-        }
-    }
-
-
-    delete() {
-
-    }
-
-    draw() {
-
-    }
-
-    updateRouteTableRoutes(fragment_json, artefact, gateway_type) {
-        let gateway_id = '';
-        if (gateway_type === InternetGateway.getArtifactReference()) {
-            for (let gateway of this.getOkitJson().internet_gateways) {
-                if (gateway.vcn_id === artefact.vcn_id) {
-                    gateway_id = gateway.id;
-                    break;
-                }
-            }
-        }
-        // Check main OKIT json in case the route table has already been processed
-        for (let route_table of this.getOkitJson().route_tables) {
-            for (let rule of route_table.route_rules) {
-                if (rule.network_entity_id === artefact.id) {
-                    rule.network_entity_id = gateway_id;
-                }
-            }
-        }
-        // Check main fragment json in case the route table has not been processed
-        for (let route_table of fragment_json.route_tables) {
-            for (let rule of route_table.route_rules) {
-                if (rule.network_entity_id === artefact.id) {
-                    rule.network_entity_id = gateway_id;
-                }
-            }
-        }
-    }
-
-    /*
-    ** Static Functionality
-     */
-    static setFragmentType(type) {
-        fragmentType = type;
-    }
-    static getArtifactReference() {
-        //return this._fragmentType;
-        return fragmentType;
-    }
-
-    static getDropTargets() {
-        return [Compartment.getArtifactReference(), VirtualCloudNetwork.getArtifactReference()];
-    }
-
-
-}
-
diff --git a/okitweb/static/okit/js/okit_designer_generation.js b/okitweb/static/okit/js/okit_designer_generation.js
index 36ca9ab6a..c2144851b 100644
--- a/okitweb/static/okit/js/okit_designer_generation.js
+++ b/okitweb/static/okit/js/okit_designer_generation.js
@@ -23,11 +23,12 @@ function saveZip(url, filename="") {
 
 function handleGenerateTerraform(e) {
     hideNavMenu();
-    okitJson.validate(generateTerraform);
+    okitJsonModel.validate(generateTerraform);
 }
 function generateTerraform(results) {
     if (results.valid) {
-        let requestJson = JSON.parse(JSON.stringify(okitJson));
+        let requestJson = JSON.parse(JSON.stringify(okitJsonModel));
+        console.info(okitSettings);
         requestJson.use_variables = okitSettings.is_variables;
         $.ajax({
             type: 'post',
@@ -52,11 +53,11 @@ function generateTerraform(results) {
 
 function handleGenerateAnsible(e) {
     hideNavMenu();
-    okitJson.validate(generateAnsible);
+    okitJsonModel.validate(generateAnsible);
 }
 function generateAnsible(results) {
     if (results.valid) {
-        let requestJson = JSON.parse(JSON.stringify(okitJson));
+        let requestJson = JSON.parse(JSON.stringify(okitJsonModel));
         requestJson.use_variables = okitSettings.is_variables;
         $.ajax({
             type: 'post',
@@ -99,7 +100,7 @@ function handleGenerateTerraform11(e) {
 
 function handleExportToResourceManager(e) {
     hideNavMenu();
-    okitJson.validate(generateResourceManager);
+    okitJsonModel.validate(generateResourceManager);
 }
 function generateResourceManager(results) {
     if (results.valid) {
@@ -300,7 +301,7 @@ function displayResourceManagerDialog() {
     $(jqId('modal_dialog_wrapper')).removeClass('hidden');
 }
 function exportToResourceManager() {
-    let request_json = JSON.clone(okitJson);
+    let request_json = JSON.clone(okitJsonModel);
     request_json.location = {
         config_profile: $(jqId('config_profile')).val(),
         compartment_id: $(jqId('query_compartment_id')).val(),
diff --git a/okitweb/static/okit/js/okit_designer_properties.js b/okitweb/static/okit/js/okit_designer_properties.js
index ecc5fdf7b..7e024950f 100644
--- a/okitweb/static/okit/js/okit_designer_properties.js
+++ b/okitweb/static/okit/js/okit_designer_properties.js
@@ -83,9 +83,9 @@ function loadPropertiesSheet(json_element) {
             console.info(key + ' is label.');
             if (key.endsWith('_id')) {
                 // Get Artifact Associated With Id
-                let artifact_type = key.substr(0, (key.length - 3));
-                console.info('Label : Artifact Type ' + titleCase(artifact_type) + ' - ' + key);
-                $(jqId(key)).html(okitJson['get' + titleCase(artifact_type)](val).display_name);
+                let artefact_type = key.substr(0, (key.length - 3));
+                console.info('Label : Artifact Type ' + titleCase(artefact_type) + ' - ' + key);
+                $(jqId(key)).html(okitJsonView['get' + titleCase(artefact_type)](val).display_name);
             } else {
                 $(jqId(key)).html(val);
             }
@@ -140,7 +140,8 @@ function loadPropertiesSheet(json_element) {
                     .attr('type', 'button')
                     .text('X');
                 button.on('click', function () {
-                    delete json_element.defined_tags[key];
+                    delete json_element.defined_tags[namespace][key];
+                    if (Object.keys(json_element.defined_tags[namespace]).length === 0) {delete json_element.defined_tags[namespace];}
                     loadPropertiesSheet(json_element);
                     d3.event.stopPropagation();
                 });
diff --git a/okitweb/static/okit/js/okit_designer_ready.js b/okitweb/static/okit/js/okit_designer_ready.js
index 8517fd64e..8c97cda1f 100644
--- a/okitweb/static/okit/js/okit_designer_ready.js
+++ b/okitweb/static/okit/js/okit_designer_ready.js
@@ -7,7 +7,7 @@ console.info('Loaded Designer Ready Javascript');
 /*
 ** Define variables for Artefact classes
  */
-let okitJson = new OkitJson();
+let okitJsonModel = new OkitJson();
 let okitOciConfig = new OkitOCIConfig();
 let okitOciData = new OkitOCIData();
 let okitSettings = new OkitSettings();
@@ -21,7 +21,9 @@ $(document).ready(function() {
     okitOciConfig = new OkitOCIConfig();
     okitOciData = new OkitOCIData();
     okitSettings = new OkitSettings();
-    okitJson = new OkitJson();
+    okitJsonModel = new OkitJson();
+    okitJsonView = new OkitDesignerJsonView(okitJsonModel);
+    console.info(okitJsonView);
 
     /*
     ** Add handler functionality
@@ -57,7 +59,7 @@ $(document).ready(function() {
             if (!open) {
                 $('#explorer_panel').removeClass('hidden');
                 $(this).addClass('okit-bar-panel-displayed');
-                let okit_tree = new OkitJsonTreeView(okitJson, 'explorer_panel');
+                let okit_tree = new OkitJsonTreeView(okitJsonModel, 'explorer_panel');
                 okit_tree.draw();
             } else {
                 $('#explorer_panel').empty();
@@ -84,6 +86,7 @@ $(document).ready(function() {
         .text('Preferences');
 
     // Right Bar & Panels
+    // Properties
     d3.select(d3Id('console_right_bar')).append('label')
         .attr('id', 'toggle_properties_button')
         .attr('class', 'okit-pointer-cursor')
@@ -98,25 +101,7 @@ $(document).ready(function() {
             checkRightColumn();
         })
         .text('Properties');
-
-    d3.select(d3Id('console_right_bar')).append('label')
-        .attr('id', 'toggle_source_button')
-        .attr('class', 'okit-pointer-cursor')
-        .on('click', function () {
-            let open = $(this).hasClass('okit-bar-panel-displayed');
-            slideRightPanelsOffScreen();
-            if (!open) {
-                $(jqId(JSON_PANEL)).removeClass('hidden');
-                $(this).addClass('okit-bar-panel-displayed');
-                $(jqId('right_column_dragbar')).removeClass('hidden');
-            }
-            // Check to see if Right Column needs to be hidden
-            checkRightColumn();
-            // Display Json
-            displayOkitJson();
-        })
-        .text('Json');
-
+    // Validation
     d3.select(d3Id('console_right_bar')).append('label')
         .attr('id', 'toggle_validation_button')
         .attr('class', 'okit-pointer-cursor')
@@ -127,7 +112,7 @@ $(document).ready(function() {
                 $(jqId(VALIDATION_PANEL)).removeClass('hidden');
                 $(this).addClass('okit-bar-panel-displayed');
                 $(jqId('right_column_dragbar')).removeClass('hidden');
-                okitJson.validate(displayValidationResults);
+                okitJsonModel.validate(displayValidationResults);
             }
             // Check to see if Right Column needs to be hidden
             checkRightColumn();
@@ -136,6 +121,7 @@ $(document).ready(function() {
 
     // TODO: Uncomment when Value Proposition files have been created
     /*
+    // Cost Estimate
     d3.select(d3Id('console_right_bar')).append('label')
         .attr('id', 'toggle_value_proposition_button')
         .attr('class', 'okit-pointer-cursor')
@@ -155,6 +141,7 @@ $(document).ready(function() {
 
     // TODO: Integrate Estimate Calculator
     /*
+    // Value Proposition
     d3.select(d3Id('console_right_bar')).append('label')
         .attr('id', 'toggle_cost_estimate_button')
         .attr('class', 'okit-pointer-cursor')
@@ -172,6 +159,62 @@ $(document).ready(function() {
         })
         .text('Cost Estimate');
      */
+    if (developer_mode) {
+        // OKIT Model Json
+        d3.select(d3Id('console_right_bar')).append('label')
+            .attr('id', 'toggle_source_button')
+            .attr('class', 'okit-pointer-cursor')
+            .on('click', function () {
+                let open = $(this).hasClass('okit-bar-panel-displayed');
+                slideRightPanelsOffScreen();
+                if (!open) {
+                    $(jqId(JSON_MODEL_PANEL)).removeClass('hidden');
+                    $(this).addClass('okit-bar-panel-displayed');
+                    $(jqId('right_column_dragbar')).removeClass('hidden');
+                }
+                // Check to see if Right Column needs to be hidden
+                checkRightColumn();
+                // Display Json
+                displayOkitJson();
+            })
+            .text('Model');
+        // OKIT View Json
+        d3.select(d3Id('console_right_bar')).append('label')
+            .attr('id', 'toggle_source_button')
+            .attr('class', 'okit-pointer-cursor')
+            .on('click', function () {
+                let open = $(this).hasClass('okit-bar-panel-displayed');
+                slideRightPanelsOffScreen();
+                if (!open) {
+                    $(jqId(JSON_VIEW_PANEL)).removeClass('hidden');
+                    $(this).addClass('okit-bar-panel-displayed');
+                    $(jqId('right_column_dragbar')).removeClass('hidden');
+                }
+                // Check to see if Right Column needs to be hidden
+                checkRightColumn();
+                // Display Json
+                displayOkitJson();
+            })
+            .text('View');
+        // OKIT Region Json
+        d3.select(d3Id('console_right_bar')).append('label')
+            .attr('id', 'toggle_source_button')
+            .attr('class', 'okit-pointer-cursor')
+            .on('click', function () {
+                let open = $(this).hasClass('okit-bar-panel-displayed');
+                slideRightPanelsOffScreen();
+                if (!open) {
+                    $(jqId(JSON_REGION_PANEL)).removeClass('hidden');
+                    $(this).addClass('okit-bar-panel-displayed');
+                    $(jqId('right_column_dragbar')).removeClass('hidden');
+                }
+                // Check to see if Right Column needs to be hidden
+                checkRightColumn();
+                // Display Json
+                displayOkitJson();
+            })
+            .text('Regions Model');
+    }
 
     console.info('Added Designer Handlers');
 
@@ -216,7 +259,7 @@ $(document).ready(function() {
             let right_column_width = $(jqId('designer_right_column')).width();
             let moved = right_drag_bar_start_x - e.pageX;
             let new_width = right_column_width + moved;
-            // Remove Bar artifacts
+            // Remove Bar artefacts
             $(jqId('ghostbar')).remove();
             $(document).unbind('mousemove');
             dragging_right_drag_bar = false;
diff --git a/okitweb/static/okit/js/okit_designer_svg.js b/okitweb/static/okit/js/okit_designer_svg.js
index cfdd8e276..df27d5466 100644
--- a/okitweb/static/okit/js/okit_designer_svg.js
+++ b/okitweb/static/okit/js/okit_designer_svg.js
@@ -12,10 +12,10 @@ const icon_translate_y_start = -20;
 const icon_spacing = 10;
 const connector_colour = "#5f5f5f";
 const corner_radius = 0;
-const container_artifact_x_padding = Math.round(icon_width  * 3 / 2);
-const container_artifact_y_padding = Math.round(icon_height  * 3 / 2);
-const container_artifact_label_width = 300;
-const container_artifact_info_width = 100;
+const container_artefact_x_padding = Math.round(icon_width  * 3 / 2);
+const container_artefact_y_padding = Math.round(icon_height  * 3 / 2);
+const container_artefact_label_width = 300;
+const container_artefact_info_width = 100;
 const positional_adjustments = {
     padding: {x: Math.round(icon_width),   y: Math.round(icon_height)},
     spacing: {x: Math.round(icon_spacing), y: Math.round(icon_spacing)}
@@ -40,7 +40,8 @@ const svg_highlight_colour = "#00cc00";
 ** SVG Drawing / Manipulating SVG Canvas
  */
 
-function styleCanvas(canvas_svg) {
+// TODO: Deprecated
+function styleCanvasDeprecated(canvas_svg) {
     let colours = '';
     for (let key in stroke_colours) {
         colours += '.' + key.replace(new RegExp('_', 'g'), '-') + '{fill:' + stroke_colours[key] + ';} ';
@@ -117,11 +118,11 @@ function createSVGDefinitions(canvas_svg) {
         .attr("stroke-width", "1");
 }
 
-function newArtifactSVGDefinition(artifact, data_type) {
+function newArtifactSVGDefinition(artefact, data_type) {
     let definition = {};
-    definition['artifact'] = artifact;
+    definition['artefact'] = artefact;
     definition['data_type'] = data_type;
-    definition['name'] = {show: false, text: artifact['display_name']};
+    definition['name'] = {show: false, text: artefact['display_name']};
     definition['label'] = {show: false, text: data_type};
     definition['info'] = {show: false, text: data_type};
     definition['svg'] = {x: 0, y: 0, width: icon_width, height: icon_height};
@@ -137,12 +138,12 @@ function newArtifactSVGDefinition(artifact, data_type) {
 }
 
 function drawArtifact(definition) {
-    let id             = definition['artifact']['id'];
-    let parent_id      = definition['artifact']['parent_id'];
+    let id             = definition['artefact']['id'];
+    let parent_id      = definition['artefact']['parent_id'];
     let parent_svg_id  = parent_id + "-svg";
-    let compartment_id = definition['artifact']['compartment_id'];
+    let compartment_id = definition['artefact']['compartment_id'];
     let def_id         = definition['data_type'].replace(/ /g, '') + 'Svg';
-    console.info('Creating ' + definition['data_type'] + ' ' + definition['artifact']['display_name'])
+    console.info('Creating ' + definition['data_type'] + ' ' + definition['artefact']['display_name'])
     console.info('Id             : ' + id )
     console.info('Parent Id      : ' + parent_id)
     console.info('Parent SVG Id  : ' + parent_svg_id);
@@ -160,8 +161,8 @@ function drawArtifact(definition) {
         rect_width -= rect_x * 2;
     }
     // Check for Artifact Display Name and if it does not exist set it to Artifact Name
-    if (!definition['artifact'].hasOwnProperty('display_name')) {
-        definition['artifact']['display_name'] = definition['artifact']['name'];
+    if (!definition['artefact'].hasOwnProperty('display_name')) {
+        definition['artefact']['display_name'] = definition['artefact']['name'];
     }
     // Get Parent SVG
     let parent_svg = d3.select(d3Id(parent_svg_id));
@@ -207,10 +208,10 @@ function drawArtifact(definition) {
         let name_svg = svg.append('svg')
             .attr("x", "10")
             .attr("y", "0")
-            .attr("width", container_artifact_label_width) 
+            .attr("width", container_artefact_label_width) 
             .attr("height", definition['svg']['height'])
             .attr("preserveAspectRatio", "xMinYMin meet")
-            .attr("viewBox", "0 0 " + container_artifact_label_width + " " + definition['svg']['height']);
+            .attr("viewBox", "0 0 " + container_artefact_label_width + " " + definition['svg']['height']);
         let name = name_svg.append("text")
             .attr("class", "svg-text")
             .attr("id", id + '-display-name')
@@ -224,10 +225,10 @@ function drawArtifact(definition) {
         let label_svg = svg.append('svg')
             .attr("x", "10")
             .attr("y", "0")
-            .attr("width", container_artifact_label_width)
+            .attr("width", container_artefact_label_width)
             .attr("height", definition['svg']['height'])
             .attr("preserveAspectRatio", "xMinYMax meet")
-            .attr("viewBox", "0 0 " + container_artifact_label_width + " " + definition['svg']['height']);
+            .attr("viewBox", "0 0 " + container_artefact_label_width + " " + definition['svg']['height']);
         let name = label_svg.append("text")
             .attr("class", "svg-text")
             .attr("id", id + '-label')
@@ -239,12 +240,12 @@ function drawArtifact(definition) {
     }
     if (definition['info']['show']) {
         let info_svg = svg.append('svg')
-            .attr("x", Math.round(definition['svg']['width'] - container_artifact_info_width))
+            .attr("x", Math.round(definition['svg']['width'] - container_artefact_info_width))
             .attr("y", "0")
-            .attr("width", container_artifact_info_width)
+            .attr("width", container_artefact_info_width)
             .attr("height", definition['svg']['height'])
             .attr("preserveAspectRatio", "xMinYMax meet")
-            .attr("viewBox", "0 0 " + container_artifact_info_width + " " + definition['svg']['height']);
+            .attr("viewBox", "0 0 " + container_artefact_info_width + " " + definition['svg']['height']);
         let name = info_svg.append("text")
             .attr("class", "svg-text")
             .attr("id", id + '-info')
@@ -271,7 +272,7 @@ function drawArtifact(definition) {
 
     svg.append("title")
         .attr("id", id + '-title')
-        .text(definition['data_type'] + ": " + definition['artifact']['display_name']);
+        .text(definition['data_type'] + ": " + definition['artefact']['display_name']);
 
     // Set common attributes on svg element and children
     svg.on("contextmenu", handleContextMenu)
@@ -489,7 +490,8 @@ function coordString(coord) {
     return coord_str;
 }
 
-function clearCanvas() {
+// TODO: Deprecated
+function clearCanvasDeprecated() {
     let canvas_svg = d3.select(d3Id('canvas-svg'));
     canvas_svg.selectAll('*').remove();
     styleCanvas(canvas_svg);
@@ -504,7 +506,8 @@ function clearCanvas() {
     }
 }
 
-function addGrid(canvas_svg) {
+// TODO: Deprecated
+function addGridDeprecated(canvas_svg) {
     canvas_svg.append('rect')
         .attr("width", "100%")
         .attr("height", "100%")
@@ -540,8 +543,8 @@ function newCanvasWrapper(width=default_canvas_width, height=default_canvas_heig
     return canvas_wrapper_div;
 }
 
-
-function newCanvas(parent_id="canvas-div", width=400, height=300) {
+// TODO: Deprecated
+function newCanvasDeprecated(parent_id="canvas-div", width=400, height=300) {
     console.groupCollapsed('New Canvas');
     console.info('Parent                : ' + parent_id);
     console.info('Width                 : ' + width);
diff --git a/okitweb/static/okit/js/okit_template_artifact.js b/okitweb/static/okit/js/okit_template_artifact.js
index 8a2a5c1ba..e46ed8c9e 100644
--- a/okitweb/static/okit/js/okit_template_artifact.js
+++ b/okitweb/static/okit/js/okit_template_artifact.js
@@ -4,8 +4,8 @@
 */
 console.info('Loaded Okit Template Artifact Javascript');
 
-const template_artifact_stroke_colour = "#F80000";
-const template_artifact_query_cb = "template-artifact-query-cb";
+const template_artefact_stroke_colour = "#F80000";
+const template_artefact_query_cb = "template-artefact-query-cb";
 
 /*
 ** Define Okit Template Artifact Class
@@ -18,8 +18,8 @@ class OkitTemplateArtifact extends OkitArtifact {
         super(okitjson);
         this.parent_id = data.parent_id;
         // Configure default values
-        this.id = 'okit-' + template_artifact_prefix + '-' + uuidv4();
-        this.display_name = this.generateDefaultName(okitjson.template_artifacts.length + 1);
+        this.id = 'okit-' + template_artefact_prefix + '-' + uuidv4();
+        this.display_name = this.generateDefaultName(okitjson.template_artefacts.length + 1);
         this.compartment_id = '';
         // Update with any passed data
         this.merge(data);
@@ -84,7 +84,7 @@ class OkitTemplateArtifact extends OkitArtifact {
         definition['svg']['y'] = first_child.dy;
         definition['svg']['width'] = dimensions['width'];
         definition['svg']['height'] = dimensions['height'];
-        definition['rect']['stroke']['colour'] = template_artifact_stroke_colour;
+        definition['rect']['stroke']['colour'] = template_artefact_stroke_colour;
         definition['rect']['stroke']['dash'] = 1;
         console.info(JSON.stringify(definition, null, 2));
         console.groupEnd();
@@ -115,7 +115,7 @@ class OkitTemplateArtifact extends OkitArtifact {
     loadProperties() {
         let okitJson = this.getOkitJson();
         let me = this;
-        $(jqId(PROPERTIES_PANEL)).load("propertysheets/template_artifact.html", () => {loadPropertiesSheet(me);});
+        $(jqId(PROPERTIES_PANEL)).load("propertysheets/template_artefact.html", () => {loadPropertiesSheet(me);});
     }
 
 
@@ -141,13 +141,13 @@ class OkitTemplateArtifact extends OkitArtifact {
         queryCount++;
         $.ajax({
             type: 'get',
-            url: 'oci/artifacts/OkitTemplateArtifact',
+            url: 'oci/artefacts/OkitTemplateArtifact',
             dataType: 'text',
             contentType: 'application/json',
             data: JSON.stringify(request_json),
             success: function(resp) {
                 let response_json = JSON.parse(resp);
-                regionOkitJson[region].load({template_artifacts: response_json});
+                regionOkitJson[region].load({template_artefacts: response_json});
                 let len =  response_json.length;
                 if (len > 0) {
                     for(let i=0;i<len;i++ ){
@@ -159,14 +159,14 @@ class OkitTemplateArtifact extends OkitArtifact {
                     me.querySubComponents(request, region, null);
                 }
                 redrawSVGCanvas(region);
-                $('#' + template_artifact_query_cb).prop('checked', true);
+                $('#' + template_artefact_query_cb).prop('checked', true);
                 queryCount--;
                 hideQueryProgressIfComplete();
             },
             error: function(xhr, status, error) {
                 console.info('Status : ' + status)
                 console.info('Error : ' + error)
-                $('#' + template_artifact_query_cb).prop('checked', true);
+                $('#' + template_artefact_query_cb).prop('checked', true);
                 queryCount--;
                 hideQueryProgressIfComplete();
             }
@@ -185,18 +185,18 @@ $(document).ready(function() {
     let cell = row.append('td');
     cell.append('input')
         .attr('type', 'checkbox')
-        .attr('id', template_artifact_query_cb);
-    cell.append('label').text(template_artifact_artifact);
+        .attr('id', template_artefact_query_cb);
+    cell.append('label').text(template_artefact_artefact);
 
     // Setup Query Display Form
     body = d3.select('#query-oci-tbody');
     row = body.append('tr');
     cell = row.append('td')
-        .text(template_artifact_artifact);
+        .text(template_artefact_artefact);
     cell = row.append('td');
     let input = cell.append('input')
         .attr('type', 'text')
         .attr('class', 'query-filter')
-        .attr('id', 'template_artifact_name_filter')
-        .attr('name', 'template_artifact_name_filter');
+        .attr('id', 'template_artefact_name_filter')
+        .attr('name', 'template_artefact_name_filter');
 });
diff --git a/okitweb/static/okit/json/dropdown.json b/okitweb/static/okit/json/dropdown.json
index db2665e5f..7b68bc380 100644
--- a/okitweb/static/okit/json/dropdown.json
+++ b/okitweb/static/okit/json/dropdown.json
@@ -593,9 +593,9 @@
       "compartment_id": null,
       "create_image_allowed": true,
       "defined_tags": {},
-      "display_name": "Canonical-Ubuntu-16.04-Minimal-2020.06.11-0",
+      "display_name": "Canonical-Ubuntu-16.04-Minimal-2020.07.07-0",
       "freeform_tags": {},
-      "id": "ocid1.image.oc1.phx.aaaaaaaaetnvdvw2lsuwrtdirbvhfcm33pdxk66dhfcjzkqi2tjidbgl3yga",
+      "id": "ocid1.image.oc1.phx.aaaaaaaaefsjgrjlxkgmrpxcj2gmvroyjme7j7vjrywiudnadpzptp7aobxq",
       "launch_mode": "NATIVE",
       "launch_options": {
         "boot_volume_type": "PARAVIRTUALIZED",
@@ -611,7 +611,7 @@
       "shapes": [],
       "size_in_mbs": 47694,
       "sort_key": "Canonical Ubuntu 16.04 Minimal",
-      "time_created": "2020-06-12T18:44:51.216000+00:00"
+      "time_created": "2020-07-22T20:24:16.173000+00:00"
     },
     {
       "agent_features": null,
@@ -619,9 +619,9 @@
       "compartment_id": null,
       "create_image_allowed": true,
       "defined_tags": {},
-      "display_name": "Canonical-Ubuntu-18.04-2020.06.11-0",
+      "display_name": "Canonical-Ubuntu-18.04-2020.07.17-0",
       "freeform_tags": {},
-      "id": "ocid1.image.oc1.phx.aaaaaaaa2idgsogk3ialam2xdzoeipz4wli5itgjaki5n72objvaiygcyzwa",
+      "id": "ocid1.image.oc1.phx.aaaaaaaadjtptjgzvn6ws5yhhe5vsyxmtzz7jithtx64e5xoost2n2xhnwuq",
       "launch_mode": "NATIVE",
       "launch_options": {
         "boot_volume_type": "PARAVIRTUALIZED",
@@ -637,7 +637,7 @@
       "shapes": [],
       "size_in_mbs": 47694,
       "sort_key": "Canonical Ubuntu 18.04",
-      "time_created": "2020-06-12T18:42:58.028000+00:00"
+      "time_created": "2020-07-22T20:24:18.688000+00:00"
     },
     {
       "agent_features": null,
@@ -645,9 +645,9 @@
       "compartment_id": null,
       "create_image_allowed": true,
       "defined_tags": {},
-      "display_name": "Canonical-Ubuntu-18.04-Minimal-2020.06.11-0",
+      "display_name": "Canonical-Ubuntu-18.04-Minimal-2020.07.14-0",
       "freeform_tags": {},
-      "id": "ocid1.image.oc1.phx.aaaaaaaa45lzmijcz4iavrfxg4czkcufpqkvrd2rqhdyq6lykxpetfyfxkea",
+      "id": "ocid1.image.oc1.phx.aaaaaaaawi6cqak3bqs4zbdil2qlqkrymym7kkj4ofmjdwrehmya6m2bvc5a",
       "launch_mode": "NATIVE",
       "launch_options": {
         "boot_volume_type": "PARAVIRTUALIZED",
@@ -663,7 +663,7 @@
       "shapes": [],
       "size_in_mbs": 47694,
       "sort_key": "Canonical Ubuntu 18.04 Minimal",
-      "time_created": "2020-06-12T18:44:15.568000+00:00"
+      "time_created": "2020-07-22T20:24:15.820000+00:00"
     },
     {
       "agent_features": null,
@@ -671,9 +671,9 @@
       "compartment_id": null,
       "create_image_allowed": true,
       "defined_tags": {},
-      "display_name": "Canonical-Ubuntu-20.04-2020.06.11-0",
+      "display_name": "Canonical-Ubuntu-20.04-2020.07.16-0",
       "freeform_tags": {},
-      "id": "ocid1.image.oc1.phx.aaaaaaaagxjw52zc22yyyqtid5737elillsqt2vxokj5wdnvhvswhyol74qq",
+      "id": "ocid1.image.oc1.phx.aaaaaaaao3t2yjoowutaq2h66d5i4h424i2tyhycad7qeqpryjit4phv2t7q",
       "launch_mode": "NATIVE",
       "launch_options": {
         "boot_volume_type": "PARAVIRTUALIZED",
@@ -689,7 +689,7 @@
       "shapes": [],
       "size_in_mbs": 47694,
       "sort_key": "Canonical Ubuntu 20.04",
-      "time_created": "2020-06-12T18:44:14.738000+00:00"
+      "time_created": "2020-07-22T20:24:03.079000+00:00"
     },
     {
       "agent_features": null,
@@ -697,9 +697,9 @@
       "compartment_id": null,
       "create_image_allowed": true,
       "defined_tags": {},
-      "display_name": "Canonical-Ubuntu-20.04-Minimal-2020.06.11-0",
+      "display_name": "Canonical-Ubuntu-20.04-Minimal-2020.07.14-0",
       "freeform_tags": {},
-      "id": "ocid1.image.oc1.phx.aaaaaaaaoigo34hq77miw7synhozkrmonwij7qcs6smntlsp5cf4lixbgm4a",
+      "id": "ocid1.image.oc1.phx.aaaaaaaansrki6ckagvtvap7nrp4kuijo4tw64nrltqmiam4elpeycnt5s7q",
       "launch_mode": "NATIVE",
       "launch_options": {
         "boot_volume_type": "PARAVIRTUALIZED",
@@ -715,7 +715,7 @@
       "shapes": [],
       "size_in_mbs": 47694,
       "sort_key": "Canonical Ubuntu 20.04 Minimal",
-      "time_created": "2020-06-12T18:46:02.787000+00:00"
+      "time_created": "2020-07-22T20:24:30.596000+00:00"
     },
     {
       "agent_features": null,
@@ -723,9 +723,9 @@
       "compartment_id": null,
       "create_image_allowed": true,
       "defined_tags": {},
-      "display_name": "CentOS-6.10-2020.06.16-0",
+      "display_name": "CentOS-6.10-2020.07.21-0",
       "freeform_tags": {},
-      "id": "ocid1.image.oc1.phx.aaaaaaaa3katbupltm2drnulz2rsiyyrsvheq6als65lm2orrpwzcnvc6oxa",
+      "id": "ocid1.image.oc1.phx.aaaaaaaarl7ey7evp6ygzf6cz5yair4ohh4rg56kyvocq2oijbm3btbokc7a",
       "launch_mode": "NATIVE",
       "launch_options": {
         "boot_volume_type": "PARAVIRTUALIZED",
@@ -741,7 +741,7 @@
       "shapes": [],
       "size_in_mbs": 47694,
       "sort_key": "CentOS 6.10",
-      "time_created": "2020-06-19T16:30:05.763000+00:00"
+      "time_created": "2020-07-24T17:01:11.290000+00:00"
     },
     {
       "agent_features": null,
@@ -749,9 +749,9 @@
       "compartment_id": null,
       "create_image_allowed": true,
       "defined_tags": {},
-      "display_name": "CentOS-7-2020.06.16-0",
+      "display_name": "CentOS-7-2020.07.20-0",
       "freeform_tags": {},
-      "id": "ocid1.image.oc1.phx.aaaaaaaajw5o3qf7cha2mgov5vxnwyctmcy4eqayy7o4w7s6cqeyppqd3smq",
+      "id": "ocid1.image.oc1.phx.aaaaaaaaexd47pbho2zo2q6wjxrrnnesomx7a4p35pckvaimmyrbfeb32mwq",
       "launch_mode": "NATIVE",
       "launch_options": {
         "boot_volume_type": "PARAVIRTUALIZED",
@@ -767,7 +767,7 @@
       "shapes": [],
       "size_in_mbs": 47694,
       "sort_key": "CentOS 7",
-      "time_created": "2020-06-19T16:31:02.199000+00:00"
+      "time_created": "2020-07-24T17:01:07.879000+00:00"
     },
     {
       "agent_features": null,
@@ -775,9 +775,9 @@
       "compartment_id": null,
       "create_image_allowed": true,
       "defined_tags": {},
-      "display_name": "Oracle-Autonomous-Linux-7.8-2020.06-1",
+      "display_name": "Oracle-Autonomous-Linux-7.8-2020.07-0",
       "freeform_tags": {},
-      "id": "ocid1.image.oc1.phx.aaaaaaaaqefh4ndpmt2wo6eob3o27i3wulxoaydu64knhydqnxazs7w7r73a",
+      "id": "ocid1.image.oc1.phx.aaaaaaaa2jxeuysrd32npocwtxzwpgcfwzx7xeom3pmyfphsnyz2otzaprsa",
       "launch_mode": "NATIVE",
       "launch_options": {
         "boot_volume_type": "PARAVIRTUALIZED",
@@ -793,7 +793,7 @@
       "shapes": [],
       "size_in_mbs": 47694,
       "sort_key": "Oracle Autonomous Linux 7.8",
-      "time_created": "2020-07-02T01:14:37.272000+00:00"
+      "time_created": "2020-07-31T19:33:36.022000+00:00"
     },
     {
       "agent_features": null,
@@ -801,9 +801,9 @@
       "compartment_id": null,
       "create_image_allowed": true,
       "defined_tags": {},
-      "display_name": "Oracle-Linux-6.10-2020.06.30-0",
+      "display_name": "Oracle-Linux-6.10-2020.07.28-0",
       "freeform_tags": {},
-      "id": "ocid1.image.oc1.phx.aaaaaaaaf6zv3ak5yz42tjs4manw45gi4d26qbjfk74wgcoysmfqe2h5jidq",
+      "id": "ocid1.image.oc1.phx.aaaaaaaahdjz3c5nqsj62jnfo6qvaibivtftmfa4hmaq6t5qtqhmzbwae56q",
       "launch_mode": "NATIVE",
       "launch_options": {
         "boot_volume_type": "PARAVIRTUALIZED",
@@ -819,7 +819,7 @@
       "shapes": [],
       "size_in_mbs": 47694,
       "sort_key": "Oracle Linux 6.10",
-      "time_created": "2020-06-30T22:02:46.425000+00:00"
+      "time_created": "2020-07-28T15:55:24.387000+00:00"
     },
     {
       "agent_features": null,
@@ -827,35 +827,9 @@
       "compartment_id": null,
       "create_image_allowed": true,
       "defined_tags": {},
-      "display_name": "Oracle-Linux-7.7-Gen2-GPU-2020.03.23-0",
+      "display_name": "Oracle-Linux-7.8-Gen2-GPU-2020.07.28-0",
       "freeform_tags": {},
-      "id": "ocid1.image.oc1.phx.aaaaaaaanijoqmgnsm3ntbyrlg24cykq5lfz34ke5r5emjtudeq5edcuhcpq",
-      "launch_mode": "NATIVE",
-      "launch_options": {
-        "boot_volume_type": "PARAVIRTUALIZED",
-        "firmware": "UEFI_64",
-        "is_consistent_volume_naming_enabled": true,
-        "is_pv_encryption_in_transit_enabled": true,
-        "network_type": "PARAVIRTUALIZED",
-        "remote_data_volume_type": "PARAVIRTUALIZED"
-      },
-      "lifecycle_state": "AVAILABLE",
-      "operating_system": "Oracle Linux",
-      "operating_system_version": "7.7",
-      "shapes": [],
-      "size_in_mbs": 47694,
-      "sort_key": "Oracle Linux 7.7",
-      "time_created": "2020-03-23T20:11:01.126000+00:00"
-    },
-    {
-      "agent_features": null,
-      "base_image_id": null,
-      "compartment_id": null,
-      "create_image_allowed": true,
-      "defined_tags": {},
-      "display_name": "Oracle-Linux-7.8-Gen2-GPU-2020.06.30-0",
-      "freeform_tags": {},
-      "id": "ocid1.image.oc1.phx.aaaaaaaaawsooxhtnmok32wbqdvw56b2kyci3wjso42cmgn6bugqdmfvryuq",
+      "id": "ocid1.image.oc1.phx.aaaaaaaatmfjh5fe6cso5emm2p2vudkekc7hfs6jegs77ycop53xayf3rh3q",
       "launch_mode": "NATIVE",
       "launch_options": {
         "boot_volume_type": "PARAVIRTUALIZED",
@@ -871,7 +845,7 @@
       "shapes": [],
       "size_in_mbs": 47694,
       "sort_key": "Oracle Linux 7.8",
-      "time_created": "2020-06-30T22:02:42.672000+00:00"
+      "time_created": "2020-07-28T16:00:34.599000+00:00"
     },
     {
       "agent_features": null,
@@ -879,9 +853,9 @@
       "compartment_id": null,
       "create_image_allowed": true,
       "defined_tags": {},
-      "display_name": "Windows-Server-2012-R2-Datacenter-Edition-BM-Gen2-E2-2020.06.11-0",
+      "display_name": "Windows-Server-2012-R2-Datacenter-Edition-BM-Gen2-E2-2020.07.17-0",
       "freeform_tags": {},
-      "id": "ocid1.image.oc1.phx.aaaaaaaacbiytdq2uawalsbaeiwakudmxixytntjabrqvqwjo6wvu5fgymaa",
+      "id": "ocid1.image.oc1.phx.aaaaaaaaa66wky2u6m3657yzem4kmshe7e5cp2nlsqw57aaonjc2fhulk66q",
       "launch_mode": "NATIVE",
       "launch_options": {
         "boot_volume_type": "PARAVIRTUALIZED",
@@ -897,7 +871,7 @@
       "shapes": [],
       "size_in_mbs": 262144,
       "sort_key": "Windows Server 2012 R2 Datacenter",
-      "time_created": "2020-06-12T18:51:32.326000+00:00"
+      "time_created": "2020-07-20T23:14:34.317000+00:00"
     },
     {
       "agent_features": null,
@@ -905,9 +879,9 @@
       "compartment_id": null,
       "create_image_allowed": true,
       "defined_tags": {},
-      "display_name": "Windows-Server-2012-R2-Standard-Edition-VM-Gen2-E2-2020.06.11-0",
+      "display_name": "Windows-Server-2012-R2-Standard-Edition-VM-Gen2-E2-2020.07.17-0",
       "freeform_tags": {},
-      "id": "ocid1.image.oc1.phx.aaaaaaaatc4josfjc6psg236ns5s7snay2s5e7odfhzd333gehbcdseaxmdq",
+      "id": "ocid1.image.oc1.phx.aaaaaaaamm3ebizhsbhs2i4wefala2y6bv4xqaqh72qpnzw42ae3rdv6crgq",
       "launch_mode": "PARAVIRTUALIZED",
       "launch_options": {
         "boot_volume_type": "PARAVIRTUALIZED",
@@ -923,7 +897,7 @@
       "shapes": [],
       "size_in_mbs": 262144,
       "sort_key": "Windows Server 2012 R2 Standard",
-      "time_created": "2020-06-12T18:54:20.986000+00:00"
+      "time_created": "2020-07-20T23:17:48.662000+00:00"
     },
     {
       "agent_features": null,
@@ -931,9 +905,9 @@
       "compartment_id": null,
       "create_image_allowed": true,
       "defined_tags": {},
-      "display_name": "Windows-Server-2016-Datacenter-Edition-BM-Gen2-E2-2020.06.11-0",
+      "display_name": "Windows-Server-2016-Datacenter-Edition-BM-Gen2-E2-2020.07.17-0",
       "freeform_tags": {},
-      "id": "ocid1.image.oc1.phx.aaaaaaaaufegp6lojfnxxzuuvi66cpfvr2qmvdbh4zfp5p6u3bcawmj6av6q",
+      "id": "ocid1.image.oc1.phx.aaaaaaaa7yttxuaukmpugksxvrswkpaha6i3nbhqdaslfmyyilebdkrlvu6a",
       "launch_mode": "NATIVE",
       "launch_options": {
         "boot_volume_type": "PARAVIRTUALIZED",
@@ -949,7 +923,7 @@
       "shapes": [],
       "size_in_mbs": 262144,
       "sort_key": "Windows Server 2016 Datacenter",
-      "time_created": "2020-06-12T20:24:19.121000+00:00"
+      "time_created": "2020-07-22T19:24:05.661000+00:00"
     },
     {
       "agent_features": null,
@@ -957,9 +931,9 @@
       "compartment_id": null,
       "create_image_allowed": true,
       "defined_tags": {},
-      "display_name": "Windows-Server-2016-Standard-Edition-VM-Gen2-2020.06.11-0",
+      "display_name": "Windows-Server-2016-Standard-Edition-VM-Gen2-2020.07.17-0",
       "freeform_tags": {},
-      "id": "ocid1.image.oc1.phx.aaaaaaaa6uj6xmoaomngvnfu52qehfbdd2b7mbot3m5gk2rpwnuvt2cxpjxa",
+      "id": "ocid1.image.oc1.phx.aaaaaaaavvmygtfbzualhseetppebiqunkohug4axwzubgz3jmn7h3mbh34q",
       "launch_mode": "NATIVE",
       "launch_options": {
         "boot_volume_type": "PARAVIRTUALIZED",
@@ -975,7 +949,7 @@
       "shapes": [],
       "size_in_mbs": 262144,
       "sort_key": "Windows Server 2016 Standard",
-      "time_created": "2020-06-12T20:28:08.080000+00:00"
+      "time_created": "2020-07-23T06:21:09.455000+00:00"
     },
     {
       "agent_features": null,
@@ -1003,6 +977,32 @@
       "sort_key": "Windows Server 2019 Datacenter",
       "time_created": "2020-06-16T00:14:56.113000+00:00"
     },
+    {
+      "agent_features": null,
+      "base_image_id": null,
+      "compartment_id": null,
+      "create_image_allowed": true,
+      "defined_tags": {},
+      "display_name": "Windows-Server-2019-Standard-Edition-VM-Gen2-2020.07.17-0",
+      "freeform_tags": {},
+      "id": "ocid1.image.oc1.phx.aaaaaaaafruz4sutfyotjvrqjhl72ogzbb5hphzra5us2454zgrtgdmrwe7a",
+      "launch_mode": "PARAVIRTUALIZED",
+      "launch_options": {
+        "boot_volume_type": "PARAVIRTUALIZED",
+        "firmware": "UEFI_64",
+        "is_consistent_volume_naming_enabled": false,
+        "is_pv_encryption_in_transit_enabled": true,
+        "network_type": "PARAVIRTUALIZED",
+        "remote_data_volume_type": "PARAVIRTUALIZED"
+      },
+      "lifecycle_state": "AVAILABLE",
+      "operating_system": "Windows",
+      "operating_system_version": "Server 2019 Standard",
+      "shapes": [],
+      "size_in_mbs": 262144,
+      "sort_key": "Windows Server 2019 Standard",
+      "time_created": "2020-07-23T16:39:29.362000+00:00"
+    },
     {
       "agent_features": null,
       "base_image_id": null,
@@ -1229,6 +1229,24 @@
       "shape": "VM.Standard.B1.1",
       "sort_key": "VM.Standard.B1.1"
     },
+    {
+      "gpu_description": null,
+      "gpus": 0,
+      "local_disk_description": null,
+      "local_disks": 0,
+      "local_disks_total_size_in_gbs": null,
+      "max_vnic_attachment_options": null,
+      "max_vnic_attachments": 2,
+      "memory_in_gbs": 12,
+      "memory_options": null,
+      "networking_bandwidth_in_gbps": 0.6,
+      "networking_bandwidth_options": null,
+      "ocpu_options": null,
+      "ocpus": 1,
+      "processor_description": "2.2 GHz Intel\u00ae Xeon\u00ae E5-2669 v4 (Broadwell)",
+      "shape": "VM.Standard.B1.16",
+      "sort_key": "VM.Standard.B1.16"
+    },
     {
       "gpu_description": null,
       "gpus": 0,
@@ -1236,7 +1254,7 @@
       "local_disks": 0,
       "local_disks_total_size_in_gbs": null,
       "max_vnic_attachment_options": {
-        "default_per_ocpu": 2,
+        "default_per_ocpu": 1,
         "max": 24,
         "min": 2
       },
@@ -1245,7 +1263,7 @@
       "memory_options": {
         "default_per_ocpu_in_g_bs": 16,
         "max_in_g_bs": 1024,
-        "min_in_g_bs": 16
+        "min_in_g_bs": 1
       },
       "networking_bandwidth_in_gbps": 1,
       "networking_bandwidth_options": {
@@ -1259,8 +1277,8 @@
       },
       "ocpus": 1,
       "processor_description": "2.25 GHz AMD EPYC\u2122 7742 (Rome)",
-      "shape": "VM.Standard.B1.16",
-      "sort_key": "VM.Standard.B1.16"
+      "shape": "VM.Standard.B1.2",
+      "sort_key": "VM.Standard.B1.2"
     },
     {
       "gpu_description": null,
@@ -1277,8 +1295,26 @@
       "ocpu_options": null,
       "ocpus": 2,
       "processor_description": "2.0 GHz AMD EPYC\u2122 7551 (Naples)",
-      "shape": "VM.Standard.B1.2",
-      "sort_key": "VM.Standard.B1.2"
+      "shape": "VM.Standard.B1.4",
+      "sort_key": "VM.Standard.B1.4"
+    },
+    {
+      "gpu_description": null,
+      "gpus": 0,
+      "local_disk_description": null,
+      "local_disks": 0,
+      "local_disks_total_size_in_gbs": null,
+      "max_vnic_attachment_options": null,
+      "max_vnic_attachments": 2,
+      "memory_in_gbs": 24,
+      "memory_options": null,
+      "networking_bandwidth_in_gbps": 1.2,
+      "networking_bandwidth_options": null,
+      "ocpu_options": null,
+      "ocpus": 2,
+      "processor_description": "2.2 GHz Intel\u00ae Xeon\u00ae E5-2669 v4 (Broadwell)",
+      "shape": "VM.Standard.B1.8",
+      "sort_key": "VM.Standard.B1.8"
     },
     {
       "gpu_description": null,
@@ -1295,8 +1331,26 @@
       "ocpu_options": null,
       "ocpus": 4,
       "processor_description": "2.0 GHz AMD EPYC\u2122 7551 (Naples)",
-      "shape": "VM.Standard.B1.4",
-      "sort_key": "VM.Standard.B1.4"
+      "shape": "VM.Standard.E2.1",
+      "sort_key": "VM.Standard.E2.1"
+    },
+    {
+      "gpu_description": null,
+      "gpus": 0,
+      "local_disk_description": null,
+      "local_disks": 0,
+      "local_disks_total_size_in_gbs": null,
+      "max_vnic_attachment_options": null,
+      "max_vnic_attachments": 4,
+      "memory_in_gbs": 48,
+      "memory_options": null,
+      "networking_bandwidth_in_gbps": 2.4,
+      "networking_bandwidth_options": null,
+      "ocpu_options": null,
+      "ocpus": 4,
+      "processor_description": "2.2 GHz Intel\u00ae Xeon\u00ae E5-2669 v4 (Broadwell)",
+      "shape": "VM.Standard.E2.2",
+      "sort_key": "VM.Standard.E2.2"
     },
     {
       "gpu_description": null,
@@ -1313,8 +1367,44 @@
       "ocpu_options": null,
       "ocpus": 8,
       "processor_description": "2.0 GHz AMD EPYC\u2122 7551 (Naples)",
-      "shape": "VM.Standard.B1.8",
-      "sort_key": "VM.Standard.B1.8"
+      "shape": "VM.Standard.E2.4",
+      "sort_key": "VM.Standard.E2.4"
+    },
+    {
+      "gpu_description": null,
+      "gpus": 0,
+      "local_disk_description": null,
+      "local_disks": 0,
+      "local_disks_total_size_in_gbs": null,
+      "max_vnic_attachment_options": null,
+      "max_vnic_attachments": 8,
+      "memory_in_gbs": 96,
+      "memory_options": null,
+      "networking_bandwidth_in_gbps": 4.8,
+      "networking_bandwidth_options": null,
+      "ocpu_options": null,
+      "ocpus": 8,
+      "processor_description": "2.2 GHz Intel\u00ae Xeon\u00ae E5-2669 v4 (Broadwell)",
+      "shape": "VM.Standard.E2.8",
+      "sort_key": "VM.Standard.E2.8"
+    },
+    {
+      "gpu_description": null,
+      "gpus": 0,
+      "local_disk_description": null,
+      "local_disks": 0,
+      "local_disks_total_size_in_gbs": null,
+      "max_vnic_attachment_options": null,
+      "max_vnic_attachments": 16,
+      "memory_in_gbs": 192,
+      "memory_options": null,
+      "networking_bandwidth_in_gbps": 9.6,
+      "networking_bandwidth_options": null,
+      "ocpu_options": null,
+      "ocpus": 16,
+      "processor_description": "2.2 GHz Intel\u00ae Xeon\u00ae E5-2669 v4 (Broadwell)",
+      "shape": "VM.Standard.E3.Flex",
+      "sort_key": "VM.Standard.E3.Flex"
     },
     {
       "gpu_description": null,
@@ -1331,8 +1421,8 @@
       "ocpu_options": null,
       "ocpus": 1,
       "processor_description": "2.3 GHz Intel\u00ae Xeon\u00ae E5-2699 v3 (Haswell)",
-      "shape": "VM.Standard.E2.1",
-      "sort_key": "VM.Standard.E2.1"
+      "shape": "VM.Standard1.1",
+      "sort_key": "VM.Standard1.1"
     },
     {
       "gpu_description": null,
@@ -1349,8 +1439,8 @@
       "ocpu_options": null,
       "ocpus": 2,
       "processor_description": "2.3 GHz Intel\u00ae Xeon\u00ae E5-2699 v3 (Haswell)",
-      "shape": "VM.Standard.E2.2",
-      "sort_key": "VM.Standard.E2.2"
+      "shape": "VM.Standard1.16",
+      "sort_key": "VM.Standard1.16"
     },
     {
       "gpu_description": null,
@@ -1367,8 +1457,8 @@
       "ocpu_options": null,
       "ocpus": 4,
       "processor_description": "2.3 GHz Intel\u00ae Xeon\u00ae E5-2699 v3 (Haswell)",
-      "shape": "VM.Standard.E2.4",
-      "sort_key": "VM.Standard.E2.4"
+      "shape": "VM.Standard1.2",
+      "sort_key": "VM.Standard1.2"
     },
     {
       "gpu_description": null,
@@ -1385,8 +1475,8 @@
       "ocpu_options": null,
       "ocpus": 8,
       "processor_description": "2.3 GHz Intel\u00ae Xeon\u00ae E5-2699 v3 (Haswell)",
-      "shape": "VM.Standard.E2.8",
-      "sort_key": "VM.Standard.E2.8"
+      "shape": "VM.Standard1.4",
+      "sort_key": "VM.Standard1.4"
     },
     {
       "gpu_description": null,
@@ -1403,8 +1493,8 @@
       "ocpu_options": null,
       "ocpus": 16,
       "processor_description": "2.3 GHz Intel\u00ae Xeon\u00ae E5-2699 v3 (Haswell)",
-      "shape": "VM.Standard.E3.Flex",
-      "sort_key": "VM.Standard.E3.Flex"
+      "shape": "VM.Standard1.8",
+      "sort_key": "VM.Standard1.8"
     },
     {
       "gpu_description": null,
@@ -1421,8 +1511,8 @@
       "ocpu_options": null,
       "ocpus": 1,
       "processor_description": "2.0 GHz Intel\u00ae Xeon\u00ae Platinum 8167M (Skylake)",
-      "shape": "VM.Standard1.1",
-      "sort_key": "VM.Standard1.1"
+      "shape": "VM.Standard2.1",
+      "sort_key": "VM.Standard2.1"
     },
     {
       "gpu_description": null,
@@ -1439,8 +1529,8 @@
       "ocpu_options": null,
       "ocpus": 2,
       "processor_description": "2.0 GHz Intel\u00ae Xeon\u00ae Platinum 8167M (Skylake)",
-      "shape": "VM.Standard1.16",
-      "sort_key": "VM.Standard1.16"
+      "shape": "VM.Standard2.16",
+      "sort_key": "VM.Standard2.16"
     },
     {
       "gpu_description": null,
@@ -1457,8 +1547,8 @@
       "ocpu_options": null,
       "ocpus": 4,
       "processor_description": "2.0 GHz Intel\u00ae Xeon\u00ae Platinum 8167M (Skylake)",
-      "shape": "VM.Standard1.2",
-      "sort_key": "VM.Standard1.2"
+      "shape": "VM.Standard2.2",
+      "sort_key": "VM.Standard2.2"
     },
     {
       "gpu_description": null,
@@ -1475,8 +1565,8 @@
       "ocpu_options": null,
       "ocpus": 8,
       "processor_description": "2.0 GHz Intel\u00ae Xeon\u00ae Platinum 8167M (Skylake)",
-      "shape": "VM.Standard1.4",
-      "sort_key": "VM.Standard1.4"
+      "shape": "VM.Standard2.24",
+      "sort_key": "VM.Standard2.24"
     },
     {
       "gpu_description": null,
@@ -1493,8 +1583,8 @@
       "ocpu_options": null,
       "ocpus": 16,
       "processor_description": "2.0 GHz Intel\u00ae Xeon\u00ae Platinum 8167M (Skylake)",
-      "shape": "VM.Standard1.8",
-      "sort_key": "VM.Standard1.8"
+      "shape": "VM.Standard2.4",
+      "sort_key": "VM.Standard2.4"
     },
     {
       "gpu_description": null,
@@ -1511,26 +1601,6 @@
       "ocpu_options": null,
       "ocpus": 24,
       "processor_description": "2.0 GHz Intel\u00ae Xeon\u00ae Platinum 8167M (Skylake)",
-      "shape": "VM.Standard2.1",
-      "sort_key": "VM.Standard2.1"
-    },
-    {
-      "shape": "VM.Standard2.16",
-      "sort_key": "VM.Standard2.16"
-    },
-    {
-      "shape": "VM.Standard2.2",
-      "sort_key": "VM.Standard2.2"
-    },
-    {
-      "shape": "VM.Standard2.24",
-      "sort_key": "VM.Standard2.24"
-    },
-    {
-      "shape": "VM.Standard2.4",
-      "sort_key": "VM.Standard2.4"
-    },
-    {
       "shape": "VM.Standard2.8",
       "sort_key": "VM.Standard2.8"
     }
diff --git a/okitweb/static/okit/json/release.json b/okitweb/static/okit/json/release.json
index 2eda12da1..733a22fe2 100644
--- a/okitweb/static/okit/json/release.json
+++ b/okitweb/static/okit/json/release.json
@@ -1,4 +1,4 @@
 {
-  "release": "0.8.0",
-  "tag": "v0.8.0"
+  "release": "0.9.0",
+  "tag": "v0.9.0"
 }
\ No newline at end of file
diff --git a/okitweb/static/okit/model/js/artefacts/autonomous_database.js b/okitweb/static/okit/model/js/artefacts/autonomous_database.js
new file mode 100644
index 000000000..d58e0f489
--- /dev/null
+++ b/okitweb/static/okit/model/js/artefacts/autonomous_database.js
@@ -0,0 +1,67 @@
+/*
+** Copyright (c) 2020, Oracle and/or its affiliates.
+** Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl.
+*/
+console.info('Loaded Autonomous Database Javascript');
+
+/*
+** Define Autonomous Database Class
+ */
+class AutonomousDatabase extends OkitArtifact {
+    /*
+    ** Create
+     */
+    constructor (data={}, okitjson={}) {
+        super(okitjson);
+        // Configure default values
+        this.display_name = this.generateDefaultName(okitjson.autonomous_databases.length + 1);
+        this.compartment_id = data.parent_id;
+        this.db_name = this.display_name.replace('-', '');
+        this.admin_password = generatePassword();
+        this.data_storage_size_in_tbs = 1;
+        this.cpu_core_count = 1;
+        this.db_workload = 'OLTP';
+        this.is_auto_scaling_enabled = true;
+        this.is_free_tier = false;
+        this.license_model = 'BRING_YOUR_OWN_LICENSE';
+        // Update with any passed data
+        this.merge(data);
+        this.convert();
+    }
+
+
+    /*
+    ** Clone Functionality
+     */
+    clone() {
+        return new AutonomousDatabase(this, this.getOkitJson());
+    }
+
+
+    /*
+    ** Delete Processing
+     */
+    deleteChildren() {
+        // Remove Instance references
+        for (let instance of this.getOkitJson().instances) {
+            for (let i=0; i < instance['autonomous_database_ids'].length; i++) {
+                if (instance.autonomous_database_ids[i] === this.id) {
+                    instance.autonomous_database_ids.splice(i, 1);
+                }
+            }
+        }
+    }
+
+
+    getNamePrefix() {
+        return super.getNamePrefix() + 'ad';
+    }
+
+    /*
+    ** Static Functionality
+     */
+    static getArtifactReference() {
+        return 'Autonomous Database';
+    }
+
+}
diff --git a/okitweb/static/okit/model/js/artefacts/block_storage_volume.js b/okitweb/static/okit/model/js/artefacts/block_storage_volume.js
new file mode 100644
index 000000000..1c8e1c845
--- /dev/null
+++ b/okitweb/static/okit/model/js/artefacts/block_storage_volume.js
@@ -0,0 +1,68 @@
+/*
+** Copyright (c) 2020, Oracle and/or its affiliates.
+** Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl.
+*/
+console.info('Loaded Block Storage Volume Javascript');
+
+/*
+** Define Block Storage Volume Class
+ */
+class BlockStorageVolume extends OkitArtifact {
+    /*
+    ** Create
+     */
+    constructor (data={}, okitjson={}) {
+        super(okitjson);
+        // Configure default values
+        this.display_name = this.generateDefaultName(okitjson.block_storage_volumes.length + 1);
+        this.compartment_id = data.parent_id;
+        this.availability_domain = '1';
+        this.size_in_gbs = 1024;
+        this.backup_policy = 'bronze';
+        this.vpus_per_gb = '10';
+        // Update with any passed data
+        this.merge(data);
+        this.convert();
+        // Check if built from a query
+        if (this.availability_domain.length > 1) {
+            this.region_availability_domain = this.availability_domain;
+            this.availability_domain = this.region_availability_domain.slice(-1);
+        }
+    }
+
+
+    /*
+    ** Clone Functionality
+     */
+    clone() {
+        return new BlockStorageVolume(this, this.getOkitJson());
+    }
+
+
+    /*
+    ** Delete Processing
+     */
+    deleteChildren() {
+        // Remove Instance references
+        for (let instance of this.getOkitJson().instances) {
+            for (let i=0; i < instance.block_storage_volume_ids.length; i++) {
+                if (instance.block_storage_volume_ids[i] === this.id) {
+                    instance.block_storage_volume_ids.splice(i, 1);
+                }
+            }
+        }
+    }
+
+
+    getNamePrefix() {
+        return super.getNamePrefix() + 'bsv';
+    }
+
+    /*
+    ** Static Functionality
+     */
+    static getArtifactReference() {
+        return 'Block Storage Volume';
+    }
+
+}
diff --git a/okitweb/static/okit/model/js/artefacts/compartment.js b/okitweb/static/okit/model/js/artefacts/compartment.js
new file mode 100644
index 000000000..9f7166a2f
--- /dev/null
+++ b/okitweb/static/okit/model/js/artefacts/compartment.js
@@ -0,0 +1,116 @@
+/*
+** Copyright (c) 2020, Oracle and/or its affiliates.
+** Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl.
+*/
+console.info('Loaded Compartment Javascript');
+
+/*
+** Define Compartment Artifact Class
+ */
+class Compartment extends OkitArtifact {
+    /*
+    ** Create
+     */
+    constructor (data={}, okitjson={}) {
+        super(okitjson);
+        // Configure default values
+        this.compartment_id = null;
+        this.name = this.generateDefaultName(okitjson.compartments.length + 1);
+        // Update with any passed data
+        this.merge(data);
+        this.convert();
+        this.display_name = this.name;
+    }
+
+    /*
+    ** Conversion Routine allowing loading of old json
+     */
+    convert() {
+        super.convert();
+        // Check if Root
+        if (this.id === this.compartment_id) {this.compartment_id = null;}
+    }
+
+    /*
+    ** Clone Functionality
+     */
+    clone() {
+        return new Compartment(this, this.getOkitJson());
+    }
+
+
+    /*
+    ** Delete Processing
+     */
+    deleteChildren() {
+        console.groupCollapsed('Deleting Children of ' + this.getArtifactReference() + ' : ' + this.display_name);
+        // Remove Compartments
+        this.getOkitJson().compartments = this.getOkitJson().compartments.filter(function(child) {
+            if (child.compartment_id === this.id && child.id !== this.id) {
+                console.info('Deleting ' + child.display_name);
+                child.delete();
+                return false; // So the filter removes the element
+            }
+            return true;
+        }, this);
+        // Virtual Cloud Networks
+        this.getOkitJson().virtual_cloud_networks = this.getOkitJson().virtual_cloud_networks.filter(function(child) {
+            if (child.compartment_id === this.id) {
+                console.info('Deleting ' + child.display_name);
+                child.delete();
+                return false; // So the filter removes the element
+            }
+            return true;
+        }, this);
+        // Block Storage Volumes
+        this.getOkitJson().block_storage_volumes = this.getOkitJson().block_storage_volumes.filter(function(child) {
+            if (child.compartment_id === this.id) {
+                console.info('Deleting ' + child.display_name);
+                child.delete();
+                return false; // So the filter removes the element
+            }
+            return true;
+        }, this);
+        // Object Storage Buckets
+        this.getOkitJson().object_storage_buckets = this.getOkitJson().object_storage_buckets.filter(function(child) {
+            if (child.compartment_id === this.id) {
+                console.info('Deleting ' + child.display_name);
+                child.delete();
+                return false; // So the filter removes the element
+            }
+            return true;
+        }, this);
+        // Autonomous Databases
+        this.getOkitJson().autonomous_databases = this.getOkitJson().autonomous_databases.filter(function(child) {
+            if (child.compartment_id === this.id) {
+                console.info('Deleting ' + child.display_name);
+                child.delete();
+                return false; // So the filter removes the element
+            }
+            return true;
+        }, this);
+        console.groupEnd();
+        // Dynamic Routing Gateways
+        this.getOkitJson().dynamic_routing_gateways = this.getOkitJson().dynamic_routing_gateways.filter(function(child) {
+            if (child.compartment_id === this.id) {
+                console.info('Deleting ' + child.display_name);
+                child.delete();
+                return false; // So the filter removes the element
+            }
+            return true;
+        }, this);
+    }
+
+
+    getNamePrefix() {
+        return super.getNamePrefix() + 'comp';
+    }
+
+    /*
+    ** Static Functionality
+     */
+    static getArtifactReference() {
+        return 'Compartment';
+    }
+
+}
diff --git a/okitweb/static/okit/model/js/artefacts/database_system.js b/okitweb/static/okit/model/js/artefacts/database_system.js
new file mode 100644
index 000000000..b481875c7
--- /dev/null
+++ b/okitweb/static/okit/model/js/artefacts/database_system.js
@@ -0,0 +1,81 @@
+/*
+** Copyright (c) 2020, Oracle and/or its affiliates.
+** Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl.
+*/
+console.info('Loaded Database System Javascript');
+
+/*
+** Define Autonomous Database Class
+ */
+class DatabaseSystem extends OkitArtifact {
+    /*
+    ** Create
+     */
+    constructor (data={}, okitjson={}) {
+        super(okitjson);
+        // Configure default values
+        this.display_name = this.generateDefaultName(okitjson.database_systems.length + 1);
+        this.compartment_id = data.parent_id;
+        this.availability_domain = 1;
+        this.database_edition = 'STANDARD_EDITION';
+        this.db_home = {
+            database: {
+                admin_password: generatePassword(),
+                db_name: this.display_name.replace('-', '').substr(4, 8),
+                db_workload: 'OLTP'
+            },
+            db_version: '12.2.0.1'
+        };
+        this.hostname = this.display_name.toLowerCase();
+        this.shape = 'VM.Standard2.1';
+        this.ssh_public_keys = '';
+        this.subnet_id = data.parent_id;
+        this.backup_network_nsg_ids = [];
+        this.backup_subnet_id = '';
+        this.cluster_name = '';
+        this.cpu_core_count = 0;
+        this.data_storage_percentage = 80;
+        this.data_storage_size_in_gb = 256;
+        this.db_system_options = {
+            storage_management: 'ASM'
+        }
+        this.disk_redundancy = '';
+        this.domain = '';
+        this.fault_domains = [];
+        this.license_model = 'LICENSE_INCLUDED';
+        this.node_count = 1;
+        this.nsg_ids = [];
+        this.source = 'NONE'
+        this.sparse_diskgroup = false;
+        this.time_zone = '+00:00';
+        // Update with any passed data
+        this.merge(data);
+        this.convert();
+        // Check if built from a query
+        if (this.availability_domain.length > 1) {
+            this.region_availability_domain = this.availability_domain;
+            this.availability_domain = this.getAvailabilityDomainNumber(this.region_availability_domain);
+        }
+    }
+
+
+    /*
+    ** Clone Functionality
+     */
+    clone() {
+        return new DatabaseSystem(this, this.getOkitJson());
+    }
+
+
+    getNamePrefix() {
+        return super.getNamePrefix() + 'ds';
+    }
+
+    /*
+    ** Static Functionality
+     */
+    static getArtifactReference() {
+        return 'Database System';
+    }
+
+}
diff --git a/okitweb/static/okit/model/js/artefacts/dynamic_routing_gateway.js b/okitweb/static/okit/model/js/artefacts/dynamic_routing_gateway.js
new file mode 100644
index 000000000..bbad32997
--- /dev/null
+++ b/okitweb/static/okit/model/js/artefacts/dynamic_routing_gateway.js
@@ -0,0 +1,63 @@
+/*
+** Copyright (c) 2020, Oracle and/or its affiliates.
+** Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl.
+*/
+console.info('Loaded Dynamic Routing Gateway Javascript');
+
+/*
+** Define Dynamic Routing Gateway Class
+ */
+class DynamicRoutingGateway extends OkitArtifact {
+    /*
+    ** Create
+     */
+    constructor (data={}, okitjson={}) {
+        super(okitjson);
+        // Configure default values
+        this.display_name = this.generateDefaultName(okitjson.dynamic_routing_gateways.length + 1);
+        this.compartment_id = data.compartment_id;
+        this.vcn_id = data.parent_id;
+        this.fast_connect_ids = [];
+        this.ipsec_connection_ids = [];
+        this.remote_peering_connection_ids = [];
+        // Update with any passed data
+        this.merge(data);
+        this.convert();
+    }
+
+
+    /*
+    ** Clone Functionality
+     */
+    clone() {
+        return new DynamicRoutingGateway(this, this.getOkitJson());
+    }
+
+
+    /*
+    ** Delete Processing
+     */
+    deleteChildren() {
+        // Remove Dynamic Routing Gateway references
+        for (let route_table of this.getOkitJson().route_tables) {
+            for (let i = 0; i < route_table.route_rules.length; i++) {
+                if (route_table.route_rules[i]['network_entity_id'] === this.id) {
+                    route_table.route_rules.splice(i, 1);
+                }
+            }
+        }
+    }
+
+
+    getNamePrefix() {
+        return super.getNamePrefix() + 'drg';
+    }
+
+    /*
+    ** Static Functionality
+     */
+    static getArtifactReference() {
+        return 'Dynamic Routing Gateway';
+    }
+
+}
diff --git a/okitweb/static/okit/model/js/artefacts/fast_connect.js b/okitweb/static/okit/model/js/artefacts/fast_connect.js
new file mode 100644
index 000000000..58d769f0b
--- /dev/null
+++ b/okitweb/static/okit/model/js/artefacts/fast_connect.js
@@ -0,0 +1,50 @@
+/*
+** Copyright (c) 2020, Oracle and/or its affiliates.
+** Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl.
+*/
+console.info('Loaded FastConnect Javascript');
+
+/*
+** Define FastConnect Class
+ */
+class FastConnect extends OkitArtifact {
+    /*
+    ** Create
+     */
+    constructor (data={}, okitjson={}) {
+        super(okitjson);
+        // Configure default values
+        this.display_name = this.generateDefaultName(okitjson.fast_connects.length + 1);
+        this.compartment_id = data.parent_id;
+        // Update with any passed data
+        this.merge(data);
+        this.convert();
+    }
+
+
+    /*
+    ** Clone Functionality
+     */
+    clone() {
+        return new FastConnect(this, this.getOkitJson());
+    }
+
+
+    /*
+    ** Delete Processing
+     */
+    deleteChildren() {}
+
+
+    getNamePrefix() {
+        return super.getNamePrefix() + 'fc';
+    }
+
+    /*
+    ** Static Functionality
+     */
+    static getArtifactReference() {
+        return 'Fast Connect';
+    }
+
+}
diff --git a/okitweb/static/okit/model/js/artefacts/file_storage_system.js b/okitweb/static/okit/model/js/artefacts/file_storage_system.js
new file mode 100644
index 000000000..a90e070fa
--- /dev/null
+++ b/okitweb/static/okit/model/js/artefacts/file_storage_system.js
@@ -0,0 +1,90 @@
+/*
+** Copyright (c) 2020, Oracle and/or its affiliates.
+** Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl.
+*/
+console.info('Loaded File Storage System Javascript');
+
+/*
+** Define File Storage System Class
+ */
+class FileStorageSystem extends OkitArtifact {
+    /*
+    ** Create
+     */
+    constructor (data={}, okitjson={}) {
+        super(okitjson);
+        // Configure default values
+        this.display_name = this.generateDefaultName(okitjson.file_storage_systems.length + 1);
+        this.compartment_id = '';
+        this.availability_domain = '1';
+        this.exports = [];
+        this.mount_targets = [];
+        // Update with any passed data
+        this.merge(data);
+        // Check if built from a query
+        if (this.availability_domain.length > 1) {
+            this.region_availability_domain = this.availability_domain;
+            this.availability_domain = this.region_availability_domain.slice(-1);
+        }
+        if (this.exports.length > 0) {
+            this.primary_export = this.exports[0];
+        } else if (this.subnet_id) {
+            this.primary_export = {path: '/mnt', export_options: {source: this.getOkitJson().getSubnet(this.subnet_id)['cidr_block'], access: 'READ_ONLY', anonymous_gid: '', anonymous_uid: '', identity_squash: 'NONE', require_privileged_source_port: true}};
+            this.exports[0] = this.primary_export;
+        }
+        if (this.mount_targets.length > 0) {
+            this.primary_mount_target = this.mount_targets[0];
+        } else if (this.subnet_id) {
+            this.primary_mount_target = {subnet_id: this.subnet_id, hostname_label: this.display_name.toLowerCase(), nsg_ids: [], export_set: {max_fs_stat_bytes: '', max_fs_stat_files: ''}};
+            this.mount_targets[0] = this.primary_mount_target;
+        }
+        this.convert();
+        // Expose subnet_id for the first Mount target at the top level
+        delete this.subnet_id;
+        Object.defineProperty(this, 'subnet_id', { get: function() {return this.primary_mount_target.subnet_id;}, enumerable: false });
+    }
+
+
+    /*
+    ** Conversion Routine allowing loading of old json
+     */
+    convert() {
+        super.convert();
+        // Export Element
+        if (this.exports === undefined) {this.export = [];}
+        if (this.exports[0].export_options === undefined) {this.exports[0].export_options = {};}
+        if (this.path !== undefined) {this.exports[0].path = this.path; delete this.path;}
+        if (this.source !== undefined) {this.exports[0].export_options.source = this.source; delete this.source;}
+        if (this.access !== undefined) {this.exports[0].export_options.access = this.access; delete this.access;}
+        // Mount Target
+        if (this.mount_targets === undefined) {this.mount_target = [{}];}
+        if (this.subnet_id !== undefined) {this.mount_targets[0].subnet_id = this.subnet_id; delete this.subnet_id;}
+        if (this.hostname_label !== undefined) {this.mount_target[0].hostname_label = this.hostname_label; delete this.hostname_label;}
+    }
+
+    /*
+    ** Clone Functionality
+     */
+    clone() {
+        return new FileStorageSystem(this, this.getOkitJson());
+    }
+
+
+    /*
+    ** Delete Processing
+     */
+    deleteChildren() {}
+
+
+    getNamePrefix() {
+        return super.getNamePrefix() + 'fss';
+    }
+
+    /*
+    ** Static Functionality
+     */
+    static getArtifactReference() {
+        return 'File Storage System';
+    }
+
+}
diff --git a/okitweb/static/okit/model/js/artefacts/fragment.js b/okitweb/static/okit/model/js/artefacts/fragment.js
new file mode 100644
index 000000000..07af063e4
--- /dev/null
+++ b/okitweb/static/okit/model/js/artefacts/fragment.js
@@ -0,0 +1,81 @@
+/*
+** Copyright (c) 2020, Oracle and/or its affiliates.
+** Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl.
+*/
+console.info('Loaded OKIT Model Javascript');
+
+/*
+** Representation of overall OKIT Model Data Structure
+ */
+class Fragment extends  OkitJson {
+    /*
+    ** Create
+     */
+    constructor(target={}, okit_json={}) {
+        super();
+        //this.target = target;
+        //this.okit_json = okit_json;
+        Object.defineProperty(this, 'target', { get: function() {return target;} });
+        Object.defineProperty(this, 'okit_json', { get: function() {return okit_json;} });
+        console.info(this.target);
+        console.info(this.okit_json);
+    }
+
+    get fragment_title() {return this.target.title;}
+    get fragment_url() {return '/static/okit/fragments/json/' + this.fragment_title.toLowerCase().split(' ').join('_') + '.json';}
+    get target_id() {return this.target.id;}
+    get target_type() {return this.target.type;}
+
+    updateIds() {
+        console.group('Updating Ids');
+        // Regenerate all Ids so the fragment can be dropped multiple times
+        let id_map = {};
+        this.updatePrimaryIds(this, id_map);
+        this.updateIdAssociations(this, id_map);
+        console.groupEnd();
+    }
+
+    updatePrimaryIds(fragment_json, id_map) {
+        let me = this;
+        if (Array.isArray(fragment_json) && fragment_json.length > 0 && typeof fragment_json[0] === 'object') {
+            fragment_json.forEach(function(e) {return me.updatePrimaryIds(e, id_map);});
+        } else if (typeof fragment_json === 'object' && fragment_json !== null) {
+            for (let [key, val] of Object.entries(fragment_json)) {
+                if (key === 'id') {
+                    id_map[val] = `okit.${val.split('.')[1]}.${uuidv4()}`;
+                    fragment_json[key] = id_map[val];
+                } else if (!Array.isArray(val) && typeof val === 'object' && val !== null) {
+                    this.updatePrimaryIds(val, id_map);
+                } else if (Array.isArray(val)) {
+                    val.forEach(function(e) {return me.updatePrimaryIds(e, id_map);});
+                }
+            }
+        }
+    }
+
+    updateIdAssociations(fragment_json, id_map) {
+        let me = this;
+        if (Array.isArray(fragment_json) && fragment_json.length > 0 && typeof fragment_json[0] === 'object') {
+            fragment_json.forEach(function(e) {return me.updateIdAssociations(e, id_map);});
+        } else if (typeof fragment_json === 'object' && fragment_json !== null) {
+            for (let [key, val] of Object.entries(fragment_json)) {
+                if (key.endsWith('_id') || key.endsWith('_ids')) {
+                    if (Array.isArray(val)) {
+                        fragment_json[key] = val.map(function (e) {
+                            return id_map[e] ? id_map[e] : e;
+                        });
+                    } else if (typeof val === 'string') {
+                        fragment_json[key] = id_map[val] ? id_map[val] : fragment_json[key];
+                    }
+                } else if (!Array.isArray(val) && typeof val === 'object' && val !== null) {
+                    this.updateIdAssociations(val, id_map);
+                } else if (Array.isArray(val)) {
+                    val.forEach(function(e) {return me.updateIdAssociations(e, id_map);});
+                }
+            }
+        } else {
+            console.info(`Unknown Type : ${typeof fragment_json}`);
+        }
+    }
+
+}
\ No newline at end of file
diff --git a/okitweb/static/okit/model/js/artefacts/instance.js b/okitweb/static/okit/model/js/artefacts/instance.js
new file mode 100644
index 000000000..2cc31419b
--- /dev/null
+++ b/okitweb/static/okit/model/js/artefacts/instance.js
@@ -0,0 +1,115 @@
+/*
+** Copyright (c) 2020, Oracle and/or its affiliates.
+** Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl.
+*/
+console.info('Loaded Instance Javascript');
+
+/*
+** Define Instance Class
+ */
+class Instance extends OkitArtifact {
+    /*
+    ** Create
+     */
+    constructor (data={}, okitjson={}) {
+        super(okitjson);
+        // Configure default values
+        // # Required
+        this.display_name = this.generateDefaultName(okitjson.instances.length + 1);
+        this.availability_domain = '1';
+        this.compartment_id = '';
+        this.shape = 'VM.Standard.E2.1';
+        // # Optional
+        this.fault_domain = '';
+        this.agent_config = {is_monitoring_disabled: false, is_management_disabled: false};
+        this.vnics = [];
+        this.source_details = {os: 'Oracle Linux', version: '7.7', boot_volume_size_in_gbs: '50', source_type: 'image'};
+        this.metadata = {ssh_authorized_keys: '', user_data: ''};
+        // TODO: Future
+        //this.launch_options_specified = false;
+        //this.launch_options = {boot_volume_type: '', firmware: '', is_consistent_volume_naming_enabled: false, is_pv_encryption_in_transit_enabled: false, network_type: '', remote_data_volume_type: ''};
+        this.block_storage_volume_ids = [];
+        this.object_storage_bucket_ids = [];
+        this.autonomous_database_ids = [];
+        this.preserve_boot_volume = false;
+        this.is_pv_encryption_in_transit_enabled = false;
+        // Update with any passed data
+        this.merge(data);
+        this.convert();
+        // Check if built from a query
+        if (this.availability_domain.length > 1) {
+            this.region_availability_domain = this.availability_domain;
+            this.availability_domain = this.getAvailabilityDomainNumber(this.region_availability_domain);
+        }
+        if (this.vnics.length > 0) {
+            this.primary_vnic = this.vnics[0];
+            for (let vnic of this.vnics) {
+                vnic.region_availability_domain = vnic.availability_domain;
+                vnic.availability_domain = this.getAvailabilityDomainNumber(vnic.region_availability_domain);
+            }
+        } else {
+            this.primary_vnic = {subnet_id: '', assign_public_ip: true, nsg_ids: [], skip_source_dest_check: false, hostname_label: this.display_name.toLowerCase() + '0'};
+            this.vnics[0] = this.primary_vnic;
+        }
+    }
+
+    /*
+    ** Conversion Routine allowing loading of old json
+     */
+    convert() {
+        super.convert();
+        // Move Metadata elements
+        if (this.metadata === undefined) {this.metadata = {};}
+        if (this.cloud_init_yaml !== undefined) {this.metadata.user_data = String(this.cloud_init_yaml); delete this.cloud_init_yaml;}
+        if (this.authorized_keys !== undefined) {this.metadata.ssh_authorized_keys = this.authorized_keys; delete this.authorized_keys;}
+        if (this.metadata.authorized_keys !== undefined) {this.metadata.ssh_authorized_keys = this.metadata.authorized_keys; delete this.metadata.authorized_keys;}
+        // Move Source Details elements
+        if (this.source_details === undefined) {this.source_details = {};}
+        if (this.os !== undefined) {this.source_details.os = this.os; delete this.os;}
+        if (this.version !== undefined) {this.source_details.version = this.version; delete this.version;}
+        if (this.boot_volume_size_in_gbs !== undefined) {this.source_details.boot_volume_size_in_gbs = this.boot_volume_size_in_gbs; delete this.boot_volume_size_in_gbs;}
+        // Move Subnet_ids
+        if (this.vnics === undefined) {this.vnics = [];}
+        if (this.subnet_ids !== undefined) {if (this.subnet_ids.length > 0) {for (let subnet_id of this.subnet_ids) {this.vnics.push({subnet_id: subnet_id})}} delete this.subnet_ids;}
+        if (this.subnet_id !== undefined) {if (this.vnics.length === 0) {this.vnics.push({subnet_id: ''})} this.vnics[0].subnet_id = this.subnet_id; delete this.subnet_id;}
+        if (this.hostname_label !== undefined) {this.vnics[0].hostname_label = this.hostname_label; delete this.hostname_label;}
+        for (let vnic of this.vnics) {
+            if (!vnic.hasOwnProperty('assign_public_ip')) {vnic.assign_public_ip = true;}
+            if (!vnic.hasOwnProperty('skip_source_dest_check')) {vnic.skip_source_dest_check = false;}
+            if (!vnic.hasOwnProperty('nsg_ids')) {vnic.nsg_ids = [];}
+        }
+    }
+
+    /*
+    ** Clone Functionality
+     */
+    clone() {
+        return new Instance(this, this.getOkitJson());
+    }
+
+    /*
+    ** Delete Processing
+     */
+    deleteChildren() {
+        // Remove Load Balancer references
+        for (let load_balancer of this.getOkitJson().load_balancers) {
+            for (let i = 0; i < load_balancer.instance_ids.length; i++) {
+                if (load_balancer.instance_ids[i] === this.id) {
+                    load_balancer.instance_ids.splice(i, 1);
+                }
+            }
+        }
+    }
+
+    getNamePrefix() {
+        return super.getNamePrefix() + 'in';
+    }
+
+    /*
+    ** Static Functionality
+     */
+    static getArtifactReference() {
+        return 'Instance';
+    }
+
+}
diff --git a/okitweb/static/okit/model/js/artefacts/instance_pool.js b/okitweb/static/okit/model/js/artefacts/instance_pool.js
new file mode 100644
index 000000000..f6e8d669a
--- /dev/null
+++ b/okitweb/static/okit/model/js/artefacts/instance_pool.js
@@ -0,0 +1,36 @@
+/*
+** Copyright (c) 2020, Oracle and/or its affiliates.
+** Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl.
+*/
+console.info('Loaded Instance Pool Javascript');
+
+/*
+** Define Compartment Artifact Class
+ */
+class InstancePool extends OkitArtifact {
+    /*
+    ** Create
+     */
+    constructor(data = {}, okitjson = {}) {
+        super(okitjson);
+        // Configure default values
+        this.name = this.generateDefaultName(okitjson.compartments.length + 1);
+        // Update with any passed data
+        this.merge(data);
+        this.convert();
+    }
+
+    /*
+    ** Conversion Routine allowing loading of old json
+     */
+    convert() {
+        super.convert();
+    }
+
+    /*
+    ** Clone Functionality
+     */
+    clone() {
+        return new InstancePool(this, this.getOkitJson());
+    }
+}
\ No newline at end of file
diff --git a/okitweb/static/okit/model/js/artefacts/internet_gateway.js b/okitweb/static/okit/model/js/artefacts/internet_gateway.js
new file mode 100644
index 000000000..1a30edc0e
--- /dev/null
+++ b/okitweb/static/okit/model/js/artefacts/internet_gateway.js
@@ -0,0 +1,63 @@
+/*
+** Copyright (c) 2020, Oracle and/or its affiliates.
+** Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl.
+*/
+console.info('Loaded Internet Gateway Javascript');
+
+/*
+** Define Internet Gateway Artifact Class
+ */
+class InternetGateway extends OkitArtifact {
+    /*
+    ** Create
+     */
+    constructor (data={}, okitjson={}) {
+        super(okitjson);
+        // Configure default values
+        this.display_name = this.generateDefaultName(okitjson.internet_gateways.length + 1);
+        this.compartment_id = data.compartment_id;
+        this.vcn_id = data.parent_id;
+        this.enabled = true;
+        this.freeform_tags = {};
+        this.defined_tags = {};
+        // Update with any passed data
+        this.merge(data);
+        this.convert();
+    }
+
+
+    /*
+    ** Clone Functionality
+     */
+    clone() {
+        return new InternetGateway(this, this.getOkitJson());
+    }
+
+
+    /*
+    ** Delete Processing
+     */
+    deleteChildren() {
+        // Remove Internet Gateway references
+        for (let route_table of this.getOkitJson().route_tables) {
+            for (let i = 0; i < route_table.route_rules.length; i++) {
+                if (route_table.route_rules[i]['network_entity_id'] === this.id) {
+                    route_table.route_rules.splice(i, 1);
+                }
+            }
+        }
+    }
+
+
+    getNamePrefix() {
+        return super.getNamePrefix() + 'ig';
+    }
+
+    /*
+    ** Static Functionality
+     */
+    static getArtifactReference() {
+        return 'Internet Gateway';
+    }
+
+}
diff --git a/okitweb/static/okit/model/js/artefacts/load_balancer.js b/okitweb/static/okit/model/js/artefacts/load_balancer.js
new file mode 100644
index 000000000..228cb8c2d
--- /dev/null
+++ b/okitweb/static/okit/model/js/artefacts/load_balancer.js
@@ -0,0 +1,68 @@
+/*
+** Copyright (c) 2020, Oracle and/or its affiliates.
+** Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl.
+*/
+console.info('Loaded Load Balancer Javascript');
+
+/*
+** Define Load Balancer Class
+ */
+class LoadBalancer extends OkitArtifact {
+    /*
+    ** Create
+     */
+    constructor (data={}, okitjson={}) {
+        super(okitjson);
+        // Configure default values
+        this.display_name = this.generateDefaultName(okitjson.load_balancers.length + 1);
+        this.compartment_id = '';
+        this.subnet_ids = [];
+        this.is_private = false;
+        this.shape = '100Mbps';
+        this.protocol = 'HTTP';
+        this.port = '80';
+        this.instance_ids = [];
+        this.ip_mode = '';
+        this.network_security_group_ids = [];
+        this.backend_policy = 'ROUND_ROBIN';
+        this.health_checker = {url_path: '/'}
+        // Update with any passed data
+        this.merge(data);
+        this.convert();
+        // Expose subnet_id for the first Mount target at the top level
+        Object.defineProperty(this, 'subnet_id', { get: function() {return this.subnet_ids[0];}, enumerable: false });
+    }
+
+    /*
+    ** Conversion Routine allowing loading of old json
+     */
+    convert() {
+        if (this.shape_name !== undefined) {this.shape = this.shape_name; delete this.shape_name;}
+    }
+
+
+    /*
+    ** Clone Functionality
+     */
+    clone() {
+        return new LoadBalancer(this, this.getOkitJson());
+    }
+
+
+    /*
+    ** Delete Processing
+     */
+    deleteChildren() {}
+
+    getNamePrefix() {
+        return super.getNamePrefix() + 'lb';
+    }
+
+    /*
+    ** Static Functionality
+     */
+    static getArtifactReference() {
+        return 'Load Balancer';
+    }
+
+}
diff --git a/okitweb/static/okit/model/js/artefacts/local_peering_gateway.js b/okitweb/static/okit/model/js/artefacts/local_peering_gateway.js
new file mode 100644
index 000000000..8eae92c7b
--- /dev/null
+++ b/okitweb/static/okit/model/js/artefacts/local_peering_gateway.js
@@ -0,0 +1,59 @@
+/*
+** Copyright (c) 2020, Oracle and/or its affiliates.
+** Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl.
+*/
+console.info('Loaded Local Peering Gateway Javascript');
+
+/*
+** Define Local Peering Gateway Class
+ */
+class LocalPeeringGateway extends OkitArtifact {
+    /*
+    ** Create
+     */
+    constructor (data={}, okitjson={}) {
+        super(okitjson);
+        // Configure default values
+        this.display_name = this.generateDefaultName(okitjson.local_peering_gateways.length + 1);
+        this.compartment_id = '';
+        this.vcn_id = data.parent_id;
+        this.route_table_id = '';
+        this.peer_id = '';
+        // Update with any passed data
+        this.merge(data);
+        this.convert();
+    }
+
+
+    /*
+    ** Clone Functionality
+     */
+    clone() {
+        return new LocalPeeringGateway(this, this.getOkitJson());
+    }
+
+
+    /*
+    ** Delete Processing
+     */
+    deleteChildren() {}
+
+
+    getNamePrefix() {
+        return super.getNamePrefix() + 'lpg';
+    }
+
+    /*
+    ** Static Functionality
+     */
+    static getArtifactReference() {
+        return 'Local Peering Gateway';
+    }
+
+}
+
+function setPeeredGatewayPeerId(input_id, artefact) {
+    if (input_id === 'peer_id' && artefact.peer_id) {
+        okitJson.getLocalPeeringGateway(artefact.peer_id).peer_id = artefact.id;
+    }
+}
diff --git a/okitweb/static/okit/model/js/artefacts/nat_gateway.js b/okitweb/static/okit/model/js/artefacts/nat_gateway.js
new file mode 100644
index 000000000..8925e2bfe
--- /dev/null
+++ b/okitweb/static/okit/model/js/artefacts/nat_gateway.js
@@ -0,0 +1,60 @@
+/*
+** Copyright (c) 2020, Oracle and/or its affiliates.
+** Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl.
+*/
+console.info('Loaded NAT Gateway Javascript');
+
+/*
+** Define NAT Gateway Class
+ */
+class NATGateway extends OkitArtifact {
+    /*
+    ** Create
+     */
+    constructor (data={}, okitjson={}) {
+        super(okitjson);
+        // Configure default values
+        this.display_name = this.generateDefaultName(okitjson.nat_gateways.length + 1);
+        this.compartment_id = '';
+        this.vcn_id = data.parent_id;
+        this.block_traffic = false;
+        // Update with any passed data
+        this.merge(data);
+        this.convert();
+    }
+
+
+    /*
+    ** Clone Functionality
+     */
+    clone() {
+        return new NATGateway(this, this.getOkitJson());
+    }
+
+
+    /*
+    ** Delete Processing
+     */
+    deleteChildren() {
+        // Remove Internet Gateway references
+        for (let route_table of this.getOkitJson().route_tables) {
+            for (let i = 0; i < route_table.route_rules.length; i++) {
+                if (route_table.route_rules[i]['network_entity_id'] === this.id) {
+                    route_table.route_rules.splice(i, 1);
+                }
+            }
+        }
+    }
+
+    getNamePrefix() {
+        return super.getNamePrefix() + 'ng';
+    }
+
+    /*
+    ** Static Functionality
+     */
+    static getArtifactReference() {
+        return 'NAT Gateway';
+    }
+
+}
diff --git a/okitweb/static/okit/model/js/artefacts/network_security_group.js b/okitweb/static/okit/model/js/artefacts/network_security_group.js
new file mode 100644
index 000000000..b92310b60
--- /dev/null
+++ b/okitweb/static/okit/model/js/artefacts/network_security_group.js
@@ -0,0 +1,62 @@
+/*
+** Copyright (c) 2020, Oracle and/or its affiliates.
+** Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl.
+*/
+console.info('Loaded Network Security Group Javascript');
+
+/*
+** Define Network Security Group Class
+ */
+class NetworkSecurityGroup extends OkitArtifact {
+    /*
+    ** Create
+     */
+    constructor (data={}, okitjson={}) {
+        super(okitjson);
+        // Configure default values
+        this.display_name = this.generateDefaultName(okitjson.network_security_groups.length + 1);
+        this.compartment_id = '';
+        this.vcn_id = data.parent_id;
+        this.security_rules = [];
+        // Update with any passed data
+        this.merge(data);
+        this.convert();
+    }
+
+
+    /*
+    ** Clone Functionality
+     */
+    clone() {
+        return new NetworkSecurityGroup(this, this.getOkitJson());
+    }
+
+
+    /*
+    ** Delete Processing
+     */
+    deleteChildren() {
+        // Remove Instance vnic references
+        for (let instance of this.getOkitJson().instances) {
+            for (let vnic of instance.vnics) {
+                for (let i = 0; i < vnic.nsg_ids.length; i++) {
+                    if (vnic.nsg_ids[i] === this.id) {
+                        vnic.nsg_ids.splice(i, 1);
+                    }
+                }
+            }
+        }
+    }
+
+    getNamePrefix() {
+        return super.getNamePrefix() + 'nsg';
+    }
+
+    /*
+    ** Static Functionality
+     */
+    static getArtifactReference() {
+        return 'Network Security Group';
+    }
+
+}
diff --git a/okitweb/static/okit/model/js/artefacts/object_storage_bucket.js b/okitweb/static/okit/model/js/artefacts/object_storage_bucket.js
new file mode 100644
index 000000000..3b35ce85d
--- /dev/null
+++ b/okitweb/static/okit/model/js/artefacts/object_storage_bucket.js
@@ -0,0 +1,61 @@
+/*
+** Copyright (c) 2020, Oracle and/or its affiliates.
+** Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl.
+*/
+console.info('Loaded Object Storage Bucket Javascript');
+
+/*
+** Define Object Storage Bucket Class
+ */
+class ObjectStorageBucket extends OkitArtifact {
+    /*
+    ** Create
+     */
+    constructor (data={}, okitjson={}) {
+        super(okitjson);
+        // Configure default values
+        this.display_name = this.generateDefaultName(okitjson.object_storage_buckets.length + 1);
+        this.compartment_id = data.parent_id;
+        this.name = this.display_name;
+        this.namespace = 'Tenancy Name';
+        this.storage_tier = 'Standard';
+        this.public_access_type = 'NoPublicAccess';
+        // Update with any passed data
+        this.merge(data);
+        this.convert();
+    }
+
+
+    /*
+    ** Clone Functionality
+     */
+    clone() {
+        return new ObjectStorageBucket(this, this.getOkitJson());
+    }
+
+
+    /*
+    ** Delete Processing
+     */
+    deleteChildren() {
+        for (let instance of this.getOkitJson().instances) {
+            for (let i=0; i < instance['object_storage_bucket_ids'].length; i++) {
+                if (instance.object_storage_bucket_ids[i] === this.id) {
+                    instance.object_storage_bucket_ids.splice(i, 1);
+                }
+            }
+        }
+    }
+
+    getNamePrefix() {
+        return super.getNamePrefix() + 'osb';
+    }
+
+    /*
+    ** Static Functionality
+     */
+    static getArtifactReference() {
+        return 'Object Storage Bucket';
+    }
+
+}
diff --git a/okitweb/static/okit/model/js/artefacts/oke.js b/okitweb/static/okit/model/js/artefacts/oke.js
new file mode 100644
index 000000000..bb308d01a
--- /dev/null
+++ b/okitweb/static/okit/model/js/artefacts/oke.js
@@ -0,0 +1,36 @@
+/*
+** Copyright (c) 2020, Oracle and/or its affiliates.
+** Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl.
+*/
+console.info('Loaded OKE Javascript');
+
+/*
+** Define Compartment Artifact Class
+ */
+class Oke extends OkitArtifact {
+    /*
+    ** Create
+     */
+    constructor(data = {}, okitjson = {}) {
+        super(okitjson);
+        // Configure default values
+        this.name = this.generateDefaultName(okitjson.compartments.length + 1);
+        // Update with any passed data
+        this.merge(data);
+        this.convert();
+    }
+
+    /*
+    ** Conversion Routine allowing loading of old json
+     */
+    convert() {
+        super.convert();
+    }
+
+    /*
+    ** Clone Functionality
+     */
+    clone() {
+        return new Oke(this, this.getOkitJson());
+    }
+}
\ No newline at end of file
diff --git a/okitweb/static/okit/model/js/artefacts/route_table.js b/okitweb/static/okit/model/js/artefacts/route_table.js
new file mode 100644
index 000000000..24607f9f2
--- /dev/null
+++ b/okitweb/static/okit/model/js/artefacts/route_table.js
@@ -0,0 +1,58 @@
+/*
+** Copyright (c) 2020, Oracle and/or its affiliates.
+** Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl.
+*/
+console.info('Loaded Route Table Javascript');
+
+/*
+** Define Route Table Class
+ */
+class RouteTable extends OkitArtifact {
+    /*
+    ** Create
+     */
+    constructor (data={}, okitjson={}) {
+        super(okitjson);
+        // Configure default values
+        this.display_name = this.generateDefaultName(okitjson.route_tables.length + 1);
+        this.compartment_id = '';
+        this.vcn_id = data.parent_id;
+        this.route_rules = [];
+        // Update with any passed data
+        this.merge(data);
+        this.convert();
+    }
+
+
+    /*
+    ** Clone Functionality
+     */
+    clone() {
+        return new RouteTable(this, this.getOkitJson());
+    }
+
+
+    /*
+    ** Delete Processing
+     */
+    deleteChildren() {
+        // Remove Subnet references
+        for (let subnet of this.getOkitJson().subnets) {
+            if (subnet.route_table_id === this.id) {
+                subnet.route_table_id = '';
+            }
+        }
+    }
+
+    getNamePrefix() {
+        return super.getNamePrefix() + 'rt';
+    }
+
+    /*
+    ** Static Functionality
+     */
+    static getArtifactReference() {
+        return 'Route Table';
+    }
+
+}
diff --git a/okitweb/static/okit/model/js/artefacts/security_list.js b/okitweb/static/okit/model/js/artefacts/security_list.js
new file mode 100644
index 000000000..28df2b7d3
--- /dev/null
+++ b/okitweb/static/okit/model/js/artefacts/security_list.js
@@ -0,0 +1,130 @@
+/*
+** Copyright (c) 2020, Oracle and/or its affiliates.
+** Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl.
+*/
+console.info('Loaded Security List Javascript');
+
+/*
+** Define Security List Class
+ */
+class SecurityList extends OkitArtifact {
+    /*
+    ** Create
+     */
+    constructor (data={}, okitjson={}) {
+        super(okitjson);
+        // Configure default values
+        this.display_name = this.generateDefaultName(okitjson.security_lists.length + 1);
+        this.compartment_id = '';
+        this.vcn_id = data.parent_id;
+        this.egress_security_rules = [];
+        this.ingress_security_rules = [];
+        // Update with any passed data
+        this.merge(data);
+        this.convert();
+    }
+
+
+    /*
+    ** Clone Functionality
+     */
+    clone() {
+        return new SecurityList(this, this.getOkitJson());
+    }
+
+
+    /*
+    ** Delete Processing
+     */
+    deleteChildren() {
+        // Remove Subnet references
+        for (let subnet of this.getOkitJson().subnets) {
+            for (let i=0; i < subnet.security_list_ids.length; i++) {
+                if (subnet.security_list_ids[i] === this.id) {
+                    subnet.security_list_ids.splice(i, 1);
+                }
+            }
+        }
+    }
+
+    getNamePrefix() {
+        return super.getNamePrefix() + 'sl';
+    }
+
+    /*
+    ** Static Functionality
+     */
+    static getArtifactReference() {
+        return 'Security List';
+    }
+
+
+    /*
+    ** Artifact Specific Functions
+     */
+    addDefaultSecurityListRules(vcn_cidr_block='10.0.0.0/16') {
+        console.info('Adding Default Security List Rules for ' + this.id);
+        // Add Egress Rule
+        this.egress_security_rules.push(
+            {
+                "destination": "0.0.0.0/0",
+                "destination_type": "CIDR_BLOCK",
+                "icmp_options": null,
+                "is_stateless": false,
+                "protocol": "all",
+                "tcp_options": null,
+                "udp_options": null,
+                "description": ""
+            }
+        );
+        // Ingress Rules
+        this.ingress_security_rules.push(
+            {
+                "icmp_options": null,
+                "is_stateless": false,
+                "protocol": "6",
+                "source": "0.0.0.0/0",
+                "source_type": "CIDR_BLOCK",
+                "tcp_options": {
+                    "destination_port_range": {
+                        "max": 22,
+                        "min": 22
+                    },
+                    "source_port_range": null
+                },
+                "udp_options": null,
+                "description": ""
+            }
+        );
+        this.ingress_security_rules.push(
+            {
+                "icmp_options": {
+                    "code": 4,
+                    "type": 3
+                },
+                "is_stateless": false,
+                "protocol": "1",
+                "source": "0.0.0.0/0",
+                "source_type": "CIDR_BLOCK",
+                "tcp_options": null,
+                "udp_options": null,
+                "description": ""
+            }
+        );
+        this.ingress_security_rules.push(
+            {
+                "icmp_options": {
+                    "code": null,
+                    "type": 3
+                },
+                "is_stateless": false,
+                "protocol": "1",
+                "source": vcn_cidr_block,
+                "source_type": "CIDR_BLOCK",
+                "tcp_options": null,
+                "udp_options": null,
+                "description": ""
+            }
+        );
+    }
+}
diff --git a/okitweb/static/okit/model/js/artefacts/service_gateway.js b/okitweb/static/okit/model/js/artefacts/service_gateway.js
new file mode 100644
index 000000000..2f04844ba
--- /dev/null
+++ b/okitweb/static/okit/model/js/artefacts/service_gateway.js
@@ -0,0 +1,63 @@
+/*
+** Copyright (c) 2020, Oracle and/or its affiliates.
+** Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl.
+*/
+console.info('Loaded Service Gateway Javascript');
+
+/*
+** Define ServiceGateway Class
+ */
+class ServiceGateway extends OkitArtifact {
+    /*
+    ** Create
+     */
+    constructor (data={}, okitjson={}) {
+        super(okitjson);
+        // Configure default values
+        this.display_name = this.generateDefaultName(okitjson.service_gateways.length + 1);
+        this.compartment_id = data.compartment_id;
+        this.vcn_id = data.parent_id;
+        this.service_name = 'All Services';
+        this.autonomous_database_ids = [];
+        this.object_storage_bucket_ids = [];
+        this.route_table_id = '';
+        // Update with any passed data
+        this.merge(data);
+        this.convert();
+    }
+
+
+    /*
+    ** Clone Functionality
+     */
+    clone() {
+        return new ServiceGateway(this, this.getOkitJson());
+    }
+
+
+    /*
+    ** Delete Processing
+     */
+    deleteChildren() {
+        // Remove Service Gateway references
+        for (let route_table of this.getOkitJson().route_tables) {
+            for (let i = 0; i < route_table.route_rules.length; i++) {
+                if (route_table.route_rules[i]['network_entity_id'] === this.id) {
+                    route_table.route_rules.splice(i, 1);
+                }
+            }
+        }
+    }
+
+    getNamePrefix() {
+        return super.getNamePrefix() + 'sg';
+    }
+
+    /*
+    ** Static Functionality
+     */
+    static getArtifactReference() {
+        return 'Service Gateway';
+    }
+
+}
diff --git a/okitweb/static/okit/model/js/artefacts/subnet.js b/okitweb/static/okit/model/js/artefacts/subnet.js
new file mode 100644
index 000000000..a3e3c9228
--- /dev/null
+++ b/okitweb/static/okit/model/js/artefacts/subnet.js
@@ -0,0 +1,125 @@
+/*
+** Copyright (c) 2020, Oracle and/or its affiliates.
+** Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl.
+*/
+console.info('Loaded Subnet Javascript');
+
+/*
+** Define Subnet Artifact Class
+ */
+class Subnet extends OkitArtifact {
+    /*
+    ** Create
+     */
+    constructor (data={}, okitjson={},) {
+        super(okitjson);
+        // Configure default values
+        this.display_name = this.generateDefaultName(okitjson.subnets.length + 1);
+        this.compartment_id = '';
+        this.vcn_id = data.parent_id;
+        this.cidr_block = this.generateCIDR(this.vcn_id);
+        this.dns_label = this.display_name.toLowerCase().slice(-5);
+        this.prohibit_public_ip_on_vnic = false;
+        this.route_table_id = '';
+        this.security_list_ids = [];
+        this.availability_domain = '0';
+        this.is_ipv6enabled = false;
+        this.ipv6cidr_block = '';
+        // Update with any passed data
+        this.merge(data);
+        this.convert();
+        if (this.availability_domain && this.availability_domain.length > 1) {
+            this.region_availability_domain = this.availability_domain;
+            this.availability_domain = this.getAvailabilityDomainNumber(this.region_availability_domain);
+        }
+    }
+
+
+    /*
+    ** Clone Functionality
+     */
+    clone() {
+        return new Subnet(this, this.getOkitJson());
+    }
+
+
+    /*
+    ** Delete Processing
+     */
+    deleteChildren() {
+        console.groupCollapsed('Deleting Children of ' + this.getArtifactReference() + ' : ' + this.display_name);
+        // Remove Instances
+        this.getOkitJson().instances = this.getOkitJson().instances.filter(function(child) {
+            if (child.primary_vnic.subnet_id === this.id) {
+                console.info('Deleting ' + child.display_name);
+                //child.delete();
+                return false; // So the filter removes the element
+            }
+            return true;
+        }, this);
+        for (let instance of this.getOkitJson().instances) {
+            instance.vnics = instance.vnics.filter(function(child) {
+                if (child.subnet_id === this.id) {
+                    console.info('Deleting ' + child.hostname_label);
+                    return false; // So the filter removes the element
+                }
+                return true;
+            }, this);
+        }
+        // Remove Load Balancers
+        this.getOkitJson().load_balancers = this.getOkitJson().load_balancers.filter(function(child) {
+            if (child.subnet_id === this.id) {
+                console.info('Deleting ' + child.display_name);
+                //child.delete();
+                return false; // So the filter removes the element
+            }
+            return true;
+        }, this);
+        // Remove File Storage Systems
+        this.getOkitJson().file_storage_systems = this.getOkitJson().file_storage_systems.filter(function(child) {
+            if (child.subnet_id === this.id) {
+                console.info('Deleting ' + child.display_name);
+                //child.delete();
+                return false; // So the filter removes the element
+            }
+            return true;
+        }, this);
+        console.groupEnd();
+    }
+
+    /*
+    ** Utility Methods
+     */
+    generateCIDR(vcn_id) {
+        let vcn_cidr = '10.0.0.0/16';
+        for (let virtual_cloud_network of this.getOkitJson()['virtual_cloud_networks']) {
+            if (virtual_cloud_network['id'] == vcn_id) {
+                vcn_cidr = virtual_cloud_network['cidr_block'];
+                break;
+            }
+        }
+        let vcn_octets = vcn_cidr.split('/')[0].split('.');
+        for (let i = 0; i < this.getOkitJson().subnets.length; i++) {
+            if (this.getOkitJson().subnets[i].id === this.id) {
+                return vcn_octets[0] + '.' + vcn_octets[1] + '.' + i + '.' + vcn_octets[3] + '/24';
+            }
+        }
+        return vcn_octets[0] + '.' + vcn_octets[1] + '.' + this.getOkitJson().subnets.length + '.' + vcn_octets[3] + '/24';
+    }
+
+
+    /*
+    ** Container Specific Overrides
+     */
+
+    getNamePrefix() {
+        return super.getNamePrefix() + 'sn';
+    }
+
+    /*
+    ** Static Functionality
+     */
+    static getArtifactReference() {
+        return 'Subnet';
+    }
+}
diff --git a/okitweb/static/okit/model/js/artefacts/virtual_cloud_network.js b/okitweb/static/okit/model/js/artefacts/virtual_cloud_network.js
new file mode 100644
index 000000000..13f1a8393
--- /dev/null
+++ b/okitweb/static/okit/model/js/artefacts/virtual_cloud_network.js
@@ -0,0 +1,210 @@
+/*
+** Copyright (c) 2020, Oracle and/or its affiliates.
+** Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl.
+*/
+console.info('Loaded Virtual Cloud Network Javascript');
+
+/*
+** Define Virtual Cloud Network Artifact Class
+ */
+class VirtualCloudNetwork extends OkitArtifact {
+    /*
+    ** Create
+     */
+    constructor (data={}, okitjson={}) {
+        super(okitjson);
+        // Configure default values
+        this.display_name = this.generateDefaultName(okitjson.virtual_cloud_networks.length + 1);
+        this.compartment_id = data.parent_id;
+        // Generate Cidr
+        this.cidr_block = '10.' + okitjson.virtual_cloud_networks.length + '.0.0/16';
+        this.dns_label = this.display_name.toLowerCase().slice(-6);
+        this.is_ipv6enabled = false;
+        this.ipv6cidr_block = '';
+        // Update with any passed data
+        this.merge(data);
+        this.convert();
+    }
+
+
+    /*
+    ** Clone Functionality
+     */
+    clone() {
+        return new VirtualCloudNetwork(this, this.getOkitJson());
+    }
+
+
+    /*
+    ** Delete Processing
+     */
+    deleteChildren() {
+        console.groupCollapsed('Deleting Children of ' + this.getArtifactReference() + ' : ' + this.display_name);
+        // Remove Subnets
+        this.getOkitJson().subnets = this.getOkitJson().subnets.filter(function(child) {
+            if (child.vcn_id === this.id) {
+                console.info('Deleting ' + child.display_name);
+                child.delete();
+                return false; // So the filter removes the element
+            }
+            return true;
+        }, this);
+        // Remove Route_tables
+        this.getOkitJson().route_tables = this.getOkitJson().route_tables.filter(function(child) {
+            if (child.vcn_id === this.id) {
+                console.info('Deleting ' + child.display_name);
+                child.delete();
+                return false; // So the filter removes the element
+            }
+            return true;
+        }, this);
+        // Remove Security Lists
+        this.getOkitJson().security_lists = this.getOkitJson().security_lists.filter(function(child) {
+            if (child.vcn_id === this.id) {
+                console.info('Deleting ' + child.display_name);
+                child.delete();
+                return false; // So the filter removes the element
+            }
+            return true;
+        }, this);
+        // Remove Internet Gateways
+        this.getOkitJson().internet_gateways = this.getOkitJson().internet_gateways.filter(function(child) {
+            if (child.vcn_id === this.id) {
+                console.info('Deleting ' + child.display_name);
+                child.delete();
+                return false; // So the filter removes the element
+            }
+            return true;
+        }, this);
+        // Remove NAT Gateways
+        this.getOkitJson().nat_gateways = this.getOkitJson().nat_gateways.filter(function(child) {
+            if (child.vcn_id === this.id) {
+                console.info('Deleting ' + child.display_name);
+                child.delete();
+                return false; // So the filter removes the element
+            }
+            return true;
+        }, this);
+        // Remove Service Gateways
+        this.getOkitJson().service_gateways = this.getOkitJson().service_gateways.filter(function(child) {
+            if (child.vcn_id === this.id) {
+                console.info('Deleting ' + child.display_name);
+                child.delete();
+                return false; // So the filter removes the element
+            }
+            return true;
+        }, this);
+        // Local Peering Gateways
+        this.getOkitJson().local_peering_gateways = this.getOkitJson().local_peering_gateways.filter(function(child) {
+            if (child.vcn_id === this.id) {
+                console.info('Deleting ' + child.display_name);
+                child.delete();
+                return false; // So the filter removes the element
+            }
+            return true;
+        }, this);
+        console.groupEnd();
+    }
+
+    /*
+    ** Artifact Specific Functions
+     */
+    hasUnattachedSecurityList() {
+        for (let security_list of this.getOkitJson().security_lists) {
+            if (security_list.vcn_id === this.id) {
+                return true;
+            }
+        }
+        return false;
+    }
+
+    hasUnattachedRouteTable() {
+         for (let route_table of this.getOkitJson().route_tables) {
+            if (route_table.vcn_id === this.id) {
+                return true;
+            }
+        }
+        return false;
+    }
+
+    getGateways() {
+        let gateways = [];
+        // Internet Gateways
+        gateways.push(...this.getInternetGateways());
+        // NAT Gateways
+        gateways.push(...this.getNATGateways());
+        // Local Peering Gateways
+        gateways.push(...this.getLocalPeeringGateways());
+        // Service Gateways
+        gateways.push(...this.getServiceGateways());
+        // Dynamic Routing Gateways
+        gateways.push(...this.getDynamicRoutingGateways());
+        return gateways;
+    }
+
+    getInternetGateways() {
+        let gateways = [];
+        // Internet Gateways
+        for (let gateway of this.getOkitJson().internet_gateways) {
+            if (gateway.vcn_id === this.id) {
+                gateways.push(gateway);
+            }
+        }
+        return gateways;
+    }
+
+    getNATGateways() {
+        let gateways = [];
+        // NAT Gateways
+        for (let gateway of this.getOkitJson().nat_gateways) {
+            if (gateway.vcn_id === this.id) {
+                gateways.push(gateway);
+            }
+        }
+        return gateways;
+    }
+
+    getLocalPeeringGateways() {
+        let gateways = [];
+        // NAT Gateways
+        for (let gateway of this.getOkitJson().local_peering_gateways) {
+            if (gateway.vcn_id === this.id) {
+                gateways.push(gateway);
+            }
+        }
+        return gateways;
+    }
+
+    getServiceGateways() {
+        let gateways = [];
+        // Service Gateways
+        for (let gateway of this.getOkitJson().service_gateways) {
+            if (gateway.vcn_id === this.id) {
+                gateways.push(gateway);
+            }
+        }
+        return gateways;
+    }
+
+    getDynamicRoutingGateways() {
+        let gateways = [];
+        // Dynamic Routing Gateways
+        for (let gateway of this.getOkitJson().dynamic_routing_gateways) {
+            if (gateway.vcn_id === this.id) {
+                gateways.push(gateway);
+            }
+        }
+        return gateways;
+    }
+
+    getNamePrefix() {
+        return super.getNamePrefix() + 'vcn';
+    }
+
+    /*
+    ** Static Functionality
+     */
+    static getArtifactReference() {
+        return 'Virtual Cloud Network';
+    }
+}
diff --git a/okitweb/static/okit/model/js/artefacts/virtual_network_interface.js b/okitweb/static/okit/model/js/artefacts/virtual_network_interface.js
new file mode 100644
index 000000000..df59d1fec
--- /dev/null
+++ b/okitweb/static/okit/model/js/artefacts/virtual_network_interface.js
@@ -0,0 +1,61 @@
+/*
+** Copyright (c) 2020, Oracle and/or its affiliates.
+** Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl.
+*/
+console.info('Loaded Virtual Network Interface Javascript');
+
+/*
+** Set Artifact Constants
+ */
+
+/*
+** Define Virtual Network Interface Class
+ */
+class VirtualNetworkInterface extends OkitArtifact {
+    /*
+    ** Create
+     */
+    constructor (data={}, okitjson={}) {
+        super(okitjson);
+        // Configure default values
+        this.display_name = this.generateDefaultName(okitjson.subnets.length + 1);
+        this.compartment_id = '';
+        this.instance_id = data.parent_id;
+        this.vcn_id = data.parent_id;
+        this.cidr_block = '';
+        this.dns_label = this.display_name.toLowerCase().slice(-5);
+        this.prohibit_public_ip_on_vnic = false;
+        this.route_table_id = '';
+        this.security_list_ids = [];
+        // Update with any passed data
+        this.merge(data);
+        this.convert();
+    }
+
+
+    /*
+    ** Clone Functionality
+     */
+    clone() {
+        return new VirtualNetworkInterface(this, this.getOkitJson());
+    }
+
+
+    /*
+    ** Delete Processing
+     */
+    deleteChildren() {}
+
+    getNamePrefix() {
+        return super.getNamePrefix() + 'vnic';
+    }
+
+    /*
+    ** Static Functionality
+     */
+    static getArtifactReference() {
+        return 'Virtual Network Interface';
+    }
+
+}
+
diff --git a/okitweb/static/okit/model/js/okit_model.js b/okitweb/static/okit/model/js/okit_model.js
new file mode 100644
index 000000000..e9c0cae35
--- /dev/null
+++ b/okitweb/static/okit/model/js/okit_model.js
@@ -0,0 +1,1009 @@
+/*
+** Copyright (c) 2020, Oracle and/or its affiliates.
+** Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl.
+*/
+console.info('Loaded OKIT Model Javascript');
+
+/*
+** Representation of overall OKIT Model Data Structure
+ */
+class OkitJson {
+    /*
+    ** Create
+     */
+    constructor(okit_json_string = '') {
+        this.title = "OKIT OCI Visualiser Json";
+        this.description = "OKIT Generic OCI Json which can be used to generate ansible, terraform, .......";
+        this.okit_version = okitVersion;
+        this.compartments = [];
+        this.autonomous_databases = [];
+        this.block_storage_volumes = [];
+        this.containers = [];
+        this.database_systems = [];
+        this.dynamic_routing_gateways = [];
+        this.fast_connects = [];
+        this.file_storage_systems = [];
+        this.instances = [];
+        this.internet_gateways = [];
+        this.load_balancers = [];
+        this.local_peering_gateways = [];
+        this.nat_gateways = [];
+        this.network_security_groups = [];
+        this.object_storage_buckets = [];
+        this.remote_peering_gateways = [];
+        this.route_tables = [];
+        this.security_lists = [];
+        this.service_gateways = [];
+        this.subnets = [];
+        this.virtual_cloud_networks = [];
+        //this.web_application_firewalls = [];
+
+        if (okit_json_string !== undefined && okit_json_string.length > 0) {
+            this.load(JSON.parse(okit_json_string));
+        }
+    }
+
+    /*
+    ** Load Simple Json Structure and build Object Based JSON
+     */
+    load(okit_json) {
+        console.groupCollapsed('Load OKIT Json');
+        // Compartments
+        if (okit_json.hasOwnProperty('compartments')) {
+            for (let artefact of okit_json['compartments']) {
+                if (artefact.parent_id && artefact.parent_id === ROOT_CANVAS_ID) {
+                    artefact.parent_id = ROOT_CANVAS_ID;
+                    console.info('Adding Root Compartment ' + artefact.name);
+                } else {
+                    artefact.parent_id = artefact.compartment_id;
+                }
+                let obj = this.newCompartment(artefact);
+                console.info(obj);
+            }
+        }
+
+        // Compartment Subcomponents
+        // Autonomous Databases
+        if (okit_json.hasOwnProperty('autonomous_databases')) {
+            for (let artefact of okit_json['autonomous_databases']) {
+                artefact.parent_id = artefact.compartment_id;
+                let obj = this.newAutonomousDatabase(artefact);
+                console.info(obj);
+            }
+        }
+        // Block Storage Volumes
+        if (okit_json.hasOwnProperty('block_storage_volumes')) {
+            for (let artefact of okit_json['block_storage_volumes']) {
+                artefact.parent_id = artefact.compartment_id;
+                let obj = this.newBlockStorageVolume(artefact);
+                console.info(obj);
+            }
+        }
+        // Object Storage Buckets
+        if (okit_json.hasOwnProperty('object_storage_buckets')) {
+            for (let artefact of okit_json['object_storage_buckets']) {
+                artefact.parent_id = artefact.compartment_id;
+                let obj = this.newObjectStorageBucket(artefact);
+                console.info(obj);
+            }
+        }
+        // Virtual Cloud Networks
+        // Turn Off Default Security List / Route Table Processing
+        let okitSettingsClone = JSON.clone(okitSettings);
+        okitSettings.is_default_route_table   = false;
+        okitSettings.is_default_security_list = false;
+        if (okit_json.hasOwnProperty('virtual_cloud_networks')) {
+            for (let artefact of okit_json['virtual_cloud_networks']) {
+                artefact.parent_id = artefact.compartment_id;
+                let obj = this.newVirtualCloudNetwork(artefact);
+                console.info(obj);
+            }
+        }
+        // Reset
+        okitSettings.is_default_route_table   = okitSettingsClone.is_default_route_table;
+        okitSettings.is_default_security_list = okitSettingsClone.is_default_security_list;
+        // Web Application Firewall
+        if (okit_json.hasOwnProperty('web_application_firewalls')) {
+            for (let artefact of okit_json['web_application_firewalls']) {
+                artefact.parent_id = artefact.compartment_id;
+                let obj = this.newWebApplicationFirewall(artefact);
+                console.info(obj);
+            }
+        }
+        // Dynamic Routing Gateways
+        if (okit_json.hasOwnProperty('dynamic_routing_gateways')) {
+            for (let artefact of okit_json['dynamic_routing_gateways']) {
+                artefact.parent_id = artefact.compartment_id;
+                let obj = this.newDynamicRoutingGateway(artefact);
+                console.info(obj);
+            }
+        }
+
+        // Virtual Cloud Network Sub Components
+        // Internet Gateways
+        if (okit_json.hasOwnProperty('internet_gateways')) {
+            for (let artefact of okit_json['internet_gateways']) {
+                artefact.parent_id = artefact.vcn_id;
+                let obj = this.newInternetGateway(artefact);
+                console.info(obj);
+            }
+        }
+        // NAT Gateway
+        if (okit_json.hasOwnProperty('nat_gateways')) {
+            for (let artefact of okit_json['nat_gateways']) {
+                artefact.parent_id = artefact.vcn_id;
+                let obj = this.newNATGateway(artefact);
+                console.info(obj);
+            }
+        }
+        // Route Tables
+        if (okit_json.hasOwnProperty('route_tables')) {
+            for (let artefact of okit_json['route_tables']) {
+                artefact.parent_id = artefact.vcn_id;
+                let obj = this.newRouteTable(artefact);
+                console.info(obj);
+            }
+        }
+        // Security Lists
+        if (okit_json.hasOwnProperty('security_lists')) {
+            for (let artefact of okit_json['security_lists']) {
+                artefact.parent_id = artefact.vcn_id;
+                let obj = this.newSecurityList(artefact);
+                console.info(obj);
+            }
+        }
+        // Network Security Groups
+        if (okit_json.hasOwnProperty('network_security_groups')) {
+            for (let artefact of okit_json['network_security_groups']) {
+                artefact.parent_id = artefact.vcn_id;
+                let obj = this.newNetworkSecurityGroup(artefact);
+                console.info(obj);
+            }
+        }
+        // Service Gateways
+        if (okit_json.hasOwnProperty('service_gateways')) {
+            for (let artefact of okit_json['service_gateways']) {
+                artefact.parent_id = artefact.vcn_id;
+                let obj = this.newServiceGateway(artefact);
+                console.info(obj);
+            }
+        }
+        // Local Peering Gateways
+        if (okit_json.hasOwnProperty('local_peering_gateways')) {
+            for (let artefact of okit_json['local_peering_gateways']) {
+                artefact.parent_id = artefact.vcn_id;
+                let obj = this.newLocalPeeringGateway(artefact);
+                console.info(obj);
+            }
+        }
+        // Subnets
+        if (okit_json.hasOwnProperty('subnets')) {
+            for (let artefact of okit_json['subnets']) {
+                artefact.parent_id = artefact.vcn_id;
+                let obj = this.newSubnet(artefact);
+                console.info(obj);
+            }
+        }
+
+        // Subnet Subcomponents
+        // File Storage Systems
+        if (okit_json.hasOwnProperty('file_storage_systems')) {
+            for (let artefact of okit_json['file_storage_systems']) {
+                artefact.parent_id = artefact.subnet_id;
+                let obj = this.newFileStorageSystem(artefact);
+                console.info(obj);
+            }
+        }
+        // Database Systems
+        if (okit_json.hasOwnProperty('database_systems')) {
+            for (let artefact of okit_json['database_systems']) {
+                artefact.parent_id = artefact.subnet_id;
+                let obj = this.newDatabaseSystem(artefact);
+                console.info(obj);
+            }
+        }
+        // Instances
+        if (okit_json.hasOwnProperty('instances')) {
+            for (let artefact of okit_json['instances']) {
+                let subnet = this.getSubnet(artefact.subnet_id)
+                if (subnet && subnet.compartment_id === artefact.compartment_id) {
+                    artefact.parent_id = artefact.subnet_id;
+                } else {
+                    artefact.parent_id = artefact.compartment_id;
+                }
+                let obj = this.newInstance(artefact);
+                console.info(obj);
+            }
+        }
+        // Load Balancers
+        if (okit_json.hasOwnProperty('load_balancers')) {
+            for (let artefact of okit_json['load_balancers']) {
+                if (artefact.hasOwnProperty('subnet_id')) {
+                    artefact.parent_id = artefact.subnet_id;
+                } else {
+                    artefact.parent_id = artefact.subnet_ids[0];
+                    artefact.subnet_id = artefact.subnet_ids[0];
+                }
+                let obj = this.newLoadBalancer(artefact);
+                console.info(obj);
+            }
+        }
+        console.groupEnd();
+    }
+
+    /*
+    ** Artifact Processing
+     */
+
+    // Autonomous Database
+    newAutonomousDatabase(data) {
+        console.info('New Autonomous Database');
+        this.autonomous_databases.push(new AutonomousDatabase(data, this));
+        return this.autonomous_databases[this.autonomous_databases.length - 1];
+    }
+    getAutonomousDatabases() {
+        return this.autonomous_databases;
+    }
+    getAutonomousDatabase(id='') {
+        for (let artefact of this.getAutonomousDatabases()) {
+            if (artefact.id === id) {
+                return artefact;
+            }
+        }
+        return undefined;
+    }
+    deleteAutonomousDatabase(id) {
+        for (let i = 0; i < this.autonomous_databases.length; i++) {
+            if (this.autonomous_databases[i].id === id) {
+                this.autonomous_databases[i].delete();
+                this.autonomous_databases.splice(i, 1);
+                break;
+            }
+        }
+    }
+
+    // Block Storage Volume
+    newBlockStorageVolume(data) {
+        console.info('New Block Storage Volume');
+        this.block_storage_volumes.push(new BlockStorageVolume(data, this));
+        return this.block_storage_volumes[this.block_storage_volumes.length - 1];
+    }
+    getBlockStorageVolumes() {
+        return this.block_storage_volumes;
+    }
+    getBlockStorageVolume(id='') {
+        for (let artefact of this.getBlockStorageVolumes()) {
+            if (artefact.id === id) {
+                return artefact;
+            }
+        }
+        return undefined;
+    }
+    deleteBlockStorageVolume(id) {
+        for (let i = 0; i < this.block_storage_volumes.length; i++) {
+            if (this.block_storage_volumes[i].id === id) {
+                this.block_storage_volumes[i].delete();
+                this.block_storage_volumes.splice(i, 1);
+                break;
+            }
+        }
+    }
+
+    // Compartment
+    newCompartment(data = {}) {
+        console.info('New Compartment');
+        this.compartments.push(new Compartment(data, this));
+        return this.compartments[this.compartments.length - 1];
+    }
+    getCompartments() {return this.compartments;}
+    getCompartment(id='') {
+        for (let artefact of this.getCompartments()) {
+            if (artefact.id === id) {
+                return artefact;
+            }
+        }
+        return undefined;
+    }
+    deleteCompartment(id) {
+        for (let i = 0; i < this.compartments.length; i++) {
+            if (this.compartments[i].id === id) {
+                this.compartments[i].delete();
+                this.compartments.splice(i, 1);
+                break;
+            }
+        }
+    }
+
+    // Database System
+    newDatabaseSystem(data) {
+        console.info('New Database System');
+        this.database_systems.push(new DatabaseSystem(data, this));
+        return this.database_systems[this.database_systems.length - 1];
+    }
+    getDatabaseSystems() {
+        return this.database_systems;
+    }
+    getDatabaseSystem(id='') {
+        for (let artefact of this.getDatabaseSystems()) {
+            if (artefact.id === id) {
+                return artefact;
+            }
+        }
+        return undefined;
+    }
+    deleteDatabaseSystem(id) {
+        for (let i = 0; i < this.database_systems.length; i++) {
+            if (this.database_systems[i].id === id) {
+                this.database_systems[i].delete();
+                this.database_systems.splice(i, 1);
+                break;
+            }
+        }
+    }
+
+    // Dynamic Routing Gateway
+    newDynamicRoutingGateway(data) {
+        console.info('New Dynamic Routing Gateway');
+        this.dynamic_routing_gateways.push(new DynamicRoutingGateway(data, this));
+        return this.dynamic_routing_gateways[this.dynamic_routing_gateways.length - 1];
+    }
+    getDynamicRoutingGateways() {
+        return this.dynamic_routing_gateways;
+    }
+    getDynamicRoutingGateway(id='') {
+        for (let artefact of this.getDynamicRoutingGateways()) {
+            if (artefact.id === id) {
+                return artefact;
+            }
+        }
+        return undefined;
+    }
+    deleteDynamicRoutingGateway(id) {
+        for (let i = 0; i < this.dynamic_routing_gateways.length; i++) {
+            if (this.dynamic_routing_gateways[i].id === id) {
+                this.dynamic_routing_gateways[i].delete();
+                this.dynamic_routing_gateways.splice(i, 1);
+                break;
+            }
+        }
+    }
+
+    // FastConnect
+    newFastConnect(data) {
+        console.info('New FastConnect');
+        this.fast_connects.push(new FastConnect(data, this));
+        return this.fast_connects[this.fast_connects.length - 1];
+    }
+    getFastConnects() {
+        return this.fast_connects;
+    }
+    getFastConnect(id='') {
+        for (let artefact of this.getFastConnects()) {
+            if (artefact.id === id) {
+                return artefact;
+            }
+        }
+        return undefined;
+    }
+    deleteFastConnect(id) {
+        for (let i = 0; i < this.fast_connects.length; i++) {
+            if (this.fast_connects[i].id === id) {
+                this.fast_connects[i].delete();
+                this.fast_connects.splice(i, 1);
+                break;
+            }
+        }
+    }
+
+    // File Storage System
+    newFileStorageSystem(data) {
+        console.info('New File Storage System');
+        this.file_storage_systems.push(new FileStorageSystem(data, this));
+        return this.file_storage_systems[this.file_storage_systems.length - 1];
+    }
+    getFileStorageSystems() {
+        return this.file_storage_systems;
+    }
+    getFileStorageSystem(id='') {
+        for (let artefact of this.getFileStorageSystems()) {
+            if (artefact.id === id) {
+                return artefact;
+            }
+        }
+        return undefined;
+    }
+    deleteFileStorageSystem(id) {
+        for (let i = 0; i < this.file_storage_systems.length; i++) {
+            if (this.file_storage_systems[i].id === id) {
+                this.file_storage_systems[i].delete();
+                this.file_storage_systems.splice(i, 1);
+                break;
+            }
+        }
+    }
+
+    // Instance
+    newInstance(data) {
+        console.info('New Instance');
+        this.instances.push(new Instance(data, this));
+        return this.instances[this.instances.length - 1];
+    }
+    getInstances() {
+        return this.instances;
+    }
+    getInstance(id='') {
+        for (let artefact of this.getInstances()) {
+            if (artefact.id === id) {
+                return artefact;
+            }
+        }
+        return undefined;
+    }
+    deleteInstance(id) {
+        for (let i = 0; i < this.instances.length; i++) {
+            if (this.instances[i].id === id) {
+                this.instances[i].delete();
+                this.instances.splice(i, 1);
+                break;
+            }
+        }
+    }
+
+    // Internet Gateway
+    newInternetGateway(data) {
+        console.info('New Internet Gateway');
+        for (let gateway of this.internet_gateways) {
+            if (gateway.vcn_id === data.parent_id) {
+                // We are only allowed a single Internet Gateway peer VCN
+                if (parent) {
+                    alert('The maximum limit of 1 for Internet Gateway per Virtual Cloud Network has been exceeded in ' + parent.display_name);
+                }
+                return null;
+            }
+        }
+        this.internet_gateways.push(new InternetGateway(data, this));
+        return this.internet_gateways[this.internet_gateways.length - 1];
+    }
+    getInternetGateways() {
+        return this.internet_gateways;
+    }
+    getInternetGateway(id='') {
+        for (let artefact of this.getInternetGateways()) {
+            if (artefact.id === id) {
+                return artefact;
+            }
+        }
+        return undefined;
+    }
+    deleteInternetGateway(id) {
+        for (let i = 0; i < this.internet_gateways.length; i++) {
+            if (this.internet_gateways[i].id === id) {
+                this.internet_gateways[i].delete();
+                this.internet_gateways.splice(i, 1);
+                break;
+            }
+        }
+    }
+
+    // Load Balancer
+    newLoadBalancer(data) {
+        console.info('New Load Balancer');
+        this.load_balancers.push(new LoadBalancer(data, this));
+        return this.load_balancers[this.load_balancers.length - 1];
+    }
+    getLoadBalancers() {
+        return this.load_balancers;
+    }
+    getLoadBalancer(id='') {
+        for (let artefact of this.getLoadBalancers()) {
+            if (artefact.id === id) {
+                return artefact;
+            }
+        }
+        return undefined;
+    }
+    deleteLoadBalancer(id) {
+        for (let i = 0; i < this.load_balancers.length; i++) {
+            if (this.load_balancers[i].id === id) {
+                this.load_balancers[i].delete();
+                this.load_balancers.splice(i, 1);
+                break;
+            }
+        }
+    }
+
+    // Local Peering Gateway
+    newLocalPeeringGateway(data) {
+        console.info('New Local Peering Gateway');
+        this.local_peering_gateways.push(new LocalPeeringGateway(data, this));
+        return this.local_peering_gateways[this.local_peering_gateways.length - 1];
+    }
+    getLocalPeeringGateways() {
+        return this.local_peering_gateways;
+    }
+    getLocalPeeringGateway(id='') {
+        for (let artefact of this.getLocalPeeringGateways()) {
+            if (artefact.id === id) {
+                return artefact;
+            }
+        }
+        return undefined;
+    }
+    deleteLocalPeeringGateway(id) {
+        for (let i = 0; i < this.local_peering_gateways.length; i++) {
+            if (this.local_peering_gateways[i].id === id) {
+                this.local_peering_gateways[i].delete();
+                this.local_peering_gateways.splice(i, 1);
+                break;
+            }
+        }
+    }
+
+    // NAT Gateway
+    newNATGateway(data) {
+        console.info('New NAT Gateway');
+        for (let gateway of this.nat_gateways) {
+            if (gateway.vcn_id === data.parent_id) {
+                // We are only allowed a single NAT Gateway peer VCN
+                if (parent) {
+                    alert('The maximum limit of 1 for NAT Gateway per Virtual Cloud Network has been exceeded in ' + parent.display_name);
+                }
+                return null;
+            }
+        }
+        this.nat_gateways.push(new NATGateway(data, this));
+        return this.nat_gateways[this.nat_gateways.length - 1];
+    }
+    getNATGateways() {
+        return this.nat_gateways;
+    }
+    getNATGateway(id='') {
+        for (let artefact of this.getNATGateways()) {
+            if (artefact.id === id) {
+                return artefact;
+            }
+        }
+        return undefined;
+    }
+    deleteNATGateway(id) {
+        for (let i = 0; i < this.nat_gateways.length; i++) {
+            if (this.nat_gateways[i].id === id) {
+                this.nat_gateways[i].delete();
+                this.nat_gateways.splice(i, 1);
+                break;
+            }
+        }
+    }
+
+    // Network Security Group
+    newNetworkSecurityGroup(data) {
+        console.info('New Network Security Group');
+        this.network_security_groups.push(new NetworkSecurityGroup(data, this));
+        return this.network_security_groups[this.network_security_groups.length - 1];
+    }
+    getNetworkSecurityGroups() {
+        return this.network_security_groups;
+    }
+    getNetworkSecurityGroup(id='') {
+        for (let artefact of this.getNetworkSecurityGroups()) {
+            if (artefact.id === id) {
+                return artefact;
+            }
+        }
+        return undefined;
+    }
+    deleteNetworkSecurityGroup(id) {
+        for (let i = 0; i < this.network_security_groups.length; i++) {
+            if (this.network_security_groups[i].id === id) {
+                this.network_security_groups[i].delete();
+                this.network_security_groups.splice(i, 1);
+                break;
+            }
+        }
+    }
+
+    // Object Storage Bucket
+    newObjectStorageBucket(data) {
+        console.info('New Object Storage Bucket');
+        this.object_storage_buckets.push(new ObjectStorageBucket(data, this));
+        return this.object_storage_buckets[this.object_storage_buckets.length - 1];
+    }
+    getObjectStorageBuckets() {
+        return this.object_storage_buckets;
+    }
+    getObjectStorageBucket(id='') {
+        for (let artefact of this.getObjectStorageBuckets()) {
+            if (artefact.id === id) {
+                return artefact;
+            }
+        }
+        return undefined;
+    }
+    deleteObjectStorageBucket(id) {
+        for (let i = 0; i < this.object_storage_buckets.length; i++) {
+            if (this.object_storage_buckets[i].id === id) {
+                this.object_storage_buckets[i].delete();
+                this.object_storage_buckets.splice(i, 1);
+                break;
+            }
+        }
+    }
+
+    // Route Table
+    newRouteTable(data) {
+        console.info('New Route Table');
+        this.route_tables.push(new RouteTable(data, this));
+        return this.route_tables[this.route_tables.length - 1];
+    }
+    getRouteTables() {
+        return this.route_tables;
+    }
+    getRouteTable(id='') {
+        for (let artefact of this.getRouteTables()) {
+            if (artefact.id === id) {
+                return artefact;
+            }
+        }
+        return undefined;
+    }
+    deleteRouteTable(id) {
+        for (let i = 0; i < this.route_tables.length; i++) {
+            if (this.route_tables[i].id === id) {
+                this.route_tables[i].delete();
+                this.route_tables.splice(i, 1);
+                break;
+            }
+        }
+    }
+
+    // Security List
+    newSecurityList(data) {
+        console.info('New Security List');
+        this.security_lists.push(new SecurityList(data, this));
+        return this.security_lists[this.security_lists.length - 1];
+    }
+    getSecurityLists() {
+        return this.security_lists;
+    }
+    getSecurityList(id='') {
+        for (let artefact of this.getSecurityLists()) {
+            if (artefact.id === id) {
+                return artefact;
+            }
+        }
+        return undefined;
+    }
+    deleteSecurityList(id) {
+        for (let i = 0; i < this.security_lists.length; i++) {
+            if (this.security_lists[i].id === id) {
+                this.security_lists[i].delete();
+                this.security_lists.splice(i, 1);
+                break;
+            }
+        }
+    }
+
+    // Service Gateway
+    newServiceGateway(data) {
+        console.info('New Service Gateway');
+        for (let gateway of this.service_gateways) {
+            if (gateway.vcn_id === data.parent_id) {
+                // We are only allowed a single Service Gateway peer VCN
+                if (parent) {
+                    alert('The maximum limit of 1 for Service Gateway per Virtual Cloud Network has been exceeded in ' + parent.display_name);
+                }
+                return null;
+            }
+        }
+        this.service_gateways.push(new ServiceGateway(data, this));
+        return this.service_gateways[this.service_gateways.length - 1];
+    }
+    getServiceGateways() {
+        return this.service_gateways;
+    }
+    getServiceGateway(id='') {
+        for (let artefact of this.getServiceGateways()) {
+            if (artefact.id === id) {
+                return artefact;
+            }
+        }
+        return undefined;
+    }
+    deleteServiceGateway(id) {
+        for (let i = 0; i < this.service_gateways.length; i++) {
+            if (this.service_gateways[i].id === id) {
+                this.service_gateways[i].delete();
+                this.service_gateways.splice(i, 1);
+                break;
+            }
+        }
+    }
+
+    // Subnet
+    newSubnet(data) {
+        console.info('New Subnet');
+        this.subnets.push(new Subnet(data, this));
+        return this.subnets[this.subnets.length - 1];
+    }
+    getSubnets() {
+        return this.subnets;
+    }
+    getSubnet(id='') {
+        for (let artefact of this.getSubnets()) {
+            if (artefact.id === id) {
+                return artefact;
+            }
+        }
+        return undefined;
+    }
+    deleteSubnet(id) {
+        for (let i = 0; i < this.subnets.length; i++) {
+            if (this.subnets[i].id === id) {
+                this.subnets[i].delete();
+                this.subnets.splice(i, 1);
+                break;
+            }
+        }
+    }
+
+    // Virtual Cloud Network
+    newVirtualCloudNetwork(data) {
+        console.info('New Virtual Cloud Network');
+        this.virtual_cloud_networks.push(new VirtualCloudNetwork(data, this));
+        return this.virtual_cloud_networks[this.virtual_cloud_networks.length - 1];
+    }
+    getVirtualCloudNetworks() {
+        return this.virtual_cloud_networks;
+    }
+    getVirtualCloudNetwork(id='') {
+        for (let artefact of this.virtual_cloud_networks) {
+            if (artefact.id === id) {
+                return artefact;
+            }
+        }
+        return undefined;
+    }
+    getVcn(id='') {
+        return this.getVirtualCloudNetwork(id);
+    }
+    deleteVirtualCloudNetwork(id) {
+        for (let i = 0; i < this.virtual_cloud_networks.length; i++) {
+            if (this.virtual_cloud_networks[i].id === id) {
+                this.virtual_cloud_networks[i].delete();
+                this.virtual_cloud_networks.splice(i, 1);
+                break;
+            }
+        }
+    }
+
+    // Fragment
+    newFragment(target) {
+        console.info('New Fragment');
+        return new Fragment(target, this);
+    }
+
+    /*
+    ** Export Functions
+     */
+    // Terraform
+    exportTerraform(callback=null) {}
+    // Ansible
+    exportAnsible(callback=null) {}
+    // Resource Manager
+    exportResourceManager(callback=null) {}
+
+    /*
+    ** Data Validation
+     */
+    validate(successCallback = null, errorCallback = null) {
+        $.ajax({
+            type: 'post',
+            url: 'validate',
+            dataType: 'text',
+            contentType: 'application/json',
+            data: JSON.stringify(this),
+            success: function(resp) {
+                console.info('Validation Response : ' + resp);
+                if (successCallback && successCallback !== null) successCallback(JSON.parse(resp));
+            },
+            error: function(xhr, status, error) {
+                console.info('Status : '+ status)
+                console.info('Error : '+ error)
+                if (errorCallback && errorCallback !== null) errorCallback(error);
+            }
+        });
+    }
+
+    /*
+    ** Calculate price
+     */
+    estimateCost(callback=null) {
+        $.ajax({
+            type: 'post',
+            url: 'pricing/estimate',
+            dataType: 'text',
+            contentType: 'application/json',
+            data: JSON.stringify(this),
+            success: function(resp) {
+                console.info('Validation Response : ' + resp);
+                if (callback && callback !== null) callback(JSON.parse(resp));
+            },
+            error: function(xhr, status, error) {
+                console.info('Status : '+ status)
+                console.info('Error : '+ error)
+            }
+        });
+    }
+
+}
+
+/*
+** Model representation of each artefact within OCI
+ */
+class OkitArtifact {
+    /*
+    ** Create
+     */
+    constructor (okitjson) {
+        this.getOkitJson = function() {return okitjson};
+        // Add Id
+        this.id = 'okit.' + this.constructor.name.toLowerCase() + '.' + uuidv4();
+        // Add default for common Tag variables
+        this.freeform_tags = {};
+        this.defined_tags = {};
+    }
+
+
+    /*
+    ** Clone Functionality
+     */
+    clone() {
+        alert('Clone function "clone()" has not been implemented.');
+        return;
+    }
+
+    /*
+    ** Merge Functionality
+     */
+    merge(update) {
+        $.extend(true, this, update);
+    }
+
+    /*
+    ** Convert Functionality will be overridden to allow backwards compatibility
+     */
+    convert() {
+        if (this.parent_id !== undefined) {delete this.parent_id;}
+    }
+
+    /*
+    ** Get this Artifacts Parent Object
+     */
+    getParent() {
+        if (this.getParentId() && $(jqId(this.getParentId())).data('type')) {
+            console.info('Parent Id : ' + this.getParentId());
+            const getFunction = 'get' + $(jqId(this.getParentId())).data('type').split(' ').join('');
+            console.info('>>>>>>>>> Parent ' + this.getOkitJson()[getFunction](this.getParentId()).display_name);
+            return this.getOkitJson()[getFunction](this.getParentId());
+        }
+        console.info('>>>>>>>>> Parent NULL');
+        return null;
+    }
+
+    getParentId() {
+        return this.parent_id;
+    }
+    /*
+    ** Get the Artifact name this Artifact will be know by.
+     */
+    getArtifactReference() {
+        //alert('Get Artifact Reference function "getArtifactReference()" has not been implemented.');
+        return this.constructor.getArtifactReference();
+    }
+
+    artefactToElement(name) {
+        return name.toLowerCase().split(' ').join('_') + 's';
+    }
+
+
+    /*
+    ** Delete Processing
+     */
+    delete() {
+        console.groupCollapsed('Delete (Default) ' + this.getArtifactReference() + ' : ' + this.id);
+        // Delete Child Artifacts
+        this.deleteChildren();
+        console.groupEnd();
+    }
+
+    deleteChildren() {
+        console.info('Default empty deleteChildren()');
+    }
+
+    getChildren(artefact) {
+        console.info('Default empty getChildren()');
+    }
+
+
+    /*
+    ** Define Allowable SVG Drop Targets
+     */
+    getDropTargets() {
+        // Return list of Artifact names
+        return this.constructor.getDropTargets();
+    }
+
+
+    /*
+    ** Default name generation
+     */
+    generateDefaultName(count = 0) {
+        return this.getNamePrefix() + ('000' + count).slice(-3);
+    }
+
+    getNamePrefix() {
+        return 'okit-';
+    }
+
+    getAvailabilityDomainNumber(availability_domain) {
+        if (availability_domain) {
+            return availability_domain.slice(-1);
+        } else {
+            return availability_domain;
+        }
+    }
+
+    /*
+    ** Static Functionality
+     */
+    static getArtifactReference() {
+        alert('Get Artifact Reference function "getArtifactReference()" has not been implemented.');
+        return;
+    }
+
+    static getDropTargets() {
+        console.warn('Get Drop Targets not implements');
+        return [];
+    }
+
+    static getConnectTargets() {
+        console.warn('Get Connect Targets not implements');
+        return [];
+    }
+
+    static query(request={}, region='') {
+        console.error('Query not implemented');
+    }
+
+}
+
+/*
+** Model Representation of OCI Regions
+ */
+class OkitRegions {
+    /*
+    ** Create
+     */
+    constructor() {
+        this['us-sanjose-1'] = new OkitJson();
+        this['us-phoenix-1'] = new OkitJson();
+        this['us-ashburn-1'] = new OkitJson();
+        this['uk-london-1'] = new OkitJson();
+        this['sa-saopaulo-1'] = new OkitJson();
+        this['me-jeddah-1'] = new OkitJson();
+        this['eu-zurich-1'] = new OkitJson();
+        this['eu-frankfurt-1'] = new OkitJson();
+        this['eu-amsterdam-1'] = new OkitJson();
+        this['ca-toronto-1'] = new OkitJson();
+        this['ca-montreal-1'] = new OkitJson();
+        this['ap-tokyo-1'] = new OkitJson();
+        this['ap-sydney-1'] = new OkitJson();
+        this['ap-seoul-1'] = new OkitJson();
+        this['ap-osaka-1'] = new OkitJson();
+        this['ap-mumbai-1'] = new OkitJson();
+        this['ap-melbourne-1'] = new OkitJson();
+        this['ap-hyderabad-1'] = new OkitJson();
+        this['ap-chuncheon-1'] = new OkitJson();
+    }
+}
+
diff --git a/okitweb/static/okit/query/oci/js/okit_query.js b/okitweb/static/okit/query/oci/js/okit_query.js
new file mode 100644
index 000000000..3a9cda958
--- /dev/null
+++ b/okitweb/static/okit/query/oci/js/okit_query.js
@@ -0,0 +1,673 @@
+/*
+** Copyright (c) 2020, Oracle and/or its affiliates.
+** Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl.
+*/
+console.info('Loaded OKIT OCI Query Javascript');
+
+class OkitOCIQuery {
+    constructor(regions = []) {
+        this.regions = regions;
+        this.region_query_count = {};
+        this.complete_callback = undefined;
+        this.active_region = '';
+    }
+
+    query(request = null, complete_callback) {
+        this.complete_callback = complete_callback;
+        if (request && request !== null) {
+            for (const [i, region] of this.regions.entries()) {
+                console.info(`${i} - Processing Selected Region : ${region}`);
+                let region_request = JSON.clone(request);
+                region_request.region = region;
+                region_request.refresh = false;
+                if (i === 0) {
+                    region_request.refresh = true;
+                    this.active_region = region;
+                }
+                regionOkitJson[region] = new OkitJson();
+                this.queryRootCompartment(region_request);
+            }
+        }
+    }
+
+    isComplete() {
+        if (this.complete_callback && this.complete_callback !== null) {
+            console.info(this.region_query_count);
+            for (let key of Object.keys(this.region_query_count)) {
+                if (this.region_query_count[key] > 0) {
+                    return;
+                }
+            }
+            console.info('Executing Callback ' + this.complete_callback + ' ' + this.active_region);
+            this.complete_callback(this.active_region);
+        }
+    }
+
+    queryAutonomousDatabases(request) {
+        console.info('------------- Autonomous Database Query --------------------');
+        console.info('------------- Compartment : ' + request.compartment_id);
+        let me = this;
+        this.region_query_count[request.region]++;
+        $.ajax({
+            type: 'get',
+            url: 'oci/artefacts/AutonomousDatabase',
+            dataType: 'text',
+            contentType: 'application/json',
+            data: JSON.stringify(request),
+            success: function(resp) {
+                let response_json = JSON.parse(resp);
+                regionOkitJson[request.region].load({autonomous_databases: response_json});
+                //okitJsonView.loadAutonomousDatabases(response_json);
+                for (let artefact of response_json) {
+                    console.info(artefact.display_name);
+                }
+                if (request.refresh) {okitJsonView.draw();}
+                me.region_query_count[request.region]-- && me.isComplete();
+            },
+            error: function(xhr, status, error) {
+                console.info('Status : ' + status)
+                console.info('Error : ' + error)
+                me.region_query_count[request.region]-- && me.isComplete();
+            }
+        });
+    }
+
+    queryBlockStorageVolumes(request) {
+        console.info('------------- Block Storage Volume Query --------------------');
+        console.info('------------- Compartment : ' + request.compartment_id);
+        let me = this;
+        this.region_query_count[request.region]++;
+        $.ajax({
+            type: 'get',
+            url: 'oci/artefacts/BlockStorageVolume',
+            dataType: 'text',
+            contentType: 'application/json',
+            data: JSON.stringify(request),
+            success: function(resp) {
+                let response_json = JSON.parse(resp);
+                regionOkitJson[request.region].load({block_storage_volumes: response_json});
+                //okitJsonView.loadBlockStorageVolumes(response_json);
+                for (let artefact of response_json) {
+                    console.info(artefact.display_name);
+                }
+                if (request.refresh) {okitJsonView.draw();}
+                me.region_query_count[request.region]-- && me.isComplete();
+            },
+            error: function(xhr, status, error) {
+                console.info('Status : ' + status)
+                console.info('Error : ' + error)
+                me.region_query_count[request.region]-- && me.isComplete();
+            }
+        });
+    }
+
+    queryRootCompartment(request, refresh) {
+        console.info('------------- Root Compartment Query --------------------');
+        let me = this;
+        this.region_query_count[request.region] = 1;
+        $.ajax({
+            type: 'get',
+            url: 'oci/artefacts/Compartment',
+            dataType: 'text',
+            contentType: 'application/json',
+            data: JSON.stringify(request),
+            success: function(resp) {
+                let response_json = JSON.parse(resp);
+                response_json.compartment_id = null;
+                regionOkitJson[request.region].load({compartments: [response_json]})
+                //okitJsonView.loadCompartments([response_json]);
+                console.info(response_json.name);
+                let sub_query_request = JSON.clone(request);
+                sub_query_request.compartment_id = response_json.id;
+                me.queryCompartmentSubComponents(sub_query_request);
+                if (request.refresh) {okitJsonView.draw();}
+                me.region_query_count[request.region]-- && me.isComplete();
+
+            },
+            error: function(xhr, status, error) {
+                console.error('Status : ' + status);
+                console.error('Error  : ' + error);
+                me.region_query_count[request.region]-- && me.isComplete();
+            }
+        });
+    }
+    queryCompartments(request) {
+        console.info('------------- Compartments Query --------------------');
+        console.info('------------- Compartment           : ' + request.compartment_id);
+        let me = this;
+        this.region_query_count[request.region]++;
+        $.ajax({
+            type: 'get',
+            url: 'oci/artefacts/Compartments',
+            dataType: 'text',
+            contentType: 'application/json',
+            data: JSON.stringify(request),
+            success: function(resp) {
+                let response_json = JSON.parse(resp);
+                regionOkitJson[request.region].load({compartments: response_json});
+                //okitJsonView.loadCompartments(response_json);
+                for (let artefact of response_json) {
+                    console.info(artefact.display_name);
+                    let sub_query_request = JSON.clone(request);
+                    sub_query_request.compartment_id = artefact.id;
+                    me.queryCompartmentSubComponents(sub_query_request);
+                }
+                if (request.refresh) {okitJsonView.draw();}
+                me.region_query_count[request.region]-- && me.isComplete();
+            },
+            error: function(xhr, status, error) {
+                console.error('Status : ' + status);
+                console.error('Error  : ' + error);
+                me.region_query_count[request.region]-- && me.isComplete();
+            }
+        });
+    }
+    queryCompartmentSubComponents(request) {
+        this.queryCompartments(request);
+        this.queryVirtualCloudNetworks(request);
+        this.queryBlockStorageVolumes(request);
+        this.queryDynamicRoutingGateways(request);
+        this.queryAutonomousDatabases(request);
+        this.queryObjectStorageBuckets(request);
+        this.queryFastConnects(request);
+        this.queryInstances(request);
+        this.queryDatabaseSystems(request);
+        this.queryFileStorageSystems(request);
+    }
+
+    queryDatabaseSystems(request) {
+        console.info('------------- Autonomous Database Query --------------------');
+        console.info('------------- Compartment : ' + request.compartment_id);
+        let me = this;
+        this.region_query_count[request.region]++;
+        $.ajax({
+            type: 'get',
+            url: 'oci/artefacts/DatabaseSystem',
+            dataType: 'text',
+            contentType: 'application/json',
+            data: JSON.stringify(request),
+            success: function(resp) {
+                let response_json = JSON.parse(resp);
+                regionOkitJson[request.region].load({database_systems: response_json});
+                //okitJsonView.loadDatabaseSystems(response_json);
+                for (let artefact of response_json) {
+                    console.info(artefact.display_name);
+                }
+                if (request.refresh) {okitJsonView.draw();}
+                me.region_query_count[request.region]-- && me.isComplete();
+            },
+            error: function(xhr, status, error) {
+                console.info('Status : ' + status)
+                console.info('Error : ' + error)
+                me.region_query_count[request.region]-- && me.isComplete();
+            }
+        });
+    }
+
+    queryDynamicRoutingGateways(request) {
+        console.info('------------- Dynamic Routing Gateway Query --------------------');
+        console.info('------------- Compartment : ' + request.compartment_id);
+        let me = this;
+        this.region_query_count[request.region]++;
+        $.ajax({
+            type: 'get',
+            url: 'oci/artefacts/DynamicRoutingGateway',
+            dataType: 'text',
+            contentType: 'application/json',
+            data: JSON.stringify(request),
+            success: function(resp) {
+                let response_json = JSON.parse(resp);
+                regionOkitJson[request.region].load({dynamic_routing_gateways: response_json});
+                //okitJsonView.loadDynamicRoutingGateways(response_json);
+                for (let artefact of response_json) {
+                    console.info(artefact.display_name);
+                }
+                if (request.refresh) {okitJsonView.draw();}
+                me.region_query_count[request.region]-- && me.isComplete();
+            },
+            error: function(xhr, status, error) {
+                console.info('Status : ' + status)
+                console.info('Error : ' + error)
+                me.region_query_count[request.region]-- && me.isComplete();
+            }
+        });
+    }
+
+    queryFastConnects(request) {
+        console.info('------------- Fast Connect Query --------------------');
+        console.info('------------- Compartment : ' + request.compartment_id);
+        let me = this;
+        this.region_query_count[request.region]++;
+        $.ajax({
+            type: 'get',
+            url: 'oci/artefacts/FastConnect',
+            dataType: 'text',
+            contentType: 'application/json',
+            data: JSON.stringify(request),
+            success: function(resp) {
+                let response_json = JSON.parse(resp);
+                regionOkitJson[request.region].load({fast_connects: response_json});
+                //okitJsonView.loadFastConnects(response_json);
+                for (let artefact of response_json) {
+                    console.info(artefact.display_name);
+                }
+                if (request.refresh) {okitJsonView.draw();}
+                me.region_query_count[request.region]-- && me.isComplete();
+            },
+            error: function(xhr, status, error) {
+                console.info('Status : ' + status)
+                console.info('Error : ' + error)
+                me.region_query_count[request.region]-- && me.isComplete();
+            }
+        });
+    }
+
+    queryFileStorageSystems(request) {
+        console.info('------------- queryFileStorageSystemAjax --------------------');
+        console.info('------------- Compartment : ' + request.compartment_id);
+        let me = this;
+        this.region_query_count[request.region]++;
+        $.ajax({
+            type: 'get',
+            url: 'oci/artefacts/FileStorageSystem',
+            dataType: 'text',
+            contentType: 'application/json',
+            data: JSON.stringify(request),
+            success: function(resp) {
+                let response_json = JSON.parse(resp);
+                regionOkitJson[request.region].load({file_storage_systems: response_json});
+                //okitJsonView.loadFileStorageSystems(response_json);
+                for (let artefact of response_json) {
+                    console.info(artefact.display_name);
+                }
+                if (request.refresh) {okitJsonView.draw();}
+                me.region_query_count[request.region]-- && me.isComplete();
+            },
+            error: function(xhr, status, error) {
+                console.info('Status : ' + status)
+                console.info('Error : ' + error)
+                me.region_query_count[request.region]-- && me.isComplete();
+            }
+        });
+    }
+
+    queryInstances(request) {
+        console.info('------------- Instance Query --------------------');
+        console.info('------------- Compartment : ' + request.compartment_id);
+        console.info('------------- Subnet      : ' + request.subnet_id);
+        let me = this;
+        this.region_query_count[request.region]++;
+        $.ajax({
+            type: 'get',
+            url: 'oci/artefacts/Instance',
+            dataType: 'text',
+            contentType: 'application/json',
+            data: JSON.stringify(request),
+            success: function (resp) {
+                let response_json = JSON.parse(resp);
+                regionOkitJson[request.region].load({instances: response_json});
+                //okitJsonView.loadInstances(response_json);
+                for (let artefact of response_json) {
+                    console.info(artefact.display_name);
+                }
+                if (request.refresh) {okitJsonView.draw();}
+                me.region_query_count[request.region]-- && me.isComplete();
+            },
+            error: function (xhr, status, error) {
+                console.warn('Status : ' + status);
+                console.warn('Error : ' + error);
+                me.region_query_count[request.region]-- && me.isComplete();
+            }
+        });
+    }
+
+    queryInternetGateways(request) {
+        console.info('------------- Internet Gateway Query --------------------');
+        console.info('------------- Compartment           : ' + request.compartment_id);
+        console.info('------------- Virtual Cloud Network : ' + request.vcn_id);
+        let me = this;
+        this.region_query_count[request.region]++;
+        $.ajax({
+            type: 'get',
+            url: 'oci/artefacts/InternetGateway',
+            dataType: 'text',
+            contentType: 'application/json',
+            data: JSON.stringify(request),
+            success: function(resp) {
+                let response_json = JSON.parse(resp);
+                regionOkitJson[request.region].load({internet_gateways: response_json});
+                //okitJsonView.loadInternetGateways(response_json);
+                for (let artefact of response_json) {
+                    console.info(artefact.display_name);
+                }
+                if (request.refresh) {okitJsonView.draw();}
+                me.region_query_count[request.region]-- && me.isComplete();
+            },
+            error: function(xhr, status, error) {
+                console.info('Status : ' + status)
+                console.info('Error : ' + error)
+                me.region_query_count[request.region]-- && me.isComplete();
+            }
+        });
+    }
+
+    queryLoadBalancers(request) {
+        console.info('------------- Load Balancer Query --------------------');
+        console.info('------------- Compartment : ' + request.compartment_id);
+        console.info('------------- Subnet      : ' + request.subnet_id);
+        let me = this;
+        this.region_query_count[request.region]++;
+        $.ajax({
+            type: 'get',
+            url: 'oci/artefacts/LoadBalancer',
+            dataType: 'text',
+            contentType: 'application/json',
+            data: JSON.stringify(request),
+            success: function (resp) {
+                let response_json = JSON.parse(resp);
+                regionOkitJson[request.region].load({load_balancers: response_json});
+                //okitJsonView.loadLoadBalancers(response_json);
+                for (let artefact of response_json) {
+                    console.info(artefact.display_name);
+                }
+                if (request.refresh) {okitJsonView.draw();}
+                me.region_query_count[request.region]-- && me.isComplete();
+            },
+            error: function (xhr, status, error) {
+                console.info('Status : ' + status)
+                console.info('Error : ' + error)
+                me.region_query_count[request.region]-- && me.isComplete();
+            }
+        });
+    }
+
+    queryLocalPeeringGateways(request) {
+        console.info('------------- Local Peering Gateway Query --------------------');
+        console.info('------------- Compartment           : ' + request.compartment_id);
+        console.info('------------- Virtual Cloud Network : ' + request.vcn_id);
+        let me = this;
+        this.region_query_count[request.region]++;
+        $.ajax({
+            type: 'get',
+            url: 'oci/artefacts/LocalPeeringGateway',
+            dataType: 'text',
+            contentType: 'application/json',
+            data: JSON.stringify(request),
+            success: function(resp) {
+                let response_json = JSON.parse(resp);
+                regionOkitJson[request.region].load({local_peering_gateways: response_json});
+                //okitJsonView.loadLocalPeeringGateways(response_json);
+                for (let artefact of response_json) {
+                    console.info(artefact.display_name);
+                }
+                if (request.refresh) {okitJsonView.draw();}
+                me.region_query_count[request.region]-- && me.isComplete();
+            },
+            error: function(xhr, status, error) {
+                console.info('Status : ' + status)
+                console.info('Error : ' + error)
+                me.region_query_count[request.region]-- && me.isComplete();
+            }
+        });
+    }
+
+    queryNATGateways(request) {
+        console.info('------------- NAT Gateway Query --------------------');
+        console.info('------------- Compartment           : ' + request.compartment_id);
+        console.info('------------- Virtual Cloud Network : ' + request.vcn_id);
+        let me = this;
+        this.region_query_count[request.region]++;
+        $.ajax({
+            type: 'get',
+            url: 'oci/artefacts/NATGateway',
+            dataType: 'text',
+            contentType: 'application/json',
+            data: JSON.stringify(request),
+            success: function(resp) {
+                let response_json = JSON.parse(resp);
+                regionOkitJson[request.region].load({nat_gateways: response_json});
+                //okitJsonView.loadNATGateways(response_json);
+                for (let artefact of response_json) {
+                    console.info(artefact.display_name);
+                }
+                if (request.refresh) {okitJsonView.draw();}
+                me.region_query_count[request.region]-- && me.isComplete();
+            },
+            error: function(xhr, status, error) {
+                console.info('Status : ' + status)
+                console.info('Error : ' + error)
+                me.region_query_count[request.region]-- && me.isComplete();
+            }
+        });
+    }
+
+    queryNetworkSecurityGroups(request) {
+        console.info('------------- Network Security Group Query --------------------');
+        console.info('------------- Compartment           : ' + request.compartment_id);
+        console.info('------------- Virtual Cloud Network : ' + request.vcn_id);
+        let me = this;
+        this.region_query_count[request.region]++;
+        $.ajax({
+            type: 'get',
+            url: 'oci/artefacts/NetworkSecurityGroup',
+            dataType: 'text',
+            contentType: 'application/json',
+            data: JSON.stringify(request),
+            success: function(resp) {
+                let response_json = JSON.parse(resp);
+                regionOkitJson[request.region].load({network_security_groups: response_json});
+                //okitJsonView.loadNetworkSecurityGroups(response_json);
+                for (let artefact of response_json) {
+                    console.info(artefact.display_name);
+                }
+                if (request.refresh) {okitJsonView.draw();}
+                me.region_query_count[request.region]-- && me.isComplete();
+            },
+            error: function(xhr, status, error) {
+                console.info('Status : ' + status)
+                console.info('Error : ' + error)
+                me.region_query_count[request.region]-- && me.isComplete();
+            }
+        });
+    }
+
+    queryObjectStorageBuckets(request) {
+        console.info('------------- Object Storage Bucket Query --------------------');
+        console.info('------------- Compartment : ' + request.compartment_id);
+        let me = this;
+        this.region_query_count[request.region]++;
+        $.ajax({
+            type: 'get',
+            url: 'oci/artefacts/ObjectStorageBucket',
+            dataType: 'text',
+            contentType: 'application/json',
+            data: JSON.stringify(request),
+            success: function(resp) {
+                let response_json = JSON.parse(resp);
+                regionOkitJson[request.region].load({object_storage_buckets: response_json});
+                //okitJsonView.loadObjectStorageBuckets(response_json);
+                for (let artefact of response_json) {
+                    console.info(artefact.display_name);
+                }
+                if (request.refresh) {okitJsonView.draw();}
+                me.region_query_count[request.region]-- && me.isComplete();
+            },
+            error: function(xhr, status, error) {
+                console.info('Status : ' + status)
+                console.info('Error : ' + error)
+                me.region_query_count[request.region]-- && me.isComplete();
+            }
+        });
+    }
+
+    queryRouteTables(request) {
+        console.info('------------- Route Table Query --------------------');
+        console.info('------------- Compartment           : ' + request.compartment_id);
+        console.info('------------- Virtual Cloud Network : ' + request.vcn_id);
+        let me = this;
+        this.region_query_count[request.region]++;
+        $.ajax({
+            type: 'get',
+            url: 'oci/artefacts/RouteTable',
+            dataType: 'text',
+            contentType: 'application/json',
+            data: JSON.stringify(request),
+            success: function(resp) {
+                let response_json = JSON.parse(resp);
+                regionOkitJson[request.region].load({route_tables: response_json});
+                //okitJsonView.loadRouteTables(response_json);
+                for (let artefact of response_json) {
+                    console.info(artefact.display_name);
+                }
+                if (request.refresh) {okitJsonView.draw();}
+                me.region_query_count[request.region]-- && me.isComplete();
+            },
+            error: function(xhr, status, error) {
+                console.info('Status : ' + status)
+                console.info('Error : ' + error)
+                me.region_query_count[request.region]-- && me.isComplete();
+            }
+        });
+    }
+
+    querySecurityLists(request) {
+        console.info('------------- Security List Query --------------------');
+        console.info('------------- Compartment           : ' + request.compartment_id);
+        console.info('------------- Virtual Cloud Network : ' + request.vcn_id);
+        let me = this;
+        this.region_query_count[request.region]++;
+        $.ajax({
+            type: 'get',
+            url: 'oci/artefacts/SecurityList',
+            dataType: 'text',
+            contentType: 'application/json',
+            data: JSON.stringify(request),
+            success: function(resp) {
+                let response_json = JSON.parse(resp);
+                regionOkitJson[request.region].load({security_lists: response_json});
+                //okitJsonView.loadSecurityLists(response_json);
+                for (let artefact of response_json) {
+                    console.info(artefact.display_name);
+                }
+                if (request.refresh) {okitJsonView.draw();}
+                me.region_query_count[request.region]-- && me.isComplete();
+            },
+            error: function(xhr, status, error) {
+                console.info('Status : ' + status)
+                console.info('Error : ' + error)
+                me.region_query_count[request.region]-- && me.isComplete();
+            }
+        });
+    }
+
+    queryServiceGateways(request) {
+        console.info('------------- Service Gateway Query --------------------');
+        console.info('------------- Compartment           : ' + request.compartment_id);
+        console.info('------------- Virtual Cloud Network : ' + request.vcn_id);
+        let me = this;
+        this.region_query_count[request.region]++;
+        $.ajax({
+            type: 'get',
+            url: 'oci/artefacts/ServiceGateway',
+            dataType: 'text',
+            contentType: 'application/json',
+            data: JSON.stringify(request),
+            success: function(resp) {
+                let response_json = JSON.parse(resp);
+                regionOkitJson[request.region].load({service_gateways: response_json});
+                //okitJsonView.loadServiceGateways(response_json);
+                for (let artefact of response_json) {
+                    console.info(artefact.display_name);
+                }
+                if (request.refresh) {okitJsonView.draw();}
+                me.region_query_count[request.region]-- && me.isComplete();
+            },
+            error: function(xhr, status, error) {
+                console.info('Status : ' + status)
+                console.info('Error : ' + error)
+                me.region_query_count[request.region]-- && me.isComplete();
+            }
+        });
+    }
+
+    querySubnets(request) {
+        console.info('------------- Subnet Query --------------------');
+        console.info('------------- Compartment           : ' + request.compartment_id);
+        console.info('------------- Virtual Cloud Network : ' + request.vcn_id);
+        let me = this;
+        this.region_query_count[request.region]++;
+        $.ajax({
+            type: 'get',
+            url: 'oci/artefacts/Subnet',
+            dataType: 'text',
+            contentType: 'application/json',
+            data: JSON.stringify(request),
+            success: function (resp) {
+                let response_json = JSON.parse(resp);
+                regionOkitJson[request.region].load({subnets: response_json});
+                //okitJsonView.loadSubnets(response_json);
+                for (let artefact of response_json) {
+                    console.info(artefact.display_name);
+                    let sub_query_request = JSON.clone(request);
+                    sub_query_request.subnet_id = artefact.id;
+                    me.querySubnetSubComponents(sub_query_request);
+                }
+                if (request.refresh) {okitJsonView.draw();}
+                me.region_query_count[request.region]-- && me.isComplete();
+            },
+            error: function (xhr, status, error) {
+                console.info('Status : ' + status)
+                console.info('Error : ' + error)
+                me.region_query_count[request.region]-- && me.isComplete();
+            }
+        });
+    }
+    querySubnetSubComponents(request) {
+        this.queryLoadBalancers(request);
+    }
+
+    queryVirtualCloudNetworks(request) {
+        console.info('------------- Virtual Cloud Network Query --------------------');
+        console.info('------------- Compartment           : ' + request.compartment_id);
+        let me = this;
+        this.region_query_count[request.region]++;
+        $.ajax({
+            type: 'get',
+            url: 'oci/artefacts/VirtualCloudNetwork',
+            dataType: 'text',
+            contentType: 'application/json',
+            data: JSON.stringify(request),
+            success: function(resp) {
+                let response_json = JSON.parse(resp);
+                regionOkitJson[request.region].load({virtual_cloud_networks: response_json});
+                //okitJsonView.loadVirtualCloudNetworks(response_json);
+                for (let artefact of response_json) {
+                    console.info(artefact.display_name);
+                    let sub_query_request = JSON.clone(request);
+                    sub_query_request.vcn_id = artefact.id;
+                    me.queryVirtualCLoudNetworkSubComponents(sub_query_request);
+                }
+                if (request.refresh) {okitJsonView.draw();}
+                me.region_query_count[request.region]-- && me.isComplete();
+            },
+            error: function(xhr, status, error) {
+                console.info('Status : ' + status)
+                console.info('Error  : ' + error)
+                me.region_query_count[request.region]-- && me.isComplete();
+            }
+        });
+    }
+    queryVirtualCLoudNetworkSubComponents(request) {
+        this.queryInternetGateways(request);
+        this.queryNATGateways(request);
+        this.queryNetworkSecurityGroups(request);
+        this.queryServiceGateways(request);
+        this.queryLocalPeeringGateways(request);
+        this.queryRouteTables(request);
+        this.querySecurityLists(request);
+        this.querySubnets(request);
+    }
+
+}
+
+let okitOCIQuery = undefined;
diff --git a/okitweb/static/okit/templates/infrastructure/bastion_server.json b/okitweb/static/okit/templates/infrastructure/bastion_server.json
deleted file mode 100644
index 0099f292d..000000000
--- a/okitweb/static/okit/templates/infrastructure/bastion_server.json
+++ /dev/null
@@ -1,160 +0,0 @@
-{
-  "title": "Bastion Server",
-  "description": "Bastion Server Fragment.",
-  "compartments": [
-    {
-      "id": "okit-comp-86396bd7-50e7-4935-8747-6dd507b3ddf9",
-      "name": "okit",
-      "compartment_id": "okit-comp-86396bd7-50e7-4935-8747-6dd507b3ddf9",
-      "parent_id": "canvas",
-      "display_name": "okit-comp001"
-    }
-  ],
-  "autonomous_databases": [],
-  "block_storage_volumes": [],
-  "dynamic_routing_gateways": [],
-  "file_storage_systems": [],
-  "instances": [
-    {
-      "subnet_id": "okit-sn-a2cada96-6f11-436e-b4f1-41ee96f739dd",
-      "subnet": "okit-bastion-sn",
-      "compartment_id": "okit-comp-86396bd7-50e7-4935-8747-6dd507b3ddf9",
-      "availability_domain": "1",
-      "id": "okit-in-2f526c6d-3d93-442f-bc15-3d05689406f9",
-      "display_name": "okit-bastion-server",
-      "hostname_label": "okit-in001",
-      "os": "Oracle Linux",
-      "version": "7.7",
-      "shape": "VM.Standard.E2.1",
-      "boot_volume_size_in_gbs": "50",
-      "authorized_keys": "",
-      "cloud_init_yaml": "#cloud-config\nwrite_files:\n  # Add aliases to bash (Note: At time of writing the append flag does not appear to be working)\n  - path: /etc/.bashrc\n    append: true\n    content: |\n      alias lh='ls -lash'\n      alias lt='ls -last'\n      alias env='/usr/bin/env | sort'\n      alias ssh='/usr/bin/ssh -oStrictHostKeyChecking=no -oUserKnownHostsFile=/dev/null -oConnectTimeout=10 -i /etc/ssh/ssh_host_rsa_key '\n\nssh_keys:\n  rsa_private: |\n    -----BEGIN OPENSSH PRIVATE KEY-----\n    Add Private Key\n    -----END OPENSSH PRIVATE KEY-----\n  rsa_public: ssh-rsa Add Public Key\n\nruncmd:\n  # Set Private Key to read everyone\n  - sudo chmod a+r /etc/ssh/ssh_host_rsa_key*\n  # Add additional environment information because append does not appear to work in write_file\n  - sudo bash -c \"echo 'source /etc/.bashrc' >> /etc/bashrc\"\n\nfinal_message: \"**** The Bastion Instance is finally up, after $UPTIME seconds ****\"\n",
-      "block_storage_volume_ids": [],
-      "block_storage_volumes": [],
-      "subnet_ids": [],
-      "parent_id": "okit-sn-a2cada96-6f11-436e-b4f1-41ee96f739dd"
-    }
-  ],
-  "internet_gateways": [
-    {
-      "vcn_id": "okit-vcn-a4b9e410-9527-43f2-8d46-d953ab1149b7",
-      "virtual_cloud_network": "okit-bastion-vcn",
-      "compartment_id": "okit-comp-86396bd7-50e7-4935-8747-6dd507b3ddf9",
-      "id": "okit-ig-d77f1212-81d7-4524-8927-722904202641",
-      "display_name": "okit-bastion-ig",
-      "parent_id": "okit-vcn-a4b9e410-9527-43f2-8d46-d953ab1149b7"
-    }
-  ],
-  "load_balancers": [],
-  "nat_gateways": [],
-  "object_storage_buckets": [],
-  "route_tables": [
-    {
-      "vcn_id": "okit-vcn-a4b9e410-9527-43f2-8d46-d953ab1149b7",
-      "virtual_cloud_network": "okit-bastion-vcn",
-      "compartment_id": "okit-comp-86396bd7-50e7-4935-8747-6dd507b3ddf9",
-      "id": "okit-rt-0ec379c2-9a1b-4a01-9203-9b5f3cc283c7",
-      "display_name": "okit-bastion-rt",
-      "route_rules": [
-        {
-          "destination_type": "CIDR_BLOCK",
-          "destination": "0.0.0.0/0",
-          "network_entity_id": "okit-ig-d77f1212-81d7-4524-8927-722904202641"
-        }
-      ],
-      "parent_id": "okit-vcn-a4b9e410-9527-43f2-8d46-d953ab1149b7"
-    }
-  ],
-  "security_lists": [
-    {
-      "vcn_id": "okit-vcn-a4b9e410-9527-43f2-8d46-d953ab1149b7",
-      "virtual_cloud_network": "okit-bastion-vcn",
-      "compartment_id": "okit-comp-86396bd7-50e7-4935-8747-6dd507b3ddf9",
-      "id": "okit-sl-ff510077-a9af-41be-8fad-f6430c2a7732",
-      "display_name": "okit-bastion-sl",
-      "egress_security_rules": [
-        {
-          "destination": "0.0.0.0/0",
-          "destination_type": "CIDR_BLOCK",
-          "icmp_options": null,
-          "is_stateless": false,
-          "protocol": "all",
-          "tcp_options": null,
-          "udp_options": null
-        }
-      ],
-      "ingress_security_rules": [
-        {
-          "icmp_options": null,
-          "is_stateless": false,
-          "protocol": "6",
-          "source": "0.0.0.0/0",
-          "source_type": "CIDR_BLOCK",
-          "tcp_options": {
-            "destination_port_range": {
-              "max": 22,
-              "min": 22
-            },
-            "source_port_range": null
-          },
-          "udp_options": null
-        },
-        {
-          "icmp_options": {
-            "code": 4,
-            "type": 3
-          },
-          "is_stateless": false,
-          "protocol": "1",
-          "source": "0.0.0.0/0",
-          "source_type": "CIDR_BLOCK",
-          "tcp_options": null,
-          "udp_options": null
-        },
-        {
-          "icmp_options": {
-            "code": null,
-            "type": 3
-          },
-          "is_stateless": false,
-          "protocol": "1",
-          "source": "10.0.0.0/16",
-          "source_type": "CIDR_BLOCK",
-          "tcp_options": null,
-          "udp_options": null
-        }
-      ],
-      "parent_id": "okit-vcn-a4b9e410-9527-43f2-8d46-d953ab1149b7"
-    }
-  ],
-  "service_gateways": [],
-  "subnets": [
-    {
-      "vcn_id": "okit-vcn-a4b9e410-9527-43f2-8d46-d953ab1149b7",
-      "virtual_cloud_network": "okit-bastion-vcn",
-      "compartment_id": "okit-comp-86396bd7-50e7-4935-8747-6dd507b3ddf9",
-      "id": "okit-sn-a2cada96-6f11-436e-b4f1-41ee96f739dd",
-      "display_name": "okit-bastion-sn",
-      "cidr_block": "10.0.0.0/24",
-      "dns_label": "bastionsn",
-      "prohibit_public_ip_on_vnic": false,
-      "route_table": "",
-      "route_table_id": "okit-rt-0ec379c2-9a1b-4a01-9203-9b5f3cc283c7",
-      "security_lists": [],
-      "security_list_ids": [
-        "okit-sl-ff510077-a9af-41be-8fad-f6430c2a7732"
-      ],
-      "parent_id": "okit-vcn-a4b9e410-9527-43f2-8d46-d953ab1149b7"
-    }
-  ],
-  "virtual_cloud_networks": [
-    {
-      "compartment_id": "okit-comp-86396bd7-50e7-4935-8747-6dd507b3ddf9",
-      "id": "okit-vcn-a4b9e410-9527-43f2-8d46-d953ab1149b7",
-      "display_name": "okit-bastion-vcn",
-      "cidr_block": "10.0.0.0/16",
-      "dns_label": "bastionvcn",
-      "parent_id": "okit-comp-86396bd7-50e7-4935-8747-6dd507b3ddf9"
-    }
-  ]
-}
\ No newline at end of file
diff --git a/okitweb/static/okit/templates/network/load_balanced_nginx.json b/okitweb/static/okit/templates/network/load_balanced_nginx.json
deleted file mode 100644
index aebbb1210..000000000
--- a/okitweb/static/okit/templates/network/load_balanced_nginx.json
+++ /dev/null
@@ -1,195 +0,0 @@
-{
-  "title": "Load Balanced Nginx Instances",
-  "description": "Four load balanced nginx servers",
-  "compartments": [
-    {
-      "id": "okit-comp-94636a16-5595-4a4b-b819-6aff3bee6536",
-      "name": "okit",
-      "parent_id": "canvas",
-      "compartment_id": "okit-comp-94636a16-5595-4a4b-b819-6aff3bee6536",
-      "display_name": "okit-comp001"
-    }
-  ],
-  "open_compartment_index": 0,
-  "virtual_cloud_networks": [
-    {
-      "compartment_id": "okit-comp-94636a16-5595-4a4b-b819-6aff3bee6536",
-      "id": "okit-vcn-dcb74d63-9ae8-44c5-9913-1ba70e11d2b8",
-      "display_name": "nginx-vcn",
-      "cidr_block": "10.0.0.0/16",
-      "dns_label": "vcn001",
-      "parent_id": "okit-comp-94636a16-5595-4a4b-b819-6aff3bee6536"
-    }
-  ],
-  "subnets": [
-    {
-      "vcn_id": "okit-vcn-dcb74d63-9ae8-44c5-9913-1ba70e11d2b8",
-      "virtual_cloud_network": "nginx-vcn",
-      "compartment_id": "okit-comp-94636a16-5595-4a4b-b819-6aff3bee6536",
-      "id": "okit-sn-e8536648-721d-473f-828e-e6cfaa5c59eb",
-      "display_name": "nginx-public-subnet",
-      "cidr_block": "10.0.0.0/24",
-      "dns_label": "sn001",
-      "prohibit_public_ip_on_vnic": false,
-      "route_table": "",
-      "route_table_id": "okit-rt-9634a102-9de8-4d3a-8124-821f036e0ac0",
-      "security_lists": [],
-      "security_list_ids": [
-        "okit-sl-912892db-b457-441e-b2c1-9ef9691154d2"
-      ],
-      "parent_id": "okit-vcn-dcb74d63-9ae8-44c5-9913-1ba70e11d2b8"
-    }
-  ],
-  "route_tables": [
-    {
-      "vcn_id": "okit-vcn-dcb74d63-9ae8-44c5-9913-1ba70e11d2b8",
-      "virtual_cloud_network": "nginx-vcn",
-      "compartment_id": "okit-comp-94636a16-5595-4a4b-b819-6aff3bee6536",
-      "id": "okit-rt-9634a102-9de8-4d3a-8124-821f036e0ac0",
-      "display_name": "okit-rt001",
-      "route_rules": [
-        {
-          "destination_type": "CIDR_BLOCK",
-          "destination": "0.0.0.0/0",
-          "network_entity_id": "okit-ig-9b4a5d64-9346-4c7f-a97a-a0c323500224"
-        }
-      ],
-      "parent_id": "okit-vcn-dcb74d63-9ae8-44c5-9913-1ba70e11d2b8"
-    }
-  ],
-  "security_lists": [
-    {
-      "vcn_id": "okit-vcn-dcb74d63-9ae8-44c5-9913-1ba70e11d2b8",
-      "virtual_cloud_network": "nginx-vcn",
-      "compartment_id": "okit-comp-94636a16-5595-4a4b-b819-6aff3bee6536",
-      "id": "okit-sl-912892db-b457-441e-b2c1-9ef9691154d2",
-      "display_name": "okit-sl001",
-      "egress_security_rules": [
-        {
-          "protocol": "all",
-          "is_stateless": false,
-          "destination_type": "CIDR_BLOCK",
-          "destination": "0.0.0.0/0"
-        }
-      ],
-      "ingress_security_rules": [
-        {
-          "protocol": "all",
-          "is_stateless": false,
-          "source_type": "CIDR_BLOCK",
-          "source": "0.0.0.0/0"
-        }
-      ],
-      "parent_id": "okit-vcn-dcb74d63-9ae8-44c5-9913-1ba70e11d2b8"
-    }
-  ],
-  "instances": [
-    {
-      "subnet_id": "okit-sn-e8536648-721d-473f-828e-e6cfaa5c59eb",
-      "subnet": "nginx-public-subnet",
-      "compartment_id": "okit-comp-94636a16-5595-4a4b-b819-6aff3bee6536",
-      "availability_domain": "1",
-      "id": "okit-in-ee74310b-457b-4b18-b566-ae7351a17d7a",
-      "display_name": "nginx-in001",
-      "hostname_label": "nginx-in001",
-      "os": "Oracle Linux",
-      "version": "7.7",
-      "shape": "VM.Standard2.1",
-      "boot_volume_size_in_gbs": "50",
-      "authorized_keys": "",
-      "cloud_init_yaml": "#cloud-config\npackages:\n  - nginx\n  - oci-utils\n  - python36\n  - python-oci-cli\n\nwrite_files:\n  # Add aliases to bash (Note: At time of writing the append flag does not appear to be working)\n  - path: /etc/.bashrc\n    append: true\n    content: |\n      alias lh='ls -lash'\n      alias lt='ls -last'\n      alias env='/usr/bin/env | sort'\n      alias whatsmyip='curl -X GET https://www.whatismyip.net | grep ipaddress'\n  # Create nginx index.html\n  - path: /usr/share/nginx/html/index1.html\n    permissions: '0644'\n    content: |\n      <html>\n      <head>\n      <title>OCI Loadbalancer backend {hostname}</title>\n      <meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\" />\n      <meta http-equiv=\"refresh\" content=\"10\" />\n      <style>\n      body {\n      background-image: url(\"bg.jpg\");\n      background-repeat: no-repeat;\n      background-size: contain;\n      background-position: center;\n      }\n      h1 {\n      text-align: center;\n      width: 100%;\n      }\n      </style>\n      </head>\n      <body>\n      <h1>OCI Regional Subnet Loadbalancer Backend {hostname}</h1>\n      </body>\n      </html>\n\nruncmd:\n  # Enable nginx\n  - sudo systemctl enable nginx.service\n  - sudo cp -v /usr/share/nginx/html/index1.html /usr/share/nginx/html/index.html\n  - sudo sed -i \"s/{hostname}/$(hostname)/g\" /usr/share/nginx/html/index.html\n  - sudo systemctl start nginx.service\n  # Set Firewall Rules\n  - sudo firewall-offline-cmd  --add-port=80/tcp\n  - sudo systemctl restart firewalld\n  # Add additional environment information because append does not appear to work in write_file\n  - sudo bash -c \"echo 'source /etc/.bashrc' >> /etc/bashrc\"\n\nfinal_message: \"**** The system is finally up, after $UPTIME seconds ****\"\n",
-      "block_storage_volume_ids": [],
-      "block_storage_volumes": [],
-      "parent_id": "okit-sn-e8536648-721d-473f-828e-e6cfaa5c59eb",
-      "subnet_ids": []
-    },
-    {
-      "subnet_id": "okit-sn-e8536648-721d-473f-828e-e6cfaa5c59eb",
-      "subnet": "nginx-public-subnet",
-      "compartment_id": "okit-comp-94636a16-5595-4a4b-b819-6aff3bee6536",
-      "availability_domain": "1",
-      "id": "okit-in-6ce3195d-7119-4666-8966-6555874819a8",
-      "display_name": "nginx-in002",
-      "hostname_label": "nginx-in002",
-      "os": "Oracle Linux",
-      "version": "7.7",
-      "shape": "VM.Standard.E2.1",
-      "boot_volume_size_in_gbs": "50",
-      "authorized_keys": "",
-      "cloud_init_yaml": "#cloud-config\npackages:\n  - nginx\n  - oci-utils\n  - python36\n  - python-oci-cli\n\nwrite_files:\n  # Add aliases to bash (Note: At time of writing the append flag does not appear to be working)\n  - path: /etc/.bashrc\n    append: true\n    content: |\n      alias lh='ls -lash'\n      alias lt='ls -last'\n      alias env='/usr/bin/env | sort'\n      alias whatsmyip='curl -X GET https://www.whatismyip.net | grep ipaddress'\n  # Create nginx index.html\n  - path: /usr/share/nginx/html/index1.html\n    permissions: '0644'\n    content: |\n      <html>\n      <head>\n      <title>OCI Loadbalancer backend {hostname}</title>\n      <meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\" />\n      <meta http-equiv=\"refresh\" content=\"10\" />\n      <style>\n      body {\n      background-image: url(\"bg.jpg\");\n      background-repeat: no-repeat;\n      background-size: contain;\n      background-position: center;\n      }\n      h1 {\n      text-align: center;\n      width: 100%;\n      }\n      </style>\n      </head>\n      <body>\n      <h1>OCI Regional Subnet Loadbalancer Backend {hostname}</h1>\n      </body>\n      </html>\n\nruncmd:\n  # Enable nginx\n  - sudo systemctl enable nginx.service\n  - sudo cp -v /usr/share/nginx/html/index1.html /usr/share/nginx/html/index.html\n  - sudo sed -i \"s/{hostname}/$(hostname)/g\" /usr/share/nginx/html/index.html\n  - sudo systemctl start nginx.service\n  # Set Firewall Rules\n  - sudo firewall-offline-cmd  --add-port=80/tcp\n  - sudo systemctl restart firewalld\n  # Add additional environment information because append does not appear to work in write_file\n  - sudo bash -c \"echo 'source /etc/.bashrc' >> /etc/bashrc\"\n\nfinal_message: \"**** The system is finally up, after $UPTIME seconds ****\"\n",
-      "block_storage_volume_ids": [],
-      "block_storage_volumes": [],
-      "parent_id": "okit-sn-e8536648-721d-473f-828e-e6cfaa5c59eb",
-      "subnet_ids": []
-    },
-    {
-      "subnet_id": "okit-sn-e8536648-721d-473f-828e-e6cfaa5c59eb",
-      "subnet": "nginx-public-subnet",
-      "compartment_id": "okit-comp-94636a16-5595-4a4b-b819-6aff3bee6536",
-      "availability_domain": "1",
-      "id": "okit-in-2195d4b3-07bc-4a57-a06b-627cf69b8c46",
-      "display_name": "nginx-in003",
-      "hostname_label": "nginx-in003",
-      "os": "Oracle Linux",
-      "version": "7.7",
-      "shape": "VM.Standard.E2.1",
-      "boot_volume_size_in_gbs": "50",
-      "authorized_keys": "",
-      "cloud_init_yaml": "#cloud-config\npackages:\n  - nginx\n  - oci-utils\n  - python36\n  - python-oci-cli\n\nwrite_files:\n  # Add aliases to bash (Note: At time of writing the append flag does not appear to be working)\n  - path: /etc/.bashrc\n    append: true\n    content: |\n      alias lh='ls -lash'\n      alias lt='ls -last'\n      alias env='/usr/bin/env | sort'\n      alias whatsmyip='curl -X GET https://www.whatismyip.net | grep ipaddress'\n  # Create nginx index.html\n  - path: /usr/share/nginx/html/index1.html\n    permissions: '0644'\n    content: |\n      <html>\n      <head>\n      <title>OCI Loadbalancer backend {hostname}</title>\n      <meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\" />\n      <meta http-equiv=\"refresh\" content=\"10\" />\n      <style>\n      body {\n      background-image: url(\"bg.jpg\");\n      background-repeat: no-repeat;\n      background-size: contain;\n      background-position: center;\n      }\n      h1 {\n      text-align: center;\n      width: 100%;\n      }\n      </style>\n      </head>\n      <body>\n      <h1>OCI Regional Subnet Loadbalancer Backend {hostname}</h1>\n      </body>\n      </html>\n\nruncmd:\n  # Enable nginx\n  - sudo systemctl enable nginx.service\n  - sudo cp -v /usr/share/nginx/html/index1.html /usr/share/nginx/html/index.html\n  - sudo sed -i \"s/{hostname}/$(hostname)/g\" /usr/share/nginx/html/index.html\n  - sudo systemctl start nginx.service\n  # Set Firewall Rules\n  - sudo firewall-offline-cmd  --add-port=80/tcp\n  - sudo systemctl restart firewalld\n  # Add additional environment information because append does not appear to work in write_file\n  - sudo bash -c \"echo 'source /etc/.bashrc' >> /etc/bashrc\"\n\nfinal_message: \"**** The system is finally up, after $UPTIME seconds ****\"\n",
-      "block_storage_volume_ids": [],
-      "block_storage_volumes": [],
-      "parent_id": "okit-sn-e8536648-721d-473f-828e-e6cfaa5c59eb",
-      "subnet_ids": []
-    },
-    {
-      "subnet_id": "okit-sn-e8536648-721d-473f-828e-e6cfaa5c59eb",
-      "subnet": "nginx-public-subnet",
-      "compartment_id": "okit-comp-94636a16-5595-4a4b-b819-6aff3bee6536",
-      "availability_domain": "1",
-      "id": "okit-in-f59e4c4c-012f-45de-a81a-8772131f1df1",
-      "display_name": "nginx-in004",
-      "hostname_label": "nginx-in004",
-      "os": "Oracle Linux",
-      "version": "7.7",
-      "shape": "VM.Standard.E2.1",
-      "boot_volume_size_in_gbs": "50",
-      "authorized_keys": "",
-      "cloud_init_yaml": "#cloud-config\npackages:\n  - nginx\n  - oci-utils\n  - python36\n  - python-oci-cli\n\nwrite_files:\n  # Add aliases to bash (Note: At time of writing the append flag does not appear to be working)\n  - path: /etc/.bashrc\n    append: true\n    content: |\n      alias lh='ls -lash'\n      alias lt='ls -last'\n      alias env='/usr/bin/env | sort'\n      alias whatsmyip='curl -X GET https://www.whatismyip.net | grep ipaddress'\n  # Create nginx index.html\n  - path: /usr/share/nginx/html/index1.html\n    permissions: '0644'\n    content: |\n      <html>\n      <head>\n      <title>OCI Loadbalancer backend {hostname}</title>\n      <meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\" />\n      <meta http-equiv=\"refresh\" content=\"10\" />\n      <style>\n      body {\n      background-image: url(\"bg.jpg\");\n      background-repeat: no-repeat;\n      background-size: contain;\n      background-position: center;\n      }\n      h1 {\n      text-align: center;\n      width: 100%;\n      }\n      </style>\n      </head>\n      <body>\n      <h1>OCI Regional Subnet Loadbalancer Backend {hostname}</h1>\n      </body>\n      </html>\n\nruncmd:\n  # Enable nginx\n  - sudo systemctl enable nginx.service\n  - sudo cp -v /usr/share/nginx/html/index1.html /usr/share/nginx/html/index.html\n  - sudo sed -i \"s/{hostname}/$(hostname)/g\" /usr/share/nginx/html/index.html\n  - sudo systemctl start nginx.service\n  # Set Firewall Rules\n  - sudo firewall-offline-cmd  --add-port=80/tcp\n  - sudo systemctl restart firewalld\n  # Add additional environment information because append does not appear to work in write_file\n  - sudo bash -c \"echo 'source /etc/.bashrc' >> /etc/bashrc\"\n\nfinal_message: \"**** The system is finally up, after $UPTIME seconds ****\"\n",
-      "block_storage_volume_ids": [],
-      "block_storage_volumes": [],
-      "parent_id": "okit-sn-e8536648-721d-473f-828e-e6cfaa5c59eb",
-      "subnet_ids": []
-    }
-  ],
-  "load_balancers": [
-    {
-      "subnet_ids": [
-        "okit-sn-e8536648-721d-473f-828e-e6cfaa5c59eb"
-      ],
-      "compartment_id": "okit-comp-94636a16-5595-4a4b-b819-6aff3bee6536",
-      "id": "okit-lb-95c8b99f-3c7b-4e7a-94e8-a4622788f1fa",
-      "display_name": "nginx-lb001",
-      "is_private": false,
-      "shape_name": "100Mbps",
-      "instances": [],
-      "instance_ids": [
-        "okit-in-ee74310b-457b-4b18-b566-ae7351a17d7a",
-        "okit-in-6ce3195d-7119-4666-8966-6555874819a8",
-        "okit-in-2195d4b3-07bc-4a57-a06b-627cf69b8c46",
-        "okit-in-f59e4c4c-012f-45de-a81a-8772131f1df1"
-      ],
-      "parent_id": "okit-sn-e8536648-721d-473f-828e-e6cfaa5c59eb"
-    }
-  ],
-  "internet_gateways": [
-    {
-      "vcn_id": "okit-vcn-dcb74d63-9ae8-44c5-9913-1ba70e11d2b8",
-      "virtual_cloud_network": "nginx-vcn",
-      "compartment_id": "okit-comp-94636a16-5595-4a4b-b819-6aff3bee6536",
-      "id": "okit-ig-9b4a5d64-9346-4c7f-a97a-a0c323500224",
-      "display_name": "okit-ig001",
-      "parent_id": "okit-vcn-dcb74d63-9ae8-44c5-9913-1ba70e11d2b8"
-    }
-  ],
-  "block_storage_volumes": []
-}
\ No newline at end of file
diff --git a/okitweb/static/okit/templates/network/simple_load_balancer.json b/okitweb/static/okit/templates/network/simple_load_balancer.json
deleted file mode 100644
index 79c12fcda..000000000
--- a/okitweb/static/okit/templates/network/simple_load_balancer.json
+++ /dev/null
@@ -1,162 +0,0 @@
-{
-  "title": "Simple Load Balancer",
-  "description": "Two load balanced nginx servers",
-  "compartments": [
-    {
-      "id": "okit-comp-300c6c8c-df80-478a-8fbf-cf85ad578ae5",
-      "name": "okit",
-      "compartment_id": "okit-comp-300c6c8c-df80-478a-8fbf-cf85ad578ae5",
-      "parent_id": "canvas",
-      "display_name": "okit-comp001"
-    }
-  ],
-  "block_storage_volumes": [],
-  "dynamic_routing_gateways": [],
-  "instances": [
-    {
-      "subnet_id": "okit-sn-e723cc24-b902-474d-a2ba-26593ecb9e7c",
-      "subnet": "okit-sn001",
-      "compartment_id": "okit-comp-300c6c8c-df80-478a-8fbf-cf85ad578ae5",
-      "availability_domain": "1",
-      "id": "okit-in-7d283e87-fc07-4a23-ab0c-16990dfd857d",
-      "display_name": "okit-in001",
-      "hostname_label": "okit-in001",
-      "os": "Oracle Linux",
-      "version": "7.7",
-      "shape": "VM.Standard.E2.1",
-      "boot_volume_size_in_gbs": "50",
-      "authorized_keys": "",
-      "cloud_init_yaml": "#cloud-config\npackages:\n  - nginx\n  - oci-utils\n  - python36\n  - python-oci-cli\n\nwrite_files:\n  # Add aliases to bash (Note: At time of writing the append flag does not appear to be working)\n  - path: /etc/.bashrc\n    append: true\n    content: |\n      alias lh='ls -lash'\n      alias lt='ls -last'\n      alias env='/usr/bin/env | sort'\n      alias whatsmyip='curl -X GET https://www.whatismyip.net | grep ipaddress'\n  # Create nginx index.html\n  - path: /usr/share/nginx/html/index1.html\n    permissions: '0644'\n    content: |\n      <html>\n      <head>\n      <title>OCI Loadbalancer backend {hostname}</title>\n      <meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\" />\n      <meta http-equiv=\"refresh\" content=\"10\" />\n      <style>\n      body {\n      background-image: url(\"bg.jpg\");\n      background-repeat: no-repeat;\n      background-size: contain;\n      background-position: center;\n      }\n      h1 {\n      text-align: center;\n      width: 100%;\n      }\n      </style>\n      </head>\n      <body>\n      <h1>OCI Regional Subnet Loadbalancer Backend {hostname}</h1>\n      </body>\n      </html>\n\nruncmd:\n  # Enable nginx\n  - sudo systemctl enable nginx.service\n  - sudo cp -v /usr/share/nginx/html/index1.html /usr/share/nginx/html/index.html\n  - sudo sed -i \"s/{hostname}/$(hostname)/g\" /usr/share/nginx/html/index.html\n  - sudo systemctl start nginx.service\n  # Set Firewall Rules\n  - sudo firewall-offline-cmd  --add-port=80/tcp\n  - sudo systemctl restart firewalld\n  # Add additional environment information because append does not appear to work in write_file\n  - sudo bash -c \"echo 'source /etc/.bashrc' >> /etc/bashrc\"\n\nfinal_message: \"**** The system is finally up, after $UPTIME seconds ****\"\n",
-      "block_storage_volume_ids": [],
-      "block_storage_volumes": [],
-      "parent_id": "okit-sn-e723cc24-b902-474d-a2ba-26593ecb9e7c",
-      "virtual_cloud_network": "okit-sn001",
-      "subnet_ids": []
-    },
-    {
-      "subnet_id": "okit-sn-e723cc24-b902-474d-a2ba-26593ecb9e7c",
-      "subnet": "okit-sn001",
-      "compartment_id": "okit-comp-300c6c8c-df80-478a-8fbf-cf85ad578ae5",
-      "availability_domain": "1",
-      "id": "okit-in-407cba87-d507-4391-94bb-6fc6bef2fd8a",
-      "display_name": "okit-in002",
-      "hostname_label": "okit-in002",
-      "os": "Oracle Linux",
-      "version": "7.7",
-      "shape": "VM.Standard.E2.1",
-      "boot_volume_size_in_gbs": "50",
-      "authorized_keys": "",
-      "cloud_init_yaml": "#cloud-config\npackages:\n  - nginx\n  - oci-utils\n  - python36\n  - python-oci-cli\n\nwrite_files:\n  # Add aliases to bash (Note: At time of writing the append flag does not appear to be working)\n  - path: /etc/.bashrc\n    append: true\n    content: |\n      alias lh='ls -lash'\n      alias lt='ls -last'\n      alias env='/usr/bin/env | sort'\n      alias whatsmyip='curl -X GET https://www.whatismyip.net | grep ipaddress'\n  # Create nginx index.html\n  - path: /usr/share/nginx/html/index1.html\n    permissions: '0644'\n    content: |\n      <html>\n      <head>\n      <title>OCI Loadbalancer backend {hostname}</title>\n      <meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\" />\n      <meta http-equiv=\"refresh\" content=\"10\" />\n      <style>\n      body {\n      background-image: url(\"bg.jpg\");\n      background-repeat: no-repeat;\n      background-size: contain;\n      background-position: center;\n      }\n      h1 {\n      text-align: center;\n      width: 100%;\n      }\n      </style>\n      </head>\n      <body>\n      <h1>OCI Regional Subnet Loadbalancer Backend {hostname}</h1>\n      </body>\n      </html>\n\nruncmd:\n  # Enable nginx\n  - sudo systemctl enable nginx.service\n  - sudo cp -v /usr/share/nginx/html/index1.html /usr/share/nginx/html/index.html\n  - sudo sed -i \"s/{hostname}/$(hostname)/g\" /usr/share/nginx/html/index.html\n  - sudo systemctl start nginx.service\n  # Set Firewall Rules\n  - sudo firewall-offline-cmd  --add-port=80/tcp\n  - sudo systemctl restart firewalld\n  # Add additional environment information because append does not appear to work in write_file\n  - sudo bash -c \"echo 'source /etc/.bashrc' >> /etc/bashrc\"\n\nfinal_message: \"**** The system is finally up, after $UPTIME seconds ****\"\n",
-      "block_storage_volume_ids": [],
-      "block_storage_volumes": [],
-      "parent_id": "okit-sn-e723cc24-b902-474d-a2ba-26593ecb9e7c",
-      "virtual_cloud_network": "okit-sn001",
-      "subnet_ids": []
-    }
-  ],
-  "internet_gateways": [
-    {
-      "vcn_id": "okit-vcn-68071510-f99d-4268-9c38-c34a86c91ff7",
-      "virtual_cloud_network": "okit-vcn001",
-      "compartment_id": "okit-comp-300c6c8c-df80-478a-8fbf-cf85ad578ae5",
-      "id": "okit-ig-5942669f-a0df-4c9f-a965-de005e003260",
-      "display_name": "okit-ig001",
-      "parent_id": "okit-vcn-68071510-f99d-4268-9c38-c34a86c91ff7"
-    }
-  ],
-  "load_balancers": [
-    {
-      "subnet_ids": [
-        "okit-sn-e723cc24-b902-474d-a2ba-26593ecb9e7c"
-      ],
-      "subnets": [
-        ""
-      ],
-      "compartment_id": "okit-comp-300c6c8c-df80-478a-8fbf-cf85ad578ae5",
-      "id": "okit-lb-5ea9bb41-e81d-43ad-8517-dfc7315c85d1",
-      "display_name": "okit-lb001",
-      "is_private": false,
-      "shape_name": "100Mbps",
-      "instances": [],
-      "instance_ids": [
-        "okit-in-7d283e87-fc07-4a23-ab0c-16990dfd857d",
-        "okit-in-407cba87-d507-4391-94bb-6fc6bef2fd8a"
-      ],
-      "parent_id": "okit-sn-e723cc24-b902-474d-a2ba-26593ecb9e7c",
-      "virtual_cloud_network": "okit-sn001"
-    }
-  ],
-  "nat_gateways": [],
-  "route_tables": [
-    {
-      "vcn_id": "okit-vcn-68071510-f99d-4268-9c38-c34a86c91ff7",
-      "virtual_cloud_network": "okit-vcn001",
-      "compartment_id": "okit-comp-300c6c8c-df80-478a-8fbf-cf85ad578ae5",
-      "id": "okit-rt-364429e5-4e96-4d00-9947-878ac63c83f8",
-      "display_name": "okit-rt001",
-      "route_rules": [
-        {
-          "destination_type": "CIDR_BLOCK",
-          "destination": "0.0.0.0/0",
-          "network_entity_id": "okit-ig-5942669f-a0df-4c9f-a965-de005e003260"
-        }
-      ],
-      "parent_id": "okit-vcn-68071510-f99d-4268-9c38-c34a86c91ff7"
-    }
-  ],
-  "security_lists": [
-    {
-      "vcn_id": "okit-vcn-68071510-f99d-4268-9c38-c34a86c91ff7",
-      "virtual_cloud_network": "okit-vcn001",
-      "compartment_id": "okit-comp-300c6c8c-df80-478a-8fbf-cf85ad578ae5",
-      "id": "okit-sl-a69d1730-c85d-49df-b8db-8a6a78cd07fd",
-      "display_name": "okit-sl001",
-      "egress_security_rules": [
-        {
-          "protocol": "all",
-          "is_stateless": false,
-          "destination_type": "CIDR_BLOCK",
-          "destination": "0.0.0.0/0"
-        }
-      ],
-      "ingress_security_rules": [
-        {
-          "protocol": "all",
-          "is_stateless": false,
-          "source_type": "CIDR_BLOCK",
-          "source": "0.0.0.0/0"
-        }
-      ],
-      "parent_id": "okit-vcn-68071510-f99d-4268-9c38-c34a86c91ff7"
-    }
-  ],
-  "subnets": [
-    {
-      "vcn_id": "okit-vcn-68071510-f99d-4268-9c38-c34a86c91ff7",
-      "virtual_cloud_network": "okit-vcn001",
-      "compartment_id": "okit-comp-300c6c8c-df80-478a-8fbf-cf85ad578ae5",
-      "id": "okit-sn-e723cc24-b902-474d-a2ba-26593ecb9e7c",
-      "display_name": "okit-sn001",
-      "cidr_block": "10.0.0.0/24",
-      "dns_label": "sn001",
-      "prohibit_public_ip_on_vnic": false,
-      "route_table": "",
-      "route_table_id": "okit-rt-364429e5-4e96-4d00-9947-878ac63c83f8",
-      "security_lists": [],
-      "security_list_ids": [
-        "okit-sl-a69d1730-c85d-49df-b8db-8a6a78cd07fd"
-      ],
-      "parent_id": "okit-vcn-68071510-f99d-4268-9c38-c34a86c91ff7"
-    }
-  ],
-  "virtual_cloud_networks": [
-    {
-      "compartment_id": "okit-comp-300c6c8c-df80-478a-8fbf-cf85ad578ae5",
-      "id": "okit-vcn-68071510-f99d-4268-9c38-c34a86c91ff7",
-      "display_name": "okit-vcn001",
-      "cidr_block": "10.0.0.0/16",
-      "dns_label": "vcn001",
-      "parent_id": "okit-comp-300c6c8c-df80-478a-8fbf-cf85ad578ae5"
-    }
-  ]
-}
\ No newline at end of file
diff --git a/okitweb/static/okit/templates/reference_architecture/mysql_ha_cluster.json b/okitweb/static/okit/templates/reference_architecture/mysql_ha_cluster.json
new file mode 100644
index 000000000..2dba2514d
--- /dev/null
+++ b/okitweb/static/okit/templates/reference_architecture/mysql_ha_cluster.json
@@ -0,0 +1,1155 @@
+{
+  "autonomous_databases": [],
+  "block_storage_volumes": [],
+  "compartments": [
+    {
+      "compartment_id": "canvas",
+      "defined_tags": {},
+      "display_name": "okit-comp001",
+      "freeform_tags": {},
+      "id": "okit.compartment.260632a7-02d1-4711-8638-3505f1566fff",
+      "name": "okit-comp001"
+    }
+  ],
+  "containers": [],
+  "database_systems": [],
+  "description": "High Available MySQL Cluster",
+  "dynamic_routing_gateways": [],
+  "fast_connects": [],
+  "file_storage_systems": [],
+  "instances": [
+    {
+      "agent_config": {
+        "is_management_disabled": false,
+        "is_monitoring_disabled": false
+      },
+      "autonomous_database_ids": [],
+      "availability_domain": "1",
+      "block_storage_volume_ids": [],
+      "compartment_id": "okit.compartment.260632a7-02d1-4711-8638-3505f1566fff",
+      "defined_tags": {},
+      "display_name": "MySQL-Router1",
+      "fault_domain": "FAULT-DOMAIN-1",
+      "freeform_tags": {},
+      "id": "okit.instance.75b9407f-20ba-45d1-9d80-c2723d84ccc6",
+      "is_pv_encryption_in_transit_enabled": false,
+      "metadata": {
+        "ssh_authorized_keys": "ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAABAQDI9j/nnep+4EQhrFLBCgxw2zv8ocZ00n99As7MWQhHeE9VSi5czQcRJlNXllis0M3PzwjUOaK3edaLBR7m7i4xZXofPgK20bfEbUqdZh6hGFwmr5VYCVwta7XjBotuc5fGFYbZtSbPg9Tw3GfxTwjCm9khZle82J2wOR+n0tSxGyDrQgNgtgSI+MzZ+vcsGR0hE4f+Mp0XZM+Qo4w6Of0xIn/rIpzzA/DUUOBRlW7DQrow7JeCxTz0ixurlBLTF5B66zj3DMQT+vGX0ZJusHgH+dk9xEu8yuu+JY5qRIGCBwVQYWeTSNAbbKzj+HZceNw+CW5z/iyPHf3DlpMF5C7B claus-ulrich.dustmann@oracle.com",
+        "user_data": "#cloud-config\npackages:\n  - nginx\n  - oci-utils\n  - python36\n  - python-oci-cli\n\nwrite_files:\n  # Add aliases to bash (Note: At time of writing the append flag does not appear to be working)\n  - path: /etc/.bashrc\n    append: true\n    content: |\n      alias lh='ls -lash'\n      alias lt='ls -last'\n      alias env='/usr/bin/env | sort'\n      alias whatsmyip='curl -X GET https://www.whatismyip.net | grep ipaddress'\n  # Create nginx index.html\n  - path: /usr/share/nginx/html/index1.html\n    permissions: '0644'\n    content: |\n      <html>\n      <head>\n      <title>OCI Loadbalancer backend {hostname}</title>\n      <meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\" />\n      <meta http-equiv=\"refresh\" content=\"10\" />\n      <style>\n      body {\n      background-image: url(\"bg.jpg\");\n      background-repeat: no-repeat;\n      background-size: contain;\n      background-position: center;\n      }\n      h1 {\n      text-align: center;\n      width: 100%;\n      }\n      </style>\n      </head>\n      <body>\n      <h1>OCI Regional Subnet Loadbalancer Backend {hostname}</h1>\n      </body>\n      </html>\n\nruncmd:\n  # Enable nginx\n  - sudo systemctl enable nginx.service\n  - sudo cp -v /usr/share/nginx/html/index1.html /usr/share/nginx/html/index.html\n  - sudo sed -i \"s/{hostname}/$(hostname)/g\" /usr/share/nginx/html/index.html\n  - sudo systemctl start nginx.service\n  # Set Firewall Rules\n  - sudo firewall-offline-cmd  --add-port=80/tcp\n  - sudo systemctl restart firewalld\n  # Add additional environment information because append does not appear to work in write_file\n  - sudo bash -c \"echo 'source /etc/.bashrc' >> /etc/bashrc\"\n\nfinal_message: \"**** The system is finally up, after $UPTIME seconds ****\"\n"
+      },
+      "name": "MySQL-Router1",
+      "object_storage_bucket_ids": [],
+      "preserve_boot_volume": false,
+      "primary_vnic": {
+        "assign_public_ip": true,
+        "hostname_label": "router1",
+        "nsg_ids": [],
+        "skip_source_dest_check": false,
+        "subnet_id": "okit.subnet.88a1684f-959f-4f71-9de6-5915dea44eb8"
+      },
+      "shape": "VM.Standard.E2.1",
+      "source_details": {
+        "boot_volume_size_in_gbs": "50",
+        "os": "Oracle Linux",
+        "source_type": "image",
+        "version": "7.8"
+      },
+      "title": "Instance",
+      "vnics": [
+        {
+          "assign_public_ip": true,
+          "hostname_label": "router1",
+          "nsg_ids": [],
+          "skip_source_dest_check": false,
+          "subnet_id": "okit.subnet.88a1684f-959f-4f71-9de6-5915dea44eb8"
+        }
+      ]
+    },
+    {
+      "agent_config": {
+        "is_management_disabled": false,
+        "is_monitoring_disabled": false
+      },
+      "autonomous_database_ids": [],
+      "availability_domain": "1",
+      "block_storage_volume_ids": [],
+      "compartment_id": "okit.compartment.260632a7-02d1-4711-8638-3505f1566fff",
+      "defined_tags": {},
+      "display_name": "MySQL-Router2",
+      "fault_domain": "FAULT-DOMAIN-2",
+      "freeform_tags": {},
+      "id": "okit.instance.44c54266-dc53-4a13-82ab-dcfb75fbac51",
+      "is_pv_encryption_in_transit_enabled": false,
+      "metadata": {
+        "ssh_authorized_keys": "ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAABAQDI9j/nnep+4EQhrFLBCgxw2zv8ocZ00n99As7MWQhHeE9VSi5czQcRJlNXllis0M3PzwjUOaK3edaLBR7m7i4xZXofPgK20bfEbUqdZh6hGFwmr5VYCVwta7XjBotuc5fGFYbZtSbPg9Tw3GfxTwjCm9khZle82J2wOR+n0tSxGyDrQgNgtgSI+MzZ+vcsGR0hE4f+Mp0XZM+Qo4w6Of0xIn/rIpzzA/DUUOBRlW7DQrow7JeCxTz0ixurlBLTF5B66zj3DMQT+vGX0ZJusHgH+dk9xEu8yuu+JY5qRIGCBwVQYWeTSNAbbKzj+HZceNw+CW5z/iyPHf3DlpMF5C7B claus-ulrich.dustmann@oracle.com",
+        "user_data": "#cloud-config\npackages:\n  - nginx\n  - oci-utils\n  - python36\n  - python-oci-cli\n\nwrite_files:\n  # Add aliases to bash (Note: At time of writing the append flag does not appear to be working)\n  - path: /etc/.bashrc\n    append: true\n    content: |\n      alias lh='ls -lash'\n      alias lt='ls -last'\n      alias env='/usr/bin/env | sort'\n      alias whatsmyip='curl -X GET https://www.whatismyip.net | grep ipaddress'\n  # Create nginx index.html\n  - path: /usr/share/nginx/html/index1.html\n    permissions: '0644'\n    content: |\n      <html>\n      <head>\n      <title>OCI Loadbalancer backend {hostname}</title>\n      <meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\" />\n      <meta http-equiv=\"refresh\" content=\"10\" />\n      <style>\n      body {\n      background-image: url(\"bg.jpg\");\n      background-repeat: no-repeat;\n      background-size: contain;\n      background-position: center;\n      }\n      h1 {\n      text-align: center;\n      width: 100%;\n      }\n      </style>\n      </head>\n      <body>\n      <h1>OCI Regional Subnet Loadbalancer Backend {hostname}</h1>\n      </body>\n      </html>\n\nruncmd:\n  # Enable nginx\n  - sudo systemctl enable nginx.service\n  - sudo cp -v /usr/share/nginx/html/index1.html /usr/share/nginx/html/index.html\n  - sudo sed -i \"s/{hostname}/$(hostname)/g\" /usr/share/nginx/html/index.html\n  - sudo systemctl start nginx.service\n  # Set Firewall Rules\n  - sudo firewall-offline-cmd  --add-port=80/tcp\n  - sudo systemctl restart firewalld\n  # Add additional environment information because append does not appear to work in write_file\n  - sudo bash -c \"echo 'source /etc/.bashrc' >> /etc/bashrc\"\n\nfinal_message: \"**** The system is finally up, after $UPTIME seconds ****\"\n"
+      },
+      "name": "MySQL-Router2",
+      "object_storage_bucket_ids": [],
+      "preserve_boot_volume": false,
+      "primary_vnic": {
+        "assign_public_ip": true,
+        "hostname_label": "router2",
+        "nsg_ids": [],
+        "skip_source_dest_check": false,
+        "subnet_id": "okit.subnet.88a1684f-959f-4f71-9de6-5915dea44eb8"
+      },
+      "shape": "VM.Standard.E2.1",
+      "source_details": {
+        "boot_volume_size_in_gbs": "50",
+        "os": "Oracle Linux",
+        "source_type": "image",
+        "version": "7.8"
+      },
+      "title": "Instance",
+      "vnics": [
+        {
+          "assign_public_ip": true,
+          "hostname_label": "router2",
+          "nsg_ids": [],
+          "skip_source_dest_check": false,
+          "subnet_id": "okit.subnet.88a1684f-959f-4f71-9de6-5915dea44eb8"
+        }
+      ]
+    },
+    {
+      "agent_config": {
+        "is_management_disabled": false,
+        "is_monitoring_disabled": false
+      },
+      "autonomous_database_ids": [],
+      "availability_domain": "1",
+      "block_storage_volume_ids": [],
+      "compartment_id": "okit.compartment.260632a7-02d1-4711-8638-3505f1566fff",
+      "defined_tags": {},
+      "display_name": "MySQL-Router3",
+      "fault_domain": "FAULT-DOMAIN-3",
+      "freeform_tags": {},
+      "id": "okit.instance.50acedbf-d222-4941-a6ed-c4f4acdc2102",
+      "is_pv_encryption_in_transit_enabled": false,
+      "metadata": {
+        "ssh_authorized_keys": "ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAABAQDI9j/nnep+4EQhrFLBCgxw2zv8ocZ00n99As7MWQhHeE9VSi5czQcRJlNXllis0M3PzwjUOaK3edaLBR7m7i4xZXofPgK20bfEbUqdZh6hGFwmr5VYCVwta7XjBotuc5fGFYbZtSbPg9Tw3GfxTwjCm9khZle82J2wOR+n0tSxGyDrQgNgtgSI+MzZ+vcsGR0hE4f+Mp0XZM+Qo4w6Of0xIn/rIpzzA/DUUOBRlW7DQrow7JeCxTz0ixurlBLTF5B66zj3DMQT+vGX0ZJusHgH+dk9xEu8yuu+JY5qRIGCBwVQYWeTSNAbbKzj+HZceNw+CW5z/iyPHf3DlpMF5C7B claus-ulrich.dustmann@oracle.com",
+        "user_data": "#cloud-config\npackages:\n  - nginx\n  - oci-utils\n  - python36\n  - python-oci-cli\n\nwrite_files:\n  # Add aliases to bash (Note: At time of writing the append flag does not appear to be working)\n  - path: /etc/.bashrc\n    append: true\n    content: |\n      alias lh='ls -lash'\n      alias lt='ls -last'\n      alias env='/usr/bin/env | sort'\n      alias whatsmyip='curl -X GET https://www.whatismyip.net | grep ipaddress'\n  # Create nginx index.html\n  - path: /usr/share/nginx/html/index1.html\n    permissions: '0644'\n    content: |\n      <html>\n      <head>\n      <title>OCI Loadbalancer backend {hostname}</title>\n      <meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\" />\n      <meta http-equiv=\"refresh\" content=\"10\" />\n      <style>\n      body {\n      background-image: url(\"bg.jpg\");\n      background-repeat: no-repeat;\n      background-size: contain;\n      background-position: center;\n      }\n      h1 {\n      text-align: center;\n      width: 100%;\n      }\n      </style>\n      </head>\n      <body>\n      <h1>OCI Regional Subnet Loadbalancer Backend {hostname}</h1>\n      </body>\n      </html>\n\nruncmd:\n  # Enable nginx\n  - sudo systemctl enable nginx.service\n  - sudo cp -v /usr/share/nginx/html/index1.html /usr/share/nginx/html/index.html\n  - sudo sed -i \"s/{hostname}/$(hostname)/g\" /usr/share/nginx/html/index.html\n  - sudo systemctl start nginx.service\n  # Set Firewall Rules\n  - sudo firewall-offline-cmd  --add-port=80/tcp\n  - sudo systemctl restart firewalld\n  # Add additional environment information because append does not appear to work in write_file\n  - sudo bash -c \"echo 'source /etc/.bashrc' >> /etc/bashrc\"\n\nfinal_message: \"**** The system is finally up, after $UPTIME seconds ****\"\n"
+      },
+      "name": "MySQL-Router3",
+      "object_storage_bucket_ids": [],
+      "preserve_boot_volume": false,
+      "primary_vnic": {
+        "assign_public_ip": true,
+        "hostname_label": "router3",
+        "nsg_ids": [],
+        "skip_source_dest_check": false,
+        "subnet_id": "okit.subnet.88a1684f-959f-4f71-9de6-5915dea44eb8"
+      },
+      "shape": "VM.Standard.E2.1",
+      "source_details": {
+        "boot_volume_size_in_gbs": "50",
+        "os": "Oracle Linux",
+        "source_type": "image",
+        "version": "7.8"
+      },
+      "title": "Instance",
+      "vnics": [
+        {
+          "assign_public_ip": true,
+          "hostname_label": "router3",
+          "nsg_ids": [],
+          "skip_source_dest_check": false,
+          "subnet_id": "okit.subnet.88a1684f-959f-4f71-9de6-5915dea44eb8"
+        }
+      ]
+    },
+    {
+      "agent_config": {
+        "is_management_disabled": false,
+        "is_monitoring_disabled": false
+      },
+      "autonomous_database_ids": [],
+      "availability_domain": "1",
+      "block_storage_volume_ids": [],
+      "compartment_id": "okit.compartment.260632a7-02d1-4711-8638-3505f1566fff",
+      "defined_tags": {},
+      "display_name": "Bastion",
+      "fault_domain": "",
+      "freeform_tags": {},
+      "id": "okit.instance.0bd801b4-91aa-41d3-9973-2f1b29fb5e2c",
+      "is_pv_encryption_in_transit_enabled": false,
+      "metadata": {
+        "ssh_authorized_keys": "ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAABAQDI9j/nnep+4EQhrFLBCgxw2zv8ocZ00n99As7MWQhHeE9VSi5czQcRJlNXllis0M3PzwjUOaK3edaLBR7m7i4xZXofPgK20bfEbUqdZh6hGFwmr5VYCVwta7XjBotuc5fGFYbZtSbPg9Tw3GfxTwjCm9khZle82J2wOR+n0tSxGyDrQgNgtgSI+MzZ+vcsGR0hE4f+Mp0XZM+Qo4w6Of0xIn/rIpzzA/DUUOBRlW7DQrow7JeCxTz0ixurlBLTF5B66zj3DMQT+vGX0ZJusHgH+dk9xEu8yuu+JY5qRIGCBwVQYWeTSNAbbKzj+HZceNw+CW5z/iyPHf3DlpMF5C7B claus-ulrich.dustmann@oracle.com",
+        "user_data": ""
+      },
+      "name": "Bastion",
+      "object_storage_bucket_ids": [],
+      "preserve_boot_volume": false,
+      "primary_vnic": {
+        "assign_public_ip": true,
+        "hostname_label": "bastion",
+        "nsg_ids": [],
+        "skip_source_dest_check": false,
+        "subnet_id": "okit.subnet.7253a8ff-4812-44fa-885e-1e8acefffcdf"
+      },
+      "shape": "VM.Standard.E2.1",
+      "source_details": {
+        "boot_volume_size_in_gbs": "50",
+        "os": "Oracle Linux",
+        "source_type": "image",
+        "version": "7.8"
+      },
+      "title": "Instance",
+      "vnics": [
+        {
+          "assign_public_ip": true,
+          "hostname_label": "bastion",
+          "nsg_ids": [],
+          "skip_source_dest_check": false,
+          "subnet_id": "okit.subnet.7253a8ff-4812-44fa-885e-1e8acefffcdf"
+        }
+      ]
+    },
+    {
+      "agent_config": {
+        "is_management_disabled": false,
+        "is_monitoring_disabled": false
+      },
+      "autonomous_database_ids": [],
+      "availability_domain": "1",
+      "block_storage_volume_ids": [],
+      "compartment_id": "okit.compartment.260632a7-02d1-4711-8638-3505f1566fff",
+      "defined_tags": {},
+      "display_name": "MySQL-Node1",
+      "fault_domain": "FAULT-DOMAIN-1",
+      "freeform_tags": {},
+      "id": "okit.instance.806eed4f-0ada-44b9-9d10-633c3519983f",
+      "is_pv_encryption_in_transit_enabled": false,
+      "metadata": {
+        "ssh_authorized_keys": "ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAABAQDI9j/nnep+4EQhrFLBCgxw2zv8ocZ00n99As7MWQhHeE9VSi5czQcRJlNXllis0M3PzwjUOaK3edaLBR7m7i4xZXofPgK20bfEbUqdZh6hGFwmr5VYCVwta7XjBotuc5fGFYbZtSbPg9Tw3GfxTwjCm9khZle82J2wOR+n0tSxGyDrQgNgtgSI+MzZ+vcsGR0hE4f+Mp0XZM+Qo4w6Of0xIn/rIpzzA/DUUOBRlW7DQrow7JeCxTz0ixurlBLTF5B66zj3DMQT+vGX0ZJusHgH+dk9xEu8yuu+JY5qRIGCBwVQYWeTSNAbbKzj+HZceNw+CW5z/iyPHf3DlpMF5C7B claus-ulrich.dustmann@oracle.com",
+        "user_data": ""
+      },
+      "name": "MySQL-Node1",
+      "object_storage_bucket_ids": [],
+      "preserve_boot_volume": false,
+      "primary_vnic": {
+        "assign_public_ip": true,
+        "hostname_label": "clusternode1",
+        "nsg_ids": [],
+        "skip_source_dest_check": false,
+        "subnet_id": "okit.subnet.63ee51d9-5da4-4472-a55d-69214ba4e90c"
+      },
+      "shape": "VM.Standard.E2.1",
+      "source_details": {
+        "boot_volume_size_in_gbs": "50",
+        "os": "Oracle Linux",
+        "source_type": "image",
+        "version": "7.8"
+      },
+      "title": "Instance",
+      "vnics": [
+        {
+          "assign_public_ip": true,
+          "hostname_label": "clusternode1",
+          "nsg_ids": [],
+          "skip_source_dest_check": false,
+          "subnet_id": "okit.subnet.63ee51d9-5da4-4472-a55d-69214ba4e90c"
+        }
+      ]
+    },
+    {
+      "agent_config": {
+        "is_management_disabled": false,
+        "is_monitoring_disabled": false
+      },
+      "autonomous_database_ids": [],
+      "availability_domain": "1",
+      "block_storage_volume_ids": [],
+      "compartment_id": "okit.compartment.260632a7-02d1-4711-8638-3505f1566fff",
+      "defined_tags": {},
+      "display_name": "MySQL-Node2",
+      "fault_domain": "FAULT-DOMAIN-2",
+      "freeform_tags": {},
+      "id": "okit.instance.309769a2-99e8-472c-b339-662610b57a04",
+      "is_pv_encryption_in_transit_enabled": false,
+      "metadata": {
+        "ssh_authorized_keys": "ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAABAQDI9j/nnep+4EQhrFLBCgxw2zv8ocZ00n99As7MWQhHeE9VSi5czQcRJlNXllis0M3PzwjUOaK3edaLBR7m7i4xZXofPgK20bfEbUqdZh6hGFwmr5VYCVwta7XjBotuc5fGFYbZtSbPg9Tw3GfxTwjCm9khZle82J2wOR+n0tSxGyDrQgNgtgSI+MzZ+vcsGR0hE4f+Mp0XZM+Qo4w6Of0xIn/rIpzzA/DUUOBRlW7DQrow7JeCxTz0ixurlBLTF5B66zj3DMQT+vGX0ZJusHgH+dk9xEu8yuu+JY5qRIGCBwVQYWeTSNAbbKzj+HZceNw+CW5z/iyPHf3DlpMF5C7B claus-ulrich.dustmann@oracle.com",
+        "user_data": ""
+      },
+      "name": "MySQL-Node2",
+      "object_storage_bucket_ids": [],
+      "preserve_boot_volume": false,
+      "primary_vnic": {
+        "assign_public_ip": true,
+        "hostname_label": "clusternode2",
+        "nsg_ids": [],
+        "skip_source_dest_check": false,
+        "subnet_id": "okit.subnet.63ee51d9-5da4-4472-a55d-69214ba4e90c"
+      },
+      "shape": "VM.Standard.E2.1",
+      "source_details": {
+        "boot_volume_size_in_gbs": "50",
+        "os": "Oracle Linux",
+        "source_type": "image",
+        "version": "7.8"
+      },
+      "title": "Instance",
+      "vnics": [
+        {
+          "assign_public_ip": true,
+          "hostname_label": "clusternode2",
+          "nsg_ids": [],
+          "skip_source_dest_check": false,
+          "subnet_id": "okit.subnet.63ee51d9-5da4-4472-a55d-69214ba4e90c"
+        }
+      ]
+    },
+    {
+      "agent_config": {
+        "is_management_disabled": false,
+        "is_monitoring_disabled": false
+      },
+      "autonomous_database_ids": [],
+      "availability_domain": "1",
+      "block_storage_volume_ids": [],
+      "compartment_id": "okit.compartment.260632a7-02d1-4711-8638-3505f1566fff",
+      "defined_tags": {},
+      "display_name": "MySQL-Node3",
+      "fault_domain": "FAULT-DOMAIN-3",
+      "freeform_tags": {},
+      "id": "okit.instance.ef7ec74b-d156-4b71-9da3-a8a07e19f749",
+      "is_pv_encryption_in_transit_enabled": false,
+      "metadata": {
+        "ssh_authorized_keys": "ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAABAQDI9j/nnep+4EQhrFLBCgxw2zv8ocZ00n99As7MWQhHeE9VSi5czQcRJlNXllis0M3PzwjUOaK3edaLBR7m7i4xZXofPgK20bfEbUqdZh6hGFwmr5VYCVwta7XjBotuc5fGFYbZtSbPg9Tw3GfxTwjCm9khZle82J2wOR+n0tSxGyDrQgNgtgSI+MzZ+vcsGR0hE4f+Mp0XZM+Qo4w6Of0xIn/rIpzzA/DUUOBRlW7DQrow7JeCxTz0ixurlBLTF5B66zj3DMQT+vGX0ZJusHgH+dk9xEu8yuu+JY5qRIGCBwVQYWeTSNAbbKzj+HZceNw+CW5z/iyPHf3DlpMF5C7B claus-ulrich.dustmann@oracle.com",
+        "user_data": ""
+      },
+      "name": "MySQL-Node3",
+      "object_storage_bucket_ids": [],
+      "preserve_boot_volume": false,
+      "primary_vnic": {
+        "assign_public_ip": true,
+        "hostname_label": "clusternode3",
+        "nsg_ids": [],
+        "skip_source_dest_check": false,
+        "subnet_id": "okit.subnet.63ee51d9-5da4-4472-a55d-69214ba4e90c"
+      },
+      "shape": "VM.Standard.E2.1",
+      "source_details": {
+        "boot_volume_size_in_gbs": "50",
+        "os": "Oracle Linux",
+        "source_type": "image",
+        "version": "7.8"
+      },
+      "title": "Instance",
+      "vnics": [
+        {
+          "assign_public_ip": true,
+          "hostname_label": "clusternode3",
+          "nsg_ids": [],
+          "skip_source_dest_check": false,
+          "subnet_id": "okit.subnet.63ee51d9-5da4-4472-a55d-69214ba4e90c"
+        }
+      ]
+    }
+  ],
+  "internet_gateways": [
+    {
+      "compartment_id": "okit.compartment.260632a7-02d1-4711-8638-3505f1566fff",
+      "defined_tags": {},
+      "display_name": "okit-ig001",
+      "enabled": true,
+      "freeform_tags": {},
+      "id": "okit.internetgateway.b22d462e-e806-4357-b680-cd9b2c846537",
+      "title": "Internet Gateway",
+      "vcn_id": "okit.virtualcloudnetwork.f6569908-75e9-4e5a-9d8c-2499e02df819"
+    }
+  ],
+  "load_balancers": [
+    {
+      "backend_policy": "ROUND_ROBIN",
+      "compartment_id": "okit.compartment.260632a7-02d1-4711-8638-3505f1566fff",
+      "defined_tags": {},
+      "display_name": "okit-lb001",
+      "freeform_tags": {},
+      "health_checker": {
+        "url_path": "/"
+      },
+      "id": "okit.loadbalancer.f6ca3491-bb2b-4b04-bab1-c535f161bdba",
+      "instance_ids": [
+        "okit.instance.75b9407f-20ba-45d1-9d80-c2723d84ccc6",
+        "okit.instance.44c54266-dc53-4a13-82ab-dcfb75fbac51",
+        "okit.instance.50acedbf-d222-4941-a6ed-c4f4acdc2102"
+      ],
+      "ip_mode": "",
+      "is_private": false,
+      "network_security_group_ids": [],
+      "parent_id": "okit.subnet.7253a8ff-4812-44fa-885e-1e8acefffcdf",
+      "port": "80",
+      "protocol": "HTTP",
+      "shape": "100Mbps",
+      "subnet_ids": [
+        "okit.subnet.7253a8ff-4812-44fa-885e-1e8acefffcdf"
+      ],
+      "title": "Load Balancer"
+    }
+  ],
+  "local_peering_gateways": [],
+  "nat_gateways": [
+    {
+      "block_traffic": false,
+      "compartment_id": "okit.compartment.260632a7-02d1-4711-8638-3505f1566fff",
+      "defined_tags": {},
+      "display_name": "okit-ng001",
+      "freeform_tags": {},
+      "id": "okit.natgateway.3115a387-218c-42d1-888a-b39fd17b7907",
+      "title": "NAT Gateway",
+      "vcn_id": "okit.virtualcloudnetwork.f6569908-75e9-4e5a-9d8c-2499e02df819"
+    }
+  ],
+  "network_security_groups": [],
+  "object_storage_buckets": [
+    {
+      "compartment_id": "okit.compartment.260632a7-02d1-4711-8638-3505f1566fff",
+      "defined_tags": {},
+      "display_name": "okit-osb001",
+      "freeform_tags": {},
+      "id": "okit.objectstoragebucket.5a69bdb2-e4d7-4661-ba43-5b04fcebef0d",
+      "name": "okit-osb001",
+      "namespace": "Tenancy Name",
+      "public_access_type": "NoPublicAccess",
+      "storage_tier": "Standard",
+      "title": "Object Storage Bucket"
+    }
+  ],
+  "okit_version": "0.9.0",
+  "remote_peering_gateways": [],
+  "route_tables": [
+    {
+      "compartment_id": "okit.compartment.260632a7-02d1-4711-8638-3505f1566fff",
+      "defined_tags": {},
+      "display_name": "okit-rt001",
+      "freeform_tags": {},
+      "id": "okit.routetable.27564071-b6d4-4788-ae4c-000c766065a4",
+      "route_rules": [
+        {
+          "description": "",
+          "destination": "0.0.0.0/0",
+          "destination_type": "CIDR_BLOCK",
+          "network_entity_id": "okit.internetgateway.b22d462e-e806-4357-b680-cd9b2c846537",
+          "target_type": "internet_gateways"
+        }
+      ],
+      "vcn_id": "okit.virtualcloudnetwork.f6569908-75e9-4e5a-9d8c-2499e02df819"
+    },
+    {
+      "compartment_id": "okit.compartment.260632a7-02d1-4711-8638-3505f1566fff",
+      "defined_tags": {},
+      "display_name": "okit-rt002",
+      "freeform_tags": {},
+      "id": "okit.routetable.57a2b64b-c25c-4c5e-a027-c50ec68a1fe3",
+      "route_rules": [
+        {
+          "description": "",
+          "destination": "0.0.0.0/0",
+          "destination_type": "CIDR_BLOCK",
+          "network_entity_id": "okit.natgateway.3115a387-218c-42d1-888a-b39fd17b7907",
+          "target_type": "nat_gateways"
+        }
+      ],
+      "title": "Route Table",
+      "vcn_id": "okit.virtualcloudnetwork.f6569908-75e9-4e5a-9d8c-2499e02df819"
+    },
+    {
+      "compartment_id": "okit.compartment.260632a7-02d1-4711-8638-3505f1566fff",
+      "defined_tags": {},
+      "display_name": "okit-rt003",
+      "freeform_tags": {},
+      "id": "okit.routetable.42d24bf4-01b1-430a-9bc5-d5895f2bfb47",
+      "route_rules": [
+        {
+          "description": "",
+          "destination": "0.0.0.0/0",
+          "destination_type": "CIDR_BLOCK",
+          "network_entity_id": "okit.natgateway.3115a387-218c-42d1-888a-b39fd17b7907",
+          "target_type": "nat_gateways"
+        },
+        {
+          "description": "",
+          "destination": "0.0.0.0/0",
+          "destination_type": "SERVICE_CIDR_BLOCK",
+          "network_entity_id": "okit.servicegateway.982dd5c1-50b8-4bb9-9e8f-4a5f9b34c45e",
+          "target_type": "service_gateways"
+        }
+      ],
+      "title": "Route Table",
+      "vcn_id": "okit.virtualcloudnetwork.f6569908-75e9-4e5a-9d8c-2499e02df819"
+    },
+    {
+      "compartment_id": "okit.compartment.260632a7-02d1-4711-8638-3505f1566fff",
+      "defined_tags": {},
+      "display_name": "okit-rt004",
+      "freeform_tags": {},
+      "id": "okit.routetable.0fa1754b-befa-48ce-9e4d-e45a5e82d460",
+      "route_rules": [],
+      "vcn_id": "okit.virtualcloudnetwork.f6569908-75e9-4e5a-9d8c-2499e02df819"
+    }
+  ],
+  "security_lists": [
+    {
+      "compartment_id": "okit.compartment.260632a7-02d1-4711-8638-3505f1566fff",
+      "defined_tags": {},
+      "display_name": "okit-sl001",
+      "egress_security_rules": [
+        {
+          "description": "",
+          "destination": "0.0.0.0/0",
+          "destination_type": "CIDR_BLOCK",
+          "icmp_options": {
+            "code": "",
+            "type": ""
+          },
+          "is_stateless": false,
+          "protocol": "all",
+          "tcp_options": {
+            "destination_port_range": {
+              "max": "",
+              "min": ""
+            },
+            "source_port_range": {
+              "max": "",
+              "min": ""
+            }
+          },
+          "udp_options": {
+            "destination_port_range": {
+              "max": "",
+              "min": ""
+            },
+            "source_port_range": {
+              "max": "",
+              "min": ""
+            }
+          }
+        }
+      ],
+      "freeform_tags": {},
+      "id": "okit.securitylist.533a649d-11a9-43b5-af79-bf698661d8c1",
+      "ingress_security_rules": [
+        {
+          "description": "",
+          "icmp_options": {
+            "code": "",
+            "type": ""
+          },
+          "is_stateless": false,
+          "protocol": "6",
+          "source": "0.0.0.0/0",
+          "source_type": "CIDR_BLOCK",
+          "tcp_options": {
+            "destination_port_range": {
+              "max": 22,
+              "min": 22
+            },
+            "source_port_range": {
+              "max": "",
+              "min": ""
+            }
+          },
+          "udp_options": {
+            "destination_port_range": {
+              "max": "",
+              "min": ""
+            },
+            "source_port_range": {
+              "max": "",
+              "min": ""
+            }
+          }
+        },
+        {
+          "description": "",
+          "icmp_options": {
+            "code": 4,
+            "type": 3
+          },
+          "is_stateless": false,
+          "protocol": "1",
+          "source": "0.0.0.0/0",
+          "source_type": "CIDR_BLOCK",
+          "tcp_options": {
+            "destination_port_range": {
+              "max": "",
+              "min": ""
+            },
+            "source_port_range": {
+              "max": "",
+              "min": ""
+            }
+          },
+          "udp_options": {
+            "destination_port_range": {
+              "max": "",
+              "min": ""
+            },
+            "source_port_range": {
+              "max": "",
+              "min": ""
+            }
+          }
+        },
+        {
+          "description": "",
+          "icmp_options": {
+            "code": null,
+            "type": 3
+          },
+          "is_stateless": false,
+          "protocol": "1",
+          "source": "10.0.0.0/16",
+          "source_type": "CIDR_BLOCK",
+          "tcp_options": {
+            "destination_port_range": {
+              "max": "",
+              "min": ""
+            },
+            "source_port_range": {
+              "max": "",
+              "min": ""
+            }
+          },
+          "udp_options": {
+            "destination_port_range": {
+              "max": "",
+              "min": ""
+            },
+            "source_port_range": {
+              "max": "",
+              "min": ""
+            }
+          }
+        },
+        {
+          "description": "",
+          "icmp_options": {
+            "code": "",
+            "type": ""
+          },
+          "is_stateless": false,
+          "protocol": "6",
+          "source": "0.0.0.0/0",
+          "source_type": "CIDR_BLOCK",
+          "tcp_options": {
+            "destination_port_range": {
+              "max": "80",
+              "min": "80"
+            },
+            "source_port_range": {
+              "max": "",
+              "min": ""
+            }
+          },
+          "udp_options": {
+            "destination_port_range": {
+              "max": "",
+              "min": ""
+            },
+            "source_port_range": {
+              "max": "",
+              "min": ""
+            }
+          }
+        }
+      ],
+      "vcn_id": "okit.virtualcloudnetwork.f6569908-75e9-4e5a-9d8c-2499e02df819"
+    },
+    {
+      "compartment_id": "okit.compartment.260632a7-02d1-4711-8638-3505f1566fff",
+      "defined_tags": {},
+      "display_name": "okit-sl002",
+      "egress_security_rules": [
+        {
+          "description": "",
+          "destination": "0.0.0.0/0",
+          "destination_type": "CIDR_BLOCK",
+          "icmp_options": {
+            "code": "",
+            "type": ""
+          },
+          "is_stateless": false,
+          "protocol": "all",
+          "tcp_options": {
+            "destination_port_range": {
+              "max": "",
+              "min": ""
+            },
+            "source_port_range": {
+              "max": "",
+              "min": ""
+            }
+          },
+          "udp_options": {
+            "destination_port_range": {
+              "max": "",
+              "min": ""
+            },
+            "source_port_range": {
+              "max": "",
+              "min": ""
+            }
+          }
+        }
+      ],
+      "freeform_tags": {},
+      "id": "okit.securitylist.699cdd95-a5dc-40a5-a459-2e19d8333cc4",
+      "ingress_security_rules": [
+        {
+          "description": "",
+          "icmp_options": {
+            "code": "",
+            "type": ""
+          },
+          "is_stateless": false,
+          "protocol": "6",
+          "source": "10.0.0.0/16",
+          "source_type": "CIDR_BLOCK",
+          "tcp_options": {
+            "destination_port_range": {
+              "max": "22",
+              "min": "22"
+            },
+            "source_port_range": {
+              "max": "",
+              "min": ""
+            }
+          },
+          "udp_options": {
+            "destination_port_range": {
+              "max": "",
+              "min": ""
+            },
+            "source_port_range": {
+              "max": "",
+              "min": ""
+            }
+          }
+        },
+        {
+          "description": "",
+          "icmp_options": {
+            "code": "",
+            "type": ""
+          },
+          "is_stateless": false,
+          "protocol": "6",
+          "source": "10.0.0.0/16",
+          "source_type": "CIDR_BLOCK",
+          "tcp_options": {
+            "destination_port_range": {
+              "max": "80",
+              "min": "80"
+            },
+            "source_port_range": {
+              "max": "",
+              "min": ""
+            }
+          },
+          "udp_options": {
+            "destination_port_range": {
+              "max": "",
+              "min": ""
+            },
+            "source_port_range": {
+              "max": "",
+              "min": ""
+            }
+          }
+        }
+      ],
+      "title": "Security List",
+      "vcn_id": "okit.virtualcloudnetwork.f6569908-75e9-4e5a-9d8c-2499e02df819"
+    },
+    {
+      "compartment_id": "okit.compartment.260632a7-02d1-4711-8638-3505f1566fff",
+      "defined_tags": {},
+      "display_name": "okit-sl003",
+      "egress_security_rules": [
+        {
+          "description": "",
+          "destination": "0.0.0.0/0",
+          "destination_type": "CIDR_BLOCK",
+          "icmp_options": {
+            "code": "",
+            "type": ""
+          },
+          "is_stateless": false,
+          "protocol": "all",
+          "tcp_options": {
+            "destination_port_range": {
+              "max": "",
+              "min": ""
+            },
+            "source_port_range": {
+              "max": "",
+              "min": ""
+            }
+          },
+          "udp_options": {
+            "destination_port_range": {
+              "max": "",
+              "min": ""
+            },
+            "source_port_range": {
+              "max": "",
+              "min": ""
+            }
+          }
+        }
+      ],
+      "freeform_tags": {},
+      "id": "okit.securitylist.51af672c-7270-4b68-90c0-dd15b50d9a50",
+      "ingress_security_rules": [
+        {
+          "description": "",
+          "icmp_options": {
+            "code": "",
+            "type": ""
+          },
+          "is_stateless": false,
+          "protocol": "6",
+          "source": "0.0.0.0/0",
+          "source_type": "CIDR_BLOCK",
+          "tcp_options": {
+            "destination_port_range": {
+              "max": 22,
+              "min": 22
+            },
+            "source_port_range": {
+              "max": "",
+              "min": ""
+            }
+          },
+          "udp_options": {
+            "destination_port_range": {
+              "max": "",
+              "min": ""
+            },
+            "source_port_range": {
+              "max": "",
+              "min": ""
+            }
+          }
+        },
+        {
+          "description": "",
+          "icmp_options": {
+            "code": 4,
+            "type": 3
+          },
+          "is_stateless": false,
+          "protocol": "1",
+          "source": "0.0.0.0/0",
+          "source_type": "CIDR_BLOCK",
+          "tcp_options": {
+            "destination_port_range": {
+              "max": "",
+              "min": ""
+            },
+            "source_port_range": {
+              "max": "",
+              "min": ""
+            }
+          },
+          "udp_options": {
+            "destination_port_range": {
+              "max": "",
+              "min": ""
+            },
+            "source_port_range": {
+              "max": "",
+              "min": ""
+            }
+          }
+        },
+        {
+          "description": "",
+          "icmp_options": {
+            "code": null,
+            "type": 3
+          },
+          "is_stateless": false,
+          "protocol": "1",
+          "source": "10.0.0.0/16",
+          "source_type": "CIDR_BLOCK",
+          "tcp_options": {
+            "destination_port_range": {
+              "max": "",
+              "min": ""
+            },
+            "source_port_range": {
+              "max": "",
+              "min": ""
+            }
+          },
+          "udp_options": {
+            "destination_port_range": {
+              "max": "",
+              "min": ""
+            },
+            "source_port_range": {
+              "max": "",
+              "min": ""
+            }
+          }
+        },
+        {
+          "description": "",
+          "icmp_options": {
+            "code": "",
+            "type": ""
+          },
+          "is_stateless": false,
+          "protocol": "6",
+          "source": "10.0.0.0/16",
+          "source_type": "CIDR_BLOCK",
+          "tcp_options": {
+            "destination_port_range": {
+              "max": "3306",
+              "min": "3306"
+            },
+            "source_port_range": {
+              "max": "",
+              "min": ""
+            }
+          },
+          "udp_options": {
+            "destination_port_range": {
+              "max": "",
+              "min": ""
+            },
+            "source_port_range": {
+              "max": "",
+              "min": ""
+            }
+          }
+        },
+        {
+          "description": "",
+          "icmp_options": {
+            "code": "",
+            "type": ""
+          },
+          "is_stateless": false,
+          "protocol": "6",
+          "source": "10.0.0.0/16",
+          "source_type": "CIDR_BLOCK",
+          "tcp_options": {
+            "destination_port_range": {
+              "max": "33060",
+              "min": "33060"
+            },
+            "source_port_range": {
+              "max": "",
+              "min": ""
+            }
+          },
+          "udp_options": {
+            "destination_port_range": {
+              "max": "",
+              "min": ""
+            },
+            "source_port_range": {
+              "max": "",
+              "min": ""
+            }
+          }
+        },
+        {
+          "description": "",
+          "icmp_options": {
+            "code": "",
+            "type": ""
+          },
+          "is_stateless": false,
+          "protocol": "6",
+          "source": "10.0.0.0/16",
+          "source_type": "CIDR_BLOCK",
+          "tcp_options": {
+            "destination_port_range": {
+              "max": "33061",
+              "min": "33061"
+            },
+            "source_port_range": {
+              "max": "",
+              "min": ""
+            }
+          },
+          "udp_options": {
+            "destination_port_range": {
+              "max": "",
+              "min": ""
+            },
+            "source_port_range": {
+              "max": "",
+              "min": ""
+            }
+          }
+        }
+      ],
+      "vcn_id": "okit.virtualcloudnetwork.f6569908-75e9-4e5a-9d8c-2499e02df819"
+    },
+    {
+      "compartment_id": "okit.compartment.260632a7-02d1-4711-8638-3505f1566fff",
+      "defined_tags": {},
+      "display_name": "okit-sl004",
+      "egress_security_rules": [
+        {
+          "description": "",
+          "destination": "0.0.0.0/0",
+          "destination_type": "CIDR_BLOCK",
+          "icmp_options": null,
+          "is_stateless": false,
+          "protocol": "all",
+          "tcp_options": null,
+          "udp_options": null
+        }
+      ],
+      "freeform_tags": {},
+      "id": "okit.securitylist.694a6e39-4fb3-464c-8288-cebaedcc7ba5",
+      "ingress_security_rules": [
+        {
+          "description": "",
+          "icmp_options": null,
+          "is_stateless": false,
+          "protocol": "6",
+          "source": "0.0.0.0/0",
+          "source_type": "CIDR_BLOCK",
+          "tcp_options": {
+            "destination_port_range": {
+              "max": 22,
+              "min": 22
+            },
+            "source_port_range": null
+          },
+          "udp_options": null
+        },
+        {
+          "description": "",
+          "icmp_options": {
+            "code": 4,
+            "type": 3
+          },
+          "is_stateless": false,
+          "protocol": "1",
+          "source": "0.0.0.0/0",
+          "source_type": "CIDR_BLOCK",
+          "tcp_options": null,
+          "udp_options": null
+        },
+        {
+          "description": "",
+          "icmp_options": {
+            "code": null,
+            "type": 3
+          },
+          "is_stateless": false,
+          "protocol": "1",
+          "source": "10.0.0.0/16",
+          "source_type": "CIDR_BLOCK",
+          "tcp_options": null,
+          "udp_options": null
+        }
+      ],
+      "vcn_id": "okit.virtualcloudnetwork.f6569908-75e9-4e5a-9d8c-2499e02df819"
+    }
+  ],
+  "service_gateways": [
+    {
+      "autonomous_database_ids": [],
+      "compartment_id": "okit.compartment.260632a7-02d1-4711-8638-3505f1566fff",
+      "defined_tags": {},
+      "display_name": "okit-sg001",
+      "freeform_tags": {},
+      "id": "okit.servicegateway.982dd5c1-50b8-4bb9-9e8f-4a5f9b34c45e",
+      "object_storage_bucket_ids": [],
+      "route_table_id": "",
+      "service_name": "All Services",
+      "title": "Service Gateway",
+      "vcn_id": "okit.virtualcloudnetwork.f6569908-75e9-4e5a-9d8c-2499e02df819"
+    }
+  ],
+  "subnets": [
+    {
+      "availability_domain": "0",
+      "cidr_block": "10.0.0.0/24",
+      "compartment_id": "okit.compartment.260632a7-02d1-4711-8638-3505f1566fff",
+      "defined_tags": {},
+      "display_name": "mysql-pub-sn",
+      "dns_label": "sn001",
+      "freeform_tags": {},
+      "id": "okit.subnet.7253a8ff-4812-44fa-885e-1e8acefffcdf",
+      "ipv6cidr_block": "",
+      "is_ipv6enabled": false,
+      "name": "mysql-pub-sn",
+      "prohibit_public_ip_on_vnic": false,
+      "route_table_id": "okit.routetable.27564071-b6d4-4788-ae4c-000c766065a4",
+      "security_list_ids": [
+        "okit.securitylist.533a649d-11a9-43b5-af79-bf698661d8c1"
+      ],
+      "title": "Subnet",
+      "vcn_id": "okit.virtualcloudnetwork.f6569908-75e9-4e5a-9d8c-2499e02df819"
+    },
+    {
+      "availability_domain": "0",
+      "cidr_block": "10.0.1.0/24",
+      "compartment_id": "okit.compartment.260632a7-02d1-4711-8638-3505f1566fff",
+      "defined_tags": {},
+      "display_name": "mysql-priv-sn1",
+      "dns_label": "sn002",
+      "freeform_tags": {},
+      "id": "okit.subnet.88a1684f-959f-4f71-9de6-5915dea44eb8",
+      "ipv6cidr_block": "",
+      "is_ipv6enabled": false,
+      "name": "mysql-priv-sn1",
+      "prohibit_public_ip_on_vnic": true,
+      "route_table_id": "okit.routetable.57a2b64b-c25c-4c5e-a027-c50ec68a1fe3",
+      "security_list_ids": [
+        "okit.securitylist.699cdd95-a5dc-40a5-a459-2e19d8333cc4"
+      ],
+      "title": "Subnet",
+      "vcn_id": "okit.virtualcloudnetwork.f6569908-75e9-4e5a-9d8c-2499e02df819"
+    },
+    {
+      "availability_domain": "0",
+      "cidr_block": "10.0.2.0/24",
+      "compartment_id": "okit.compartment.260632a7-02d1-4711-8638-3505f1566fff",
+      "defined_tags": {},
+      "display_name": "mysql-priv-sn2",
+      "dns_label": "sn003",
+      "freeform_tags": {},
+      "id": "okit.subnet.63ee51d9-5da4-4472-a55d-69214ba4e90c",
+      "ipv6cidr_block": "",
+      "is_ipv6enabled": false,
+      "name": "mysql-priv-sn2",
+      "prohibit_public_ip_on_vnic": true,
+      "route_table_id": "",
+      "security_list_ids": [
+        "okit.securitylist.51af672c-7270-4b68-90c0-dd15b50d9a50"
+      ],
+      "title": "Subnet",
+      "vcn_id": "okit.virtualcloudnetwork.f6569908-75e9-4e5a-9d8c-2499e02df819"
+    }
+  ],
+  "template_type": "Reference Architecture",
+  "title": "MySQL HA Cluster",
+  "virtual_cloud_networks": [
+    {
+      "cidr_block": "10.0.0.0/16",
+      "compartment_id": "okit.compartment.260632a7-02d1-4711-8638-3505f1566fff",
+      "defined_tags": {},
+      "display_name": "mysql-vcn",
+      "dns_label": "vcn001",
+      "freeform_tags": {},
+      "id": "okit.virtualcloudnetwork.f6569908-75e9-4e5a-9d8c-2499e02df819",
+      "ipv6cidr_block": "",
+      "is_ipv6enabled": false,
+      "name": "mysql-vcn",
+      "title": "Virtual Cloud Network"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/okitweb/static/okit/templates/reference_architecture/postgresql_cluster.json b/okitweb/static/okit/templates/reference_architecture/postgresql_cluster.json
new file mode 100644
index 000000000..ab2f0a68d
--- /dev/null
+++ b/okitweb/static/okit/templates/reference_architecture/postgresql_cluster.json
@@ -0,0 +1,483 @@
+{
+  "autonomous_databases": [],
+  "block_storage_volumes": [],
+  "compartments": [
+    {
+      "compartment_id": null,
+      "defined_tags": {},
+      "display_name": "okit-comp001",
+      "freeform_tags": {},
+      "id": "okit.compartment.65957e2a-3dd8-45ba-a78d-1a8ccdcd9ea3",
+      "name": "okit-comp001"
+    }
+  ],
+  "containers": [],
+  "database_systems": [],
+  "description": "Postgresql Cluster",
+  "dynamic_routing_gateways": [],
+  "fast_connects": [],
+  "file_storage_systems": [],
+  "instances": [
+    {
+      "agent_config": {
+        "is_management_disabled": false,
+        "is_monitoring_disabled": false
+      },
+      "autonomous_database_ids": [],
+      "availability_domain": "1",
+      "block_storage_volume_ids": [],
+      "compartment_id": "okit.compartment.65957e2a-3dd8-45ba-a78d-1a8ccdcd9ea3",
+      "defined_tags": {},
+      "display_name": "master-in",
+      "fault_domain": "FAULT-DOMAIN-1",
+      "freeform_tags": {},
+      "id": "okit.instance.01e6cf88-d6fd-446f-b11e-dfaaed4a7142",
+      "is_pv_encryption_in_transit_enabled": false,
+      "metadata": {
+        "ssh_authorized_keys": "ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAABAQDI9j/nnep+4EQhrFLBCgxw2zv8ocZ00n99As7MWQhHeE9VSi5czQcRJlNXllis0M3PzwjUOaK3edaLBR7m7i4xZXofPgK20bfEbUqdZh6hGFwmr5VYCVwta7XjBotuc5fGFYbZtSbPg9Tw3GfxTwjCm9khZle82J2wOR+n0tSxGyDrQgNgtgSI+MzZ+vcsGR0hE4f+Mp0XZM+Qo4w6Of0xIn/rIpzzA/DUUOBRlW7DQrow7JeCxTz0ixurlBLTF5B66zj3DMQT+vGX0ZJusHgH+dk9xEu8yuu+JY5qRIGCBwVQYWeTSNAbbKzj+HZceNw+CW5z/iyPHf3DlpMF5C7B claus-ulrich.dustmann@oracle.com",
+        "user_data": ""
+      },
+      "name": "master-in",
+      "object_storage_bucket_ids": [],
+      "preserve_boot_volume": false,
+      "primary_vnic": {
+        "assign_public_ip": true,
+        "hostname_label": "postgresqlmaster",
+        "nsg_ids": [],
+        "skip_source_dest_check": false,
+        "subnet_id": "okit.subnet.3263ebe3-147d-4d3b-9eb8-bf20dd9ae0da"
+      },
+      "shape": "VM.Standard.E2.1",
+      "source_details": {
+        "boot_volume_size_in_gbs": "50",
+        "os": "Oracle Linux",
+        "source_type": "image",
+        "version": "7.8"
+      },
+      "title": "Instance",
+      "vnics": [
+        {
+          "assign_public_ip": true,
+          "hostname_label": "postgresqlmaster",
+          "nsg_ids": [],
+          "skip_source_dest_check": false,
+          "subnet_id": "okit.subnet.3263ebe3-147d-4d3b-9eb8-bf20dd9ae0da"
+        }
+      ]
+    },
+    {
+      "agent_config": {
+        "is_management_disabled": false,
+        "is_monitoring_disabled": false
+      },
+      "autonomous_database_ids": [],
+      "availability_domain": "1",
+      "block_storage_volume_ids": [],
+      "compartment_id": "okit.compartment.65957e2a-3dd8-45ba-a78d-1a8ccdcd9ea3",
+      "defined_tags": {},
+      "display_name": "stb1-in",
+      "fault_domain": "FAULT-DOMAIN-2",
+      "freeform_tags": {},
+      "id": "okit.instance.dc8fe894-ff09-438a-b8ed-b4fc463fa97d",
+      "is_pv_encryption_in_transit_enabled": false,
+      "metadata": {
+        "ssh_authorized_keys": "ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAABAQDI9j/nnep+4EQhrFLBCgxw2zv8ocZ00n99As7MWQhHeE9VSi5czQcRJlNXllis0M3PzwjUOaK3edaLBR7m7i4xZXofPgK20bfEbUqdZh6hGFwmr5VYCVwta7XjBotuc5fGFYbZtSbPg9Tw3GfxTwjCm9khZle82J2wOR+n0tSxGyDrQgNgtgSI+MzZ+vcsGR0hE4f+Mp0XZM+Qo4w6Of0xIn/rIpzzA/DUUOBRlW7DQrow7JeCxTz0ixurlBLTF5B66zj3DMQT+vGX0ZJusHgH+dk9xEu8yuu+JY5qRIGCBwVQYWeTSNAbbKzj+HZceNw+CW5z/iyPHf3DlpMF5C7B claus-ulrich.dustmann@oracle.com",
+        "user_data": ""
+      },
+      "name": "stb1-in",
+      "object_storage_bucket_ids": [],
+      "preserve_boot_volume": false,
+      "primary_vnic": {
+        "assign_public_ip": true,
+        "hostname_label": "postgresqlstb1",
+        "nsg_ids": [],
+        "skip_source_dest_check": false,
+        "subnet_id": "okit.subnet.3263ebe3-147d-4d3b-9eb8-bf20dd9ae0da"
+      },
+      "shape": "VM.Standard.E2.1",
+      "source_details": {
+        "boot_volume_size_in_gbs": "50",
+        "os": "Oracle Linux",
+        "source_type": "image",
+        "version": "7.8"
+      },
+      "title": "Instance",
+      "vnics": [
+        {
+          "assign_public_ip": true,
+          "hostname_label": "postgresqlstb1",
+          "nsg_ids": [],
+          "skip_source_dest_check": false,
+          "subnet_id": "okit.subnet.3263ebe3-147d-4d3b-9eb8-bf20dd9ae0da"
+        }
+      ]
+    },
+    {
+      "agent_config": {
+        "is_management_disabled": false,
+        "is_monitoring_disabled": false
+      },
+      "autonomous_database_ids": [],
+      "availability_domain": "1",
+      "block_storage_volume_ids": [],
+      "compartment_id": "okit.compartment.65957e2a-3dd8-45ba-a78d-1a8ccdcd9ea3",
+      "defined_tags": {},
+      "display_name": "stb2-in",
+      "fault_domain": "FAULT-DOMAIN-3",
+      "freeform_tags": {},
+      "id": "okit.instance.d6d80f8a-2920-4c2f-b6b7-0871df9615b9",
+      "is_pv_encryption_in_transit_enabled": false,
+      "metadata": {
+        "ssh_authorized_keys": "ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAABAQDI9j/nnep+4EQhrFLBCgxw2zv8ocZ00n99As7MWQhHeE9VSi5czQcRJlNXllis0M3PzwjUOaK3edaLBR7m7i4xZXofPgK20bfEbUqdZh6hGFwmr5VYCVwta7XjBotuc5fGFYbZtSbPg9Tw3GfxTwjCm9khZle82J2wOR+n0tSxGyDrQgNgtgSI+MzZ+vcsGR0hE4f+Mp0XZM+Qo4w6Of0xIn/rIpzzA/DUUOBRlW7DQrow7JeCxTz0ixurlBLTF5B66zj3DMQT+vGX0ZJusHgH+dk9xEu8yuu+JY5qRIGCBwVQYWeTSNAbbKzj+HZceNw+CW5z/iyPHf3DlpMF5C7B claus-ulrich.dustmann@oracle.com",
+        "user_data": ""
+      },
+      "name": "stb2-in",
+      "object_storage_bucket_ids": [],
+      "preserve_boot_volume": false,
+      "primary_vnic": {
+        "assign_public_ip": true,
+        "hostname_label": "postgresqlstb2",
+        "nsg_ids": [],
+        "skip_source_dest_check": false,
+        "subnet_id": "okit.subnet.3263ebe3-147d-4d3b-9eb8-bf20dd9ae0da"
+      },
+      "shape": "VM.Standard.E2.1",
+      "source_details": {
+        "boot_volume_size_in_gbs": "50",
+        "os": "Oracle Linux",
+        "source_type": "image",
+        "version": "7.8"
+      },
+      "title": "Instance",
+      "vnics": [
+        {
+          "assign_public_ip": true,
+          "hostname_label": "postgresqlstb2",
+          "nsg_ids": [],
+          "skip_source_dest_check": false,
+          "subnet_id": "okit.subnet.3263ebe3-147d-4d3b-9eb8-bf20dd9ae0da"
+        }
+      ]
+    }
+  ],
+  "internet_gateways": [
+    {
+      "compartment_id": "okit.compartment.65957e2a-3dd8-45ba-a78d-1a8ccdcd9ea3",
+      "defined_tags": {},
+      "display_name": "okit-ig001",
+      "enabled": true,
+      "freeform_tags": {},
+      "id": "okit.internetgateway.b86c3168-52e3-4dfb-923d-b8fb638fac8c",
+      "title": "Internet Gateway",
+      "vcn_id": "okit.virtualcloudnetwork.ca33127a-6109-4332-a894-70034806b044"
+    }
+  ],
+  "load_balancers": [],
+  "local_peering_gateways": [],
+  "nat_gateways": [],
+  "network_security_groups": [],
+  "object_storage_buckets": [],
+  "okit_version": "0.9.0",
+  "remote_peering_gateways": [],
+  "route_tables": [
+    {
+      "compartment_id": "okit.compartment.65957e2a-3dd8-45ba-a78d-1a8ccdcd9ea3",
+      "defined_tags": {},
+      "display_name": "okit-rt001",
+      "freeform_tags": {},
+      "id": "okit.routetable.4f6e7c65-579d-4bb0-8959-3f13a3600101",
+      "route_rules": [
+        {
+          "description": "",
+          "destination": "0.0.0.0/0",
+          "destination_type": "CIDR_BLOCK",
+          "network_entity_id": "okit.internetgateway.b86c3168-52e3-4dfb-923d-b8fb638fac8c",
+          "target_type": "internet_gateways"
+        }
+      ],
+      "vcn_id": "okit.virtualcloudnetwork.ca33127a-6109-4332-a894-70034806b044"
+    },
+    {
+      "compartment_id": "okit.compartment.65957e2a-3dd8-45ba-a78d-1a8ccdcd9ea3",
+      "defined_tags": {},
+      "display_name": "okit-rt002",
+      "freeform_tags": {},
+      "id": "okit.routetable.c4de66ec-91fe-4b86-ba79-77c70967a456",
+      "route_rules": [],
+      "vcn_id": "okit.virtualcloudnetwork.ca33127a-6109-4332-a894-70034806b044"
+    }
+  ],
+  "security_lists": [
+    {
+      "compartment_id": "okit.compartment.65957e2a-3dd8-45ba-a78d-1a8ccdcd9ea3",
+      "defined_tags": {},
+      "display_name": "okit-sl001",
+      "egress_security_rules": [
+        {
+          "description": "",
+          "destination": "0.0.0.0/0",
+          "destination_type": "CIDR_BLOCK",
+          "icmp_options": {
+            "code": "",
+            "type": ""
+          },
+          "is_stateless": false,
+          "protocol": "all",
+          "tcp_options": {
+            "destination_port_range": {
+              "max": "",
+              "min": ""
+            },
+            "source_port_range": {
+              "max": "",
+              "min": ""
+            }
+          },
+          "udp_options": {
+            "destination_port_range": {
+              "max": "",
+              "min": ""
+            },
+            "source_port_range": {
+              "max": "",
+              "min": ""
+            }
+          }
+        }
+      ],
+      "freeform_tags": {},
+      "id": "okit.securitylist.f14dbf8b-2cdb-45ea-b344-39f12ac65a81",
+      "ingress_security_rules": [
+        {
+          "description": "",
+          "icmp_options": {
+            "code": "",
+            "type": ""
+          },
+          "is_stateless": false,
+          "protocol": "6",
+          "source": "0.0.0.0/0",
+          "source_type": "CIDR_BLOCK",
+          "tcp_options": {
+            "destination_port_range": {
+              "max": 22,
+              "min": 22
+            },
+            "source_port_range": {
+              "max": "",
+              "min": ""
+            }
+          },
+          "udp_options": {
+            "destination_port_range": {
+              "max": "",
+              "min": ""
+            },
+            "source_port_range": {
+              "max": "",
+              "min": ""
+            }
+          }
+        },
+        {
+          "description": "",
+          "icmp_options": {
+            "code": 4,
+            "type": 3
+          },
+          "is_stateless": false,
+          "protocol": "1",
+          "source": "0.0.0.0/0",
+          "source_type": "CIDR_BLOCK",
+          "tcp_options": {
+            "destination_port_range": {
+              "max": "",
+              "min": ""
+            },
+            "source_port_range": {
+              "max": "",
+              "min": ""
+            }
+          },
+          "udp_options": {
+            "destination_port_range": {
+              "max": "",
+              "min": ""
+            },
+            "source_port_range": {
+              "max": "",
+              "min": ""
+            }
+          }
+        },
+        {
+          "description": "",
+          "icmp_options": {
+            "code": null,
+            "type": 3
+          },
+          "is_stateless": false,
+          "protocol": "1",
+          "source": "10.0.0.0/16",
+          "source_type": "CIDR_BLOCK",
+          "tcp_options": {
+            "destination_port_range": {
+              "max": "",
+              "min": ""
+            },
+            "source_port_range": {
+              "max": "",
+              "min": ""
+            }
+          },
+          "udp_options": {
+            "destination_port_range": {
+              "max": "",
+              "min": ""
+            },
+            "source_port_range": {
+              "max": "",
+              "min": ""
+            }
+          }
+        },
+        {
+          "description": "",
+          "icmp_options": {
+            "code": "",
+            "type": ""
+          },
+          "is_stateless": false,
+          "protocol": "6",
+          "source": "0.0.0.0/0",
+          "source_type": "CIDR_BLOCK",
+          "tcp_options": {
+            "destination_port_range": {
+              "max": "5432",
+              "min": "5432"
+            },
+            "source_port_range": {
+              "max": "",
+              "min": ""
+            }
+          },
+          "udp_options": {
+            "destination_port_range": {
+              "max": "",
+              "min": ""
+            },
+            "source_port_range": {
+              "max": "",
+              "min": ""
+            }
+          }
+        }
+      ],
+      "vcn_id": "okit.virtualcloudnetwork.ca33127a-6109-4332-a894-70034806b044"
+    },
+    {
+      "compartment_id": "okit.compartment.65957e2a-3dd8-45ba-a78d-1a8ccdcd9ea3",
+      "defined_tags": {},
+      "display_name": "okit-sl002",
+      "egress_security_rules": [
+        {
+          "description": "",
+          "destination": "0.0.0.0/0",
+          "destination_type": "CIDR_BLOCK",
+          "icmp_options": null,
+          "is_stateless": false,
+          "protocol": "all",
+          "tcp_options": null,
+          "udp_options": null
+        }
+      ],
+      "freeform_tags": {},
+      "id": "okit.securitylist.d21e63f4-a07e-4515-9a19-e23eadcf9bb2",
+      "ingress_security_rules": [
+        {
+          "description": "",
+          "icmp_options": null,
+          "is_stateless": false,
+          "protocol": "6",
+          "source": "0.0.0.0/0",
+          "source_type": "CIDR_BLOCK",
+          "tcp_options": {
+            "destination_port_range": {
+              "max": 22,
+              "min": 22
+            },
+            "source_port_range": null
+          },
+          "udp_options": null
+        },
+        {
+          "description": "",
+          "icmp_options": {
+            "code": 4,
+            "type": 3
+          },
+          "is_stateless": false,
+          "protocol": "1",
+          "source": "0.0.0.0/0",
+          "source_type": "CIDR_BLOCK",
+          "tcp_options": null,
+          "udp_options": null
+        },
+        {
+          "description": "",
+          "icmp_options": {
+            "code": null,
+            "type": 3
+          },
+          "is_stateless": false,
+          "protocol": "1",
+          "source": "10.0.0.0/16",
+          "source_type": "CIDR_BLOCK",
+          "tcp_options": null,
+          "udp_options": null
+        }
+      ],
+      "vcn_id": "okit.virtualcloudnetwork.ca33127a-6109-4332-a894-70034806b044"
+    }
+  ],
+  "service_gateways": [],
+  "subnets": [
+    {
+      "availability_domain": "0",
+      "cidr_block": "10.0.0.0/24",
+      "compartment_id": "okit.compartment.65957e2a-3dd8-45ba-a78d-1a8ccdcd9ea3",
+      "defined_tags": {},
+      "display_name": "postgresql-sn",
+      "dns_label": "sn001",
+      "freeform_tags": {},
+      "id": "okit.subnet.3263ebe3-147d-4d3b-9eb8-bf20dd9ae0da",
+      "ipv6cidr_block": "",
+      "is_ipv6enabled": false,
+      "name": "postgresql-sn",
+      "prohibit_public_ip_on_vnic": false,
+      "route_table_id": "okit.routetable.4f6e7c65-579d-4bb0-8959-3f13a3600101",
+      "security_list_ids": [
+        "okit.securitylist.f14dbf8b-2cdb-45ea-b344-39f12ac65a81"
+      ],
+      "title": "Subnet",
+      "vcn_id": "okit.virtualcloudnetwork.ca33127a-6109-4332-a894-70034806b044"
+    }
+  ],
+  "template_type": "Reference Architecture",
+  "title": "Postgresql Cluster",
+  "virtual_cloud_networks": [
+    {
+      "cidr_block": "10.0.0.0/16",
+      "compartment_id": "okit.compartment.65957e2a-3dd8-45ba-a78d-1a8ccdcd9ea3",
+      "defined_tags": {},
+      "display_name": "postgresql-vcn",
+      "dns_label": "vcn001",
+      "freeform_tags": {},
+      "id": "okit.virtualcloudnetwork.ca33127a-6109-4332-a894-70034806b044",
+      "ipv6cidr_block": "",
+      "is_ipv6enabled": false,
+      "name": "postgresql-vcn",
+      "title": "Virtual Cloud Network"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/okitweb/static/okit/view/designer/js/artefact/block_storage_volume.js b/okitweb/static/okit/view/designer/js/artefact/block_storage_volume.js
deleted file mode 100644
index 4f8c1586b..000000000
--- a/okitweb/static/okit/view/designer/js/artefact/block_storage_volume.js
+++ /dev/null
@@ -1,23 +0,0 @@
-/*
-** Copyright (c) 2020, Oracle and/or its affiliates.
-** Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl.
-*/
-console.info('Loaded Designer BlockStorageVolume View Javascript');
-
-/*
-** Define BlockStorageVolume View Artifact Class
- */
-class BlockStorageVolumeView extends OkitDesignerArtefactView {
-    constructor(artefact=null, json_view) {
-        super(artefact, json_view);
-        this.parent_id = artefact.compartment_id;
-    }
-
-    getParent() {
-        return this.getBlockStorageVolume(this.getParentId());
-    }
-
-    getParentId() {
-        return this.parent_id;
-    }
-}
\ No newline at end of file
diff --git a/okitweb/static/okit/view/designer/js/artefact/database_system.js b/okitweb/static/okit/view/designer/js/artefact/database_system.js
deleted file mode 100644
index e91ee5bf9..000000000
--- a/okitweb/static/okit/view/designer/js/artefact/database_system.js
+++ /dev/null
@@ -1,23 +0,0 @@
-/*
-** Copyright (c) 2020, Oracle and/or its affiliates.
-** Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl.
-*/
-console.info('Loaded Designer DatabaseSystem View Javascript');
-
-/*
-** Define DatabaseSystem View Artifact Class
- */
-class DatabaseSystemView extends OkitDesignerArtefactView {
-    constructor(artefact=null, json_view) {
-        super(artefact, json_view);
-        this.parent_id = artefact.compartment_id;
-    }
-
-    getParent() {
-        return this.getDatabaseSystem(this.getParentId());
-    }
-
-    getParentId() {
-        return this.parent_id;
-    }
-}
\ No newline at end of file
diff --git a/okitweb/static/okit/view/designer/js/artefact/dynamic_routing_gateway.js b/okitweb/static/okit/view/designer/js/artefact/dynamic_routing_gateway.js
deleted file mode 100644
index 0fb32f579..000000000
--- a/okitweb/static/okit/view/designer/js/artefact/dynamic_routing_gateway.js
+++ /dev/null
@@ -1,23 +0,0 @@
-/*
-** Copyright (c) 2020, Oracle and/or its affiliates.
-** Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl.
-*/
-console.info('Loaded Designer DynamicRoutingGateway View Javascript');
-
-/*
-** Define DynamicRoutingGateway View Artifact Class
- */
-class DynamicRoutingGatewayView extends OkitDesignerArtefactView {
-    constructor(artefact=null, json_view) {
-        super(artefact, json_view);
-        this.parent_id = artefact.compartment_id;
-    }
-
-    getParent() {
-        return this.getDynamicRoutingGateway(this.getParentId());
-    }
-
-    getParentId() {
-        return this.parent_id;
-    }
-}
\ No newline at end of file
diff --git a/okitweb/static/okit/view/designer/js/artefact/fast_connect.js b/okitweb/static/okit/view/designer/js/artefact/fast_connect.js
deleted file mode 100644
index aa8b9a651..000000000
--- a/okitweb/static/okit/view/designer/js/artefact/fast_connect.js
+++ /dev/null
@@ -1,23 +0,0 @@
-/*
-** Copyright (c) 2020, Oracle and/or its affiliates.
-** Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl.
-*/
-console.info('Loaded Designer FastConnect View Javascript');
-
-/*
-** Define FastConnect View Artifact Class
- */
-class FastConnectView extends OkitDesignerArtefactView {
-    constructor(artefact=null, json_view) {
-        super(artefact, json_view);
-        this.parent_id = artefact.compartment_id;
-    }
-
-    getParent() {
-        return this.getFastConnect(this.getParentId());
-    }
-
-    getParentId() {
-        return this.parent_id;
-    }
-}
\ No newline at end of file
diff --git a/okitweb/static/okit/view/designer/js/artefact/file_storage_system.js b/okitweb/static/okit/view/designer/js/artefact/file_storage_system.js
deleted file mode 100644
index 3edbb8ec0..000000000
--- a/okitweb/static/okit/view/designer/js/artefact/file_storage_system.js
+++ /dev/null
@@ -1,23 +0,0 @@
-/*
-** Copyright (c) 2020, Oracle and/or its affiliates.
-** Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl.
-*/
-console.info('Loaded Designer FileStorageSystem View Javascript');
-
-/*
-** Define FileStorageSystem View Artifact Class
- */
-class FileStorageSystemView extends OkitDesignerArtefactView {
-    constructor(artefact=null, json_view) {
-        super(artefact, json_view);
-        this.parent_id = artefact.compartment_id;
-    }
-
-    getParent() {
-        return this.getFileStorageSystem(this.getParentId());
-    }
-
-    getParentId() {
-        return this.parent_id;
-    }
-}
\ No newline at end of file
diff --git a/okitweb/static/okit/view/designer/js/artefact/instance.js b/okitweb/static/okit/view/designer/js/artefact/instance.js
deleted file mode 100644
index d506a9a77..000000000
--- a/okitweb/static/okit/view/designer/js/artefact/instance.js
+++ /dev/null
@@ -1,23 +0,0 @@
-/*
-** Copyright (c) 2020, Oracle and/or its affiliates.
-** Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl.
-*/
-console.info('Loaded Designer Instance View Javascript');
-
-/*
-** Define Instance View Artifact Class
- */
-class InstanceView extends OkitDesignerArtefactView {
-    constructor(artefact=null, json_view) {
-        super(artefact, json_view);
-        this.parent_id = artefact.compartment_id;
-    }
-
-    getParent() {
-        return this.getInstance(this.getParentId());
-    }
-
-    getParentId() {
-        return this.parent_id;
-    }
-}
\ No newline at end of file
diff --git a/okitweb/static/okit/view/designer/js/artefact/internet_gateway.js b/okitweb/static/okit/view/designer/js/artefact/internet_gateway.js
deleted file mode 100644
index 6e1467d8f..000000000
--- a/okitweb/static/okit/view/designer/js/artefact/internet_gateway.js
+++ /dev/null
@@ -1,23 +0,0 @@
-/*
-** Copyright (c) 2020, Oracle and/or its affiliates.
-** Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl.
-*/
-console.info('Loaded Designer InternetGateway View Javascript');
-
-/*
-** Define InternetGateway View Artifact Class
- */
-class InternetGatewayView extends OkitDesignerArtefactView {
-    constructor(artefact=null, json_view) {
-        super(artefact, json_view);
-        this.parent_id = artefact.compartment_id;
-    }
-
-    getParent() {
-        return this.getInternetGateway(this.getParentId());
-    }
-
-    getParentId() {
-        return this.parent_id;
-    }
-}
\ No newline at end of file
diff --git a/okitweb/static/okit/view/designer/js/artefact/load_balancer.js b/okitweb/static/okit/view/designer/js/artefact/load_balancer.js
deleted file mode 100644
index a11a7ed97..000000000
--- a/okitweb/static/okit/view/designer/js/artefact/load_balancer.js
+++ /dev/null
@@ -1,23 +0,0 @@
-/*
-** Copyright (c) 2020, Oracle and/or its affiliates.
-** Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl.
-*/
-console.info('Loaded Designer LoadBalancer View Javascript');
-
-/*
-** Define LoadBalancer View Artifact Class
- */
-class LoadBalancerView extends OkitDesignerArtefactView {
-    constructor(artefact=null, json_view) {
-        super(artefact, json_view);
-        this.parent_id = artefact.compartment_id;
-    }
-
-    getParent() {
-        return this.getLoadBalancer(this.getParentId());
-    }
-
-    getParentId() {
-        return this.parent_id;
-    }
-}
\ No newline at end of file
diff --git a/okitweb/static/okit/view/designer/js/artefact/local_peering_gateway.js b/okitweb/static/okit/view/designer/js/artefact/local_peering_gateway.js
deleted file mode 100644
index 905d92937..000000000
--- a/okitweb/static/okit/view/designer/js/artefact/local_peering_gateway.js
+++ /dev/null
@@ -1,23 +0,0 @@
-/*
-** Copyright (c) 2020, Oracle and/or its affiliates.
-** Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl.
-*/
-console.info('Loaded Designer LocalPeeringGateway View Javascript');
-
-/*
-** Define LocalPeeringGateway View Artifact Class
- */
-class LocalPeeringGatewayView extends OkitDesignerArtefactView {
-    constructor(artefact=null, json_view) {
-        super(artefact, json_view);
-        this.parent_id = artefact.compartment_id;
-    }
-
-    getParent() {
-        return this.getLocalPeeringGateway(this.getParentId());
-    }
-
-    getParentId() {
-        return this.parent_id;
-    }
-}
\ No newline at end of file
diff --git a/okitweb/static/okit/view/designer/js/artefact/nat_gateway.js b/okitweb/static/okit/view/designer/js/artefact/nat_gateway.js
deleted file mode 100644
index 943bcefcd..000000000
--- a/okitweb/static/okit/view/designer/js/artefact/nat_gateway.js
+++ /dev/null
@@ -1,23 +0,0 @@
-/*
-** Copyright (c) 2020, Oracle and/or its affiliates.
-** Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl.
-*/
-console.info('Loaded Designer NATGateway View Javascript');
-
-/*
-** Define NATGateway View Artifact Class
- */
-class NATGatewayView extends OkitDesignerArtefactView {
-    constructor(artefact=null, json_view) {
-        super(artefact, json_view);
-        this.parent_id = artefact.compartment_id;
-    }
-
-    getParent() {
-        return this.getNATGateway(this.getParentId());
-    }
-
-    getParentId() {
-        return this.parent_id;
-    }
-}
\ No newline at end of file
diff --git a/okitweb/static/okit/view/designer/js/artefact/network_security_group.js b/okitweb/static/okit/view/designer/js/artefact/network_security_group.js
deleted file mode 100644
index 018139015..000000000
--- a/okitweb/static/okit/view/designer/js/artefact/network_security_group.js
+++ /dev/null
@@ -1,23 +0,0 @@
-/*
-** Copyright (c) 2020, Oracle and/or its affiliates.
-** Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl.
-*/
-console.info('Loaded Designer NetworkSecurityGroup View Javascript');
-
-/*
-** Define NetworkSecurityGroup View Artifact Class
- */
-class NetworkSecurityGroupView extends OkitDesignerArtefactView {
-    constructor(artefact=null, json_view) {
-        super(artefact, json_view);
-        this.parent_id = artefact.compartment_id;
-    }
-
-    getParent() {
-        return this.getNetworkSecurityGroup(this.getParentId());
-    }
-
-    getParentId() {
-        return this.parent_id;
-    }
-}
\ No newline at end of file
diff --git a/okitweb/static/okit/view/designer/js/artefact/object_storage_bucket.js b/okitweb/static/okit/view/designer/js/artefact/object_storage_bucket.js
deleted file mode 100644
index f51cb6533..000000000
--- a/okitweb/static/okit/view/designer/js/artefact/object_storage_bucket.js
+++ /dev/null
@@ -1,23 +0,0 @@
-/*
-** Copyright (c) 2020, Oracle and/or its affiliates.
-** Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl.
-*/
-console.info('Loaded Designer ObjectStorageBucket View Javascript');
-
-/*
-** Define ObjectStorageBucket View Artifact Class
- */
-class ObjectStorageBucketView extends OkitDesignerArtefactView {
-    constructor(artefact=null, json_view) {
-        super(artefact, json_view);
-        this.parent_id = artefact.compartment_id;
-    }
-
-    getParent() {
-        return this.getObjectStorageBucket(this.getParentId());
-    }
-
-    getParentId() {
-        return this.parent_id;
-    }
-}
\ No newline at end of file
diff --git a/okitweb/static/okit/view/designer/js/artefact/route_table.js b/okitweb/static/okit/view/designer/js/artefact/route_table.js
deleted file mode 100644
index a3adee29e..000000000
--- a/okitweb/static/okit/view/designer/js/artefact/route_table.js
+++ /dev/null
@@ -1,23 +0,0 @@
-/*
-** Copyright (c) 2020, Oracle and/or its affiliates.
-** Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl.
-*/
-console.info('Loaded Designer RouteTable View Javascript');
-
-/*
-** Define RouteTable View Artifact Class
- */
-class RouteTableView extends OkitDesignerArtefactView {
-    constructor(artefact=null, json_view) {
-        super(artefact, json_view);
-        this.parent_id = artefact.compartment_id;
-    }
-
-    getParent() {
-        return this.getRouteTable(this.getParentId());
-    }
-
-    getParentId() {
-        return this.parent_id;
-    }
-}
\ No newline at end of file
diff --git a/okitweb/static/okit/view/designer/js/artefact/security_list.js b/okitweb/static/okit/view/designer/js/artefact/security_list.js
deleted file mode 100644
index 12ed4bd63..000000000
--- a/okitweb/static/okit/view/designer/js/artefact/security_list.js
+++ /dev/null
@@ -1,23 +0,0 @@
-/*
-** Copyright (c) 2020, Oracle and/or its affiliates.
-** Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl.
-*/
-console.info('Loaded Designer SecurityList View Javascript');
-
-/*
-** Define SecurityList View Artifact Class
- */
-class SecurityListView extends OkitDesignerArtefactView {
-    constructor(artefact=null, json_view) {
-        super(artefact, json_view);
-        this.parent_id = artefact.compartment_id;
-    }
-
-    getParent() {
-        return this.getSecurityList(this.getParentId());
-    }
-
-    getParentId() {
-        return this.parent_id;
-    }
-}
\ No newline at end of file
diff --git a/okitweb/static/okit/view/designer/js/artefact/service_gateway.js b/okitweb/static/okit/view/designer/js/artefact/service_gateway.js
deleted file mode 100644
index 4c7e09d7f..000000000
--- a/okitweb/static/okit/view/designer/js/artefact/service_gateway.js
+++ /dev/null
@@ -1,23 +0,0 @@
-/*
-** Copyright (c) 2020, Oracle and/or its affiliates.
-** Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl.
-*/
-console.info('Loaded Designer ServiceGateway View Javascript');
-
-/*
-** Define ServiceGateway View Artifact Class
- */
-class ServiceGatewayView extends OkitDesignerArtefactView {
-    constructor(artefact=null, json_view) {
-        super(artefact, json_view);
-        this.parent_id = artefact.compartment_id;
-    }
-
-    getParent() {
-        return this.getServiceGateway(this.getParentId());
-    }
-
-    getParentId() {
-        return this.parent_id;
-    }
-}
\ No newline at end of file
diff --git a/okitweb/static/okit/view/designer/js/artefact/subnet.js b/okitweb/static/okit/view/designer/js/artefact/subnet.js
deleted file mode 100644
index 4ca41fa2b..000000000
--- a/okitweb/static/okit/view/designer/js/artefact/subnet.js
+++ /dev/null
@@ -1,23 +0,0 @@
-/*
-** Copyright (c) 2020, Oracle and/or its affiliates.
-** Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl.
-*/
-console.info('Loaded Designer Subnet View Javascript');
-
-/*
-** Define Subnet View Artifact Class
- */
-class SubnetView extends OkitDesignerArtefactView {
-    constructor(artefact=null, json_view) {
-        super(artefact, json_view);
-        this.parent_id = artefact.compartment_id;
-    }
-
-    getParent() {
-        return this.getSubnet(this.getParentId());
-    }
-
-    getParentId() {
-        return this.parent_id;
-    }
-}
\ No newline at end of file
diff --git a/okitweb/static/okit/view/designer/js/artefact/virtual_cloud_network.js b/okitweb/static/okit/view/designer/js/artefact/virtual_cloud_network.js
deleted file mode 100644
index 8a3253bb3..000000000
--- a/okitweb/static/okit/view/designer/js/artefact/virtual_cloud_network.js
+++ /dev/null
@@ -1,23 +0,0 @@
-/*
-** Copyright (c) 2020, Oracle and/or its affiliates.
-** Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl.
-*/
-console.info('Loaded Designer VirtualCloudNetwork View Javascript');
-
-/*
-** Define VirtualCloudNetwork View Artifact Class
- */
-class VirtualCloudNetworkView extends OkitDesignerArtefactView {
-    constructor(artefact=null, json_view) {
-        super(artefact, json_view);
-        this.parent_id = artefact.compartment_id;
-    }
-
-    getParent() {
-        return this.getVirtualCloudNetwork(this.getParentId());
-    }
-
-    getParentId() {
-        return this.parent_id;
-    }
-}
\ No newline at end of file
diff --git a/okitweb/static/okit/view/designer/js/artefact/virtual_network_interface.js b/okitweb/static/okit/view/designer/js/artefact/virtual_network_interface.js
deleted file mode 100644
index 12f152afb..000000000
--- a/okitweb/static/okit/view/designer/js/artefact/virtual_network_interface.js
+++ /dev/null
@@ -1,23 +0,0 @@
-/*
-** Copyright (c) 2020, Oracle and/or its affiliates.
-** Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl.
-*/
-console.info('Loaded Designer VirtualNetworkInterface View Javascript');
-
-/*
-** Define VirtualNetworkInterface View Artifact Class
- */
-class VirtualNetworkInterfaceView extends OkitDesignerArtefactView {
-    constructor(artefact=null, json_view) {
-        super(artefact, json_view);
-        this.parent_id = artefact.compartment_id;
-    }
-
-    getParent() {
-        return this.getVirtualNetworkInterface(this.getParentId());
-    }
-
-    getParentId() {
-        return this.parent_id;
-    }
-}
\ No newline at end of file
diff --git a/okitweb/static/okit/view/designer/js/artefact/autonomous_database.js b/okitweb/static/okit/view/designer/js/artefacts/autonomous_database.js
similarity index 78%
rename from okitweb/static/okit/view/designer/js/artefact/autonomous_database.js
rename to okitweb/static/okit/view/designer/js/artefacts/autonomous_database.js
index 82ce0eac5..f10065ebf 100644
--- a/okitweb/static/okit/view/designer/js/artefact/autonomous_database.js
+++ b/okitweb/static/okit/view/designer/js/artefacts/autonomous_database.js
@@ -10,11 +10,12 @@ console.info('Loaded Designer AutonomousDatabase View Javascript');
 class AutonomousDatabaseView extends OkitDesignerArtefactView {
     constructor(artefact=null, json_view) {
         super(artefact, json_view);
-        this.parent_id = artefact.compartment_id;
     }
 
+    get parent_id() {return this.artefact.compartment_id;}
+
     getParent() {
-        return this.getAutonomousDatabase(this.getParentId());
+        return this.getJsonView().getCompartment(this.parent_id);
     }
 
     getParentId() {
@@ -35,11 +36,7 @@ class AutonomousDatabaseView extends OkitDesignerArtefactView {
      */
     // Additional draw Processing
     draw() {
-        console.groupCollapsed('Drawing ' + this.getArtifactReference() + ' : ' + this.getArtefact().id + ' [' + this.parent_id + ']');
-        if (this.isAttached()) {
-            console.groupEnd();
-            return;
-        }
+        console.group('Drawing ' + this.getArtifactReference() + ' : ' + this.getArtefact().id + ' [' + this.parent_id + ']');
         let svg = super.draw();
         /*
         ** Add Properties Load Event to created svg. We require the definition of the local variable "me" so that it can
@@ -69,7 +66,6 @@ class AutonomousDatabaseView extends OkitDesignerArtefactView {
     }
     // Return Artifact Specific Definition.
     getSvgDefinition() {
-        console.groupCollapsed('Getting Definition of ' + this.getArtifactReference() + ' : ' + this.id);
         let definition = this.newSVGDefinition(this, this.getArtifactReference());
         let first_child = this.getParent().getChildOffset(this.getArtifactReference());
         definition['svg']['x'] = first_child.dx;
@@ -78,21 +74,9 @@ class AutonomousDatabaseView extends OkitDesignerArtefactView {
         definition['svg']['height'] = this.dimensions['height'];
         definition['rect']['stroke']['colour'] = stroke_colours.bark;
         definition['rect']['stroke']['dash'] = 1;
-        console.info(JSON.stringify(definition, null, 2));
-        console.groupEnd();
         return definition;
     }
 
-    isAttached() {
-        for (let instance of this.getOkitJson().instances) {
-            if (instance.autonomous_database_ids.includes(this.id)) {
-                console.info(this.display_name + ' attached to instance '+ instance.display_name);
-                return true;
-            }
-        }
-        return false;
-    }
-
     /*
     ** Property Sheet Load function
      */
@@ -117,13 +101,46 @@ class AutonomousDatabaseView extends OkitDesignerArtefactView {
                 $('#license_model').attr('disabled', true);
                 $('#is_auto_scaling_enabled').attr('disabled', true);
             }
-            loadPropertiesSheet(me);
+            loadPropertiesSheet(me.artefact);
         });
     }
 
+    /*
+    ** Load and display Value Proposition
+     */
     loadValueProposition() {
         $(jqId(VALUE_PROPOSITION_PANEL)).load("valueproposition/autonomous_database.html");
     }
 
+    /*
+    ** Child Type Functions
+     */
+    getTopArtifacts() {
+        return [Instance.getArtifactReference()];
+    }
+
+    getContainerArtifacts() {
+        return [Compartment.getArtifactReference(), VirtualCloudNetwork.getArtifactReference()];
+    }
+
+    getLeftArtifacts() {
+        return [BlockStorageVolume.getArtifactReference()];
+    }
+
+    getRightArtifacts() {
+        return [DynamicRoutingGateway.getArtifactReference(), AutonomousDatabase.getArtifactReference(),
+            ObjectStorageBucket.getArtifactReference(), FastConnect.getArtifactReference()];
+    }
+
+    /*
+    ** Static Functionality
+     */
+    static getArtifactReference() {
+        return AutonomousDatabase.getArtifactReference();
+    }
+
+    static getDropTargets() {
+        return [Compartment.getArtifactReference()];
+    }
 
 }
\ No newline at end of file
diff --git a/okitweb/static/okit/view/designer/js/artefacts/block_storage_volume.js b/okitweb/static/okit/view/designer/js/artefacts/block_storage_volume.js
new file mode 100644
index 000000000..e5490a6a0
--- /dev/null
+++ b/okitweb/static/okit/view/designer/js/artefacts/block_storage_volume.js
@@ -0,0 +1,91 @@
+/*
+** Copyright (c) 2020, Oracle and/or its affiliates.
+** Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl.
+*/
+console.info('Loaded Designer BlockStorageVolume View Javascript');
+
+/*
+** Define BlockStorageVolume View Artifact Class
+ */
+class BlockStorageVolumeView extends OkitDesignerArtefactView {
+    constructor(artefact=null, json_view) {
+        super(artefact, json_view);
+    }
+
+    get parent_id() {return this.attached_id ? this.attached_id : this.artefact.compartment_id;}
+    get attached() {
+        if (!this.attached_id) {
+            for (let instance of this.getOkitJson().instances) {
+                if (instance.block_storage_volume_ids.includes(this.id)) {
+                    console.info(this.display_name + ' attached to instance ' + instance.display_name);
+                    return true;
+                }
+            }
+        }
+        return false;
+    }
+
+    getParent() {
+        return this.attached_id ? this.getJsonView().getInstance(this.parent_id) : this.getJsonView().getCompartment(this.parent_id);
+    }
+
+    getParentId() {
+        return this.parent_id;
+    }
+
+    /*
+     ** SVG Processing
+     */
+    // Additional draw Processing
+    draw() {
+        console.group('Drawing ' + this.getArtifactReference() + ' : ' + this.id + ' [' + this.parent_id + ']');
+        console.info(`Hide Attached : ${okitSettings.hide_attached}.`)
+        console.info(`Is Attached   : ${this.attached}.`)
+        if (!okitSettings.hide_attached || !this.attached) {
+            console.info(`${this.display_name} is either not attached and we are displaying attached`);
+            let svg = super.draw();
+        }
+        console.groupEnd();
+    }
+
+    // Return Artifact Specific Definition.
+    getSvgDefinition() {
+        let definition = this.newSVGDefinition(this, this.getArtifactReference());
+        let first_child = this.getParent().getChildOffset(this.getArtifactReference());
+        definition['svg']['x'] = first_child.dx;
+        definition['svg']['y'] = first_child.dy;
+        definition['svg']['width'] = this.dimensions['width'];
+        definition['svg']['height'] = this.dimensions['height'];
+        definition['rect']['stroke']['colour'] = stroke_colours.bark;
+        definition['rect']['stroke']['dash'] = 1;
+        return definition;
+    }
+
+    /*
+    ** Property Sheet Load function
+     */
+    loadProperties() {
+        let okitJson = this.getOkitJson();
+        let me = this;
+        $(jqId(PROPERTIES_PANEL)).load("propertysheets/block_storage_volume.html", () => {loadPropertiesSheet(me.artefact);});
+    }
+
+    /*
+    ** Load and display Value Proposition
+     */
+    loadValueProposition() {
+        $(jqId(VALUE_PROPOSITION_PANEL)).load("valueproposition/block_storage_volume.html");
+    }
+
+    /*
+    ** Static Functionality
+     */
+    static getArtifactReference() {
+        return BlockStorageVolume.getArtifactReference();
+    }
+
+    static getDropTargets() {
+        return [Compartment.getArtifactReference()];
+    }
+
+}
\ No newline at end of file
diff --git a/okitweb/static/okit/view/designer/js/artefact/compartment.js b/okitweb/static/okit/view/designer/js/artefacts/compartment.js
similarity index 64%
rename from okitweb/static/okit/view/designer/js/artefact/compartment.js
rename to okitweb/static/okit/view/designer/js/artefacts/compartment.js
index 796553eff..2c4eb6cd4 100644
--- a/okitweb/static/okit/view/designer/js/artefact/compartment.js
+++ b/okitweb/static/okit/view/designer/js/artefacts/compartment.js
@@ -7,26 +7,27 @@ console.info('Loaded Designer Compartment View Javascript');
 /*
 ** Define Compartment View Artifact Class
  */
-class CompartmentView extends OkitDesignerArtefactView {
+class CompartmentView extends OkitContainerDesignerArtefactView {
     constructor(artefact=null, json_view) {
         super(artefact, json_view);
-        this.parent_id = artefact.compartment_id;
     }
 
+    get parent_id() {
+        console.info(`Compartment Id ${this.artefact.compartment_id}`);
+        return (this.artefact.compartment_id !== null && this.artefact.compartment_id !== this.artefact.id) ? this.artefact.compartment_id : 'canvas';
+    }
+    get minimum_width() {return 400;}
+    get minimum_height() {return 150;}
     get minimum_dimensions() {
         if (this.isTopLevel()) {
             return {width: $(`#${this.json_view.parent_id}`).width(), height: $(`#${this.json_view.parent_id}`).height()};
         } else {
-            return {width: container_artifact_x_padding * 2, height: container_artifact_y_padding * 2};
+            return super.minimum_dimensions;
         }
     }
 
     getParent() {
-        return this.artefact.getOkitJson().getCompartment(this.getParentId());
-    }
-
-    getParentId() {
-        return this.parent_id;
+        return this.getJsonView().getCompartment(this.parent_id);
     }
 
     /*
@@ -34,7 +35,7 @@ class CompartmentView extends OkitDesignerArtefactView {
      */
 
     isTopLevel() {
-        return !this.getParent();
+        return this.getParent() ? false : true;
     }
 
     /*
@@ -48,7 +49,7 @@ class CompartmentView extends OkitDesignerArtefactView {
     ** SVG Processing
     */
     getSvgDefinition() {
-        let definition = this.newSVGDefinition(this, Compartment.getArtifactReference());
+        let definition = this.newSVGDefinition();
         console.info('>>>>>>>> Parent');
         console.info(this.getParent());
         if (this.getParent()) {
@@ -73,10 +74,30 @@ class CompartmentView extends OkitDesignerArtefactView {
      */
     loadProperties() {
         let me = this;
-        $(jqId(PROPERTIES_PANEL)).load("propertysheets/compartment.html", () => {loadPropertiesSheet(me);});
+        $(jqId(PROPERTIES_PANEL)).load("propertysheets/compartment.html", () => {loadPropertiesSheet(me.artefact);});
     }
 
 
+    /*
+    ** Child Type Functions
+     */
+    getTopArtifacts() {
+        return [Instance.getArtifactReference()];
+    }
+
+    getContainerArtifacts() {
+        return [Compartment.getArtifactReference(), VirtualCloudNetwork.getArtifactReference()];
+    }
+
+    getLeftArtifacts() {
+        return [BlockStorageVolume.getArtifactReference()];
+    }
+
+    getRightArtifacts() {
+        return [DynamicRoutingGateway.getArtifactReference(), AutonomousDatabase.getArtifactReference(),
+            ObjectStorageBucket.getArtifactReference(), FastConnect.getArtifactReference()];
+    }
+
     /*
     ** Static Functionality
      */
diff --git a/okitweb/static/okit/js/oci_artefacts/database_system.js b/okitweb/static/okit/view/designer/js/artefacts/database_system.js
similarity index 52%
rename from okitweb/static/okit/js/oci_artefacts/database_system.js
rename to okitweb/static/okit/view/designer/js/artefacts/database_system.js
index 14d04e4d8..c8be2819a 100644
--- a/okitweb/static/okit/js/oci_artefacts/database_system.js
+++ b/okitweb/static/okit/view/designer/js/artefacts/database_system.js
@@ -2,111 +2,31 @@
 ** Copyright (c) 2020, Oracle and/or its affiliates.
 ** Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl.
 */
-console.info('Loaded Database System Javascript');
-
-const database_system_query_cb = "database-system-query-cb";
+console.info('Loaded Designer DatabaseSystem View Javascript');
 
 /*
-** Define Autonomous Database Class
+** Define DatabaseSystem View Artifact Class
  */
-class DatabaseSystem extends OkitArtifact {
-    /*
-    ** Create
-     */
-    constructor (data={}, okitjson={}, parent=null) {
-        super(okitjson);
-        this.parent_id = data.parent_id;
-        // Configure default values
-        this.display_name = this.generateDefaultName(okitjson.database_systems.length + 1);
-        this.compartment_id = data.parent_id;
-        this.availability_domain = 1;
-        this.database_edition = 'STANDARD_EDITION';
-        this.db_home = {
-            database: {
-                admin_password: generatePassword(),
-                db_name: this.display_name.replace('-', '').substr(4, 8),
-                db_workload: 'OLTP'
-            },
-            db_version: '12.2.0.1'
-        };
-        this.hostname = this.display_name.toLowerCase();
-        this.shape = 'VM.Standard2.1';
-        this.ssh_public_keys = '';
-        this.subnet_id = data.parent_id;
-        this.backup_network_nsg_ids = [];
-        this.backup_subnet_id = '';
-        this.cluster_name = '';
-        this.cpu_core_count = 0;
-        this.data_storage_percentage = 80;
-        this.data_storage_size_in_gb = 256;
-        this.db_system_options = {
-            storage_management: 'ASM'
-        }
-        this.disk_redundancy = '';
-        this.domain = '';
-        this.fault_domains = [];
-        this.license_model = 'LICENSE_INCLUDED';
-        this.node_count = 1;
-        this.nsg_ids = [];
-        this.source = 'NONE'
-        this.sparse_diskgroup = false;
-        this.time_zone = '+00:00';
-        // Update with any passed data
-        this.merge(data);
-        this.convert();
-        // Check if built from a query
-        if (this.availability_domain.length > 1) {
-            this.region_availability_domain = this.availability_domain;
-            this.availability_domain = this.getAvailabilityDomainNumber(this.region_availability_domain);
-        }
-        // Add Get Parent function
-        if (parent !== null) {
-            this.getParent = () => {return parent};
-        }
-    }
-
-
-    /*
-    ** Clone Functionality
-     */
-    clone() {
-        return new DatabaseSystem(this, this.getOkitJson());
+class DatabaseSystemView extends OkitDesignerArtefactView {
+    constructor(artefact=null, json_view) {
+        super(artefact, json_view);
     }
 
-
-    /*
-    ** Parent Processing Override
-     */
-    getParentId() {
-        return this.compartment_id;
-    }
+    get parent_id() {return this.artefact.subnet_id;}
 
     getParent() {
-        return this.getOkitJson().getSubnet(this.subnet_id);
+        return this.getJsonView().getSubnet(this.parent_id);
     }
 
-
-
-    /*
-    ** Delete Processing
-     */
-    deleteChildren() {
-        // Remove Instance references
-        for (let instance of this.getOkitJson().instances) {
-            for (let i=0; i < instance['database_system_ids'].length; i++) {
-                if (instance.database_system_ids[i] === this.id) {
-                    instance.database_system_ids.splice(i, 1);
-                }
-            }
-        }
+    getParentId() {
+        return this.parent_id;
     }
 
-
     /*
      ** SVG Processing
      */
     draw() {
-        console.groupCollapsed('Drawing ' + this.getArtifactReference() + ' : ' + this.id + ' [' + this.parent_id + ']');
+        console.group('Drawing ' + this.getArtifactReference() + ' : ' + this.id + ' [' + this.parent_id + ']');
         //if (this.isAttached()) {
         //    console.groupEnd();
         //    return;
@@ -139,40 +59,19 @@ class DatabaseSystem extends OkitArtifact {
 
     // Return Artifact Specific Definition.
     getSvgDefinition() {
-        console.groupCollapsed('Getting Definition of ' + this.getArtifactReference() + ' : ' + this.id);
         let definition = this.newSVGDefinition(this, this.getArtifactReference());
-        let dimensions = this.getDimensions();
         if (this.getParent()) {
             let first_child = this.getParent().getChildOffset(this.getArtifactReference());
             definition['svg']['x'] = first_child.dx;
             definition['svg']['y'] = first_child.dy;
         }
-        definition['svg']['width'] = dimensions['width'];
-        definition['svg']['height'] = dimensions['height'];
+        definition['svg']['width'] = this.dimensions['width'];
+        definition['svg']['height'] = this.dimensions['height'];
         definition['rect']['stroke']['colour'] = stroke_colours.bark;
         definition['rect']['stroke']['dash'] = 1;
-        console.info(JSON.stringify(definition, null, 2));
-        console.groupEnd();
         return definition;
     }
 
-    // Return Artifact Dimensions
-    getDimensions() {
-        console.groupCollapsed('Getting Dimensions of ' + this.getArtifactReference() + ' : ' + this.id);
-        let dimensions = this.getMinimumDimensions();
-        // Calculate Size based on Child Artifacts
-        // Check size against minimum
-        dimensions.width  = Math.max(dimensions.width,  this.getMinimumDimensions().width);
-        dimensions.height = Math.max(dimensions.height, this.getMinimumDimensions().height);
-        console.info('Overall Dimensions       : ' + JSON.stringify(dimensions));
-        console.groupEnd();
-        return dimensions;
-    }
-
-    getMinimumDimensions() {
-        return {width: icon_width, height:icon_height};
-    }
-
     isAttached() {
         for (let instance of this.getOkitJson().instances) {
             if (instance.database_system_ids.includes(this.id)) {
@@ -250,7 +149,7 @@ class DatabaseSystem extends OkitArtifact {
                 }
             });
             // Load Properties
-            loadPropertiesSheet(me);
+            loadPropertiesSheet(me.artefact);
             // Click Select Lists we have added dynamic on click to
             $(shape_select).change();
         });
@@ -266,75 +165,22 @@ class DatabaseSystem extends OkitArtifact {
         }
     }
 
-
-
-    getNamePrefix() {
-        return super.getNamePrefix() + 'ds';
+    /*
+    ** Load and display Value Proposition
+     */
+    loadValueProposition() {
+        $(jqId(VALUE_PROPOSITION_PANEL)).load("valueproposition/database_system.html");
     }
 
     /*
     ** Static Functionality
      */
     static getArtifactReference() {
-        return 'Database System';
+        return DatabaseSystem.getArtifactReference();
     }
 
     static getDropTargets() {
         return [Subnet.getArtifactReference()];
     }
 
-    static query(request = {}, region='') {
-        console.info('------------- Autonomous Database Query --------------------');
-        console.info('------------- Compartment : ' + request.compartment_id);
-        let me = this;
-        queryCount++;
-        $.ajax({
-            type: 'get',
-            url: 'oci/artifacts/DatabaseSystem',
-            dataType: 'text',
-            contentType: 'application/json',
-            data: JSON.stringify(request),
-            success: function(resp) {
-                let response_json = JSON.parse(resp);
-                regionOkitJson[region].load({database_systems: response_json});
-                for (let artifact of response_json) {
-                    console.info(me.getArtifactReference() + ' Query : ' + artifact.display_name);
-                }
-                redrawSVGCanvas(region);
-                $('#' + database_system_query_cb).prop('checked', true);
-                queryCount--;
-                hideQueryProgressIfComplete();
-            },
-            error: function(xhr, status, error) {
-                console.info('Status : ' + status)
-                console.info('Error : ' + error)
-                $('#' + database_system_query_cb).prop('checked', true);
-                queryCount--;
-                hideQueryProgressIfComplete();
-            }
-        });
-    }
-}
-
-$(document).ready(function() {
-    // Setup Search Checkbox
-    let body = d3.select('#query-progress-tbody');
-    let row = body.append('tr');
-    let cell = row.append('td');
-    cell.append('input')
-        .attr('type', 'checkbox')
-        .attr('id', database_system_query_cb);
-    cell.append('label').text(DatabaseSystem.getArtifactReference());
-
-    // Setup Query Display Form
-    body = d3.select('#query-oci-tbody');
-    row = body.append('tr');
-    cell = row.append('td')
-        .text(DatabaseSystem.getArtifactReference());
-    cell = row.append('td');
-    let input = cell.append('input')
-        .attr('type', 'text')
-        .attr('class', 'query-filter')
-        .attr('id', 'database_system_name_filter')
-        .attr('name', 'database_system_name_filter');
-});
+}
\ No newline at end of file
diff --git a/okitweb/static/okit/js/oci_artefacts/dynamic_routing_gateway.js b/okitweb/static/okit/view/designer/js/artefacts/dynamic_routing_gateway.js
similarity index 50%
rename from okitweb/static/okit/js/oci_artefacts/dynamic_routing_gateway.js
rename to okitweb/static/okit/view/designer/js/artefacts/dynamic_routing_gateway.js
index f7a0002bf..dc95e971b 100644
--- a/okitweb/static/okit/js/oci_artefacts/dynamic_routing_gateway.js
+++ b/okitweb/static/okit/view/designer/js/artefacts/dynamic_routing_gateway.js
@@ -2,65 +2,31 @@
 ** Copyright (c) 2020, Oracle and/or its affiliates.
 ** Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl.
 */
-console.info('Loaded Dynamic Routing Gateway Javascript');
-
-const dynamic_routing_gateway_query_cb = "dynamic-routing-gateway-query-cb";
+console.info('Loaded Designer DynamicRoutingGateway View Javascript');
 
 /*
-** Define Dynamic Routing Gateway Class
+** Define DynamicRoutingGateway View Artifact Class
  */
-class DynamicRoutingGateway extends OkitArtifact {
-    /*
-    ** Create
-     */
-    constructor (data={}, okitjson={}, parent=null) {
-        super(okitjson);
-        this.parent_id = data.parent_id;
-        // Configure default values
-        this.display_name = this.generateDefaultName(okitjson.dynamic_routing_gateways.length + 1);
-        this.compartment_id = data.compartment_id;
-        this.vcn_id = data.parent_id;
-        this.fast_connect_ids = [];
-        this.ipsec_connection_ids = [];
-        this.remote_peering_connection_ids = [];
-        // Update with any passed data
-        this.merge(data);
-        this.convert();
-        // Add Get Parent function
-        if (parent !== null) {
-            this.getParent = () => {return parent};
-        }
+class DynamicRoutingGatewayView extends OkitDesignerArtefactView {
+    constructor(artefact=null, json_view) {
+        super(artefact, json_view);
     }
 
+    get parent_id() {return this.artefact.vcn_id;}
 
-    /*
-    ** Clone Functionality
-     */
-    clone() {
-        return new DynamicRoutingGateway(this, this.getOkitJson());
+    getParent() {
+        return this.getJsonView().getVirtualCloudNetwork(this.parent_id);
     }
 
-
-    /*
-    ** Delete Processing
-     */
-    deleteChildren() {
-        // Remove Dynamic Routing Gateway references
-        for (let route_table of this.getOkitJson().route_tables) {
-            for (let i = 0; i < route_table.route_rules.length; i++) {
-                if (route_table.route_rules[i]['network_entity_id'] === this.id) {
-                    route_table.route_rules.splice(i, 1);
-                }
-            }
-        }
+    getParentId() {
+        return this.parent_id;
     }
 
-
     /*
      ** SVG Processing
      */
     draw() {
-        console.groupCollapsed('Drawing ' + this.getArtifactReference() + ' : ' + this.id + ' [' + this.parent_id + ']');
+        console.group('Drawing ' + this.getArtifactReference() + ' : ' + this.id + ' [' + this.parent_id + ']');
         let svg = super.draw();
         // Get Inner Rect to attach Connectors
         let rect = svg.select("rect[id='" + safeId(this.id) + "']");
@@ -86,7 +52,7 @@ class DynamicRoutingGateway extends OkitArtifact {
     }
 
     drawConnectors() {
-        console.groupCollapsed('Drawing Connectors for ' + this.getArtifactReference() + ' : ' + this.id + ' [' + this.parent_id + ']');
+        console.group('Drawing Connectors for ' + this.getArtifactReference() + ' : ' + this.id + ' [' + this.parent_id + ']');
         // Get Grand Parent
         let grandparent_id = d3.select(d3Id(this.parent_id)).attr('data-parent-id');
         // Define Connector Parent
@@ -130,38 +96,17 @@ class DynamicRoutingGateway extends OkitArtifact {
 
     // Return Artifact Specific Definition.
     getSvgDefinition() {
-        console.groupCollapsed('Getting Definition of ' + this.getArtifactReference() + ' : ' + this.id);
         let definition = this.newSVGDefinition(this, this.getArtifactReference());
-        let dimensions = this.getDimensions();
         let first_child = this.getParent().getChildOffset(this.getArtifactReference());
         definition['svg']['x'] = first_child.dx;
         definition['svg']['y'] = first_child.dy;
-        definition['svg']['width'] = dimensions['width'];
-        definition['svg']['height'] = dimensions['height'];
+        definition['svg']['width'] = this.dimensions['width'];
+        definition['svg']['height'] = this.dimensions['height'];
         definition['rect']['stroke']['colour'] = stroke_colours.bark;
         definition['rect']['stroke']['dash'] = 1;
-        console.info(JSON.stringify(definition, null, 2));
-        console.groupEnd();
         return definition;
     }
 
-    // Return Artifact Dimensions
-    getDimensions() {
-        console.groupCollapsed('Getting Dimensions of ' + this.getArtifactReference() + ' : ' + this.id);
-        let dimensions = this.getMinimumDimensions();
-        // Calculate Size based on Child Artifacts
-        // Check size against minimum
-        dimensions.width  = Math.max(dimensions.width,  this.getMinimumDimensions().width);
-        dimensions.height = Math.max(dimensions.height, this.getMinimumDimensions().height);
-        console.info('Overall Dimensions       : ' + JSON.stringify(dimensions));
-        console.groupEnd();
-        return dimensions;
-    }
-
-    getMinimumDimensions() {
-        return {width: icon_width, height:icon_height};
-    }
-
 
     /*
     ** Property Sheet Load function
@@ -178,79 +123,27 @@ class DynamicRoutingGateway extends OkitArtifact {
                 }
             }
             // Load Properties
-            loadPropertiesSheet(me);
-         });
+            loadPropertiesSheet(me.artefact);
+        });
     }
 
-
-    getNamePrefix() {
-        return super.getNamePrefix() + 'drg';
+    /*
+    ** Load and display Value Proposition
+     */
+    loadValueProposition() {
+        $(jqId(VALUE_PROPOSITION_PANEL)).load("valueproposition/dynamic_routing_gateway.html");
     }
 
     /*
     ** Static Functionality
      */
     static getArtifactReference() {
-        return 'Dynamic Routing Gateway';
+        return DynamicRoutingGateway.getArtifactReference();
     }
 
     static getDropTargets() {
         return [VirtualCloudNetwork.getArtifactReference()];
     }
 
-    static query(request = {}, region='') {
-        console.info('------------- Dynamic Routing Gateway Query --------------------');
-        console.info('------------- Compartment : ' + request.compartment_id);
-        let me = this;
-        queryCount++;
-        $.ajax({
-            type: 'get',
-            url: 'oci/artifacts/DynamicRoutingGateway',
-            dataType: 'text',
-            contentType: 'application/json',
-            data: JSON.stringify(request),
-            success: function(resp) {
-                let response_json = JSON.parse(resp);
-                regionOkitJson[region].load({dynamic_routing_gateways: response_json});
-                for (let artifact of response_json) {
-                    console.info(me.getArtifactReference() + ' Query : ' + artifact.display_name);
-                }
-                redrawSVGCanvas(region);
-                $('#' + dynamic_routing_gateway_query_cb).prop('checked', true);
-                queryCount--;
-                hideQueryProgressIfComplete();
-            },
-            error: function(xhr, status, error) {
-                console.info('Status : ' + status)
-                console.info('Error : ' + error)
-                $('#' + dynamic_routing_gateway_query_cb).prop('checked', true);
-                queryCount--;
-                hideQueryProgressIfComplete();
-            }
-        });
-    }
-}
-
-$(document).ready(function() {
-    // Setup Search Checkbox
-    let body = d3.select('#query-progress-tbody');
-    let row = body.append('tr');
-    let cell = row.append('td');
-    cell.append('input')
-        .attr('type', 'checkbox')
-        .attr('id', dynamic_routing_gateway_query_cb);
-    cell.append('label').text(DynamicRoutingGateway.getArtifactReference());
-
-    // Setup Query Display Form
-    body = d3.select('#query-oci-tbody');
-    row = body.append('tr');
-    cell = row.append('td')
-        .text(DynamicRoutingGateway.getArtifactReference());
-    cell = row.append('td');
-    let input = cell.append('input')
-        .attr('type', 'text')
-        .attr('class', 'query-filter')
-        .attr('id', 'dynamic_routing_gateway_name_filter')
-        .attr('name', 'dynamic_routing_gateway_name_filter');
-});
 
+}
\ No newline at end of file
diff --git a/okitweb/static/okit/view/designer/js/artefacts/fast_connect.js b/okitweb/static/okit/view/designer/js/artefacts/fast_connect.js
new file mode 100644
index 000000000..d9419ca24
--- /dev/null
+++ b/okitweb/static/okit/view/designer/js/artefacts/fast_connect.js
@@ -0,0 +1,96 @@
+/*
+** Copyright (c) 2020, Oracle and/or its affiliates.
+** Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl.
+*/
+console.info('Loaded Designer FastConnect View Javascript');
+
+/*
+** Define FastConnect View Artifact Class
+ */
+class FastConnectView extends OkitDesignerArtefactView {
+    constructor(artefact=null, json_view) {
+        super(artefact, json_view);
+    }
+
+    get parent_id() {return this.artefact.compartment_id;}
+
+    getParent() {
+        return this.getJsonView().getCompartment(this.parent_id);
+    }
+
+    getParentId() {
+        return this.parent_id;
+    }
+
+    /*
+     ** SVG Processing
+     */
+    draw() {
+        console.group('Drawing ' + this.getArtifactReference() + ' : ' + this.id + ' [' + this.parent_id + ']');
+        let me = this;
+        let svg = super.draw();
+        // Get Inner Rect to attach Connectors
+        let rect = svg.select("rect[id='" + safeId(this.id) + "']");
+        let boundingClientRect = rect.node().getBoundingClientRect();
+        // Add Connector Data
+        svg.attr("data-compartment-id", this.compartment_id)
+            .attr("data-connector-start-y", boundingClientRect.y + (boundingClientRect.height / 2))
+            .attr("data-connector-start-x", boundingClientRect.x)
+            .attr("data-connector-end-y", boundingClientRect.y + (boundingClientRect.height / 2))
+            .attr("data-connector-end-x", boundingClientRect.x)
+            .attr("data-connector-id", this.id)
+            .attr("dragable", true)
+            .selectAll("*")
+            .attr("data-connector-start-y", boundingClientRect.y + (boundingClientRect.height / 2))
+            .attr("data-connector-start-x", boundingClientRect.x)
+            .attr("data-connector-end-y", boundingClientRect.y + (boundingClientRect.height / 2))
+            .attr("data-connector-end-x", boundingClientRect.x)
+            .attr("data-connector-id", this.id)
+            .attr("dragable", true);
+        console.groupEnd();
+        return svg;
+    }
+
+    // Return Artifact Specific Definition.
+    getSvgDefinition() {
+        let definition = this.newSVGDefinition(this, this.getArtifactReference());
+        let first_child = this.getParent().getChildOffset(this.getArtifactReference());
+        definition['svg']['x'] = first_child.dx;
+        definition['svg']['y'] = first_child.dy;
+        definition['svg']['width'] = this.dimensions['width'];
+        definition['svg']['height'] = this.dimensions['height'];
+        definition['rect']['stroke']['colour'] = stroke_colours.purple;
+        definition['rect']['stroke']['dash'] = 1;
+        return definition;
+    }
+
+
+    /*
+    ** Property Sheet Load function
+     */
+    loadProperties() {
+        let okitJson = this.getOkitJson();
+        let me = this;
+        $(jqId(PROPERTIES_PANEL)).load("propertysheets/fast_connect.html", () => {loadPropertiesSheet(me.artefact);});
+    }
+
+    /*
+    ** Load and display Value Proposition
+     */
+    loadValueProposition() {
+        $(jqId(VALUE_PROPOSITION_PANEL)).load("valueproposition/fast_connect.html");
+    }
+
+    /*
+    ** Static Functionality
+     */
+    static getArtifactReference() {
+        return FastConnect.getArtifactReference();
+    }
+
+    static getDropTargets() {
+        return [Compartment.getArtifactReference()];
+    }
+
+
+}
\ No newline at end of file
diff --git a/okitweb/static/okit/view/designer/js/artefacts/file_storage_system.js b/okitweb/static/okit/view/designer/js/artefacts/file_storage_system.js
new file mode 100644
index 000000000..f75e3b96b
--- /dev/null
+++ b/okitweb/static/okit/view/designer/js/artefacts/file_storage_system.js
@@ -0,0 +1,109 @@
+/*
+** Copyright (c) 2020, Oracle and/or its affiliates.
+** Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl.
+*/
+console.info('Loaded Designer FileStorageSystem View Javascript');
+
+/*
+** Define FileStorageSystem View Artifact Class
+ */
+class FileStorageSystemView extends OkitDesignerArtefactView {
+    constructor(artefact=null, json_view) {
+        super(artefact, json_view);
+    }
+
+    get parent_id() {return this.artefact.primary_mount_target.subnet_id;}
+
+    getParent() {
+        return this.getJsonView().getSubnet(this.parent_id);
+    }
+
+    getParentId() {
+        return this.parent_id;
+    }
+
+    /*
+     ** SVG Processing
+     */
+    draw() {
+        console.group('Drawing ' + this.getArtifactReference() + ' : ' + this.id + ' [' + this.parent_id + ']');
+        let me = this;
+        let svg = super.draw();
+        console.groupEnd();
+    }
+
+    // Return Artifact Specific Definition.
+    getSvgDefinition() {
+        let definition = this.newSVGDefinition(this, this.getArtifactReference());
+        let first_child = this.getParent().getChildOffset(this.getArtifactReference());
+        definition['svg']['x'] = first_child.dx;
+        definition['svg']['y'] = first_child.dy;
+        definition['svg']['width'] = this.dimensions['width'];
+        definition['svg']['height'] = this.dimensions['height'];
+        definition['rect']['stroke']['colour'] = stroke_colours.bark;
+        definition['rect']['stroke']['dash'] = 1;
+        return definition;
+    }
+
+    // Return Artifact Dimensions
+    getDimensions() {
+        console.group('Getting Dimensions of ' + this.getArtifactReference() + ' : ' + this.id);
+        let dimensions = this.getMinimumDimensions();
+        // Calculate Size based on Child Artifacts
+        // Check size against minimum
+        dimensions.width  = Math.max(dimensions.width,  this.getMinimumDimensions().width);
+        dimensions.height = Math.max(dimensions.height, this.getMinimumDimensions().height);
+        console.info('Overall Dimensions       : ' + JSON.stringify(dimensions));
+        console.groupEnd();
+        return dimensions;
+    }
+
+    getMinimumDimensions() {
+        return {width: icon_width, height:icon_height};
+    }
+
+
+    /*
+    ** Property Sheet Load function
+     */
+    loadProperties() {
+        let okitJson = this.getOkitJson();
+        let me = this;
+        $(jqId(PROPERTIES_PANEL)).load("propertysheets/file_storage_system.html", () => {
+            // Build Network Security Groups
+            let nsg_select = $(jqId('nsg_ids'));
+            this.loadNetworkSecurityGroups(nsg_select, this.primary_mount_target.subnet_id);
+            // Load Properties
+            loadPropertiesSheet(me.artefact);
+        });
+    }
+
+    loadNetworkSecurityGroups(select, subnet_id) {
+        $(select).empty();
+        let vcn = this.getOkitJson().getVirtualCloudNetwork(this.getOkitJson().getSubnet(subnet_id).vcn_id);
+        for (let networkSecurityGroup of this.getOkitJson().network_security_groups) {
+            if (networkSecurityGroup.vcn_id === vcn.id) {
+                select.append($('<option>').attr('value', networkSecurityGroup.id).text(networkSecurityGroup.display_name));
+            }
+        }
+    }
+
+    /*
+    ** Load and display Value Proposition
+     */
+    loadValueProposition() {
+        $(jqId(VALUE_PROPOSITION_PANEL)).load("valueproposition/file_storage_system.html");
+    }
+
+    /*
+    ** Static Functionality
+     */
+    static getArtifactReference() {
+        return FileStorageSystem.getArtifactReference();
+    }
+
+    static getDropTargets() {
+        return [Subnet.getArtifactReference()];
+    }
+
+}
\ No newline at end of file
diff --git a/okitweb/static/okit/view/designer/js/artefacts/fragment.js b/okitweb/static/okit/view/designer/js/artefacts/fragment.js
new file mode 100644
index 000000000..cb26202b5
--- /dev/null
+++ b/okitweb/static/okit/view/designer/js/artefacts/fragment.js
@@ -0,0 +1,469 @@
+/*
+** Copyright (c) 2020, Oracle and/or its affiliates.
+** Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl.
+*/
+console.info('Loaded Designer Fragment View Javascript');
+
+/*
+** Define Compartment View Artifact Class
+ */
+class FragmentView extends OkitContainerDesignerArtefactView {
+    constructor(artefact = null, json_view) {
+        super(artefact, json_view);
+    }
+
+    get fragment_title() {return this.artefact.fragment_title;}
+    get fragment_url() {return this.artefact.fragment_title;}
+    get target_id() {return this.artefact.target_id;}
+    get target_type() {return this.artefact.target_type;}
+
+    load() {
+        console.info('Loading ' + this.artefact.fragment_url);
+        console.info(this);
+        // Need local variables for ajax success to access
+        let me = this;
+        $.ajax({
+            type: 'get',
+            url: this.artefact.fragment_url,
+            dataType: 'text',
+            contentType: 'application/json',
+            success: function(resp) {
+                let fragment_json = JSON.parse(resp);
+                me.artefact.load(fragment_json);
+                me.artefact.updateIds();
+                me.mergeJson();
+                me.json_view.draw();
+            },
+            error: function(xhr, status, error) {
+                console.error('Status : ' + status);
+                console.error('Error  : ' + error);
+            }
+        });
+    }
+
+    /*
+    ** Merge Loaded Fragment
+     */
+
+    mergeJson() {
+        if (this.target_type === Compartment.getArtifactReference()) {
+            this.mergeToCompartment();
+        } else if (this.target_type === VirtualCloudNetwork.getArtifactReference()) {
+            this.mergeToVirtualCloudNetwork();
+        } else {
+            console.warn('Invalid Target Type for Merge ' + this.target_type);
+        }
+    }
+
+    mergeToCompartment() {
+        // Find Root Compartment
+        let root_compartment_id = null;
+        for (let compartment of this.artefact.getCompartments()) {
+            if (compartment.compartment_id === null || compartment.compartment_id === compartment.id) {
+                root_compartment_id = compartment.id;
+                break;
+            }
+        }
+        // Merge Containers Artefacts
+        this.mergeCompartments(root_compartment_id);
+        this.mergeVirtualCloudNetworks(root_compartment_id);
+        this.mergeSubnets(root_compartment_id);
+        // Merge Simple Artefacts
+        this.mergeAutonomousDatabases(root_compartment_id);
+        this.mergeBlockStorageVolumes(root_compartment_id);
+        this.mergeDatabaseSystems(root_compartment_id);
+        this.mergeDynamicRoutingGateways(root_compartment_id);
+        this.mergeFastConnects(root_compartment_id);
+        this.mergeFileStorageSystems(root_compartment_id);
+        this.mergeInstances(root_compartment_id);
+        this.mergeInternetGateways(root_compartment_id);
+        this.mergeLoadBalancers(root_compartment_id);
+        this.mergeLocalPeeringGateways(root_compartment_id);
+        this.mergeNATGateways(root_compartment_id);
+        this.mergeNetworkSecurityGroups(root_compartment_id);
+        this.mergeObjectStorageBuckets(root_compartment_id);
+        this.mergeRouteTables(root_compartment_id);
+        this.mergeSecurityLists(root_compartment_id);
+        this.mergeServiceGateways(root_compartment_id);
+    }
+
+    mergeToVirtualCloudNetwork() {
+        // Loop through Virtual Cloud Networks in fragment and insert contents into target VCN
+        let root_vcn_id = null;
+        let root_compartment_id = null;
+        for (let vcn of this.artefact.getVirtualCloudNetworks()) {
+            console.info(`Processing ${vcn.display_name}`);
+            root_vcn_id = vcn.id;
+            root_compartment_id = vcn.compartment_id;
+            // Merge Containers Artefacts
+            this.mergeSubnets(root_compartment_id, root_vcn_id);
+            // Merge Simple Artefacts
+            // Merge Route Tables first because they may need to be update as part of later merge
+            this.mergeRouteTables(root_compartment_id, root_vcn_id);
+            this.mergeDatabaseSystems(root_compartment_id, root_vcn_id);
+            this.mergeDynamicRoutingGateways(root_compartment_id, root_vcn_id);
+            this.mergeFileStorageSystems(root_compartment_id, root_vcn_id);
+            this.mergeInstances(root_compartment_id, root_vcn_id);
+            this.mergeInternetGateways(root_compartment_id, root_vcn_id);
+            this.mergeLoadBalancers(root_compartment_id, root_vcn_id);
+            this.mergeLocalPeeringGateways(root_compartment_id, root_vcn_id);
+            this.mergeNATGateways(root_compartment_id, root_vcn_id);
+            this.mergeNetworkSecurityGroups(root_compartment_id, root_vcn_id);
+            this.mergeSecurityLists(root_compartment_id, root_vcn_id);
+            this.mergeServiceGateways(root_compartment_id, root_vcn_id);
+        }
+    }
+
+    mergeAutonomousDatabases(root_compartment_id) {
+        for (let artefact of this.artefact.getAutonomousDatabases()) {
+            // Remove existing reference to fragment OKIT Json so it can be replaced with the Json View version.
+            delete artefact.getOkitJson;
+            let clone = this.json_view.getOkitJson().newAutonomousDatabase(artefact);
+            if (clone.compartment_id === root_compartment_id) {
+                clone.compartment_id = this.target_id;
+            }
+            this.json_view.newAutonomousDatabase(clone);
+        }
+    }
+
+    mergeBlockStorageVolumes(root_compartment_id) {
+        for (let artefact of this.artefact.getBlockStorageVolumes()) {
+            // Remove existing reference to fragment OKIT Json so it can be replaced with the Json View version.
+            delete artefact.getOkitJson;
+            let clone = this.json_view.getOkitJson().newBlockStorageVolume(artefact);
+            if (clone.compartment_id === root_compartment_id) {
+                clone.compartment_id = this.target_id;
+            }
+            this.json_view.newBlockStorageVolume(clone);
+        }
+    }
+
+    mergeCompartments(root_compartment_id) {
+        // Merge Sub Compartments
+        for (let artefact of this.artefact.getCompartments()) {
+            // Remove existing reference to fragment OKIT Json so it can be replaced with the Json View version.
+            delete artefact.getOkitJson;
+            if (root_compartment_id && artefact.id !== root_compartment_id) {
+                let clone = this.json_view.getOkitJson().newCompartment(artefact);
+                if (clone.compartment_id === root_compartment_id) {
+                    clone.compartment_id = this.target_id;
+                }
+                this.json_view.newCompartment(clone);
+            }
+        }
+    }
+
+    mergeDatabaseSystems(root_compartment_id, root_vcn_id = null) {
+        for (let artefact of this.artefact.getDatabaseSystems()) {
+            // Remove existing reference to fragment OKIT Json so it can be replaced with the Json View version.
+            delete artefact.getOkitJson;
+            if (artefact.vcn_id === root_vcn_id) {
+                let clone = this.json_view.getOkitJson().newDatabaseSystem(artefact);
+                clone.vcn_id = this.target_id;
+                clone.compartment_id = this.json_view.getOkitJson().getVirtualCloudNetwork(this.target_id).compartment_id;
+                this.json_view.newDatabaseSystem(clone);
+            } else {
+                let clone = this.json_view.getOkitJson().newDatabaseSystem(artefact);
+                if (clone.compartment_id === root_compartment_id) {
+                    clone.compartment_id = this.target_id;
+                }
+                this.json_view.newDatabaseSystem(clone);
+            }
+        }
+    }
+
+    mergeDynamicRoutingGateways(root_compartment_id, root_vcn_id = null) {
+        for (let artefact of this.artefact.getDynamicRoutingGateways()) {
+            // Remove existing reference to fragment OKIT Json so it can be replaced with the Json View version.
+            delete artefact.getOkitJson;
+            if (artefact.vcn_id === root_vcn_id) {
+                let clone = this.json_view.getOkitJson().newDynamicRoutingGateway(artefact);
+                clone.vcn_id = this.target_id;
+                clone.compartment_id = this.json_view.getOkitJson().getVirtualCloudNetwork(this.target_id).compartment_id;
+                this.json_view.newDynamicRoutingGateway(clone);
+            } else {
+                let clone = this.json_view.getOkitJson().newDynamicRoutingGateway(artefact);
+                if (clone.compartment_id === root_compartment_id) {
+                    clone.compartment_id = this.target_id;
+                }
+                this.json_view.newDynamicRoutingGateway(clone);
+            }
+        }
+    }
+
+    mergeFastConnects(root_compartment_id) {
+        for (let artefact of this.artefact.getFastConnects()) {
+            // Remove existing reference to fragment OKIT Json so it can be replaced with the Json View version.
+            delete artefact.getOkitJson;
+            let clone = this.json_view.getOkitJson().newFastConnect(artefact);
+            if (clone.compartment_id === root_compartment_id) {
+                clone.compartment_id = this.target_id;
+            }
+            this.json_view.newFastConnect(clone);
+        }
+    }
+
+    mergeFileStorageSystems(root_compartment_id, root_vcn_id = null) {
+        for (let artefact of this.artefact.getFileStorageSystems()) {
+            // Remove existing reference to fragment OKIT Json so it can be replaced with the Json View version.
+            delete artefact.getOkitJson;
+            if (artefact.vcn_id === root_vcn_id) {
+                let clone = this.json_view.getOkitJson().newFileStorageSystem(artefact);
+                clone.vcn_id = this.target_id;
+                clone.compartment_id = this.json_view.getOkitJson().getVirtualCloudNetwork(this.target_id).compartment_id;
+                this.json_view.newFileStorageSystem(clone);
+            } else {
+                let clone = this.json_view.getOkitJson().newFileStorageSystem(artefact);
+                if (clone.compartment_id === root_compartment_id) {
+                    clone.compartment_id = this.target_id;
+                }
+                this.json_view.newFileStorageSystem(clone);
+            }
+        }
+    }
+
+    mergeInstances(root_compartment_id, root_vcn_id = null) {
+        for (let artefact of this.artefact.getInstances()) {
+            // Remove existing reference to fragment OKIT Json so it can be replaced with the Json View version.
+            delete artefact.getOkitJson;
+            if (root_vcn_id !== null && artefact.primary_vnic.subnet_id && artefact.primary_vnic.subnet_id !== '') {
+                let clone = this.json_view.getOkitJson().newInstance(artefact);
+                clone.compartment_id = this.json_view.getOkitJson().getSubnet(clone.primary_vnic.subnet_id).compartment_id;
+                this.json_view.newInstance(clone);
+            } else {
+                let clone = this.json_view.getOkitJson().newInstance(artefact);
+                if (clone.compartment_id === root_compartment_id) {
+                    clone.compartment_id = this.target_id;
+                }
+                this.json_view.newInstance(clone);
+            }
+        }
+    }
+
+    mergeInternetGateways(root_compartment_id, root_vcn_id = null) {
+        for (let artefact of this.artefact.getInternetGateways()) {
+            // Remove existing reference to fragment OKIT Json so it can be replaced with the Json View version.
+            delete artefact.getOkitJson;
+            if (artefact.vcn_id === root_vcn_id) {
+                let existing_ig = false;
+                let gateway = null;
+                for (gateway of this.json_view.getOkitJson().internet_gateways) {
+                    if (gateway.vcn_id === this.target_id) {
+                        existing_ig = true;
+                    }
+                }
+                if (existing_ig) {
+                    // Update Route Table Routes
+                    for (let route_table of this.json_view.getOkitJson().route_tables) {
+                        for (let rule of route_table.route_rules) {
+                            if (rule.network_entity_id === artefact.id) {
+                                rule.network_entity_id = gateway.id;
+                            }
+                        }
+                    }
+                } else {
+                    let clone = this.json_view.getOkitJson().newInternetGateway(artefact);
+                    clone.vcn_id = this.target_id;
+                    clone.compartment_id = this.json_view.getOkitJson().getVirtualCloudNetwork(this.target_id).compartment_id;
+                    this.json_view.newInternetGateway(clone);
+                }
+            } else {
+                let clone = this.json_view.getOkitJson().newInternetGateway(artefact);
+                if (clone.compartment_id === root_compartment_id) {
+                    clone.compartment_id = this.target_id;
+                }
+                this.json_view.newInternetGateway(clone);
+            }
+        }
+    }
+
+    mergeLoadBalancers(root_compartment_id, root_vcn_id = null) {
+        for (let artefact of this.artefact.getLoadBalancers()) {
+            // Remove existing reference to fragment OKIT Json so it can be replaced with the Json View version.
+            delete artefact.getOkitJson;
+            if (artefact.vcn_id === root_vcn_id) {
+                let clone = this.json_view.getOkitJson().newLoadBalancer(artefact);
+                clone.vcn_id = this.target_id;
+                clone.compartment_id = this.json_view.getOkitJson().getVirtualCloudNetwork(this.target_id).compartment_id;
+                this.json_view.newLoadBalancer(clone);
+            } else {
+                let clone = this.json_view.getOkitJson().newLoadBalancer(artefact);
+                if (clone.compartment_id === root_compartment_id) {
+                    clone.compartment_id = this.target_id;
+                }
+                this.json_view.newLoadBalancer(clone);
+            }
+        }
+    }
+
+    mergeLocalPeeringGateways(root_compartment_id, root_vcn_id = null) {
+        for (let artefact of this.artefact.getLocalPeeringGateways()) {
+            // Remove existing reference to fragment OKIT Json so it can be replaced with the Json View version.
+            delete artefact.getOkitJson;
+            if (artefact.vcn_id === root_vcn_id) {
+                let clone = this.json_view.getOkitJson().newLocalPeeringGateway(artefact);
+                clone.vcn_id = this.target_id;
+                clone.compartment_id = this.json_view.getOkitJson().getVirtualCloudNetwork(this.target_id).compartment_id;
+                this.json_view.newLocalPeeringGateway(clone);
+            } else {
+                let clone = this.json_view.getOkitJson().newLocalPeeringGateway(artefact);
+                if (clone.compartment_id === root_compartment_id) {
+                    clone.compartment_id = this.target_id;
+                }
+                this.json_view.newLocalPeeringGateway(clone);
+            }
+        }
+    }
+
+    mergeNATGateways(root_compartment_id, root_vcn_id = null) {
+        for (let artefact of this.artefact.getNATGateways()) {
+            // Remove existing reference to fragment OKIT Json so it can be replaced with the Json View version.
+            delete artefact.getOkitJson;
+            if (artefact.vcn_id === root_vcn_id) {
+                let clone = this.json_view.getOkitJson().newNATGateway(artefact);
+                clone.vcn_id = this.target_id;
+                clone.compartment_id = this.json_view.getOkitJson().getVirtualCloudNetwork(this.target_id).compartment_id;
+                this.json_view.newNATGateway(clone);
+            } else {
+                let clone = this.json_view.getOkitJson().newNATGateway(artefact);
+                if (clone.compartment_id === root_compartment_id) {
+                    clone.compartment_id = this.target_id;
+                }
+                this.json_view.newNATGateway(clone);
+            }
+        }
+    }
+
+    mergeNetworkSecurityGroups(root_compartment_id, root_vcn_id = null) {
+        for (let artefact of this.artefact.getNetworkSecurityGroups()) {
+            // Remove existing reference to fragment OKIT Json so it can be replaced with the Json View version.
+            delete artefact.getOkitJson;
+            if (artefact.vcn_id === root_vcn_id) {
+                let clone = this.json_view.getOkitJson().newNetworkSecurityGroup(artefact);
+                clone.vcn_id = this.target_id;
+                clone.compartment_id = this.json_view.getOkitJson().getVirtualCloudNetwork(this.target_id).compartment_id;
+                this.json_view.newNetworkSecurityGroup(clone);
+            } else {
+                let clone = this.json_view.getOkitJson().newNetworkSecurityGroup(artefact);
+                if (clone.compartment_id === root_compartment_id) {
+                    clone.compartment_id = this.target_id;
+                }
+                this.json_view.newNetworkSecurityGroup(clone);
+            }
+        }
+    }
+
+    mergeObjectStorageBuckets(root_compartment_id) {
+        for (let artefact of this.artefact.getObjectStorageBuckets()) {
+            // Remove existing reference to fragment OKIT Json so it can be replaced with the Json View version.
+            delete artefact.getOkitJson;
+            let clone = this.json_view.getOkitJson().newObjectStorageBucket(artefact);
+            if (clone.compartment_id === root_compartment_id) {
+                clone.compartment_id = this.target_id;
+            }
+            this.json_view.newObjectStorageBucket(clone);
+        }
+    }
+
+    mergeRouteTables(root_compartment_id, root_vcn_id = null) {
+        for (let artefact of this.artefact.getRouteTables()) {
+            // Remove existing reference to fragment OKIT Json so it can be replaced with the Json View version.
+            delete artefact.getOkitJson;
+            if (artefact.vcn_id === root_vcn_id) {
+                let clone = this.json_view.getOkitJson().newRouteTable(artefact);
+                clone.vcn_id = this.target_id;
+                clone.compartment_id = this.json_view.getOkitJson().getVirtualCloudNetwork(this.target_id).compartment_id;
+                this.json_view.newRouteTable(clone);
+            } else {
+                let clone = this.json_view.getOkitJson().newRouteTable(artefact);
+                if (clone.compartment_id === root_compartment_id) {
+                    clone.compartment_id = this.target_id;
+                }
+                this.json_view.newRouteTable(clone);
+            }
+        }
+    }
+
+    mergeSecurityLists(root_compartment_id, root_vcn_id = null) {
+        for (let artefact of this.artefact.getSecurityLists()) {
+            // Remove existing reference to fragment OKIT Json so it can be replaced with the Json View version.
+            delete artefact.getOkitJson;
+            if (artefact.vcn_id === root_vcn_id) {
+                let clone = this.json_view.getOkitJson().newSecurityList(artefact);
+                clone.vcn_id = this.target_id;
+                clone.compartment_id = this.json_view.getOkitJson().getVirtualCloudNetwork(this.target_id).compartment_id;
+                this.json_view.newSecurityList(clone);
+            } else {
+                let clone = this.artefact.okit_json.newSecurityList(artefact);
+                if (clone.compartment_id === root_compartment_id) {
+                    clone.compartment_id = this.target_id;
+                }
+                this.json_view.newSecurityList(clone);
+            }
+        }
+    }
+
+    mergeServiceGateways(root_compartment_id, root_vcn_id = null) {
+        for (let artefact of this.artefact.getServiceGateways()) {
+            // Remove existing reference to fragment OKIT Json so it can be replaced with the Json View version.
+            delete artefact.getOkitJson;
+            if (artefact.vcn_id === root_vcn_id) {
+                let clone = this.json_view.getOkitJson().newServiceGateway(artefact);
+                clone.vcn_id = this.target_id;
+                clone.compartment_id = this.json_view.getOkitJson().getVirtualCloudNetwork(this.target_id).compartment_id;
+                this.json_view.newServiceGateway(clone);
+            } else {
+                let clone = this.json_view.getOkitJson().newServiceGateway(artefact);
+                if (clone.compartment_id === root_compartment_id) {
+                    clone.compartment_id = this.target_id;
+                }
+                this.json_view.newServiceGateway(clone);
+            }
+        }
+    }
+
+    mergeSubnets(root_compartment_id, root_vcn_id = null) {
+        for (let artefact of this.artefact.getSubnets()) {
+            // Remove existing reference to fragment OKIT Json so it can be replaced with the Json View version.
+            delete artefact.getOkitJson;
+            if (artefact.vcn_id === root_vcn_id) {
+                let clone = this.json_view.getOkitJson().newSubnet(artefact);
+                clone.vcn_id = this.target_id;
+                clone.compartment_id = this.json_view.getOkitJson().getVirtualCloudNetwork(this.target_id).compartment_id;
+                this.json_view.newSubnet(clone);
+            } else {
+                let clone = this.json_view.getOkitJson().newSubnet(artefact);
+                if (clone.compartment_id === root_compartment_id) {
+                    clone.compartment_id = this.target_id;
+                }
+                this.json_view.newSubnet(clone);
+            }
+        }
+    }
+
+    mergeVirtualCloudNetworks(root_compartment_id) {
+        for (let artefact of this.artefact.getVirtualCloudNetworks()) {
+            // Remove existing reference to fragment OKIT Json so it can be replaced with the Json View version.
+            delete artefact.getOkitJson;
+            let clone = this.json_view.getOkitJson().newVirtualCloudNetwork(artefact);
+            console.info('Root Compartment Id : ' + root_compartment_id);
+            console.info('VCN Compartment Id  : ' + clone.compartment_id);
+            console.info('Target Id           : ' + this.target_id);
+            if (clone.compartment_id === root_compartment_id) {
+                clone.compartment_id = this.target_id;
+            }
+            this.json_view.newVirtualCloudNetwork(clone);
+        }
+    }
+
+    /*
+    ** Static Functionality
+     */
+    static getArtifactReference() {
+        return 'Fragment';
+    }
+
+    static getDropTargets() {
+        return [CompartmentView.getArtifactReference(), VirtualCloudNetwork.getArtifactReference()];
+    }
+}
\ No newline at end of file
diff --git a/okitweb/static/okit/js/oci_artefacts/instance.js b/okitweb/static/okit/view/designer/js/artefacts/instance.js
similarity index 58%
rename from okitweb/static/okit/js/oci_artefacts/instance.js
rename to okitweb/static/okit/view/designer/js/artefacts/instance.js
index 4193b5ca4..a8d7cb353 100644
--- a/okitweb/static/okit/js/oci_artefacts/instance.js
+++ b/okitweb/static/okit/view/designer/js/artefacts/instance.js
@@ -2,149 +2,64 @@
 ** Copyright (c) 2020, Oracle and/or its affiliates.
 ** Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl.
 */
-console.info('Loaded Instance Javascript');
-
-const instance_query_cb = "instance-query-cb";
-const min_instance_width = Math.round(icon_width * 3);
-const min_instance_height = Math.round(icon_height * 5 / 2);
+console.info('Loaded Designer Instance View Javascript');
 
 /*
-** Define Instance Class
+** Define Instance View Artifact Class
  */
-class Instance extends OkitArtifact {
-    /*
-    ** Create
-     */
-    constructor (data={}, okitjson={}, parent=null) {
-        super(okitjson);
-        this.parent_id = data.parent_id;
-        // Configure default values
-        // # Required
-        this.display_name = this.generateDefaultName(okitjson.instances.length + 1);
-        this.availability_domain = '1';
-        this.compartment_id = '';
-        this.shape = 'VM.Standard.E2.1';
-        // # Optional
-        this.fault_domain = '';
-        this.agent_config = {is_monitoring_disabled: false, is_management_disabled: false};
-        this.vnics = [];
-        this.source_details = {os: 'Oracle Linux', version: '7.7', boot_volume_size_in_gbs: '50', source_type: 'image'};
-        this.metadata = {ssh_authorized_keys: '', user_data: ''};
-        // TODO: Future
-        //this.launch_options_specified = false;
-        //this.launch_options = {boot_volume_type: '', firmware: '', is_consistent_volume_naming_enabled: false, is_pv_encryption_in_transit_enabled: false, network_type: '', remote_data_volume_type: ''};
-        this.block_storage_volume_ids = [];
-        this.object_storage_bucket_ids = [];
-        this.autonomous_database_ids = [];
-        this.preserve_boot_volume = false;
-        this.is_pv_encryption_in_transit_enabled = false;
-        // Update with any passed data
-        this.merge(data);
-        this.convert();
-        // Check if built from a query
-        if (this.availability_domain.length > 1) {
-            this.region_availability_domain = this.availability_domain;
-            this.availability_domain = this.getAvailabilityDomainNumber(this.region_availability_domain);
-        }
-        if (this.vnics.length > 0) {
-            this.primary_vnic = this.vnics[0];
-            for (let vnic of this.vnics) {
-                vnic.region_availability_domain = vnic.availability_domain;
-                vnic.availability_domain = this.getAvailabilityDomainNumber(vnic.region_availability_domain);
-            }
-        } else {
-            this.primary_vnic = {subnet_id: '', assign_public_ip: true, nsg_ids: [], skip_source_dest_check: false, hostname_label: this.display_name.toLowerCase() + '0'};
-            this.vnics[0] = this.primary_vnic;
-        }
-        // Add Parent Id to Primary VNIC if the parent is a subnet
-        if (parent !== null) {
-            if (parent.getArtifactReference() === Subnet.getArtifactReference()) {
-                this.primary_vnic.subnet_id = parent.id;
-            }
-        }
-        this.parent_id = this.getParentId();
+class InstanceView extends OkitDesignerArtefactView {
+    constructor(artefact=null, json_view) {
+        super(artefact, json_view);
     }
 
-    /*
-    ** Conversion Routine allowing loading of old json
-     */
-    convert() {
-        // Move Metadata elements
-        if (this.metadata === undefined) {this.metadata = {};}
-        if (this.cloud_init_yaml !== undefined) {this.metadata.user_data = String(this.cloud_init_yaml); delete this.cloud_init_yaml;}
-        if (this.authorized_keys !== undefined) {this.metadata.ssh_authorized_keys = this.authorized_keys; delete this.authorized_keys;}
-        if (this.metadata.authorized_keys !== undefined) {this.metadata.ssh_authorized_keys = this.metadata.authorized_keys; delete this.metadata.authorized_keys;}
-        // Move Source Details elements
-        if (this.source_details === undefined) {this.source_details = {};}
-        if (this.os !== undefined) {this.source_details.os = this.os; delete this.os;}
-        if (this.version !== undefined) {this.source_details.version = this.version; delete this.version;}
-        if (this.boot_volume_size_in_gbs !== undefined) {this.source_details.boot_volume_size_in_gbs = this.boot_volume_size_in_gbs; delete this.boot_volume_size_in_gbs;}
-        // Move Subnet_ids
-        if (this.vnics === undefined) {this.vnics = [];}
-        if (this.subnet_ids !== undefined) {if (this.subnet_ids.length > 0) {for (let subnet_id of this.subnet_ids) {this.vnics.push({subnet_id: subnet_id})}} delete this.subnet_ids;}
-        if (this.subnet_id !== undefined) {if (this.vnics.length === 0) {this.vnics.push({subnet_id: ''})} this.vnics[0].subnet_id = this.subnet_id; delete this.subnet_id;}
-        if (this.hostname_label !== undefined) {this.vnics[0].hostname_label = this.hostname_label; delete this.hostname_label;}
-        for (let vnic of this.vnics) {
-            if (!vnic.hasOwnProperty('assign_public_ip')) {vnic.assign_public_ip = true;}
-            if (!vnic.hasOwnProperty('skip_source_dest_check')) {vnic.skip_source_dest_check = false;}
-            if (!vnic.hasOwnProperty('nsg_ids')) {vnic.nsg_ids = [];}
-        }
-    }
-
-
-    /*
-    ** Clone Functionality
-     */
-    clone() {
-        return new Instance(this, this.getOkitJson());
-    }
-
-
-    /*
-    ** Parent Processing Override
-     */
-    getParentId() {
-        let primary_subnet = this.getOkitJson().getSubnet(this.primary_vnic.subnet_id);
-        console.info(`Primary Subnet ${JSON.stringify(primary_subnet)}`);
-        if (primary_subnet && primary_subnet.compartment_id === this.compartment_id) {
-            this.parent_id = this.primary_vnic.subnet_id;
+    get parent_id() {
+        let primary_subnet = this.getJsonView().getSubnet(this.artefact.primary_vnic.subnet_id);
+        if (primary_subnet && primary_subnet.compartment_id === this.artefact.compartment_id) {
+            console.info('Using Subnet as parent');
             return this.primary_vnic.subnet_id;
         } else {
-            this.parent_id = this.compartment_id;
+            console.info('Using Compartment as parent');
             return this.compartment_id;
         }
     }
+    get minimum_width() {return 135;}
+    get minimum_height() {return 100;}
+    get dimensions() {
+        console.group('Getting Dimensions of ' + this.getArtifactReference() + ' : ' + this.id);
+        let dimensions = this.minimum_dimensions;
+        // Calculate Size based on Child Artifacts
+        // Process Bottom Edge Artifacts
+        let offset = this.getFirstBottomEdgeChildOffset();
+        let bottom_edge_dimensions = {width: offset.dx, height: offset.dy};
+        // Block Storage
+        bottom_edge_dimensions.width += Math.round(this.block_storage_volume_ids.length * positional_adjustments.padding.x);
+        bottom_edge_dimensions.width += Math.round(this.block_storage_volume_ids.length * positional_adjustments.spacing.x);
+        // Virtual Network Interface Cards
+        bottom_edge_dimensions.width += Math.round(this.vnics.length * positional_adjustments.padding.x);
+        bottom_edge_dimensions.width += Math.round(this.vnics.length * positional_adjustments.spacing.x);
+        dimensions.width  = Math.max(dimensions.width, bottom_edge_dimensions.width);
+        dimensions.height = Math.max(dimensions.height, bottom_edge_dimensions.height);
+        // Check size against minimum
+        dimensions.width  = Math.max(dimensions.width,  this.minimum_dimensions.width);
+        dimensions.height = Math.max(dimensions.height, this.minimum_dimensions.height);
+        console.info('Overall Dimensions       : ' + JSON.stringify(dimensions));
+        console.groupEnd();
+        return dimensions;
+    }
 
     getParent() {
-        let primary_subnet = this.getOkitJson().getSubnet(this.primary_vnic.subnet_id);
-        if (primary_subnet && primary_subnet.compartment_id === this.compartment_id) {
-            return this.getOkitJson().getSubnet(this.primary_vnic.subnet_id);
-        } else {
-            return this.getOkitJson().getCompartment(this.compartment_id);
-        }
+        return this.getJsonView().getSubnet(this.parent_id) ? this.getJsonView().getSubnet(this.parent_id) : this.getJsonView().getCompartment(this.parent_id);
     }
 
-
-    /*
-    ** Delete Processing
-     */
-    deleteChildren() {
-        // Remove Load Balancer references
-        for (let load_balancer of this.getOkitJson().load_balancers) {
-            for (let i = 0; i < load_balancer.instance_ids.length; i++) {
-                if (load_balancer.instance_ids[i] === this.id) {
-                    load_balancer.instance_ids.splice(i, 1);
-                }
-            }
-        }
+    getParentId() {
+        return this.parent_id;
     }
 
-
     /*
      ** SVG Processing
      */
     draw() {
-        console.groupCollapsed('Drawing ' + this.getArtifactReference() + ' : ' + this.id + ' [' + this.parent_id + ']');
+        console.group('Drawing ' + this.getArtifactReference() + ' : ' + this.id + ' [' + this.parent_id + ']');
         let me = this;
         let svg = super.draw();
         // Get Inner Rect to attach Connectors
@@ -174,35 +89,34 @@ class Instance extends OkitArtifact {
     }
 
     drawAttachments() {
-        console.groupCollapsed('Drawing ' + Instance.getArtifactReference() + ' : ' + this.id + ' Attachments');
+        console.group('Drawing ' + Instance.getArtifactReference() + ' : ' + this.id + ' Attachments');
         let attachment_count = 0;
         for (let block_storage_id of this.block_storage_volume_ids) {
-            let artifact_clone = new BlockStorageVolume(this.getOkitJson().getBlockStorageVolume(block_storage_id), this.getOkitJson(), this);
-            artifact_clone['parent_id'] = this.id;
-            console.info('Drawing ' + this.getArtifactReference() + ' Block Storage Volume : ' + artifact_clone.display_name);
-            artifact_clone.draw();
+            let attachment = new BlockStorageVolumeView(this.getJsonView().getOkitJson().getBlockStorageVolume(block_storage_id), this.getJsonView());
+            attachment.attached_id = this.id;
+            console.info('Drawing ' + this.getArtifactReference() + ' Block Storage Volume : ' + attachment.display_name);
+            attachment.draw();
             attachment_count += 1;
         }
         let start_idx = 1;
         if (this.getParent().getArtifactReference() === Compartment.getArtifactReference() && this.primary_vnic.subnet_id !== '') {start_idx = 0;}
         for (let idx = start_idx;  idx < this.vnics.length; idx++) {
             let vnic = this.vnics[idx];
-            let artifact_clone = new VirtualNetworkInterface(this.getOkitJson().getSubnet(vnic.subnet_id), this.getOkitJson(), this);
+            let attachment = new VirtualNetworkInterfaceView(this.getJsonView().getOkitJson().getSubnet(vnic.subnet_id), this.getJsonView());
+            attachment.attached_id = this.id;
             // Add the -vnic suffix
-            artifact_clone.id += '-vnic';
-            artifact_clone['parent_id'] = this.id;
-            console.info('Drawing ' + this.getArtifactReference() + ' Virtual Network Interface : ' + artifact_clone.display_name);
-            let svg = artifact_clone.draw();
+            //attachment.artefact.id += '-vnic';
+            console.info('Drawing ' + this.getArtifactReference() + ' Virtual Network Interface : ' + attachment.display_name);
+            let svg = attachment.draw();
             // Add Highlighting
-            let fill = d3.select(d3Id(artifact_clone.id)).attr('fill');
             svg.on("mouseover", function () {
-                d3.selectAll(d3Id(artifact_clone.id)).attr('fill', svg_highlight_colour);
-                d3.select(d3Id(vnic.subnet_id)).attr('fill', svg_highlight_colour);
+                $(`[id^='${attachment.id}']`).addClass('highlight-vnic');
+                $(jqId(vnic.subnet_id)).addClass('highlight-vnic');
                 d3.event.stopPropagation();
             });
             svg.on("mouseout", function () {
-                d3.selectAll(d3Id(artifact_clone.id)).attr('fill', fill);
-                d3.select(d3Id(vnic.subnet_id)).attr('fill', fill);
+                $(`[id^='${attachment.id}']`).removeClass('highlight-vnic');
+                $(jqId(vnic.subnet_id)).removeClass('highlight-vnic');
                 d3.event.stopPropagation();
             });
             attachment_count += 1;
@@ -212,62 +126,28 @@ class Instance extends OkitArtifact {
 
     // Return Artifact Specific Definition.
     getSvgDefinition() {
-        console.groupCollapsed('Getting Definition of ' + this.getArtifactReference() + ' : ' + this.id);
         let definition = this.newSVGDefinition(this, this.getArtifactReference());
-        let dimensions = this.getDimensions();
         let parent = this.getParent();
         if (parent) {
             let first_child = parent.getChildOffset(this.getArtifactReference());
             definition['svg']['x'] = first_child.dx;
             definition['svg']['y'] = first_child.dy;
         }
-        definition['svg']['width'] = dimensions['width'];
-        definition['svg']['height'] = dimensions['height'];
+        definition['svg']['width'] = this.dimensions['width'];
+        definition['svg']['height'] = this.dimensions['height'];
         definition['svg']['align'] = "center";
         definition['rect']['stroke']['colour'] = stroke_colours.blue;
         definition['rect']['stroke']['dash'] = 1;
         definition['rect']['height_adjust'] = (Math.round(icon_height / 2) * -1);
         definition['name']['show'] = true;
         definition['name']['align'] = "center";
-        console.info(JSON.stringify(definition, null, 2));
-        console.groupEnd();
         return definition;
     }
 
-    // Return Artifact Dimensions
-    getDimensions() {
-        console.groupCollapsed('Getting Dimensions of ' + this.getArtifactReference() + ' : ' + this.id);
-        let dimensions = this.getMinimumDimensions();
-        // Calculate Size based on Child Artifacts
-        // Process Bottom Edge Artifacts
-        let offset = this.getFirstBottomEdgeChildOffset();
-        let bottom_edge_dimensions = {width: offset.dx, height: offset.dy};
-        // Block Storage
-        bottom_edge_dimensions.width += Math.round(this.block_storage_volume_ids.length * positional_adjustments.padding.x);
-        bottom_edge_dimensions.width += Math.round(this.block_storage_volume_ids.length * positional_adjustments.spacing.x);
-        // Virtual Network Interface Cards
-        bottom_edge_dimensions.width += Math.round(this.vnics.length * positional_adjustments.padding.x);
-        bottom_edge_dimensions.width += Math.round(this.vnics.length * positional_adjustments.spacing.x);
-        dimensions.width  = Math.max(dimensions.width, bottom_edge_dimensions.width);
-        dimensions.height = Math.max(dimensions.height, bottom_edge_dimensions.height);
-        // Check size against minimum
-        dimensions.width  = Math.max(dimensions.width,  this.getMinimumDimensions().width);
-        dimensions.height = Math.max(dimensions.height, this.getMinimumDimensions().height);
-        console.info('Overall Dimensions       : ' + JSON.stringify(dimensions));
-        console.groupEnd();
-        return dimensions;
-    }
-
-    getMinimumDimensions() {
-        return {width: min_instance_width, height: min_instance_height};
-    }
-
-
     /*
     ** Property Sheet Load function
      */
     loadProperties() {
-        let okitJson = this.getOkitJson();
         let me = this;
         $(jqId(PROPERTIES_PANEL)).load("propertysheets/instance.html", () => {
             // Load Referenced Ids
@@ -309,7 +189,7 @@ class Instance extends OkitArtifact {
             // Load OS Versions
             this.loadOSVersions(this.source_details.os);
             // Load Properties
-            loadPropertiesSheet(this);
+            loadPropertiesSheet(me.artefact);
         });
     }
 
@@ -462,6 +342,12 @@ class Instance extends OkitArtifact {
         $(jqId("nsg_ids" + idx)).val(vnic.nsg_ids);
     }
 
+    /*
+    ** Load and display Value Proposition
+     */
+    loadValueProposition() {
+        $(jqId(VALUE_PROPOSITION_PANEL)).load("valueproposition/instance.html");
+    }
 
     /*
     ** Child Offset Functions
@@ -474,10 +360,9 @@ class Instance extends OkitArtifact {
             count += $(jqId(this.id + '-svg')).children("svg[data-type='" + child + "']").length;
         }
         console.info('Bottom Edge Count : ' + count);
-        let dimensions = this.getDimensions();
         // Increment x position based on count
         offset.dx += Math.round((icon_width * count) + (positional_adjustments.spacing.x * count));
-        offset.dy = Math.round(dimensions.height - positional_adjustments.padding.y);
+        offset.dy = Math.round(this.dimensions.height - positional_adjustments.padding.y);
         return offset;
     }
 
@@ -489,15 +374,11 @@ class Instance extends OkitArtifact {
         return [BlockStorageVolume.getArtifactReference(), VirtualNetworkInterface.getArtifactReference()];
     }
 
-    getNamePrefix() {
-        return super.getNamePrefix() + 'in';
-    }
-
     /*
     ** Static Functionality
      */
     static getArtifactReference() {
-        return 'Instance';
+        return Instance.getArtifactReference();
     }
 
     static getDropTargets() {
@@ -508,60 +389,5 @@ class Instance extends OkitArtifact {
         return [LoadBalancer.getArtifactReference()];
     }
 
-    static query(request = {}, region='') {
-        console.info('------------- Instance Query --------------------');
-        console.info('------------- Compartment : ' + request.compartment_id);
-        console.info('------------- Subnet      : ' + request.subnet_id);
-        let me = this;
-        queryCount++;
-        $.ajax({
-            type: 'get',
-            url: 'oci/artifacts/Instance',
-            dataType: 'text',
-            contentType: 'application/json',
-            data: JSON.stringify(request),
-            success: function (resp) {
-                let response_json = JSON.parse(resp);
-                regionOkitJson[region].load({instances: response_json});
-                for (let artifact of response_json) {
-                    console.info(me.getArtifactReference() + ' Query : ' + artifact.display_name);
-                }
-                redrawSVGCanvas(region);
-                $('#' + instance_query_cb).prop('checked', true);
-                queryCount--;
-                hideQueryProgressIfComplete();
-            },
-            error: function (xhr, status, error) {
-                console.warn('Status : ' + status);
-                console.warn('Error : ' + error);
-                $('#' + instance_query_cb).prop('checked', true);
-                queryCount--;
-                hideQueryProgressIfComplete();
-            }
-        });
-    }
-}
-
-$(document).ready(function () {
-    // Setup Search Checkbox
-    let body = d3.select('#query-progress-tbody');
-    let row = body.append('tr');
-    let cell = row.append('td');
-    cell.append('input')
-        .attr('type', 'checkbox')
-        .attr('id', instance_query_cb);
-    cell.append('label').text(Instance.getArtifactReference());
-
-    // Setup Query Display Form
-    body = d3.select('#query-oci-tbody');
-    row = body.append('tr');
-    cell = row.append('td')
-        .text(Instance.getArtifactReference());
-    cell = row.append('td');
-    let input = cell.append('input')
-        .attr('type', 'text')
-        .attr('class', 'query-filter')
-        .attr('id', 'instance_name_filter')
-        .attr('name', 'instance_name_filter');
-});
 
+}
\ No newline at end of file
diff --git a/okitweb/static/okit/view/designer/js/artefacts/instance_pool.js b/okitweb/static/okit/view/designer/js/artefacts/instance_pool.js
new file mode 100644
index 000000000..f9d796262
--- /dev/null
+++ b/okitweb/static/okit/view/designer/js/artefacts/instance_pool.js
@@ -0,0 +1,14 @@
+/*
+** Copyright (c) 2020, Oracle and/or its affiliates.
+** Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl.
+*/
+console.info('Loaded Designer Instance Pool View Javascript');
+
+/*
+** Define Compartment View Artifact Class
+ */
+class InstancePoolView extends OkitContainerDesignerArtefactView {
+    constructor(artefact = null, json_view) {
+        super(artefact, json_view);
+    }
+}
diff --git a/okitweb/static/okit/view/designer/js/artefacts/internet_gateway.js b/okitweb/static/okit/view/designer/js/artefacts/internet_gateway.js
new file mode 100644
index 000000000..3238356fe
--- /dev/null
+++ b/okitweb/static/okit/view/designer/js/artefacts/internet_gateway.js
@@ -0,0 +1,75 @@
+/*
+** Copyright (c) 2020, Oracle and/or its affiliates.
+** Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl.
+*/
+console.info('Loaded Designer InternetGateway View Javascript');
+
+/*
+** Define InternetGateway View Artifact Class
+ */
+class InternetGatewayView extends OkitDesignerArtefactView {
+    constructor(artefact=null, json_view) {
+        super(artefact, json_view);
+    }
+
+    get parent_id() {return this.artefact.vcn_id;}
+
+    getParent() {
+        return this.getJsonView().getVirtualCloudNetwork(this.parent_id);
+    }
+
+    getParentId() {
+        return this.parent_id;
+    }
+
+    /*
+     ** SVG Processing
+     */
+    draw() {
+        console.group('Drawing ' + this.getArtifactReference() + ' : ' + this.id + ' [' + this.parent_id + ']');
+        let me = this;
+        let svg = super.draw();
+        console.groupEnd();
+    }
+
+    // Return Artifact Specific Definition.
+    getSvgDefinition() {
+        let definition = this.newSVGDefinition(this, this.getArtifactReference());
+        let first_child = this.getParent().getChildOffset(this.getArtifactReference());
+        definition['svg']['x'] = first_child.dx;
+        definition['svg']['y'] = first_child.dy;
+        definition['svg']['width'] = this.dimensions['width'];
+        definition['svg']['height'] = this.dimensions['height'];
+        definition['rect']['stroke']['colour'] = stroke_colours.purple;
+        definition['rect']['stroke']['dash'] = 1;
+        return definition;
+    }
+
+    /*
+    ** Property Sheet Load function
+     */
+    loadProperties() {
+        let okitJson = this.getOkitJson();
+        let me = this;
+        $(jqId(PROPERTIES_PANEL)).load("propertysheets/internet_gateway.html", () => {loadPropertiesSheet(me.artefact);});
+    }
+
+    /*
+    ** Load and display Value Proposition
+     */
+    loadValueProposition() {
+        $(jqId(VALUE_PROPOSITION_PANEL)).load("valueproposition/internet_gateway.html");
+    }
+
+    /*
+    ** Static Functionality
+     */
+    static getArtifactReference() {
+        return InternetGateway.getArtifactReference();
+    }
+
+    static getDropTargets() {
+        return [VirtualCloudNetwork.getArtifactReference()];
+    }
+    
+}
\ No newline at end of file
diff --git a/okitweb/static/okit/js/oci_artefacts/load_balancer.js b/okitweb/static/okit/view/designer/js/artefacts/load_balancer.js
similarity index 55%
rename from okitweb/static/okit/js/oci_artefacts/load_balancer.js
rename to okitweb/static/okit/view/designer/js/artefacts/load_balancer.js
index fa98d1dd0..1fc97a6ec 100644
--- a/okitweb/static/okit/js/oci_artefacts/load_balancer.js
+++ b/okitweb/static/okit/view/designer/js/artefacts/load_balancer.js
@@ -2,72 +2,33 @@
 ** Copyright (c) 2020, Oracle and/or its affiliates.
 ** Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl.
 */
-console.info('Loaded Load Balancer Javascript');
-
-const load_balancer_query_cb = "load-balancer-query-cb";
-const load_balancer_width = Math.round(icon_width * 3);
-const load_balancer_height = Math.round(icon_height * 3 / 2);
+console.info('Loaded Designer LoadBalancer View Javascript');
 
 /*
-** Define Load Balancer Class
+** Define LoadBalancer View Artifact Class
  */
-class LoadBalancer extends OkitArtifact {
-    /*
-    ** Create
-     */
-    constructor (data={}, okitjson={}, parent=null) {
-        super(okitjson);
-        this.parent_id = data.parent_id;
-        // Configure default values
-        this.display_name = this.generateDefaultName(okitjson.load_balancers.length + 1);
-        this.compartment_id = '';
-        this.subnet_id = data.parent_id;
-        this.subnet_ids = [data.parent_id];
-        this.is_private = false;
-        this.shape = '100Mbps';
-        this.protocol = 'HTTP';
-        this.port = '80';
-        this.instance_ids = [];
-        this.ip_mode = '';
-        this.network_security_group_ids = [];
-        this.backend_policy = 'ROUND_ROBIN';
-        this.health_checker = {url_path: '/'}
-        // Update with any passed data
-        this.merge(data);
-        this.convert();
-        // Add Get Parent function
-        if (parent !== null) {
-            this.getParent = () => {return parent};
-        }
-    }
-
-    /*
-    ** Conversion Routine allowing loading of old json
-     */
-    convert() {
-        if (this.shape_name !== undefined) {this.shape = this.shape_name; delete this.shape_name;}
+class LoadBalancerView extends OkitDesignerArtefactView {
+    constructor(artefact=null, json_view) {
+        super(artefact, json_view);
     }
 
+    get parent_id() {return this.artefact.subnet_ids[0];}
+    get minimum_width() {return 135;}
+    get minimum_height() {return 100;}
 
-    /*
-    ** Clone Functionality
-     */
-    clone() {
-        return new LoadBalancer(this, this.getOkitJson());
+    getParent() {
+        return this.getJsonView().getSubnet(this.parent_id);
     }
 
-
-    /*
-    ** Delete Processing
-     */
-    deleteChildren() {}
-
+    getParentId() {
+        return this.parent_id;
+    }
 
     /*
      ** SVG Processing
      */
     draw() {
-        console.groupCollapsed('Drawing ' + this.getArtifactReference() + ' : ' + this.id + ' [' + this.parent_id + ']');
+        console.group('Drawing ' + this.getArtifactReference() + ' : ' + this.id + ' [' + this.parent_id + ']');
         let me = this;
         let svg = super.draw();
         // Get Inner Rect to attach Connectors
@@ -94,7 +55,7 @@ class LoadBalancer extends OkitArtifact {
     }
 
     drawConnectors() {
-        console.groupCollapsed('Drawing Connectors for ' + this.getArtifactReference() + ' : ' + this.id + ' [' + this.parent_id + ']');
+        console.group('Drawing Connectors for ' + this.getArtifactReference() + ' : ' + this.id + ' [' + this.parent_id + ']');
         // Check if there are any missing forllowing query
         this.checkConnectors();
         // Get Grand Parent
@@ -160,42 +121,20 @@ class LoadBalancer extends OkitArtifact {
 
     // Return Artifact Specific Definition.
     getSvgDefinition() {
-        console.groupCollapsed('Getting Definition of ' + this.getArtifactReference() + ' : ' + this.id);
         let definition = this.newSVGDefinition(this, this.getArtifactReference());
-        let dimensions = this.getDimensions();
         let first_child = this.getParent().getChildOffset(this.getArtifactReference());
         definition['svg']['x'] = first_child.dx;
         definition['svg']['y'] = first_child.dy;
-        definition['svg']['width'] = dimensions['width'];
-        definition['svg']['height'] = dimensions['height'];
+        definition['svg']['width'] = this.dimensions['width'];
+        definition['svg']['height'] = this.dimensions['height'];
         definition['svg']['align'] = "center";
         definition['rect']['stroke']['colour'] = stroke_colours.bark;
         definition['rect']['stroke']['dash'] = 1;
         definition['name']['show'] = true;
         definition['name']['align'] = "center";
-        console.info(JSON.stringify(definition, null, 2));
-        console.groupEnd();
         return definition;
     }
 
-    // Return Artifact Dimensions
-    getDimensions() {
-        console.groupCollapsed('Getting Dimensions of ' + this.getArtifactReference() + ' : ' + this.id);
-        let dimensions = this.getMinimumDimensions();
-        // Calculate Size based on Child Artifacts
-        // Check size against minimum
-        dimensions.width  = Math.max(dimensions.width,  this.getMinimumDimensions().width);
-        dimensions.height = Math.max(dimensions.height, this.getMinimumDimensions().height);
-        console.info('Overall Dimensions       : ' + JSON.stringify(dimensions));
-        console.groupEnd();
-        return dimensions;
-    }
-
-    getMinimumDimensions() {
-        return {width: load_balancer_width, height: load_balancer_height};
-    }
-
-
     /*
     ** Property Sheet Load function
      */
@@ -213,79 +152,26 @@ class LoadBalancer extends OkitArtifact {
                 network_security_groups_select.append($('<option>').attr('value', network_security_group.id).text(network_security_group.display_name));
             }
             // Load Properties
-            loadPropertiesSheet(me);
+            loadPropertiesSheet(me.artefact);
         });
     }
 
-
-    getNamePrefix() {
-        return super.getNamePrefix() + 'lb';
+    /*
+    ** Load and display Value Proposition
+     */
+    loadValueProposition() {
+        $(jqId(VALUE_PROPOSITION_PANEL)).load("valueproposition/load_balancer.html");
     }
 
     /*
     ** Static Functionality
      */
     static getArtifactReference() {
-        return 'Load Balancer';
+        return LoadBalancer.getArtifactReference();
     }
 
     static getDropTargets() {
         return [Subnet.getArtifactReference()];
     }
 
-    static query(request = {}, region='') {
-        console.info('------------- Load Balancer Query --------------------');
-        console.info('------------- Compartment : ' + request.compartment_id);
-        console.info('------------- Subnet      : ' + request.subnet_id);
-        let me = this;
-        queryCount++;
-        $.ajax({
-            type: 'get',
-            url: 'oci/artifacts/LoadBalancer',
-            dataType: 'text',
-            contentType: 'application/json',
-            data: JSON.stringify(request),
-            success: function (resp) {
-                let response_json = JSON.parse(resp);
-                regionOkitJson[region].load({load_balancers: response_json});
-                for (let artifact of response_json) {
-                    console.info(me.getArtifactReference() + ' Query : ' + artifact.display_name);
-                }
-                redrawSVGCanvas(region);
-                $('#' + load_balancer_query_cb).prop('checked', true);
-                queryCount--;
-                hideQueryProgressIfComplete();
-            },
-            error: function (xhr, status, error) {
-                console.info('Status : ' + status)
-                console.info('Error : ' + error)
-                $('#' + load_balancer_query_cb).prop('checked', true);
-                queryCount--;
-                hideQueryProgressIfComplete();
-            }
-        });
-    }
-}
-
-$(document).ready(function () {
-    // Setup Search Checkbox
-    let body = d3.select('#query-progress-tbody');
-    let row = body.append('tr');
-    let cell = row.append('td');
-    cell.append('input')
-        .attr('type', 'checkbox')
-        .attr('id', load_balancer_query_cb);
-    cell.append('label').text(LoadBalancer.getArtifactReference());
-
-    // Setup Query Display Form
-    body = d3.select('#query-oci-tbody');
-    row = body.append('tr');
-    cell = row.append('td')
-        .text(LoadBalancer.getArtifactReference());
-    cell = row.append('td');
-    let input = cell.append('input')
-        .attr('type', 'text')
-        .attr('class', 'query-filter')
-        .attr('id', 'load_balancer_name_filter')
-        .attr('name', 'load_balancer_name_filter');
-});
+}
\ No newline at end of file
diff --git a/okitweb/static/okit/view/designer/js/artefacts/local_peering_gateway.js b/okitweb/static/okit/view/designer/js/artefacts/local_peering_gateway.js
new file mode 100644
index 000000000..c00a66be6
--- /dev/null
+++ b/okitweb/static/okit/view/designer/js/artefacts/local_peering_gateway.js
@@ -0,0 +1,131 @@
+/*
+** Copyright (c) 2020, Oracle and/or its affiliates.
+** Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl.
+*/
+console.info('Loaded Designer LocalPeeringGateway View Javascript');
+
+/*
+** Define LocalPeeringGateway View Artifact Class
+ */
+class LocalPeeringGatewayView extends OkitDesignerArtefactView {
+    constructor(artefact=null, json_view) {
+        super(artefact, json_view);
+    }
+
+    get parent_id() {return this.artefact.vcn_id;}
+
+    getParent() {
+        return this.getJsonView().getVirtualCloudNetwork(this.parent_id);
+    }
+
+    getParentId() {
+        return this.parent_id;
+    }
+
+    /*
+     ** SVG Processing
+     */
+    draw() {
+        console.group('Drawing ' + this.getArtifactReference() + ' : ' + this.id + ' [' + this.parent_id + ']');
+        let me = this;
+        let svg = super.draw();
+        // Add Highlighting
+        let fill = d3.select(d3Id(this.id)).attr('fill');
+        svg.on("mouseover", function () {
+            if (me.peer_id !== '') {
+                d3.selectAll(d3Id(me.peer_id)).attr('fill', svg_highlight_colour);
+                d3.select(d3Id(me.id)).attr('fill', svg_highlight_colour);
+            }
+            d3.event.stopPropagation();
+        });
+        svg.on("mouseout", function () {
+            if (me.peer_id !== '') {
+                d3.selectAll(d3Id(me.peer_id)).attr('fill', fill);
+                d3.select(d3Id(me.id)).attr('fill', fill);
+            }
+            d3.event.stopPropagation();
+        });
+        console.groupEnd();
+        return svg;
+    }
+
+    // Return Artifact Specific Definition.
+    getSvgDefinition() {
+        let definition = this.newSVGDefinition(this, this.getArtifactReference());
+        let dimensions = this.getDimensions();
+        let first_child = this.getParent().getChildOffset(this.getArtifactReference());
+        definition['svg']['x'] = first_child.dx;
+        definition['svg']['y'] = first_child.dy;
+        definition['svg']['width'] = dimensions['width'];
+        definition['svg']['height'] = dimensions['height'];
+        definition['rect']['stroke']['colour'] = stroke_colours.bark;
+        definition['rect']['stroke']['dash'] = 1;
+        return definition;
+    }
+
+    // Return Artifact Dimensions
+    getDimensions() {
+        console.group('Getting Dimensions of ' + this.getArtifactReference() + ' : ' + this.id);
+        let dimensions = this.getMinimumDimensions();
+        // Calculate Size based on Child Artifacts
+        // Check size against minimum
+        dimensions.width  = Math.max(dimensions.width,  this.getMinimumDimensions().width);
+        dimensions.height = Math.max(dimensions.height, this.getMinimumDimensions().height);
+        console.info('Overall Dimensions       : ' + JSON.stringify(dimensions));
+        console.groupEnd();
+        return dimensions;
+    }
+
+    getMinimumDimensions() {
+        return {width: icon_width, height:icon_height};
+    }
+
+
+    /*
+    ** Property Sheet Load function
+     */
+    loadProperties() {
+        let okitJson = this.getOkitJson();
+        let me = this;
+        $(jqId(PROPERTIES_PANEL)).load("propertysheets/local_peering_gateway.html", () => {
+            // Load Referenced Ids
+            let route_table_select = $(jqId('route_table_id'));
+            route_table_select.append($('<option>').attr('value', '').text(''));
+            for (let route_table of okitJson.route_tables) {
+                if (me.vcn_id === route_table.vcn_id) {
+                    route_table_select.append($('<option>').attr('value', route_table.id).text(route_table.display_name));
+                }
+            }
+            // Load Local Peering Gateways from other VCNs
+            let remote_peering_gateway_select = $(jqId('peer_id'));
+            remote_peering_gateway_select.append($('<option>').attr('value', '').text(''));
+            for (let local_peering_gateway of okitJson.local_peering_gateways) {
+                if (me.vcn_id !== local_peering_gateway.vcn_id) {
+                    remote_peering_gateway_select.append($('<option>').attr('value', local_peering_gateway.id).text(local_peering_gateway.display_name));
+                }
+            }
+            // Load Properties
+            loadPropertiesSheet(me.artefact);
+            $(jqId('peer_id')).on('blur', () => {okitJson.getLocalPeeringGateway(me.peer_id).peer_id = me.id;});
+        });
+    }
+
+    /*
+    ** Load and display Value Proposition
+     */
+    loadValueProposition() {
+        $(jqId(VALUE_PROPOSITION_PANEL)).load("valueproposition/local_peering_gateway.html");
+    }
+
+    /*
+    ** Static Functionality
+     */
+    static getArtifactReference() {
+        return LocalPeeringGateway.getArtifactReference();
+    }
+
+    static getDropTargets() {
+        return [VirtualCloudNetwork.getArtifactReference()];
+    }
+
+}
\ No newline at end of file
diff --git a/okitweb/static/okit/view/designer/js/artefacts/nat_gateway.js b/okitweb/static/okit/view/designer/js/artefacts/nat_gateway.js
new file mode 100644
index 000000000..0baf44f22
--- /dev/null
+++ b/okitweb/static/okit/view/designer/js/artefacts/nat_gateway.js
@@ -0,0 +1,76 @@
+/*
+** Copyright (c) 2020, Oracle and/or its affiliates.
+** Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl.
+*/
+console.info('Loaded Designer NATGateway View Javascript');
+
+/*
+** Define NATGateway View Artifact Class
+ */
+class NATGatewayView extends OkitDesignerArtefactView {
+    constructor(artefact=null, json_view) {
+        super(artefact, json_view);
+    }
+
+    get parent_id() {return this.artefact.vcn_id;}
+
+    getParent() {
+        return this.getJsonView().getVirtualCloudNetwork(this.parent_id);
+    }
+
+    getParentId() {
+        return this.parent_id;
+    }
+
+    /*
+     ** SVG Processing
+     */
+    draw() {
+        console.groupCollapsed('Drawing ' + this.getArtifactReference() + ' : ' + this.id + ' [' + this.parent_id + ']');
+        let me = this;
+        let svg = super.draw();
+        console.groupEnd();
+    }
+
+    // Return Artifact Specific Definition.
+    getSvgDefinition() {
+        let position = 1;
+        let definition = this.newSVGDefinition(this, this.getArtifactReference());
+        let first_child = this.getParent().getChildOffset(this.getArtifactReference());
+        definition['svg']['x'] = first_child.dx;
+        definition['svg']['y'] = first_child.dy;
+        definition['svg']['width'] = this.dimensions['width'];
+        definition['svg']['height'] = this.dimensions['height'];
+        definition['rect']['stroke']['colour'] = stroke_colours.bark;
+        definition['rect']['stroke']['dash'] = 1;
+        return definition;
+    }
+
+    /*
+    ** Property Sheet Load function
+     */
+    loadProperties() {
+        let okitJson = this.getOkitJson();
+        let me = this;
+        $(jqId(PROPERTIES_PANEL)).load("propertysheets/nat_gateway.html", () => {loadPropertiesSheet(me.artefact);});
+    }
+
+    /*
+    ** Load and display Value Proposition
+     */
+    loadValueProposition() {
+        $(jqId(VALUE_PROPOSITION_PANEL)).load("valueproposition/nat_gateway.html");
+    }
+
+    /*
+    ** Static Functionality
+     */
+    static getArtifactReference() {
+        return NATGateway.getArtifactReference();
+    }
+
+    static getDropTargets() {
+        return [VirtualCloudNetwork.getArtifactReference()];
+    }
+
+}
\ No newline at end of file
diff --git a/okitweb/static/okit/js/oci_artefacts/network_security_group.js b/okitweb/static/okit/view/designer/js/artefacts/network_security_group.js
similarity index 79%
rename from okitweb/static/okit/js/oci_artefacts/network_security_group.js
rename to okitweb/static/okit/view/designer/js/artefacts/network_security_group.js
index f34769472..09de60ff4 100644
--- a/okitweb/static/okit/js/oci_artefacts/network_security_group.js
+++ b/okitweb/static/okit/view/designer/js/artefacts/network_security_group.js
@@ -2,109 +2,53 @@
 ** Copyright (c) 2020, Oracle and/or its affiliates.
 ** Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl.
 */
-console.info('Loaded Network Security Group Javascript');
-
-const network_security_group_query_cb = "network-security-group-query-cb";
+console.info('Loaded Designer NetworkSecurityGroup View Javascript');
 
 /*
-** Define Network Security Group Class
+** Define NetworkSecurityGroup View Artifact Class
  */
-class NetworkSecurityGroup extends OkitArtifact {
-    /*
-    ** Create
-     */
-    constructor (data={}, okitjson={}, parent=null) {
-        super(okitjson);
-        this.parent_id = data.parent_id;
-        // Configure default values
-        this.display_name = this.generateDefaultName(okitjson.network_security_groups.length + 1);
-        this.compartment_id = '';
-        this.vcn_id = data.parent_id;
-        this.security_rules = [];
-        // Update with any passed data
-        this.merge(data);
-        this.convert();
-        // Add Get Parent function
-        if (parent !== null) {
-            this.getParent = () => {return parent};
-        }
+class NetworkSecurityGroupView extends OkitDesignerArtefactView {
+    constructor(artefact=null, json_view) {
+        super(artefact, json_view);
     }
 
+    get parent_id() {return this.attached_id ? this.attached_id : this.artefact.vcn_id;}
 
-    /*
-    ** Clone Functionality
-     */
-    clone() {
-        return new NetworkSecurityGroup(this, this.getOkitJson());
+    getParent() {
+        return this.getJsonView().getVirtualCloudNetwork(this.parent_id);
     }
 
-
-    /*
-    ** Delete Processing
-     */
-    deleteChildren() {
-        // Remove Instance vnic references
-        for (let instance of this.getOkitJson().instances) {
-            for (let vnic of instance.vnics) {
-                for (let i = 0; i < vnic.nsg_ids.length; i++) {
-                    if (vnic.nsg_ids[i] === this.id) {
-                        vnic.nsg_ids.splice(i, 1);
-                    }
-                }
-            }
-        }
+    getParentId() {
+        return this.parent_id;
     }
 
-
     /*
      ** SVG Processing
      */
     draw() {
-        console.groupCollapsed('Drawing ' + this.getArtifactReference() + ' : ' + this.id + ' [' + this.parent_id + ']');
-        if (this.isAttached()) {
-            console.groupEnd();
-            return;
+        console.group('Drawing ' + this.getArtifactReference() + ' : ' + this.id + ' [' + this.parent_id + ']');
+        console.info(`Hide Attached : ${okitSettings.hide_attached}.`)
+        console.info(`Is Attached   : ${this.attached}.`)
+        if (!okitSettings.hide_attached || !this.attached) {
+            console.info(`${this.display_name} is either not attached and we are displaying attached`);
+            let svg = super.draw();
         }
-        let me = this;
-        let svg = super.draw();
         console.groupEnd();
     }
 
     // Return Artifact Specific Definition.
     getSvgDefinition() {
-        console.groupCollapsed('Getting Definition of ' + this.getArtifactReference() + ' : ' + this.id);
         let definition = this.newSVGDefinition(this, this.getArtifactReference());
-        let dimensions = this.getDimensions();
         let first_child = this.getParent().getChildOffset(this.getArtifactReference());
         definition['svg']['x'] = first_child.dx;
         definition['svg']['y'] = first_child.dy;
-        definition['svg']['width'] = dimensions['width'];
-        definition['svg']['height'] = dimensions['height'];
+        definition['svg']['width'] = this.dimensions['width'];
+        definition['svg']['height'] = this.dimensions['height'];
         definition['rect']['stroke']['colour'] = stroke_colours.bark;
         definition['rect']['stroke']['dash'] = 1;
-        console.info(JSON.stringify(definition, null, 2));
-        console.groupEnd();
         return definition;
     }
 
-    // Return Artifact Dimensions
-    getDimensions() {
-        console.groupCollapsed('Getting Dimensions of ' + this.getArtifactReference() + ' : ' + this.id);
-        let dimensions = this.getMinimumDimensions();
-        // Calculate Size based on Child Artifacts
-        // Check size against minimum
-        dimensions.width  = Math.max(dimensions.width,  this.getMinimumDimensions().width);
-        dimensions.height = Math.max(dimensions.height, this.getMinimumDimensions().height);
-        console.info('Overall Dimensions       : ' + JSON.stringify(dimensions));
-        console.groupEnd();
-        return dimensions;
-    }
-
-    getMinimumDimensions() {
-        return {width: icon_width, height:icon_height};
-    }
-
-
     /*
     ** Property Sheet Load function
      */
@@ -114,7 +58,7 @@ class NetworkSecurityGroup extends OkitArtifact {
         $(jqId(PROPERTIES_PANEL)).load("propertysheets/network_security_group.html", () => {
             // Load Referenced Ids
             // Load Properties
-            loadPropertiesSheet(me);
+            loadPropertiesSheet(me.artefact);
             // Egress Rules
             me.loadSecurityRules();
             // Add Handler to Add Button
@@ -536,94 +480,22 @@ class NetworkSecurityGroup extends OkitArtifact {
         type_select.node().value = access_rule.icmp_options.type;
     }
 
-    getNamePrefix() {
-        return super.getNamePrefix() + 'nsg';
+    /*
+    ** Load and display Value Proposition
+     */
+    loadValueProposition() {
+        $(jqId(VALUE_PROPOSITION_PANEL)).load("valueproposition/network_security_group.html");
     }
 
     /*
     ** Static Functionality
      */
     static getArtifactReference() {
-        return 'Network Security Group';
+        return NetworkSecurityGroup.getArtifactReference();
     }
 
     static getDropTargets() {
         return [VirtualCloudNetwork.getArtifactReference()];
     }
 
-    static query(request = {}, region='') {
-        console.info('------------- Network Security Group Query --------------------');
-        console.info('------------- Compartment           : ' + request.compartment_id);
-        console.info('------------- Virtual Cloud Network : ' + request.vcn_id);
-        let me = this;
-        queryCount++;
-        $.ajax({
-            type: 'get',
-            url: 'oci/artifacts/NetworkSecurityGroup',
-            dataType: 'text',
-            contentType: 'application/json',
-            data: JSON.stringify(request),
-            success: function(resp) {
-                let response_json = JSON.parse(resp);
-                regionOkitJson[region].load({network_security_groups: response_json});
-                for (let artifact of response_json) {
-                    console.info(me.getArtifactReference() + ' Query : ' + artifact.display_name);
-                }
-                redrawSVGCanvas(region);
-                $('#' + network_security_group_query_cb).prop('checked', true);
-                queryCount--;
-                hideQueryProgressIfComplete();
-            },
-            error: function(xhr, status, error) {
-                console.info('Status : ' + status)
-                console.info('Error : ' + error)
-                $('#' + network_security_group_query_cb).prop('checked', true);
-                queryCount--;
-                hideQueryProgressIfComplete();
-            }
-        });
-    }
-
-
-    /*
-    ** Artifact Specific Functions
-     */
-}
-
-$(document).ready(function() {
-    // Setup Search Checkbox
-    let body = d3.select('#query-progress-tbody');
-    let row = body.append('tr');
-    let cell = row.append('td');
-    cell.append('input')
-        .attr('type', 'checkbox')
-        .attr('id', network_security_group_query_cb);
-    cell.append('label').text(NetworkSecurityGroup.getArtifactReference());
-
-    // Setup Query Display Form
-    body = d3.select('#query-oci-tbody');
-    row = body.append('tr');
-    cell = row.append('td')
-        .text(NetworkSecurityGroup.getArtifactReference());
-    cell = row.append('td');
-    let input = cell.append('input')
-        .attr('type', 'text')
-        .attr('class', 'query-filter')
-        .attr('id', 'network_security_group_name_filter')
-        .attr('name', 'network_security_group_name_filter');
-});
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+}
\ No newline at end of file
diff --git a/okitweb/static/okit/view/designer/js/artefacts/object_storage_bucket.js b/okitweb/static/okit/view/designer/js/artefacts/object_storage_bucket.js
new file mode 100644
index 000000000..499c28906
--- /dev/null
+++ b/okitweb/static/okit/view/designer/js/artefacts/object_storage_bucket.js
@@ -0,0 +1,94 @@
+/*
+** Copyright (c) 2020, Oracle and/or its affiliates.
+** Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl.
+*/
+console.info('Loaded Designer ObjectStorageBucket View Javascript');
+
+/*
+** Define ObjectStorageBucket View Artifact Class
+ */
+class ObjectStorageBucketView extends OkitDesignerArtefactView {
+    constructor(artefact=null, json_view) {
+        super(artefact, json_view);
+    }
+
+    get parent_id() {return this.artefact.compartment_id;}
+
+    getParent() {
+        return this.getJsonView().getCompartment(this.parent_id);
+    }
+
+    getParentId() {
+        return this.parent_id;
+    }
+
+    /*
+     ** SVG Processing
+     */
+    draw() {
+        console.groupCollapsed('Drawing ' + this.getArtifactReference() + ' : ' + this.id + ' [' + this.parent_id + ']');
+        let me = this;
+        let svg = super.draw();
+        // Get Inner Rect to attach Connectors
+        let rect = svg.select("rect[id='" + safeId(this.id) + "']");
+        let boundingClientRect = rect.node().getBoundingClientRect();
+        // Add Connector Data
+        svg.attr("data-compartment-id", this.compartment_id)
+            .attr("data-connector-start-y", boundingClientRect.y + (boundingClientRect.height / 2))
+            .attr("data-connector-start-x", boundingClientRect.x)
+            .attr("data-connector-end-y", boundingClientRect.y + (boundingClientRect.height / 2))
+            .attr("data-connector-end-x", boundingClientRect.x)
+            .attr("data-connector-id", this.id)
+            .attr("dragable", true)
+            .selectAll("*")
+            .attr("data-connector-start-y", boundingClientRect.y + (boundingClientRect.height / 2))
+            .attr("data-connector-start-x", boundingClientRect.x)
+            .attr("data-connector-end-y", boundingClientRect.y + (boundingClientRect.height / 2))
+            .attr("data-connector-end-x", boundingClientRect.x)
+            .attr("data-connector-id", this.id)
+            .attr("dragable", true);
+        console.groupEnd();
+        return svg;
+    }
+
+    // Return Artifact Specific Definition.
+    getSvgDefinition() {
+        let definition = this.newSVGDefinition(this, this.getArtifactReference());
+        let first_child = this.getParent().getChildOffset(this.getArtifactReference());
+        definition['svg']['x'] = first_child.dx;
+        definition['svg']['y'] = first_child.dy;
+        definition['svg']['width'] = this.dimensions['width'];
+        definition['svg']['height'] = this.dimensions['height'];
+        definition['rect']['stroke']['colour'] = stroke_colours.bark;
+        definition['rect']['stroke']['dash'] = 1;
+        return definition;
+    }
+
+    /*
+    ** Property Sheet Load function
+     */
+    loadProperties() {
+        let okitJson = this.getOkitJson();
+        let me = this;
+        $(jqId(PROPERTIES_PANEL)).load("propertysheets/object_storage_bucket.html", () => {loadPropertiesSheet(me.artefact);});
+    }
+
+    /*
+    ** Load and display Value Proposition
+     */
+    loadValueProposition() {
+        $(jqId(VALUE_PROPOSITION_PANEL)).load("valueproposition/object_storage_bucket.html");
+    }
+
+    /*
+    ** Static Functionality
+     */
+    static getArtifactReference() {
+        return ObjectStorageBucket.getArtifactReference();
+    }
+
+    static getDropTargets() {
+        return [Compartment.getArtifactReference()];
+    }
+
+}
\ No newline at end of file
diff --git a/okitweb/static/okit/view/designer/js/artefacts/oke.js b/okitweb/static/okit/view/designer/js/artefacts/oke.js
new file mode 100644
index 000000000..267ab1d67
--- /dev/null
+++ b/okitweb/static/okit/view/designer/js/artefacts/oke.js
@@ -0,0 +1,14 @@
+/*
+** Copyright (c) 2020, Oracle and/or its affiliates.
+** Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl.
+*/
+console.info('Loaded Designer OKE View Javascript');
+
+/*
+** Define Compartment View Artifact Class
+ */
+class OkeView extends OkitContainerDesignerArtefactView {
+    constructor(artefact = null, json_view) {
+        super(artefact, json_view);
+    }
+}
diff --git a/okitweb/static/okit/js/oci_artefacts/route_table.js b/okitweb/static/okit/view/designer/js/artefacts/route_table.js
similarity index 68%
rename from okitweb/static/okit/js/oci_artefacts/route_table.js
rename to okitweb/static/okit/view/designer/js/artefacts/route_table.js
index bccba1553..c81803902 100644
--- a/okitweb/static/okit/js/oci_artefacts/route_table.js
+++ b/okitweb/static/okit/view/designer/js/artefacts/route_table.js
@@ -2,118 +2,64 @@
 ** Copyright (c) 2020, Oracle and/or its affiliates.
 ** Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl.
 */
-console.info('Loaded Route Table Javascript');
-
-const route_table_query_cb = "route-table-query-cb";
+console.info('Loaded Designer RouteTable View Javascript');
 
 /*
-** Define Route Table Class
+** Define RouteTable View Artifact Class
  */
-class RouteTable extends OkitArtifact {
-    /*
-    ** Create
-     */
-    constructor (data={}, okitjson={}, parent=null) {
-        super(okitjson);
-        this.parent_id = data.parent_id;
-        // Configure default values
-        this.display_name = this.generateDefaultName(okitjson.route_tables.length + 1);
-        this.compartment_id = '';
-        this.vcn_id = data.parent_id;
-        this.route_rules = [];
-        // Update with any passed data
-        this.merge(data);
-        this.convert();
-        // Add Get Parent function
-        if (parent !== null) {
-            this.getParent = () => {return parent};
-        }
-    }
-
-
-    /*
-    ** Clone Functionality
-     */
-    clone() {
-        return new RouteTable(this, this.getOkitJson());
+class RouteTableView extends OkitDesignerArtefactView {
+    constructor(artefact=null, json_view) {
+        super(artefact, json_view);
     }
 
-
-    /*
-    ** Delete Processing
-     */
-    deleteChildren() {
-        // Remove Subnet references
-        for (let subnet of this.getOkitJson().subnets) {
-            if (subnet.route_table_id === this.id) {
-                subnet.route_table_id = '';
+    get parent_id() {return this.attached_id ? this.attached_id : this.artefact.vcn_id;}
+    get attached() {
+        if (!this.attached_id) {
+            for (let subnet of this.getOkitJson().subnets) {
+                if (subnet.route_table_id === this.id) {
+                    console.info(this.display_name + ' attached to subnet ' + subnet.display_name);
+                    return true;
+                }
             }
         }
+        return false;
     }
 
+    getParent() {
+        return this.attached_id ? this.getJsonView().getSubnet(this.parent_id) : this.getJsonView().getVirtualCloudNetwork(this.parent_id);
+    }
+
+    getParentId() {
+        return this.parent_id;
+    }
 
     /*
      ** SVG Processing
      */
     draw() {
-        console.groupCollapsed('Drawing ' + this.getArtifactReference() + ' : ' + this.id + ' [' + this.parent_id + ']');
-        if (this.isAttached()) {
-            console.groupEnd();
-            return;
+        console.group('Drawing ' + this.getArtifactReference() + ' : ' + this.id + ' [' + this.parent_id + ']');
+        console.info(`Hide Attached : ${okitSettings.hide_attached}.`)
+        console.info(`Is Attached   : ${this.attached}.`)
+        if (!okitSettings.hide_attached || !this.attached) {
+            console.info(`${this.display_name} is either not attached and we are displaying attached`);
+            let svg = super.draw();
         }
-        let me = this;
-        let svg = super.draw();
         console.groupEnd();
     }
 
     // Return Artifact Specific Definition.
     getSvgDefinition() {
-        console.groupCollapsed('Getting Definition of ' + this.getArtifactReference() + ' : ' + this.id);
         let definition = this.newSVGDefinition(this, this.getArtifactReference());
-        let dimensions = this.getDimensions();
         let first_child = this.getParent().getChildOffset(this.getArtifactReference());
         definition['svg']['x'] = first_child.dx;
         definition['svg']['y'] = first_child.dy;
-        definition['svg']['width'] = dimensions['width'];
-        definition['svg']['height'] = dimensions['height'];
+        definition['svg']['width'] = this.dimensions['width'];
+        definition['svg']['height'] = this.dimensions['height'];
         definition['rect']['stroke']['colour'] = stroke_colours.bark;
         definition['rect']['stroke']['dash'] = 1;
-        console.info(JSON.stringify(definition, null, 2));
-        console.groupEnd();
         return definition;
     }
 
-    // Return Artifact Dimensions
-    getDimensions() {
-        console.groupCollapsed('Getting Dimensions of ' + this.getArtifactReference() + ' : ' + this.id);
-        let dimensions = this.getMinimumDimensions();
-        // Calculate Size based on Child Artifacts
-        // Check size against minimum
-        dimensions.width  = Math.max(dimensions.width,  this.getMinimumDimensions().width);
-        dimensions.height = Math.max(dimensions.height, this.getMinimumDimensions().height);
-        console.info('Overall Dimensions       : ' + JSON.stringify(dimensions));
-        console.groupEnd();
-        return dimensions;
-    }
-
-    getMinimumDimensions() {
-        return {width: icon_width, height:icon_height};
-    }
-
-    isAttached() {
-        // Check if this is attached but exclude when parent is the attachment type.
-        if (this.getParent().getArtifactReference() !== Subnet.getArtifactReference()) {
-            for (let subnet of this.getOkitJson().subnets) {
-                if (subnet.route_table_id === this.id) {
-                    console.info(this.display_name + ' attached to subnet ' + subnet.display_name);
-                    return true;
-                }
-            }
-        }
-        return false;
-    }
-
-
     /*
     ** Property Sheet Load function
      */
@@ -123,7 +69,7 @@ class RouteTable extends OkitArtifact {
         $(jqId(PROPERTIES_PANEL)).load("propertysheets/route_table.html", () => {
             // Load Referenced Ids
             // Load Properties
-            loadPropertiesSheet(me);
+            loadPropertiesSheet(me.artefact);
             // Route Rules
             me.loadRouteRules();
             // Add Handler to Add Button
@@ -216,9 +162,11 @@ class RouteTable extends OkitArtifact {
                     if (target_type !== 'service_gateways') {
                         $(jqId("destination_type" + rule_num)).val('CIDR_BLOCK');
                         route_rule['destination_type'] = 'CIDR_BLOCK';
+                        $(jqId("destination_row" + rule_num)).removeClass('collapsed');
                     } else {
                         $(jqId("destination_type" + rule_num)).val('SERVICE_CIDR_BLOCK');
                         route_rule['destination_type'] = 'SERVICE_CIDR_BLOCK';
+                        $(jqId("destination_row" + rule_num)).addClass('collapsed');
                     }
                     console.info('Processing list ' + JSON.stringify(me.getOkitJson()[target_type]));
                     $(jqId("network_entity_id" + rule_num)).empty();
@@ -273,7 +221,7 @@ class RouteTable extends OkitArtifact {
         });
         $(jqId("destination_type" + rule_num)).val(route_rule.destination_type);
         // Destination
-        rule_row = rule_table.append('div').attr('class', 'tr');
+        rule_row = rule_table.append('div').attr('class', 'tr').attr('id', 'destination_row' + rule_num);
         rule_row.append('div').attr('class', 'td')
             .text("Destination");
         rule_cell = rule_row.append('div').attr('class', 'td');
@@ -330,93 +278,28 @@ class RouteTable extends OkitArtifact {
                 console.info('Changed description: ' + this.value);
                 displayOkitJson();
             });
+        // Check if we need to hide destination
+        if (route_rule.target_type === 'service_gateways') {
+            $(jqId("destination_row" + rule_num)).addClass('collapsed');
+        }
     }
 
-
-
-    getNamePrefix() {
-        return super.getNamePrefix() + 'rt';
+    /*
+    ** Load and display Value Proposition
+     */
+    loadValueProposition() {
+        $(jqId(VALUE_PROPOSITION_PANEL)).load("valueproposition/route_table.html");
     }
 
     /*
     ** Static Functionality
      */
     static getArtifactReference() {
-        return 'Route Table';
+        return RouteTable.getArtifactReference();
     }
 
     static getDropTargets() {
         return [VirtualCloudNetwork.getArtifactReference()];
     }
 
-    static query(request = {}, region='') {
-        console.info('------------- Route Table Query --------------------');
-        console.info('------------- Compartment           : ' + request.compartment_id);
-        console.info('------------- Virtual Cloud Network : ' + request.vcn_id);
-        let me = this;
-        queryCount++;
-        $.ajax({
-            type: 'get',
-            url: 'oci/artifacts/RouteTable',
-            dataType: 'text',
-            contentType: 'application/json',
-            data: JSON.stringify(request),
-            success: function(resp) {
-                let response_json = JSON.parse(resp);
-                regionOkitJson[region].load({route_tables: response_json});
-                for (let artifact of response_json) {
-                    console.info(me.getArtifactReference() + ' Query : ' + artifact.display_name);
-                }
-                redrawSVGCanvas(region);
-                $('#' + route_table_query_cb).prop('checked', true);
-                queryCount--;
-                hideQueryProgressIfComplete();
-            },
-            error: function(xhr, status, error) {
-                console.info('Status : ' + status)
-                console.info('Error : ' + error)
-                $('#' + route_table_query_cb).prop('checked', true);
-                queryCount--;
-                hideQueryProgressIfComplete();
-            }
-        });
-    }
-}
-
-$(document).ready(function() {
-    // Setup Search Checkbox
-    let body = d3.select('#query-progress-tbody');
-    let row = body.append('tr');
-    let cell = row.append('td');
-    cell.append('input')
-        .attr('type', 'checkbox')
-        .attr('id', route_table_query_cb);
-    cell.append('label').text(RouteTable.getArtifactReference());
-
-    // Setup Query Display Form
-    body = d3.select('#query-oci-tbody');
-    row = body.append('tr');
-    cell = row.append('td')
-        .text(RouteTable.getArtifactReference());
-    cell = row.append('td');
-    let input = cell.append('input')
-        .attr('type', 'text')
-        .attr('class', 'query-filter')
-        .attr('id', 'route_table_name_filter')
-        .attr('name', 'route_table_name_filter');
-});
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+}
\ No newline at end of file
diff --git a/okitweb/static/okit/js/oci_artefacts/security_list.js b/okitweb/static/okit/view/designer/js/artefacts/security_list.js
similarity index 71%
rename from okitweb/static/okit/js/oci_artefacts/security_list.js
rename to okitweb/static/okit/view/designer/js/artefacts/security_list.js
index 44c69c94d..6af30a65b 100644
--- a/okitweb/static/okit/js/oci_artefacts/security_list.js
+++ b/okitweb/static/okit/view/designer/js/artefacts/security_list.js
@@ -2,131 +2,73 @@
 ** Copyright (c) 2020, Oracle and/or its affiliates.
 ** Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl.
 */
-console.info('Loaded Security List Javascript');
-
-const security_list_query_cb = "security-list-query-cb";
+console.info('Loaded Designer SecurityList View Javascript');
 
 /*
-** Define Security List Class
+** Define SecurityList View Artifact Class
  */
-class SecurityList extends OkitArtifact {
-    /*
-    ** Create
-     */
-    constructor (data={}, okitjson={}, parent=null) {
-        super(okitjson);
-        this.parent_id = data.parent_id;
-        // Configure default values
-        this.display_name = this.generateDefaultName(okitjson.security_lists.length + 1);
-        this.compartment_id = '';
-        this.vcn_id = data.parent_id;
-        this.egress_security_rules = [];
-        this.ingress_security_rules = [];
-        // Update with any passed data
-        this.merge(data);
-        this.convert();
-        // Add Get Parent function
-        if (parent !== null) {
-            this.getParent = () => {return parent};
-        }
-    }
-
-
-    /*
-    ** Clone Functionality
-     */
-    clone() {
-        return new SecurityList(this, this.getOkitJson());
+class SecurityListView extends OkitDesignerArtefactView {
+    constructor(artefact=null, json_view) {
+        super(artefact, json_view);
     }
 
-
-    /*
-    ** Delete Processing
-     */
-    deleteChildren() {
-        // Remove Subnet references
-        for (let subnet of this.getOkitJson().subnets) {
-            for (let i=0; i < subnet.security_list_ids.length; i++) {
-                if (subnet.security_list_ids[i] === this.id) {
-                    subnet.security_list_ids.splice(i, 1);
+    get parent_id() {return this.attached_id ? this.attached_id : this.artefact.vcn_id;}
+    get attached() {
+        if (!this.attached_id) {
+            for (let subnet of this.getOkitJson().subnets) {
+                if (subnet.security_list_ids.includes(this.id)) {
+                    console.info(this.display_name + ' attached to subnet '+ subnet.display_name);
+                    return true;
                 }
             }
         }
+        return false;
+    }
+
+    getParent() {
+        return this.attached_id ? this.getJsonView().getSubnet(this.parent_id) : this.getJsonView().getVirtualCloudNetwork(this.parent_id);
     }
 
+    getParentId() {
+        return this.parent_id;
+    }
 
     /*
      ** SVG Processing
      */
     draw() {
-        console.groupCollapsed('Drawing ' + this.getArtifactReference() + ' : ' + this.id + ' [' + this.parent_id + ']');
-        if (this.isAttached()) {
-            console.groupEnd();
-            return;
+        console.group('Drawing ' + this.getArtifactReference() + ' : ' + this.id + ' [' + this.parent_id + ']');
+        console.info(`Hide Attached : ${okitSettings.hide_attached}.`)
+        console.info(`Is Attached   : ${this.attached}.`)
+        if (!okitSettings.hide_attached || !this.attached) {
+            console.info(`${this.display_name} is either not attached and we are displaying attached`);
+            let svg = super.draw();
         }
-        let me = this;
-        let svg = super.draw();
         console.groupEnd();
     }
 
     // Return Artifact Specific Definition.
     getSvgDefinition() {
-        console.groupCollapsed('Getting Definition of ' + this.getArtifactReference() + ' : ' + this.id);
         let definition = this.newSVGDefinition(this, this.getArtifactReference());
-        let dimensions = this.getDimensions();
         let first_child = this.getParent().getChildOffset(this.getArtifactReference());
         definition['svg']['x'] = first_child.dx;
         definition['svg']['y'] = first_child.dy;
-        definition['svg']['width'] = dimensions['width'];
-        definition['svg']['height'] = dimensions['height'];
+        definition['svg']['width'] = this.dimensions['width'];
+        definition['svg']['height'] = this.dimensions['height'];
         definition['rect']['stroke']['colour'] = stroke_colours.bark;
         definition['rect']['stroke']['dash'] = 1;
-        console.info(JSON.stringify(definition, null, 2));
-        console.groupEnd();
         return definition;
     }
 
-    // Return Artifact Dimensions
-    getDimensions() {
-        console.groupCollapsed('Getting Dimensions of ' + this.getArtifactReference() + ' : ' + this.id);
-        let dimensions = this.getMinimumDimensions();
-        // Calculate Size based on Child Artifacts
-        // Check size against minimum
-        dimensions.width  = Math.max(dimensions.width,  this.getMinimumDimensions().width);
-        dimensions.height = Math.max(dimensions.height, this.getMinimumDimensions().height);
-        console.info('Overall Dimensions       : ' + JSON.stringify(dimensions));
-        console.groupEnd();
-        return dimensions;
-    }
-
-    getMinimumDimensions() {
-        return {width: icon_width, height:icon_height};
-    }
-
-    isAttached() {
-        // Check if this is attached but exclude when parent is the attachment type.
-        if (this.getParent().getArtifactReference() !== Subnet.getArtifactReference()) {
-            for (let subnet of this.getOkitJson().subnets) {
-                if (subnet.security_list_ids.includes(this.id)) {
-                    console.info(this.display_name + ' attached to subnet '+ subnet.display_name);
-                    return true;
-                }
-            }
-        }
-        return false;
-    }
-
-
     /*
     ** Property Sheet Load function
      */
     loadProperties() {
-        let okitJson = this.getOkitJson();
         let me = this;
         $(jqId(PROPERTIES_PANEL)).load("propertysheets/security_list.html", () => {
             // Load Referenced Ids
             // Load Properties
-            loadPropertiesSheet(me);
+            loadPropertiesSheet(me.artefact);
             // Egress Rules
             me.loadEgressRules();
             // Ingress Rules
@@ -142,7 +84,7 @@ class SecurityList extends OkitArtifact {
         $(jqId('egress_rules_table_body')).empty();
         // Egress Rules
         let rule_num = 1;
-        for (let security_rule of this.egress_security_rules) {
+        for (let security_rule of this.artefact.egress_security_rules) {
             this.addSecurityRuleHtml(security_rule, rule_num, 'egress');
             rule_num += 1;
         }
@@ -153,7 +95,7 @@ class SecurityList extends OkitArtifact {
         $(jqId('ingress_rules_table_body')).empty();
         // Ingress Rules
         let rule_num = 1;
-        for (let security_rule of this.ingress_security_rules) {
+        for (let security_rule of this.artefact.ingress_security_rules) {
             this.addSecurityRuleHtml(security_rule, rule_num, 'ingress');
             rule_num += 1;
         }
@@ -501,159 +443,22 @@ class SecurityList extends OkitArtifact {
         code_select.node().value = access_rule.icmp_options.code;
     }
 
-    getNamePrefix() {
-        return super.getNamePrefix() + 'sl';
+    /*
+    ** Load and display Value Proposition
+     */
+    loadValueProposition() {
+        $(jqId(VALUE_PROPOSITION_PANEL)).load("valueproposition/security_list.html");
     }
 
     /*
     ** Static Functionality
      */
     static getArtifactReference() {
-        return 'Security List';
+        return SecurityList.getArtifactReference();
     }
 
     static getDropTargets() {
         return [VirtualCloudNetwork.getArtifactReference()];
     }
 
-    static query(request = {}, region='') {
-        console.info('------------- Security List Query --------------------');
-        console.info('------------- Compartment           : ' + request.compartment_id);
-        console.info('------------- Virtual Cloud Network : ' + request.vcn_id);
-        let me = this;
-        queryCount++;
-        $.ajax({
-            type: 'get',
-            url: 'oci/artifacts/SecurityList',
-            dataType: 'text',
-            contentType: 'application/json',
-            data: JSON.stringify(request),
-            success: function(resp) {
-                let response_json = JSON.parse(resp);
-                regionOkitJson[region].load({security_lists: response_json});
-                for (let artifact of response_json) {
-                    console.info(me.getArtifactReference() + ' Query : ' + artifact.display_name);
-                }
-                redrawSVGCanvas(region);
-                $('#' + security_list_query_cb).prop('checked', true);
-                queryCount--;
-                hideQueryProgressIfComplete();
-            },
-            error: function(xhr, status, error) {
-                console.info('Status : ' + status)
-                console.info('Error : ' + error)
-                $('#' + security_list_query_cb).prop('checked', true);
-                queryCount--;
-                hideQueryProgressIfComplete();
-            }
-        });
-    }
-
-
-    /*
-    ** Artifact Specific Functions
-     */
-    addDefaultSecurityListRules(vcn_cidr_block='10.0.0.0/16') {
-        console.info('Adding Default Security List Rules for ' + this.id);
-        // Add Egress Rule
-        this.egress_security_rules.push(
-            {
-                "destination": "0.0.0.0/0",
-                "destination_type": "CIDR_BLOCK",
-                "icmp_options": null,
-                "is_stateless": false,
-                "protocol": "all",
-                "tcp_options": null,
-                "udp_options": null,
-                "description": ""
-            }
-        );
-        // Ingress Rules
-        this.ingress_security_rules.push(
-            {
-                "icmp_options": null,
-                "is_stateless": false,
-                "protocol": "6",
-                "source": "0.0.0.0/0",
-                "source_type": "CIDR_BLOCK",
-                "tcp_options": {
-                    "destination_port_range": {
-                        "max": 22,
-                        "min": 22
-                    },
-                    "source_port_range": null
-                },
-                "udp_options": null,
-                "description": ""
-            }
-        );
-        this.ingress_security_rules.push(
-            {
-                "icmp_options": {
-                    "code": 4,
-                    "type": 3
-                },
-                "is_stateless": false,
-                "protocol": "1",
-                "source": "0.0.0.0/0",
-                "source_type": "CIDR_BLOCK",
-                "tcp_options": null,
-                "udp_options": null,
-                "description": ""
-            }
-        );
-        this.ingress_security_rules.push(
-            {
-                "icmp_options": {
-                    "code": null,
-                    "type": 3
-                },
-                "is_stateless": false,
-                "protocol": "1",
-                "source": vcn_cidr_block,
-                "source_type": "CIDR_BLOCK",
-                "tcp_options": null,
-                "udp_options": null,
-                "description": ""
-            }
-        );
-    }
-}
-
-$(document).ready(function() {
-    // Setup Search Checkbox
-    let body = d3.select('#query-progress-tbody');
-    let row = body.append('tr');
-    let cell = row.append('td');
-    cell.append('input')
-        .attr('type', 'checkbox')
-        .attr('id', security_list_query_cb);
-    cell.append('label').text(SecurityList.getArtifactReference());
-
-    // Setup Query Display Form
-    body = d3.select('#query-oci-tbody');
-    row = body.append('tr');
-    cell = row.append('td')
-        .text(SecurityList.getArtifactReference());
-    cell = row.append('td');
-    let input = cell.append('input')
-        .attr('type', 'text')
-        .attr('class', 'query-filter')
-        .attr('id', 'security_list_name_filter')
-        .attr('name', 'security_list_name_filter');
-});
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+}
\ No newline at end of file
diff --git a/okitweb/static/okit/js/oci_artefacts/service_gateway.js b/okitweb/static/okit/view/designer/js/artefacts/service_gateway.js
similarity index 59%
rename from okitweb/static/okit/js/oci_artefacts/service_gateway.js
rename to okitweb/static/okit/view/designer/js/artefacts/service_gateway.js
index ac8bdb8b3..aa3fab1f6 100644
--- a/okitweb/static/okit/js/oci_artefacts/service_gateway.js
+++ b/okitweb/static/okit/view/designer/js/artefacts/service_gateway.js
@@ -2,66 +2,31 @@
 ** Copyright (c) 2020, Oracle and/or its affiliates.
 ** Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl.
 */
-console.info('Loaded Service Gateway Javascript');
-
-const service_gateway_query_cb = "service-gateway-query-cb";
+console.info('Loaded Designer ServiceGateway View Javascript');
 
 /*
-** Define ServiceGateway Class
+** Define ServiceGateway View Artifact Class
  */
-class ServiceGateway extends OkitArtifact {
-    /*
-    ** Create
-     */
-    constructor (data={}, okitjson={}, parent=null) {
-        super(okitjson);
-        this.parent_id = data.parent_id;
-        // Configure default values
-        this.display_name = this.generateDefaultName(okitjson.service_gateways.length + 1);
-        this.compartment_id = data.compartment_id;
-        this.vcn_id = data.parent_id;
-        this.service_name = 'All Services';
-        this.autonomous_database_ids = [];
-        this.object_storage_bucket_ids = [];
-        this.route_table_id = '';
-        // Update with any passed data
-        this.merge(data);
-        this.convert();
-        // Add Get Parent function
-        if (parent !== null) {
-            this.getParent = () => {return parent};
-        }
+class ServiceGatewayView extends OkitDesignerArtefactView {
+    constructor(artefact=null, json_view) {
+        super(artefact, json_view);
     }
 
+    get parent_id() {return this.artefact.vcn_id;}
 
-    /*
-    ** Clone Functionality
-     */
-    clone() {
-        return new ServiceGateway(this, this.getOkitJson());
+    getParent() {
+        return this.getJsonView().getVirtualCloudNetwork(this.parent_id);
     }
 
-
-    /*
-    ** Delete Processing
-     */
-    deleteChildren() {
-        // Remove Service Gateway references
-        for (let route_table of this.getOkitJson().route_tables) {
-            for (let i = 0; i < route_table.route_rules.length; i++) {
-                if (route_table.route_rules[i]['network_entity_id'] === this.id) {
-                    route_table.route_rules.splice(i, 1);
-                }
-            }
-        }
+    getParentId() {
+        return this.parent_id;
     }
 
-
     /*
      ** SVG Processing
      */
     draw() {
-        console.groupCollapsed('Drawing ' + this.getArtifactReference() + ' : ' + this.id + ' [' + this.parent_id + ']');
+        console.group('Drawing ' + this.getArtifactReference() + ' : ' + this.id + ' [' + this.parent_id + ']');
         let me = this;
         let svg = super.draw();
         // Get Inner Rect to attach Connectors
@@ -88,7 +53,7 @@ class ServiceGateway extends OkitArtifact {
     }
 
     drawConnectors() {
-        console.groupCollapsed('Drawing Connectors for ' + this.getArtifactReference() + ' : ' + this.id + ' [' + this.parent_id + ']');
+        console.group('Drawing Connectors for ' + this.getArtifactReference() + ' : ' + this.id + ' [' + this.parent_id + ']');
         // Get Grand Parent
         let grandparent_id = d3.select(d3Id(this.parent_id)).attr('data-parent-id');
         // Define Connector Parent
@@ -151,39 +116,17 @@ class ServiceGateway extends OkitArtifact {
 
     // Return Artifact Specific Definition.
     getSvgDefinition() {
-        console.groupCollapsed('Getting Definition of ' + this.getArtifactReference() + ' : ' + this.id);
         let definition = this.newSVGDefinition(this, this.getArtifactReference());
-        let dimensions = this.getDimensions();
         let first_child = this.getParent().getChildOffset(this.getArtifactReference());
         definition['svg']['x'] = first_child.dx;
         definition['svg']['y'] = first_child.dy;
-        definition['svg']['width'] = dimensions['width'];
-        definition['svg']['height'] = dimensions['height'];
+        definition['svg']['width'] = this.dimensions['width'];
+        definition['svg']['height'] = this.dimensions['height'];
         definition['rect']['stroke']['colour'] = stroke_colours.purple;
         definition['rect']['stroke']['dash'] = 1;
-        console.info(JSON.stringify(definition, null, 2));
-        console.groupEnd();
         return definition;
     }
 
-    // Return Artifact Dimensions
-    getDimensions() {
-        console.groupCollapsed('Getting Dimensions of ' + this.getArtifactReference() + ' : ' + this.id);
-        let dimensions = this.getMinimumDimensions();
-        // Calculate Size based on Child Artifacts
-        // Check size against minimum
-        dimensions.width  = Math.max(dimensions.width,  this.getMinimumDimensions().width);
-        dimensions.height = Math.max(dimensions.height, this.getMinimumDimensions().height);
-        console.info('Overall Dimensions       : ' + JSON.stringify(dimensions));
-        console.groupEnd();
-        return dimensions;
-    }
-
-    getMinimumDimensions() {
-        return {width: icon_width, height:icon_height};
-    }
-
-
     /*
     ** Property Sheet Load function
      */
@@ -212,80 +155,26 @@ class ServiceGateway extends OkitArtifact {
                 }
             }
             // Load Properties
-            loadPropertiesSheet(me);
+            loadPropertiesSheet(me.artefact);
         });
     }
 
-
-    getNamePrefix() {
-        return super.getNamePrefix() + 'sg';
+    /*
+    ** Load and display Value Proposition
+     */
+    loadValueProposition() {
+        $(jqId(VALUE_PROPOSITION_PANEL)).load("valueproposition/service_gateway.html");
     }
 
     /*
     ** Static Functionality
      */
     static getArtifactReference() {
-        return 'Service Gateway';
+        return ServiceGateway.getArtifactReference();
     }
 
     static getDropTargets() {
         return [VirtualCloudNetwork.getArtifactReference()];
     }
 
-    static query(request = {}, region='') {
-        console.info('------------- Service Gateway Query --------------------');
-        console.info('------------- Compartment           : ' + request.compartment_id);
-        console.info('------------- Virtual Cloud Network : ' + request.vcn_id);
-        let me = this;
-        queryCount++;
-        $.ajax({
-            type: 'get',
-            url: 'oci/artifacts/ServiceGateway',
-            dataType: 'text',
-            contentType: 'application/json',
-            data: JSON.stringify(request),
-            success: function(resp) {
-                let response_json = JSON.parse(resp);
-                regionOkitJson[region].load({service_gateways: response_json});
-                for (let artifact of response_json) {
-                    console.info(me.getArtifactReference() + ' Query : ' + artifact.display_name);
-                }
-                redrawSVGCanvas(region);
-                $('#' + service_gateway_query_cb).prop('checked', true);
-                queryCount--;
-                hideQueryProgressIfComplete();
-            },
-            error: function(xhr, status, error) {
-                console.info('Status : ' + status)
-                console.info('Error : ' + error)
-                $('#' + service_gateway_query_cb).prop('checked', true);
-                queryCount--;
-                hideQueryProgressIfComplete();
-            }
-        });
-    }
-}
-
-$(document).ready(function() {
-    // Setup Search Checkbox
-    let body = d3.select('#query-progress-tbody');
-    let row = body.append('tr');
-    let cell = row.append('td');
-    cell.append('input')
-        .attr('type', 'checkbox')
-        .attr('id', service_gateway_query_cb);
-    cell.append('label').text(ServiceGateway.getArtifactReference());
-
-    // Setup Query Display Form
-    body = d3.select('#query-oci-tbody');
-    row = body.append('tr');
-    cell = row.append('td')
-        .text(ServiceGateway.getArtifactReference());
-    cell = row.append('td');
-    let input = cell.append('input')
-        .attr('type', 'text')
-        .attr('class', 'query-filter')
-        .attr('id', 'service_gateway_name_filter')
-        .attr('name', 'service_gateway_name_filter');
-});
-
+}
\ No newline at end of file
diff --git a/okitweb/static/okit/view/designer/js/artefacts/subnet.js b/okitweb/static/okit/view/designer/js/artefacts/subnet.js
new file mode 100644
index 000000000..636a1f8c6
--- /dev/null
+++ b/okitweb/static/okit/view/designer/js/artefacts/subnet.js
@@ -0,0 +1,157 @@
+/*
+** Copyright (c) 2020, Oracle and/or its affiliates.
+** Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl.
+*/
+console.info('Loaded Designer Subnet View Javascript');
+
+/*
+** Define Subnet View Artifact Class
+ */
+class SubnetView extends OkitContainerDesignerArtefactView {
+    constructor(artefact=null, json_view) {
+        super(artefact, json_view);
+    }
+
+    get parent_id() {return this.artefact.vcn_id;}
+    get minimum_width() {return 400;}
+    get minimum_height() {return 150;}
+
+    getParent() {
+        return this.getJsonView().getVirtualCloudNetwork(this.parent_id);
+    }
+
+    getParentId() {
+        return this.parent_id;
+    }
+
+    /*
+     ** SVG Processing
+     */
+    draw() {
+        console.group(`Drawing ${this.getArtifactReference()} : ${this.display_name} (${this.artefact_id}) [${this.parent_id}]`);
+        let me = this;
+        let svg = super.draw();
+        let fill = d3.select(d3Id(this.id)).attr('fill');
+        svg.on("mouseover", function () {
+            //d3.selectAll(d3Id(me.id + '-vnic')).attr('fill', svg_highlight_colour);
+            $(jqId(me.id + '-vnic')).addClass('highlight-vnic');
+            d3.event.stopPropagation();
+        });
+        svg.on("mouseout", function () {
+            //d3.selectAll(d3Id(me.id + '-vnic')).attr('fill', fill);
+            $(jqId(me.id + '-vnic')).removeClass('highlight-vnic');
+            d3.event.stopPropagation();
+        });
+        this.drawAttachments();
+        console.groupEnd();
+    }
+
+    drawAttachments() {
+        console.group(`Drawing ${this.getArtifactReference()} : ${this.display_name} Attachments (${this.artefact_id})`);
+        let attachment_count = 0;
+        // Draw Route Table
+        if (this.artefact.route_table_id !== '') {
+            let attachment = new RouteTableView(this.getJsonView().getOkitJson().getRouteTable(this.route_table_id), this.getJsonView());
+            attachment.attached_id = this.id;
+            console.info(`Drawing ${this.getArtifactReference()} Route Table : ${attachment.display_name}`);
+            attachment.draw();
+            attachment_count += 1;
+        }
+        // Security Lists
+        for (let security_list_id of this.artefact.security_list_ids) {
+            let attachment = new SecurityListView(this.getJsonView().getOkitJson().getSecurityList(security_list_id), this.getJsonView());
+            attachment.attached_id = this.id;
+            console.info(`Drawing ${this.getArtifactReference()} Security List : ${attachment.display_name}`);
+            attachment.draw();
+            attachment_count += 1;
+        }
+    }
+
+    getSvgDefinition() {
+        let definition = this.newSVGDefinition(this, Subnet.getArtifactReference());
+        // Get Parents First Child Container Offset
+        let parent_first_child = this.getParent().getChildOffset(this.getArtifactReference());
+        definition['svg']['x'] = parent_first_child.dx;
+        definition['svg']['y'] = parent_first_child.dy;
+        definition['svg']['width'] = this.dimensions['width'];
+        definition['svg']['height'] = this.dimensions['height'];
+        definition['rect']['stroke']['colour'] = stroke_colours.orange;
+        definition['rect']['stroke']['dash'] = 5;
+        definition['rect']['stroke']['width'] = 2;
+        definition['icon']['x_translation'] = icon_translate_x_start;
+        definition['icon']['y_translation'] = icon_translate_y_start;
+        definition['name']['show'] = true;
+        definition['label']['show'] = true;
+        if (this.prohibit_public_ip_on_vnic) {
+            definition['label']['text'] = 'Private ' + Subnet.getArtifactReference();
+        } else  {
+            definition['label']['text'] = 'Public ' + Subnet.getArtifactReference();
+        }
+        definition['info']['show'] = true;
+        definition['info']['text'] = this.cidr_block;
+        return definition;
+    }
+
+    /*
+    ** Property Sheet Load function
+     */
+    loadProperties() {
+        let me = this;
+        $(jqId(PROPERTIES_PANEL)).load("propertysheets/subnet.html", () => {
+            // Load Referenced Ids
+            let route_table_select = $(jqId('route_table_id'));
+            route_table_select.append($('<option>').attr('value', '').text(''));
+            for (let route_table of me.artefact.getOkitJson().route_tables) {
+                if (me.vcn_id === route_table.vcn_id) {
+                    route_table_select.append($('<option>').attr('value', route_table.id).text(route_table.display_name));
+                }
+            }
+            let security_lists_select = $(jqId('security_list_ids'));
+            for (let security_list of me.artefact.getOkitJson().security_lists) {
+                if (me.vcn_id === security_list.vcn_id) {
+                    security_lists_select.append($('<option>').attr('value', security_list.id).text(security_list.display_name));
+                }
+            }
+            // Load Properties
+            loadPropertiesSheet(me.artefact);
+        });
+    }
+
+    /*
+    ** Load and display Value Proposition
+     */
+    loadValueProposition() {
+        $(jqId(VALUE_PROPOSITION_PANEL)).load("valueproposition/subnet.html");
+    }
+
+    /*
+    ** Child Artifact Functions
+     */
+    getTopEdgeArtifacts() {
+        return [RouteTable.getArtifactReference(), SecurityList.getArtifactReference()];
+    }
+
+    getTopArtifacts() {
+        return [LoadBalancer.getArtifactReference()];
+    }
+
+    getBottomArtifacts() {
+        return [Instance.getArtifactReference()];
+    }
+
+    getLeftArtifacts() {
+        return [FileStorageSystem.getArtifactReference(), DatabaseSystem.getArtifactReference()];
+    }
+
+    /*
+    ** Static Functionality
+     */
+    static getArtifactReference() {
+        return Subnet.getArtifactReference();
+    }
+
+    static getDropTargets() {
+        return [VirtualCloudNetwork.getArtifactReference()];
+    }
+
+}
\ No newline at end of file
diff --git a/okitweb/static/okit/view/designer/js/artefacts/virtual_cloud_network.js b/okitweb/static/okit/view/designer/js/artefacts/virtual_cloud_network.js
new file mode 100644
index 000000000..41b325968
--- /dev/null
+++ b/okitweb/static/okit/view/designer/js/artefacts/virtual_cloud_network.js
@@ -0,0 +1,110 @@
+/*
+** Copyright (c) 2020, Oracle and/or its affiliates.
+** Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl.
+*/
+console.info('Loaded Designer VirtualCloudNetwork View Javascript');
+
+/*
+** Define VirtualCloudNetwork View Artifact Class
+ */
+class VirtualCloudNetworkView extends OkitContainerDesignerArtefactView {
+    constructor(artefact=null, json_view) {
+        super(artefact, json_view);
+    }
+
+    get parent_id() {return this.artefact.compartment_id;}
+    get minimum_width() {return 400;}
+    get minimum_height() {return 300;}
+
+    getParent() {
+        return this.getJsonView().getCompartment(this.parent_id);
+    }
+
+    getParentId() {
+        return this.parent_id;
+    }
+
+    /*
+     ** SVG Processing
+     */
+    getSvgDefinition() {
+        let definition = this.newSVGDefinition(this, VirtualCloudNetwork.getArtifactReference());
+        //let parent_first_child = getCompartmentFirstChildContainerOffset(this.compartment_id);
+        let parent_first_child = this.getParent().getChildOffset(this.getArtifactReference());
+        definition['svg']['x'] = parent_first_child.dx;
+        definition['svg']['y'] = parent_first_child.dy;
+        definition['svg']['width'] = this.dimensions['width'];
+        definition['svg']['height'] = this.dimensions['height'];
+        definition['rect']['stroke']['colour'] = stroke_colours.orange;
+        definition['rect']['stroke']['dash'] = 5;
+        definition['rect']['stroke']['width'] = 2;
+        definition['icon']['x_translation'] = icon_translate_x_start;
+        definition['icon']['y_translation'] = icon_translate_y_start;
+        definition['name']['show'] = true;
+        definition['label']['show'] = true;
+        definition['info']['show'] = true;
+        definition['info']['text'] = this.cidr_block;
+        return definition;
+    }
+
+    /*
+    ** Property Sheet Load function
+     */
+    loadProperties() {
+        let me = this;
+        $(jqId(PROPERTIES_PANEL)).load("propertysheets/virtual_cloud_network.html", () => {
+            loadPropertiesSheet(me.artefact);
+            $(jqId('cidr_block')).on('change', function() {
+                console.info('CIDR Block Changed ' + $(jqId('cidr_block')).val());
+                for (let subnet of me.artefact.getOkitJson().subnets) {
+                    if (subnet.vcn_id === me.id) {
+                        subnet.cidr_block = subnet.generateCIDR(me.id);
+                    }
+                }
+                redrawSVGCanvas();
+            });
+        });
+    }
+
+    /*
+    ** Load and display Value Proposition
+     */
+    loadValueProposition() {
+        $(jqId(VALUE_PROPOSITION_PANEL)).load("valueproposition/virtual_cloud_network.html");
+    }
+
+    /*
+    ** Child Artifact Functions
+     */
+    getTopEdgeArtifacts() {
+        return [InternetGateway.getArtifactReference(), NATGateway.getArtifactReference()];
+    }
+
+    getTopArtifacts() {
+        return [RouteTable.getArtifactReference(), SecurityList.getArtifactReference(), NetworkSecurityGroup.getArtifactReference()];
+    }
+
+    getContainerArtifacts() {
+        return [Subnet.getArtifactReference()];
+    }
+
+    getRightEdgeArtifacts() {
+        return[ServiceGateway.getArtifactReference(), DynamicRoutingGateway.getArtifactReference(), LocalPeeringGateway.getArtifactReference()]
+    }
+
+    getBottomEdgeArtifacts() {
+        return [];
+    }
+
+    /*
+    ** Static Functionality
+     */
+    static getArtifactReference() {
+        return VirtualCloudNetwork.getArtifactReference();
+    }
+
+    static getDropTargets() {
+        return [Compartment.getArtifactReference()];
+    }
+
+}
\ No newline at end of file
diff --git a/okitweb/static/okit/view/designer/js/artefacts/virtual_network_interface.js b/okitweb/static/okit/view/designer/js/artefacts/virtual_network_interface.js
new file mode 100644
index 000000000..4ee7c5407
--- /dev/null
+++ b/okitweb/static/okit/view/designer/js/artefacts/virtual_network_interface.js
@@ -0,0 +1,96 @@
+/*
+** Copyright (c) 2020, Oracle and/or its affiliates.
+** Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl.
+*/
+console.info('Loaded Designer VirtualNetworkInterface View Javascript');
+
+/*
+** Define VirtualNetworkInterface View Artifact Class
+ */
+class VirtualNetworkInterfaceView extends OkitDesignerArtefactView {
+    constructor(artefact=null, json_view) {
+        super(artefact, json_view);
+    }
+
+    get parent_id() {return this.attached_id;}
+
+    getParent() {
+        return this.attached_id ? this.getJsonView().getInstance(this.parent_id) : null;
+    }
+
+    getParentId() {
+        return this.parent_id;
+    }
+
+    /*
+     ** SVG Processing
+     */
+    draw() {
+        console.group('Drawing ' + this.getArtifactReference() + ' : ' + this.id + ' [' + this.parent_id + ']');
+        let me = this;
+        let svg = super.draw();
+        console.groupEnd();
+        return svg;
+    }
+
+    // Return Artifact Specific Definition.
+    getSvgDefinition() {
+        console.group('Getting Definition of ' + this.getArtifactReference() + ' : ' + this.id);
+        let definition = this.newSVGDefinition(this, this.getArtifactReference());
+        console.info(this.getParent());
+        let first_child = this.getParent().getChildOffset(this.getArtifactReference());
+        definition['svg']['x'] = first_child.dx;
+        definition['svg']['y'] = first_child.dy;
+        definition['svg']['width'] = this.dimensions['width'];
+        definition['svg']['height'] = this.dimensions['height'];
+        definition['rect']['stroke']['colour'] = stroke_colours.bark;
+        definition['rect']['stroke']['dash'] = 1;
+        console.info(JSON.stringify(definition, null, 2));
+        console.groupEnd();
+        return definition;
+    }
+
+    /*
+    ** Property Sheet Load function
+     */
+    loadProperties() {
+        let me = this;
+        $(jqId(PROPERTIES_PANEL)).load("propertysheets/virtual_network_interface.html", () => {
+            // Load Referenced Ids
+            let route_table_select = $(jqId('route_table_id'));
+            route_table_select.append($('<option>').attr('value', '').text(''));
+            for (let route_table of me.artefact.getOkitJson().route_tables) {
+                if (me.vcn_id === route_table.vcn_id) {
+                    route_table_select.append($('<option>').attr('value', route_table.id).text(route_table.display_name));
+                }
+            }
+            let security_lists_select = $(jqId('security_list_ids'));
+            for (let security_list of me.artefact.getOkitJson().security_lists) {
+                if (me.vcn_id === security_list.vcn_id) {
+                    security_lists_select.append($('<option>').attr('value', security_list.id).text(security_list.display_name));
+                }
+            }
+            // Load Properties
+            loadPropertiesSheet(me.artefact);}
+            );
+    }
+
+    /*
+    ** Load and display Value Proposition
+     */
+    loadValueProposition() {
+        $(jqId(VALUE_PROPOSITION_PANEL)).load("valueproposition/virtual_network_interface.html");
+    }
+
+    /*
+    ** Static Functionality
+     */
+    static getArtifactReference() {
+        return VirtualNetworkInterface.getArtifactReference();
+    }
+
+    static getDropTargets() {
+        return [];
+    }
+
+}
\ No newline at end of file
diff --git a/okitweb/static/okit/view/designer/js/okit_designer_view.js b/okitweb/static/okit/view/designer/js/okit_designer_view.js
index 501514e70..3ace8a3d0 100644
--- a/okitweb/static/okit/view/designer/js/okit_designer_view.js
+++ b/okitweb/static/okit/view/designer/js/okit_designer_view.js
@@ -4,7 +4,6 @@
 */
 console.info('Loaded OKIT Designer View Javascript');
 
-// TODO: Implement View Classes
 class OkitDesignerJsonView extends OkitJsonView {
     // Define Constants
     static get CANVAS_SVG() {return 'canvas-svg'}
@@ -16,105 +15,111 @@ class OkitDesignerJsonView extends OkitJsonView {
         this.palette_svg = palette_svg;
     }
 
+    static newView(model, parent_id, display_grid = false, palette = []) {
+        return new OkitDesignerJsonView((model, parent_id, display_grid, palette))
+    }
+
     draw() {
-        console.groupCollapsed('Drawing SVG Canvas');
+        console.group('Drawing Designer Canvas');
+        console.info(this);
         // Display Json
         this.displayOkitJson();
         // New canvas
         let width = 0;
         let height = 0;
-        for (let compartment of this.getOkitJson().compartments) {
-            let dimensions = this.newCompartment(compartment).dimensions;
+        for (let compartment of this.compartments) {
+            console.info(`Processing ${compartment.artefact.display_name}`);
+            let dimensions = compartment.dimensions;
             width = Math.max(width, dimensions.width);
             height = Math.max(height, dimensions.height);
         }
-        let canvas_svg = this.newCanvas(this.parent_id, width, height);
+        let canvas_svg = this.newCanvas(width, height);
 
         // Draw Compartments
         for (let compartment of this.compartments) {
-            this.newCompartment(compartment).draw();
+            compartment.draw();
         }
 
         // Draw Compartment Sub Components
         // Virtual Cloud Networks
         for (let virtual_cloud_network of this.virtual_cloud_networks) {
-            this.newVirtualCloudNetwork(virtual_cloud_network).draw();
+            virtual_cloud_network.draw();
         }
         // Block Storage Volumes
         for (let block_storage_volume of this.block_storage_volumes) {
-            this.newBlockStorageVolume(block_storage_volume).draw();
+            block_storage_volume.draw();
         }
         // Object Storage Buckets
         for (let object_storage_bucket of this.object_storage_buckets) {
-            this.newObjectStorageBucket(object_storage_bucket).draw();
+            object_storage_bucket.draw();
         }
         // Autonomous Databases
         for (let autonomous_database of this.autonomous_databases) {
-            this.newAutonomousDatabase(autonomous_database).draw();
+            autonomous_database.draw();
         }
         // FastConnects
         for (let fast_connect of this.fast_connects) {
-            this.newFastConnect(fast_connect).draw();
+            fast_connect.draw();
         }
 
         // Draw Virtual Cloud Network Sub Components
         // Internet Gateways
         for (let internet_gateway of this.internet_gateways) {
-            this.newInternetGateway(internet_gateway).draw();
+            internet_gateway.draw();
         }
         // NAT Gateways
         for (let nat_gateway of this.nat_gateways) {
-            this.newNATGateway(nat_gateway).draw();
+            nat_gateway.draw();
         }
         // Service Gateways
         for (let service_gateway of this.service_gateways) {
-            this.newServiceGateway(service_gateway).draw();
+            service_gateway.draw();
         }
         // Dynamic Routing Gateways
         for (let dynamic_routing_gateway of this.dynamic_routing_gateways) {
-            this.newDynamicRoutingGateway(dynamic_routing_gateway).draw();
+            dynamic_routing_gateway.draw();
         }
         // Local Peering Gateways
         for (let local_peering_gateway of this.local_peering_gateways) {
-            this.newLocalPeeringGateway(local_peering_gateway).draw();
+            local_peering_gateway.draw();
         }
         // Route Tables
         for (let route_table of this.route_tables) {
-            this.newRouteTable(route_table).draw();
+            route_table.draw();
         }
         // Security Lists
         for (let security_list of this.security_lists) {
-            this.newSecurityList(security_list).draw();
+            security_list.draw();
         }
         // Network Security Groups
         for (let network_security_group of this.network_security_groups) {
-            this.newNetworkSecurityGroup(network_security_group).draw();
+            network_security_group.draw();
         }
         // Subnets
         for (let subnet of this.subnets) {
-            this.newSubnet(subnet).draw();
+            subnet.draw();
         }
 
         // Draw Subnet Sub Components
         // Database System
         for (let database_system of this.database_systems) {
-            this.newDatabaseSystem(database_system).draw();
+            database_system.draw();
         }
         // File Storage System
         for (let file_storage_system of this.file_storage_systems) {
-            this.newFileStorageSystem(file_storage_system).draw();
+            file_storage_system.draw();
         }
         // Containers
         for (let container of this.containers) {
-            this.newContainer(container).draw();
+            container.draw();
         }
         // Instances
         for (let instance of this.instances) {
-            this.newInstance(instance).draw();
+            instance.draw();
         }
         // Load Balancers
         for (let load_balancer of this.load_balancers) {
-            this.newLoadBalancer(load_balancer).draw();
+            load_balancer.draw();
         }
 
         // Resize Main Canvas if required
@@ -142,9 +147,67 @@ class OkitDesignerJsonView extends OkitJsonView {
         console.groupEnd();
     }
 
+    /*
+    ** Draw Functions for each specific Artefact
+     */
+    drawRootCompartment() {
+        this.drawCompartments(null);
+    }
+    drawCompartments(parent_id) {
+        for (let compartment of this.compartments) {
+            if (compartment.compartment_id === parent_id) {
+                compartment.draw();
+                // Draw Sub Compartments
+            }
+        }
+    }
+
     displayOkitJson() {}
 
-    newCanvas() {}
+    newCanvas(width=400, height=300) {
+        console.group('New Canvas');
+        console.info('Parent                : ' + this.parent_id);
+        console.info('Width                 : ' + width);
+        console.info('Height                : ' + height);
+        let canvas_div = d3.select(d3Id(this.parent_id));
+        let parent_width  = $(jqId(this.parent_id)).width();
+        let parent_height = $(jqId(this.parent_id)).height();
+        width  = Math.round(Math.max(width, parent_width));
+        height = Math.round(Math.max(height, parent_height));
+        console.info('Width                 : ' + width);
+        console.info('Height                : ' + height);
+        // Round up to next grid size to display full grid.
+        if (okitSettings.is_display_grid) {
+            width += (grid_size - (width % grid_size) + 1);
+            height += (grid_size - (height % grid_size) + 1);
+        }
+        console.info('Default Canvas Width  : ' + default_canvas_width);
+        console.info('Default Canvas Height : ' + default_canvas_height);
+        console.info('JQuery Parent Width   : ' + $(jqId(this.parent_id)).width());
+        console.info('JQuery Parent Height  : ' + $(jqId(this.parent_id)).height());
+        console.info('Client Parent Width   : ' + document.getElementById(this.parent_id).clientWidth);
+        console.info('Client Parent Height  : ' + document.getElementById(this.parent_id).clientHeight);
+        console.info('Window Width          : ' + $(window).width());
+        console.info('Window Height         : ' + $(window).height());
+        console.info('Canvas Width          : ' + width);
+        console.info('Canvas Height         : ' + height);
+        // Empty existing Canvas
+        canvas_div.selectAll('*').remove();
+        // Wrapper SVG Element to define ViewBox etc
+        let canvas_svg = canvas_div.append("svg")
+            .attr("id", 'canvas-svg')
+            .attr("x", 0)
+            .attr("y", 0)
+            .attr("width", width)
+            .attr("height", height)
+            .attr("viewBox", "0 0 " + width + " " + height)
+            .attr("preserveAspectRatio", "xMinYMin meet");
+
+        this.clearCanvas();
+        console.groupEnd();
+
+        return canvas_svg;
+    }
 
     clearCanvas() {
         let canvas_svg = d3.select(d3Id(OkitDesignerJsonView.CANVAS_SVG));
@@ -240,8 +303,14 @@ class OkitDesignerJsonView extends OkitJsonView {
 }
 
 class OkitDesignerArtefactView extends OkitArtefactView {
-    constructor(artefact=null) {
-        super(artefact);
+    constructor(artefact=null, json_view) {
+        super(artefact, json_view);
+    }
+}
+
+class OkitContainerDesignerArtefactView extends OkitContainerArtefactView {
+    constructor(artefact=null, json_view) {
+        super(artefact, json_view);
     }
 }
 
diff --git a/okitweb/static/okit/view/js/okit_view.js b/okitweb/static/okit/view/js/okit_view.js
index e380b3364..6e68bc7f4 100644
--- a/okitweb/static/okit/view/js/okit_view.js
+++ b/okitweb/static/okit/view/js/okit_view.js
@@ -4,18 +4,42 @@
 */
 console.info('Loaded OKIT View Javascript');
 
-// TODO: Implement View Classes
 class OkitJsonView {
     constructor(okitjson=null) {
+        // Specify / Assign Model
         if (okitjson === null || okitjson === undefined) {
             this.okitjson = new OkitJson();
         } else if (typeof okitjson === 'string') {
-            this.okitjson = JSON.parse(okitjson);
+            this.okitjson = new OkitJson(okitjson);
         } else if (okitjson instanceof Object) {
             this.okitjson = okitjson;
         } else {
             this.okitjson = new OkitJson();
         }
+        // Define View Lists
+        this.compartments = [];
+        this.autonomous_databases = [];
+        this.block_storage_volumes = [];
+        this.containers = [];
+        this.database_systems = [];
+        this.dynamic_routing_gateways = [];
+        this.fast_connects = [];
+        this.file_storage_systems = [];
+        this.instances = [];
+        this.internet_gateways = [];
+        this.load_balancers = [];
+        this.local_peering_gateways = [];
+        this.nat_gateways = [];
+        this.network_security_groups = [];
+        this.object_storage_buckets = [];
+        this.remote_peering_gateways = [];
+        this.route_tables = [];
+        this.security_lists = [];
+        this.service_gateways = [];
+        this.subnets = [];
+        this.virtual_cloud_networks = [];
+        // Load Model to View
+        this.load();
     }
 
     get small_grid_size() {return 8;}
@@ -35,198 +59,879 @@ class OkitJsonView {
     }
     get svg_highlight_colour() {return "#00cc00";}
 
-    load() {}
+    drop(source, target) {
+        let newFunction = 'new' + source.name;
+        let getFunction = 'get' + target.type.split(' ').join('');
+        console.info('New Function : ' + newFunction);
+        console.info('Get Function : ' + getFunction);
+    }
+
+    clear() {
+        this.compartments = [];
+        this.autonomous_databases = [];
+        this.block_storage_volumes = [];
+        this.containers = [];
+        this.database_systems = [];
+        this.dynamic_routing_gateways = [];
+        this.fast_connects = [];
+        this.file_storage_systems = [];
+        this.instances = [];
+        this.internet_gateways = [];
+        this.load_balancers = [];
+        this.local_peering_gateways = [];
+        this.nat_gateways = [];
+        this.network_security_groups = [];
+        this.object_storage_buckets = [];
+        this.remote_peering_gateways = [];
+        this.route_tables = [];
+        this.security_lists = [];
+        this.service_gateways = [];
+        this.subnets = [];
+        this.virtual_cloud_networks = [];
+        this.virtual_network_interfaces = [];
+    }
 
-    draw() {}
+    load() {
+        this.clear();
+        for (let artefact of this.okitjson.compartments) {this.newCompartment(artefact);}
+        for (let artefact of this.okitjson.autonomous_databases) {this.newAutonomousDatabase(artefact);}
+        for (let artefact of this.okitjson.block_storage_volumes) {this.newBlockStorageVolume(artefact);}
+        for (let artefact of this.okitjson.database_systems) {this.newDatabaseSystem(artefact);}
+        for (let artefact of this.okitjson.dynamic_routing_gateways) {this.newDynamicRoutingGateway(artefact);}
+        for (let artefact of this.okitjson.fast_connects) {this.newFastConnect(artefact);}
+        for (let artefact of this.okitjson.file_storage_systems) {this.newFileStorageSystem(artefact);}
+        for (let artefact of this.okitjson.instances) {this.newInstance(artefact);}
+        for (let artefact of this.okitjson.internet_gateways) {this.newInternetGateway(artefact);}
+        for (let artefact of this.okitjson.load_balancers) {this.newLoadBalancer(artefact);}
+        for (let artefact of this.okitjson.local_peering_gateways) {this.newLocalPeeringGateway(artefact);}
+        for (let artefact of this.okitjson.nat_gateways) {this.newNATGateway(artefact);}
+        for (let artefact of this.okitjson.network_security_groups) {this.newNetworkSecurityGroup(artefact);}
+        for (let artefact of this.okitjson.object_storage_buckets) {this.newObjectStorageBucket(artefact);}
+        //for (let artefact of this.okitjson.remote_peering_gateways) {this.newRemotePeeringGateway(artefact);}
+        for (let artefact of this.okitjson.route_tables) {this.newRouteTable(artefact);}
+        for (let artefact of this.okitjson.security_lists) {this.newSecurityList(artefact);}
+        for (let artefact of this.okitjson.service_gateways) {this.newServiceGateway(artefact);}
+        for (let artefact of this.okitjson.subnets) {this.newSubnet(artefact);}
+        for (let artefact of this.okitjson.virtual_cloud_networks) {this.newVirtualCloudNetwork(artefact);}
+    }
+
+    update(model) {
+        if (model && model != null )
+        {
+            this.okitjson = model;
+        }
+        this.load();
+        this.draw();
+        console.info('<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<Updating View With Model>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>');
+        console.info(this);
+        console.info(okitJsonView);
+    }
+
+    draw() {
+        console.info('Top Level View Draw');
+    }
 
     getOkitJson() {
         return this.okitjson;
     }
 
+    /*
+    ** Common View Functions
+     */
+    addGrid(canvas_svg) {
+        canvas_svg.append('rect')
+            .attr("width", "100%")
+            .attr("height", "100%")
+            .attr("fill", "url(#grid)");
+    }
+
     /*
     ** Artefact Processing
      */
 
     // Autonomous Database
-    newAutonomousDatabase() {
-        return new AutonomousDatabaseView(this.okitjson.newAutonomousDatabase());
+    dropAutonomousDatabaseView(target) {
+        console.info('Drop Autonomous Database View');
+        console.info(target);
+        let view_artefact = this.newAutonomousDatabase();
+        view_artefact.getArtefact().compartment_id = target.id;
+        console.info('View Artefact');
+        console.info(view_artefact)
+        return view_artefact;
+    }
+    newAutonomousDatabase(database) {
+        this.autonomous_databases.push(database ? new AutonomousDatabaseView(database, this) : new AutonomousDatabaseView(this.okitjson.newAutonomousDatabase(), this));
+        return this.autonomous_databases[this.autonomous_databases.length - 1];
+    }
+    getAutonomousDatabases() {
+        return this.autonomous_databases;
+    }
+    getAutonomousDatabase(id='') {
+        for (let artefact of this.getAutonomousDatabases()) {
+            if (artefact.id === id) {
+                return artefact;
+            }
+        }
+        return undefined;
+    }
+    deleteAutonomousDatabase(id='') {
+        this.okitjson.deleteAutonomousDatabase(id);
+        this.update();
+    }
+    loadAutonomousDatabases(autonomous_databases) {
+        for (const artefact of autonomous_databases) {
+            this.autonomous_databases.push(new AutonomousDatabaseView(new AutonomousDatabase(artefact, this.okitjson), this));
+        }
     }
-    getAutonomousDatabase() {}
-    deleteAutonomousDatabase() {}
 
     // Block Storage
-    newBlockStorageVolume() {
-        return new BlockStorageVolumeView(this.okitjson.newBlockStorageVolume());
+    dropBlockStorageVolumeView(target) {
+        console.info('Drop Block Storage Volume View');
+        console.info(target);
+        let view_artefact = this.newBlockStorageVolume();
+        view_artefact.getArtefact().compartment_id = target.id;
+        console.info('View Artefact');
+        console.info(view_artefact)
+        return view_artefact;
+    }
+    newBlockStorageVolume(volume) {
+        this.block_storage_volumes.push(volume ? new BlockStorageVolumeView(volume, this) : new BlockStorageVolumeView(this.okitjson.newBlockStorageVolume(), this));
+        return this.block_storage_volumes[this.block_storage_volumes.length - 1];
+    }
+    getBlockStorageVolumes() {
+        return this.block_storage_volumes;
+    }
+    getBlockStorageVolume(id='') {
+        for (let artefact of this.getBlockStorageVolumes()) {
+            if (artefact.id === id) {
+                return artefact;
+            }
+        }
+        return undefined;
+    }
+    deleteBlockStorageVolume(id='') {
+        this.okitjson.deleteBlockStorageVolume(id);
+        this.update();
+    }
+    loadBlockStorageVolumes(block_storage_volumes) {
+        for (const artefact of block_storage_volumes) {
+            this.block_storage_volumes.push(new BlockStorageVolumeView(new BlockStorageVolume(artefact, this.okitjson), this));
+        }
     }
-    getBlockStorageVolume() {}
-    deleteBlockStorageVolume() {}
 
     // Compartment
-    newCompartment() {
-        return new CompartmentView(this.okitjson.newCompartment());
+    dropCompartmentView(target) {
+        console.info('Drop Compartment View');
+        console.info(target);
+        let view_artefact = this.newCompartment();
+        view_artefact.getArtefact().compartment_id = target.type === Compartment.getArtifactReference() ? target.id : target.compartment_id;
+        console.info('View Artefact');
+        console.info(view_artefact)
+        return view_artefact;
+    }
+    newCompartment(compartment) {
+        console.info('New Compartment View ' + compartment);
+        this.compartments.push(compartment ? new CompartmentView(compartment, this) : new CompartmentView(this.okitjson.newCompartment(), this));
+        return this.compartments[this.compartments.length - 1];
+    }
+    getCompartments() {return this.compartments;}
+    getCompartment(id) {
+        for (let artefact of this.getCompartments()) {
+            if (artefact.id === id) {
+                return artefact;
+            }
+        }
+        return undefined;
+    }
+    deleteCompartment(id='') {
+        this.okitjson.deleteCompartment(id);
+        this.update();
+    }
+    loadCompartments(compartments) {
+        for (const artefact of compartments) {
+            this.compartments.push(new CompartmentView(new Compartment(artefact, this.okitjson), this));
+        }
+        console.info('<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<Loaded Compartments>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>');
+        console.info(this);
     }
-    getCompartment() {}
-    deleteCompartment() {}
 
     // Container
+    dropContainerView() {}
     newContainer() {}
+    getContainers() {}
     getContainer() {}
     deleteContainer() {}
 
     // Database System
-    newDatabaseSystem() {
-        return new DatabaseSystemView(this.okitjson.newDatabaseSystem());
+    dropDatabaseSystemView(target) {
+        console.info('Drop Database System View');
+        console.info(target);
+        let view_artefact = this.newDatabaseSystem();
+        view_artefact.getArtefact().subnet_id = target.id;
+        view_artefact.getArtefact().compartment_id = target.compartment_id;
+        console.info('View Artefact');
+        console.info(view_artefact)
+        return view_artefact;
+    }
+    newDatabaseSystem(database) {
+        this.database_systems.push(database ? new DatabaseSystemView(database, this) : new DatabaseSystemView(this.okitjson.newDatabaseSystem(), this));
+        return this.database_systems[this.database_systems.length - 1];
+    }
+    getDatabaseSystems() {
+        return this.database_systems;
+    }
+    getDatabaseSystem(id='') {
+        for (let artefact of this.getDatabaseSystems()) {
+            if (artefact.id === id) {
+                return artefact;
+            }
+        }
+        return undefined;
+    }
+    deleteDatabaseSystem(id='') {
+        this.okitjson.deleteDatabaseSystem(id);
+        this.update();
+    }
+    loadDatabaseSystems(database_systems) {
+        for (const artefact of database_systems) {
+            this.database_systems.push(new DatabaseSystemView(new DatabaseSystem(artefact, this.okitjson), this));
+        }
     }
-    getDatabaseSystem() {}
-    deleteDatabaseSystem() {}
 
     // Dynamic Routing Gateway
-    newDynamicRoutingGateway() {
-        return new DynamicRoutingGatewayView(this.okitjson.newDynamicRoutingGateway());
+    dropDynamicRoutingGatewayView(target) {
+        console.info('Drop Dynamic Routing Gateway View');
+        console.info(target);
+        let view_artefact = this.newDynamicRoutingGateway();
+        view_artefact.getArtefact().vcn_id = target.id;
+        view_artefact.getArtefact().compartment_id = target.compartment_id;
+        console.info('View Artefact');
+        console.info(view_artefact)
+        return view_artefact;
+    }
+    newDynamicRoutingGateway(gateway) {
+        this.dynamic_routing_gateways.push(gateway ? new DynamicRoutingGatewayView(gateway, this) : new DynamicRoutingGatewayView(this.okitjson.newDynamicRoutingGateway(), this));
+        return this.dynamic_routing_gateways[this.dynamic_routing_gateways.length - 1];
+    }
+    getDynamicRoutingGateways() {
+        return this.dynamic_routing_gateways;
+    }
+    getDynamicRoutingGateway(id='') {
+        for (let artefact of this.getDynamicRoutingGateways()) {
+            if (artefact.id === id) {
+                return artefact;
+            }
+        }
+        return undefined;
+    }
+    deleteDynamicRoutingGateway(id='') {
+        this.okitjson.deleteDynamicRoutingGateway(id);
+        this.update();
+    }
+    loadDynamicRoutingGateways(dynamic_routing_gateways) {
+        for (const artefact of dynamic_routing_gateways) {
+            this.dynamic_routing_gateways.push(new DynamicRoutingGatewayView(new DynamicRoutingGateway(artefact, this.okitjson), this));
+        }
     }
-    getDynamicRoutingGateway() {}
-    deleteDynamicRoutingGateway() {}
 
     // Fast Connect
-    newFastConnect() {
-        return new FastConnectView(this.okitjson.newFastConnect());
+    dropFastConnectView(target) {
+        console.info('Drop Fast Connect View');
+        console.info(target);
+        let view_artefact = this.newFastConnect();
+        view_artefact.getArtefact().compartment_id = target.id;
+        console.info('View Artefact');
+        console.info(view_artefact)
+        return view_artefact;
+    }
+    newFastConnect(connect) {
+        this.fast_connects.push(connect ? new FastConnectView(connect, this) : new FastConnectView(this.okitjson.newFastConnect(), this));
+        return this.fast_connects[this.fast_connects.length - 1];
+    }
+    getFastConnects() {
+        return this.fast_connects;
+    }
+    getFastConnect(id='') {
+        for (let artefact of this.getFastConnects()) {
+            if (artefact.id === id) {
+                return artefact;
+            }
+        }
+        return undefined;
+    }
+    deleteFastConnect(id='') {
+        this.okitjson.deleteFastConnect(id);
+        this.update();
+    }
+    loadFastConnects(fast_connects) {
+        for (const artefact of fast_connects) {
+            this.fast_connects.push(new FastConnectView(new FastConnect(artefact, this.okitjson), this));
+        }
     }
-    getFastConnect() {}
-    deleteFastConnect() {}
 
     // File Storage System
-    newFileStorageSystem() {
-        return new FileStorageSystemView(this.okitjson.newFileStorageSystem());
+    dropFileStorageSystemView(target) {
+        console.info('Drop File Storage System View');
+        console.info(target);
+        // Pass in subnet so we create a default mount
+        let view_artefact = this.newFileStorageSystem(this.okitjson.newFileStorageSystem({subnet_id: target.id}));
+        view_artefact.getArtefact().compartment_id = target.compartment_id;
+        console.info('View Artefact ' + view_artefact.subnet_id);
+        console.info(view_artefact)
+        return view_artefact;
+    }
+    newFileStorageSystem(storage) {
+        this.file_storage_systems.push(storage ? new FileStorageSystemView(storage, this) : new FileStorageSystemView(this.okitjson.newFileStorageSystem(), this));
+        return this.file_storage_systems[this.file_storage_systems.length - 1];
+    }
+    getFileStorageSystems() {
+        return this.file_storage_systems;
+    }
+    getFileStorageSystem(id='') {
+        for (let artefact of this.getFileStorageSystems()) {
+            if (artefact.id === id) {
+                return artefact;
+            }
+        }
+        return undefined;
+    }
+    deleteFileStorageSystem(id='') {
+        this.okitjson.deleteFileStorageSystem(id);
+        this.update();
+    }
+    loadFileStorageSystems(file_storage_systems) {
+        for (const artefact of file_storage_systems) {
+            this.file_storage_systems.push(new FileStorageSystemView(new FileStorageSystem(artefact, this.okitjson), this));
+        }
     }
-    getFileStorageSystem() {}
-    deleteFileStorageSystem() {}
 
     // Instance
-    newInstance() {
-        return new InstanceView(this.okitjson.newInstance());
+    dropInstanceView(target) {
+        console.info('Drop Instance View');
+        console.info(target);
+        let view_artefact = this.newInstance();
+        if (target.type === Subnet.getArtifactReference()) {
+            view_artefact.getArtefact().primary_vnic.subnet_id = target.id;
+            view_artefact.getArtefact().compartment_id = target.compartment_id;
+        } else if (target.type === Compartment.getArtifactReference()) {
+            view_artefact.getArtefact().compartment_id = target.id;
+        }
+        console.info('View Artefact');
+        console.info(view_artefact)
+        return view_artefact;
+    }
+    newInstance(instance) {
+        this.instances.push(instance ? new InstanceView(instance, this) : new InstanceView(this.okitjson.newInstance(), this));
+        return this.instances[this.instances.length - 1];
+    }
+    getInstances() {
+        return this.instances;
+    }
+    getInstance(id='') {
+        for (let artefact of this.getInstances()) {
+            if (artefact.id === id) {
+                console.info(artefact);
+                return artefact;
+            }
+        }
+        return undefined;
+    }
+    deleteInstance(id='') {
+        this.okitjson.deleteInstance(id);
+        this.update();
+    }
+    loadInstances(instances) {
+        for (const artefact of instances) {
+            this.instances.push(new InstanceView(new Instance(artefact, this.okitjson), this));
+        }
     }
-    getInstance() {}
-    deleteInstance() {}
 
     // Internet Gateway
-    newInternetGateway() {
-        return new InternetGatewayView(this.okitjson.newInternetGateway());
+    dropInternetGatewayView(target) {
+        console.info('Drop Internet Gateway View');
+        console.info(target);
+        let view_artefact = this.newInternetGateway();
+        view_artefact.getArtefact().vcn_id = target.id;
+        view_artefact.getArtefact().compartment_id = target.compartment_id;
+        console.info('View Artefact');
+        console.info(view_artefact)
+        return view_artefact;
+    }
+    newInternetGateway(gateway) {
+        let ig = gateway ? new InternetGatewayView(gateway, this) : new InternetGatewayView(this.okitjson.newInternetGateway(), this);
+        if (ig.artefact === null) {
+            return null;
+        }
+        this.internet_gateways.push(ig);
+        return this.internet_gateways[this.internet_gateways.length - 1];
+    }
+    getInternetGateways() {
+        return this.internet_gateways;
+    }
+    getInternetGateway(id='') {
+        for (let artefact of this.getInternetGateways()) {
+            if (artefact.id === id) {
+                return artefact;
+            }
+        }
+        return undefined;
+    }
+    deleteInternetGateway(id='') {
+        this.okitjson.deleteInternetGateway(id);
+        this.update();
+    }
+    loadInternetGateways(internet_gateways) {
+        for (const artefact of internet_gateways) {
+            this.internet_gateways.push(new InternetGatewayView(new InternetGateway(artefact, this.okitjson), this));
+        }
     }
-    getInternetGateway() {}
-    deleteInternetGateway() {}
 
     // Load Balancer
-    newLoadBalancer() {
-        return new LoadBalancerView(this.okitjson.newLoadBalancer());
+    dropLoadBalancerView(target) {
+        console.info('Drop Load Balancer View');
+        console.info(target);
+        let view_artefact = this.newLoadBalancer();
+        view_artefact.getArtefact().subnet_ids.push(target.id);
+        view_artefact.getArtefact().compartment_id = target.compartment_id;
+        console.info('View Artefact');
+        console.info(view_artefact)
+        return view_artefact;
+    }
+    newLoadBalancer(loadbalancer) {
+        this.load_balancers.push(loadbalancer ? new LoadBalancerView(loadbalancer, this) : new LoadBalancerView(this.okitjson.newLoadBalancer(), this));
+        return this.load_balancers[this.load_balancers.length - 1];
+    }
+    getloadBalancers() {
+        return this.load_balancers;
+    }
+    getLoadBalancer(id='') {
+        for (let artefact of this.getloadBalancers()) {
+            if (artefact.id === id) {
+                return artefact;
+            }
+        }
+        return undefined;
+    }
+    deleteLoadBalancer(id='') {
+        this.okitjson.deleteLoadBalancer(id);
+        this.update();
+    }
+    loadLoadBalancers(load_balancers) {
+        for (const artefact of load_balancers) {
+            this.load_balancers.push(new LoadBalancerView(new LoadBalancer(artefact, this.okitjson), this));
+        }
     }
-    getLoadBalancer() {}
-    deleteLoadBalancer() {}
 
     // Local Peering Gateway
-    newLocalPeeringGateway() {
-        return new LocalPeeringGatewayView(this.okitjson.newLocalPeeringGateway());
+    dropLocalPeeringGatewayView(target) {
+        console.info('Drop Local Peering Gateway View');
+        console.info(target);
+        let view_artefact = this.newLocalPeeringGateway();
+        view_artefact.getArtefact().vcn_id = target.id;
+        view_artefact.getArtefact().compartment_id = target.compartment_id;
+        console.info('View Artefact');
+        console.info(view_artefact)
+        return view_artefact;
+    }
+    newLocalPeeringGateway(gateway) {
+        this.local_peering_gateways.push(gateway ? new LocalPeeringGatewayView(gateway, this) : new LocalPeeringGatewayView(this.okitjson.newLocalPeeringGateway(), this));
+        return this.local_peering_gateways[this.local_peering_gateways.length - 1];
+    }
+    getLocalPeeringGateways() {
+        return this.local_peering_gateways;
+    }
+    getLocalPeeringGateway(id='') {
+        for (let artefact of this.getLocalPeeringGateways()) {
+            if (artefact.id === id) {
+                return artefact;
+            }
+        }
+        return undefined;
+    }
+    deleteLocalPeeringGateway(id='') {
+        this.okitjson.deleteLocalPeeringGateway(id);
+        this.update();
+    }
+    loadLocalPeeringGateways(local_peering_gateways) {
+        for (const artefact of local_peering_gateways) {
+            this.local_peering_gateways.push(new LocalPeeringGatewayView(new LocalPeeringGateway(artefact, this.okitjson), this));
+        }
     }
-    getLocalPeeringGateway() {}
-    deleteLocalPeeringGateway() {}
 
     // NAT Gateway
-    newNATGateway() {
-        return new NATGatewayView(this.okitjson.newNATGateway());
+    dropNATGatewayView(target) {
+        console.info('Drop NAT Gateway View');
+        console.info(target);
+        let view_artefact = this.newNATGateway();
+        view_artefact.getArtefact().vcn_id = target.id;
+        view_artefact.getArtefact().compartment_id = target.compartment_id;
+        console.info('View Artefact');
+        console.info(view_artefact)
+        return view_artefact;
+    }
+    newNATGateway(gateway) {
+        let ng = gateway ? new NATGatewayView(gateway, this) : new NATGatewayView(this.okitjson.newNATGateway(), this);
+        if (ng.artefact === null) {
+            return null;
+        }
+        this.nat_gateways.push(ng);
+        return this.nat_gateways[this.nat_gateways.length - 1];
+    }
+    getNATGateways() {
+        return this.nat_gateways;
+    }
+    getNATGateway(id='') {
+        for (let artefact of this.getNATGateways()) {
+            if (artefact.id === id) {
+                return artefact;
+            }
+        }
+        return undefined;
+    }
+    deleteNATGateway(id='') {
+        this.okitjson.deleteNATGateway(id);
+        this.update();
+    }
+    loadNATGateways(nat_gateways) {
+        for (const artefact of nat_gateways) {
+            this.nat_gateways.push(new NATGatewayView(new NATGateway(artefact, this.okitjson), this));
+        }
     }
-    getNATGateway() {}
-    deleteNATGateway() {}
 
     // Network Security Group
-    newNetworkSecurityGroup() {
-        return new NetworkSecurityGroupView(this.okitjson.newNetworkSecurityGroup());
+    dropNetworkSecurityGroupView(target) {
+        console.info('Drop Network Security Group View');
+        console.info(target);
+        let view_artefact = this.newNetworkSecurityGroup();
+        view_artefact.getArtefact().vcn_id = target.id;
+        view_artefact.getArtefact().compartment_id = target.compartment_id;
+        console.info('View Artefact');
+        console.info(view_artefact)
+        return view_artefact;
+    }
+    newNetworkSecurityGroup(security) {
+        this.network_security_groups.push(security ? new NetworkSecurityGroupView(security, this) : new NetworkSecurityGroupView(this.okitjson.newNetworkSecurityGroup(), this));
+        return this.network_security_groups[this.network_security_groups.length - 1];
+    }
+    getNetworkSecurityGroups() {
+        return this.network_security_groups;
+    }
+    getNetworkSecurityGroup(id='') {
+        for (let artefact of this.getNetworkSecurityGroups()) {
+            if (artefact.id === id) {
+                return artefact;
+            }
+        }
+        return undefined;
+    }
+    deleteNetworkSecurityGroup(id='') {
+        this.okitjson.deleteNetworkSecurityGroup(id);
+        this.update();
+    }
+    loadNetworkSecurityGroups(network_security_groups) {
+        for (const artefact of network_security_groups) {
+            this.network_security_groups.push(new NetworkSecurityGroupView(new NetworkSecurityGroup(artefact, this.okitjson), this));
+        }
     }
-    getNetworkSecurityGroup() {}
-    deleteNetworkSecurityGroup() {}
 
     // Object Storage Bucket
-    newObjectStorageBucket() {
-        return new ObjectStorageBucketView(this.okitjson.newObjectStorageBucket());
+    dropObjectStorageBucketView(target) {
+        console.info('Drop Object Storage Bucket View');
+        console.info(target);
+        let view_artefact = this.newObjectStorageBucket();
+        view_artefact.getArtefact().compartment_id = target.id;
+        console.info('View Artefact');
+        console.info(view_artefact)
+        return view_artefact;
+    }
+    newObjectStorageBucket(storage) {
+        this.object_storage_buckets.push(storage ? new ObjectStorageBucketView(storage, this) : new ObjectStorageBucketView(this.okitjson.newObjectStorageBucket(), this));
+        return this.object_storage_buckets[this.object_storage_buckets.length - 1];
+    }
+    getObjectStorageBuckets() {
+        return this.object_storage_buckets;
+    }
+    getObjectStorageBucket(id='') {
+        for (let artefact of this.getObjectStorageBuckets()) {
+            if (artefact.id === id) {
+                return artefact;
+            }
+        }
+        return undefined;
+    }
+    deleteObjectStorageBucket(id='') {
+        this.okitjson.deleteObjectStorageBucket(id);
+        this.update();
+    }
+    loadObjectStorageBuckets(object_storage_buckets) {
+        for (const artefact of object_storage_buckets) {
+            this.object_storage_buckets.push(new ObjectStorageBucketView(new ObjectStorageBucket(artefact, this.okitjson), this));
+        }
     }
-    getObjectStorageBucket() {}
-    deleteObjectStorageBucket() {}
 
     // Route Table
-    newRouteTable() {
-        return new RouteTableView(this.okitjson.newRouteTable());
+    dropRouteTableView(target) {
+        console.info('Drop Route Table View');
+        console.info(target);
+        let view_artefact = this.newRouteTable();
+        view_artefact.getArtefact().vcn_id = target.id;
+        view_artefact.getArtefact().compartment_id = target.compartment_id;
+        console.info('View Artefact');
+        console.info(view_artefact)
+        return view_artefact;
+    }
+    newRouteTable(routetable) {
+        this.route_tables.push(routetable ? new RouteTableView(routetable, this) : new RouteTableView(this.okitjson.newRouteTable(), this));
+        return this.route_tables[this.route_tables.length - 1];
+    }
+    getRouteTables() {
+        return this.route_tables;
+    }
+    getRouteTable(id='') {
+        for (let artefact of this.getRouteTables()) {
+            if (artefact.id === id) {
+                return artefact;
+            }
+        }
+        return undefined;
+    }
+    deleteRouteTable(id='') {
+        this.okitjson.deleteRouteTable(id);
+        this.update();
+    }
+    loadRouteTables(route_tables) {
+        for (const artefact of route_tables) {
+            this.route_tables.push(new RouteTableView(new RouteTable(artefact, this.okitjson), this));
+        }
     }
-    getRouteTable() {}
-    deleteRouteTable() {}
 
     // Security List
-    newSecurityList() {
-        return new SecurityListView(this.okitjson.newSecurityList());
+    dropSecurityListView(target) {
+        console.info('Drop Security List View');
+        console.info(target);
+        let view_artefact = this.newSecurityList();
+        view_artefact.getArtefact().vcn_id = target.id;
+        view_artefact.getArtefact().compartment_id = target.compartment_id;
+        console.info('View Artefact');
+        console.info(view_artefact)
+        return view_artefact;
+    }
+    newSecurityList(security) {
+        this.security_lists.push(security ? new SecurityListView(security, this) : new SecurityListView(this.okitjson.newSecurityList(), this));
+        return this.security_lists[this.security_lists.length - 1];
+    }
+    getSecurityLists() {
+        return this.security_lists;
+    }
+    getSecurityList(id='') {
+        for (let artefact of this.getSecurityLists()) {
+            if (artefact.id === id) {
+                return artefact;
+            }
+        }
+        return undefined;
+    }
+    deleteSecurityList(id='') {
+        this.okitjson.deleteSecurityList(id);
+        this.update();
+    }
+    loadSecurityLists(security_lists) {
+        for (const artefact of security_lists) {
+            this.security_lists.push(new SecurityListView(new SecurityList(artefact, this.okitjson), this));
+        }
     }
-    getSecurityList() {}
-    deleteSecurityList() {}
 
     // Service Gateway
-    newServiceGateway() {
-        return new ServiceGatewayView(this.okitjson.newServiceGateway());
+    dropServiceGatewayView(target) {
+        console.info('Drop Service Gateway View');
+        console.info(target);
+        let view_artefact = this.newServiceGateway();
+        view_artefact.getArtefact().vcn_id = target.id;
+        view_artefact.getArtefact().compartment_id = target.compartment_id;
+        console.info('View Artefact');
+        console.info(view_artefact)
+        return view_artefact;
+    }
+    newServiceGateway(gateway) {
+        this.service_gateways.push(gateway ? new ServiceGatewayView(gateway, this) : new ServiceGatewayView(this.okitjson.newServiceGateway(), this));
+        return this.service_gateways[this.service_gateways.length - 1];
+    }
+    getServiceGateways() {
+        return this.service_gateways;
+    }
+    getServiceGateway(id='') {
+        for (let artefact of this.getServiceGateways()) {
+            if (artefact.id === id) {
+                return artefact;
+            }
+        }
+        return undefined;
+    }
+    deleteServiceGateway(id='') {
+        this.okitjson.deleteServiceGateway(id);
+        this.update();
+    }
+    loadServiceGateways(service_gateways) {
+        for (const artefact of service_gateways) {
+            this.service_gateways.push(new ServiceGatewayView(new ServiceGateway(artefact, this.okitjson), this));
+        }
     }
-    getServiceGateway() {}
-    deleteServiceGateway() {}
 
     // Subnet
-    newSubnet() {
-        return new SubnetView(this.okitjson.newSubnet());
+    dropSubnetView(target) {
+        console.info('Drop Subnet View');
+        console.info(target);
+        let view_artefact = this.newSubnet();
+        view_artefact.getArtefact().vcn_id = target.id;
+        view_artefact.getArtefact().compartment_id = target.compartment_id;
+        console.info('View Artefact');
+        console.info(view_artefact)
+        return view_artefact;
+    }
+    newSubnet(subnet) {
+        this.subnets.push(subnet ? new SubnetView(subnet, this) : new SubnetView(this.okitjson.newSubnet(), this));
+        return this.subnets[this.subnets.length - 1];
+    }
+    getSubnets() {
+        return this.subnets;
+    }
+    getSubnet(id='') {
+        for (let artefact of this.getSubnets()) {
+            if (artefact.id === id) {
+                return artefact;
+            }
+        }
+        return undefined;
+    }
+    deleteSubnet(id='') {
+        this.okitjson.deleteSubnet(id);
+        this.update();
+    }
+    loadSubnets(subnets) {
+        for (const artefact of subnets) {
+            this.subnets.push(new SubnetView(new Subnet(artefact, this.okitjson), this));
+        }
     }
-    getSubnet() {}
-    deleteSubnet() {}
 
     // Virtual Cloud Network
-    newVirtualCloudNetwork() {
-        return new VirtualCloudNetworkView(this.okitjson.newVirtualCloudNetwork());
+    dropVirtualCloudNetworkView(target) {
+        console.info('Drop Virtual Cloud Network View');
+        console.info(target);
+        let view_artefact = this.newVirtualCloudNetwork();
+        view_artefact.getArtefact().compartment_id = target.id;
+        console.info('View Artefact');
+        console.info(view_artefact)
+        if (okitSettings.is_default_route_table) {
+            console.info('Creating Default Route Table');
+            let route_table = this.newRouteTable(this.getOkitJson().newRouteTable({vcn_id: view_artefact.id, compartment_id: view_artefact.compartment_id}));
+        }
+        if (okitSettings.is_default_security_list) {
+            console.info('Creating Default Security List');
+            let security_list = this.newSecurityList(this.getOkitJson().newSecurityList({vcn_id: view_artefact.id, compartment_id: view_artefact.compartment_id}));
+            security_list.artefact.addDefaultSecurityListRules(view_artefact.artefact.cidr_block);
+        }
+        return view_artefact;
+    }
+    newVirtualCloudNetwork(vcn) {
+        this.virtual_cloud_networks.push(vcn ? new VirtualCloudNetworkView(vcn, this) : new VirtualCloudNetworkView(this.okitjson.newVirtualCloudNetwork(), this));
+        return this.virtual_cloud_networks[this.virtual_cloud_networks.length - 1];
+    }
+    getVirtualCloudNetworks() {
+        return this.virtual_cloud_networks;
+    }
+    getVirtualCloudNetwork(id='') {
+        for (let artefact of this.virtual_cloud_networks) {
+            if (artefact.id === id) {
+                return artefact;
+            }
+        }
+        return undefined;
+    }
+    getVcn(id='') {
+        return this.getVirtualCloudNetwork(id);
+    }
+    deleteVirtualCloudNetwork(id='') {
+        this.okitjson.deleteVirtualCloudNetwork(id);
+        this.update();
+    }
+    loadVirtualCloudNetworks(virtual_cloud_networks) {
+        for (const artefact of virtual_cloud_networks) {
+            this.virtual_cloud_networks.push(new VirtualCloudNetworkView(new VirtualCloudNetwork(artefact, this.okitjson), this));
+        }
     }
-    getVirtualCloudNetwork() {}
-    deleteVirtualCloudNetwork() {}
 
     // Virtual Network Interface
-    newVirtualNetworkInterface() {
-        return new VirtualNetworkInterface(this.okitjson.newVirtualNetworkInterface());
+    newVirtualNetworkInterface(vnic) {
+        this.virtual_network_interfaces.push(vnic ? new VirtualNetworkInterfaceView(vnic, this) : new VirtualNetworkInterfaceView(this.okitjson.newVirtualNetworkInterface(), this));
+        return this.virtual_network_interfaces[this.virtual_network_interfaces.length - 1];
+    }
+    getVirtualNetworkInterfaces() {}
+    getVirtualNetworkInterface(id='') {}
+    deleteVirtualNetworkInterface(id='') {}
+
+    // Fragment
+    dropFragmentView(target) {
+        console.info('Drop Fragment View');
+        console.info(target);
+        let view_artefact = this.newFragment(target);
+        view_artefact.load();
+    }
+    newFragment(target) {
+        return new FragmentView(this.okitjson.newFragment(target), this);
     }
-    getVirtualNetworkInterface() {}
-    deleteVirtualNetworkInterface() {}
 
 }
 
+/*
+** Simple Artefact View Class for all artefacts that are not Containers
+ */
 class OkitArtefactView {
     constructor(artefact=null, json_view) {
         this.artefact = artefact;
-        this.json_view = json_view;
+        this.getJsonView = function() {return json_view};
+        // Raise Artefact Elements to View Class
+        if (this.artefact) {
+            for (let key in this.artefact) {
+                Object.defineProperty(this, key, { get: function() {return this.artefact[key];} });
+            }
+        }
     }
 
+    get json_view() {return this.getJsonView();}
+    get okit_json() {return this.json_view.getOkitJson();}
+    get id() {return this.artefact ? this.artefact.id : '';}
+    get artefact_id() {return this.artefact ? this.artefact.id : '';}
+    get compartment_id() {return this.artefact ? this.artefact.compartment_id : '';}
+    get parent_id() {return null;}
+    get display_name() {return this.artefact ? this.artefact.display_name : '';}
     get icon_width() {return 45;}
     get icon_height() {return 45;}
     get icon_dimensions() {return {width: this.icon_width, height: this.icon_height};}
     get collapsed_dimensions() {return this.icon_dimensions;}
-    get minimum_dimensions() {return this.icon_dimensions;}
+    get minimum_width() {return this.icon_width;}
+    get minimum_height() {return this.icon_height;}
+    get minimum_dimensions() {return {width: this.minimum_width, height: this.minimum_height};}
     get dimensions() {return this.minimum_dimensions;}
+    get attached() {return false;}
 
     getParent() {return null;}
 
     getParentId() {return this.parent_id;}
 
+    // TODO: Delete replaced by attached variable
+    isAttached() {return false;}
 
-    getJsonView() {
-        return this.json_view;
-    }
+    getArtefact() {return this.artefact;}
 
-    getArtefact() {
-        return this.artefact;
-    }
+    getOkitJson() {return this.okit_json;}
 
-    newSvgDefinition() {
+    newSVGDefinition() {
         let definition = {};
-        definition['artifact'] = this.getArtefact();
-        definition['data_type'] = this.getArtefact().getArtifactReference();
-        definition['name'] = {show: false, text: this.getArtefact()['display_name']};
-        definition['label'] = {show: false, text: this.getArtefact().getArtifactReference()};
-        definition['info'] = {show: false, text: this.getArtefact().getArtifactReference()};
+        definition['artefact'] = this.artefact;
+        definition['data_type'] = this.artefact ? this.artefact.getArtifactReference() : '';
+        definition['name'] = {show: false, text: this.display_name };
+        definition['label'] = {show: false, text: this.artefact ? this.artefact.getArtifactReference() : ''};
+        definition['info'] = {show: false, text: this.artefact ? this.artefact.getArtifactReference() : ''};
         definition['svg'] = {x: 0, y: 0, width: this.icon_width, height: this.icon_height};
         definition['rect'] = {x: 0, y: 0,
             width: this.icon_width, height: this.icon_height,
@@ -244,30 +949,20 @@ class OkitArtefactView {
         return;
     }
 
-    addGrid(canvas_svg) {
-        canvas_svg.append('rect')
-            .attr("width", "100%")
-            .attr("height", "100%")
-            .attr("fill", "url(#grid)");
-    }
-
     draw() {
-        console.group('Drawing (Default) ' + this.getArtifactReference() + ' : ' + this.getArtefact().id + ' [' + this.getParentId() + ']');
+        console.group(`Drawing ${this.getArtifactReference()} : ${this.display_name} (${this.artefact_id}) [${this.parent_id}]`);
         // Get Definition from Sub class
         let definition = this.getSvgDefinition();
         /*
         ** Draw Artefact based of returned definition.
          */
-        let id             = definition['artifact']['id'];
-        let parent_id      = definition['artifact']['parent_id'];
-        let parent_svg_id  = parent_id + "-svg";
-        let compartment_id = definition['artifact']['compartment_id'];
+        let parent_svg_id  = this.parent_id + "-svg";
         let def_id         = definition['data_type'].replace(/ /g, '') + 'Svg';
-        console.info('Creating ' + definition['data_type'] + ' ' + definition['artifact']['display_name'])
-        console.info('Id             : ' + id )
-        console.info('Parent Id      : ' + parent_id)
+        console.info('Creating ' + this.getArtifactReference() + ' ' + this.display_name);
+        console.info('Id             : ' + this.artefact_id );
+        console.info('Parent Id      : ' + this.parent_id);
         console.info('Parent SVG Id  : ' + parent_svg_id);
-        console.info('Compartment Id : ' + compartment_id);
+        console.info('Compartment Id : ' + this.compartment_id);
         let rect_x         = definition['rect']['x'];
         let rect_y         = definition['rect']['y'];
         let rect_width     = definition['svg']['width']  + definition['rect']['width_adjust'];
@@ -280,15 +975,11 @@ class OkitArtefactView {
             rect_x = Math.abs(definition['icon']['x_translation']);
             rect_width -= rect_x * 2;
         }
-        // Check for Artifact Display Name and if it does not exist set it to Artifact Name
-        if (!definition['artifact'].hasOwnProperty('display_name')) {
-            definition['artifact']['display_name'] = definition['artifact']['name'];
-        }
         // Get Parent SVG
         let parent_svg = d3.select(d3Id(parent_svg_id));
         // Wrapper SVG Element to define ViewBox etc
         let svg = parent_svg.append("svg")
-            .attr("id", id + '-svg')
+            .attr("id", this.artefact_id + '-svg')
             .attr("data-type", definition['data_type'])
             .attr("x",         definition['svg']['x'])
             .attr("y",         definition['svg']['y'])
@@ -298,7 +989,7 @@ class OkitArtefactView {
             .attr("preserveAspectRatio", "xMinYMax meet");
 
         let rect = svg.append("rect")
-            .attr("id", id)
+            .attr("id", this.artefact_id)
             .attr("x",            rect_x)
             .attr("y",            rect_y)
             .attr("rx",           corner_radius)
@@ -328,13 +1019,13 @@ class OkitArtefactView {
             let name_svg = svg.append('svg')
                 .attr("x", "10")
                 .attr("y", "0")
-                .attr("width", container_artifact_label_width)
+                .attr("width", container_artefact_label_width)
                 .attr("height", definition['svg']['height'])
                 .attr("preserveAspectRatio", "xMinYMin meet")
-                .attr("viewBox", "0 0 " + container_artifact_label_width + " " + definition['svg']['height']);
+                .attr("viewBox", "0 0 " + container_artefact_label_width + " " + definition['svg']['height']);
             let name = name_svg.append("text")
                 .attr("class", "svg-text")
-                .attr("id", id + '-display-name')
+                .attr("id", this.artefact_id + '-display-name')
                 .attr("x", text_align_x)
                 .attr("y", "55")
                 .attr("text-anchor", text_anchor)
@@ -345,13 +1036,13 @@ class OkitArtefactView {
             let label_svg = svg.append('svg')
                 .attr("x", "10")
                 .attr("y", "0")
-                .attr("width", container_artifact_label_width)
+                .attr("width", container_artefact_label_width)
                 .attr("height", definition['svg']['height'])
                 .attr("preserveAspectRatio", "xMinYMax meet")
-                .attr("viewBox", "0 0 " + container_artifact_label_width + " " + definition['svg']['height']);
+                .attr("viewBox", "0 0 " + container_artefact_label_width + " " + definition['svg']['height']);
             let name = label_svg.append("text")
                 .attr("class", "svg-text")
-                .attr("id", id + '-label')
+                .attr("id", this.artefact_id + '-label')
                 .attr("x", rect_x)
                 .attr("y", definition['svg']['height'] - Math.max(10, (rect_y * 2) - 10))
                 .attr("fill", definition['rect']['stroke']['colour'])
@@ -360,15 +1051,15 @@ class OkitArtefactView {
         }
         if (definition['info']['show']) {
             let info_svg = svg.append('svg')
-                .attr("x", Math.round(definition['svg']['width'] - container_artifact_info_width))
+                .attr("x", Math.round(definition['svg']['width'] - container_artefact_info_width))
                 .attr("y", "0")
-                .attr("width", container_artifact_info_width)
+                .attr("width", container_artefact_info_width)
                 .attr("height", definition['svg']['height'])
                 .attr("preserveAspectRatio", "xMinYMax meet")
-                .attr("viewBox", "0 0 " + container_artifact_info_width + " " + definition['svg']['height']);
+                .attr("viewBox", "0 0 " + container_artefact_info_width + " " + definition['svg']['height']);
             let name = info_svg.append("text")
                 .attr("class", "svg-text")
-                .attr("id", id + '-info')
+                .attr("id", this.artefact_id + '-info')
                 .attr("x", 0)
                 .attr("y", definition['svg']['height'] - Math.max(10, (rect_y * 2) - 10))
                 .attr("fill", definition['rect']['stroke']['colour'])
@@ -391,8 +1082,8 @@ class OkitArtefactView {
             .attr("transform", svg_transform);
 
         svg.append("title")
-            .attr("id", id + '-title')
-            .text(definition['data_type'] + ": " + definition['artifact']['display_name']);
+            .attr("id", this.artefact_id + '-title')
+            .text(this.display_name);
 
         // Set common attributes on svg element and children
         svg.on("contextmenu", handleContextMenu)
@@ -402,14 +1093,14 @@ class OkitArtefactView {
             .on("drop",       dragDrop)
             .on("dragend",    dragEnd)
             .attr("data-type",           definition['data_type'])
-            .attr("data-okit-id",        id)
-            .attr("data-parent-id",      parent_id)
-            .attr("data-compartment-id", compartment_id)
+            .attr("data-okit-id",        this.artefact_id)
+            .attr("data-parent-id",      this.parent_id)
+            .attr("data-compartment-id", this.compartment_id)
             .selectAll("*")
             .attr("data-type",           definition['data_type'])
-            .attr("data-okit-id",        id)
-            .attr("data-parent-id",      parent_id)
-            .attr("data-compartment-id", compartment_id);
+            .attr("data-okit-id",        this.artefact_id)
+            .attr("data-parent-id",      this.parent_id)
+            .attr("data-compartment-id", this.compartment_id);
         /*
         ** Add Properties Load Event to created svg. We require the definition of the local variable "me" so that it can
         ** be used in the function dur to the fact that using "this" in the function will refer to the function not the
@@ -417,17 +1108,29 @@ class OkitArtefactView {
          */
         let me = this;
         svg.on("click", function() {
-            me.loadProperties();
-            $('.highlight:not(' + jqId(me.id) +')').removeClass('highlight');
-            $(jqId(me.id)).toggleClass('highlight');
-            $(jqId(me.id)).hasClass('highlight') ? selectedArtefact = me.id : selectedArtefact = null;
-            me.loadValueProposition();
+            me.loadSlidePanels();
+            $('.highlight:not(' + jqId(me.artefact_id) +')').removeClass('highlight');
+            $(jqId(me.artefact_id)).toggleClass('highlight');
+            $(jqId(me.artefact_id)).hasClass('highlight') ? selectedArtefact = me.id : selectedArtefact = null;
             d3.event.stopPropagation();
         });
         console.groupEnd();
         return svg;
     }
 
+    delete() {
+        // Remove SVG Element
+        if ($(jqId(this.id + "-svg")).length) {$(jqId(this.id + "-svg")).remove()}
+    }
+
+    /*
+    ** Load Slide Panels Functions
+     */
+    loadSlidePanels() {
+        this.loadProperties();
+        this.loadValueProposition();
+    }
+
     /*
     ** Property Sheet Load function
      */
@@ -443,6 +1146,422 @@ class OkitArtefactView {
         $(jqId(VALUE_PROPOSITION_PANEL)).load("valueproposition/oci.html");
     }
 
+    /*
+    ** Child Offset Functions
+     */
+    getChildOffset(child_type) {
+        console.group('Getting Offset for ' + child_type);
+        let offset = {dx: 0, dy: 0};
+        if (this.getTopEdgeArtifacts().includes(child_type)) {
+            console.info('Top Edge Artifact');
+            offset = this.getTopEdgeChildOffset();
+        } else if (this.getTopArtifacts().includes(child_type)) {
+            console.info('Top Artifact');
+            offset = this.getTopChildOffset();
+        } else if (this.getContainerArtifacts().includes(child_type)) {
+            console.info('Container Artifact');
+            offset = this.getContainerChildOffset();
+        } else if (this.getBottomArtifacts().includes(child_type)) {
+            console.info('Bottom Artifact');
+            offset = this.getBottomChildOffset();
+        } else if (this.getBottomEdgeArtifacts().includes(child_type)) {
+            console.info('Bottom Edge Artifact');
+            offset = this.getBottomEdgeChildOffset();
+        } else if (this.getLeftEdgeArtifacts().includes(child_type)) {
+            console.info('Left Edge Artifact');
+            offset = this.getLeftEdgeChildOffset();
+        } else if (this.getLeftArtifacts().includes(child_type)) {
+            console.info('Left Artifact');
+            offset = this.getLeftChildOffset();
+        } else if (this.getRightArtifacts().includes(child_type)) {
+            console.info('Right Artifact');
+            offset = this.getRightChildOffset();
+        } else if (this.getRightEdgeArtifacts().includes(child_type)) {
+            console.info('Right Edge Artifact');
+            offset = this.getRightEdgeChildOffset();
+        } else {
+            console.warn(child_type + ' Not Found for ' + this.display_name);
+        }
+        console.groupEnd();
+        return offset
+    }
+
+    getFirstChildOffset() {
+        alert('Get First Child function "getFirstChildOffset()" has not been implemented.');
+    }
+
+    // Top Edge
+    hasTopEdgeChildren() {
+        let children = false;
+        let key = this.getParentKey();
+        for (let group of this.getTopEdgeArtifacts()) {
+            for(let artefact of this.json_view[this.artefact.artefactToElement(group)]) {
+                if (artefact[key] === this.id) {
+                    children = true;
+                    break;
+                }
+            }
+        }
+        return children;
+    }
+
+    getTopEdgeChildrenMaxDimensions() {
+        let max_dimensions = {height: 0, width: 0};
+        for (let group of this.getTopEdgeArtifacts()) {
+            for(let artefact of this.json_view[this.artefact.artefactToElement(group)]) {
+                if (artefact.parent_id === this.id) {
+                    let dimension = artefact.dimensions;
+                    max_dimensions.height = Math.max(max_dimensions.height, dimension.height);
+                    max_dimensions.width += Math.round(dimension.width + positional_adjustments.spacing.x);
+                }
+            }
+        }
+        return max_dimensions;
+    }
+
+    getFirstTopEdgeChildOffset() {
+        let offset = {
+            dx: Math.round(positional_adjustments.padding.x * 2 + positional_adjustments.spacing.x * 2),
+            dy: 0
+        };
+        return offset;
+    }
+
+    getTopEdgeChildOffset() {
+        alert('Get First Top Edge Child function "getTopEdgeChildOffset()" has not been implemented.');
+    }
+
+    // Top
+    hasTopChildren() {
+        let children = false;
+        for (let group of this.getTopArtifacts()) {
+            for(let artefact of this.json_view[this.artefact.artefactToElement(group)]) {
+                if (artefact.parent_id === this.id) {
+                    children = true;
+                    break;
+                }
+            }
+        }
+        return children;
+    }
+
+    getTopChildrenMaxDimensions() {
+        let max_dimensions = {height: 0, width: 0};
+        for (let group of this.getTopArtifacts()) {
+            for(let artefact of this.json_view[this.artefact.artefactToElement(group)]) {
+                if (artefact.parent_id === this.id) {
+                    let dimension = artefact.dimensions;
+                    max_dimensions.height = Math.max(max_dimensions.height, dimension.height);
+                    max_dimensions.width += Math.round(dimension.width + positional_adjustments.spacing.x);
+                }
+            }
+        }
+        return max_dimensions;
+    }
+
+    getFirstTopChildOffset() {
+        let offset = this.getFirstLeftChildOffset();
+        if (this.hasLeftChildren()) {
+            offset.dx += Math.round(positional_adjustments.padding.x + positional_adjustments.spacing.x);
+        }
+        return offset;
+    }
+
+    getTopChildOffset() {
+        alert('Get Top Child function "getTopEdgeChildOffset()" has not been implemented.');
+    }
+
+    // Container
+    hasContainerChildren() {
+        let children = false;
+        for (let group of this.getContainerArtifacts()) {
+            for(let artefact of this.json_view[this.artefact.artefactToElement(group)]) {
+                if (artefact.parent_id === this.id) {
+                    children = true;
+                    break;
+                }
+            }
+        }
+        return children;
+    }
+
+    getContainerChildrenMaxDimensions() {
+        let max_dimensions = {height: 0, width: 0};
+        for (let group of this.getContainerArtifacts()) {
+            for(let artefact of this.json_view[this.artefact.artefactToElement(group)]) {
+                if (artefact.parent_id === this.id) {
+                    let dimension = artefact.dimensions;
+                    max_dimensions.height += Math.round(dimension.height + positional_adjustments.spacing.y);
+                    max_dimensions.width = Math.max(max_dimensions.width, dimension.width);
+                }
+            }
+        }
+        return max_dimensions;
+    }
+
+    getFirstContainerChildOffset() {
+        let offset = this.getFirstTopChildOffset();
+        if (this.hasTopChildren()) {
+            let dimensions = this.getTopChildrenMaxDimensions();
+            offset.dy += Math.round(dimensions.height + positional_adjustments.spacing.y);
+        }
+        return offset;
+    }
+
+    getContainerChildOffset() {
+        alert('Get Container Child function "getContainerChildOffset()" has not been implemented.');
+    }
+
+    // Bottom
+    hasBottomChildren() {
+        let children = false;
+        for (let group of this.getBottomArtifacts()) {
+            for(let artefact of this.json_view[this.artefact.artefactToElement(group)]) {
+                if (artefact.parent_id === this.id) {
+                    children = true;
+                    break;
+                }
+            }
+        }
+        return children;
+    }
+
+    getBottomChildrenMaxDimensions() {
+        let max_dimensions = {height: 0, width: 0};
+        for (let group of this.getBottomArtifacts()) {
+            for(let artefact of this.json_view[this.artefact.artefactToElement(group)]) {
+                if (artefact.parent_id === this.id) {
+                    let dimension = artefact.dimensions;
+                    max_dimensions.height = Math.max(max_dimensions.height, dimension.height);
+                    max_dimensions.width += Math.round(dimension.width + positional_adjustments.spacing.x);
+                }
+            }
+        }
+        return max_dimensions;
+    }
+
+    getFirstBottomChildOffset() {
+        let offset = this.getFirstTopChildOffset();
+        if (this.hasTopChildren()) {
+            let dimensions = this.getTopChildrenMaxDimensions();
+            offset.dy += Math.round(dimensions.height + positional_adjustments.spacing.y * 4);
+        }
+        if (this.hasContainerChildren()) {
+            let dimensions = this.getContainerChildrenMaxDimensions();
+            offset.dy += Math.round(dimensions.height + positional_adjustments.spacing.y);
+        }
+        return offset;
+    }
+
+    getBottomChildOffset() {
+        alert('Get Bottom Child function "getBottomEdgeChildOffset()" has not been implemented.');
+    }
+
+    // Bottom Edge
+    hasBottomEdgeChildren() {
+        let children = false;
+        for (let group of this.getBottomEdgeArtifacts()) {
+            for(let artefact of this.json_view[this.artefact.artefactToElement(group)]) {
+                if (artefact.parent_id === this.id) {
+                    children = true;
+                    break;
+                }
+            }
+        }
+        return children;
+    }
+
+    getBottomEdgeChildrenMaxDimensions() {
+        let max_dimensions = {height: 0, width: 0};
+        for (let group of this.getBottomEdgeArtifacts()) {
+            for(let artefact of this.json_view[this.artefact.artefactToElement(group)]) {
+                if (artefact.parent_id === this.id) {
+                    let dimension = artefact.dimensions;
+                    max_dimensions.height = Math.max(max_dimensions.height, dimension.height);
+                    max_dimensions.width += Math.round(dimension.width + positional_adjustments.spacing.x);
+                }
+            }
+        }
+        return max_dimensions;
+    }
+
+    getFirstBottomEdgeChildOffset() {
+        let offset = {
+            dx: Math.round(positional_adjustments.spacing.x),
+            dy: 0
+        };
+        return offset;
+    }
+
+    getBottomEdgeChildOffset() {
+        alert('Get Bottom Edge Child function "getBottomEdgeChildOffset()" has not been implemented.');
+    }
+
+    // Left Edge
+    getLeftEdgeChildOffset() {
+        alert('Get Left Edge Child function "getLeftEdgeChildOffset()" has not been implemented.');
+    }
+
+    // Left
+    hasLeftChildren() {
+        let children = false;
+        for (let group of this.getLeftArtifacts()) {
+            for(let artefact of this.json_view[this.artefact.artefactToElement(group)]) {
+                if (artefact.parent_id === this.id) {
+                    children = true;
+                    break;
+                }
+            }
+        }
+        return children;
+    }
+
+    getLeftChildrenMaxDimensions() {
+        let max_dimensions = {height: 0, width: 0};
+        for (let group of this.getLeftArtifacts()) {
+            for(let artefact of this.json_view[this.artefact.artefactToElement(group)]) {
+                if (artefact.parent_id === this.id) {
+                    let dimension = artefact.dimensions;
+                    max_dimensions.height += Math.round(dimension.height + positional_adjustments.spacing.y);
+                    max_dimensions.width = Math.max(max_dimensions.width, dimension.width);
+                }
+            }
+        }
+        return max_dimensions;
+    }
+
+    getFirstLeftChildOffset() {
+        let offset = {
+            dx: Math.round(positional_adjustments.spacing.x * 4),
+            dy: Math.round(positional_adjustments.padding.y + positional_adjustments.spacing.y * 2)
+        };
+        return offset;
+    }
+
+    getLeftChildOffset() {
+        alert('Get Left Child function "getLeftEdgeChildOffset()" has not been implemented.');
+    }
+
+    // Right
+    hasRightChildren() {
+        let children = false;
+        for (let group of this.getRightArtifacts()) {
+            for(let artefact of this.json_view[this.artefact.artefactToElement(group)]) {
+                if (artefact.parent_id === this.id) {
+                    children = true;
+                    break;
+                }
+            }
+        }
+        return children;
+    }
+
+    getRightChildrenMaxDimensions() {
+        let max_dimensions = {height: 0, width: 0};
+        for (let group of this.getRightArtifacts()) {
+            for(let artefact of this.json_view[this.artefact.artefactToElement(group)]) {
+                if (artefact.parent_id === this.id) {
+                    let dimension = artefact.dimensions;
+                    max_dimensions.height += Math.round(dimension.height + positional_adjustments.spacing.y);
+                    max_dimensions.width = Math.max(max_dimensions.width, dimension.width);
+                }
+            }
+        }
+        return max_dimensions;
+    }
+
+    getFirstRightChildOffset() {
+        let offset = this.getFirstLeftChildOffset();
+        if (this.hasLeftChildren()) {
+            offset.dx += Math.round(positional_adjustments.padding.x + positional_adjustments.spacing.x);
+        }
+        if (this.hasContainerChildren()) {
+            let dimensions = this.getContainerChildrenMaxDimensions();
+            offset.dx += dimensions.width;
+            offset.dx += positional_adjustments.spacing.x;
+            offset.dx += positional_adjustments.padding.x;
+        }
+        return offset;
+    }
+
+    getRightChildOffset() {
+        alert('Get Right Child function "getRightEdgeChildOffset()" has not been implemented.');
+    }
+
+    // Right Edge
+    hasRightEdgeChildren() {
+        let children = false;
+        for (let group of this.getRightEdgeArtifacts()) {
+            for(let artefact of this.json_view[this.artefact.artefactToElement(group)]) {
+                if (artefact.parent_id === this.id) {
+                    children = true;
+                    break;
+                }
+            }
+        }
+        return children;
+    }
+
+    getFirstRightEdgeChildOffset() {
+        let offset = {
+            dx: Math.round(this.dimensions.width - icon_width),
+            dy: Math.round(positional_adjustments.padding.x)
+        };
+        return offset;
+    }
+
+    getRightEdgeChildOffset() {
+        alert('Get Right Edge Child function "getRightEdgeChildOffset()" has not been implemented.');
+    }
+
+
+    /*
+    ** Child Type Functions
+     */
+    getTopEdgeArtifacts() {
+        return [];
+    }
+
+    getTopArtifacts() {
+        return [];
+    }
+
+    getContainerArtifacts() {
+        return [];
+    }
+
+    getBottomArtifacts() {
+        return [];
+    }
+
+    getBottomEdgeArtifacts() {
+        return [];
+    }
+
+    getLeftEdgeArtifacts() {
+        return [];
+    }
+
+    getLeftArtifacts() {
+        return [];
+    }
+
+    getRightArtifacts() {
+        return [];
+    }
+
+    getRightEdgeArtifacts() {
+        return [];
+    }
+
+    /*
+    ** Default name generation
+     */
+
+    generateConnectorId(sourceid, destinationid) {
+        return sourceid + '-' + destinationid;
+    }
+
     /*
     ** Static Functionality
      */
@@ -480,4 +1599,187 @@ class OkitArtefactView {
 
 }
 
+/*
+** Container Artefact View class for Compartments / VCN / Subnets that can contain other artefacts.
+ */
+class OkitContainerArtefactView extends OkitArtefactView {
+    constructor(artefact = null, json_view) {
+        super(artefact, json_view);
+    }
+
+    get dimensions() {
+        console.group(`Getting Dimensions of ${this.getArtifactReference() } : ${this.display_name} (${this.artefact_id})`);
+        let padding = this.getPadding();
+        let dimensions = {width: 0, height: 0};
+        let offset = {dx: 0, dy: 0};
+        // Process Top Edge Artifacts
+        offset = this.getFirstTopEdgeChildOffset();
+        let top_edge_dimensions = this.getTopEdgeChildrenMaxDimensions();
+        dimensions.width  = Math.max(dimensions.width, top_edge_dimensions.width + offset.dx - padding.dx);
+        dimensions.height = Math.max(dimensions.height, top_edge_dimensions.height);
+        // Process Bottom Edge Artifacts
+        offset = this.getFirstBottomEdgeChildOffset();
+        let bottom_edge_dimensions = this.getBottomEdgeChildrenMaxDimensions();
+        dimensions.width  = Math.max(dimensions.width, bottom_edge_dimensions.width);
+        dimensions.height = Math.max(dimensions.height, bottom_edge_dimensions.height);
+        // Process Top Artifacts
+        offset = this.getFirstTopChildOffset();
+        let top_dimensions = this.getTopChildrenMaxDimensions();
+        dimensions.width   = Math.max(dimensions.width, top_dimensions.width);
+        dimensions.height += top_dimensions.height;
+        // Process Container Artifacts
+        offset = this.getFirstContainerChildOffset();
+        let container_dimensions = this.getContainerChildrenMaxDimensions();
+        dimensions.width   = Math.max(dimensions.width, container_dimensions.width);
+        dimensions.height += container_dimensions.height;
+        // Process Bottom Artifacts
+        offset = this.getFirstBottomChildOffset();
+        let bottom_dimensions = this.getBottomChildrenMaxDimensions();
+        dimensions.width   = Math.max(dimensions.width, bottom_dimensions.width);
+        dimensions.height += bottom_dimensions.height;
+        // Process Left Edge Artifacts
+        // Process Right Edge Artifacts
+        // Process Left Artifacts
+        let left_dimensions = this.getLeftChildrenMaxDimensions();
+        dimensions.width += left_dimensions.width;
+        dimensions.height = Math.max(dimensions.height, left_dimensions.height);
+        // Process Right Artifacts
+        let right_dimensions = this.getRightChildrenMaxDimensions();
+        dimensions.width += right_dimensions.width;
+        dimensions.height = Math.max(dimensions.height, right_dimensions.height);
+        if (this.hasRightChildren()) {
+            dimensions.width += positional_adjustments.spacing.x;
+            dimensions.width += positional_adjustments.padding.x;
+        }
+        // Add Padding
+        dimensions.width += padding.dx * 2;
+        dimensions.height += padding.dy * 2;
+        // Check size against minimum
+        dimensions['width']  = Math.max(dimensions['width'],  this.minimum_dimensions.width);
+        dimensions['height'] = Math.max(dimensions['height'], this.minimum_dimensions.height);
+        console.info('Overall Dimensions       : ' + JSON.stringify(dimensions));
+        console.groupEnd();
+        return dimensions;
+    }
+
+    /*
+    ** SVG Functions
+     */
+    getPadding() {
+        let padding = {
+            dx: Math.round(positional_adjustments.spacing.x * 4),
+            dy: Math.round(positional_adjustments.padding.y + positional_adjustments.spacing.y * 2)
+        };
+        return padding;
+    }
+
+    getChildTypes() {
+        let child_types = this.getContainerArtifacts().concat(
+            this.getLeftEdgeArtifacts(),   this.getLeftArtifacts(),
+            this.getRightEdgeArtifacts(),  this.getRightArtifacts(),
+            this.getTopEdgeArtifacts(),    this.getTopArtifacts(),
+            this.getBottomEdgeArtifacts(), this.getBottomArtifacts()
+        );
+        console.info('Child Types : ' + child_types);
+        return child_types;
+    }
+
+    getChildElements() {
+        let child_elements = [];
+        this.getChildTypes().forEach(element => child_elements.push(this.artefact.artefactToElement(element)));
+        return child_elements;
+    }
+
+    /*
+    ** Child Offset Functions
+     */
+    getTopEdgeChildOffset() {
+        let offset = this.getFirstTopEdgeChildOffset();
+        // Count how many top edge children and adjust.
+        let count = 0;
+        for (let child of this.getTopEdgeArtifacts()) {
+            count += $(jqId(this.id + '-svg')).children("svg[data-type='" + child + "']").length;
+        }
+        console.info('Top Edge Count : ' + count);
+        // Increment x position based on count
+        offset.dx += Math.round((icon_width * count) + (positional_adjustments.spacing.x * count));
+        return offset;
+    }
+
+    getTopChildOffset() {
+        let offset = this.getFirstTopChildOffset();
+        for (let child of this.getTopArtifacts()) {
+            $(jqId(this.id + '-svg')).children("svg[data-type='" + child + "']").each(
+                function() {
+                    offset.dx += Math.round(Number($(this).attr('width')) + positional_adjustments.spacing.x);
+                });
+        }
+        return offset;
+    }
+
+    getContainerChildOffset() {
+        console.info('Get Container Child Offset');
+        let offset = this.getFirstContainerChildOffset();
+        // Count how many top edge children and adjust.
+        for (let child of this.getContainerArtifacts()) {
+            //console.info('Container Child Count : ' + $(jqId(this.id + '-svg')).children("svg[data-type='" + child + "'][data-parent-id='" + this.id + "']").length);
+            $(jqId(this.id + '-svg')).children('svg[data-type="' + child + '"][data-parent-id="' + this.id + '"]').each(
+                function() {
+                    offset.dy += Math.round(Number($(this).attr('height')) + positional_adjustments.spacing.y);
+                });
+        }
+        console.info('Offset : ' + JSON.stringify(offset));
+        return offset;
+    }
+
+    getBottomChildOffset() {
+        let offset = this.getFirstBottomChildOffset();
+        for (let child of this.getBottomArtifacts()) {
+            $(jqId(this.id + '-svg')).children("svg[data-type='" + child + "']").each(
+                function() {
+                    offset.dx += Math.round(Number($(this).attr('width')) + positional_adjustments.spacing.x);
+                });
+        }
+        return offset;
+    }
+
+    getBottomEdgeChildOffset() {}
+
+    getLeftEdgeChildOffset() {}
+
+    getLeftChildOffset() {
+        let offset = this.getFirstLeftChildOffset();
+        for (let child of this.getLeftArtifacts()) {
+            $(jqId(this.id + '-svg')).children("svg[data-type='" + child + "']").each(
+                function() {
+                    offset.dy += Math.round(icon_height + positional_adjustments.spacing.y);
+                });
+        }
+        return offset;
+    }
+
+    getRightChildOffset() {
+        let offset = this.getFirstRightChildOffset();
+        for (let child of this.getRightArtifacts()) {
+            $(jqId(this.id + '-svg')).children("svg[data-type='" + child + "']").each(
+                function() {
+                    offset.dy += Math.round(icon_height + positional_adjustments.spacing.y);
+                });
+        }
+        return offset;
+    }
+
+    getRightEdgeChildOffset() {
+        let offset = this.getFirstRightEdgeChildOffset();
+        for (let child of this.getRightEdgeArtifacts()) {
+            $(jqId(this.id + '-svg')).children("svg[data-type='" + child + "']").each(
+                function() {
+                    offset.dy += Math.round(icon_height + positional_adjustments.spacing.y);
+                });
+        }
+        return offset;
+    }
+
+}
+
 let okitJsonView = null;
diff --git a/okitweb/static/okit/view/tree/js/okit_tree_view.js b/okitweb/static/okit/view/tree/js/okit_tree_view.js
index 007c38ed7..8281c6454 100644
--- a/okitweb/static/okit/view/tree/js/okit_tree_view.js
+++ b/okitweb/static/okit/view/tree/js/okit_tree_view.js
@@ -53,20 +53,20 @@ class OkitJsonTreeView extends OkitJsonView {
     // Autonomous Database
     drawAutonomousDatabase(id, parent_id) {
         console.info('Drawing Autonomous Database ' + id);
-        this.addItemToTree(parent_id, id, 'autonomous-database-tree-view', this.getOkitJson().getAutonomousDatabase(id).display_name, false);
+        this.addItemToTree(parent_id, id, 'autonomous-database-tree-okit_view', this.getOkitJson().getAutonomousDatabase(id).display_name, false);
     }
 
     // Block Storage Volume
     drawBlockStorageVolume(id, parent_id) {
         console.info('Drawing Block Storage ' + id);
-        this.addItemToTree(parent_id, id, 'block-storage-tree-view', this.getOkitJson().getBlockStorageVolume(id).display_name, false);
+        this.addItemToTree(parent_id, id, 'block-storage-tree-okit_view', this.getOkitJson().getBlockStorageVolume(id).display_name, false);
     }
 
 
     // Compartments
     drawCompartment(id, parent_id) {
         console.info('Drawing Compartment ' + id);
-        this.addItemToTree(parent_id, id, 'compartment-tree-view', this.getOkitJson().getCompartment(id).display_name, true);
+        this.addItemToTree(parent_id, id, 'compartment-tree-okit_view', this.getOkitJson().getCompartment(id).display_name, true);
         this.drawCompartmentSubComponents(id);
     }
 
@@ -106,91 +106,91 @@ class OkitJsonTreeView extends OkitJsonView {
     // Database Systems
     drawDatabaseSystem(id, parent_id) {
         console.info('Drawing Database System ' + id);
-        this.addItemToTree(parent_id, id, 'database-system-tree-view', this.getOkitJson().getDatabaseSystem(id).display_name, false);
+        this.addItemToTree(parent_id, id, 'database-system-tree-okit_view', this.getOkitJson().getDatabaseSystem(id).display_name, false);
     }
 
     // Dynamic Routing Gateway
     drawDynamicRoutingGateway(id, parent_id) {
         console.info('Drawing Dynamic Routing Gateway ' + id);
-        this.addItemToTree(parent_id, id, 'drg-tree-view', this.getOkitJson().getDynamicRoutingGateway(id).display_name, false);
+        this.addItemToTree(parent_id, id, 'drg-tree-okit_view', this.getOkitJson().getDynamicRoutingGateway(id).display_name, false);
     }
 
     // Fast Connect
     drawFastConnect(id, parent_id) {
         console.info('Drawing Fast Connect ' + id);
-        this.addItemToTree(parent_id, id, 'fast-connect-tree-view', this.getOkitJson().getFastConnect(id).display_name, false);
+        this.addItemToTree(parent_id, id, 'fast-connect-tree-okit_view', this.getOkitJson().getFastConnect(id).display_name, false);
     }
 
     // File Storage System
     drawFileStorageSystem(id, parent_id) {
         console.info('Drawing File Storage System ' + id);
-        this.addItemToTree(parent_id, id, 'file-storage-tree-view', this.getOkitJson().getFileStorageSystem(id).display_name, false);
+        this.addItemToTree(parent_id, id, 'file-storage-tree-okit_view', this.getOkitJson().getFileStorageSystem(id).display_name, false);
     }
 
     // Instance
     drawInstance(id, parent_id) {
         console.info('Drawing Instance ' + id);
-        this.addItemToTree(parent_id, id, 'instance-tree-view', this.getOkitJson().getInstance(id).display_name, false);
+        this.addItemToTree(parent_id, id, 'instance-tree-okit_view', this.getOkitJson().getInstance(id).display_name, false);
     }
 
     // InternetGateway
     drawInternetGateway(id, parent_id) {
         console.info('Drawing Internet gateway ' + id);
-        this.addItemToTree(parent_id, id, 'internet-gateway-tree-view', this.getOkitJson().getInternetGateway(id).display_name, false);
+        this.addItemToTree(parent_id, id, 'internet-gateway-tree-okit_view', this.getOkitJson().getInternetGateway(id).display_name, false);
     }
 
     // Load Balancers
     drawLoadBalancer(id, parent_id) {
         console.info('Drawing Load Balancer ' + id);
-        this.addItemToTree(parent_id, id, 'loadbalancer-tree-view', this.getOkitJson().getLoadBalancer(id).display_name, false);
+        this.addItemToTree(parent_id, id, 'loadbalancer-tree-okit_view', this.getOkitJson().getLoadBalancer(id).display_name, false);
     }
 
     // Local Peering Gateway
     drawLocalPeeringGateway(id, parent_id) {
         console.info('Drawing Local Peering Gateway ' + id);
-        this.addItemToTree(parent_id, id, 'lpg-tree-view', this.getOkitJson().getLocalPeeringGateway(id).display_name, false);
+        this.addItemToTree(parent_id, id, 'lpg-tree-okit_view', this.getOkitJson().getLocalPeeringGateway(id).display_name, false);
     }
 
     // NAT Gateway
     drawNATGateway(id, parent_id) {
         console.info('Drawing NAT Gateway ' + id);
-        this.addItemToTree(parent_id, id, 'nat-gateway-tree-view', this.getOkitJson().getNATGateway(id).display_name, false);
+        this.addItemToTree(parent_id, id, 'nat-gateway-tree-okit_view', this.getOkitJson().getNATGateway(id).display_name, false);
     }
 
     // Network Security Group
     drawNetworkSecurityGroup(id, parent_id) {
         console.info('Drawing Network Security Group ' + id);
-        this.addItemToTree(parent_id, id, 'network-security-group-tree-view', this.getOkitJson().getNetworkSecurityGroup(id).display_name, false);
+        this.addItemToTree(parent_id, id, 'network-security-group-tree-okit_view', this.getOkitJson().getNetworkSecurityGroup(id).display_name, false);
     }
 
     // Object Storage Bucket
     drawObjectStorageBucket(id, parent_id) {
         console.info('Drawing Object Storage Bucket ' + id);
-        this.addItemToTree(parent_id, id, 'object-storage-tree-view', this.getOkitJson().getObjectStorageBucket(id).display_name, false);
+        this.addItemToTree(parent_id, id, 'object-storage-tree-okit_view', this.getOkitJson().getObjectStorageBucket(id).display_name, false);
     }
 
     // Route Table
     drawRouteTable(id, parent_id) {
         console.info('Drawing Route Table ' + id);
-        this.addItemToTree(parent_id, id, 'route-table-tree-view', this.getOkitJson().getRouteTable(id).display_name, false);
+        this.addItemToTree(parent_id, id, 'route-table-tree-okit_view', this.getOkitJson().getRouteTable(id).display_name, false);
     }
 
     // Security List
     drawSecurityList(id, parent_id) {
         console.info('Drawing Security List ' + id);
-        this.addItemToTree(parent_id, id, 'security-list-tree-view', this.getOkitJson().getSecurityList(id).display_name, false);
+        this.addItemToTree(parent_id, id, 'security-list-tree-okit_view', this.getOkitJson().getSecurityList(id).display_name, false);
     }
 
     // Service Gateway
     drawServiceGateway(id, parent_id) {
         console.info('Drawing Service Gateway ' + id);
-        this.addItemToTree(parent_id, id, 'service-gateway-tree-view', this.getOkitJson().getServiceGateway(id).display_name, false);
+        this.addItemToTree(parent_id, id, 'service-gateway-tree-okit_view', this.getOkitJson().getServiceGateway(id).display_name, false);
     }
 
     // Subnets
     drawSubnet(id, parent_id) {
         console.info('Drawing Subnet ' + id);
-        this.addItemToTree(parent_id, id, 'subnet-tree-view', this.getOkitJson().getSubnet(id).display_name, true);
+        this.addItemToTree(parent_id, id, 'subnet-tree-okit_view', this.getOkitJson().getSubnet(id).display_name, true);
         this.drawSubnetSubComponents(id);
     }
 
@@ -236,7 +236,7 @@ class OkitJsonTreeView extends OkitJsonView {
     // Virtual Cloud Networks
     drawVirtualCloudNetwork(id, parent_id) {
         console.info('Drawing Virtual Cloud Network ' + id);
-        this.addItemToTree(parent_id, id, 'vcn-tree-view', this.getOkitJson().getVirtualCloudNetwork(id).display_name, true);
+        this.addItemToTree(parent_id, id, 'vcn-tree-okit_view', this.getOkitJson().getVirtualCloudNetwork(id).display_name, true);
         this.drawVirtualCloudNetworkSubComponents(id);
     }
 
diff --git a/okitweb/static/svg/config_error.svg b/okitweb/static/svg/config_error.svg
new file mode 100755
index 000000000..0801584a7
--- /dev/null
+++ b/okitweb/static/svg/config_error.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="ID_Access" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 161.9 162" enable-background="new 0 0 161.9 162" xml:space="preserve">
+<g>
+	<path fill="#ff0000" d="M60.3,38.6c0-7.5-6.1-13.7-13.7-13.7S33,31.1,33,38.6s6.1,13.7,13.7,13.7S60.3,46.1,60.3,38.6z M40,38.6
+		c0-3.7,3-6.7,6.7-6.7s6.7,3,6.7,6.7s-3,6.7-6.7,6.7S40,42.3,40,38.6z"/>
+	<path fill="#ff0000" d="M67.8,75.8v-1.6c0-10.7-8.7-19.3-19.3-19.3h-3.6c-10.7,0-19.3,8.7-19.3,19.3v1.6h7v-1.6
+		c0-6.8,5.5-12.3,12.3-12.3h3.6c6.8,0,12.3,5.5,12.3,12.3v1.6H67.8z"/>
+	<polygon fill="#ff0000" points="18.2,82.4 18.2,18.3 115.3,18.3 115.3,63.3 120.5,61.1 124.3,62.7 124.3,9.3 9.2,9.3 9.2,91.4
+		83,91.4 83,82.4 	"/>
+	<polygon fill="#ff0000" points="93.6,70.3 96.7,67.2 92,62.5 97,57.6 93.9,54.5 89,59.5 84.3,54.8 81.2,57.8 85.9,62.5 80.9,67.5
+		84,70.6 89,65.6 	"/>
+	<polygon fill="#ff0000" points="84.2,35.3 80.9,38.1 87.7,46.2 100.2,32.4 97,29.5 87.8,39.6 	"/>
+	<path fill="#ff0000" d="M153,111.5v-30l-32.8-14.1L87.4,81.5l0.1,31.8l0.1,0.4c4.8,27.7,29.9,37.9,30.9,38.4l1.9,0.8l1.8-0.9
+		C153,136.2,153,112.5,153,111.5z M144,111.6c0,0.7-0.3,16-19.4,28.6v-37.2h-9v37.3c-6.6-4.3-16.3-13-19-27.7l-0.1-25.1l19.1-8.2V95
+		h9V79.1l19.4,8.3V111.6z"/>
+</g>
+</svg>
diff --git a/okitweb/templates/okit/okit_console.html b/okitweb/templates/okit/okit_console.html
index d42e91d6d..a80ae3bdb 100644
--- a/okitweb/templates/okit/okit_console.html
+++ b/okitweb/templates/okit/okit_console.html
@@ -11,6 +11,7 @@
     <script type="text/javascript" src="{{ url_for('static', filename='js/jquery-3.4.1.js') }}"></script>
     <script type="text/javascript" src="{{ url_for('static', filename='okit/js/okit_common.js') }}"></script>
     <script type="text/javascript" src="{{ url_for('static', filename='okit/js/okit_console.js') }}"></script>
+    <script type="text/javascript" src="{{ url_for('static', filename='okit/model/js/okit_model.js') }}"></script>
     {% block headscripts %}{% endblock %}
     <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='okit/css/okit_console.css') }}">
     {% block headcss %}{% endblock %}
@@ -40,7 +41,10 @@
             <div class="oracle-logo__icon">
                 <svg focusable="false" id="olw" width="176px" height="18px" viewBox="0 0 176 18" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="olw-symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="olw-light" transform="translate(0.000000, -4.000000)" fill="#FFFFFF"><g id="olw-cloud" transform="translate(0.000000, 4.000000)"><path d="M49.5297691,11.7584187 L57.1119153,11.7584187 L53.1077992,5.2704978 L45.7550839,16.9963397 L42.402843,17 L51.3542913,2.91691069 C51.7330344,2.34407028 52.3885514,2 53.1023365,2 C53.8070173,2 54.4534298,2.33491947 54.8339938,2.89128843 L63.8145762,17 L60.4623353,16.9963397 L58.8890946,14.375549 L51.2068,14.375549 L49.5297691,11.7584187 Z M84.3158692,14.3792094 L84.3158692,2.14641288 L81.4734748,2.14641288 L81.4734748,15.5743045 C81.4734748,15.9458272 81.622787,16.3008785 81.8868147,16.5662518 C82.1654094,16.8426061 82.5332272,16.9963397 82.9283583,16.9963397 L95.8857436,16.9963397 L97.5554909,14.3792094 L84.3158692,14.3792094 Z M37.3098404,12.1885066 C40.0666534,12.1885066 42.3045155,9.93923865 42.3045155,7.16837482 C42.3045155,4.39568082 40.0666534,2.14641288 37.3098404,2.14641288 L24.8750478,2.14641288 L24.8750478,16.9963397 L27.7138004,16.9963397 L27.7138004,4.76354319 L37.1131853,4.76354319 C38.4369654,4.76354319 39.5040013,5.83967789 39.5040013,7.16837482 C39.5040013,8.49524158 38.4369654,9.57320644 37.1131853,9.57320644 L29.106774,9.56954612 L37.5847934,16.9963397 L41.7127293,16.9963397 L36.0079109,12.1866764 L37.3098404,12.1885066 Z M7.38731198,16.9963397 C3.30853978,16.9963397 0,13.6745974 0,9.57320644 C0,5.47181552 3.30853978,2.14641288 7.38731198,2.14641288 L15.9764051,2.14641288 C20.0569981,2.14641288 23.363717,5.47181552 23.363717,9.57320644 C23.363717,13.6745974 20.0569981,17 15.9764051,17 L7.38731198,16.9963397 Z M15.7852126,14.3810395 C18.4273101,14.3810395 20.5668447,12.2287701 20.5668447,9.57320644 C20.5668447,6.91764275 18.4273101,4.76537335 15.7852126,4.76537335 L7.57850443,4.76354319 C4.9364069,4.76354319 2.79505149,6.91764275 2.79505149,9.57320644 C2.79505149,12.2287701 4.9364069,14.3810395 7.57850443,14.3810395 L15.7852126,14.3810395 Z M69.743363,16.9963397 C65.6645908,16.9963397 62.3542301,13.6745974 62.3542301,9.57320644 C62.3542301,5.47181552 65.6645908,2.14641288 69.743363,2.14641288 L79.9493979,2.14641288 L78.2760088,4.76537335 L69.9345554,4.76354319 C67.290637,4.76354319 65.1492816,6.91764275 65.1492816,9.57320644 C65.1492816,12.2287701 67.290637,14.3810395 69.9345554,14.3810395 L80.1788288,14.3810395 L78.5109023,16.9963397 L69.743363,16.9963397 Z M104.500329,14.3810395 L114.742782,14.3810395 L113.073034,16.9963397 L104.305495,16.9963397 C100.226723,16.9963397 96.9163619,13.6745974 96.9163619,9.57320644 C96.9163619,5.47181552 100.226723,2.14641288 104.305495,2.14641288 L114.51153,2.14641288 L112.83632,4.76537335 L104.500329,4.76354319 C102.307989,4.76354319 100.461616,6.24597365 99.8953223,8.26647145 L113.717626,8.26830161 L112.044237,10.8872621 L99.8989641,10.8872621 C100.463437,12.9022694 102.313452,14.3810395 104.500329,14.3810395 Z M134.068,6.044 C133.935999,5.44266366 133.719668,4.90366905 133.419,4.427 C133.118332,3.95033095 132.751669,3.55066828 132.319,3.228 C131.886331,2.90533172 131.409669,2.65966751 130.889,2.491 C130.368331,2.32233249 129.822003,2.238 129.25,2.238 C128.208661,2.238 127.314004,2.43599802 126.566,2.832 C125.817996,3.22800198 125.205669,3.75233007 124.729,4.405 C124.252331,5.05766993 123.900334,5.79466256 123.673,6.616 C123.445666,7.43733744 123.332,8.28066234 123.332,9.146 C123.332,9.99667092 123.445666,10.8363292 123.673,11.665 C123.900334,12.4936708 124.252331,13.2343301 124.729,13.887 C125.205669,14.5396699 125.817996,15.063998 126.566,15.46 C127.314004,15.856002 128.208661,16.054 129.25,16.054 C129.983337,16.054 130.64333,15.9220013 131.23,15.658 C131.81667,15.3939987 132.322665,15.0346689 132.748,14.58 C133.173335,14.1253311 133.517999,13.5936697 133.782,12.985 C134.046001,12.3763303 134.214666,11.7200035 134.288,11.016 L135.784,11.016 C135.681333,11.9840048 135.454002,12.8566628 135.102,13.634 C134.749998,14.4113372 134.295336,15.0713306 133.738,15.614 C133.180664,16.1566694 132.524337,16.5746652 131.769,16.868 C131.013663,17.1613348 130.174005,17.308 129.25,17.308 C128.017994,17.308 126.936338,17.0843356 126.005,16.637 C125.073662,16.1896644 124.300003,15.5920037 123.684,14.844 C123.067997,14.0959963 122.606002,13.2306716 122.298,12.248 C121.989998,11.2653284 121.836,10.2313388 121.836,9.146 C121.836,8.06066124 121.989998,7.02667158 122.298,6.044 C122.606002,5.06132842 123.067997,4.19233711 123.684,3.437 C124.300003,2.68166289 125.073662,2.08033557 126.005,1.633 C126.936338,1.18566443 128.017994,0.962 129.25,0.962 C129.998004,0.962 130.727663,1.0719989 131.439,1.292 C132.150337,1.5120011 132.795664,1.83833117 133.375,2.271 C133.954336,2.70366883 134.438331,3.23533018 134.827,3.866 C135.215669,4.49666982 135.461333,5.22266256 135.564,6.044 L134.068,6.044 Z M137.83,1.292 L139.216,1.292 L139.216,17 L137.83,17 L137.83,1.292 Z M146.674,5.318 C147.539338,5.318 148.305663,5.47933172 148.973,5.802 C149.640337,6.12466828 150.201331,6.55733062 150.656,7.1 C151.110669,7.64266938 151.455332,8.27699637 151.69,9.003 C151.924668,9.72900363 152.042,10.5026626 152.042,11.324 C152.042,12.1453374 151.924668,12.9189964 151.69,13.645 C151.455332,14.3710036 151.110669,15.0053306 150.656,15.548 C150.201331,16.0906694 149.640337,16.5196651 148.973,16.835 C148.305663,17.1503349 147.539338,17.308 146.674,17.308 C145.808662,17.308 145.042337,17.1503349 144.375,16.835 C143.707663,16.5196651 143.146669,16.0906694 142.692,15.548 C142.237331,15.0053306 141.892668,14.3710036 141.658,13.645 C141.423332,12.9189964 141.306,12.1453374 141.306,11.324 C141.306,10.5026626 141.423332,9.72900363 141.658,9.003 C141.892668,8.27699637 142.237331,7.64266938 142.692,7.1 C143.146669,6.55733062 143.707663,6.12466828 144.375,5.802 C145.042337,5.47933172 145.808662,5.318 146.674,5.318 Z M146.674,6.484 C146.013997,6.484 145.434669,6.62333194 144.936,6.902 C144.437331,7.18066806 144.023002,7.54733106 143.693,8.002 C143.362998,8.45666894 143.113668,8.97366377 142.945,9.553 C142.776332,10.1323362 142.692,10.7226637 142.692,11.324 C142.692,11.9253363 142.776332,12.5156638 142.945,13.095 C143.113668,13.6743362 143.362998,14.1913311 143.693,14.646 C144.023002,15.1006689 144.437331,15.4673319 144.936,15.746 C145.434669,16.0246681 146.013997,16.164 146.674,16.164 C147.334003,16.164 147.913331,16.0246681 148.412,15.746 C148.910669,15.4673319 149.324998,15.1006689 149.655,14.646 C149.985002,14.1913311 150.234332,13.6743362 150.403,13.095 C150.571668,12.5156638 150.656,11.9253363 150.656,11.324 C150.656,10.7226637 150.571668,10.1323362 150.403,9.553 C150.234332,8.97366377 149.985002,8.45666894 149.655,8.002 C149.324998,7.54733106 148.910669,7.18066806 148.412,6.902 C147.913331,6.62333194 147.334003,6.484 146.674,6.484 Z M163.306,17 L162.03,17 L162.03,14.954 L161.986,14.954 C161.619332,15.7166705 161.08767,16.2996647 160.391,16.703 C159.69433,17.1063354 158.920671,17.308 158.07,17.308 C157.35133,17.308 156.739003,17.209001 156.233,17.011 C155.726997,16.812999 155.316335,16.5306685 155.001,16.164 C154.685665,15.7973315 154.454667,15.3500026 154.308,14.822 C154.161333,14.2939974 154.088,13.69267 154.088,13.018 L154.088,5.648 L155.474,5.648 L155.474,13.04 C155.503333,14.0666718 155.741664,14.8439974 156.189,15.372 C156.636336,15.9000026 157.409995,16.164 158.51,16.164 C159.111336,16.164 159.624665,16.035668 160.05,15.779 C160.475335,15.5223321 160.827332,15.1813355 161.106,14.756 C161.384668,14.3306645 161.589999,13.8430028 161.722,13.293 C161.854001,12.7429973 161.92,12.1820029 161.92,11.61 L161.92,5.648 L163.306,5.648 L163.306,17 Z M175.912,17 L174.636,17 L174.636,14.844 L174.592,14.844 C174.445333,15.2106685 174.229001,15.5479985 173.943,15.856 C173.656999,16.1640015 173.330669,16.4243323 172.964,16.637 C172.597331,16.8496677 172.205002,17.0146661 171.787,17.132 C171.368998,17.2493339 170.954669,17.308 170.544,17.308 C169.678662,17.308 168.927003,17.1503349 168.289,16.835 C167.650997,16.5196651 167.119335,16.0870027 166.694,15.537 C166.268665,14.9869973 165.953334,14.3490036 165.748,13.623 C165.542666,12.8969964 165.44,12.1306707 165.44,11.324 C165.44,10.5173293 165.542666,9.75100363 165.748,9.025 C165.953334,8.29899637 166.268665,7.66100275 166.694,7.111 C167.119335,6.56099725 167.650997,6.12466828 168.289,5.802 C168.927003,5.47933172 169.678662,5.318 170.544,5.318 C170.969335,5.318 171.383665,5.36933282 171.787,5.472 C172.190335,5.57466718 172.567998,5.73233227 172.92,5.945 C173.272002,6.15766773 173.583665,6.41799846 173.855,6.726 C174.126335,7.03400154 174.335333,7.39333128 174.482,7.804 L174.526,7.804 L174.526,1.292 L175.912,1.292 L175.912,17 Z M166.826,11.324 C166.826,11.9106696 166.895666,12.4936638 167.035,13.073 C167.174334,13.6523362 167.394332,14.1693311 167.695,14.624 C167.995668,15.0786689 168.380664,15.4489986 168.85,15.735 C169.319336,16.0210014 169.883997,16.164 170.544,16.164 C171.277337,16.164 171.896997,16.0210014 172.403,15.735 C172.909003,15.4489986 173.319665,15.0786689 173.635,14.624 C173.950335,14.1693311 174.177666,13.6523362 174.317,13.073 C174.456334,12.4936638 174.526,11.9106696 174.526,11.324 C174.526,10.7373304 174.456334,10.1543362 174.317,9.575 C174.177666,8.99566377 173.950335,8.47866894 173.635,8.024 C173.319665,7.56933106 172.909003,7.19900143 172.403,6.913 C171.896997,6.62699857 171.277337,6.484 170.544,6.484 C169.883997,6.484 169.319336,6.62699857 168.85,6.913 C168.380664,7.19900143 167.995668,7.56933106 167.695,8.024 C167.394332,8.47866894 167.174334,8.99566377 167.035,9.575 C166.895666,10.1543362 166.826,10.7373304 166.826,11.324 Z" id="olw-cs"></path></g></g></g></svg>
             </div>
-            <a id="oci_link" href="https://console.us-phoenix-1.oraclecloud.com" target="_blank" rel="noopener noreferrer"><img id="cloud-icon" src="{{ url_for('static', filename='svg/cloud.svg') }}" title="OCI Console" alt="OCI Console"></a>
+            <div class="okit-console-header-right">
+                <a id="config_link" class="hidden" href="#" onclick="showConfigErrors(); return false;"><img id="config_icon" class="config-icon" src="{{ url_for('static', filename='svg/config_error.svg') }}" title="OCI Config Error" alt="OCI Config Error"></a>
+                <a id="oci_link" href="https://console.us-phoenix-1.oraclecloud.com" target="_blank" rel="noopener noreferrer"><img id="cloud-icon" src="{{ url_for('static', filename='svg/cloud.svg') }}" title="OCI Console" alt="OCI Console"></a>
+            </div>
         </div>
         <div class="main okit-console-main">
             <div id="navigation_menu" class="okit-navigation-menu">{% block navmenublock %}{% endblock %}</div>
diff --git a/okitweb/templates/okit/okit_designer.html b/okitweb/templates/okit/okit_designer.html
index 8fd5811d5..3fc2249ab 100644
--- a/okitweb/templates/okit/okit_designer.html
+++ b/okitweb/templates/okit/okit_designer.html
@@ -9,6 +9,7 @@
     <script type="text/javascript" src="{{ url_for('static', filename='okit/view/js/okit_view.js') }}"></script>
     <script type="text/javascript" src="{{ url_for('static', filename='okit/view/designer/js/okit_designer_view.js') }}"></script>
     <script type="text/javascript" src="{{ url_for('static', filename='okit/view/tree/js/okit_tree_view.js') }}"></script>
+    <script type="text/javascript" src="{{ url_for('static', filename='okit/query/oci/js/okit_query.js') }}"></script>
     <script type="text/javascript" src="{{ url_for('static', filename='okit/js/okit_designer.js') }}"></script>
     <script type="text/javascript">
         let palette_svg = {}
@@ -40,13 +41,12 @@
     <script type="text/javascript" src="{{ url_for('static', filename='okit/js/okit_designer_drag_drop.js') }}"></script>
     <script type="text/javascript" src="{{ url_for('static', filename='okit/js/okit_designer_generation.js') }}"></script>
     <script type="text/javascript" src="{{ url_for('static', filename='okit/js/okit_designer_properties.js') }}"></script>
-    {% for oci_asset_js in oci_assets_js %}
-        <script type="text/javascript" src="{{ url_for('static', filename='okit/js/oci_artefacts/' + oci_asset_js) }}"></script>
+    {% for model_js in artefact_model_js_files %}
+        <script type="text/javascript" src="{{ url_for('static', filename='okit/model/js/artefacts/' + model_js) }}"></script>
     {% endfor %}
     {% for view_js in artefact_view_js_files %}
-        <script type="text/javascript" src="{{ url_for('static', filename='okit/view/designer/js/artefact/' + view_js) }}"></script>
+        <script type="text/javascript" src="{{ url_for('static', filename='okit/view/designer/js/artefacts/' + view_js) }}"></script>
     {% endfor %}
-    <script type="text/javascript" src="{{ url_for('static', filename='okit/js/okit_designer_fragments.js') }}"></script>
     <script type="text/javascript" src="{{ url_for('static', filename='okit/js/okit_designer_ready.js') }}"></script>
 {% endblock %}
 
@@ -128,7 +128,7 @@
             </li>
             <li><a id="view-compartment-menu-item" class="parent-item" href="javascript:void(0)">Compartment</a></li>
             <li><a id="view-network-menu-item"  class="parent-item" href="javascript:void(0)">Network</a></li>
-            <!--li><a id="view-security-menu-item" class="parent-item" href="javascript:void(0)">Security</a></li-->
+            <!--li><a id="okit_view-security-menu-item" class="parent-item" href="javascript:void(0)">Security</a></li-->
         </ul>
         <ul class="okit-navigation-sub-list">
             <li>
@@ -176,7 +176,7 @@
                                      title="{{ palette_icon['title'] }}"
                                      draggable="true"
                                      alt="{{ palette_icon['title'] }}"
-                                     ondragstart="dragStart(event, {{ palette_icon['title'] | replace(' ', '') }})">
+                                     ondragstart="dragStart(event, {{ palette_icon['title'] | replace(' ', '') }}View)">
                                     <label>{{ palette_icon['title'] }}</label>
                                 </div>
                             {% endfor %}
@@ -185,7 +185,7 @@
                 {% endif %}
             {% endfor %}
             <details  id="fragments" class="okit-palette-icon-group" open>
-                <summary class="okit-palette-icon-group-header"><img id="okit-palette-group-icon" src="{{ url_for('static', filename='svg/fragments.svg') | lower }}" alt="Fragments"><label>Fragments</label></summary>
+                <summary class="okit-palette-icon-group-header"><img id="okit-fragment-palette-group-icon" src="{{ url_for('static', filename='svg/fragments.svg') | lower }}" alt="Fragments"><label>Fragments</label></summary>
                 <div class="okit-palette-icon-group-icons okit-icons-only">
                     {% for fragment_icon in fragment_icons %}
                         <div>
@@ -194,7 +194,7 @@
                              title="{{ fragment_icon['title'] }}"
                              draggable="true"
                              alt="{{ fragment_icon['title'] }}"
-                             ondragstart="dragStart(event, Fragment); Fragment.setFragmentType('{{ fragment_icon['title'] }}')">
+                             ondragstart="dragFragmentStart(event, FragmentView, '{{ fragment_icon['title'] }}')">
                             <label>{{ fragment_icon['title'] }}</label>
                         </div>
                     {% endfor %}
@@ -212,7 +212,9 @@
     <div id="designer_right_column" class="okit-designer-right-column okit-slide-hide-right">
         <div id="right_column_dragbar" class="okit-vertical-drag-bar hidden"></div>
         <div id="properties_panel" class="okit-property-sheet hidden"></div>
-        <div id="json_panel" class="okit-source-code hidden"></div>
+        <div id="json_model_panel" class="okit-source-code hidden"></div>
+        <div id="json_view_panel" class="okit-source-code hidden"></div>
+        <div id="json_region_panel" class="okit-source-code hidden"></div>
         <div id="validation_panel" class="okit-source-code">
             <div id="validation_header_div"><label id="validation_status"></label></div>
             <details open>
diff --git a/okitweb/templates/okit/propertysheets/virtual_network_interface.html b/okitweb/templates/okit/propertysheets/virtual_network_interface.html
new file mode 100644
index 000000000..f693bb654
--- /dev/null
+++ b/okitweb/templates/okit/propertysheets/virtual_network_interface.html
@@ -0,0 +1,6 @@
+<!--
+** Copyright (c) 2020, Oracle and/or its affiliates.
+** Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl.
+-->
+{% extends "okit/propertysheets/subnet.html" %}
+
diff --git a/okitweb/templates/okit/valueproposition/block_storage_volume.html b/okitweb/templates/okit/valueproposition/block_storage_volume.html
new file mode 100644
index 000000000..01c292df8
--- /dev/null
+++ b/okitweb/templates/okit/valueproposition/block_storage_volume.html
@@ -0,0 +1,5 @@
+<!--
+** Copyright (c) 2020, Oracle and/or its affiliates.
+** Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl.
+-->
+{% extends "okit/valueproposition/oci.html" %}
diff --git a/okitweb/templates/okit/valueproposition/compartment.html b/okitweb/templates/okit/valueproposition/compartment.html
new file mode 100644
index 000000000..01c292df8
--- /dev/null
+++ b/okitweb/templates/okit/valueproposition/compartment.html
@@ -0,0 +1,5 @@
+<!--
+** Copyright (c) 2020, Oracle and/or its affiliates.
+** Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl.
+-->
+{% extends "okit/valueproposition/oci.html" %}
diff --git a/okitweb/templates/okit/valueproposition/database_system.html b/okitweb/templates/okit/valueproposition/database_system.html
new file mode 100644
index 000000000..01c292df8
--- /dev/null
+++ b/okitweb/templates/okit/valueproposition/database_system.html
@@ -0,0 +1,5 @@
+<!--
+** Copyright (c) 2020, Oracle and/or its affiliates.
+** Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl.
+-->
+{% extends "okit/valueproposition/oci.html" %}
diff --git a/okitweb/templates/okit/valueproposition/dynamic_routing_gateway.html b/okitweb/templates/okit/valueproposition/dynamic_routing_gateway.html
new file mode 100644
index 000000000..01c292df8
--- /dev/null
+++ b/okitweb/templates/okit/valueproposition/dynamic_routing_gateway.html
@@ -0,0 +1,5 @@
+<!--
+** Copyright (c) 2020, Oracle and/or its affiliates.
+** Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl.
+-->
+{% extends "okit/valueproposition/oci.html" %}
diff --git a/okitweb/templates/okit/valueproposition/fast_connect.html b/okitweb/templates/okit/valueproposition/fast_connect.html
new file mode 100644
index 000000000..01c292df8
--- /dev/null
+++ b/okitweb/templates/okit/valueproposition/fast_connect.html
@@ -0,0 +1,5 @@
+<!--
+** Copyright (c) 2020, Oracle and/or its affiliates.
+** Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl.
+-->
+{% extends "okit/valueproposition/oci.html" %}
diff --git a/okitweb/templates/okit/valueproposition/file_storage_system.html b/okitweb/templates/okit/valueproposition/file_storage_system.html
new file mode 100644
index 000000000..01c292df8
--- /dev/null
+++ b/okitweb/templates/okit/valueproposition/file_storage_system.html
@@ -0,0 +1,5 @@
+<!--
+** Copyright (c) 2020, Oracle and/or its affiliates.
+** Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl.
+-->
+{% extends "okit/valueproposition/oci.html" %}
diff --git a/okitweb/templates/okit/valueproposition/instance.html b/okitweb/templates/okit/valueproposition/instance.html
new file mode 100644
index 000000000..01c292df8
--- /dev/null
+++ b/okitweb/templates/okit/valueproposition/instance.html
@@ -0,0 +1,5 @@
+<!--
+** Copyright (c) 2020, Oracle and/or its affiliates.
+** Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl.
+-->
+{% extends "okit/valueproposition/oci.html" %}
diff --git a/okitweb/templates/okit/valueproposition/internet_gateway.html b/okitweb/templates/okit/valueproposition/internet_gateway.html
new file mode 100644
index 000000000..01c292df8
--- /dev/null
+++ b/okitweb/templates/okit/valueproposition/internet_gateway.html
@@ -0,0 +1,5 @@
+<!--
+** Copyright (c) 2020, Oracle and/or its affiliates.
+** Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl.
+-->
+{% extends "okit/valueproposition/oci.html" %}
diff --git a/okitweb/templates/okit/valueproposition/load_balancer.html b/okitweb/templates/okit/valueproposition/load_balancer.html
new file mode 100644
index 000000000..01c292df8
--- /dev/null
+++ b/okitweb/templates/okit/valueproposition/load_balancer.html
@@ -0,0 +1,5 @@
+<!--
+** Copyright (c) 2020, Oracle and/or its affiliates.
+** Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl.
+-->
+{% extends "okit/valueproposition/oci.html" %}
diff --git a/okitweb/templates/okit/valueproposition/local_peering_gateway.html b/okitweb/templates/okit/valueproposition/local_peering_gateway.html
new file mode 100644
index 000000000..01c292df8
--- /dev/null
+++ b/okitweb/templates/okit/valueproposition/local_peering_gateway.html
@@ -0,0 +1,5 @@
+<!--
+** Copyright (c) 2020, Oracle and/or its affiliates.
+** Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl.
+-->
+{% extends "okit/valueproposition/oci.html" %}
diff --git a/okitweb/templates/okit/valueproposition/nat_gateway.html b/okitweb/templates/okit/valueproposition/nat_gateway.html
new file mode 100644
index 000000000..01c292df8
--- /dev/null
+++ b/okitweb/templates/okit/valueproposition/nat_gateway.html
@@ -0,0 +1,5 @@
+<!--
+** Copyright (c) 2020, Oracle and/or its affiliates.
+** Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl.
+-->
+{% extends "okit/valueproposition/oci.html" %}
diff --git a/okitweb/templates/okit/valueproposition/network_security_group.html b/okitweb/templates/okit/valueproposition/network_security_group.html
new file mode 100644
index 000000000..01c292df8
--- /dev/null
+++ b/okitweb/templates/okit/valueproposition/network_security_group.html
@@ -0,0 +1,5 @@
+<!--
+** Copyright (c) 2020, Oracle and/or its affiliates.
+** Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl.
+-->
+{% extends "okit/valueproposition/oci.html" %}
diff --git a/okitweb/templates/okit/valueproposition/object_storage_bucket.html b/okitweb/templates/okit/valueproposition/object_storage_bucket.html
new file mode 100644
index 000000000..01c292df8
--- /dev/null
+++ b/okitweb/templates/okit/valueproposition/object_storage_bucket.html
@@ -0,0 +1,5 @@
+<!--
+** Copyright (c) 2020, Oracle and/or its affiliates.
+** Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl.
+-->
+{% extends "okit/valueproposition/oci.html" %}
diff --git a/okitweb/templates/okit/valueproposition/route_table.html b/okitweb/templates/okit/valueproposition/route_table.html
new file mode 100644
index 000000000..01c292df8
--- /dev/null
+++ b/okitweb/templates/okit/valueproposition/route_table.html
@@ -0,0 +1,5 @@
+<!--
+** Copyright (c) 2020, Oracle and/or its affiliates.
+** Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl.
+-->
+{% extends "okit/valueproposition/oci.html" %}
diff --git a/okitweb/templates/okit/valueproposition/security_list.html b/okitweb/templates/okit/valueproposition/security_list.html
new file mode 100644
index 000000000..01c292df8
--- /dev/null
+++ b/okitweb/templates/okit/valueproposition/security_list.html
@@ -0,0 +1,5 @@
+<!--
+** Copyright (c) 2020, Oracle and/or its affiliates.
+** Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl.
+-->
+{% extends "okit/valueproposition/oci.html" %}
diff --git a/okitweb/templates/okit/valueproposition/service_gateway.html b/okitweb/templates/okit/valueproposition/service_gateway.html
new file mode 100644
index 000000000..01c292df8
--- /dev/null
+++ b/okitweb/templates/okit/valueproposition/service_gateway.html
@@ -0,0 +1,5 @@
+<!--
+** Copyright (c) 2020, Oracle and/or its affiliates.
+** Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl.
+-->
+{% extends "okit/valueproposition/oci.html" %}
diff --git a/okitweb/templates/okit/valueproposition/subnet.html b/okitweb/templates/okit/valueproposition/subnet.html
new file mode 100644
index 000000000..01c292df8
--- /dev/null
+++ b/okitweb/templates/okit/valueproposition/subnet.html
@@ -0,0 +1,5 @@
+<!--
+** Copyright (c) 2020, Oracle and/or its affiliates.
+** Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl.
+-->
+{% extends "okit/valueproposition/oci.html" %}
diff --git a/okitweb/templates/okit/valueproposition/virtual_cloud_network.html b/okitweb/templates/okit/valueproposition/virtual_cloud_network.html
new file mode 100644
index 000000000..01c292df8
--- /dev/null
+++ b/okitweb/templates/okit/valueproposition/virtual_cloud_network.html
@@ -0,0 +1,5 @@
+<!--
+** Copyright (c) 2020, Oracle and/or its affiliates.
+** Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl.
+-->
+{% extends "okit/valueproposition/oci.html" %}
diff --git a/okitweb/templates/okit/valueproposition/virtual_network_interface.html b/okitweb/templates/okit/valueproposition/virtual_network_interface.html
new file mode 100644
index 000000000..ea48a9192
--- /dev/null
+++ b/okitweb/templates/okit/valueproposition/virtual_network_interface.html
@@ -0,0 +1,6 @@
+<!--
+** Copyright (c) 2020, Oracle and/or its affiliates.
+** Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl.
+-->
+{% extends "okit/valueproposition/subnet.html" %}
+
diff --git a/visualiser/facades/ociImage.py b/visualiser/facades/ociImage.py
index 5203eb70d..72c69823f 100644
--- a/visualiser/facades/ociImage.py
+++ b/visualiser/facades/ociImage.py
@@ -30,6 +30,13 @@ def __init__(self, config=None, configfile=None, profile=None, compartment_id=No
         self.images_obj = []
         super(OCIImages, self).__init__(config=config, configfile=configfile, profile=profile)
 
+    def get(self, image_id):
+        image = self.client.get_image(image_id).data
+        logger.info('Images : ' + str(image))
+        image_json = self.toJson(image)
+        logger.info(str(image_json))
+        return image_json
+
     def list(self, compartment_id=None, filter=None):
         if compartment_id is None and self.compartment_id is None:
             compartment_id = self.config['tenancy']
diff --git a/visualiser/facades/ociInstance.py b/visualiser/facades/ociInstance.py
index 53d7728da..bc442254b 100644
--- a/visualiser/facades/ociInstance.py
+++ b/visualiser/facades/ociInstance.py
@@ -17,7 +17,9 @@
 import oci
 
 from common.okitLogging import getLogger
+from common.okitCommon import logJson
 from facades.ociBootVolumeAttachment import OCIBootVolumeAttachments
+from facades.ociImage import OCIImages
 from facades.ociConnection import OCIComputeConnection, OCIVirtualNetworkConnection
 from facades.ociVnicAttachement import OCIVnicAttachments
 from facades.ociVolumeAttachment import OCIVolumeAttachments
@@ -88,11 +90,9 @@ def list(self, compartment_id=None, filter=None):
 
         # Convert to Json object
         instances_json = self.toJson(instances)
-        logger.debug(str(instances_json))
- 
+
         # Filter results
         self.instances_json = self.filterJsonObjectList(instances_json, filter)
-        logger.debug(str(self.instances_json))
 
 
         # Get Volume Attachments as a single call and loop through them to see if they are associated with the instance.
@@ -102,6 +102,10 @@ def list(self, compartment_id=None, filter=None):
         vnic_attachments = OCIVnicAttachments(config=self.config, configfile=self.configfile, profile=self.profile, compartment_id=compartment_id).list()
 
         for instance in self.instances_json:
+            # Get OS Details
+            image = OCIImages(config=self.config, configfile=self.configfile, profile=self.profile, compartment_id=compartment_id).get(instance['source_details']['image_id'])
+            instance['source_details']['os'] = image['operating_system']
+            instance['source_details']['version'] = image['operating_system_version']
             # Decode Cloud Init Yaml
             if 'metadata' in instance and 'user_data' in instance['metadata']:
                 instance['metadata']['user_data'] = base64.b64decode(instance['metadata']['user_data']).decode('utf-8')
@@ -120,6 +124,8 @@ def list(self, compartment_id=None, filter=None):
             # Build object list
             self.instances_obj.append(OCIInstance(self.config, self.configfile, self.profile, instance))
 
+        logJson(self.instances_json)
+        logger.info(str(self.instances_json))
         return self.instances_json
 
 class OCIInstance(object):
diff --git a/visualiser/generators/okitGenerator.py b/visualiser/generators/okitGenerator.py
index cf4c463a3..6e9ecb5ad 100644
--- a/visualiser/generators/okitGenerator.py
+++ b/visualiser/generators/okitGenerator.py
@@ -867,7 +867,8 @@ def renderRouteTable(self, route_table, index=0):
             #self.run_variables[variableName] = route_rule["network_entity_id"]
             jinja2_route_rule["network_entity_id"] = self.formatJinja2IdReference(self.standardiseResourceName(self.id_name_map[route_rule["network_entity_id"]]))
             # ------ Destination
-            jinja2_route_rule["destination"] = self.generateJinja2Variable('route_rule_{0:02d}_destination'.format(rule_number), route_rule["destination"], standardisedName)
+            if route_rule["destination_type"] == 'CIDR_BLOCK':
+                jinja2_route_rule["destination"] = self.generateJinja2Variable('route_rule_{0:02d}_destination'.format(rule_number), route_rule["destination"], standardisedName)
             # ------ Destination Type
             jinja2_route_rule["destination_type"] = self.generateJinja2Variable('route_rule_{0:02d}_destination_type'.format(rule_number), route_rule["destination_type"], standardisedName)
             # ------ Description
diff --git a/visualiser/templates/ansible/dynamic_routing_gateway.jinja2 b/visualiser/templates/ansible/dynamic_routing_gateway.jinja2
index a0d5306ef..3337d7415 100644
--- a/visualiser/templates/ansible/dynamic_routing_gateway.jinja2
+++ b/visualiser/templates/ansible/dynamic_routing_gateway.jinja2
@@ -25,7 +25,7 @@
     - name: Create DRG Attachment {{ output_name }}
       oci_drg_attachment:
         state: "present"
-        drg_id = "{{ '{{' }} {{ resource_name }}_ocid {{ '}}' }}"
-        vcn_id = "{{ vcn_id }}"
+        drg_id: "{{ '{{' }} {{ resource_name }}_ocid {{ '}}' }}"
+        vcn_id: "{{ vcn_id }}"
         # Optional
         display_name: "{{ display_name | safe }}"
diff --git a/visualiser/templates/ansible/region_data.jinja2 b/visualiser/templates/ansible/region_data.jinja2
index 7903e8e57..1d9957407 100644
--- a/visualiser/templates/ansible/region_data.jinja2
+++ b/visualiser/templates/ansible/region_data.jinja2
@@ -20,3 +20,8 @@
 #    - debug: msg="{{ '{{' }} HomeRegion {{ '}}' }}"
     - debug: msg="Home Region {{ '{{' }} HomeRegionName {{ '}}' }}"
     - debug: msg="Working Region {{ region }}"
+
+    - name: Get details of all the available services
+      oci_service_facts:
+      register: RegionServices
+
diff --git a/visualiser/templates/ansible/route_table.jinja2 b/visualiser/templates/ansible/route_table.jinja2
index 5a93a7e5a..d2b621315 100644
--- a/visualiser/templates/ansible/route_table.jinja2
+++ b/visualiser/templates/ansible/route_table.jinja2
@@ -13,8 +13,12 @@
 {% endif %}
         route_rules:
 {% for rule in route_rules %}
-            - destination: "{{ rule.destination | safe }}"
-              destination_type: "{{ rule.destination_type | safe }}"
+            - destination_type: "{{ rule.destination_type | safe }}"
+    {% if rule.destination is defined %}
+              destination: "{{ rule.destination | safe }}"
+    {% else %}
+              destination: "{{ '{{' }} (RegionServices.service[0] | map(attribute='cidr_block')) {{ '}}' }}"
+    {% endif %}
               network_entity_id: "{{ rule.network_entity_id }}"
               description: "{{ rule.description | safe }}"
 {% endfor %}
diff --git a/visualiser/templates/ansible/security_list.jinja2 b/visualiser/templates/ansible/security_list.jinja2
index 828e98d3c..50baab902 100644
--- a/visualiser/templates/ansible/security_list.jinja2
+++ b/visualiser/templates/ansible/security_list.jinja2
@@ -24,33 +24,33 @@
               tcp_options:
         {% if rule.tcp_options.destination_port_range is defined %}
                 destination_port_range:
-                    min: {{ rule.tcp_options.destination_port_range.min | safe }}
-                    max: {{ rule.tcp_options.destination_port_range.max | safe }}
+                    min: "{{ rule.tcp_options.destination_port_range.min | safe }}"
+                    max: "{{ rule.tcp_options.destination_port_range.max | safe }}"
         {% endif %}
         {% if rule.tcp_options.source_port_range is defined %}
                 source_port_range:
-                    min: {{ rule.tcp_options.source_port_range.min | safe }}
-                    max: {{ rule.tcp_options.source_port_range.max | safe }}
+                    min: "{{ rule.tcp_options.source_port_range.min | safe }}"
+                    max: "{{ rule.tcp_options.source_port_range.max | safe }}"
         {% endif %}
     {% endif %}
     {% if rule.udp_options is defined %}
               udp_options:
         {% if rule.udp_options.destination_port_range is defined %}
                 destination_port_range:
-                    min: {{ rule.udp_options.destination_port_range.min | safe }}
-                    max: {{ rule.udp_options.destination_port_range.max | safe }}
+                    min: "{{ rule.udp_options.destination_port_range.min | safe }}"
+                    max: "{{ rule.udp_options.destination_port_range.max | safe }}"
         {% endif %}
         {% if rule.udp_options.source_port_range is defined %}
                 source_port_range:
-                    min: {{ rule.udp_options.source_port_range.min | safe }}
-                    max: {{ rule.udp_options.source_port_range.max | safe }}
+                    min: "{{ rule.udp_options.source_port_range.min | safe }}"
+                    max: "{{ rule.udp_options.source_port_range.max | safe }}"
         {% endif %}
     {% endif %}
     {% if rule.icmp_options is defined %}
               icmp_options:
-                type: {{ rule.icmp_options.type | safe }}
+                type: "{{ rule.icmp_options.type | safe }}"
         {% if rule.icmp_options.code is defined %}
-                code: {{ rule.icmp_options.code | safe }}
+                code: "{{ rule.icmp_options.code | safe }}"
         {% endif %}
     {% endif %}
 {% endfor %}
@@ -67,33 +67,33 @@
               tcp_options:
         {% if rule.tcp_options.destination_port_range is defined %}
                 destination_port_range:
-                    min: {{ rule.tcp_options.destination_port_range.min | safe }}
-                    max: {{ rule.tcp_options.destination_port_range.max | safe }}
+                    min: "{{ rule.tcp_options.destination_port_range.min | safe }}"
+                    max: "{{ rule.tcp_options.destination_port_range.max | safe }}"
         {% endif %}
         {% if rule.tcp_options.source_port_range is defined %}
                 source_port_range:
-                    min: {{ rule.tcp_options.source_port_range.min | safe }}
-                    max: {{ rule.tcp_options.source_port_range.max | safe }}
+                    min: "{{ rule.tcp_options.source_port_range.min | safe }}"
+                    max: "{{ rule.tcp_options.source_port_range.max | safe }}"
         {% endif %}
     {% endif %}
     {% if rule.udp_options is defined %}
               udp_options:
         {% if rule.udp_options.destination_port_range is defined %}
                 destination_port_range:
-                    min: {{ rule.udp_options.destination_port_range.min | safe }}
-                    max: {{ rule.udp_options.destination_port_range.max | safe }}
+                    min: "{{ rule.udp_options.destination_port_range.min | safe }}"
+                    max: "{{ rule.udp_options.destination_port_range.max | safe }}"
         {% endif %}
         {% if rule.udp_options.source_port_range is defined %}
                 source_port_range:
-                    min: {{ rule.udp_options.source_port_range.min | safe }}
-                    max: {{ rule.udp_options.source_port_range.max | safe }}
+                    min: "{{ rule.udp_options.source_port_range.min | safe }}"
+                    max: "{{ rule.udp_options.source_port_range.max | safe }}"
         {% endif %}
     {% endif %}
     {% if rule.icmp_options is defined %}
               icmp_options:
-                type: {{ rule.icmp_options.type | safe }}
+                type: "{{ rule.icmp_options.type | safe }}"
         {% if rule.icmp_options.code is defined %}
-                code: {{ rule.icmp_options.code | safe }}
+                code: "{{ rule.icmp_options.code | safe }}"
         {% endif %}
     {% endif %}
 {% endfor %}
diff --git a/visualiser/templates/ansible/subnet.jinja2 b/visualiser/templates/ansible/subnet.jinja2
index 01987788f..0c8e62e0d 100644
--- a/visualiser/templates/ansible/subnet.jinja2
+++ b/visualiser/templates/ansible/subnet.jinja2
@@ -10,7 +10,7 @@
         cidr_block: "{{ cidr_block | safe }}"
         # Optional
 {% if availability_domain is defined %}
-        availability_domain: "{{ '{{' }} (AvailabilityDomains.availability_domains | sort(attribute='name') | map(attribute='name') | list)[{{ availability_domain | replace('{{', '') | replace('}}', '') }} | default(1) | int - 1] {{ '}}' }}"
+        availability_domain: "{{ '{{' }} (AvailabilityDomains.availability_domains | sort(attribute='name') | map(attribute='name') | list)[{{ availability_domain | safe | replace('{{', '') | replace('}}', '') }} | default(1) | int - 1] {{ '}}' }}"
 {% endif %}
 {% if display_name is defined %}
         display_name: "{{ display_name | safe }}"
diff --git a/visualiser/templates/terraform/compartment.jinja2 b/visualiser/templates/terraform/compartment.jinja2
index e975a7602..26d6c9816 100644
--- a/visualiser/templates/terraform/compartment.jinja2
+++ b/visualiser/templates/terraform/compartment.jinja2
@@ -28,7 +28,7 @@ data "oci_identity_compartments" "{{ resource_name }}Compartments" {
     access_level   = "ACCESSIBLE"
 }
 locals {
-    {{ resource_name }}ActiveCompartments = [for x in data.oci_identity_compartments.{{ resource_name }}Compartments.compartments: x if x.state == "ACTIVE" && x.name == {{ display_name }}]
+    {{ resource_name }}ActiveCompartments = [for x in data.oci_identity_compartments.{{ resource_name }}Compartments.compartments: x if x.state == "ACTIVE" && x.name == {{ display_name | safe }}]
 }
 
 output "{{ resource_name }}ActiveCompartments" {
diff --git a/visualiser/templates/terraform/network_security_group.jinja2 b/visualiser/templates/terraform/network_security_group.jinja2
index 2811e0a72..9ef6b116c 100644
--- a/visualiser/templates/terraform/network_security_group.jinja2
+++ b/visualiser/templates/terraform/network_security_group.jinja2
@@ -26,7 +26,7 @@ resource "oci_core_network_security_group_security_rule" "{{ resource_name }}_Ru
     direction    = {{ rule.direction | safe }}
     protocol    = {{ rule.protocol | safe }}
     # Optional
-    description   = {{ description }}
+    description   = {{ description| safe }}
     {% if rule.destination is defined %}
         destination = {{ rule.destination | safe }}
     {% endif %}
diff --git a/visualiser/templates/terraform/region_data.jinja2 b/visualiser/templates/terraform/region_data.jinja2
index 7eb363f94..7d5732646 100644
--- a/visualiser/templates/terraform/region_data.jinja2
+++ b/visualiser/templates/terraform/region_data.jinja2
@@ -28,4 +28,7 @@ data "oci_identity_region_subscriptions" "RegionSubscriptions" {
 locals {
     HomeRegion = [for x in data.oci_identity_region_subscriptions.RegionSubscriptions.region_subscriptions: x if x.is_home_region][0]
 }
+# ------ Get List Service OCIDs
+data "oci_core_services" "RegionServices" {
+}
 
diff --git a/visualiser/templates/terraform/route_table.jinja2 b/visualiser/templates/terraform/route_table.jinja2
index aef6b1d76..d4b6e6fc5 100644
--- a/visualiser/templates/terraform/route_table.jinja2
+++ b/visualiser/templates/terraform/route_table.jinja2
@@ -13,8 +13,12 @@ resource "oci_core_route_table" "{{ resource_name }}" {
 {% endif %}
 {% for rule in route_rules %}
     route_rules    {
-        destination       = {{ rule.destination | safe }}
         destination_type  = {{ rule.destination_type | safe }}
+    {% if rule.destination is defined %}
+        destination       = {{ rule.destination | safe }}
+    {% else %}
+        destination       = data.oci_core_services.RegionServices.services[0]["cidr_block"]
+    {% endif %}
         network_entity_id = {{ rule.network_entity_id }}
         description       = {{ rule.description | safe }}
     }
diff --git a/visualiser/templates/terraform/subnet.jinja2 b/visualiser/templates/terraform/subnet.jinja2
index 7c04db81a..d11b6c9b2 100644
--- a/visualiser/templates/terraform/subnet.jinja2
+++ b/visualiser/templates/terraform/subnet.jinja2
@@ -8,7 +8,7 @@ resource "oci_core_subnet" "{{ resource_name }}" {
     cidr_block                 = {{ cidr_block | safe }}
     # Optional
 {% if availability_domain is defined %}
-    availability_domain        = data.oci_identity_availability_domains.AvailabilityDomains.availability_domains[{{ availability_domain | default(1) }} - 1]["name"]
+    availability_domain        = data.oci_identity_availability_domains.AvailabilityDomains.availability_domains[{{ availability_domain | safe }} - 1]["name"]
 {% endif %}
 {% if display_name is defined %}
     display_name               = {{ display_name | safe }}