RSDK-846 - rc: only show component names for do command

web/frontend/src/app.vue

@@ -25,7 +25,7 @@ import {
   filterResources,
   filterNonRemoteResources,
   filterRdkComponentsWithStatus,
-  filterResourcesWithNames,
+  filterComponentsWithNames,
   type Resource,
 } from './lib/resource';
 
@@ -822,7 +822,7 @@ onMounted(async () => {
     />
 
     <!-- ******* DO ******* -->
-    <DoCommand :resources="filterResourcesWithNames(resources)" />
+    <DoCommand :resources="filterComponentsWithNames(resources)" />
 
     <!-- ******* CURRENT OPERATIONS ******* -->
     <CurrentOperations

web/frontend/src/components/do-command.vue

@@ -5,6 +5,7 @@ import { Struct } from 'google-protobuf/google/protobuf/struct_pb';
 import type { Resource } from '../lib/resource';
 import genericApi from '../gen/proto/api/component/generic/v1/generic_pb.esm';
 import { toast } from '../lib/toast';
+import { resourceNameToString } from '../lib/resource';
 
 interface Props {
   resources: Resource[]
@@ -20,8 +21,11 @@ const output = ref();
 const executing = ref(false);
 
 const doCommand = (name: string, command: string) => {
+  console.log("name is", name, command)
+  if (!name || !command) {
+    return;
+  }
   const request = new genericApi.DoCommandRequest();
-
   request.setName(name);
   request.setCommand(Struct.fromJavaScript(JSON.parse(command)));
 
@@ -44,6 +48,25 @@ const doCommand = (name: string, command: string) => {
     executing.value = false;
   });
 };
+
+const namesToPrettySelect = (resources: Resource[]): string => {
+  let simple = new Map<string, number>();
+
+  for (let resource of resources) {
+    if (!simple[resource.name]) {
+      simple[resource.name] = 0;
+    }
+    simple[resource.name]++;
+  }
+
+  return resources.map(res => {
+    if (simple[res.name] == 1) {
+      return res.name;
+    }
+    return resourceNameToString(res);
+  }).join();
+}
+
 </script>
 
 <template>
@@ -54,8 +77,8 @@ const doCommand = (name: string, command: string) => {
     <div class="h-full w-full border border-t-0 border-black p-4">
       <v-select
         label="Selected Component"
-        placeholder="Null"
-        :options="resources.map(({ name }) => name).join()"
+        placeholder="Select a component"
+        :options="namesToPrettySelect(resources)"
         :value="selectedComponent"
         :disabled="executing ? 'true' : 'false'"
         @input="selectedComponent = $event.detail.value"

web/frontend/src/lib/resource.ts

@@ -7,7 +7,22 @@ export interface Resource {
 }
 
 const sortByName = (item1: Resource, item2: Resource) => {
-  return item1.name > item2.name ? 1 : -1;
+  if (item1.name > item2.name) {
+    return 1;
+  } else if (item1.name > item2.name) {
+    return -1
+  }
+  if (item1.subtype > item2.subtype) {
+    return 1;
+  } else if (item1.subtype > item2.subtype) {
+    return -1
+  }
+  if (item1.type > item2.type) {
+    return 1;
+  } else if (item1.type > item2.type) {
+    return -1
+  }
+  return item1.namespace > item2.namespace ? 1 : -1;
 };
 
 export const resourceNameToSubtypeString = (resource: Resource) => {
@@ -63,8 +78,8 @@ export const filterRdkComponentsWithStatus = (
       status[resourceNameToString(resource)]).sort(sortByName);
 };
 
-export const filterResourcesWithNames = (resources: Resource[]) => {
+export const filterComponentsWithNames = (resources: Resource[]) => {
   return resources
-    .filter((resource) => Boolean(resource.name))
+    .filter((resource) => Boolean(resource.name) && resource.type === 'component')
     .sort(sortByName);
 };