Containers page: listing.

[scures]

Addresses some points of #4506

We have some limitations since we don't have a whole API yet, basic actions are not possible (or I couldn't find a way) but we have the structure to enable them ready.

• Display a comprehensive list of containers
• Provide information such as container name, state, image, creation date, and ports
• Display port mappings for containers

We can have follow-up tasks to implement more features (actions, for example) once available.

[rak-phillip]

I gave this a quick review and left a few notes.

I was also able to crash the page using the following docker-compose.yaml (renamed to docker-compose.txt so I could upload) while I was testing.

docker-compose.txt

This is the error I received after running docker compose pull & docker compose -p penpot -f docker-compose.yaml up -d, and navigating to the Containers page

client.js?4497:103 TypeError: Cannot read properties of null (reading '0')
    at eval (Containers.vue?3246:164:1)
    at Array.forEach (<anonymous>)
    at VueComponent.getUniquePorts (Containers.vue?3246:162:1)
    at fn (Containers.vue?0334:29:1)
    at normalized (vue.runtime.esm.js?2b0e:2605:1)
    at Proxy.renderSlot (vue.runtime.esm.js?2b0e:2701:1)
    at eval (index.vue?dcca:573:1)
    at Proxy.renderList (vue.runtime.esm.js?2b0e:2646:1)
    at _vm._t.fullColspan (index.vue?dcca:571:1)
    at Proxy.renderSlot (vue.runtime.esm.js?2b0e:2706:1)

[scures]

I gave this a quick review and left a few notes.

I was also able to crash the page using the following docker-compose.yaml (renamed to docker-compose.txt so I could upload) while I was testing.

docker-compose.txt

This is the error I received after running docker compose pull & docker compose -p penpot -f docker-compose.yaml up -d, and navigating to the Containers page

client.js?4497:103 TypeError: Cannot read properties of null (reading '0')
    at eval (Containers.vue?3246:164:1)
    at Array.forEach (<anonymous>)
    at VueComponent.getUniquePorts (Containers.vue?3246:162:1)
    at fn (Containers.vue?0334:29:1)
    at normalized (vue.runtime.esm.js?2b0e:2605:1)
    at Proxy.renderSlot (vue.runtime.esm.js?2b0e:2701:1)
    at eval (index.vue?dcca:573:1)
    at Proxy.renderList (vue.runtime.esm.js?2b0e:2646:1)
    at _vm._t.fullColspan (index.vue?dcca:571:1)
    at Proxy.renderSlot (vue.runtime.esm.js?2b0e:2706:1)

Hopefully with the new changes & improvements that won't happen again.

[rak-phillip]

I think this is shaping up quite nicely, left a few minor comments 🙂

[rak-phillip]

ddClient will be made reactive because it's a member of data. That doesn't feel right to me because I can't imagine we would really care about tracking changes to ddClient in this component.

[scures]

Good point. Any suggestion on what would be the other approach?

[rak-phillip]

There are many ways to do this, but the generally accepted way is to simply assign a value to this.ddClient in the created hook.

vuejs/vue#1988 (comment)

I think that we can follow-up in a separate PR to make this change.

[scures]

@rak-phillip, I sent a commit to reduce the length of the sha names & filter out the containers in the kube-system namespace.

[rak-phillip]

I think what we have here looks like a good start to listing containers.

[rak-phillip]

There are many ways to do this, but the generally accepted way is to simply assign a value to this.ddClient in the created hook.

vuejs/vue#1988 (comment)

I think that we can follow-up in a separate PR to make this change.