Line data Source code
1 43 : import React, { useState, useEffect } from 'react';
2 :
3 : import cockpit from 'cockpit';
4 : import { ListingTable } from "cockpit-components-table";
5 :
6 : import * as client from './client.js';
7 : import * as utils from './util.js';
8 :
9 43 : const _ = cockpit.gettext;
10 :
11 1 : const IdColumn = Id => {
12 1 : Id = utils.truncate_id(Id);
13 : // Not an id but <missing> or something else
14 1 : if (/<[a-z]+>/.test(Id)) {
15 1 : return <div className="ct-grey-text">{Id}</div>;
16 1 : }
17 1 : return Id;
18 1 : };
19 :
20 1 : const ImageDetails = ({ con, image }) => {
21 1 : const [history, setHistory] = useState([]);
22 1 : const [error, setError] = useState(null);
23 1 : const id = image.Id;
24 :
25 1 : useEffect(() => {
26 1 : client.imageHistory(con, id).then(setHistory)
27 0 : .catch(ex => {
28 0 : console.error("Cannot get image history", ex);
29 0 : setError(true);
30 0 : });
31 1 : }, [con, id]);
32 :
33 1 : const columns = ["ID", _("Created"), _("Created by"), _("Size"), _("Comments")];
34 1 : let showComments = false;
35 1 : const rows = history.map(layer => {
36 1 : const row = {
37 1 : columns: [
38 1 : { title: IdColumn(layer.Id), props: { className: "ignore-pixels" } },
39 1 : { title: <utils.RelativeTime time={layer.Created * 1000} />, props: { className: "ignore-pixels" } },
40 1 : { title: layer.CreatedBy, props: { className: "ignore-pixels" } },
41 1 : { title: cockpit.format_bytes(layer.Size), props: { className: "ignore-pixels" } },
42 1 : { title: layer.Comment, props: { className: "ignore-pixels" } },
43 1 : ]
44 1 : };
45 0 : if (layer.Comment) {
46 0 : showComments = true;
47 0 : }
48 1 : return row;
49 1 : });
50 :
51 1 : if (!showComments) {
52 1 : columns.pop();
53 1 : }
54 :
55 1 : return (
56 1 : <ListingTable
57 1 : variant='compact'
58 1 : isStickyHeader
59 0 : emptyCaption={error ? _("Unable to load image history") : _("Loading details...")}
60 1 : columns={columns}
61 1 : rows={rows} />
62 : );
63 1 : };
64 :
65 43 : export default ImageDetails;
|