added the string cbor option to the build vue

anms-ui/public/app/components/management/agents/Agents.vue

@@ -83,7 +83,7 @@
 
     <agents-manage-modal @close="showManageModal = false"
       :showModal="showManageModal"
-      :agents="selectedAgents"></agents-manage-modal>
+      :agents="selectedAgents" :cbor="cborString"></agents-manage-modal>
 
     <footer class="footer">
       <p>Amp Version: {{ info }}</p>
@@ -133,9 +133,17 @@ export default {
       showManageModal: false,
       agentInfo: null,
       selectAll: false,
+      cborString: undefined
     };
   },
+  props:{
+    cbor: {
+      type:String,
+      default:undefined
+    }
+  },
   mounted() {
+    this.cborString = this.cbor;
     const vm = this;
     vm.reloadAgents();
     api.methods

anms-ui/public/app/components/management/agents/AgentsManageModal.vue

@@ -34,7 +34,7 @@
             </b-button>
           </b-col>
           <b-col cols="9">
-            <build @updateResult="updateResults($event)"></build>
+            <build :cbor="cbor" @updateResult="updateResults($event)"></build>
           </b-col>
         </b-row>
       </div>
@@ -66,6 +66,10 @@ export default {
       type: Array,
       default: [],
     },
+    cbor: {
+      type: String,
+      default: undefined
+    }
   },
   watch: {
     showModal(newValue, _) {
@@ -82,7 +86,7 @@ export default {
       this.$emit("close");
       this.$refs['manageAgentModal'].hide();
       this.ariCBOR = undefined;
-      this.ariString - undefined;
+      this.ariString = undefined;
     },
     updateResults(result) {
       this.ariString = result;
@@ -96,11 +100,13 @@ export default {
           this.transcoderLogId = response.data.id;
           this.sendButtonText = "Transcoding ARI String";
           this.queryTranscoderLog();
+
         })
         .catch((error) => {
           console.error(error);
           toastr.error(error.response.data);
         });
+        
     },
     queryTranscoderLog() {
       api.methods

anms-ui/public/app/components/management/builder/ActionParameter.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <label>Actions:</label>
+    <label>ARIs:</label>
     <div>
       <b-form-group>
         <v-select v-model="ariKey"
@@ -15,7 +15,7 @@
         </v-select>
       </b-form-group>
 
-      <label v-if="ac.length">Selected Actions:</label>
+      <label v-if="ac.length">Selected ARIs:</label>
       <b-list-group>
         <b-list-group-item v-for="(curr, index) in ac"
           :key="index">

anms-ui/public/app/components/management/builder/Build.vue

@@ -1,14 +1,31 @@
 <template>
   <div>
     <h5>ARI Builder</h5>
-    <v-select v-model="ariKey"
-      label="display"
-      :options="ARIs"></v-select>
-
-    <ParameterView v-if="ariKey"
-      :ariKey="ariKey"
-      :ACs="ARIs"
-      @updateResult="updateResults($event)"></ParameterView>
+    <center>
+      Input Style(CBOR Input/ARI Builder)<br>
+      <toggle-button id="tButton" v-model="stringMode" :labels="{ checked: 'String Input', unchecked: 'ARI Builder' }"
+        :width="100" />
+    </center>
+    <div>
+      <div class="wrapper-next">
+        <template v-if="stringMode">
+          <label>Enter String to translate:</label>
+          <div class="input-group mb-3">
+            <input type="text" class="form-control" placeholder="ari:0x0" v-model="cborString"
+              v-on:keyup.enter="handleCbor($event.target.value)" />
+            <div class="input-group-append">
+              <b-button variant="info" class="btn btn-outline-secondary" type="button" @click="handleCbor(cborString)">
+                SUBMIT
+              </b-button>
+            </div>
+          </div>
+        </template>
+      </div>
+      <template v-if="!stringMode">
+        <v-select v-model="ariKey" label="display" :options="ARIs" ></v-select>
+        <ParameterView v-if="ariKey" :ariKey="ariKey" :ACs="ARIs" @updateResult="updateResults($event)"></ParameterView>
+      </template>
+    </div>
   </div>
 </template>
 <script>
@@ -22,19 +39,34 @@ export default {
     vSelect,
     ParameterView,
   },
+  props:{
+    cbor: {
+      type: String,
+      default: undefined
+    }
+  },
   data() {
     return {
       ariKey: undefined,
       parameters: undefined,
       finResultStr: undefined,
+      stringMode: false,
+      cborString: "",
     }
   },
+  mounted(){
+    this.cborString = this.cbor;
+  },
   computed: {
     ...mapGetters("build", {
       ARIs: "ARIs",
     })
   },
   methods: {
+    handleCbor(inputString) {
+      this.finResultStr = inputString.trim()
+      this.$emit("updateResult", this.finResultStr);
+    },
     updateResults: function (result) {
       let head = result[0].value.includes("ari") ? "" : "ari:/";
       this.finResultStr = head + result[0].value;

anms-ui/public/app/components/management/builder/ParameterView.vue

@@ -83,6 +83,9 @@ export default {
   },
   mounted() {
     this.generateParameters();
+    this.$emit("updateResult", [{ type: "ARI", value: this.ariKey.display }]);
+    this.finResult = this.finResultBase;
+    
   },
   methods: {
     generateParameters() {
@@ -192,7 +195,7 @@ export default {
               break;
           }
         });
-
+        
         if (this.ariKey.obj_metadata_id != null) {
           this.finResultStr =
             "ari:/IANA:" +

anms-ui/public/app/components/management/builder/buildAri.vue

@@ -190,4 +190,4 @@ export default {
 .a {
   vs-selected-color: #fff;
 }
-</style
+</style>