✨ Change tags page (#220)

* ✨ Support create user and update user * ✨ Change tags page --------- Signed-off-by: Tosone <[email protected]>
go-sigma · Oct 25, 2023 · 02d70ee · 02d70ee
1 parent a4d8945
commit 02d70ee
Show file tree

Hide file tree

Showing 8 changed files with 60 additions and 31 deletions.
diff --git a/pkg/handlers/apidocs/docs.go b/pkg/handlers/apidocs/docs.go
diff --git a/pkg/handlers/apidocs/swagger.json b/pkg/handlers/apidocs/swagger.json
@@ -4405,6 +4405,10 @@
                     "type": "string",
                     "example": "latest"
                 },
+                "pull_times": {
+                    "type": "integer",
+                    "example": 10
+                },
                 "pushed_at": {
                     "type": "string",
                     "example": "2006-01-02 15:04:05"

diff --git a/pkg/handlers/apidocs/swagger.yaml b/pkg/handlers/apidocs/swagger.yaml
@@ -1037,6 +1037,9 @@ definitions:
       name:
         example: latest
         type: string
+      pull_times:
+        example: 10
+        type: integer
       pushed_at:
         example: "2006-01-02 15:04:05"
         type: string

diff --git a/pkg/handlers/tags/tags_list.go b/pkg/handlers/tags/tags_list.go
@@ -139,6 +139,7 @@ func (h *handlers) ListTag(c echo.Context) error {
 				UpdatedAt:       tag.Artifact.UpdatedAt.Format(consts.DefaultTimePattern),
 			},
 			Artifacts: artifacts,
+			PullTimes: tag.PullTimes,
 			PushedAt:  tag.PushedAt.Format(consts.DefaultTimePattern),
 			CreatedAt: tag.CreatedAt.Format(consts.DefaultTimePattern),
 			UpdatedAt: tag.UpdatedAt.Format(consts.DefaultTimePattern),

diff --git a/pkg/types/tag.go b/pkg/types/tag.go
@@ -41,6 +41,7 @@ type TagItem struct {
 	ID        int64             `json:"id" example:"1"`
 	Name      string            `json:"name" example:"latest"`
 	PushedAt  string            `json:"pushed_at" example:"2006-01-02 15:04:05"`
+	PullTimes int64             `json:"pull_times" example:"10"`
 	Artifact  TagItemArtifact   `json:"artifact"`
 	Artifacts []TagItemArtifact `json:"artifacts"`
 	CreatedAt string            `json:"created_at" example:"2006-01-02 15:04:05"`

diff --git a/web/src/interfaces/index.ts b/web/src/interfaces/index.ts
@@ -134,6 +134,7 @@ export interface ITag {
   name: string;
   artifact: IArtifact;
   artifacts: IArtifact[];
+  pull_times: number;
   pushed_at: string;
   created_at: string;
   updated_at: string;

diff --git a/web/src/pages/Tag/TableItem.tsx b/web/src/pages/Tag/TableItem.tsx
@@ -72,12 +72,25 @@ function DetailItem({ artifact }: { artifact: IArtifact }) {
   let imageConfigObj = JSON.parse(artifact.config_raw) as IImageConfig;
   return (
     <tr className="hover:bg-gray-50 cursor-pointer">
-      <td className="text-left">
+      <td className="text-left w-[180px]">
         <code className="text-xs underline underline-offset-1 text-blue-600 hover:text-blue-500">
           {cutDigest(artifact.digest)}
         </code>
       </td>
-      <td className="text-right text-xs">
+      <td className="text-left text-xs w-[180px]">
+        Image
+      </td>
+      <td className="text-left text-xs w-[180px]">
+        <div className='flex gap-1'>
+          {distros(sbomObj.distro?.name) === "" ? "" : (
+            <img src={"/distros/" + distros(sbomObj.distro.name)} alt={sbomObj.distro.name} className="w-4 h-4 inline relative" />
+          )}
+          <div className=''>
+            {distroName(sbomObj.distro?.name) === "" ? "-" : distroName(sbomObj.distro.name) + " " + sbomObj.distro.version}
+          </div>
+        </div>
+      </td>
+      <td className="text-left text-xs w-[180px]">
         {
           imageConfigObj.os === undefined ||
             imageConfigObj.architecture === undefined ||
@@ -87,30 +100,23 @@ function DetailItem({ artifact }: { artifact: IArtifact }) {
           )
         }
       </td>
-      <td className="text-right text-xs">
-        <div className='flex flex-row-reverse gap-1'>
-          <div className=''>
-            {distroName(sbomObj.distro?.name) === "" ? "-" : distroName(sbomObj.distro.name) + " " + sbomObj.distro.version}
-          </div>
-          {distros(sbomObj.distro?.name) === "" ? "" : (
-            <img src={"/distros/" + distros(sbomObj.distro.name)} alt={sbomObj.distro.name} className="w-4 h-4 inline relative" />
-          )}
-        </div>
+      <td className="text-left text-xs w-[180px]">
+        Verified
       </td>
-      <td className="text-right text-xs">
-        {humanFormat(artifact.blob_size || 0)}
-      </td>
-      <td className="text-right text-xs">
+      <td className="text-left text-xs w-[180px]">
         {(artifact.pull_times || 0) > 0 ? dayjs().to(dayjs(artifact.last_pull)) : "Never pulled"}
       </td>
-      <td className="text-right text-xs">
+      {/* <td className="text-right text-xs w-[180px]">
         {artifact.pull_times}
-      </td>
-      <td className="text-right text-xs">
+      </td> */}
+      <td className="text-right text-xs w-[220px]">
         <span className="bg-red-800 text-white text-xs font-medium mr-1 px-2 py-0.5 dark:bg-red-900 dark:text-red-300"><span>{vulnerabilityObj.critical || 0}</span> C</span>
         <span className="bg-red-300 text-gray-800 text-xs font-medium mr-1 px-2 py-0.5 dark:bg-red-900 dark:text-red-300">{vulnerabilityObj.high || 0} H</span>
         <span className="bg-amber-400 text-gray-800 text-xs font-medium mr-1 px-2 py-0.5 dark:bg-red-900 dark:text-red-300">{vulnerabilityObj.medium || 0} M</span>
-        <span className="bg-amber-200 text-gray-800 text-xs font-medium mr-1 px-2 py-0.5 dark:bg-red-900 dark:text-red-300">{vulnerabilityObj.low || 0} L</span>
+        <span className="bg-amber-200 text-gray-800 text-xs font-medium px-2 py-0.5 dark:bg-red-900 dark:text-red-300">{vulnerabilityObj.low || 0} L</span>
+      </td>
+      <td className="text-right text-xs w-[180px]">
+        {humanFormat(artifact.blob_size || 0)}
       </td>
     </tr>
   );

diff --git a/web/src/pages/Tag/index.tsx b/web/src/pages/Tag/index.tsx
@@ -254,36 +254,45 @@ export default function Tag({ localServer }: { localServer: string }) {
                       {/* first row end */}
 
                       {/* second row begin */}
-                      <div className="text-sm text-gray-600">
+                      <div className="text-xs text-gray-600">
                         Last pushed <span className="font-semibold">{dayjs().to(dayjs(tag.pushed_at))}</span>
                       </div>
+                      <div className="mt-2 text-xs text-gray-600">
+                        Pull times <span className="font-semibold">{tag.pull_times === undefined ? 0 : tag.pull_times}</span>
+                      </div>
                       {/* second row end */}
 
                       {/* third row begin */}
-                      <table className="min-w-full">
+                      <table className="mt-2 min-w-full">
                         <thead>
                           <tr className="">
-                            <th className="pt-5 pb-1 text-left text-xs font-medium text-gray-500 uppercase tracking-wider whitespace-nowrap">
+                            <th className="pb-1 text-left text-xs font-medium text-gray-500 uppercase tracking-wider whitespace-nowrap">
                               Digest
                             </th>
-                            <th className="pt-5 pb-1 text-right text-xs font-medium text-gray-500 uppercase tracking-wider whitespace-nowrap">
-                              Os/Arch
+                            <th className="pb-1 text-left text-xs font-medium text-gray-500 uppercase tracking-wider whitespace-nowrap">
+                              Type
                             </th>
-                            <th className="pt-5 pb-1 text-right text-xs font-medium text-gray-500 uppercase tracking-wider whitespace-nowrap">
+                            <th className="pb-1 text-left text-xs font-medium text-gray-500 uppercase tracking-wider whitespace-nowrap">
                               Distro
                             </th>
-                            <th className="pt-5 pb-1 text-right text-xs font-medium text-gray-500 uppercase tracking-wider whitespace-nowrap">
-                              Size
+                            <th className="pb-1 text-left text-xs font-medium text-gray-500 uppercase tracking-wider whitespace-nowrap">
+                              Os/Arch
                             </th>
-                            <th className="pt-5 pb-1 text-right text-xs font-medium text-gray-500 uppercase tracking-wider whitespace-nowrap">
+                            <th className="pb-1 text-left text-xs font-medium text-gray-500 uppercase tracking-wider whitespace-nowrap">
+                              Signing
+                            </th>
+                            <th className="pb-1 text-left text-xs font-medium text-gray-500 uppercase tracking-wider whitespace-nowrap">
                               Last pull
                             </th>
-                            <th className="pt-5 pb-1 text-right text-xs font-medium text-gray-500 uppercase tracking-wider whitespace-nowrap">
+                            {/* <th className="pb-1 text-right text-xs font-medium text-gray-500 uppercase tracking-wider whitespace-nowrap">
                               Pull Times
-                            </th>
-                            <th className="pt-5 pb-1 text-right text-xs font-medium text-gray-500 uppercase tracking-wider whitespace-nowrap">
+                            </th> */}
+                            <th className="pb-1 text-right text-xs font-medium text-gray-500 uppercase tracking-wider whitespace-nowrap">
                               Vulnerabilities
                             </th>
+                            <th className="pb-1 text-right text-xs font-medium text-gray-500 uppercase tracking-wider whitespace-nowrap">
+                              Size
+                            </th>
                           </tr>
                         </thead>
                         <TableItem namespace={namespace || ""} repository={repository || ""} artifact={tag.artifact} artifacts={tag.artifacts} />