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