Show signatures details modal on container registry page (!151903) · Merge requests · GitLab.org / GitLab

Daniel Tian requested to merge 442848-show-signatures-and-signature-modal into master May 03, 2024

What does this MR do and why?

On the Project -> Settings -> Deploy -> Container Registry page, we show a list of Docker image tags:

Each tag can be signed with a signature. Toggling the tag details will show the signature details (there can be multiple). This MR adds a View details link to each signature detail that when clicked on, will show the signature details modal:

View details link	Signature details modal

How to set up and validate locally

It's extremely involved to set up a local environment to create the signatures. You can see what the production data looks like by running this query (source project):

GraphQL query

query {
  containerRepository(id:"gid://gitlab/ContainerRepository/6340028") {
    manifest(reference: "sha256:a2964d0c5f00fd9263fe8ea13cc04c83e2f01682b60e6f7b95778306cb01cfb0")
    tags(first: 100, referrers: true) {
      nodes {
        digest
        name
        referrers {
          artifactType
          digest
          
        }
      }
    }
  }
}

But to verify locally, we will mock the GraphQL response rather than go through the lengthy setup process.

Enable the container registry and generate tags

On your local machine, you must set up Docker and a local GitLab runner using the docker executor.
Stop your local GDK.
Edit your config/gitlab.yml file. Find the top-level registry: key and change enabled: false to enabled: true:

registry:
  enabled: true

Start your local GDK. Verify that the last line of output says A container registry is available at 127.0.0.1:5000.
Clone this project locally: https://gitlab.com/dftian/container-signing
Check if the Settings -> Deploy -> Container Registry nav item is shown. If not, try restarting your GDK. This happens because the image is still starting up and is not ready by the time GDK has started. The registry stays running between GDK restarts.
Run a pipeline against the master branch.
Go to Settings -> Deploy -> Container Registry. There should be one registry shown. Click on it. There should be 3 tags shown.

Set up mock response

Please watch this video walkthrough (with audio commentary) on how to mock the tag response using the Tweak browser extension:

2024-05-08_16-51-49

Then follow this video (with audio commentary) on how to mock the manifest details response:

2024-05-09_17-45-39

Manifest data to paste:

"{\"schemaVersion\":2, \"mediaType\":\"application/vnd.oci.image.manifest.v1+json\", \"config\":{\"mediaType\":\"application/vnd.dev.cosign.artifact.sig.v1+json\", \"size\":233, \"digest\":\"sha256:ba0362900518d135692bf7e2874ef17db3c278b8216930d292d1857885d937e3\"}, \"layers\":[{\"mediaType\":\"application/vnd.dev.cosign.simplesigning.v1+json\", \"size\":263, \"digest\":\"sha256:519c67033889b50b2384cca0dcb01566658f0dbc8ab6c4983273293af8842674\", \"annotations\":{\"dev.cosignproject.cosign/signature\":\"MEYCIQCFFPuuDZCVAV/LK6Kvg8EGtewOHhZy0jajhOb6zMPZEAIhAKHXFJu9CpJKWs6L/ZDBJG7sF2GxHKwGnpwJ06N5JeVt\", \"dev.sigstore.cosign/bundle\":\"{\\\"SignedEntryTimestamp\\\":\\\"MEQCIBFONUyOFSSyrOsa3llF8Zz+v3h80DVw1LPMZj158nWRAiA9P6JbDhSSj/Yr7AN/UeqM5eZGtnXg7kYIUAf8oK8g5A==\\\",\\\"Payload\\\":{\\\"body\\\":\\\"eyJhcGlWZXJzaW9uIjoiMC4wLjEiLCJraW5kIjoiaGFzaGVkcmVrb3JkIiwic3BlYyI6eyJkYXRhIjp7Imhhc2giOnsiYWxnb3JpdGhtIjoic2hhMjU2IiwidmFsdWUiOiI1MTljNjcwMzM4ODliNTBiMjM4NGNjYTBkY2IwMTU2NjY1OGYwZGJjOGFiNmM0OTgzMjczMjkzYWY4ODQyNjc0In19LCJzaWduYXR1cmUiOnsiY29udGVudCI6Ik1FWUNJUUNGRlB1dURaQ1ZBVi9MSzZLdmc4RUd0ZXdPSGhaeTBqYWpoT2I2ek1QWkVBSWhBS0hYRkp1OUNwSktXczZML1pEQkpHN3NGMkd4SEt3R25wd0owNk41SmVWdCIsInB1YmxpY0tleSI6eyJjb250ZW50IjoiTFMwdExTMUNSVWRKVGlCRFJWSlVTVVpKUTBGVVJTMHRMUzB0Q2sxSlNVWjRWRU5EUWxWNVowRjNTVUpCWjBsVldqQjNSbGRQZVd4dFF6QnZLemRNV0ZwcU1tdEZZWFowYVN0SmQwTm5XVWxMYjFwSmVtb3dSVUYzVFhjS1RucEZWazFDVFVkQk1WVkZRMmhOVFdNeWJHNWpNMUoyWTIxVmRWcEhWakpOVWpSM1NFRlpSRlpSVVVSRmVGWjZZVmRrZW1SSE9YbGFVekZ3WW01U2JBcGpiVEZzV2tkc2FHUkhWWGRJYUdOT1RXcFJkMDVVUVRSTlJHY3hUV3BKZUZkb1kwNU5hbEYzVGxSQk5FMUVhM2ROYWtsNFYycEJRVTFHYTNkRmQxbElDa3R2V2tsNmFqQkRRVkZaU1V0dldrbDZhakJFUVZGalJGRm5RVVUzYTNacmEzWlBNR1YxWVdkc1VrY3laRXRHTWk5M056SkJZVkZTV1hCb1EwSnZPVmtLWjNockwxQnBiMVJCVEVNMWREZHZka2RKTm1oTVFpOVVZbTVzVDFGVWNtdEZlalJLTjNWSVRqWktRMHRwWkZaNFlqWlBRMEpIYzNkbloxSnVUVUUwUndwQk1WVmtSSGRGUWk5M1VVVkJkMGxJWjBSQlZFSm5UbFpJVTFWRlJFUkJTMEpuWjNKQ1owVkdRbEZqUkVGNlFXUkNaMDVXU0ZFMFJVWm5VVlYxZDBwNENtOVNhbmRZUmpGa2VuVkROa1o1Y25kQ04wMXlMemt3ZDBoM1dVUldVakJxUWtKbmQwWnZRVlV6T1ZCd2VqRlphMFZhWWpWeFRtcHdTMFpYYVhocE5Ga0tXa1E0ZDFoQldVUldVakJTUVZGSUwwSkdTWGRWU1ZwUFlVaFNNR05JVFRaTWVUbHVZVmhTYzFsWFNYVlpNamwwVERKR2IyUlhOVEJqTWpGb1ltazVhZ3BpTWpVd1dWZHNkVnBZU1hSak1teHVZbTFzZFZwNU9IWk1iV1J3WkVkNGFGbHBNV3BoVXpVMVlsZDRRV050Vm0xamVUbHZXbGRHYTJONU9YUlpWMngxQ2sxRFFVZERhWE5IUVZGUlFtYzNPSGRCVVVWRlJXMW9NR1JJUW5wUGFUaDJXakpzTUdKSFJtbE1iVTUyWWxSQmFVSm5iM0pDWjBWRlFWbFBMMDFCUlVrS1FrSlJUVVZ0YURCa1NFSjZUMms0ZGxveWJEQmlSMFpwVEcxT2RtSlVRbVZDWjI5eVFtZEZSVUZaVHk5TlFVVktRa1pCVFZSdGFEQmtTRUo2VDJrNGRncGFNbXd3WWtkR2FVeHRUblppVXpsb1lVaFdkV1JJVG5SWlZ6UjJXVEk1ZFdSSFJuQmliVlo1VEZoT2NGb3lOWEJpYldOMlRIazFibUZZVW5OWlYwbDBDbGt5YTNWbFZ6RnpVVWhLYkZwdVRYWmhSMVpvV2toTmRtSlhSbkJpYWtFMFFtZHZja0puUlVWQldVOHZUVUZGUzBKRGIwMUxSRVY1V2tSa2FVNUVXWG9LVFVSc2JGcEhWWGROZWxrMVRtcE9hazVYVFhwT1JGRTFUbFJuTVZwcVNteFBWRTVwVFRKTk1FNVVRWGRJVVZsTFMzZFpRa0pCUjBSMmVrRkNRM2RSVUFwRVFURnVZVmhTYzFsWFNYUmhSemw2WkVkV2EwMUVORWREYVhOSFFWRlJRbWMzT0hkQlVYZEZUVUYzZFdGSVVqQmpTRTAyVEhrNWJtRllVbk5aVjBsMUNsa3lPWFJNTWtadlpGYzFNR015TVdoaWFUbHFZakkxTUZsWGJIVmFXRWwwWXpKc2JtSnRiSFZhZWtFMFFtZHZja0puUlVWQldVOHZUVUZGVGtKRGIwMEtTMFJGZVZwRVpHbE9SRmw2VFVSc2JGcEhWWGROZWxrMVRtcE9hazVYVFhwT1JGRTFUbFJuTVZwcVNteFBWRTVwVFRKTk1FNVVRWGRJZDFsTFMzZFpRZ3BDUVVkRWRucEJRa1JuVVZKRVFUbDVXbGRhZWt3eWFHeFpWMUo2VERJeGFHRlhOSGRIUVZsTFMzZFpRa0pCUjBSMmVrRkNSSGRSUzBSQlp6Rk9hbU4zQ2sxcVZYZFBWRUZ6UW1kdmNrSm5SVVZCV1U4dlRVRkZVVUpDTkUxSVIyZ3daRWhDZWs5cE9IWmFNbXd3WWtkR2FVeHRUblppVXpsb1lVaFdkV1JJVG5RS1dWYzBkMGRCV1V0TGQxbENRa0ZIUkhaNlFVSkZVVkZMUkVGbk1VOUVhekJPYW1NelRVUkNaVUpuYjNKQ1owVkZRVmxQTDAxQlJWTkNSa0ZOVkcxb01BcGtTRUo2VDJrNGRsb3liREJpUjBacFRHMU9kbUpUT1doaFNGWjFaRWhPZEZsWE5IWlpNamwxWkVkR2NHSnRWbmxNV0U1d1dqSTFjR0p0WTNaTWVUVnVDbUZZVW5OWlYwbDBXVEpyZFdWWE1YTlJTRXBzV201TmRtRkhWbWhhU0UxMllsZEdjR0pxUVRSQ1oyOXlRbWRGUlVGWlR5OU5RVVZVUWtOdlRVdEVSWGtLV2tSa2FVNUVXWHBOUkd4c1drZFZkMDE2V1RWT2FrNXFUbGROZWs1RVVUVk9WR2N4V21wS2JFOVVUbWxOTWswd1RsUkJkMFpCV1V0TGQxbENRa0ZIUkFwMmVrRkNSa0ZSUjBSQlVuZGtXRTV2VFVaQlIwTnBjMGRCVVZGQ1p6YzRkMEZTVlVWUlozaEJZVWhTTUdOSVRUWk1lVGx1WVZoU2MxbFhTWFZaTWpsMENrd3lSbTlrVnpVd1l6SXhhR0pwT1dwaU1qVXdXVmRzZFZwWVNYUmpNbXh1WW0xc2RWcDVPSFJNTW5CMldXNU5kazVxWjNkT1ZFRXpUbnBSTVUxVVFWY0tRbWR2Y2tKblJVVkJXVTh2VFVGRlYwSkJaMDFDYmtJeFdXMTRjRmw2UTBKcGQxbExTM2RaUWtKQlNGZGxVVWxGUVdkU09VSkljMEZsVVVJelFVNHdPUXBOUjNKSGVIaEZlVmw0YTJWSVNteHVUbmRMYVZOc05qUXphbmwwTHpSbFMyTnZRWFpMWlRaUFFVRkJRbW94Wkc1V2JYTkJRVUZSUkVGRlozZFNaMGxvQ2tGTFZqSjNibXBUYUhoR2RYQTVVVUkwVm5wUGQzTlhZamh2ZGpaNGIyeDNjR1F5S3pKdGVGWkdibEZWUVdsRlFURjZaMnBLYW5ob2VYUjRVbE5XTlZrS2MydE9ObGh3V0hCbE1GTTJhbmhFV0dKb1ZWaFNOVlZhTTFkemQwTm5XVWxMYjFwSmVtb3dSVUYzVFVSYWQwRjNXa0ZKZDBsMFFsVlBabTQyZFUxbE5RcFFiMmRIWWtsSmVtbGhjbmxVYkhoSmRuQTNhbHB6Y1dsbVIwMXVVMGxUYVZGdmVGVllhbEZGTHpaNlJIcDJRbUZuWjJZNFFXcEJTMUpoWjFVMVVVaFBDbVkyZEVWaWFuZDZLM2xFVFhCMVZVZDNZMVV6Vm1WcFZHTXpabUYyTTNKcWVUbGFVbVZUVkVwVk1UaG1WMDF6WXpsMmJXNWtXVkU5Q2kwdExTMHRSVTVFSUVORlVsUkpSa2xEUVZSRkxTMHRMUzBLIn19fX0=\\\",\\\"integratedTime\\\":1715158341,\\\"logIndex\\\":92000277,\\\"logID\\\":\\\"c0d23d6ad406973f9559f3ba2d1ca01f84147d8ffc5b8445c224f98b9591801d\\\"}}\", \"dev.sigstore.cosign/certificate\":\"-----BEGIN CERTIFICATE-----\\nMIIFxTCCBUygAwIBAgIUZ0wFWOylmC0o+7LXZj2kEavti+IwCgYIKoZIzj0EAwMw\\nNzEVMBMGA1UEChMMc2lnc3RvcmUuZGV2MR4wHAYDVQQDExVzaWdzdG9yZS1pbnRl\\ncm1lZGlhdGUwHhcNMjQwNTA4MDg1MjIxWhcNMjQwNTA4MDkwMjIxWjAAMFkwEwYH\\nKoZIzj0CAQYIKoZIzj0DAQcDQgAE7kvkkvO0euaglRG2dKF2/w72AaQRYphCBo9Y\\ngxk/PioTALC5t7ovGI6hLB/TbnlOQTrkEz4J7uHN6JCKidVxb6OCBGswggRnMA4G\\nA1UdDwEB/wQEAwIHgDATBgNVHSUEDDAKBggrBgEFBQcDAzAdBgNVHQ4EFgQUuwJx\\noRjwXF1dzuC6FyrwB7Mr/90wHwYDVR0jBBgwFoAU39Ppz1YkEZb5qNjpKFWixi4Y\\nZD8wXAYDVR0RAQH/BFIwUIZOaHR0cHM6Ly9naXRsYWIuY29tL2FodW50c21hbi9j\\nb250YWluZXItc2lnbmluZy8vLmdpdGxhYi1jaS55bWxAcmVmcy9oZWFkcy9tYWlu\\nMCAGCisGAQQBg78wAQEEEmh0dHBzOi8vZ2l0bGFiLmNvbTAiBgorBgEEAYO/MAEI\\nBBQMEmh0dHBzOi8vZ2l0bGFiLmNvbTBeBgorBgEEAYO/MAEJBFAMTmh0dHBzOi8v\\nZ2l0bGFiLmNvbS9haHVudHNtYW4vY29udGFpbmVyLXNpZ25pbmcvLy5naXRsYWIt\\nY2kueW1sQHJlZnMvaGVhZHMvbWFpbjA4BgorBgEEAYO/MAEKBCoMKDEyZDdiNDYz\\nMDllZGUwMzY5NjNjNWMzNDQ5NTg1ZjJlOTNiM2M0NTAwHQYKKwYBBAGDvzABCwQP\\nDA1naXRsYWItaG9zdGVkMD4GCisGAQQBg78wAQwEMAwuaHR0cHM6Ly9naXRsYWIu\\nY29tL2FodW50c21hbi9jb250YWluZXItc2lnbmluZzA4BgorBgEEAYO/MAENBCoM\\nKDEyZDdiNDYzMDllZGUwMzY5NjNjNWMzNDQ5NTg1ZjJlOTNiM2M0NTAwHwYKKwYB\\nBAGDvzABDgQRDA9yZWZzL2hlYWRzL21haW4wGAYKKwYBBAGDvzABDwQKDAg1Njcw\\nMjUwOTAsBgorBgEEAYO/MAEQBB4MHGh0dHBzOi8vZ2l0bGFiLmNvbS9haHVudHNt\\nYW4wGAYKKwYBBAGDvzABEQQKDAg1ODk0Njc3MDBeBgorBgEEAYO/MAESBFAMTmh0\\ndHBzOi8vZ2l0bGFiLmNvbS9haHVudHNtYW4vY29udGFpbmVyLXNpZ25pbmcvLy5n\\naXRsYWItY2kueW1sQHJlZnMvaGVhZHMvbWFpbjA4BgorBgEEAYO/MAETBCoMKDEy\\nZDdiNDYzMDllZGUwMzY5NjNjNWMzNDQ5NTg1ZjJlOTNiM2M0NTAwFAYKKwYBBAGD\\nvzABFAQGDARwdXNoMFAGCisGAQQBg78wARUEQgxAaHR0cHM6Ly9naXRsYWIuY29t\\nL2FodW50c21hbi9jb250YWluZXItc2lnbmluZy8tL2pvYnMvNjgwNTA3NzQ1MTAW\\nBgorBgEEAYO/MAEWBAgMBnB1YmxpYzCBiwYKKwYBBAHWeQIEAgR9BHsAeQB3AN09\\nMGrGxxEyYxkeHJlnNwKiSl643jyt/4eKcoAvKe6OAAABj1dnVmsAAAQDAEgwRgIh\\nAKV2wnjShxFup9QB4VzOwsWb8ov6xolwpd2+2mxVFnQUAiEA1zgjJjxhytxRSV5Y\\nskN6XpXpe0S6jxDXbhUXR5UZ3WswCgYIKoZIzj0EAwMDZwAwZAIwItBUOfn6uMe5\\nPogGbIIziaryTlxIvp7jZsqifGMnSISiQoxUXjQE/6zDzvBaggf8AjAKRagU5QHO\\nf6tEbjwz+yDMpuUGwcU3VeiTc3fav3rjy9ZReSTJU18fWMsc9vmndYQ=\\n-----END CERTIFICATE-----\\n\", \"dev.sigstore.cosign/chain\":\"-----BEGIN CERTIFICATE-----\\nMIICGjCCAaGgAwIBAgIUALnViVfnU0brJasmRkHrn/UnfaQwCgYIKoZIzj0EAwMw\\nKjEVMBMGA1UEChMMc2lnc3RvcmUuZGV2MREwDwYDVQQDEwhzaWdzdG9yZTAeFw0y\\nMjA0MTMyMDA2MTVaFw0zMTEwMDUxMzU2NThaMDcxFTATBgNVBAoTDHNpZ3N0b3Jl\\nLmRldjEeMBwGA1UEAxMVc2lnc3RvcmUtaW50ZXJtZWRpYXRlMHYwEAYHKoZIzj0C\\nAQYFK4EEACIDYgAE8RVS/ysH+NOvuDZyPIZtilgUF9NlarYpAd9HP1vBBH1U5CV7\\n7LSS7s0ZiH4nE7Hv7ptS6LvvR/STk798LVgMzLlJ4HeIfF3tHSaexLcYpSASr1kS\\n0N/RgBJz/9jWCiXno3sweTAOBgNVHQ8BAf8EBAMCAQYwEwYDVR0lBAwwCgYIKwYB\\nBQUHAwMwEgYDVR0TAQH/BAgwBgEB/wIBADAdBgNVHQ4EFgQU39Ppz1YkEZb5qNjp\\nKFWixi4YZD8wHwYDVR0jBBgwFoAUWMAeX5FFpWapesyQoZMi0CrFxfowCgYIKoZI\\nzj0EAwMDZwAwZAIwPCsQK4DYiZYDPIaDi5HFKnfxXx6ASSVmERfsynYBiX2X6SJR\\nnZU84/9DZdnFvvxmAjBOt6QpBlc4J/0DxvkTCqpclvziL6BCCPnjdlIB3Pu3BxsP\\nmygUY7Ii2zbdCdliiow=\\n-----END CERTIFICATE-----\\n-----BEGIN CERTIFICATE-----\\nMIIB9zCCAXygAwIBAgIUALZNAPFdxHPwjeDloDwyYChAO/4wCgYIKoZIzj0EAwMw\\nKjEVMBMGA1UEChMMc2lnc3RvcmUuZGV2MREwDwYDVQQDEwhzaWdzdG9yZTAeFw0y\\nMTEwMDcxMzU2NTlaFw0zMTEwMDUxMzU2NThaMCoxFTATBgNVBAoTDHNpZ3N0b3Jl\\nLmRldjERMA8GA1UEAxMIc2lnc3RvcmUwdjAQBgcqhkjOPQIBBgUrgQQAIgNiAAT7\\nXeFT4rb3PQGwS4IajtLk3/OlnpgangaBclYpsYBr5i+4ynB07ceb3LP0OIOZdxex\\nX69c5iVuyJRQ+Hz05yi+UF3uBWAlHpiS5sh0+H2GHE7SXrk1EC5m1Tr19L9gg92j\\nYzBhMA4GA1UdDwEB/wQEAwIBBjAPBgNVHRMBAf8EBTADAQH/MB0GA1UdDgQWBBRY\\nwB5fkUWlZql6zJChkyLQKsXF+jAfBgNVHSMEGDAWgBRYwB5fkUWlZql6zJChkyLQ\\nKsXF+jAKBggqhkjOPQQDAwNpADBmAjEAj1nHeXZp+13NWBNa+EDsDP8G1WWg1tCM\\nWP/WHPqpaVo0jhsweNFZgSs0eE7wYI4qAjEA2WB9ot98sIkoF3vZYdd3/VtWB5b9\\nTNMea7Ix/stJ5TfcLLeABLE4BNJOsQ4vnBHJ\\n-----END CERTIFICATE-----\"}}], \"subject\":{\"mediaType\":\"application/vnd.docker.distribution.manifest.v2+json\", \"size\":2211, \"digest\":\"sha256:02e8898c811c5606bc14cbdb78c581b6129b880610f5203f2c1cb09e7384ca2c\"}}",

Things to verify

Verify that the View details link is shown for each signature.
Verify that when View details is clicked, the modal is shown with the signature details JSON, pretty formatted.

Related to #442848

Edited May 10, 2024 by Daniel Tian

Show signatures details modal on container registry page

What does this MR do and why?

How to set up and validate locally

Enable the container registry and generate tags

Set up mock response

Things to verify

Merge request reports