Add IstioConfig under Workload Details

[lucasponce]

Related to kiali/kiali#3015

Requires kiali/kiali#3157

It adds IstioConfig linked with a workload (resources with some workloadSelector that matches the workload labels).

For testers, I've used this (somehow artificial) example (you can modify it inside Kiali to check that validations are working):

apiVersion: security.istio.io/v1beta1
kind: PeerAuthentication
metadata:
  name: details-pa
  namespace: default
spec:
  selector:
    matchLabels:
      app: details
  mtls:
    mode: PERMISSIVE
---
apiVersion: security.istio.io/v1beta1
kind: RequestAuthentication
metadata:
  name: details-ra
  namespace: default
spec:
  selector:
    matchLabels:
      app: details
  jwtRules:
    - issuer: "issuer-foo"
      jwksUri: https://example.com/.well-known/jwks.json
---
apiVersion: security.istio.io/v1beta1
kind: AuthorizationPolicy
metadata:
  name: details-ap
  namespace: default
spec:
  selector:
    matchLabels:
      app: details
  rules:
    - from:
        - source:
            requestPrincipals: ["*"]
---
apiVersion: networking.istio.io/v1alpha3
kind: Sidecar
metadata:
  name: details-sc
  namespace: default
spec:
  workloadSelector:
    labels:
      app: details
  ingress:
    - port:
        number: 9080
        protocol: HTTP
        name: somename
      defaultEndpoint: unix:///var/run/someuds.sock
  egress:
    - port:
        number: 9080
        protocol: HTTP
        name: egresshttp
      hosts:
        - "prod-us1/*"
    - hosts:
        - "istio-system/*"
---
apiVersion: networking.istio.io/v1alpha3
kind: EnvoyFilter
metadata:
  name: details-ef
  namespace: default
spec:
  workloadSelector:
    labels:
      app: details
  configPatches:
    # The first patch adds the lua filter to the listener/http connection manager
    - applyTo: HTTP_FILTER
      match:
        context: SIDECAR_INBOUND
        listener:
          portNumber: 8080
          filterChain:
            filter:
              name: "envoy.http_connection_manager"
              subFilter:
                name: "envoy.router"
      patch:
        operation: INSERT_BEFORE
        value: # lua filter specification
          name: envoy.lua
          typed_config:
            "@type": "type.googleapis.com/envoy.config.filter.http.lua.v2.Lua"
            inlineCode: |
              function envoy_on_request(request_handle)
                -- Make an HTTP call to an upstream host with the following headers, body, and timeout.
                local headers, body = request_handle:httpCall(
                 "lua_cluster",
                 {
                  [":method"] = "POST",
                  [":path"] = "/acl",
                  [":authority"] = "internal.org.net"
                 },
                "authorize call",
                5000)
              end
    # The second patch adds the cluster that is referenced by the lua code
    # cds match is omitted as a new cluster is being added
    - applyTo: CLUSTER
      match:
        context: SIDECAR_OUTBOUND
      patch:
        operation: ADD
        value: # cluster specification
          name: "lua_cluster"
          type: STRICT_DNS
          connect_timeout: 0.5s
          lb_policy: ROUND_ROBIN
          hosts:
            - socket_address:
                protocol: TCP
                address: "internal.org.net"
                port_value: 8888

[hhovsepy]

When there is any broken Sidecar (with non exisint workload selector label), all the workloads get warning icon in Istio Config tab.
Also the Status column is too wide, and the Name column can be wider.

[lucasponce]

@hhovsepy I've fixed the icon problem.

But the column is more tricky due the change should be in the PF4 component, so for that, I've re-arranged the columns, to put a 10% on the first of all of them, otherwise columns would like different.

So, with the change we'll have:

I've tested several options and no one is 100% good, so, at the moment you put a different % in a middle component, columns tend to have different aspect.

So, in short widths:

With the PF auto-layout:

So, let me know what do you think.

[hhovsepy]

Verified the warning icon and the layout. Much better now @lucasponce thank you.

[xeviknal]

LGTM! There is one comment I'd like to hear from @lucasponce

[xeviknal]

It is probably style, but do you think it is a way to do this if/else statements shorter not repeating code?
I guess that using dynamic access to objects of JS/TS could help reduce the number of lines of code.
this.state.workloadIstioConfig["envoyFilters"].forEach() could work.

[lucasponce]

Yes, good comment, on this side I think this would work.

[xeviknal]

In the other if statements, you set the typeNames to an empty array. The lack of it for the gateways is intended?

[lucasponce]

Yes, it's filtering in the UI side the validations that belongs to the Istio Config resources that are linked with a Workload.
So an empty names array is part of the logic.

[xeviknal]

I guess it simplifies the logic. Good catch.

[xeviknal]

LGTM!