add info about ingress allow list and which port is public

src/components/component/component-ports.tsx

@@ -11,9 +11,9 @@ export const ComponentPorts: FunctionComponent<{ ports: Array<Port> }> = ({
     <div>
       <Typography>Open ports:</Typography>
       <List className="o-indent-list">
-        {ports.map(({ name, port }) => (
+        {ports.map(({ name, port, isPublic }) => (
           <List.Item key={port}>
-            {port} ({name})
+            {port} ({name}) {isPublic && '- public'}
           </List.Item>
         ))}
       </List>

src/components/component/ingress-allow-list.tsx

@@ -0,0 +1,23 @@
+import { List, Typography } from '@equinor/eds-core-react';
+import * as PropTypes from 'prop-types';
+import type { FunctionComponent } from 'react';
+
+export const IngressAllowList: FunctionComponent<{
+  allowedIpRanges?: Array<string>;
+}> = ({ allowedIpRanges }) =>
+  allowedIpRanges?.length > 0 ? (
+    <div>
+      <Typography>Accessible from public IP address ranges:</Typography>
+      <List className="o-indent-list">
+        {allowedIpRanges.map((ip) => (
+          <List.Item key={ip}>{ip}</List.Item>
+        ))}
+      </List>
+    </div>
+  ) : (
+    <Typography>Accessible from all public IP addresses</Typography>
+  );
+
+IngressAllowList.propTypes = {
+  allowedIpRanges: PropTypes.arrayOf(PropTypes.string),
+};

src/components/page-active-component/overview.tsx

@@ -17,6 +17,7 @@ import type {
   ExternalDns,
 } from '../../store/radix-api';
 import './style.css';
+import { IngressAllowList } from '../component/ingress-allow-list';
 import { ResourceRequirements } from '../resource-requirements';
 import { Runtime } from '../runtime';
 import { DNSAliases } from './dns-aliases';
@@ -97,6 +98,11 @@ export const Overview = ({
               title={'DNS external aliases'}
             />
           )}
+          {component.ports?.some(({ isPublic }) => isPublic) && (
+            <IngressAllowList
+              allowedIpRanges={component.network?.ingress?.public?.allow}
+            />
+          )}
           <ComponentPorts ports={component.ports} />
           {component.runtime && (
             <div className="grid grid--gap-medium">

src/components/page-deployment-component/dev.tsx

@@ -15,7 +15,7 @@ const testData: Array<
   }
 > = [
   {
-    appName: 'Consistent',
+    appName: 'myapp',
     deploymentName: 'prod-gyslp-0raq4x2c',
     componentName: 'www',
     deployment: {
@@ -31,7 +31,10 @@ const testData: Array<
           name: 'www',
           type: 'component',
           status: 'Consistent',
-          ports: [{ name: 'http', port: 3003 }],
+          ports: [
+            { name: 'http', port: 3003, isPublic: true },
+            { name: 'metrics', port: 9000, isPublic: false },
+          ],
           replicaList: [
             {
               name: 'server-6ff44564cb-f45q9',
@@ -73,8 +76,8 @@ const testData: Array<
     },
   },
   {
-    appName: 'Stopped',
-    deploymentName: 'prod-gyslp-0raq4x2c',
+    appName: 'myapp',
+    deploymentName: 'prod-gyslp-0raq4x2d',
     componentName: 'www',
     deployment: {
       name: 'prod-gyslp-0raq4x2c',
@@ -89,7 +92,14 @@ const testData: Array<
           name: 'www',
           type: 'component',
           status: 'Stopped',
-          ports: [{ name: 'http', port: 3003 }],
+          ports: [{ name: 'http', port: 3003, isPublic: true }],
+          network: {
+            ingress: {
+              public: {
+                allow: ['100.1.1.1', '200.1.1.1/32'],
+              },
+            },
+          },
           replicaList: [
             {
               name: 'server-6ff44564cb-f45q9',

src/components/page-deployment-job-component/dev.tsx

@@ -29,7 +29,7 @@ const testData: Array<
           name: 'api',
           type: 'component',
           status: 'Consistent',
-          ports: [{ name: 'http', port: 5005 }],
+          ports: [{ name: 'http', port: 5005, isPublic: true }],
           replicaList: [
             {
               name: 'api-587b8877c-9xr4x',
@@ -63,7 +63,7 @@ const testData: Array<
           name: 'auth-proxy',
           type: 'component',
           status: 'Consistent',
-          ports: [{ name: 'http', port: 8000 }],
+          ports: [{ name: 'http', port: 8000, isPublic: true }],
           replicaList: [
             {
               name: 'auth-proxy-86bb8c47c-wwhx8',
@@ -117,7 +117,7 @@ const testData: Array<
           name: 'auth-state',
           type: 'component',
           status: 'Consistent',
-          ports: [{ name: 'redis', port: 6379 }],
+          ports: [{ name: 'redis', port: 6379, isPublic: true }],
           replicaList: [
             {
               name: 'auth-state-74f5b9488b-pwm2c',
@@ -147,7 +147,7 @@ const testData: Array<
           name: 'compute',
           type: 'job',
           status: 'Consistent',
-          ports: [{ name: 'http', port: 8080 }],
+          ports: [{ name: 'http', port: 8080, isPublic: true }],
           schedulerPort: 8080,
           scheduledJobPayloadPath: '/compute/payload',
           replicaList: [
@@ -184,7 +184,7 @@ const testData: Array<
           name: 'compute2',
           type: 'job',
           status: 'Consistent',
-          ports: [{ name: 'http', port: 8080 }],
+          ports: [{ name: 'http', port: 8080, isPublic: true }],
           schedulerPort: 8080,
           scheduledJobPayloadPath: '/compute/payload',
           replicaList: [
@@ -232,7 +232,7 @@ const testData: Array<
           name: 'api',
           type: 'component',
           status: 'Consistent',
-          ports: [{ name: 'http', port: 5005 }],
+          ports: [{ name: 'http', port: 5005, isPublic: true }],
           replicaList: [
             {
               name: 'api-587b8877c-9xr4x',
@@ -266,7 +266,7 @@ const testData: Array<
           name: 'auth-proxy',
           type: 'component',
           status: 'Consistent',
-          ports: [{ name: 'http', port: 8000 }],
+          ports: [{ name: 'http', port: 8000, isPublic: true }],
           replicaList: [
             {
               name: 'auth-proxy-86bb8c47c-wwhx8',
@@ -320,7 +320,7 @@ const testData: Array<
           name: 'auth-state',
           type: 'component',
           status: 'Consistent',
-          ports: [{ name: 'redis', port: 6379 }],
+          ports: [{ name: 'redis', port: 6379, isPublic: true }],
           replicaList: [
             {
               name: 'auth-state-74f5b9488b-pwm2c',
@@ -350,7 +350,7 @@ const testData: Array<
           name: 'compute',
           type: 'job',
           status: 'Stopped',
-          ports: [{ name: 'http', port: 8080 }],
+          ports: [{ name: 'http', port: 8080, isPublic: true }],
           schedulerPort: 8080,
           scheduledJobPayloadPath: '/compute/payload',
           replicaList: [
@@ -385,7 +385,7 @@ const testData: Array<
           name: 'compute2',
           type: 'job',
           status: 'Consistent',
-          ports: [{ name: 'http', port: 8080 }],
+          ports: [{ name: 'http', port: 8080, isPublic: true }],
           schedulerPort: 8080,
           scheduledJobPayloadPath: '/compute/payload',
           replicaList: [

src/components/page-deployment/dev.tsx

@@ -25,7 +25,7 @@ const testData: Array<
           name: 'server',
           type: 'component',
           status: 'Reconciling',
-          ports: [{ name: 'http', port: 5005 }],
+          ports: [{ name: 'http', port: 5005, isPublic: true }],
           replicaList: [
             {
               name: 'server-68f6cc7984-sw9zv',
@@ -63,7 +63,7 @@ const testData: Array<
           name: 'auth-proxy',
           type: 'component',
           status: 'Reconciling',
-          ports: [{ name: 'http', port: 8000 }],
+          ports: [{ name: 'http', port: 8000, isPublic: true }],
           replicaList: [
             {
               name: 'auth-proxy-79db7d5668-nsz8c',
@@ -120,7 +120,7 @@ const testData: Array<
           name: 'auth-state',
           type: 'component',
           status: 'Consistent',
-          ports: [{ name: 'redis', port: 6379 }],
+          ports: [{ name: 'redis', port: 6379, isPublic: true }],
           replicaList: [
             {
               name: 'auth-state-6dbd7cfb4c-g7qsn',
@@ -148,7 +148,7 @@ const testData: Array<
           name: 'compute',
           type: 'job',
           status: 'Consistent',
-          ports: [{ name: 'http', port: 8000 }],
+          ports: [{ name: 'http', port: 8000, isPublic: true }],
           schedulerPort: 8080,
           scheduledJobPayloadPath: '/compute/payload',
           replicaList: [
@@ -196,7 +196,7 @@ const testData: Array<
           name: 'server',
           type: 'component',
           status: 'Reconciling',
-          ports: [{ name: 'http', port: 5005 }],
+          ports: [{ name: 'http', port: 5005, isPublic: true }],
           replicaList: [
             {
               name: 'server-68f6cc7984-sw9zv',
@@ -234,7 +234,7 @@ const testData: Array<
           name: 'auth-proxy',
           type: 'component',
           status: 'Reconciling',
-          ports: [{ name: 'http', port: 8000 }],
+          ports: [{ name: 'http', port: 8000, isPublic: true }],
           replicaList: [
             {
               name: 'auth-proxy-79db7d5668-nsz8c',
@@ -291,7 +291,7 @@ const testData: Array<
           name: 'auth-state',
           type: 'component',
           status: 'Consistent',
-          ports: [{ name: 'redis', port: 6379 }],
+          ports: [{ name: 'redis', port: 6379, isPublic: true }],
           replicaList: [
             {
               name: 'auth-state-6dbd7cfb4c-g7qsn',

src/store/radix-api.ts

@@ -2321,6 +2321,16 @@ export type AzureIdentity = {
 export type Identity = {
   azure?: AzureIdentity;
 };
+export type IngressPublic = {
+  /** List of allowed IP addresses or CIDRs. All traffic is allowed if list is empty. */
+  allow: string[];
+};
+export type Ingress = {
+  public?: IngressPublic;
+};
+export type Network = {
+  ingress?: Ingress;
+};
 export type Notifications = {
   /** Webhook is a URL for notification about internal events or changes. The URL should be of a Radix component or job-component, with not public port. */
   webhook?: string;
@@ -2413,10 +2423,12 @@ export type OAuth2AuxiliaryResource = {
   deployment: AuxiliaryResourceDeployment;
 };
 export type Port = {
+  /** IsPublic indicates that the port is accessible from the Internet by proxying traffic from 443 */
+  isPublic: boolean;
   /** Component port name. From radixconfig.yaml */
   name: string;
   /** Component port number. From radixconfig.yaml */
-  port?: number;
+  port: number;
 };
 export type Runtime = {
   /** CPU architecture */
@@ -2435,6 +2447,7 @@ export type Component = {
   image: string;
   /** Name the component */
   name: string;
+  network?: Network;
   notifications?: Notifications;
   oauth2?: OAuth2AuxiliaryResource;
   /** Ports defines the port number and protocol that a component is exposed for internally in environment */