feat: autocompletion for resource shortnames (argoproj#7466)

* feat: autocompletion for resource shortnames Signed-off-by: saumeya <[email protected]>
tkasuz · Nov 2, 2021 · c2b3e74 · c2b3e74
1 parent 8b10b64
commit c2b3e74
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 6 deletions.
diff --git a/ui/src/app/applications/components/application-details/application-resource-filter.tsx b/ui/src/app/applications/components/application-details/application-resource-filter.tsx
@@ -5,6 +5,7 @@ import {AppDetailsPreferences, services} from '../../../shared/services';
 import {Context} from '../../../shared/context';
 import {Filter, FiltersGroup} from '../filter/filter';
 import {ComparisonStatusIcon, HealthStatusIcon} from '../utils';
+import {resources} from '../resources';
 
 const uniq = (value: string, index: number, self: string[]) => self.indexOf(value) === index;
 
@@ -61,11 +62,19 @@ export const Filters = (props: {
         onSetFilter(strings);
     };
 
-    const ResourceFilter = (p: {label: string; prefix: string; options: {label: string}[]; field?: boolean; radio?: boolean}) => {
+    const ResourceFilter = (p: {label: string; prefix: string; options: {label: string}[]; abbreviations?: Map<string, string>; field?: boolean; radio?: boolean}) => {
         return loading ? (
             <div>Loading...</div>
         ) : (
-            <Filter label={p.label} selected={selectedFor(p.prefix)} setSelected={v => setFilters(p.prefix, v)} options={p.options} field={!!p.field} radio={!!p.radio} />
+            <Filter
+                label={p.label}
+                selected={selectedFor(p.prefix)}
+                setSelected={v => setFilters(p.prefix, v)}
+                options={p.options}
+                abbreviations={p.abbreviations}
+                field={!!p.field}
+                radio={!!p.radio}
+            />
         );
     };
 
@@ -99,7 +108,7 @@ export const Filters = (props: {
     return (
         <FiltersGroup content={props.children} appliedFilter={pref.resourceFilter} onClearFilter={onClearFilter} setShown={setShown} expanded={shown}>
             {ResourceFilter({label: 'NAME', prefix: 'name', options: names.map(toOption), field: true})}
-            {ResourceFilter({label: 'KINDS', prefix: 'kind', options: kinds.map(toOption), field: true})}
+            {ResourceFilter({label: 'KINDS', prefix: 'kind', options: kinds.map(toOption), abbreviations: resources, field: true})}
             {ResourceFilter({
                 label: 'SYNC STATUS',
                 prefix: 'sync',

diff --git a/ui/src/app/applications/components/filter/filter.tsx b/ui/src/app/applications/components/filter/filter.tsx
@@ -10,6 +10,7 @@ interface FilterProps {
     options?: CheckboxOption[];
     label?: string;
     labels?: string[];
+    abbreviations?: Map<string, string>;
     field?: boolean;
     error?: boolean;
     retry?: () => void;
@@ -138,6 +139,7 @@ export const Filter = (props: FilterProps) => {
                             <Autocomplete
                                 placeholder={props.label}
                                 items={labels}
+                                abbreviations={props.abbreviations}
                                 value={input}
                                 onChange={e => setInput(e.target.value)}
                                 onItemClick={val => {

diff --git a/ui/src/app/applications/components/resources.ts b/ui/src/app/applications/components/resources.ts
@@ -3,26 +3,33 @@
 
 export const resources = new Map<string, string>([
     ['ClusterRole', 'c-role'],
+    ['ComponentStatus', 'cs'],
     ['ConfigMap', 'cm'],
     ['ClusterRoleBinding', 'crb'],
     ['CustomResourceDefinition', 'crd'],
+    ['CertificateSigningRequest', 'csr'],
     ['CronJob', 'cronjob'],
     ['Deployment', 'deploy'],
     ['DaemonSet', 'ds'],
     ['Endpoint', 'ep'],
     ['Endpoints', 'ep'],
+    ['Event', 'ev'],
     ['Group', 'group'],
     ['HorizontalPodAutoscaler', 'hpa'],
     ['Ingress', 'ing'],
     ['Job', 'job'],
     ['LimitRange', 'limits'],
     ['NetworkPolicy', 'netpol'],
     ['Namespace', 'ns'],
-    ['Pod', 'pod'],
+    ['Node', 'no'],
+    ['Pod', 'po'],
     ['PodSecurityPolicy', 'psp'],
     ['PersistentVolume', 'pv'],
     ['PersistentVolumeClaim', 'pvc'],
-    ['Quote', 'quota'],
+    ['PodDisruptionBudget', 'pdb'],
+    ['PriorityClass', 'pc'],
+    ['ReplicationController', 'rc'],
+    ['ResourceQuota', 'quota'],
     ['RoleBinding', 'rb'],
     ['Role', 'role'],
     ['ReplicaSet', 'rs'],

diff --git a/ui/yarn.lock b/ui/yarn.lock
@@ -1667,7 +1667,7 @@ are-we-there-yet@~1.1.2:
 
 "argo-ui@git+https://github.com/argoproj/argo-ui.git":
   version "1.0.0"
-  resolved "git+https://github.com/argoproj/argo-ui.git#6a9aa66d91dd64c09ee762440e27b8ea85957628"
+  resolved "git+https://github.com/argoproj/argo-ui.git#eeac356bff8c4eda585549c38ee9a21be3a88b9c"
   dependencies:
     "@fortawesome/fontawesome-free" "^5.15.2"
     "@tippy.js/react" "^2.1.2"