Issue #3381159 by hosomitm, yas: Refactor SPA well-Known protocol retrieval to...

Issue #3381159 by hosomitm, yas: Refactor SPA well-Known protocol retrieval to use API instead of hardcoding

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

 import Glyphicon from 'atoms/Glyphicon';
 import SecurityGroupPermission from 'model/SecurityGroupPermission';
 import { Button, Col, Row, Table } from 'react-bootstrap';
+import {useState} from "react";
+import useDrupalJsonApi from 'hooks/drupal_jsonapi';
 
 type FormItemInfo = {
   type: 'string',
@@ -129,124 +131,6 @@ 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,
@@ -293,31 +177,6 @@ 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,
@@ -340,6 +199,52 @@ const PermissionForm = ({ value, setValue, cloudServiceProvider, blockIndex, id,
     setValue(newValue as SecurityGroupPermission);
   }
 
+  // Get a list of well-known protocols from the JSON API.
+  const { getJsonData } = useDrupalJsonApi();
+  const [isLoaded, setIsLoaded] = useState(false);
+  const [wellknownProtocolList, setWellknownProtocolList] = useState<WellknownProtocolItems>({});
+  const wellknownProtocolApiUrl = '/cloud_dashboard/openstack/wellknown_protocols';
+  if (!isLoaded) {
+    setIsLoaded(true);
+    getJsonData<WellknownProtocolItems>(wellknownProtocolApiUrl, {}).then((jsonData) => {
+      setWellknownProtocolList(jsonData);
+    });
+  }
+
+  // Create a set of labels and values from the list of well-known protocols.
+  const getWellknownProtocolLabels = () => {
+    let protocolOptions: { value: string; label: string; }[] = [];
+    Object.entries(wellknownProtocolList).map((item) => {
+      protocolOptions.push({ value: item[0], label: item[1].name });
+    })
+    return protocolOptions;
+  }
+
+  // Manipulate PermissionForm.
+  const WellknownProtocolInput = (inputValues: SecurityGroupPermission) => {
+    let result: {isWellknown: boolean} = { isWellknown: false};
+    const wellknownProtocolLabels = getWellknownProtocolLabels();
+
+    wellknownProtocolLabels.map(protocol => {
+      // Well-known protocol is selected.
+      if (inputValues.ip_protocol === protocol.value) {
+        const protocolItem = wellknownProtocolList[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;
+  }
+
   return <>
     {
       [...Array(rowCount)].map((_, i) => i).map((row) => {

modules/cloud_service_providers/openstack/openstack.routing.yml

@@ -838,6 +838,18 @@ entity.openstack_security_group.edit:
   options:
     perm: 'edit any openstack security group+edit own openstack security group'
 
+entity.openstack_security_group.wellknown_protocols:
+  path: '/cloud_dashboard/openstack/wellknown_protocols'
+  defaults:
+    _controller: '\Drupal\openstack\Controller\ApiController::getWellknownProtocols'
+    cloud_context: ''
+  requirements:
+    # Use custom access that will check for cloud_context and the desired permission.
+    # Desired permission is passed as an option in the "perm" variable
+    _custom_access: '\Drupal\cloud\Controller\CloudConfigController::access'
+  options:
+    perm: 'edit any openstack security group+edit own openstack security group'
+
 entity.openstack_security_group.delete:
   path: '/cloud_dashboard/openstack/{cloud_context}/openstack_security_group/{entity_id}/delete'
   defaults:

modules/cloud_service_providers/openstack/src/Controller/ApiController.php

@@ -2135,4 +2135,12 @@ class ApiController extends ControllerBase implements ApiControllerInterface {
 
   }
 
+  /**
+   * {@inheritdoc}
+   */
+  public function getWellknownProtocols(): JsonResponse {
+    $well_known_ports = OpenStackServiceInterface::WELL_KNOWN_PORTS;
+    return new JsonResponse($well_known_ports);
+  }
+
 }

modules/cloud_service_providers/openstack/src/Controller/ApiControllerInterface.php

@@ -554,4 +554,12 @@ interface ApiControllerInterface {
    */
   public function getTemplateSecurityGroupOptionsAsJson($cloud_context): JsonResponse;
 
+  /**
+   * Get select options of well-known protocols.
+   *
+   * @return \Symfony\Component\HttpFoundation\JsonResponse
+   *   The JSON response.
+   */
+  public function getWellknownProtocols(): JsonResponse;
+
 }