Issue #3380950: Add well-known port protocol name items to the IP protocol dropdown list in OpenStack security group form (SPA)

modules/cloud_dashboard/cloud_dashboard/src/molecules/formblocks/PermissionInputBlock.tsx

@@ -19,6 +19,17 @@ type FormInfo = {
   itemList: FormItemInfo[]
 }
 
+type WellknownProtocolItem = {
+  name: string,
+  ip_protocol: string,
+  from_port: string,
+  to_port: string
+}
+
+type WellknownProtocolItems = {
+  [key: string]: WellknownProtocolItem;
+}
+
 const FORM_INFO_LIST: FormInfo[] = [
   {
     source: 'ip4',
@@ -118,6 +129,124 @@ const FORM_INFO_LIST: FormInfo[] = [
   }
 ]
 
+const WELL_KNOWN_PROTOCOLS: WellknownProtocolItems = {
+  all_icmp: {
+    name: 'All ICMP',
+    ip_protocol: 'icmp',
+    from_port: '-1',
+    to_port: '-1',
+  },
+  all_tcp: {
+    name: 'All TCP',
+    ip_protocol: 'tcp',
+    from_port: '1',
+    to_port: '65535',
+  },
+  all_udp: {
+    name: 'All UDP',
+    ip_protocol: 'udp',
+    from_port: '1',
+    to_port: '65535',
+  },
+  dns: {
+    name: 'DNS',
+    ip_protocol: 'tcp',
+    from_port: '53',
+    to_port: '53',
+  },
+  http: {
+    name: 'HTTP',
+    ip_protocol: 'tcp',
+    from_port: '80',
+    to_port: '80',
+  },
+  https: {
+    name: 'HTTPS',
+    ip_protocol: 'tcp',
+    from_port: '443',
+    to_port: '443',
+  },
+  imap: {
+    name: 'IMAP',
+    ip_protocol: 'tcp',
+    from_port: '143',
+    to_port: '143',
+  },
+  imaps: {
+    name: 'IMAPS',
+    ip_protocol: 'tcp',
+    from_port: '993',
+    to_port: '993',
+  },
+  ldap: {
+    name: 'LDAP',
+    ip_protocol: 'tcp',
+    from_port: '389',
+    to_port: '389',
+  },
+  ms_sql: {
+    name: 'MS SQL',
+    ip_protocol: 'tcp',
+    from_port: '1433',
+    to_port: '1433',
+  },
+  mysql: {
+    name: 'MySQL',
+    ip_protocol: 'tcp',
+    from_port: '3306',
+    to_port: '3306',
+  },
+  pop3: {
+    name: 'POP3',
+    ip_protocol: 'tcp',
+    from_port: '110',
+    to_port: '110',
+  },
+  pop3s: {
+    name: 'POP3S',
+    ip_protocol: 'tcp',
+    from_port: '995',
+    to_port: '995',
+  },
+  rdp: {
+    name: 'RDP',
+    ip_protocol: 'tcp',
+    from_port: '3389',
+    to_port: '3389',
+  },
+  smtp: {
+    name: 'SMTP',
+    ip_protocol: 'tcp',
+    from_port: '25',
+    to_port: '25',
+  },
+  smtps: {
+    name: 'SMTPS',
+    ip_protocol: 'tcp',
+    from_port: '465',
+    to_port: '465',
+  },
+  ssh: {
+    name: 'SSH',
+    ip_protocol: 'tcp',
+    from_port: '22',
+    to_port: '22',
+  },
+};
+
+const getWellknownProtocolItems = () => {
+  // TODO: In the future, we will get the list of Wellknown Protocols from our REST API.
+  return WELL_KNOWN_PROTOCOLS;
+}
+
+const getWellknownProtocolLabels = () => {
+  let protocolOptions: { value: string; label: string; }[] = [];
+  Object.entries(getWellknownProtocolItems()).map((item) => {
+    protocolOptions.push({ value: item[0], label: item[1].name });
+  })
+  return protocolOptions;
+}
+
 const StringInput = ({ label, placeholder, value, setValue, id, className }: {
   label: string,
   placeholder?: string,
@@ -164,6 +293,31 @@ const SelectInput = ({ label, itemList, value, setValue, id, className }: {
   </Col>;
 }
 
+const WellknownProtocolInput = (inputValues: SecurityGroupPermission) => {
+  let result: {isWellknown: boolean} = { isWellknown: false};
+  const wellknownProtocolItems = getWellknownProtocolItems();
+  const wellknownProtocolLabels = getWellknownProtocolLabels();
+
+  wellknownProtocolLabels.map(protocol => {
+    // Well-known protocol is selected.
+    if (inputValues.ip_protocol === protocol.value) {
+      const protocolItem = wellknownProtocolItems[protocol.value];
+      result = {isWellknown: true};
+
+      // Change the selected port.
+      inputValues.to_port = protocolItem.to_port
+      inputValues.from_port = protocolItem.from_port
+    }
+  });
+
+  if (!result.isWellknown && inputValues.ip_protocol !== 'icmp') {
+    inputValues.to_port = inputValues.to_port === '-1' ? '' : inputValues.to_port;
+    inputValues.from_port = inputValues.from_port === '-1' ? '' : inputValues.from_port;
+  }
+
+  return result;
+}
+
 const PermissionForm = ({ value, setValue, cloudServiceProvider, blockIndex, id, className }: {
   value: SecurityGroupPermission,
   setValue: (s: SecurityGroupPermission) => void,
@@ -197,15 +351,19 @@ const PermissionForm = ({ value, setValue, cloudServiceProvider, blockIndex, id,
               }
               const formId = id ? `${id}-${blockIndex}-${item.key.replaceAll('_', '-')}` : undefined;
               const formClass = className ? `${className}-${blockIndex}-${item.key.replaceAll('_', '-')}` : undefined;
+              const wellknownProtocolInfo = WellknownProtocolInput(value);
               switch (item.type) {
                 case 'string':
+                  if (cloudServiceProvider === 'openstack' && (item.key === 'to_port' || item.key === 'from_port') && wellknownProtocolInfo.isWellknown) {
+                    return <></>;
+                  }
                   return <StringInput label={item.label} placeholder={item.placeholder}
                     value={(value as {[key: string]: any})[item.key]}
                     setValue={(s) => setSingleValue(item.key, s)}
                     id={formId} className={formClass} />;
                 case 'select':
                   const itemList = cloudServiceProvider === 'openstack' && item.key === 'ip_protocol'
-                    ? item.itemList.filter((column) => column.value !== '-1')
+                    ? item.itemList.filter((column) => column.value !== '-1').concat(getWellknownProtocolLabels())
                     : item.itemList;
                   return <SelectInput label={item.label} itemList={itemList}
                     value={(value as {[key: string]: any})[item.key]}