diff --git a/migrations/036_default_value_keys.sql b/migrations/036_default_value_keys.sql
new file mode 100644
index 000000000..c018e8286
--- /dev/null
+++ b/migrations/036_default_value_keys.sql
@@ -0,0 +1,5 @@
+ALTER TABLE metatype_keys ALTER COLUMN default_value TYPE jsonb USING default_value::jsonb;
+ALTER TABLE metatype_relationship_keys ALTER COLUMN default_value TYPE jsonb USING default_value::jsonb;
+
+ALTER TABLE metatype_keys ALTER COLUMN options TYPE jsonb USING to_jsonb(options);
+ALTER TABLE metatype_relationship_keys ALTER COLUMN options TYPE jsonb USING to_jsonb(options);
diff --git a/src/data_storage/metatype_key_storage.ts b/src/data_storage/metatype_key_storage.ts
index aa548b0c6..b1c0fb8c7 100644
--- a/src/data_storage/metatype_key_storage.ts
+++ b/src/data_storage/metatype_key_storage.ts
@@ -124,14 +124,29 @@ export default class MetatypeKeyStorage extends PostgresStorage{
         let i = 1;
 
         Object.keys(updatedField).map(k => {
-            updateStatement.push(`${k} = $${i}`);
-            values.push(updatedField[k]);
-            i++
+           if(k === `created_at` || k === `created_by` || k === 'modified_at' || k === 'modified_by') {
+               return
+           }
+
+           // we must stringify the default value as it could be something other
+           // than a string, we store it as a string in the DB for ease of use
+           if(k === 'default_value' || k === 'options') {
+               updateStatement.push(`${k} = $${i}`);
+               values.push(JSON.stringify(updatedField[k]));
+               i++
+               return
+           }
+
+           updateStatement.push(`${k} = $${i}`);
+           values.push(updatedField[k]);
+           i++
         });
 
         updateStatement.push(`modified_by = $${i}`);
         values.push(userID);
 
+        updateStatement.push('modified_at = NOW()')
+
         return new Promise(resolve => {
             PostgresAdapter.Instance.Pool.query({
                 text: `UPDATE metatype_keys SET ${updateStatement.join(",")} WHERE id = '${id}'`,
@@ -246,8 +261,8 @@ INSERT INTO
 metatype_keys(metatype_id, id, name, description, property_name, required, data_type, options, default_value, validation, created_by, modified_by)
 VALUES($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11, $12)`,
             values: [key.metatype_id, key.id, key.name, key.description,
-                key.property_name, key.required, key.data_type, key.options,
-                key.default_value, key.validation, key.created_by, key.modified_by]
+                key.property_name, key.required, key.data_type, JSON.stringify(key.options),
+                JSON.stringify(key.default_value), key.validation, key.created_by, key.modified_by]
         }
     }
 
@@ -291,8 +306,8 @@ VALUES($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11, $12)`,
                  validation = $8
                  WHERE id = $9`,
             values: [key.name, key.description,
-                key.property_name, key.required, key.data_type, key.options,
-                key.default_value,key.validation, key.id]
+                key.property_name, key.required, key.data_type, JSON.stringify(key.options),
+                JSON.stringify(key.default_value),key.validation, key.id]
         }
     }
 }
diff --git a/src/data_storage/metatype_relationship_key_storage.ts b/src/data_storage/metatype_relationship_key_storage.ts
index 1e98b8f84..2345edfbb 100644
--- a/src/data_storage/metatype_relationship_key_storage.ts
+++ b/src/data_storage/metatype_relationship_key_storage.ts
@@ -127,6 +127,19 @@ export default class MetatypeRelationshipKeyStorage extends PostgresStorage{
         let i = 1;
 
         Object.keys(updatedField).map(k => {
+            if(k === `created_at` || k === `created_by` || k === 'modified_at' || k === 'modified_by') {
+                return
+            }
+
+            // we must stringify the default value as it could be something other
+            // than a string, we store it as a string in the DB for ease of use
+            if(k === 'default_value' || k === 'options') {
+                updateStatement.push(`${k} = $${i}`);
+                values.push(JSON.stringify(updatedField[k]));
+                i++
+                return
+            }
+
             updateStatement.push(`${k} = $${i}`);
             values.push(updatedField[k]);
             i++
@@ -135,6 +148,8 @@ export default class MetatypeRelationshipKeyStorage extends PostgresStorage{
         updateStatement.push(`modified_by = $${i}`);
         values.push(userID);
 
+        updateStatement.push('modified_at = NOW()')
+
         return new Promise(resolve => {
             PostgresAdapter.Instance.Pool.query({
                 text: `UPDATE metatype_relationship_keys SET ${updateStatement.join(",")} WHERE id = '${id}'`,
@@ -252,8 +267,8 @@ export default class MetatypeRelationshipKeyStorage extends PostgresStorage{
             text:`INSERT INTO metatype_relationship_keys(metatype_relationship_id, id, name, description, property_name, required, data_type, options, default_value,validation, created_by, modified_by)
 VALUES($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11, $12)`,
             values: [key.metatype_relationship_id, key.id, key.name, key.description,
-                key.property_name, key.required, key.data_type, key.options,
-                key.default_value,key.validation, key.created_by, key.modified_by]
+                key.property_name, key.required, key.data_type, JSON.stringify(key.options),
+                JSON.stringify(key.default_value),key.validation, key.created_by, key.modified_by]
         }
     }
 
@@ -297,8 +312,8 @@ VALUES($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11, $12)`,
                  validation = $8
                  WHERE id = $9`,
             values: [key.name, key.description,
-                key.property_name, key.required, key.data_type, key.options,
-                key.default_value,key.validation, key.id]
+                key.property_name, key.required, key.data_type, JSON.stringify(key.options),
+                JSON.stringify(key.default_value),key.validation, key.id]
         }
     }
 }
diff --git a/src/logger.ts b/src/logger.ts
index 525a80ec0..9399d0b25 100644
--- a/src/logger.ts
+++ b/src/logger.ts
@@ -39,6 +39,7 @@ export class Winston implements Logger {
   private constructor() {
     this.logger = winston.createLogger({
       level: Config.log_level,
+      silent: Config.log_level === 'silent',
       transports: [
         new winston.transports.Console({
           format: winston.format.combine(
diff --git a/web_ui/src/api/client.ts b/web_ui/src/api/client.ts
index 9ebf13f85..3f5a9298a 100644
--- a/web_ui/src/api/client.ts
+++ b/web_ui/src/api/client.ts
@@ -132,16 +132,16 @@ export class Client {
    }
 
 
-   createMetatype(containerID: string, metatype: any): Promise<MetatypeT> {
-      return this.post<MetatypeT>(`/containers/${containerID}/metatypes`, metatype)
+   createMetatype(containerID: string, name: string, description: string): Promise<MetatypeT[]> {
+      return this.post<MetatypeT[]>(`/containers/${containerID}/metatypes`, {name, description})
    }
 
    retrieveMetatype(containerID: string, metatypeID: string): Promise<MetatypeT> {
       return this.get<MetatypeT>(`/containers/${containerID}/metatypes/${metatypeID}`)
    }
 
-   updateMetatype(containerID: string, metatypeID: string, metatype: any): Promise<MetatypeT> {
-      return this.put<MetatypeT>(`/containers/${containerID}/metatypes/${metatypeID}`, metatype)
+   updateMetatype(containerID: string, metatypeID: string, metatype: any): Promise<boolean> {
+      return this.put<boolean>(`/containers/${containerID}/metatypes/${metatypeID}`, metatype)
    }
 
    deleteMetatype(containerID: string, metatypeID: string): Promise<boolean> {
@@ -152,6 +152,18 @@ export class Client {
       return this.get<MetatypeKeyT[]>(`/containers/${containerID}/metatypes/${metatypeID}/keys`)
    }
 
+   createMetatypeKey(containerID: string, metatypeID: string, key: MetatypeKeyT): Promise<MetatypeKeyT[]> {
+      return this.post<MetatypeKeyT[]>(`/containers/${containerID}/metatypes/${metatypeID}/keys`, key)
+   }
+
+   deleteMetatypeKey(containerID: string, metatypeID: string, keyID: string): Promise<boolean> {
+      return this.delete(`/containers/${containerID}/metatypes/${metatypeID}/keys/${keyID}`)
+   }
+
+   updateMetatypeKey(containerID: string, metatypeID: string, keyID: string, key: MetatypeKeyT): Promise<boolean> {
+      return this.put<boolean>(`/containers/${containerID}/metatypes/${metatypeID}/keys/${keyID}`, key)
+   }
+
    listMetatypeRelationships(containerID: string, {name, description, limit, offset, sortBy, sortDesc, count}: {name?: string; description?: string; limit?: number; offset?: number; sortBy?: string; sortDesc?: boolean; count?: boolean}): Promise<MetatypeRelationshipT[] | number> {
       const query: {[key: string]: any} = {}
 
@@ -170,28 +182,28 @@ export class Client {
       return this.get<MetatypeRelationshipT>(`/containers/${containerID}/metatype_relationships/${metatypeRelationshipID}`)
    }
 
-   createMetatypeRelationship(containerID: string, metatypeRelationship: any): Promise<MetatypeRelationshipT> {
-      return this.post<MetatypeRelationshipT>(`/containers/${containerID}/metatype_relationships`, metatypeRelationship)
+   createMetatypeRelationship(containerID: string, name: string, description: string): Promise<MetatypeRelationshipT[]> {
+      return this.post<MetatypeRelationshipT[]>(`/containers/${containerID}/metatype_relationships`, {name, description})
    }
 
    retrieveMetatypeRelationshipPair(containerID: string, metatypeRelationshipPairID: string): Promise<MetatypeRelationshipPairT> {
       return this.get<MetatypeRelationshipPairT>(`/containers/${containerID}/metatype_relationship_pairs/${metatypeRelationshipPairID}`)
    }
 
-   updateMetatypeRelationship(containerID: string, metatypeRelationshipID: string, metatypeRelationship: any): Promise<MetatypeRelationshipT> {
-      return this.put<MetatypeRelationshipT>(`/containers/${containerID}/metatype_relationships/${metatypeRelationshipID}`, metatypeRelationship)
+   updateMetatypeRelationship(containerID: string, metatypeRelationshipID: string, metatypeRelationship: any): Promise<boolean> {
+      return this.put<boolean>(`/containers/${containerID}/metatype_relationships/${metatypeRelationshipID}`, metatypeRelationship)
    }
 
    deleteMetatypeRelationship(containerID: string, metatypeRelationshipID: string): Promise<boolean> {
       return this.delete(`/containers/${containerID}/metatype_relationships/${metatypeRelationshipID}`)
    }
 
-   createMetatypeRelationshipPair(containerID: string, metatypeRelationshipPair: any): Promise<MetatypeRelationshipPairT> {
-      return this.post<MetatypeRelationshipPairT>(`/containers/${containerID}/metatype_relationship_pairs`, metatypeRelationshipPair)
+   createMetatypeRelationshipPair(containerID: string, metatypeRelationshipPair: any): Promise<MetatypeRelationshipPairT[]> {
+      return this.post<MetatypeRelationshipPairT[]>(`/containers/${containerID}/metatype_relationship_pairs`, metatypeRelationshipPair)
    }
 
-   updateMetatypeRelationshipPair(containerID: string, metatypeRelationshipPairID: string, metatypeRelationshipPair: any): Promise<MetatypeRelationshipPairT> {
-      return this.put<MetatypeRelationshipPairT>(`/containers/${containerID}/metatype_relationship_pairs/${metatypeRelationshipPairID}`, metatypeRelationshipPair)
+   updateMetatypeRelationshipPair(containerID: string, metatypeRelationshipPairID: string, metatypeRelationshipPair: any): Promise<boolean> {
+      return this.put<boolean>(`/containers/${containerID}/metatype_relationship_pairs/${metatypeRelationshipPairID}`, metatypeRelationshipPair)
    }
 
    deleteMetatypeRelationshipPair(containerID: string, metatypeRelationshipPairID: string): Promise<boolean> {
@@ -202,6 +214,18 @@ export class Client {
       return this.get<MetatypeRelationshipKeyT[]>(`/containers/${containerID}/metatype_relationships/${relationshipID}/keys`)
    }
 
+   deleteMetatypeRelationshipKey(containerID: string, metatypeRelationshipID: string, keyID: string): Promise<boolean> {
+      return this.delete(`/containers/${containerID}/metatype_relationships/${metatypeRelationshipID}/keys/${keyID}`)
+   }
+
+   createMetatypeRelationshipKey(containerID: string, metatypeRelationshipID: string, key: MetatypeRelationshipKeyT): Promise<MetatypeRelationshipKeyT[]> {
+      return this.post<MetatypeRelationshipKeyT[]>(`/containers/${containerID}/metatype_relationships/${metatypeRelationshipID}/keys`, key)
+   }
+
+   updateMetatypeRelationshipKey(containerID: string, metatypeRelationshipID: string, keyID: string, key: MetatypeRelationshipKeyT): Promise<boolean> {
+      return this.put<boolean>(`/containers/${containerID}/metatype_relationships/${metatypeRelationshipID}/keys/${keyID}`, key)
+   }
+
    createDataSource(containerID: string, dataSource: any): Promise<DataSourceT> {
       return this.post<DataSourceT>(`/containers/${containerID}/import/datasources`, dataSource)
    }
diff --git a/web_ui/src/api/types.ts b/web_ui/src/api/types.ts
index 470fff458..930c528c7 100644
--- a/web_ui/src/api/types.ts
+++ b/web_ui/src/api/types.ts
@@ -57,13 +57,11 @@ export type MetatypeKeyT= {
     description: string;
     data_type: "number" | "date" | "string" | "boolean" | "enumeration" | "file";
     archived: boolean;
-    cardinality: number | undefined;
     validation: {
         regex: string;
         min: number;
         max: number;
     } | undefined;
-    unique: boolean;
     options: string[] | undefined;
     default_value: string | boolean | number | any[] | undefined;
     created_at: string;
@@ -81,13 +79,11 @@ export type MetatypeRelationshipKeyT= {
     description: string;
     data_type: "number" | "date" | "string" | "boolean" | "enumeration" | "file";
     archived: boolean;
-    cardinality: number | undefined;
     validation: {
         regex: string;
         min: number;
         max: number;
-    } | undefined;
-    unique: boolean;
+    };
     options: string[] | undefined;
     default_value: string | boolean | number | any[] | undefined;
     created_at: string;
diff --git a/web_ui/src/components/createMetatypeDialog.vue b/web_ui/src/components/createMetatypeDialog.vue
new file mode 100644
index 000000000..a60363697
--- /dev/null
+++ b/web_ui/src/components/createMetatypeDialog.vue
@@ -0,0 +1,95 @@
+<template>
+  <v-dialog v-model="dialog" @click:outside="dialog = false; reset()" max-width="60%">
+    <template v-slot:activator="{ on }">
+      <v-icon
+          v-if="icon"
+          small
+          class="mr-2"
+          v-on="on"
+      >mdi-card-plus</v-icon>
+      <v-btn v-if="!icon" color="primary" dark class="mb-2" v-on="on">{{$t("createMetatype.createMetatype")}}</v-btn>
+    </template>
+
+    <v-card>
+      <v-card-text>
+        <v-container>
+          <error-banner :message="errorMessage"></error-banner>
+          <span class="headline">{{$t('createMetatype.newMetatype')}}</span>
+          <v-row>
+            <v-col :cols="12">
+
+              <v-form
+                  ref="form"
+                  v-model="valid"
+              >
+                <v-text-field
+                    v-model="name"
+                    :rules="[v => !!v || $t('createMetatype.nameRequired')]"
+                    required
+                >
+                  <template v-slot:label>{{$t('createMetatype.name')}} <small style="color:red" >*</small></template>
+                </v-text-field>
+                <v-textarea
+                    v-model="description"
+                    required
+                    :rules="[v => !!v || $t('createMetatype.nameRequired')]"
+                >
+                  <template v-slot:label>{{$t('createMetatype.description')}} <small style="color:red" >*</small></template>
+                </v-textarea>
+              </v-form>
+              <p><span style="color:red">*</span> = {{$t('createMetatype.requiredField')}}</p>
+            </v-col>
+          </v-row>
+        </v-container>
+      </v-card-text>
+
+      <v-card-actions>
+        <v-spacer></v-spacer>
+        <v-btn color="blue darken-1" text @click="dialog = false; reset()" >{{$t("createMetatype.cancel")}}</v-btn>
+        <v-btn color="blue darken-1" :disabled="!valid" text @click="createMetatype()">{{$t("createMetatype.save")}}</v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script lang="ts">
+import {Component, Prop, Vue} from 'vue-property-decorator'
+
+@Component
+export default class CreateMetatypeDialog extends Vue {
+  @Prop({required: true})
+  containerID!: string;
+
+  @Prop({required: false})
+  readonly icon!: boolean
+
+  errorMessage = ""
+  dialog = false
+  name = ""
+  description = ""
+  valid = false
+
+  createMetatype() {
+    this.$client.createMetatype(this.containerID, this.name, this.description)
+        .then(result => {
+          if(!result) {
+            this.errorMessage = this.$t('createMetatype.errorCreatingAPI') as string
+          } else {
+            this.dialog = false
+            // emit only the first object in the result array, as we're only creating
+            // a single metatype
+            this.$emit('metatypeCreated', result[0])
+            this.reset()
+          }
+        })
+        .catch(e => this.errorMessage = this.$t('createMetatype.errorCreatingAPI') as string + e)
+  }
+
+  reset() {
+    this.name = ""
+    this.description = ""
+  }
+
+}
+
+</script>
diff --git a/web_ui/src/components/createMetatypeKeyDialog.vue b/web_ui/src/components/createMetatypeKeyDialog.vue
new file mode 100644
index 000000000..6c28ee2e0
--- /dev/null
+++ b/web_ui/src/components/createMetatypeKeyDialog.vue
@@ -0,0 +1,186 @@
+<template>
+  <v-dialog v-model="dialog" @click:outside="dialog = false" max-width="60%">
+    <template v-slot:activator="{ on }">
+      <v-icon
+          v-if="icon"
+          small
+          class="mr-2"
+          v-on="on"
+      >mdi-pencil</v-icon>
+      <v-btn v-if="!icon" color="primary" dark class="mb-2" v-on="on">{{$t("createMetatypeKey.newKey")}}</v-btn>
+    </template>
+
+    <v-card>
+      <v-card-text>
+        <v-container>
+          <error-banner :message="errorMessage"></error-banner>
+          <span class="headline">{{$t('createMetatypeKey.newKey')}}</span>
+          <v-row>
+            <v-col :cols="12">
+
+              <v-form
+                  ref="form"
+                  v-model="formValid"
+              >
+                <v-text-field
+                    v-model="metatypeKey.name"
+                    :rules="[v => !!v || $t('createMetatypeKey.nameRequired')]"
+                >
+                  <template v-slot:label>{{$t('createMetatypeKey.name')}} <small style="color:red" >*</small></template>
+                </v-text-field>
+
+                <v-text-field
+                    v-model="metatypeKey.property_name"
+                    :rules="[v => !!v || $t('createMetatypeKey.propertyNameRequired')]"
+                    required
+                >
+                  <template v-slot:label>{{$t('createMetatypeKey.propertyName')}} <small style="color:red" >*</small></template>
+                </v-text-field>
+                <v-select
+                    v-model="metatypeKey.data_type"
+                    :items="dataTypes"
+                    @change="metatypeKey.default_value = undefined"
+                    :rules="[v => !!v || $t('createMetatypeKey.dataTypeRequired')]"
+                    required
+                >
+                  <template v-slot:label>{{$t('createMetatypeKey.dataType')}} <small style="color:red" >*</small></template>
+                </v-select>
+                <v-checkbox
+                    v-model="metatypeKey.required"
+                >
+                  <template v-slot:label>{{$t('createMetatypeKey.required')}} <small style="color:#ff0000" >*</small></template>
+                </v-checkbox>
+                <v-textarea
+                    v-model="metatypeKey.description"
+                    :rows="2"
+                    :rules="[v => !!v || $t('createMetatypeKey.descriptionRequired')]"
+                >
+                  <template v-slot:label>{{$t('createMetatypeKey.description')}} <small style="color:#ff0000" >*</small></template>
+                </v-textarea>
+
+                <h3>{{$t('createMetatypeKey.validation')}}</h3>
+                <v-text-field
+                    v-model="metatypeKey.validation.regex"
+                    :label="$t('createMetatypeKey.regex')"
+                >
+                  <template slot="append-outer"> <info-tooltip :message="$t('createMetatypeKey.regexHelp')"></info-tooltip></template>
+                </v-text-field>
+                <v-text-field
+                    v-model.number="metatypeKey.validation.max"
+                    :disabled="metatypeKey.validation.regex === ''"
+                    type="number"
+                    :label="$t('createMetatypeKey.max')"
+                >
+                  <template slot="append-outer"> <info-tooltip :message="$t('createMetatypeKey.maxHelp')"></info-tooltip></template>
+                </v-text-field>
+                <v-text-field
+                    v-model.number="metatypeKey.validation.min"
+                    :disabled="metatypeKey.validation.regex === ''"
+                    type="number"
+                    :label="$t('createMetatypeKey.min')"
+                >
+                  <template slot="append-outer"> <info-tooltip :message="$t('createMetatypeKey.minHelp')"></info-tooltip></template>
+                </v-text-field>
+
+
+
+                <!-- default value and options should be comboboxes when set to enumeration -->
+                <div v-if="metatypeKey.data_type === 'enumeration'" >
+                  <v-combobox
+                      v-model="metatypeKey.default_value"
+                      multiple
+                      clearable
+                      deletable-chips
+                      chips
+                      :label="$t('createMetatypeKey.defaultValue')"
+                  ></v-combobox>
+                </div>
+
+                <div v-if="metatypeKey.data_type !== 'enumeration'" >
+                  <v-text-field
+                      v-if="metatypeKey.data_type === 'number'"
+                      v-model="metatypeKey.default_value"
+                      type="number"
+                      :label="$t('createMetatypeKey.defaultValue')"
+                  ></v-text-field>
+                  <v-select
+                      v-else-if="metatypeKey.data_type === 'boolean'"
+                      v-model="metatypeKey.default_value"
+                      :label="$t('createMetatypeKey.defaultValue')"
+                      :items="booleanOptions"
+                      required
+                  >
+                  </v-select>
+                  <v-text-field
+                      v-else
+                      v-model="metatypeKey.default_value"
+                      :label="$t('createMetatypeKey.defaultValue')"
+                      :disabled="metatypeKey.data_type === 'file'"
+                  ></v-text-field>
+                </div>
+
+                <v-combobox
+                    v-model="metatypeKey.options"
+                    :label="$t('createMetatypeKey.options')"
+                    multiple
+                    clearable
+                    deletable-chips
+                    chips
+                ></v-combobox>
+              </v-form>
+              <p><span style="color:red">*</span> = {{$t('createMetatypeKey.requiredField')}}</p>
+            </v-col>
+          </v-row>
+        </v-container>
+      </v-card-text>
+
+      <v-card-actions>
+        <v-spacer></v-spacer>
+        <v-btn color="blue darken-1" text @click="dialog = false" >{{$t("createMetatypeKey.cancel")}}</v-btn>
+        <v-btn color="blue darken-1" :disabled="!formValid" text @click="createMetatypeKey()">{{$t("createMetatypeKey.create")}}</v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script lang="ts">
+import {Component, Prop, Watch, Vue} from 'vue-property-decorator'
+import {MetatypeKeyT, MetatypeT} from "../api/types";
+
+@Component
+export default class CreateMetatypeKeyDialog extends Vue {
+  @Prop({required: true})
+  metatype!: MetatypeT;
+
+  @Prop({required: false})
+  readonly icon!: boolean
+
+  errorMessage = ""
+  dialog = false
+  formValid = false
+  metatypeKey: MetatypeKeyT = {validation: {regex: "", min: 0, max: 0}, required: false} as MetatypeKeyT
+  dataTypes = ["number", "date", "string", "boolean", "enumeration", "file"]
+  booleanOptions =  [true, false]
+
+  @Watch('dialog', {immediate: true})
+  onDialogChange() {
+    if(this.dialog) this.metatypeKey = {validation: {regex: "", min: 0, max: 0}, required: false} as MetatypeKeyT
+  }
+
+  createMetatypeKey() {
+    if(this.metatypeKey) {
+      this.$client.createMetatypeKey(this.metatype.container_id, this.metatype.id, this.metatypeKey)
+          .then(result => {
+            if(!result) {
+              this.errorMessage = this.$t('createMetatypeKey.errorCreatingAPI') as string
+            } else {
+              this.dialog = false
+              this.$emit('metatypeKeyCreated', result[0])
+            }
+          })
+          .catch(e => this.errorMessage = this.$t('createMetatypeKey.errorCreatingAPI') as string + e)
+    }
+  }
+
+}
+</script>
diff --git a/web_ui/src/components/createMetatypeRelationshipDialog.vue b/web_ui/src/components/createMetatypeRelationshipDialog.vue
new file mode 100644
index 000000000..686c06807
--- /dev/null
+++ b/web_ui/src/components/createMetatypeRelationshipDialog.vue
@@ -0,0 +1,95 @@
+<template>
+  <v-dialog v-model="dialog" @click:outside="dialog = false; reset()" max-width="60%">
+    <template v-slot:activator="{ on }">
+      <v-icon
+          v-if="icon"
+          small
+          class="mr-2"
+          v-on="on"
+      >mdi-card-plus</v-icon>
+      <v-btn v-if="!icon" color="primary" dark class="mb-2" v-on="on">{{$t("createMetatypeRelationship.createMetatypeRelationship")}}</v-btn>
+    </template>
+
+    <v-card>
+      <v-card-text>
+        <v-container>
+          <error-banner :message="errorMessage"></error-banner>
+          <span class="headline">{{$t('createMetatypeRelationship.newMetatypeRelationship')}}</span>
+          <v-row>
+            <v-col :cols="12">
+
+              <v-form
+                  ref="form"
+                  v-model="valid"
+              >
+                <v-text-field
+                    v-model="name"
+                    :rules="[v => !!v || $t('createMetatypeRelationship.nameRequired')]"
+                    required
+                >
+                  <template v-slot:label>{{$t('createMetatypeRelationship.name')}} <small style="color:red" >*</small></template>
+                </v-text-field>
+                <v-textarea
+                    v-model="description"
+                    :rules="[v => !!v || $t('createMetatypeRelationship.descriptionRequired')]"
+                    required
+                >
+                  <template v-slot:label>{{$t('createMetatypeRelationship.description')}} <small style="color:red" >*</small></template>
+                </v-textarea>
+              </v-form>
+              <p><span style="color:red">*</span> = {{$t('createMetatypeRelationship.requiredField')}}</p>
+            </v-col>
+          </v-row>
+        </v-container>
+      </v-card-text>
+
+      <v-card-actions>
+        <v-spacer></v-spacer>
+        <v-btn color="blue darken-1" text @click="dialog = false; reset()" >{{$t("createMetatypeRelationship.cancel")}}</v-btn>
+        <v-btn color="blue darken-1" :disabled="!valid" text @click="createMetatype()">{{$t("createMetatypeRelationship.save")}}</v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script lang="ts">
+import {Component, Prop, Vue} from 'vue-property-decorator'
+
+@Component
+export default class CreateMetatypeRelationshipDialog extends Vue {
+  @Prop({required: true})
+  containerID!: string;
+
+  @Prop({required: false})
+  readonly icon!: boolean
+
+  errorMessage = ""
+  dialog = false
+  name = ""
+  description = ""
+  valid = false
+
+  createMetatype() {
+    this.$client.createMetatypeRelationship(this.containerID, this.name, this.description)
+        .then(result => {
+          if(!result) {
+            this.errorMessage = this.$t('createMetatypeRelationship.errorCreatingAPI') as string
+          } else {
+            this.dialog = false
+            // emit only the first object in the result array, as we're only creating
+            // a single metatype
+            this.$emit('metatypeRelationshipCreated', result[0])
+            this.reset()
+          }
+        })
+        .catch(e => this.errorMessage = this.$t('createMetatypeRelationship.errorCreatingAPI') as string + e)
+  }
+
+  reset() {
+    this.name = ""
+    this.description = ""
+  }
+
+}
+
+</script>
diff --git a/web_ui/src/components/createMetatypeRelationshipKeyDialog.vue b/web_ui/src/components/createMetatypeRelationshipKeyDialog.vue
new file mode 100644
index 000000000..f31d2b47f
--- /dev/null
+++ b/web_ui/src/components/createMetatypeRelationshipKeyDialog.vue
@@ -0,0 +1,182 @@
+<template>
+  <v-dialog v-model="dialog" @click:outside="dialog = false" max-width="60%">
+    <template v-slot:activator="{ on }">
+      <v-icon
+          v-if="icon"
+          small
+          class="mr-2"
+          v-on="on"
+      >mdi-pencil</v-icon>
+      <v-btn v-if="!icon" color="primary" dark class="mb-2" v-on="on">{{$t("createMetatypeRelationshipKey.newKey")}}</v-btn>
+    </template>
+
+    <v-card>
+      <v-card-text>
+        <v-container>
+          <error-banner :message="errorMessage"></error-banner>
+          <span class="headline">{{$t('createMetatypeRelationshipKey.newKey')}}</span>
+          <v-row>
+            <v-col :cols="12">
+
+              <v-form
+                  ref="form"
+                  v-model="formValid"
+              >
+                <v-text-field
+                    v-model="metatypeRelationshipKey.name"
+                    :rules="[v => !!v || $t('createMetatypeRelationshipKey.nameRequired')]"
+                >
+                  <template v-slot:label>{{$t('createMetatypeRelationshipKey.name')}} <small style="color:red" >*</small></template>
+                </v-text-field>
+
+                <v-text-field
+                    v-model="metatypeRelationshipKey.property_name"
+                    :rules="[v => !!v || $t('createMetatypeRelationshipKey.propertyNameRequired')]"
+                    required
+                >
+                  <template v-slot:label>{{$t('createMetatypeRelationshipKey.propertyName')}} <small style="color:red" >*</small></template>
+                </v-text-field>
+                <v-select
+                    v-model="metatypeRelationshipKey.data_type"
+                    :items="dataTypes"
+                    @change="metatypeRelationshipKey.default_value = undefined"
+                    :rules="[v => !!v || $t('createMetatypeRelationshipKey.dataTypeRequired')]"
+                    required
+                >
+                  <template v-slot:label>{{$t('createMetatypeRelationshipKey.dataType')}} <small style="color:red" >*</small></template>
+                </v-select>
+                <v-checkbox
+                    v-model="metatypeRelationshipKey.required"
+                >
+                  <template v-slot:label>{{$t('createMetatypeRelationshipKey.required')}} <small style="color:red" >*</small></template>
+                </v-checkbox>
+                <v-textarea
+                    v-model="metatypeRelationshipKey.description"
+                    :rows="2"
+                    :rules="[v => !!v || $t('createMetatypeRelationshipKey.descriptionRequired')]"
+                >
+                  <template v-slot:label>{{$t('createMetatypeRelationshipKey.description')}} <small style="color:red" >*</small></template>
+                </v-textarea>
+
+                <h3>{{$t('createMetatypeRelationshipKey.validation')}}</h3>
+                <v-text-field
+                    v-model="metatypeRelationshipKey.validation.regex"
+                    :label="$t('createMetatypeRelationshipKey.regex')"
+                >
+                  <template slot="append-outer"> <info-tooltip :message="$t('createMetatypeRelationshipKey.regexHelp')"></info-tooltip></template>
+                </v-text-field>
+                <v-text-field
+                    v-model.number="metatypeRelationshipKey.validation.max"
+                    :disabled="metatypeRelationshipKey.validation.regex === ''"
+                    type="number"
+                    :label="$t('createMetatypeRelationshipKey.max')"
+                >
+                  <template slot="append-outer"> <info-tooltip :message="$t('createMetatypeRelationshipKey.maxHelp')"></info-tooltip></template>
+                </v-text-field>
+                <v-text-field
+                    v-model.number="metatypeRelationshipKey.validation.min"
+                    :disabled="metatypeRelationshipKey.validation.regex === ''"
+                    type="number"
+                    :label="$t('createMetatypeRelationshipKey.min')"
+                >
+                  <template slot="append-outer"> <info-tooltip :message="$t('createMetatypeRelationshipKey.minHelp')"></info-tooltip></template>
+                </v-text-field>
+
+                <!-- default value and options should be comboboxes when set to enumeration -->
+                <div v-if="metatypeRelationshipKey.data_type === 'enumeration'" >
+                  <v-combobox
+                      v-model="metatypeRelationshipKey.default_value"
+                      multiple
+                      clearable
+                      deletable-chips
+                      chips
+                  ></v-combobox>
+                </div>
+
+                <div v-if="metatypeRelationshipKey.data_type !== 'enumeration'" >
+                  <v-text-field
+                      v-if="metatypeRelationshipKey.data_type === 'number'"
+                      v-model="metatypeRelationshipKey.default_value"
+                      type="number"
+                      :label="$t('createMetatypeRelationshipKey.defaultValue')"
+                  ></v-text-field>
+                  <v-select
+                      v-else-if="metatypeRelationshipKey.data_type === 'boolean'"
+                      v-model="metatypeRelationshipKey.default_value"
+                      :label="$t('createMetatypeRelationshipKey.defaultValue')"
+                      :items="booleanOptions"
+                      required
+                  >
+                  </v-select>
+                  <v-text-field
+                      v-else
+                      v-model="metatypeRelationshipKey.default_value"
+                      :label="$t('createMetatypeRelationshipKey.defaultValue')"
+                  ></v-text-field>
+                </div>
+
+                <v-combobox
+                    v-model="metatypeRelationshipKey.options"
+                    :label="$t('createMetatypeRelationshipKey.options')"
+                    multiple
+                    clearable
+                    deletable-chips
+                    chips
+                ></v-combobox>
+              </v-form>
+              <p><span style="color:red">*</span> = {{$t('createMetatypeRelationshipKey.requiredField')}}</p>
+            </v-col>
+          </v-row>
+        </v-container>
+      </v-card-text>
+
+      <v-card-actions>
+        <v-spacer></v-spacer>
+        <v-btn color="blue darken-1" text @click="dialog = false" >{{$t("createMetatypeRelationshipKey.cancel")}}</v-btn>
+        <v-btn color="blue darken-1" :disabled="!formValid" text @click="createMetatypeKey()">{{$t("createMetatypeRelationshipKey.create")}}</v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script lang="ts">
+import {Component, Prop, Watch, Vue} from 'vue-property-decorator'
+import {MetatypeRelationshipKeyT, MetatypeRelationshipT} from "../api/types";
+
+@Component
+export default class CreateMetatypeRelationshipKeyDialog extends Vue {
+  @Prop({required: true})
+  metatypeRelationship!: MetatypeRelationshipT;
+
+  @Prop({required: false})
+  readonly icon!: boolean
+
+  errorMessage = ""
+  dialog = false
+  formValid = false
+  metatypeRelationshipKey: MetatypeRelationshipKeyT = {validation: {regex: "", min: 0, max: 0}, required: false} as MetatypeRelationshipKeyT
+  dataTypes = ["number", "date", "string", "boolean", "enumeration", "file"]
+  booleanOptions = [true, false]
+
+  @Watch('dialog', {immediate: true})
+  onDialogChange() {
+    if(this.dialog) this.metatypeRelationshipKey = {validation: {regex: "", min: 0, max: 0}, required: false} as MetatypeRelationshipKeyT
+  }
+
+  createMetatypeKey() {
+    if(this.metatypeRelationshipKey) {
+      this.$client.createMetatypeRelationshipKey(this.metatypeRelationship.container_id, this.metatypeRelationship.id, this.metatypeRelationshipKey)
+          .then(result => {
+            if(!result) {
+              this.errorMessage = this.$t('createMetatypeRelationshipKey.errorCreatingAPI') as string
+            } else {
+              this.dialog = false
+              this.$emit('metatypeRelationshipKeyCreated', result[0])
+            }
+          })
+          .catch(e => this.errorMessage = this.$t('createMetatypeRelationshipKey.errorCreatingAPI') as string + e)
+    }
+  }
+
+}
+</script>
diff --git a/web_ui/src/components/createRelationshipPairDialog.vue b/web_ui/src/components/createRelationshipPairDialog.vue
new file mode 100644
index 000000000..3b3a246e9
--- /dev/null
+++ b/web_ui/src/components/createRelationshipPairDialog.vue
@@ -0,0 +1,190 @@
+<template>
+  <v-dialog v-model="dialog" max-width="60%">
+    <template v-slot:activator="{ on }">
+      <v-icon
+          v-if="icon"
+          small
+          class="mr-2"
+          v-on="on"
+      >mdi-card-plus</v-icon>
+      <v-btn v-if="!icon" color="primary" dark class="mb-2" v-on="on">{{$t("createMetatypeRelationshipPair.createMetatypeRelationshipPair")}}</v-btn>
+    </template>
+    <v-card>
+      <v-card-title>
+        <span class="headline">{{$t("createMetatypeRelationshipPair.formTitle")}}</span>
+        <error-banner :message="errorMessage"></error-banner>
+      </v-card-title>
+
+      <v-card-text>
+        <v-container>
+          <v-row>
+            <v-col :cols="12">
+
+              <v-form
+                  ref="form"
+                  v-model="valid"
+              >
+                <v-text-field
+                    v-model="name"
+                    :rules="[v => !!v || $t('createMetatypeRelationshipPair.originRequired')]"
+                    required
+                >
+                  <template v-slot:label>{{$t('createMetatypeRelationshipPair.name')}} <small style="color:red" >*</small></template>
+                </v-text-field>
+                <v-textarea
+                    v-model="description"
+                    :rules="[v => !!v || $t('createMetatypeRelationshipPair.originRequired')]"
+                >
+                  <template v-slot:label>{{$t('createMetatypeRelationshipPair.description')}} <small style="color:red" >*</small></template>
+                </v-textarea>
+                <v-autocomplete
+                    v-model="originSelect"
+                    :rules="[v => !!v || $t('createMetatypeRelationshipPair.originRequired')]"
+                    :single-line="false"
+                    :items="originMetatypes"
+                    :search-input.sync="originSearch"
+                    item-text="name"
+                    item-value="id"
+                    persistent-hint
+                    required
+                >
+                  <template v-slot:label>{{$t('createMetatypeRelationshipPair.originMetatype')}} <small style="color:red" >*</small></template>
+                </v-autocomplete>
+                <v-autocomplete
+                    v-model="relationshipSelect"
+                    :rules="[v => !!v || $t('createMetatypeRelationshipPair.relationshipRequired')]"
+                    :single-line="false"
+                    :items="metatypeRelationships"
+                    :search-input.sync="relationshipSearch"
+                    item-text="name"
+                    item-value="id"
+                    persistent-hint
+                    required
+                >
+                  <template v-slot:label>{{$t('createMetatypeRelationshipPair.relationship')}} <small style="color:red" >*</small></template>
+                </v-autocomplete>
+                <v-autocomplete
+                    v-model="destinationSelect"
+                    :rules="[v => !!v || $t('createMetatypeRelationshipPair.destinationRequired')]"
+                    :single-line="false"
+                    :items="destinationMetatypes"
+                    :search-input.sync="destinationSearch"
+                    item-text="name"
+                    item-value="id"
+                    persistent-hint
+                    required
+                >
+                  <template v-slot:label>{{$t('createMetatypeRelationshipPair.destinationMetatype')}} <small style="color:red" >*</small></template>
+                </v-autocomplete>
+                <v-select
+                    v-model="relationshipType"
+                    :rules="[v => !!v || $t('createMetatypeRelationshipPair.relationshipTypeRequired')]"
+                    :items="relationshipTypeChoices"
+                    required
+                >
+                  <template v-slot:label>{{$t('createMetatypeRelationshipPair.relationshipType')}} <small style="color:red" >*</small></template>
+                </v-select>
+              </v-form>
+              <p><span style="color:red">*</span> = {{$t('createMetatypeRelationshipPair.requiredField')}}</p>
+            </v-col>
+          </v-row>
+        </v-container>
+      </v-card-text>
+      <v-card-actions>
+        <v-spacer></v-spacer>
+        <v-btn color="blue darken-1" text @click="dialog = false" >{{$t("createMetatypeRelationshipPair.cancel")}}</v-btn>
+        <v-btn color="blue darken-1" text :disabled="!valid" @click="newRelationshipPair()">{{$t("createMetatypeRelationshipPair.save")}}</v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script lang="ts">
+import {Component, Prop, Watch, Vue} from 'vue-property-decorator'
+import {MetatypeRelationshipT, MetatypeT} from "@/api/types";
+
+@Component
+export default class CreateRelationshipPairDialog extends Vue {
+  @Prop({required: true})
+  containerID!: string;
+
+  @Prop({required: false})
+  readonly icon!: boolean
+
+  errorMessage = ""
+  dialog = false
+  valid = false
+  destinationSearch = ""
+  originSearch = ""
+  relationshipSearch = ""
+  relationshipTypeChoices = ["many:many", "one:one", "one:many", "many:one"]
+  name = ""
+  description =  ""
+  originSelect = ""
+  destinationSelect = ""
+  relationshipSelect = ""
+  relationshipType = ""
+  originMetatypes: MetatypeT[] = []
+  destinationMetatypes: MetatypeT[] = []
+  metatypeRelationships: MetatypeRelationshipT[] = []
+
+  @Watch('dialog', {immediate: true})
+  onDialogChange() {
+    if(!this.dialog) this.reset()
+  }
+
+  @Watch('destinationSearch', {immediate: true})
+  onDestinationSearchChange(newVal: string) {
+    this.$client.listMetatypes(this.containerID, {name: newVal})
+        .then((metatypes) => {
+          this.destinationMetatypes = metatypes as MetatypeT[]
+        })
+        .catch((e: any) => this.errorMessage = e)
+  }
+
+  @Watch('originSearch', {immediate: true})
+  onOriginSearchChange(newVal: string) {
+    this.$client.listMetatypes(this.containerID, {name: newVal})
+        .then((metatypes) => {
+          this.originMetatypes = metatypes as MetatypeT[]
+        })
+        .catch((e: any) => this.errorMessage = e)
+  }
+
+  @Watch('relationshipSearch', {immediate: true})
+  relationshipSearchChange(newVal: string) {
+    this.$client.listMetatypeRelationships(this.containerID,  {name: newVal})
+        .then(metatypeRelationships => {
+          this.metatypeRelationships = metatypeRelationships as MetatypeRelationshipT[]
+        })
+        .catch(e => this.errorMessage = e)
+  }
+
+  newRelationshipPair() {
+    this.$client.createMetatypeRelationshipPair(this.containerID,
+        {"name": this.name,
+          "description": this.description,
+          "origin_metatype_id": this.originSelect,
+          "destination_metatype_id": this.destinationSelect,
+          "relationship_id": this.relationshipSelect,
+          "relationship_type": this.relationshipType}
+    )
+        .then(results => {
+          this.dialog = false
+          this.reset()
+          this.$emit('pairCreated', results[0])
+        })
+        .catch(e => this.errorMessage = this.$t('createMetatypeRelationshipPair.errorCreatingAPI') as string + e)
+  }
+
+  reset() {
+    this.name =  ""
+    this.description = ""
+    this.originSelect = ""
+    this.destinationSelect = ""
+    this.relationshipSelect = ""
+    this.relationshipType = ""
+  }
+}
+
+</script>
diff --git a/web_ui/src/components/dataTypeMapping.vue b/web_ui/src/components/dataTypeMapping.vue
index 416c07647..b9d726c58 100644
--- a/web_ui/src/components/dataTypeMapping.vue
+++ b/web_ui/src/components/dataTypeMapping.vue
@@ -77,13 +77,11 @@
 </template>
 
 <script lang="ts">
-    // TODO SET ACTIVE/INACTIVE TYPE MAPPING
-    import {Component, Prop, Vue, Watch} from 'vue-property-decorator'
+    import {Component, Prop, Vue} from 'vue-property-decorator'
     import {
       ImportDataT,
       TypeMappingT, TypeMappingTransformationT
     } from "../api/types";
-    import InfoTooltip from "@/components/infoTooltip.vue";
     import TransformationDialog from "@/components/transformationDialog.vue";
 
     @Component({
@@ -92,7 +90,7 @@
                 return JSON.stringify(value, null, 2)
             }
         },
-        components: {TransformationDialog, InfoTooltip}
+        components: {TransformationDialog}
     })
     export default class DataTypeMapping extends Vue {
 
diff --git a/web_ui/src/components/editMetatypeDialog.vue b/web_ui/src/components/editMetatypeDialog.vue
new file mode 100644
index 000000000..ab1eebe1f
--- /dev/null
+++ b/web_ui/src/components/editMetatypeDialog.vue
@@ -0,0 +1,182 @@
+<template>
+  <v-dialog v-model="dialog" @click:outside="dialog = false" max-width="60%">
+    <template v-slot:activator="{ on }">
+      <v-icon
+          v-if="icon"
+          small
+          class="mr-2"
+          v-on="on"
+      >mdi-pencil</v-icon>
+      <v-btn v-if="!icon" color="primary" dark class="mb-2" v-on="on">{{$t("editMetatype.editMetatype")}}</v-btn>
+    </template>
+
+    <v-card v-if="selectedMetatype">
+      <v-card-text>
+        <v-container>
+          <error-banner :message="errorMessage"></error-banner>
+          <span class="headline">{{$t('editMetatype.edit')}} {{selectedMetatype.name}}</span>
+          <v-row>
+            <v-col :cols="12">
+
+              <v-form
+                  ref="form"
+                  v-model="valid"
+              >
+                <v-text-field
+                    v-model="selectedMetatype.name"
+                    :rules="[v => !!v || $t('editMetatype.nameRequired')]"
+                    required
+                >
+                  <template v-slot:label>{{$t('editMetatype.name')}} <small style="color:red" >*</small></template>
+                </v-text-field>
+                <v-textarea
+                    v-model="selectedMetatype.description"
+                    :rules="[v => !!v || $t('editMetatype.descriptionRequired')]"
+                    required
+                >
+                  <template v-slot:label>{{$t('editMetatype.description')}} <small style="color:red" >*</small></template>
+                </v-textarea>
+              </v-form>
+              <p><span style="color:red">*</span> = {{$t('editMetatype.requiredField')}}</p>
+            </v-col>
+
+            <v-col :cols="12" v-if="keysLoading">
+              <v-progress-linear indeterminate></v-progress-linear>
+            </v-col>
+            <v-col :cols="12">
+              <v-data-table
+                  :headers="headers()"
+                  :items="selectedMetatype.properties"
+                  :items-per-page="100"
+                  :footer-props="{
+                     'items-per-page-options': [25, 50, 100]
+                  }"
+                  class="elevation-1"
+              >
+
+                <template v-slot:top>
+                  <v-toolbar flat color="white">
+                    <v-toolbar-title>{{$t("editMetatype.keys")}}</v-toolbar-title>
+                    <v-divider
+                        class="mx-4"
+                        inset
+                        vertical
+                    ></v-divider>
+                    <v-spacer></v-spacer>
+                    <create-metatype-key-dialog :metatype="metatype" @metatypeKeyCreated="loadKeys()"></create-metatype-key-dialog>
+                  </v-toolbar>
+                </template>
+                <template v-slot:[`item.actions`]="{ item }">
+                 <edit-metatype-key-dialog :metatypeKey="item" :metatype="metatype" :icon="true" @metatypeKeyEdited="loadKeys()"></edit-metatype-key-dialog>
+                  <v-icon
+                      small
+                      @click="deleteKey(item)"
+                  >
+                    mdi-delete
+                  </v-icon>
+                </template>
+              </v-data-table>
+            </v-col>
+          </v-row>
+        </v-container>
+      </v-card-text>
+
+      <v-card-actions>
+        <v-spacer></v-spacer>
+        <v-btn color="blue darken-1" text @click="dialog = false" >{{$t("editMetatype.cancel")}}</v-btn>
+        <v-btn color="blue darken-1" :disabled="!valid" text @click="editMetatype()">{{$t("editMetatype.save")}}</v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script lang="ts">
+import {Component, Prop, Watch, Vue} from 'vue-property-decorator'
+import {MetatypeKeyT, MetatypeT} from "../api/types";
+import EditMetatypeKeyDialog from "@/components/editMetatypeKeyDialog.vue";
+import CreateMetatypeKeyDialog from "@/components/createMetatypeKeyDialog.vue";
+
+@Component({components: {
+    EditMetatypeKeyDialog,
+    CreateMetatypeKeyDialog
+  }})
+export default class EditMetatypeDialog extends Vue {
+  @Prop({required: true})
+  metatype!: MetatypeT;
+
+  @Prop({required: false})
+  readonly icon!: boolean
+
+  errorMessage = ""
+  keysLoading = false
+  dialog = false
+  selectedMetatype: MetatypeT | null  = null
+  valid = false
+
+  // this way we only load the keys when the edit dialog is open, so we don't
+  // overload someone using this in a list
+  @Watch('dialog', {immediate: true})
+  isDialogOpen() {
+    if(this.dialog) {
+      this.loadKeys()
+    }
+  }
+
+  headers() {
+    return  [
+      { text: this.$t('editMetatype.keyName'), value: 'name' },
+      { text: this.$t('editMetatype.keyDescription'), value: 'description'},
+      { text: this.$t('editMetatype.keyType'), value: 'data_type'},
+      { text: this.$t('editMetatype.actions'), value: 'actions', sortable: false }
+    ]
+  }
+
+  mounted() {
+    // have to do this to avoid mutating properties
+    this.selectedMetatype = JSON.parse(JSON.stringify(this.metatype))
+  }
+
+  editMetatype() {
+    this.$client.updateMetatype(this.selectedMetatype?.container_id!, this.selectedMetatype?.id!,
+        {"name": this.selectedMetatype?.name, "description": this.selectedMetatype?.description})
+        .then(result => {
+          if(!result) {
+            this.errorMessage = this.$t('editMetatype.errorUpdatingAPI') as string
+          } else {
+            this.dialog = false
+            this.$emit('metatypeEdited')
+          }
+        })
+        .catch(e => this.errorMessage = this.$t('editMetatype.errorUpdatingAPI') as string + e)
+  }
+
+  loadKeys() {
+    if(this.selectedMetatype) {
+      this.keysLoading = true
+      this.$client.listMetatypeKeys(this.selectedMetatype.container_id, this.selectedMetatype.id)
+          .then(keys => {
+            if(this.selectedMetatype) {
+              this.selectedMetatype.properties = keys
+              this.keysLoading = false
+              this.$forceUpdate()
+            }
+          })
+          .catch(e => {
+            this.errorMessage = e
+            this.keysLoading = false
+          })
+    }
+  }
+
+  deleteKey(key: MetatypeKeyT) {
+    this.$client.deleteMetatypeKey(this.selectedMetatype?.container_id!, this.selectedMetatype?.id!, key.id)
+    .then(result => {
+      if(!result) this.errorMessage = this.$t('editMetatype.errorUpdatingAPI') as string
+
+      this.loadKeys()
+    })
+    .catch(e => this.errorMessage = this.$t('editMetatype.errorUpdatingAPI') as string + e)
+  }
+}
+
+</script>
diff --git a/web_ui/src/components/editMetatypeKeyDialog.vue b/web_ui/src/components/editMetatypeKeyDialog.vue
new file mode 100644
index 000000000..a11ac903f
--- /dev/null
+++ b/web_ui/src/components/editMetatypeKeyDialog.vue
@@ -0,0 +1,199 @@
+<template>
+  <v-dialog v-model="dialog" @click:outside="dialog = false" max-width="60%">
+    <template v-slot:activator="{ on }">
+      <v-icon
+          v-if="icon"
+          small
+          class="mr-2"
+          v-on="on"
+      >mdi-pencil</v-icon>
+      <v-btn v-if="!icon" color="primary" dark class="mb-2" v-on="on">{{$t("editMetatypeKey.editMetatypeKey")}}</v-btn>
+    </template>
+
+    <v-card v-if="selectedMetatypeKey">
+      <v-card-text>
+        <v-container>
+          <error-banner :message="errorMessage"></error-banner>
+          <span class="headline">{{$t('editMetatypeKey.edit')}} {{selectedMetatypeKey.name}}</span>
+          <v-row>
+            <v-col :cols="12">
+
+              <v-form
+                  ref="form"
+                  v-model="formValid"
+              >
+                <v-text-field
+                    v-model="selectedMetatypeKey.name"
+                    :rules="[v => !!v || $t('editMetatypeKey.nameRequired')]"
+                >
+                  <template v-slot:label>{{$t('editMetatypeKey.name')}} <small style="color:red" >*</small></template>
+                </v-text-field>
+
+                <v-text-field
+                    v-model="selectedMetatypeKey.property_name"
+                    :rules="[v => !!v || $t('editMetatypeKey.propertyNameRequired')]"
+                    required
+                >
+                  <template v-slot:label>{{$t('editMetatypeKey.propertyName')}} <small style="color:red" >*</small></template>
+                </v-text-field>
+                <v-select
+                    v-model="selectedMetatypeKey.data_type"
+                    :items="dataTypes"
+                    @change="selectedMetatypeKey.default_value = undefined"
+                    :rules="[v => !!v || $t('editMetatypeKey.dataTypeRequired')]"
+                    required
+                >
+                  <template v-slot:label>{{$t('editMetatypeKey.dataType')}} <small style="color:red" >*</small></template>
+                </v-select>
+                <v-checkbox
+                    v-model="selectedMetatypeKey.required"
+                >
+                  <template v-slot:label>{{$t('editMetatypeKey.required')}} <small style="color:#ff0000" >*</small></template>
+                </v-checkbox>
+                <v-textarea
+                    v-model="selectedMetatypeKey.description"
+                    :rows="2"
+                    :rules="[v => !!v || $t('editMetatypeKey.descriptionRequired')]"
+                >
+                  <template v-slot:label>{{$t('editMetatypeKey.description')}} <small style="color:#ff0000" >*</small></template>
+                </v-textarea>
+
+                <h3>{{$t('editMetatypeKey.validation')}}</h3>
+                <v-text-field
+                    v-model="selectedMetatypeKey.validation.regex"
+                    :label="$t('editMetatypeKey.regex')"
+                >
+                  <template slot="append-outer"> <info-tooltip :message="$t('editMetatypeKey.regexHelp')"></info-tooltip></template>
+                </v-text-field>
+                <v-text-field
+                    v-model.number="selectedMetatypeKey.validation.max"
+                    :disabled="selectedMetatypeKey.validation.regex === ''"
+                    type="number"
+                    :label="$t('editMetatypeKey.max')"
+                >
+                  <template slot="append-outer"> <info-tooltip :message="$t('editMetatypeKey.maxHelp')"></info-tooltip></template>
+                </v-text-field>
+                <v-text-field
+                    v-model.number="selectedMetatypeKey.validation.min"
+                    :disabled="selectedMetatypeKey.validation.regex === ''"
+                    type="number"
+                    :label="$t('editMetatypeKey.min')"
+                >
+                  <template slot="append-outer"> <info-tooltip :message="$t('editMetatypeKey.minHelp')"></info-tooltip></template>
+                </v-text-field>
+
+
+
+                <!-- default value and options should be comboboxes when set to enumeration -->
+                <div v-if="selectedMetatypeKey.data_type === 'enumeration'" >
+                  <v-combobox
+                      v-model="selectedMetatypeKey.default_value"
+                      multiple
+                      chips
+                      clearable
+                      deletable-chips
+                  ></v-combobox>
+                </div>
+
+                <div v-if="selectedMetatypeKey.data_type !== 'enumeration'" >
+                  <v-text-field
+                      v-if="selectedMetatypeKey.data_type === 'number'"
+                      v-model="selectedMetatypeKey.default_value"
+                      type="number"
+                      :label="$t('editMetatypeKey.defaultValue')"
+                  ></v-text-field>
+                  <v-select
+                      v-else-if="selectedMetatypeKey.data_type === 'boolean'"
+                      v-model="selectedMetatypeKey.default_value"
+                      :label="$t('editMetatypeKey.defaultValue')"
+                      :items="booleanOptions"
+                      required
+                  >
+                  </v-select>
+                  <v-text-field
+                      v-else
+                      v-model="selectedMetatypeKey.default_value"
+                      :label="$t('editMetatypeKey.defaultValue')"
+                  ></v-text-field>
+                </div>
+
+                <v-combobox
+                    v-model="selectedMetatypeKey.options"
+                    :label="$t('editMetatypeKey.options')"
+                    multiple
+                    clearable
+                    chips
+                    deletable-chips
+                ></v-combobox>
+              </v-form>
+              <p><span style="color:red">*</span> = {{$t('editMetatypeKey.requiredField')}}</p>
+            </v-col>
+          </v-row>
+        </v-container>
+      </v-card-text>
+
+      <v-card-actions>
+        <v-spacer></v-spacer>
+        <v-btn color="blue darken-1" text @click="dialog = false" >{{$t("editMetatypeKey.cancel")}}</v-btn>
+        <v-btn color="blue darken-1" :disabled="!formValid" text @click="editMetatypeKey()">{{$t("editMetatypeKey.save")}}</v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script lang="ts">
+import {Component, Prop, Watch, Vue} from 'vue-property-decorator'
+import {MetatypeKeyT, MetatypeT} from "../api/types";
+
+@Component
+export default class EditMetatypeKeyDialog extends Vue {
+  @Prop({required: true})
+  metatype!: MetatypeT;
+
+  @Prop({required: true})
+  metatypeKey!: MetatypeKeyT;
+
+  @Prop({required: false})
+  readonly icon!: boolean
+
+  errorMessage = ""
+  dialog = false
+  formValid = false
+  selectedMetatypeKey: MetatypeKeyT | null  = null
+  dataTypes = ["number", "date", "string", "boolean", "enumeration", "file"]
+  booleanOptions = [true, false]
+
+  @Watch('dialog', {immediate: true})
+  onDialogChange() {
+    if(this.dialog) this.selectedMetatypeKey = JSON.parse(JSON.stringify(this.metatypeKey))
+
+    if(this.selectedMetatypeKey && !this.selectedMetatypeKey.validation) {
+      this.selectedMetatypeKey.validation = {regex: "", min: 0, max: 0}
+    }
+  }
+
+  mounted() {
+    // have to do this to avoid mutating properties
+    this.selectedMetatypeKey = JSON.parse(JSON.stringify(this.metatypeKey))
+
+    if(this.selectedMetatypeKey && !this.selectedMetatypeKey.validation) {
+      this.selectedMetatypeKey.validation = {regex: "", min: 0, max: 0}
+    }
+  }
+
+  editMetatypeKey() {
+    if(this.selectedMetatypeKey) {
+      this.$client.updateMetatypeKey(this.metatype.container_id,this.metatype.id, this.selectedMetatypeKey?.id!, this.selectedMetatypeKey)
+          .then(result => {
+            if(!result) {
+              this.errorMessage = this.$t('editMetatypeKey.errorUpdatingAPI') as string
+            } else {
+              this.dialog = false
+              this.$emit('metatypeKeyEdited')
+            }
+          })
+          .catch(e => this.errorMessage = this.$t('editMetatypeKey.errorUpdatingAPI') as string + e)
+    }
+  }
+}
+</script>
diff --git a/web_ui/src/components/editMetatypeRelationshipDialog.vue b/web_ui/src/components/editMetatypeRelationshipDialog.vue
new file mode 100644
index 000000000..7fd718fe2
--- /dev/null
+++ b/web_ui/src/components/editMetatypeRelationshipDialog.vue
@@ -0,0 +1,183 @@
+<template>
+  <v-dialog v-model="dialog" @click:outside="dialog = false" max-width="60%">
+    <template v-slot:activator="{ on }">
+      <v-icon
+          v-if="icon"
+          small
+          class="mr-2"
+          v-on="on"
+      >mdi-pencil</v-icon>
+      <v-btn v-if="!icon" color="primary" dark class="mb-2" v-on="on">{{$t("editMetatypeRelationship.editMetatypeRelationship")}}</v-btn>
+    </template>
+
+    <v-card v-if="selectedMetatypeRelationship">
+      <v-card-text>
+        <v-container>
+          <error-banner :message="errorMessage"></error-banner>
+          <span class="headline">{{ $t('editMetatypeRelationship.edit') }} {{ selectedMetatypeRelationship.name }}</span>
+          <v-row>
+            <v-col :cols="12">
+
+              <v-form
+                  ref="form"
+                  v-model="valid"
+              >
+                <v-text-field
+                    v-model="selectedMetatypeRelationship.name"
+                    :rules="[v => !!v || $t('editMetatypeRelationship.nameRequired')]"
+                    required
+                >
+                  <template v-slot:label>{{$t('editMetatypeRelationship.name')}} <small style="color:red" >*</small></template>
+                </v-text-field>
+                <v-textarea
+                    v-model="selectedMetatypeRelationship.description"
+                    :rules="[v => !!v || $t('editMetatypeRelationship.descriptionRequired')]"
+                    required
+                >
+                  <template v-slot:label>{{$t('editMetatypeRelationship.description')}} <small style="color:red" >*</small></template>
+                </v-textarea>
+
+              </v-form>
+              <p><span style="color:red">*</span> = {{$t('editMetatypeRelationship.requiredField')}}</p>
+            </v-col>
+
+            <v-col :cols="12" v-if="keysLoading">
+              <v-progress-linear indeterminate></v-progress-linear>
+            </v-col>
+            <v-col :cols="12">
+              <v-data-table
+                  :headers="headers()"
+                  :items="selectedMetatypeRelationship.properties"
+                  :items-per-page="100"
+                  :footer-props="{
+                     'items-per-page-options': [25, 50, 100]
+                  }"
+                  class="elevation-1"
+              >
+
+                <template v-slot:top>
+                  <v-toolbar flat color="white">
+                    <v-toolbar-title>{{$t("editMetatypeRelationship.keys")}}</v-toolbar-title>
+                    <v-divider
+                        class="mx-4"
+                        inset
+                        vertical
+                    ></v-divider>
+                    <v-spacer></v-spacer>
+                    <create-metatype-relationship-key-dialog :metatypeRelationship="metatypeRelationship" @metatypeRelationshipKeyCreated="loadKeys()"></create-metatype-relationship-key-dialog>
+                  </v-toolbar>
+                </template>
+                <template v-slot:[`item.actions`]="{ item }">
+                 <edit-metatype-relationship-key-dialog :metatypeRelationshipKey="item" :metatypeRelationship="metatypeRelationship" :icon="true" @metatypeKeyEdited="loadKeys()"></edit-metatype-relationship-key-dialog>
+                  <v-icon
+                      small
+                      @click="deleteKey(item)"
+                  >
+                    mdi-delete
+                  </v-icon>
+                </template>
+              </v-data-table>
+            </v-col>
+          </v-row>
+        </v-container>
+      </v-card-text>
+
+      <v-card-actions>
+        <v-spacer></v-spacer>
+        <v-btn color="blue darken-1" text @click="dialog = false" >{{$t("editMetatypeRelationship.cancel")}}</v-btn>
+        <v-btn color="blue darken-1" :disabled="!valid" text @click="editMetatypeRelationship()">{{$t("editMetatypeRelationship.save")}}</v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script lang="ts">
+import {Component, Prop, Watch, Vue} from 'vue-property-decorator'
+import {MetatypeRelationshipKeyT, MetatypeRelationshipT} from "../api/types";
+import EditMetatypeRelationshipKeyDialog from "@/components/editMetatypeRelationshipKeyDialog.vue";
+import CreateMetatypeRelationshipKeyDialog from "@/components/createMetatypeRelationshipKeyDialog.vue";
+
+@Component({components: {
+    EditMetatypeRelationshipKeyDialog,
+    CreateMetatypeRelationshipKeyDialog
+  }})
+export default class EditMetatypeRelationshipDialog extends Vue {
+  @Prop({required: true})
+  metatypeRelationship!: MetatypeRelationshipT;
+
+  @Prop({required: false})
+  readonly icon!: boolean
+
+  errorMessage = ""
+  keysLoading = false
+  dialog = false
+  selectedMetatypeRelationship: MetatypeRelationshipT | null  = null
+  valid = false
+
+  // this way we only load the keys when the edit dialog is open, so we don't
+  // overload someone using this in a list
+  @Watch('dialog', {immediate: true})
+  isDialogOpen() {
+    if(this.dialog) {
+      this.loadKeys()
+    }
+  }
+
+  headers() {
+    return  [
+      { text: this.$t('editMetatypeRelationship.keyName'), value: 'name' },
+      { text: this.$t('editMetatypeRelationship.keyDescription'), value: 'description'},
+      { text: this.$t('editMetatypeRelationship.keyType'), value: 'data_type'},
+      { text: this.$t('editMetatypeRelationship.actions'), value: 'actions', sortable: false }
+    ]
+  }
+
+  mounted() {
+    // have to do this to avoid mutating properties
+    this.selectedMetatypeRelationship = JSON.parse(JSON.stringify(this.metatypeRelationship))
+  }
+
+  editMetatypeRelationship() {
+    this.$client.updateMetatypeRelationship(this.selectedMetatypeRelationship?.container_id!, this.selectedMetatypeRelationship?.id!,
+        {"name": this.selectedMetatypeRelationship?.name, "description": this.selectedMetatypeRelationship?.description})
+        .then(result => {
+          if(!result) {
+            this.errorMessage = this.$t('editMetatypeRelationship.errorUpdatingAPI') as string
+          } else {
+            this.dialog = false
+            this.$emit('metatypeRelationshipEdited')
+          }
+        })
+        .catch(e => this.errorMessage = this.$t('editMetatypeRelationship.errorUpdatingAPI') as string + e)
+  }
+
+  loadKeys() {
+    if(this.selectedMetatypeRelationship) {
+      this.keysLoading = true
+      this.$client.listMetatypeRelationshipKeys(this.selectedMetatypeRelationship.container_id, this.selectedMetatypeRelationship.id)
+          .then(keys => {
+            if(this.selectedMetatypeRelationship) {
+              this.selectedMetatypeRelationship.properties = keys
+              this.keysLoading = false
+              this.$forceUpdate()
+            }
+          })
+          .catch(e => {
+            this.errorMessage = e
+            this.keysLoading = false
+          })
+    }
+  }
+
+  deleteKey(key: MetatypeRelationshipKeyT) {
+    this.$client.deleteMetatypeRelationshipKey(this.selectedMetatypeRelationship?.container_id!, this.selectedMetatypeRelationship?.id!, key.id)
+    .then(result => {
+      if(!result) this.errorMessage = this.$t('editMetatypeRelationship.errorUpdatingAPI') as string
+
+      this.loadKeys()
+    })
+    .catch(e => this.errorMessage = this.$t('editMetatypeRelationship.errorUpdatingAPI') as string + e)
+  }
+}
+
+</script>
diff --git a/web_ui/src/components/editMetatypeRelationshipKeyDialog.vue b/web_ui/src/components/editMetatypeRelationshipKeyDialog.vue
new file mode 100644
index 000000000..944ac904d
--- /dev/null
+++ b/web_ui/src/components/editMetatypeRelationshipKeyDialog.vue
@@ -0,0 +1,201 @@
+<template>
+  <v-dialog v-model="dialog" @click:outside="dialog = false" max-width="60%">
+    <template v-slot:activator="{ on }">
+      <v-icon
+          v-if="icon"
+          small
+          class="mr-2"
+          v-on="on"
+      >mdi-pencil</v-icon>
+      <v-btn v-if="!icon" color="primary" dark class="mb-2" v-on="on">{{$t("editMetatypeRelationshipKey.editMetatypeKey")}}</v-btn>
+    </template>
+
+    <v-card v-if="selectedMetatypeRelationshipKey">
+      <v-card-text>
+        <v-container>
+          <error-banner :message="errorMessage"></error-banner>
+          <span class="headline">{{ $t('editMetatypeRelationshipKey.edit') }} {{ selectedMetatypeRelationshipKey.name }}</span>
+          <v-row>
+            <v-col :cols="12">
+
+              <v-form
+                  ref="form"
+                  v-model="formValid"
+              >
+                <v-text-field
+                    v-model="selectedMetatypeRelationshipKey.name"
+                    :rules="[v => !!v || $t('editMetatypeRelationshipKey.nameRequired')]"
+                >
+                  <template v-slot:label>{{$t('editMetatypeRelationshipKey.name')}} <small style="color:red" >*</small></template>
+                </v-text-field>
+
+                <v-text-field
+                    v-model="selectedMetatypeRelationshipKey.property_name"
+                    :rules="[v => !!v || $t('editMetatypeRelationshipKey.propertyNameRequired')]"
+                    required
+                >
+                  <template v-slot:label>{{$t('editMetatypeRelationshipKey.propertyName')}} <small style="color:red" >*</small></template>
+                </v-text-field>
+                <v-select
+                    v-model="selectedMetatypeRelationshipKey.data_type"
+                    :items="dataTypes"
+                    @change="selectedMetatypeRelationshipKey.default_value = undefined"
+                    :rules="[v => !!v || $t('editMetatypeRelationshipKey.dataTypeRequired')]"
+                    required
+                >
+                  <template v-slot:label>{{$t('editMetatypeRelationshipKey.dataType')}} <small style="color:red" >*</small></template>
+                </v-select>
+                <v-checkbox
+                    v-model="selectedMetatypeRelationshipKey.required"
+                >
+                  <template v-slot:label>{{$t('editMetatypeRelationshipKey.required')}} <small style="color:#ff0000" >*</small></template>
+                </v-checkbox>
+                <v-textarea
+                    v-model="selectedMetatypeRelationshipKey.description"
+                    :rows="2"
+                    :rules="[v => !!v || $t('editMetatypeRelationshipKey.descriptionRequired')]"
+                >
+                  <template v-slot:label>{{$t('editMetatypeRelationshipKey.description')}} <small style="color:#ff0000" >*</small></template>
+                </v-textarea>
+
+                <div v-if="selectedMetatypeRelationshipKey.validation">
+                  <h3>{{$t('editMetatypeRelationshipKey.validation')}}</h3>
+                  <v-text-field
+                      v-model="selectedMetatypeRelationshipKey.validation.regex"
+                      :label="$t('editMetatypeRelationshipKey.regex')"
+                  >
+                    <template slot="append-outer"> <info-tooltip :message="$t('editMetatypeRelationshipKey.regexHelp')"></info-tooltip></template>
+                  </v-text-field>
+                  <v-text-field
+                      v-model.number="selectedMetatypeRelationshipKey.validation.max"
+                      :disabled="selectedMetatypeRelationshipKey.validation.regex === ''"
+                      type="number"
+                      :label="$t('editMetatypeRelationshipKey.max')"
+                  >
+                    <template slot="append-outer"> <info-tooltip :message="$t('editMetatypeRelationshipKey.maxHelp')"></info-tooltip></template>
+                  </v-text-field>
+                  <v-text-field
+                      v-model.number="selectedMetatypeRelationshipKey.validation.min"
+                      :disabled="selectedMetatypeRelationshipKey.validation.regex === ''"
+                      type="number"
+                      :label="$t('editMetatypeRelationshipKey.min')"
+                  >
+                    <template slot="append-outer"> <info-tooltip :message="$t('editMetatypeRelationshipKey.minHelp')"></info-tooltip></template>
+                  </v-text-field>
+                </div>
+
+                <!-- default value and options should be comboboxes when set to enumeration -->
+                <div v-if="selectedMetatypeRelationshipKey.data_type === 'enumeration'" >
+                  <v-combobox
+                      v-model="selectedMetatypeRelationshipKey.default_value"
+                      multiple
+                      clearable
+                      deletable-chips
+                      chips
+                  ></v-combobox>
+                </div>
+
+                <div v-if="selectedMetatypeRelationshipKey.data_type !== 'enumeration'" >
+                  <v-text-field
+                      v-if="selectedMetatypeRelationshipKey.data_type === 'number'"
+                      v-model="selectedMetatypeRelationshipKey.default_value"
+                      type="number"
+                      :label="$t('editMetatypeRelationshipKey.defaultValue')"
+                  ></v-text-field>
+                  <v-select
+                      v-else-if="selectedMetatypeRelationshipKey.data_type === 'boolean'"
+                      v-model="selectedMetatypeRelationshipKey.default_value"
+                      :label="$t('editMetatypeRelationshipKey.defaultValue')"
+                      :items="booleanOptions"
+                      required
+                  >
+                  </v-select>
+                  <v-text-field
+                      v-else
+                      v-model="selectedMetatypeRelationshipKey.default_value"
+                      :label="$t('editMetatypeRelationshipKey.defaultValue')"
+                  ></v-text-field>
+                </div>
+
+                <v-combobox
+                    v-model="selectedMetatypeRelationshipKey.options"
+                    :label="$t('editMetatypeRelationshipKey.options')"
+                    multiple
+                    clearable
+                    deletable-chips
+                    chips
+                ></v-combobox>
+              </v-form>
+              <p><span style="color:red">*</span> = {{$t('editMetatypeRelationshipKey.requiredField')}}</p>
+            </v-col>
+          </v-row>
+        </v-container>
+      </v-card-text>
+
+      <v-card-actions>
+        <v-spacer></v-spacer>
+        <v-btn color="blue darken-1" text @click="dialog = false" >{{$t("editMetatypeRelationshipKey.cancel")}}</v-btn>
+        <v-btn color="blue darken-1" :disabled="!formValid" text @click="editMetatypeKey()">{{$t("editMetatypeRelationshipKey.save")}}</v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script lang="ts">
+import {Component, Prop, Watch, Vue} from 'vue-property-decorator'
+import {MetatypeRelationshipKeyT, MetatypeRelationshipT} from "../api/types";
+
+@Component
+export default class EditMetatypeRelationshipKeyDialog extends Vue {
+  @Prop({required: true})
+  metatypeRelationship!: MetatypeRelationshipT;
+
+  @Prop({required: true})
+  metatypeRelationshipKey!: MetatypeRelationshipKeyT;
+
+  @Prop({required: false})
+  readonly icon!: boolean
+
+  errorMessage = ""
+  dialog = false
+  formValid = false
+  selectedMetatypeRelationshipKey: MetatypeRelationshipKeyT | null  = null
+  dataTypes = ["number", "date", "string", "boolean", "enumeration", "file"]
+  booleanOptions = [true, false]
+
+  @Watch('dialog', {immediate: true})
+  onDialogChange() {
+    if(this.dialog){
+      this.selectedMetatypeRelationshipKey = JSON.parse(JSON.stringify(this.metatypeRelationshipKey))
+
+      if(this.selectedMetatypeRelationshipKey && !this.selectedMetatypeRelationshipKey.validation) {
+        this.selectedMetatypeRelationshipKey.validation = {regex: "", min: 0, max: 0}
+      }
+    }
+  }
+
+  mounted() {
+    // have to do this to avoid mutating properties
+    this.selectedMetatypeRelationshipKey = JSON.parse(JSON.stringify(this.metatypeRelationshipKey))
+
+    if(this.selectedMetatypeRelationshipKey && !this.selectedMetatypeRelationshipKey.validation) {
+      this.selectedMetatypeRelationshipKey.validation = {regex: "", min: 0, max: 0}
+    }
+  }
+
+  editMetatypeKey() {
+    if(this.selectedMetatypeRelationshipKey) {
+      this.$client.updateMetatypeRelationshipKey(this.metatypeRelationship.container_id,this.metatypeRelationship.id, this.selectedMetatypeRelationshipKey?.id!, this.selectedMetatypeRelationshipKey)
+          .then(result => {
+            if(!result) {
+              this.errorMessage = this.$t('editMetatypeRelationshipKey.errorUpdatingAPI') as string
+            } else {
+              this.dialog = false
+              this.$emit('metatypeKeyEdited')
+            }
+          })
+          .catch(e => this.errorMessage = this.$t('editMetatypeRelationshipKey.errorUpdatingAPI') as string + e)
+    }
+  }
+}
+</script>
diff --git a/web_ui/src/components/editRelationshipPairDialog.vue b/web_ui/src/components/editRelationshipPairDialog.vue
new file mode 100644
index 000000000..490e32346
--- /dev/null
+++ b/web_ui/src/components/editRelationshipPairDialog.vue
@@ -0,0 +1,176 @@
+<template>
+  <v-dialog v-model="dialog" max-width="60%">
+    <template v-slot:activator="{ on }">
+      <v-icon
+          v-if="icon"
+          small
+          class="mr-2"
+          v-on="on"
+      >mdi-pencil</v-icon>
+      <v-btn v-if="!icon" color="primary" dark class="mb-2" v-on="on">{{$t("editMetatypeRelationshipPair.editMetatypeRelationshipPair")}}</v-btn>
+    </template>
+    <v-card>
+      <v-card-title>
+        <span class="headline">{{$t("editMetatypeRelationshipPair.formTitle")}}</span>
+        <error-banner :message="errorMessage"></error-banner>
+      </v-card-title>
+
+      <v-card-text>
+        <v-container v-if="selectedPair">
+          <v-row>
+            <v-col :cols="12">
+
+              <v-form
+                  ref="form"
+                  v-model="valid"
+              >
+                <v-text-field
+                    v-model="selectedPair.name"
+                    :rules="[v => !!v || $t('editMetatypeRelationshipPair.originRequired')]"
+                    required
+                >
+                  <template v-slot:label>{{$t('editMetatypeRelationshipPair.name')}} <small style="color:red" >*</small></template>
+                </v-text-field>
+                <v-textarea
+                    v-model="selectedPair.description"
+                    :rules="[v => !!v || $t('editMetatypeRelationshipPair.originRequired')]"
+                >
+                  <template v-slot:label>{{$t('editMetatypeRelationshipPair.description')}} <small style="color:red" >*</small></template>
+                </v-textarea>
+                <v-autocomplete
+                    v-model="selectedPair.origin_metatype_id"
+                    :rules="[v => !!v || $t('editMetatypeRelationshipPair.originRequired')]"
+                    :single-line="false"
+                    :items="originMetatypes"
+                    :search-input.sync="originSearch"
+                    item-text="name"
+                    item-value="id"
+                    persistent-hint
+                    required
+                >
+                  <template v-slot:label>{{$t('editMetatypeRelationshipPair.originMetatype')}} <small style="color:red" >*</small></template>
+                </v-autocomplete>
+                <v-autocomplete
+                    v-model="selectedPair.relationship_id"
+                    :rules="[v => !!v || $t('editMetatypeRelationshipPair.relationshipRequired')]"
+                    :single-line="false"
+                    :items="metatypeRelationships"
+                    :search-input.sync="relationshipSearch"
+                    item-text="name"
+                    item-value="id"
+                    persistent-hint
+                    required
+                >
+                  <template v-slot:label>{{$t('editMetatypeRelationshipPair.relationship')}} <small style="color:red" >*</small></template>
+                </v-autocomplete>
+                <v-autocomplete
+                    v-model="selectedPair.destination_metatype_id"
+                    :rules="[v => !!v || $t('editMetatypeRelationshipPair.destinationRequired')]"
+                    :single-line="false"
+                    :items="destinationMetatypes"
+                    :search-input.sync="destinationSearch"
+                    item-text="name"
+                    item-value="id"
+                    persistent-hint
+                    required
+                >
+                  <template v-slot:label>{{$t('editMetatypeRelationshipPair.destinationMetatype')}} <small style="color:red" >*</small></template>
+                </v-autocomplete>
+                <v-select
+                    v-model="selectedPair.relationship_type"
+                    :rules="[v => !!v || $t('editMetatypeRelationshipPair.relationshipTypeRequired')]"
+                    :items="relationshipTypeChoices"
+                    required
+                >
+                  <template v-slot:label>{{$t('editMetatypeRelationshipPair.relationshipType')}} <small style="color:red" >*</small></template>
+                </v-select>
+              </v-form>
+              <p><span style="color:red">*</span> = {{$t('editMetatypeRelationshipPair.requiredField')}}</p>
+            </v-col>
+          </v-row>
+        </v-container>
+      </v-card-text>
+      <v-card-actions>
+        <v-spacer></v-spacer>
+        <v-btn color="blue darken-1" text @click="dialog = false" >{{$t("editMetatypeRelationshipPair.cancel")}}</v-btn>
+        <v-btn color="blue darken-1" text :disabled="!valid" @click="editRelationshipPair()">{{$t("editMetatypeRelationshipPair.save")}}</v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script lang="ts">
+import {Component, Prop, Watch, Vue} from 'vue-property-decorator'
+import {MetatypeRelationshipPairT, MetatypeRelationshipT, MetatypeT} from "@/api/types";
+
+@Component
+export default class EditRelationshipPairDialog extends Vue {
+  @Prop({required: true})
+  pair!: MetatypeRelationshipPairT;
+
+  @Prop({required: false})
+  readonly icon!: boolean
+
+  errorMessage = ""
+  dialog = false
+  valid = false
+  destinationSearch = ""
+  originSearch = ""
+  relationshipSearch = ""
+  relationshipTypeChoices = ["many:many", "one:one", "one:many", "many:one"]
+  selectedPair: MetatypeRelationshipPairT | null = null
+  originMetatypes: MetatypeT[] = []
+  destinationMetatypes: MetatypeT[] = []
+  metatypeRelationships: MetatypeRelationshipT[] = []
+
+  @Watch('destinationSearch', {immediate: true})
+  onDestinationSearchChange(newVal: string) {
+    this.$client.listMetatypes(this.pair.container_id, {name: newVal})
+        .then((metatypes) => {
+          this.destinationMetatypes = metatypes as MetatypeT[]
+        })
+        .catch((e: any) => this.errorMessage = e)
+  }
+
+  @Watch('originSearch', {immediate: true})
+  onOriginSearchChange(newVal: string) {
+    this.$client.listMetatypes(this.pair.container_id, {name: newVal})
+        .then((metatypes) => {
+          this.originMetatypes = metatypes as MetatypeT[]
+        })
+        .catch((e: any) => this.errorMessage = e)
+  }
+
+  @Watch('relationshipSearch', {immediate: true})
+  relationshipSearchChange(newVal: string) {
+    this.$client.listMetatypeRelationships(this.pair.container_id,  {name: newVal})
+        .then(metatypeRelationships => {
+          this.metatypeRelationships = metatypeRelationships as MetatypeRelationshipT[]
+        })
+        .catch(e => this.errorMessage = e)
+  }
+
+  mounted() {
+    // have to do this to avoid mutating properties
+    this.selectedPair = JSON.parse(JSON.stringify(this.pair))
+  }
+
+  editRelationshipPair() {
+    this.$client.updateMetatypeRelationshipPair(this.pair.container_id,
+        this.pair.id,
+        {"name": this.selectedPair!.name,
+          "description": this.selectedPair!.description,
+          "origin_metatype_id": this.selectedPair!.origin_metatype_id,
+          "destination_metatype_id": this.selectedPair!.destination_metatype_id,
+          "relationship_id": this.selectedPair!.relationship_id,
+          "relationship_type": this.selectedPair!.relationship_type}
+    )
+        .then(() => {
+          this.dialog = false
+          this.$emit('pairEdited')
+        })
+        .catch(e => this.errorMessage = this.$t('editMetatypeRelationshipPair.errorEditingAPI') as string + e)
+  }
+}
+
+</script>
diff --git a/web_ui/src/components/newContainerDialog.vue b/web_ui/src/components/newContainerDialog.vue
index 1ac32958c..a6d3d3e3a 100644
--- a/web_ui/src/components/newContainerDialog.vue
+++ b/web_ui/src/components/newContainerDialog.vue
@@ -65,11 +65,8 @@
 
 <script lang="ts">
    import {Component, Vue} from 'vue-property-decorator'
-   import InfoTooltip from "@/components/infoTooltip.vue";
 
-    @Component({components: {
-      InfoTooltip
-      }})
+    @Component
     export default class NewContainerDialog extends Vue {
         errorMessage = ""
         loading = false
diff --git a/web_ui/src/components/transformationDialog.vue b/web_ui/src/components/transformationDialog.vue
index 34f6fae74..760cf20c0 100644
--- a/web_ui/src/components/transformationDialog.vue
+++ b/web_ui/src/components/transformationDialog.vue
@@ -403,6 +403,7 @@
                 {{$t("dataMapping.reset")}}
               </v-btn>
 
+              <p><span style="color:red">*</span> = {{$t('dataMapping.requiredField')}}</p>
             </v-form>
           </v-col>
 
@@ -424,7 +425,6 @@
 
 <script lang="ts">
 import {Component, Prop, Vue, Watch} from 'vue-property-decorator'
-import InfoTooltip from "@/components/infoTooltip.vue";
 import {
   MetatypeKeyT,
   MetatypeRelationshipKeyT,
@@ -442,9 +442,6 @@ import {getNestedValue} from "@/utilities";
     pretty: function(value: any) {
       return JSON.stringify(value, null, 2)
     }
-  },
-  components: {
-    InfoTooltip
   }})
 export default class TransformationDialog extends Vue {
   @Prop({required: true})
diff --git a/web_ui/src/main.ts b/web_ui/src/main.ts
index cd7c84fb3..8db312278 100644
--- a/web_ui/src/main.ts
+++ b/web_ui/src/main.ts
@@ -12,6 +12,7 @@ import ClientPlugin  from "@/api/client";
 import Config from "@/config";
 import ErrorBanner from "@/components/errorBanner.vue";
 import SuccessBanner from "@/components/successBanner.vue";
+import InfoTooltip from "@/components/infoTooltip.vue";
 
 Vue.config.productionTip = false;
 Vue.use(ElementUI);
@@ -36,6 +37,7 @@ Vue.use(AuthPlugin)
 // register our error handling banner for use across the whole app
 Vue.component('error-banner', ErrorBanner)
 Vue.component('success-banner', SuccessBanner)
+Vue.component('info-tooltip', InfoTooltip)
 
 new Vue({
   i18n,
diff --git a/web_ui/src/translations.ts b/web_ui/src/translations.ts
index 2c9a7c660..957d7b3a0 100644
--- a/web_ui/src/translations.ts
+++ b/web_ui/src/translations.ts
@@ -47,12 +47,226 @@ export default {
       create: "Create",
       formTitle: "New Metatype",
       name: "Name",
+      nameRequired: "name required",
       description: "Description",
+      descriptionRequired: "description required",
       actions: "Actions",
       searchName: "Search Name",
-      searchDescription: "Search Description"
+      searchDescription: "Search Description",
+      metatypeSuccessfullyCreated: "Metatype created successfully"
+    },
+    editMetatype: {
+      editMetatype: "Edit Metatype",
+      edit: "Edit",
+      name: "Name",
+      nameRequired: "name required",
+      description: "Description",
+      descriptionRequired: "description required",
+      save: "Save",
+      cancel: "Cancel",
+      errorUpdatingAPI: "Error communicating with Deep Lynx:",
+      keys: "Properties",
+      actions: "Actions",
+      keyName: "Name",
+      keyDescription: "Description",
+      keyType: "Data Type",
+      keyActions: "Actions",
+      requiredField: "Required Field"
+    },
+    editMetatypeRelationship: {
+      editMetatypeRelationship: "Edit Metatype Relationship",
+      edit: "Edit",
+      name: "Name",
+      nameRequired: "name required",
+      descriptionRequired: "description required",
+      description: "Description",
+      save: "Save",
+      cancel: "Cancel",
+      errorUpdatingAPI: "Error communicating with Deep Lynx:",
+      keys: "Properties",
+      actions: "Actions",
+      keyName: "Name",
+      keyDescription: "Description",
+      keyType: "Data Type",
+      keyActions: "Actions",
+      requiredField: "Required Field"
+    },
+    editMetatypeKey: {
+      edit: "Edit",
+      name: "Name",
+      nameRequired: "name required",
+      propertyNameRequired: "property name required",
+      dataTypeRequired: "data type required",
+      descriptionRequired: "description required",
+      propertyName: "Property Name",
+      propertyNameHelp: "JSON compatible property name",
+      description: "Description",
+      dataType: "Data Type",
+      required: "Required",
+      requiredSmall: "required",
+      validation: "Validation",
+      regex: "Regular Expression",
+      regexHelp: "Enter a valid regular expression for matching against future value",
+      max: "Max",
+      maxHelp: "Maximum matches",
+      min: "Min",
+      minHelp: "Minimum matches",
+      defaultValue: "Default Value",
+      options: "Options",
+      save: "Save",
+      cancel: "Cancel",
+      errorUpdatingAPI: "Error communicating with Deep Lynx:",
+      requiredField: "Required Field"
+    },
+    createMetatypeKey: {
+      newKey: "New Property",
+      name: "Name",
+      nameRequired: "name required",
+      propertyNameRequired: "property name required",
+      dataTypeRequired: "data type required",
+      descriptionRequired: "description required",
+      propertyName: "Property Name",
+      propertyNameHelp: "JSON compatible property name",
+      description: "Description",
+      dataType: "Data Type",
+      required: "Required",
+      requiredSmall: "required",
+      validation: "Validation",
+      regex: "Regular Expression",
+      regexHelp: "Enter a valid regular expression for matching against future value",
+      max: "Max",
+      maxHelp: "Maximum matches",
+      min: "Min",
+      minHelp: "Minimum matches",
+      defaultValue: "Default Value",
+      options: "Options",
+      create: "Create",
+      cancel: "Cancel",
+      errorUpdatingAPI: "Error communicating with Deep Lynx:",
+      requiredField: "Required Field"
+    },
+    editMetatypeRelationshipKey: {
+      edit: "Edit",
+      name: "Name",
+      nameRequired: "name required",
+      propertyNameRequired: "property name required",
+      dataTypeRequired: "data type required",
+      descriptionRequired: "description required",
+      propertyName: "Property Name",
+      propertyNameHelp: "JSON compatible property name",
+      description: "Description",
+      dataType: "Data Type",
+      required: "Required",
+      requiredSmall: "required",
+      validation: "Validation",
+      regex: "Regular Expression",
+      regexHelp: "Enter a valid regular expression for matching against future value",
+      max: "Max",
+      maxHelp: "Maximum matches",
+      min: "Min",
+      minHelp: "Minimum matches",
+      defaultValue: "Default Value",
+      options: "Options",
+      save: "Save",
+      cancel: "Cancel",
+      errorUpdatingAPI: "Error communicating with Deep Lynx:",
+      requiredField: "Required Field"
+    },
+    createMetatypeRelationshipKey: {
+      newKey: "New Property",
+      name: "Name",
+      nameRequired: "name required",
+      propertyNameRequired: "property name required",
+      dataTypeRequired: "data type required",
+      descriptionRequired: "description required",
+      propertyName: "Property Name",
+      propertyNameHelp: "JSON compatible property name",
+      description: "Description",
+      dataType: "Data Type",
+      required: "Required",
+      requiredSmall: "required",
+      validation: "Validation",
+      regex: "Regular Expression",
+      regexHelp: "Enter a valid regular expression for matching against future value",
+      max: "Max",
+      maxHelp: "Maximum matches",
+      min: "Min",
+      minHelp: "Minimum matches",
+      defaultValue: "Default Value",
+      options: "Options",
+      create: "Create",
+      cancel: "Cancel",
+      errorUpdatingAPI: "Error communicating with Deep Lynx:",
+      requiredField: "Required Field"
+    },
+    createMetatype: {
+      createMetatype: "Create Metatype",
+      newMetatype: "New Metatype",
+      name: "Name",
+      nameRequired: "name required",
+      description: "Description",
+      descriptionRequired: "description required",
+      save: "Save",
+      cancel: "Cancel",
+      errorCreatingAPI: "Error communicating with Deep Lynx:",
+      requiredField: "Required Field"
+    },
+    createMetatypeRelationship: {
+      createMetatypeRelationship: "Create Metatype Relationship",
+      newMetatypeRelationship: "New Metatype Relationship",
+      name: "Name",
+      nameRequired: "name required",
+      description: "Description",
+      descriptionRequired: "description required",
+      save: "Save",
+      cancel: "Cancel",
+      errorCreatingAPI: "Error communicating with Deep Lynx:",
+      requiredField: "Required Field"
+    },
+    createMetatypeRelationshipPair: {
+      createMetatypeRelationshipPair: "Create Metatype Relationship Pair",
+      formTitle: "New Metatype Relationship Pair",
+      name: "Name",
+      description: "Description",
+      nameRequired: "name required",
+      descriptionRequired: "description required",
+      originRequired: "origin metatype required",
+      relationshipRequired: "relationship required",
+      requiredSmall: "required",
+      originMetatype: "Origin Metatype",
+      relationship: "Relationship",
+      destinationMetatype: "Destination Metatype",
+      relationshipType: "RelationshipType",
+      cancel: "Cancel",
+      save: "Save",
+      relationshipTypeRequired: "relationship required",
+      destinationRequired: "destination metatype required",
+      errorCreatingAPI: "Error communicating with Deep Lynx:",
+      requiredField: "Required Field"
+    },
+    editMetatypeRelationshipPair: {
+      editMetatypeRelationshipPair: "Edit Metatype Relationship Pair",
+      formTitle: "Edit Metatype Relationship Pair",
+      name: "Name",
+      nameRequired: "name required",
+      descriptionRequired: "description required",
+      description: "Description",
+      requiredSmall: "required",
+      originMetatype: "Origin Metatype",
+      relationship: "Relationship",
+      destinationMetatype: "Destination Metatype",
+      relationshipType: "RelationshipType",
+      cancel: "Cancel",
+      save: "Save",
+      relationshipTypeRequired: "relationship required",
+      originRequired: "origin metatype required",
+      destinationRequired: "destination metatype required",
+      relationshipRequired: "relationship required",
+      errorEditingAPI: "Error communicating with Deep Lynx:",
+      requiredField: "Required Field"
     },
     metatypeRelationships: {
+      relationshipSuccessfullyCreated :"Metatype Relationship created successfully",
       metatypeRelationships: "Metatype Relationships",
       formTitle: "New Relationship",
       newRelationship: "New Relationship",
@@ -71,7 +285,8 @@ export default {
       searchDescription: "Search Description",
       originMetatype: "Search Origin Metatype",
       destinationMetatype: "Search Destination Metatype",
-      relationship: "Search Relationship"
+      relationship: "Search Relationship",
+      pairSuccessfullyCreated: "Successfully Created Metatype Relationship Pair"
     },
     dataSources: {
       create: "Create",
@@ -142,7 +357,8 @@ export default {
       typeToSearchRelationship:"Type to Search Available Metatype Relationship Pairs",
       enabled: "Enabled",
       createdAt: "Created At",
-      resultingTypes: "Resulting Metatype/Metatype Relationship"
+      resultingTypes: "Resulting Metatype/Metatype Relationship",
+      requiredField: "Required Field"
     },
     typeTransformation: {
       newTransformationButton:"Create New Transformation",
@@ -180,14 +396,14 @@ export default {
       confirmPassword: "Confirm New Password"
     },
     containers: {
-     title: "Manage Containers",
-     name: "Name",
-     description: "Description",
-     newContainerButton: "Create New Container",
-     actions: "Actions",
-     formTitle: "Create New Container",
-     owlUrlHelp: "A URL to an .owl file - used to auto-populate the ontology",
-     owlFileHelp: "An .owl file - used to auto-populate the ontology"
+      title: "Manage Containers",
+      name: "Name",
+      description: "Description",
+      newContainerButton: "Create New Container",
+      actions: "Actions",
+      formTitle: "Create New Container",
+      owlUrlHelp: "A URL to an .owl file - used to auto-populate the ontology",
+      owlFileHelp: "An .owl file - used to auto-populate the ontology"
     },
     containerSelect: {
       continue: "Continue",
diff --git a/web_ui/src/views/DataImports.vue b/web_ui/src/views/DataImports.vue
index bd1a5cf3a..fcc968b3d 100644
--- a/web_ui/src/views/DataImports.vue
+++ b/web_ui/src/views/DataImports.vue
@@ -32,7 +32,7 @@
             <import-data-dialog
                 :dataSourceID="selectedDataSource.id"
                 :containerID="containerID"
-                @importUploaded="listImports">
+                @importUploaded="listImports()">
             </import-data-dialog>
           </v-col>
 
@@ -297,8 +297,9 @@ export default class DataImports extends Vue {
         sortDesc: sortDescParam
       })
           .then(imports => {
-            this.imports = imports
             this.importsLoading = false
+            this.imports = imports
+            this.$forceUpdate()
           })
           .catch(e => this.errorMessage = e)
     }
@@ -309,7 +310,7 @@ export default class DataImports extends Vue {
         .then(dataSources => {
           this.dataSources = dataSources
         })
-        .catch(e => console.log(e))
+        .catch(e => this.errorMessage = e)
   }
 
   deleteItem(importT: ImportT) {
diff --git a/web_ui/src/views/DataMapping.vue b/web_ui/src/views/DataMapping.vue
index cbf3ca386..12fea971c 100644
--- a/web_ui/src/views/DataMapping.vue
+++ b/web_ui/src/views/DataMapping.vue
@@ -251,7 +251,6 @@
 <script lang="ts">
 import {Component, Prop, Vue, Watch} from 'vue-property-decorator'
 import {DataSourceT, MetatypeRelationshipPairT, MetatypeT, TypeMappingT} from "@/api/types";
-import InfoTooltip from "@/components/infoTooltip.vue";
 import DataTypeMapping from "@/components/dataTypeMapping.vue"
 
 @Component({filters: {
@@ -260,8 +259,7 @@ import DataTypeMapping from "@/components/dataTypeMapping.vue"
             }
         },
         components: {
-           DataTypeMapping,
-           InfoTooltip
+           DataTypeMapping
     }})
     export default class DataMapping extends Vue {
       @Prop({required: true})
diff --git a/web_ui/src/views/MetatypeRelationshipPairs.vue b/web_ui/src/views/MetatypeRelationshipPairs.vue
index 9c8022701..35fad62fb 100644
--- a/web_ui/src/views/MetatypeRelationshipPairs.vue
+++ b/web_ui/src/views/MetatypeRelationshipPairs.vue
@@ -15,6 +15,12 @@
       <template v-slot:top>
         <error-banner :message="errorMessage"></error-banner>
         <success-banner :message="successMessage"></success-banner>
+        <v-alert type="success" v-if="createdMetatypeRelationshipPair">
+          {{$t('metatypeRelationshipPairs.pairSuccessfullyCreated')}} -
+          <span>
+            <edit-metatype-relationship-pair-dialog :pair="createdMetatypeRelationshipPair"></edit-metatype-relationship-pair-dialog>
+          </span>
+        </v-alert>
         <v-toolbar flat color="white">
           <v-toolbar-title>{{$t("home.metatypeRelationshipPairs")}}</v-toolbar-title>
           <v-divider
@@ -23,80 +29,7 @@
               vertical
           ></v-divider>
           <v-spacer></v-spacer>
-          <v-dialog v-model="dialog" max-width="500px">
-            <template v-slot:activator="{ on }">
-              <v-btn color="primary" dark class="mb-2" v-on="on">{{$t("metatypeRelationshipPairs.formTitle")}}</v-btn>
-            </template>
-            <v-card>
-              <v-card-title>
-                <span class="headline">{{$t("metatypeRelationshipPairs.formTitle")}}</span>
-              </v-card-title>
-
-              <v-card-text>
-                <v-container>
-                  <v-row>
-                    <v-col :cols="12">
-
-                      <v-form
-                          ref="form"
-                          v-model="valid"
-                          lazy-validation
-                      >
-                        <v-text-field
-                            v-model="name"
-                            label="Name"
-                            required
-                        ></v-text-field>
-                        <v-textarea
-                            v-model="description"
-                            label="Description"
-                        ></v-textarea>
-                        <v-autocomplete
-                            v-model="originSelect"
-                            :label="$t('metatypeRelationshipPairs.originMetatype')"
-                            :single-line="false"
-                            :items="originMetatypes"
-                            :search-input.sync="originSearch"
-                            item-text="name"
-                            item-value="id"
-                            persistent-hint
-                            required
-                        ></v-autocomplete>
-                        <v-autocomplete
-                            v-model="relationshipType"
-                            :label="$t('metatypeRelationshipPairs.relationship')"
-                            :single-line="false"
-                            :items="metatypeRelationships"
-                            :search-input.sync="relationshipSearch"
-                            item-text="name"
-                            item-value="id"
-                            persistent-hint
-                            required
-                        ></v-autocomplete>
-                        <v-autocomplete
-                            v-model="destinationSelect"
-                            :label="$t('metatypeRelationshipPairs.destinationMetatype')"
-                            :single-line="false"
-                            :items="destinationMetatypes"
-                            :search-input.sync="destinationSearch"
-                            item-text="name"
-                            item-value="id"
-                            persistent-hint
-                            required
-                        ></v-autocomplete>
-                      </v-form>
-                    </v-col>
-                  </v-row>
-                </v-container>
-              </v-card-text>
-
-              <v-card-actions>
-                <v-spacer></v-spacer>
-                <v-btn color="blue darken-1" text @click="dialog = false" >{{$t("home.cancel")}}</v-btn>
-                <v-btn color="blue darken-1" text @click="newRelationshipPair()">{{$t("home.save")}}</v-btn>
-              </v-card-actions>
-            </v-card>
-          </v-dialog>
+          <create-relationship-pair-dialog :containerID="containerID" @pairCreated="recentlyCreatedPair"></create-relationship-pair-dialog>
         </v-toolbar>
         <v-row>
           <v-col :cols="6">
@@ -108,13 +41,7 @@
         </v-row>
       </template>
       <template v-slot:[`item.actions`]="{ item }">
-        <v-icon
-            small
-            class="mr-2"
-            @click="enableRelationshipEdit(item)"
-        >
-          mdi-pencil
-        </v-icon>
+        <edit-relationship-pair-dialog :pair="item" :icon="true" @pairEdited="loadMetatypeRelationshipPairs()"></edit-relationship-pair-dialog>
         <v-icon
             small
             @click="deleteRelationship(item)"
@@ -123,123 +50,34 @@
         </v-icon>
       </template>
     </v-data-table>
-    <v-dialog v-model="editDialog" max-width="500px">
-
-      <v-card>
-        <v-card-title>
-          <span class="headline">Edit {{selectedRelationshipPair.name}}</span>
-        </v-card-title>
-
-        <v-card-text>
-          <v-container>
-            <v-row>
-              <v-col :cols="12">
-
-                <v-form
-                    ref="form"
-                    v-model="valid"
-                    lazy-validation
-                >
-                  <v-text-field
-                      v-model="selectedRelationshipPair.name"
-                      label="Name"
-                      required
-                  ></v-text-field>
-                  <v-textarea
-                      v-model="selectedRelationshipPair.description"
-                      label="Description"
-                  ></v-textarea>
-                  <v-autocomplete
-                      v-model="selectedRelationshipPair.origin_metatype_id"
-                      :label="$t('metatypeRelationshipPairs.originMetatype')"
-                      :items="originMetatypes"
-                      :search-input.sync="originSearch"
-                      :single-line="false"
-                      item-text="name"
-                      item-value="id"
-                      persistent-hint
-                      required
-                  ></v-autocomplete>
-                  <v-autocomplete
-                      v-model="selectedRelationshipPair.relationship_id"
-                      :label="$t('metatypeRelationshipPairs.relationship')"
-                      :items="metatypeRelationships"
-                      item-text="name"
-                      item-value="id"
-                      persistent-hint
-                      single-line
-                      required
-                  ></v-autocomplete>
-                  <v-autocomplete
-                      v-model="selectedRelationshipPair.destination_metatype_id"
-                      :label="$t('metatypeRelationshipPairs.relationship')"
-                      :single-line="false"
-                      :items="destinationMetatypes"
-                      :search-input.sync="destinationSearch"
-                      item-text="name"
-                      item-value="id"
-                      persistent-hint
-                      required
-                  ></v-autocomplete>
-                </v-form>
-              </v-col>
-            </v-row>
-          </v-container>
-        </v-card-text>
-
-        <v-card-actions>
-          <v-spacer></v-spacer>
-          <v-btn color="blue darken-1" text @click="editDialog = false" >{{$t("home.cancel")}}</v-btn>
-          <v-btn color="blue darken-1" text @click="editRelationship()">{{$t("home.save")}}</v-btn>
-        </v-card-actions>
-      </v-card>
-    </v-dialog>
   </div>
 </template>
 
 <script lang="ts">
 import {Component, Prop, Vue, Watch} from 'vue-property-decorator'
 import { MetatypeT, MetatypeRelationshipT, MetatypeRelationshipPairT } from '@/api/types';
+import CreateRelationshipPairDialog from "@/components/createRelationshipPairDialog.vue";
+import EditRelationshipPairDialog from "@/components/editRelationshipPairDialog.vue";
 
-@Component
+@Component({components: {
+  CreateRelationshipPairDialog,
+  EditRelationshipPairDialog
+  }})
 export default class MetatypeRelationshipPairs extends Vue {
   @Prop({required: true})
   readonly containerID!: string;
 
-
   errorMessage = ""
   successMessage = ""
   loading = false
-  dialog= false
-  editDialog= false
-  destinationSearch = ""
-  originSearch = ""
-  relationshipSearch = ""
   relationshipPairCount = 0
-  originMetatypes: MetatypeT[] = []
-  destinationMetatypes: MetatypeT[] = []
   metatypeRelationships: MetatypeRelationshipT[] = []
   relationshipPairs: MetatypeRelationshipPairT[] = []
-  selectedRelationshipPair: MetatypeRelationshipPairT = {
-    id: "",
-    container_id: this.containerID,
-    name: "",
-    description: "",
-    relationship_id: "",
-    origin_metatype_id: "",
-    destination_metatype_id: "",
-    relationship_type: "many:many",
-    created_at: "",
-    modified_at: "",
-    created_by: "",
-    modified_by: ""
-  }
-  valid = null
+  createdMetatypeRelationshipPair: MetatypeRelationshipPairT | null = null
+
   name = ""
   description =  ""
-  originSelect = ""
-  destinationSelect = ""
-  relationshipType = ""
+
   options: {
     sortDesc: boolean[];
     sortBy: string[];
@@ -265,33 +103,6 @@ export default class MetatypeRelationshipPairs extends Vue {
     this.loadMetatypeRelationshipPairs()
   }
 
-  @Watch('destinationSearch', {immediate: true})
-  onDestinationSearchChange(newVal: string) {
-    this.$client.listMetatypes(this.containerID, {name: newVal})
-        .then((metatypes) => {
-          this.destinationMetatypes = metatypes as MetatypeT[]
-        })
-        .catch((e: any) => this.errorMessage = e)
-  }
-
-  @Watch('originSearch', {immediate: true})
-  onOriginSearchChange(newVal: string) {
-    this.$client.listMetatypes(this.containerID, {name: newVal})
-        .then((metatypes) => {
-          this.originMetatypes = metatypes as MetatypeT[]
-        })
-        .catch((e: any) => this.errorMessage = e)
-  }
-
-  @Watch('relationshipSearch', {immediate: true})
-  relationshipSearchChange(newVal: string) {
-    this.$client.listMetatypeRelationships(this.containerID,  {name: newVal})
-        .then(metatypeRelationships => {
-          this.metatypeRelationships = metatypeRelationships as MetatypeRelationshipT[]
-        })
-        .catch(e => this.errorMessage = e)
-  }
-
   mounted() {
     this.countRelationshipPairs()
   }
@@ -343,45 +154,6 @@ export default class MetatypeRelationshipPairs extends Vue {
         .catch((e: any) => this.errorMessage = e)
   }
 
-  refreshMetatypeRelationships() {
-    this.$client.listMetatypeRelationships(this.containerID,  {limit: 1000, offset: 0})
-        .then(metatypeRelationships => {
-          this.metatypeRelationships = metatypeRelationships as MetatypeRelationshipT[]
-        })
-        .catch(e => this.errorMessage = e)
-  }
-
-  newRelationshipPair() {
-    this.$client.createMetatypeRelationshipPair(this.containerID,
-        {"name": this.name,
-          "description": this.description,
-          "origin_metatype_id": this.originSelect,
-          "destination_metatype_id": this.destinationSelect,
-          "relationship_id": this.relationshipType,
-          "relationship_type": "many:many"}
-    )
-    this.dialog = false
-    this.name =  ""
-    this.description = ""
-    this.loadMetatypeRelationshipPairs()
-  }
-
-  enableRelationshipEdit(item: any) {
-    this.editDialog = true
-    this.selectedRelationshipPair = item
-  }
-
-  editRelationship() {
-    this.$client.updateMetatypeRelationshipPair(this.containerID, this.selectedRelationshipPair.id,
-        {"name": this.selectedRelationshipPair.name,
-          "description": this.selectedRelationshipPair.description,
-          "origin_metatype_id": this.selectedRelationshipPair.origin_metatype_id,
-          "destination_metatype_id": this.selectedRelationshipPair.destination_metatype_id,
-          "relationship_id": this.selectedRelationshipPair.relationship_id}
-    )
-    this.editDialog = false
-  }
-
   deleteRelationship(item: any) {
     this.$client.deleteMetatypeRelationshipPair(this.containerID, item.id)
         .then(() => {
@@ -389,5 +161,11 @@ export default class MetatypeRelationshipPairs extends Vue {
         })
         .catch(e => this.errorMessage = e)
   }
+
+  recentlyCreatedPair(pair: MetatypeRelationshipPairT) {
+    this.createdMetatypeRelationshipPair = pair
+    this.countRelationshipPairs()
+    this.loadMetatypeRelationshipPairs()
+  }
 }
 </script>
diff --git a/web_ui/src/views/MetatypeRelationships.vue b/web_ui/src/views/MetatypeRelationships.vue
index 82b58bdf3..33ee2deff 100644
--- a/web_ui/src/views/MetatypeRelationships.vue
+++ b/web_ui/src/views/MetatypeRelationships.vue
@@ -7,6 +7,7 @@
         :options.sync="options"
         :loading="loading"
         :items-per-page="100"
+        :item-key="id"
         :footer-props="{
           'items-per-page-options': [25, 50, 100]
         }"
@@ -15,6 +16,12 @@
       <template v-slot:top>
         <error-banner :message="errorMessage"></error-banner>
         <success-banner :message="successMessage"></success-banner>
+        <v-alert type="success" v-if="createdRelationship">
+          {{$t('metatypeRelationships.metatypeSuccessfullyCreated')}} -
+          <span>
+            <edit-metatype-relationship-dialog :metatypeRelationship="createdRelationship"></edit-metatype-relationship-dialog>
+          </span>
+        </v-alert>
         <v-toolbar flat color="white">
           <v-toolbar-title>{{$t('metatypeRelationships.metatypeRelationships')}}</v-toolbar-title>
           <v-divider
@@ -23,47 +30,7 @@
               vertical
           ></v-divider>
           <v-spacer></v-spacer>
-          <v-dialog v-model="dialog" max-width="500px">
-            <template v-slot:activator="{ on }">
-              <v-btn color="primary" dark class="mb-2" v-on="on">{{$t('metatypeRelationships.newRelationship')}}</v-btn>
-            </template>
-            <v-card>
-              <v-card-title>
-                <span class="headline">{{$t("metatypeRelationships.formTitle")}}</span>
-              </v-card-title>
-
-              <v-card-text>
-                <v-container>
-                  <v-row>
-                    <v-col :cols="12">
-
-                      <v-form
-                          ref="form"
-                          v-model="valid"
-                          lazy-validation
-                      >
-                        <v-text-field
-                            v-model="name"
-                            label="Name"
-                            required
-                        ></v-text-field>
-                        <v-textarea
-                            v-model="description"
-                            label="Description"
-                        ></v-textarea>
-                      </v-form>
-                    </v-col>
-                  </v-row>
-                </v-container>
-              </v-card-text>
-
-              <v-card-actions>
-                <v-spacer></v-spacer>
-                <v-btn color="blue darken-1" text @click="dialog = false" >{{$t("home.cancel")}}</v-btn>
-                <v-btn color="blue darken-1" text @click="newMetatypeRelationship()">{{$t("home.save")}}</v-btn>
-              </v-card-actions>
-            </v-card>
-          </v-dialog>
+          <create-metatype-relationship-dialog :containerID="containerID" @metatypeRelationshipCreated="recentlyCreatedRelationship"></create-metatype-relationship-dialog>
         </v-toolbar>
         <v-row>
           <v-col :cols="6">
@@ -75,13 +42,7 @@
         </v-row>
       </template>
       <template v-slot:[`item.actions`]="{ item }">
-        <v-icon
-            small
-            class="mr-2"
-            @click="enableMetatypeRelationshipEdit(item)"
-        >
-          mdi-pencil
-        </v-icon>
+        <edit-metatype-relationship-dialog :metatypeRelationship="item" :icon="true" @metatypeRelationshipEdited="loadMetatypeRelationships"></edit-metatype-relationship-dialog>
         <v-icon
             small
             @click="deleteRelationship(item)"
@@ -90,77 +51,29 @@
         </v-icon>
       </template>
     </v-data-table>
-    <v-dialog v-model="editDialog" max-width="500px">
-
-      <v-card>
-        <v-card-title>
-          <span class="headline">Edit {{selectedRelationship.name}}</span>
-        </v-card-title>
-
-        <v-card-text>
-          <v-container>
-            <v-row>
-              <v-col :cols="12">
-
-                <v-form
-                    ref="form"
-                    v-model="valid"
-                    lazy-validation
-                >
-                  <v-text-field
-                      v-model="selectedRelationship.name"
-                      label="Name"
-                      required
-                  ></v-text-field>
-                  <v-textarea
-                      v-model="selectedRelationship.description"
-                      label="Description"
-                  ></v-textarea>
-
-                </v-form>
-              </v-col>
-            </v-row>
-          </v-container>
-        </v-card-text>
-
-        <v-card-actions>
-          <v-spacer></v-spacer>
-          <v-btn color="blue darken-1" text @click="editDialog = false" >{{$t("home.cancel")}}</v-btn>
-          <v-btn color="blue darken-1" text @click="editMetatypeRelationship()">{{$t("home.save")}}</v-btn>
-        </v-card-actions>
-      </v-card>
-    </v-dialog>
   </div>
 </template>
 
 <script lang="ts">
 import {MetatypeRelationshipT} from '@/api/types';
 import {Component, Prop, Vue, Watch} from 'vue-property-decorator'
+import EditMetatypeRelationshipDialog from "@/components/editMetatypeRelationshipDialog.vue";
+import CreateMetatypeRelationshipDialog from "@/components/createMetatypeRelationshipDialog.vue";
 
-@Component
+@Component({components: {
+    EditMetatypeRelationshipDialog,
+    CreateMetatypeRelationshipDialog
+  }})
 export default class MetatypeRelationships extends Vue {
   @Prop({required: true})
   readonly containerID!: string;
 
   errorMessage = ""
   successMessage = ""
-  dialog= false
-  editDialog= false
-  valid = null
   loading = false
   metatypeRelationships: MetatypeRelationshipT[] = []
+  createdRelationship: MetatypeRelationshipT | null = null
   metatypeRelationshipCount = 0
-  selectedRelationship: MetatypeRelationshipT = {
-    id: "",
-    container_id: this.containerID,
-    name: "",
-    properties: [],
-    description: "",
-    created_at: "",
-    modified_at: "",
-    created_by: "",
-    modified_by: ""
-  }
   name = ""
   description = ""
   options: {
@@ -233,32 +146,13 @@ export default class MetatypeRelationships extends Vue {
       description: (this.description !== "") ? this.description : undefined,
     })
         .then((results) => {
-          this.metatypeRelationships = results as MetatypeRelationshipT[]
           this.loading = false
+          this.metatypeRelationships = results as MetatypeRelationshipT[]
+          this.$forceUpdate()
         })
         .catch((e: any) => this.errorMessage = e)
   }
 
-
-  newMetatypeRelationship() {
-    this.$client.createMetatypeRelationship(this.containerID, {"name": this.name, "description": this.description})
-    this.loadMetatypeRelationships()
-    this.dialog = false
-    this.name = ""
-    this.description = ""
-  }
-
-  enableMetatypeRelationshipEdit(item: any) {
-    this.editDialog = true
-    this.selectedRelationship = item
-  }
-
-  editMetatypeRelationship() {
-    this.$client.updateMetatypeRelationship(this.containerID, this.selectedRelationship.id,
-        {"name": this.selectedRelationship.name, "description": this.selectedRelationship.description})
-    this.editDialog = false
-  }
-
   deleteRelationship(item: any) {
     this.$client.deleteMetatypeRelationship(this.containerID, item.id)
         .then(() => {
@@ -266,5 +160,11 @@ export default class MetatypeRelationships extends Vue {
         })
         .catch(e => console.log(e))
   }
+
+  recentlyCreatedRelationship(relationship: MetatypeRelationshipT) {
+    this.createdRelationship = relationship
+    this.countRelationships()
+    this.loadMetatypeRelationships()
+  }
 }
 </script>
diff --git a/web_ui/src/views/Metatypes.vue b/web_ui/src/views/Metatypes.vue
index 7849cd567..4b1f8d448 100644
--- a/web_ui/src/views/Metatypes.vue
+++ b/web_ui/src/views/Metatypes.vue
@@ -10,12 +10,19 @@
         :footer-props="{
           'items-per-page-options': [25, 50, 100]
         }"
+        :item-key="id"
         class="elevation-1"
     >
 
       <template v-slot:top>
         <error-banner :message="errorMessage"></error-banner>
         <success-banner :message="successMessage"></success-banner>
+        <v-alert type="success" v-if="createdMetatype">
+          {{$t('metatypes.metatypeSuccessfullyCreated')}} -
+          <span>
+            <edit-metatype-dialog :metatype="createdMetatype"></edit-metatype-dialog>
+          </span>
+        </v-alert>
         <v-toolbar flat color="white">
           <v-toolbar-title>{{$t("metatypes.metatypes")}}</v-toolbar-title>
           <v-divider
@@ -24,47 +31,7 @@
               vertical
           ></v-divider>
           <v-spacer></v-spacer>
-          <v-dialog v-model="dialog" max-width="500px">
-            <template v-slot:activator="{ on }">
-              <v-btn color="primary" dark class="mb-2" v-on="on">{{$t("metatypes.formTitle")}}</v-btn>
-            </template>
-            <v-card>
-              <v-card-title>
-                <span class="headline">{{$t("metatypes.formTitle")}}</span>
-              </v-card-title>
-
-              <v-card-text>
-                <v-container>
-                  <v-row>
-                    <v-col :cols="12">
-
-                      <v-form
-                          ref="form"
-                          v-model="valid"
-                          lazy-validation
-                      >
-                        <v-text-field
-                            v-model="name"
-                            label="Name"
-                            required
-                        ></v-text-field>
-                        <v-textarea
-                            v-model="description"
-                            label="Description"
-                        ></v-textarea>
-                      </v-form>
-                    </v-col>
-                  </v-row>
-                </v-container>
-              </v-card-text>
-
-              <v-card-actions>
-                <v-spacer></v-spacer>
-                <v-btn color="blue darken-1" text @click="dialog = false" >{{$t("home.cancel")}}</v-btn>
-                <v-btn color="blue darken-1" text @click="newMetatype()">{{$t("home.save")}}</v-btn>
-              </v-card-actions>
-            </v-card>
-          </v-dialog>
+          <create-metatype-dialog :containerID="containerID" @metatypeCreated="recentlyCreatedMetatype"></create-metatype-dialog>
         </v-toolbar>
         <v-row>
           <v-col :cols="6">
@@ -76,13 +43,7 @@
         </v-row>
       </template>
       <template v-slot:[`item.actions`]="{ item }">
-        <v-icon
-            small
-            class="mr-2"
-            @click="enableMetatypeEdit(item)"
-        >
-          mdi-pencil
-        </v-icon>
+        <edit-metatype-dialog :metatype="item" :icon="true" @metatypeEdited="loadMetatypes()"></edit-metatype-dialog>
         <v-icon
             small
             @click="deleteMetatype(item)"
@@ -91,77 +52,29 @@
         </v-icon>
       </template>
     </v-data-table>
-    <v-dialog v-model="editDialog" max-width="500px">
-
-      <v-card>
-        <v-card-title>
-          <span class="headline">Edit {{selectedMetatype.name}}</span>
-        </v-card-title>
-
-        <v-card-text>
-          <v-container>
-            <v-row>
-              <v-col :cols="12">
-
-                <v-form
-                    ref="form"
-                    v-model="valid"
-                    lazy-validation
-                >
-                  <v-text-field
-                      v-model="selectedMetatype.name"
-                      label="Name"
-                      required
-                  ></v-text-field>
-                  <v-textarea
-                      v-model="selectedMetatype.description"
-                      label="Description"
-                  ></v-textarea>
-
-                </v-form>
-              </v-col>
-            </v-row>
-          </v-container>
-        </v-card-text>
-
-        <v-card-actions>
-          <v-spacer></v-spacer>
-          <v-btn color="blue darken-1" text @click="editDialog = false" >{{$t("home.cancel")}}</v-btn>
-          <v-btn color="blue darken-1" text @click="editMetatype()">{{$t("home.save")}}</v-btn>
-        </v-card-actions>
-      </v-card>
-    </v-dialog>
   </div>
 </template>
 
 <script lang="ts">
 import {Component, Prop, Vue, Watch} from 'vue-property-decorator'
 import { MetatypeT } from '@/api/types';
+import EditMetatypeDialog from "@/components/editMetatypeDialog.vue";
+import CreateMetatypeDialog from "@/components/createMetatypeDialog.vue";
 
-@Component
+@Component({components: {
+    EditMetatypeDialog,
+    CreateMetatypeDialog
+  }})
 export default class Metatypes extends Vue {
   @Prop({required: true})
   readonly containerID!: string;
 
   errorMessage = ""
   successMessage = ""
-  dialog= false
-  editDialog= false
   metatypesLoading = false
   metatypes: MetatypeT[] = []
+  createdMetatype: MetatypeT | null = null
   metatypesCount = 0
-  selectedMetatype: MetatypeT = {
-    id: "",
-    container_id: this.containerID,
-    name: "",
-    properties: [],
-    description: "",
-    created_at: "",
-    modified_at: "",
-    created_by: "",
-    modified_by: ""
-  }
-  valid = null
   name = ""
   description = ""
   options: {
@@ -233,37 +146,25 @@ export default class Metatypes extends Vue {
       description: (this.description !== "") ? this.description : undefined,
     })
         .then((results) => {
-          this.metatypes = results as MetatypeT[]
           this.metatypesLoading = false
+          this.metatypes = results as MetatypeT[]
+          this.$forceUpdate()
         })
         .catch((e: any) => this.errorMessage = e)
   }
 
-
-  newMetatype() {
-    this.$client.createMetatype(this.containerID, {"name": this.name, "description": this.description})
-    this.dialog = false
-    this.name = ""
-    this.description = ""
-  }
-
-  enableMetatypeEdit(item: any) {
-    this.editDialog = true
-    this.selectedMetatype = item
-  }
-
-  editMetatype() {
-    this.$client.updateMetatype(this.containerID, this.selectedMetatype.id,
-        {"name": this.selectedMetatype.name, "description": this.selectedMetatype.description})
-    this.editDialog = false
-  }
-
   deleteMetatype(item: any) {
     this.$client.deleteMetatype(this.containerID, item.id)
         .then(() => {
           this.loadMetatypes()
         })
-        .catch(e => console.log(e))
+        .catch(e => this.errorMessage = e)
+  }
+
+  recentlyCreatedMetatype(metatype: MetatypeT) {
+    this.createdMetatype = metatype
+    this.countMetatypes()
+    this.loadMetatypes()
   }
 }
 </script>