feat(kubernetes): list all kube services screen [EE-1571] (#8524)

* port services from ee

* fix external link

* post review improvements

* remove applications-ports-datatable

* minor post review updates

* add services help url

* post review update

* more post review updates

* post review updates

* rename index to component

* fix external ip display and sorting

* fix external apps tag

* fix ingress screen time format

* use uid for row id. Prevent blank link

* fix some missing bits ported from EE

* match ee

* fix display of show system resources

* remove icon next to service type

app/react/kubernetes/ingresses/IngressDatatable/IngressDatatable.tsx

@@ -17,7 +17,7 @@ import { useSearchBarState } from '@@/datatables/SearchBar';
 import { DeleteIngressesRequest, Ingress } from '../types';
 import { useDeleteIngresses, useIngresses } from '../queries';
 
-import { useColumns } from './columns';
+import { columns } from './columns';
 
 import '../style.css';
 
@@ -38,7 +38,6 @@ export function IngressDatatable() {
     Object.keys(nsResult?.data || {})
   );
 
-  const columns = useColumns();
   const deleteIngressesMutation = useDeleteIngresses();
   const settings = useStore(settingsStore);
   const [search, setSearch] = useSearchBarState(storageKey);

app/react/kubernetes/ingresses/IngressDatatable/columns/created.tsx

@@ -0,0 +1,23 @@
+import { CellProps, Column } from 'react-table';
+
+import { formatDate } from '@/portainer/filters/filters';
+
+import { Ingress } from '../../types';
+
+export const created: Column<Ingress> = {
+  Header: 'Created',
+  id: 'created',
+  accessor: (row) => row.CreationDate,
+  Cell: ({ row }: CellProps<Ingress>) => {
+    const owner =
+      row.original.Labels?.['io.portainer.kubernetes.ingress.owner'];
+
+    if (owner) {
+      return `${formatDate(row.original.CreationDate)} by ${owner}`;
+    }
+
+    return formatDate(row.original.CreationDate);
+  },
+  disableFilters: true,
+  canHide: true,
+};

app/react/kubernetes/ingresses/IngressDatatable/columns/index.tsx

@@ -1,11 +1,15 @@
-import { useMemo } from 'react';
-
 import { name } from './name';
 import { type } from './type';
 import { namespace } from './namespace';
 import { className } from './className';
 import { ingressRules } from './ingressRules';
+import { created } from './created';
 
-export function useColumns() {
-  return useMemo(() => [name, namespace, className, type, ingressRules], []);
-}
+export const columns = [
+  name,
+  namespace,
+  className,
+  type,
+  ingressRules,
+  created,
+];