github.com/treeverse/lakefs@v1.24.1-0.20240520134607-95648127bfb0/webui/src/lib/components/repository/commits.jsx (about)

     1  import ButtonGroup from "react-bootstrap/ButtonGroup";
     2  import {ClipboardButton, LinkButton} from "../controls";
     3  import {BrowserIcon, LinkIcon, PackageIcon, PlayIcon} from "@primer/octicons-react";
     4  import Table from "react-bootstrap/Table";
     5  import {MetadataRow, MetadataUIButton} from "../../../pages/repositories/repository/commits/commit/metadata";
     6  import {Link} from "../nav";
     7  import dayjs from "dayjs";
     8  import Card from "react-bootstrap/Card";
     9  import React from "react";
    10  
    11  
    12  const CommitActions = ({ repo, commit }) => {
    13  
    14    const buttonVariant = "outline-dark";
    15  
    16    return (
    17      <div>
    18        <ButtonGroup className="commit-actions">
    19          <LinkButton
    20            buttonVariant="outline-dark"
    21            href={{pathname: '/repositories/:repoId/objects', params: {repoId: repo.id}, query: {ref: commit.id}}}
    22            tooltip="Browse commit objects">
    23            <BrowserIcon/>
    24          </LinkButton>
    25          <LinkButton
    26            buttonVariant={buttonVariant}
    27            href={{pathname: '/repositories/:repoId/actions', params: {repoId: repo.id}, query: {commit: commit.id}}}
    28            tooltip="View Commit Action runs">
    29            <PlayIcon/>
    30          </LinkButton>
    31          <ClipboardButton variant={buttonVariant} text={commit.id} tooltip="Copy ID to clipboard"/>
    32          <ClipboardButton variant={buttonVariant} text={`lakefs://${repo.id}/${commit.id}`} tooltip="Copy URI to clipboard" icon={<LinkIcon/>}/>
    33          <ClipboardButton variant={buttonVariant} text={`s3://${repo.id}/${commit.id}`} tooltip="Copy S3 URI to clipboard" icon={<PackageIcon/>}/>
    34        </ButtonGroup>
    35      </div>
    36    );
    37  };
    38  
    39  const getKeysOrNull = (metadata) => {
    40    if (!metadata) return null;
    41    const keys = Object.getOwnPropertyNames(metadata);
    42    if (keys.length === 0) return null;
    43    return keys;
    44  };
    45  
    46  const CommitMetadataTable = ({ commit }) => {
    47    const keys = getKeysOrNull(commit.metadata);
    48    if (!keys) return null;
    49  
    50    return (
    51      <>
    52        <Table>
    53          <thead>
    54          <tr>
    55            <th>Metadata Key</th>
    56            <th>Value</th>
    57          </tr>
    58          </thead>
    59          <tbody>
    60          {keys.map(key =>
    61            <MetadataRow metadata_key={key} metadata_value={commit.metadata[key]}/>)}
    62          </tbody>
    63        </Table>
    64      </>
    65    );
    66  };
    67  
    68  const CommitMetadataUIButtons = ({ commit }) => {
    69    const keys = getKeysOrNull(commit.metadata);
    70    if (!keys) return null;
    71  
    72    return (
    73      <>{
    74        keys.map((key) => <MetadataUIButton metadata_key={key} metadata_value={commit.metadata[key]}/>)
    75      }</>
    76    );
    77  };
    78  
    79  const CommitLink = ({ repoId, commitId }) => {
    80    return (
    81      <>
    82        <Link href={{
    83          pathname: '/repositories/:repoId/commits/:commitId',
    84          params: {repoId, commitId}
    85        }}>
    86          <code>{commitId}</code>
    87        </Link>
    88        <br/>
    89      </>
    90    );
    91  }
    92  
    93  const CommitInfo = ({ repo, commit }) => {
    94    return (
    95      <Table size="sm" borderless hover>
    96        <tbody>
    97        <tr>
    98          <td><strong>ID</strong></td>
    99          <td>
   100            <CommitLink repoId={repo.id} commitId={commit.id}/>
   101          </td>
   102        </tr>
   103        <tr>
   104          <td><strong>Committer</strong></td>
   105          <td>{commit.committer}</td>
   106        </tr>
   107        <tr>
   108          <td><strong>Creation Date</strong></td>
   109          <td>
   110            {dayjs.unix(commit.creation_date).format("MM/DD/YYYY HH:mm:ss")} ({dayjs.unix(commit.creation_date).fromNow()})
   111          </td>
   112        </tr>
   113        {(commit.parents) ? (
   114          <tr>
   115            <td>
   116              <strong>Parents</strong></td>
   117            <td>
   118              {commit.parents.map(cid => (
   119                <CommitLink key={cid} repoId={repo.id} commitId={cid}/>
   120              ))}
   121            </td>
   122          </tr>
   123        ) : <></>}
   124        </tbody>
   125      </Table>
   126    );
   127  };
   128  
   129  export const CommitMessage = ({ commit }) =>
   130      commit.message?.length ?
   131          <span>{commit.message}</span> : <span className="text-muted">(No commit message)</span>;
   132  
   133  export const CommitInfoCard = ({ repo, commit, bare = false }) => {
   134    const content = (
   135      <>
   136          <div className="d-flex">
   137            <div className="flex-grow-1">
   138              <h4><CommitMessage commit={commit}/></h4>
   139            </div>
   140            <div>
   141              <CommitActions repo={repo} commit={commit}/>
   142            </div>
   143          </div>
   144  
   145        <div className="mt-4">
   146          <CommitInfo repo={repo} commit={commit}/>
   147          <CommitMetadataUIButtons commit={commit}/>
   148          <div className="mt-3">
   149            <CommitMetadataTable commit={commit}/>
   150          </div>
   151        </div>
   152      </>
   153    );
   154    if (bare) return content;
   155    return (
   156      <Card>
   157        <Card.Body>
   158          {content}
   159        </Card.Body>
   160      </Card>
   161    )
   162  }