@red-hat-developer-hub/backstage-plugin-openshift-image-registry 1.12.4 → 1.13.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +12 -0
- package/dist/components/OcirImages/OcirImageSearchBar.esm.js +11 -10
- package/dist/components/OcirImages/OcirImageSearchBar.esm.js.map +1 -1
- package/dist/components/OcirImages/OcirImageSidebar.esm.js +78 -47
- package/dist/components/OcirImages/OcirImageSidebar.esm.js.map +1 -1
- package/dist/components/OcirImages/OcirImagesCard.esm.js +48 -33
- package/dist/components/OcirImages/OcirImagesCard.esm.js.map +1 -1
- package/dist/components/OcirImages/OcirImagesCards.esm.js +34 -27
- package/dist/components/OcirImages/OcirImagesCards.esm.js.map +1 -1
- package/dist/components/OcirImages/OcirImagesView.esm.js +3 -3
- package/dist/components/OcirImages/OcirImagesView.esm.js.map +1 -1
- package/dist/components/OcirPage/OcirPage.esm.js +5 -2
- package/dist/components/OcirPage/OcirPage.esm.js.map +1 -1
- package/dist/index.d.ts +2 -3
- package/package.json +11 -11
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,17 @@
|
|
|
1
1
|
### Dependencies
|
|
2
2
|
|
|
3
|
+
## 1.13.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- 2ac5cf5: Backstage version bump to v1.39.1
|
|
8
|
+
|
|
9
|
+
## 1.12.5
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- 7f7267a: Updated dependency `@red-hat-developer-hub/backstage-plugin-theme` to `^0.8.0`.
|
|
14
|
+
|
|
3
15
|
## 1.12.4
|
|
4
16
|
|
|
5
17
|
### Patch Changes
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { useState } from 'react';
|
|
2
3
|
import useDebounce from 'react-use/lib/useDebounce';
|
|
3
4
|
import { makeStyles, Toolbar, FormControl, Input, InputAdornment, IconButton } from '@material-ui/core';
|
|
4
5
|
import Clear from '@material-ui/icons/Clear';
|
|
@@ -16,7 +17,7 @@ const OcirImageSearchBar = ({
|
|
|
16
17
|
setImageStreams
|
|
17
18
|
}) => {
|
|
18
19
|
const classes = useStyles();
|
|
19
|
-
const [search, setSearch] =
|
|
20
|
+
const [search, setSearch] = useState("");
|
|
20
21
|
const searchByName = () => {
|
|
21
22
|
const filteredImageStreams = imageStreams ? imageStreams.filter((imgSt) => {
|
|
22
23
|
const s = search.toLocaleUpperCase("en-US");
|
|
@@ -34,7 +35,7 @@ const OcirImageSearchBar = ({
|
|
|
34
35
|
100,
|
|
35
36
|
[search]
|
|
36
37
|
);
|
|
37
|
-
return /* @__PURE__ */
|
|
38
|
+
return /* @__PURE__ */ jsx(Toolbar, { className: classes.searchToolbar, children: /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(
|
|
38
39
|
Input,
|
|
39
40
|
{
|
|
40
41
|
"aria-label": "search",
|
|
@@ -43,19 +44,19 @@ const OcirImageSearchBar = ({
|
|
|
43
44
|
autoComplete: "off",
|
|
44
45
|
onChange: (event) => setSearch(event.target.value),
|
|
45
46
|
value: search,
|
|
46
|
-
startAdornment: /* @__PURE__ */
|
|
47
|
-
endAdornment: /* @__PURE__ */
|
|
47
|
+
startAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "start", children: /* @__PURE__ */ jsx(Search, {}) }),
|
|
48
|
+
endAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx(
|
|
48
49
|
IconButton,
|
|
49
50
|
{
|
|
50
51
|
"aria-label": "clear search",
|
|
51
52
|
onClick: () => setSearch(""),
|
|
52
53
|
edge: "end",
|
|
53
|
-
disabled: search.length === 0
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
))
|
|
54
|
+
disabled: search.length === 0,
|
|
55
|
+
children: /* @__PURE__ */ jsx(Clear, {})
|
|
56
|
+
}
|
|
57
|
+
) })
|
|
57
58
|
}
|
|
58
|
-
)));
|
|
59
|
+
) }) });
|
|
59
60
|
};
|
|
60
61
|
|
|
61
62
|
export { OcirImageSearchBar };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OcirImageSearchBar.esm.js","sources":["../../../src/components/OcirImages/OcirImageSearchBar.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport
|
|
1
|
+
{"version":3,"file":"OcirImageSearchBar.esm.js","sources":["../../../src/components/OcirImages/OcirImageSearchBar.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { useState } from 'react';\nimport type { Dispatch, SetStateAction } from 'react';\nimport useDebounce from 'react-use/lib/useDebounce';\n\nimport {\n FormControl,\n IconButton,\n Input,\n InputAdornment,\n makeStyles,\n Toolbar,\n} from '@material-ui/core';\nimport Clear from '@material-ui/icons/Clear';\nimport Search from '@material-ui/icons/Search';\n\nimport { ImageStreamMetadata } from '../../types';\n\nconst useStyles = makeStyles(_theme => ({\n searchToolbar: {\n paddingLeft: 0,\n paddingRight: 0,\n },\n input: {},\n}));\n\ntype OcirImageSearchBarProps = {\n imageStreams: ImageStreamMetadata[];\n setImageStreams: Dispatch<SetStateAction<ImageStreamMetadata[] | undefined>>;\n};\n\nexport const OcirImageSearchBar = ({\n imageStreams,\n setImageStreams,\n}: OcirImageSearchBarProps) => {\n const classes = useStyles();\n\n const [search, setSearch] = useState<string>('');\n\n const searchByName = () => {\n const filteredImageStreams = imageStreams\n ? imageStreams.filter((imgSt: ImageStreamMetadata) => {\n const s = search.toLocaleUpperCase('en-US');\n const { name, description = '', tags } = imgSt;\n const n = name.toLocaleUpperCase('en-US');\n const d = description.toLocaleUpperCase('en-US');\n return (\n n.includes(s) ||\n d.includes(s) ||\n !!tags.find(t => t.toLocaleUpperCase('en-US').includes(s))\n );\n })\n : undefined;\n setImageStreams(filteredImageStreams);\n };\n\n useDebounce(\n () => {\n searchByName();\n },\n 100,\n [search],\n );\n\n return (\n <Toolbar className={classes.searchToolbar}>\n <FormControl>\n <Input\n aria-label=\"search\"\n className={classes.input}\n placeholder=\"Search\"\n autoComplete=\"off\"\n onChange={event => setSearch(event.target.value)}\n value={search}\n startAdornment={\n <InputAdornment position=\"start\">\n <Search />\n </InputAdornment>\n }\n endAdornment={\n <InputAdornment position=\"end\">\n <IconButton\n aria-label=\"clear search\"\n onClick={() => setSearch('')}\n edge=\"end\"\n disabled={search.length === 0}\n >\n <Clear />\n </IconButton>\n </InputAdornment>\n }\n />\n </FormControl>\n </Toolbar>\n );\n};\n"],"names":[],"mappings":";;;;;;;AAiCA,MAAM,SAAA,GAAY,WAAW,CAAW,MAAA,MAAA;AAAA,EACtC,aAAe,EAAA;AAAA,IACb,WAAa,EAAA,CAAA;AAAA,IACb,YAAc,EAAA;AAAA,GAChB;AAAA,EACA,OAAO;AACT,CAAE,CAAA,CAAA;AAOK,MAAM,qBAAqB,CAAC;AAAA,EACjC,YAAA;AAAA,EACA;AACF,CAA+B,KAAA;AAC7B,EAAA,MAAM,UAAU,SAAU,EAAA;AAE1B,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAI,SAAiB,EAAE,CAAA;AAE/C,EAAA,MAAM,eAAe,MAAM;AACzB,IAAA,MAAM,oBAAuB,GAAA,YAAA,GACzB,YAAa,CAAA,MAAA,CAAO,CAAC,KAA+B,KAAA;AAClD,MAAM,MAAA,CAAA,GAAI,MAAO,CAAA,iBAAA,CAAkB,OAAO,CAAA;AAC1C,MAAA,MAAM,EAAE,IAAA,EAAM,WAAc,GAAA,EAAA,EAAI,MAAS,GAAA,KAAA;AACzC,MAAM,MAAA,CAAA,GAAI,IAAK,CAAA,iBAAA,CAAkB,OAAO,CAAA;AACxC,MAAM,MAAA,CAAA,GAAI,WAAY,CAAA,iBAAA,CAAkB,OAAO,CAAA;AAC/C,MAAA,OACE,EAAE,QAAS,CAAA,CAAC,KACZ,CAAE,CAAA,QAAA,CAAS,CAAC,CACZ,IAAA,CAAC,CAAC,IAAK,CAAA,IAAA,CAAK,OAAK,CAAE,CAAA,iBAAA,CAAkB,OAAO,CAAE,CAAA,QAAA,CAAS,CAAC,CAAC,CAAA;AAAA,KAE5D,CACD,GAAA,SAAA;AACJ,IAAA,eAAA,CAAgB,oBAAoB,CAAA;AAAA,GACtC;AAEA,EAAA,WAAA;AAAA,IACE,MAAM;AACJ,MAAa,YAAA,EAAA;AAAA,KACf;AAAA,IACA,GAAA;AAAA,IACA,CAAC,MAAM;AAAA,GACT;AAEA,EAAA,2BACG,OAAQ,EAAA,EAAA,SAAA,EAAW,OAAQ,CAAA,aAAA,EAC1B,8BAAC,WACC,EAAA,EAAA,QAAA,kBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,YAAW,EAAA,QAAA;AAAA,MACX,WAAW,OAAQ,CAAA,KAAA;AAAA,MACnB,WAAY,EAAA,QAAA;AAAA,MACZ,YAAa,EAAA,KAAA;AAAA,MACb,QAAU,EAAA,CAAA,KAAA,KAAS,SAAU,CAAA,KAAA,CAAM,OAAO,KAAK,CAAA;AAAA,MAC/C,KAAO,EAAA,MAAA;AAAA,MACP,gCACG,GAAA,CAAA,cAAA,EAAA,EAAe,UAAS,OACvB,EAAA,QAAA,kBAAA,GAAA,CAAC,UAAO,CACV,EAAA,CAAA;AAAA,MAEF,YACE,kBAAA,GAAA,CAAC,cAAe,EAAA,EAAA,QAAA,EAAS,KACvB,EAAA,QAAA,kBAAA,GAAA;AAAA,QAAC,UAAA;AAAA,QAAA;AAAA,UACC,YAAW,EAAA,cAAA;AAAA,UACX,OAAA,EAAS,MAAM,SAAA,CAAU,EAAE,CAAA;AAAA,UAC3B,IAAK,EAAA,KAAA;AAAA,UACL,QAAA,EAAU,OAAO,MAAW,KAAA,CAAA;AAAA,UAE5B,8BAAC,KAAM,EAAA,EAAA;AAAA;AAAA,OAEX,EAAA;AAAA;AAAA,KAGN,CACF,EAAA,CAAA;AAEJ;;;;"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
2
2
|
import { MarkdownContent, CopyTextButton } from '@backstage/core-components';
|
|
3
3
|
import { makeStyles, createStyles, Drawer, Typography, IconButton, Box, Chip, Input } from '@material-ui/core';
|
|
4
4
|
import Close from '@material-ui/icons/Close';
|
|
@@ -46,7 +46,7 @@ const OcirImageSidebar = ({
|
|
|
46
46
|
}) => {
|
|
47
47
|
const classes = useDrawerStyles();
|
|
48
48
|
const contentClasses = useDrawerContentStyles();
|
|
49
|
-
return /* @__PURE__ */
|
|
49
|
+
return /* @__PURE__ */ jsx(
|
|
50
50
|
Drawer,
|
|
51
51
|
{
|
|
52
52
|
anchor: "right",
|
|
@@ -54,52 +54,83 @@ const OcirImageSidebar = ({
|
|
|
54
54
|
onClose,
|
|
55
55
|
classes: {
|
|
56
56
|
paper: classes.paper
|
|
57
|
-
}
|
|
58
|
-
},
|
|
59
|
-
/* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: contentClasses.header }, /* @__PURE__ */ React.createElement(Typography, { variant: "h5" }, imageStream.name), /* @__PURE__ */ React.createElement(
|
|
60
|
-
IconButton,
|
|
61
|
-
{
|
|
62
|
-
key: "dismiss",
|
|
63
|
-
title: "Close the drawer",
|
|
64
|
-
onClick: onClose,
|
|
65
|
-
color: "inherit"
|
|
66
|
-
},
|
|
67
|
-
/* @__PURE__ */ React.createElement(Close, { className: contentClasses.icon })
|
|
68
|
-
)), /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(Typography, { variant: "body2", className: contentClasses.label }, "Description"), /* @__PURE__ */ React.createElement(
|
|
69
|
-
MarkdownContent,
|
|
70
|
-
{
|
|
71
|
-
content: imageStream.description ?? "N/A",
|
|
72
|
-
className: contentClasses.description
|
|
73
|
-
}
|
|
74
|
-
)), /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(Typography, { variant: "body2", className: contentClasses.label }, "Last Modified"), /* @__PURE__ */ React.createElement(Typography, { className: contentClasses.description }, imageStream.last_modified || "N/A")), /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(Typography, { variant: "body2", className: contentClasses.label }, "Version"), /* @__PURE__ */ React.createElement(Typography, { className: contentClasses.description }, imageStream.version ?? "N/A")), /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(Typography, { variant: "body2", className: contentClasses.label }, "Size"), /* @__PURE__ */ React.createElement(Typography, { className: contentClasses.description }, imageStream.size ?? "N/A")), /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(
|
|
75
|
-
Typography,
|
|
76
|
-
{
|
|
77
|
-
variant: "body2",
|
|
78
|
-
className: contentClasses.label,
|
|
79
|
-
style: { marginBottom: "4px" }
|
|
80
57
|
},
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
58
|
+
children: /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
59
|
+
/* @__PURE__ */ jsxs("div", { className: contentClasses.header, children: [
|
|
60
|
+
/* @__PURE__ */ jsx(Typography, { variant: "h5", children: imageStream.name }),
|
|
61
|
+
/* @__PURE__ */ jsx(
|
|
62
|
+
IconButton,
|
|
63
|
+
{
|
|
64
|
+
title: "Close the drawer",
|
|
65
|
+
onClick: onClose,
|
|
66
|
+
color: "inherit",
|
|
67
|
+
children: /* @__PURE__ */ jsx(Close, { className: contentClasses.icon })
|
|
68
|
+
},
|
|
69
|
+
"dismiss"
|
|
70
|
+
)
|
|
71
|
+
] }),
|
|
72
|
+
/* @__PURE__ */ jsxs(Fragment, { children: [
|
|
73
|
+
/* @__PURE__ */ jsxs(Box, { children: [
|
|
74
|
+
/* @__PURE__ */ jsx(Typography, { variant: "body2", className: contentClasses.label, children: "Description" }),
|
|
75
|
+
/* @__PURE__ */ jsx(
|
|
76
|
+
MarkdownContent,
|
|
77
|
+
{
|
|
78
|
+
content: imageStream.description ?? "N/A",
|
|
79
|
+
className: contentClasses.description
|
|
80
|
+
}
|
|
81
|
+
)
|
|
82
|
+
] }),
|
|
83
|
+
/* @__PURE__ */ jsxs(Box, { children: [
|
|
84
|
+
/* @__PURE__ */ jsx(Typography, { variant: "body2", className: contentClasses.label, children: "Last Modified" }),
|
|
85
|
+
/* @__PURE__ */ jsx(Typography, { className: contentClasses.description, children: imageStream.last_modified || "N/A" })
|
|
86
|
+
] }),
|
|
87
|
+
/* @__PURE__ */ jsxs(Box, { children: [
|
|
88
|
+
/* @__PURE__ */ jsx(Typography, { variant: "body2", className: contentClasses.label, children: "Version" }),
|
|
89
|
+
/* @__PURE__ */ jsx(Typography, { className: contentClasses.description, children: imageStream.version ?? "N/A" })
|
|
90
|
+
] }),
|
|
91
|
+
/* @__PURE__ */ jsxs(Box, { children: [
|
|
92
|
+
/* @__PURE__ */ jsx(Typography, { variant: "body2", className: contentClasses.label, children: "Size" }),
|
|
93
|
+
/* @__PURE__ */ jsx(Typography, { className: contentClasses.description, children: imageStream.size ?? "N/A" })
|
|
94
|
+
] }),
|
|
95
|
+
/* @__PURE__ */ jsxs(Box, { children: [
|
|
96
|
+
/* @__PURE__ */ jsx(
|
|
97
|
+
Typography,
|
|
98
|
+
{
|
|
99
|
+
variant: "body2",
|
|
100
|
+
className: contentClasses.label,
|
|
101
|
+
style: { marginBottom: "4px" },
|
|
102
|
+
children: "Tags"
|
|
103
|
+
}
|
|
104
|
+
),
|
|
105
|
+
imageStream.tags?.length ? imageStream.tags.map((tag) => /* @__PURE__ */ jsx(Chip, { size: "small", label: tag }, tag)) : "N/A"
|
|
106
|
+
] }),
|
|
107
|
+
/* @__PURE__ */ jsxs(Box, { children: [
|
|
108
|
+
/* @__PURE__ */ jsx(Typography, { variant: "body2", className: contentClasses.label, children: "Docker Pull Command" }),
|
|
109
|
+
imageStream.dockerImageRepo ? /* @__PURE__ */ jsx(
|
|
110
|
+
Input,
|
|
111
|
+
{
|
|
112
|
+
defaultValue: `docker pull ${imageStream.dockerImageRepo}`,
|
|
113
|
+
readOnly: true,
|
|
114
|
+
fullWidth: true,
|
|
115
|
+
style: {
|
|
116
|
+
fontSize: "14px",
|
|
117
|
+
paddingLeft: "12px"
|
|
118
|
+
},
|
|
119
|
+
margin: "dense",
|
|
120
|
+
endAdornment: /* @__PURE__ */ jsx(
|
|
121
|
+
CopyTextButton,
|
|
122
|
+
{
|
|
123
|
+
text: `docker pull ${imageStream.dockerImageRepo}`,
|
|
124
|
+
tooltipText: "Command copied to clipboard",
|
|
125
|
+
tooltipDelay: 2e3
|
|
126
|
+
}
|
|
127
|
+
)
|
|
128
|
+
}
|
|
129
|
+
) : "N/A"
|
|
130
|
+
] })
|
|
131
|
+
] })
|
|
132
|
+
] })
|
|
133
|
+
}
|
|
103
134
|
);
|
|
104
135
|
};
|
|
105
136
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OcirImageSidebar.esm.js","sources":["../../../src/components/OcirImages/OcirImageSidebar.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport
|
|
1
|
+
{"version":3,"file":"OcirImageSidebar.esm.js","sources":["../../../src/components/OcirImages/OcirImageSidebar.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { CopyTextButton, MarkdownContent } from '@backstage/core-components';\n\nimport {\n Box,\n Chip,\n createStyles,\n Drawer,\n IconButton,\n Input,\n makeStyles,\n Theme,\n Typography,\n} from '@material-ui/core';\nimport Close from '@material-ui/icons/Close';\n\nimport { ImageStreamMetadata } from '../../types';\n\nconst useDrawerStyles = makeStyles<Theme>(theme =>\n createStyles({\n paper: {\n width: '40%',\n padding: theme.spacing(2.5),\n gap: '3%',\n },\n }),\n);\n\nconst useDrawerContentStyles = makeStyles<Theme>(theme =>\n createStyles({\n header: {\n display: 'flex',\n flexDirection: 'row',\n justifyContent: 'space-between',\n alignItems: 'baseline',\n },\n icon: {\n fontSize: 20,\n },\n label: {\n color: theme.palette.text.secondary,\n textTransform: 'uppercase',\n fontSize: '0.65rem',\n fontWeight: 'bold',\n letterSpacing: 0.5,\n lineHeight: 1,\n paddingBottom: '0.2rem',\n },\n description: {\n '& p': {\n margin: '0px',\n },\n },\n }),\n);\n\ntype OcirImageSidebarProps = {\n open: boolean;\n onClose: () => void;\n imageStream: ImageStreamMetadata;\n};\n\nexport const OcirImageSidebar = ({\n open,\n onClose,\n imageStream,\n}: OcirImageSidebarProps) => {\n const classes = useDrawerStyles();\n const contentClasses = useDrawerContentStyles();\n return (\n <Drawer\n anchor=\"right\"\n open={open}\n onClose={onClose}\n classes={{\n paper: classes.paper,\n }}\n >\n <>\n <div className={contentClasses.header}>\n <Typography variant=\"h5\">{imageStream.name}</Typography>\n <IconButton\n key=\"dismiss\"\n title=\"Close the drawer\"\n onClick={onClose}\n color=\"inherit\"\n >\n <Close className={contentClasses.icon} />\n </IconButton>\n </div>\n <>\n <Box>\n <Typography variant=\"body2\" className={contentClasses.label}>\n Description\n </Typography>\n <MarkdownContent\n content={imageStream.description ?? 'N/A'}\n className={contentClasses.description}\n />\n </Box>\n <Box>\n <Typography variant=\"body2\" className={contentClasses.label}>\n Last Modified\n </Typography>\n <Typography className={contentClasses.description}>\n {imageStream.last_modified || 'N/A'}\n </Typography>\n </Box>\n <Box>\n <Typography variant=\"body2\" className={contentClasses.label}>\n Version\n </Typography>\n <Typography className={contentClasses.description}>\n {imageStream.version ?? 'N/A'}\n </Typography>\n </Box>\n <Box>\n <Typography variant=\"body2\" className={contentClasses.label}>\n Size\n </Typography>\n <Typography className={contentClasses.description}>\n {imageStream.size ?? 'N/A'}\n </Typography>\n </Box>\n <Box>\n <Typography\n variant=\"body2\"\n className={contentClasses.label}\n style={{ marginBottom: '4px' }}\n >\n Tags\n </Typography>\n {imageStream.tags?.length\n ? imageStream.tags.map((tag: string) => (\n <Chip key={tag} size=\"small\" label={tag} />\n ))\n : 'N/A'}\n </Box>\n <Box>\n <Typography variant=\"body2\" className={contentClasses.label}>\n Docker Pull Command\n </Typography>\n {imageStream.dockerImageRepo ? (\n <Input\n defaultValue={`docker pull ${imageStream.dockerImageRepo}`}\n readOnly\n fullWidth\n style={{\n fontSize: '14px',\n paddingLeft: '12px',\n }}\n margin=\"dense\"\n endAdornment={\n <CopyTextButton\n text={`docker pull ${imageStream.dockerImageRepo}`}\n tooltipText=\"Command copied to clipboard\"\n tooltipDelay={2000}\n />\n }\n />\n ) : (\n 'N/A'\n )}\n </Box>\n </>\n </>\n </Drawer>\n );\n};\n"],"names":[],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
2
|
import { ItemCardHeader, MarkdownContent, LinkButton } from '@backstage/core-components';
|
|
3
3
|
import { makeStyles, Card, CardMedia, CardContent, Box, Typography, Chip, CardActions } from '@material-ui/core';
|
|
4
4
|
|
|
@@ -23,41 +23,56 @@ const OcirImagesCard = ({
|
|
|
23
23
|
onImageStreamSelected
|
|
24
24
|
}) => {
|
|
25
25
|
const classes = useStyles();
|
|
26
|
-
return /* @__PURE__ */
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
display: "flex",
|
|
31
|
-
flexDirection: "column",
|
|
32
|
-
gap: "16px"
|
|
33
|
-
}
|
|
34
|
-
},
|
|
35
|
-
/* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(Typography, { variant: "body2", className: classes.label }, "Description"), /* @__PURE__ */ React.createElement(
|
|
36
|
-
MarkdownContent,
|
|
26
|
+
return /* @__PURE__ */ jsxs(Card, { children: [
|
|
27
|
+
/* @__PURE__ */ jsx(CardMedia, { children: /* @__PURE__ */ jsx(ItemCardHeader, { title: imageStream.name }) }),
|
|
28
|
+
/* @__PURE__ */ jsxs(
|
|
29
|
+
CardContent,
|
|
37
30
|
{
|
|
38
|
-
|
|
39
|
-
|
|
31
|
+
style: {
|
|
32
|
+
display: "flex",
|
|
33
|
+
flexDirection: "column",
|
|
34
|
+
gap: "16px"
|
|
35
|
+
},
|
|
36
|
+
children: [
|
|
37
|
+
/* @__PURE__ */ jsxs(Box, { children: [
|
|
38
|
+
/* @__PURE__ */ jsx(Typography, { variant: "body2", className: classes.label, children: "Description" }),
|
|
39
|
+
/* @__PURE__ */ jsx(
|
|
40
|
+
MarkdownContent,
|
|
41
|
+
{
|
|
42
|
+
content: imageStream.description ?? "N/A",
|
|
43
|
+
className: classes.description
|
|
44
|
+
}
|
|
45
|
+
)
|
|
46
|
+
] }),
|
|
47
|
+
/* @__PURE__ */ jsxs(Box, { children: [
|
|
48
|
+
/* @__PURE__ */ jsx(Typography, { variant: "body2", className: classes.label, children: "Last Modified" }),
|
|
49
|
+
/* @__PURE__ */ jsx(Typography, { className: classes.description, children: imageStream.last_modified || "N/A" })
|
|
50
|
+
] }),
|
|
51
|
+
/* @__PURE__ */ jsxs(Box, { children: [
|
|
52
|
+
/* @__PURE__ */ jsx(
|
|
53
|
+
Typography,
|
|
54
|
+
{
|
|
55
|
+
variant: "body2",
|
|
56
|
+
className: classes.label,
|
|
57
|
+
style: { marginBottom: "4px" },
|
|
58
|
+
children: "Tags"
|
|
59
|
+
}
|
|
60
|
+
),
|
|
61
|
+
imageStream.tags?.length ? imageStream.tags.map((tag) => /* @__PURE__ */ jsx(Chip, { size: "small", label: tag }, tag)) : "N/A"
|
|
62
|
+
] })
|
|
63
|
+
]
|
|
40
64
|
}
|
|
41
|
-
)
|
|
42
|
-
/* @__PURE__ */
|
|
43
|
-
|
|
44
|
-
Typography,
|
|
65
|
+
),
|
|
66
|
+
/* @__PURE__ */ jsx(CardActions, { children: /* @__PURE__ */ jsx(
|
|
67
|
+
LinkButton,
|
|
45
68
|
{
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
)
|
|
52
|
-
)
|
|
53
|
-
LinkButton,
|
|
54
|
-
{
|
|
55
|
-
color: "primary",
|
|
56
|
-
to: "",
|
|
57
|
-
onClick: () => onImageStreamSelected(imageStream)
|
|
58
|
-
},
|
|
59
|
-
"Open"
|
|
60
|
-
)));
|
|
69
|
+
color: "primary",
|
|
70
|
+
to: "",
|
|
71
|
+
onClick: () => onImageStreamSelected(imageStream),
|
|
72
|
+
children: "Open"
|
|
73
|
+
}
|
|
74
|
+
) })
|
|
75
|
+
] });
|
|
61
76
|
};
|
|
62
77
|
|
|
63
78
|
export { OcirImagesCard };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OcirImagesCard.esm.js","sources":["../../../src/components/OcirImages/OcirImagesCard.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport
|
|
1
|
+
{"version":3,"file":"OcirImagesCard.esm.js","sources":["../../../src/components/OcirImages/OcirImagesCard.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport {\n ItemCardHeader,\n LinkButton,\n MarkdownContent,\n} from '@backstage/core-components';\n\nimport {\n Box,\n Card,\n CardActions,\n CardContent,\n CardMedia,\n Chip,\n makeStyles,\n Theme,\n Typography,\n} from '@material-ui/core';\n\nimport { ImageStreamMetadata } from '../../types';\n\nconst useStyles = makeStyles<Theme>(theme => ({\n label: {\n color: theme.palette.text.secondary,\n textTransform: 'uppercase',\n fontSize: '0.65rem',\n fontWeight: 'bold',\n letterSpacing: 0.5,\n lineHeight: 1,\n paddingBottom: '0.2rem',\n },\n description: {\n '& p': {\n margin: '0px',\n },\n },\n}));\n\ntype OcirImagesCardProps = {\n imageStream: ImageStreamMetadata;\n onImageStreamSelected: (imageStream: ImageStreamMetadata) => void;\n};\n\nexport const OcirImagesCard = ({\n imageStream,\n onImageStreamSelected,\n}: OcirImagesCardProps) => {\n const classes = useStyles();\n\n return (\n <Card>\n <CardMedia>\n <ItemCardHeader title={imageStream.name} />\n </CardMedia>\n <CardContent\n style={{\n display: 'flex',\n flexDirection: 'column',\n gap: '16px',\n }}\n >\n <Box>\n <Typography variant=\"body2\" className={classes.label}>\n Description\n </Typography>\n <MarkdownContent\n content={imageStream.description ?? 'N/A'}\n className={classes.description}\n />\n </Box>\n <Box>\n <Typography variant=\"body2\" className={classes.label}>\n Last Modified\n </Typography>\n <Typography className={classes.description}>\n {imageStream.last_modified || 'N/A'}\n </Typography>\n </Box>\n <Box>\n <Typography\n variant=\"body2\"\n className={classes.label}\n style={{ marginBottom: '4px' }}\n >\n Tags\n </Typography>\n {imageStream.tags?.length\n ? imageStream.tags.map((tag: string) => (\n <Chip key={tag} size=\"small\" label={tag} />\n ))\n : 'N/A'}\n </Box>\n </CardContent>\n <CardActions>\n <LinkButton\n color=\"primary\"\n to=\"\"\n onClick={() => onImageStreamSelected(imageStream)}\n >\n Open\n </LinkButton>\n </CardActions>\n </Card>\n );\n};\n"],"names":[],"mappings":";;;;AAoCA,MAAM,SAAA,GAAY,WAAkB,CAAU,KAAA,MAAA;AAAA,EAC5C,KAAO,EAAA;AAAA,IACL,KAAA,EAAO,KAAM,CAAA,OAAA,CAAQ,IAAK,CAAA,SAAA;AAAA,IAC1B,aAAe,EAAA,WAAA;AAAA,IACf,QAAU,EAAA,SAAA;AAAA,IACV,UAAY,EAAA,MAAA;AAAA,IACZ,aAAe,EAAA,GAAA;AAAA,IACf,UAAY,EAAA,CAAA;AAAA,IACZ,aAAe,EAAA;AAAA,GACjB;AAAA,EACA,WAAa,EAAA;AAAA,IACX,KAAO,EAAA;AAAA,MACL,MAAQ,EAAA;AAAA;AACV;AAEJ,CAAE,CAAA,CAAA;AAOK,MAAM,iBAAiB,CAAC;AAAA,EAC7B,WAAA;AAAA,EACA;AACF,CAA2B,KAAA;AACzB,EAAA,MAAM,UAAU,SAAU,EAAA;AAE1B,EAAA,4BACG,IACC,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,aACC,QAAC,kBAAA,GAAA,CAAA,cAAA,EAAA,EAAe,KAAO,EAAA,WAAA,CAAY,MAAM,CAC3C,EAAA,CAAA;AAAA,oBACA,IAAA;AAAA,MAAC,WAAA;AAAA,MAAA;AAAA,QACC,KAAO,EAAA;AAAA,UACL,OAAS,EAAA,MAAA;AAAA,UACT,aAAe,EAAA,QAAA;AAAA,UACf,GAAK,EAAA;AAAA,SACP;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAA,IAAA,CAAC,GACC,EAAA,EAAA,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,cAAW,OAAQ,EAAA,OAAA,EAAQ,SAAW,EAAA,OAAA,CAAQ,OAAO,QAEtD,EAAA,aAAA,EAAA,CAAA;AAAA,4BACA,GAAA;AAAA,cAAC,eAAA;AAAA,cAAA;AAAA,gBACC,OAAA,EAAS,YAAY,WAAe,IAAA,KAAA;AAAA,gBACpC,WAAW,OAAQ,CAAA;AAAA;AAAA;AACrB,WACF,EAAA,CAAA;AAAA,+BACC,GACC,EAAA,EAAA,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,cAAW,OAAQ,EAAA,OAAA,EAAQ,SAAW,EAAA,OAAA,CAAQ,OAAO,QAEtD,EAAA,eAAA,EAAA,CAAA;AAAA,gCACC,UAAW,EAAA,EAAA,SAAA,EAAW,QAAQ,WAC5B,EAAA,QAAA,EAAA,WAAA,CAAY,iBAAiB,KAChC,EAAA;AAAA,WACF,EAAA,CAAA;AAAA,+BACC,GACC,EAAA,EAAA,QAAA,EAAA;AAAA,4BAAA,GAAA;AAAA,cAAC,UAAA;AAAA,cAAA;AAAA,gBACC,OAAQ,EAAA,OAAA;AAAA,gBACR,WAAW,OAAQ,CAAA,KAAA;AAAA,gBACnB,KAAA,EAAO,EAAE,YAAA,EAAc,KAAM,EAAA;AAAA,gBAC9B,QAAA,EAAA;AAAA;AAAA,aAED;AAAA,YACC,YAAY,IAAM,EAAA,MAAA,GACf,WAAY,CAAA,IAAA,CAAK,IAAI,CAAC,GAAA,qBACnB,GAAA,CAAA,IAAA,EAAA,EAAe,MAAK,OAAQ,EAAA,KAAA,EAAO,GAAzB,EAAA,EAAA,GAA8B,CAC1C,CACD,GAAA;AAAA,WACN,EAAA;AAAA;AAAA;AAAA,KACF;AAAA,wBACC,WACC,EAAA,EAAA,QAAA,kBAAA,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,KAAM,EAAA,SAAA;AAAA,QACN,EAAG,EAAA,EAAA;AAAA,QACH,OAAA,EAAS,MAAM,qBAAA,CAAsB,WAAW,CAAA;AAAA,QACjD,QAAA,EAAA;AAAA;AAAA,KAGH,EAAA;AAAA,GACF,EAAA,CAAA;AAEJ;;;;"}
|
|
@@ -1,43 +1,50 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { useState, useCallback } from 'react';
|
|
2
3
|
import { ItemCardGrid, EmptyState } from '@backstage/core-components';
|
|
3
4
|
import { OcirImagesCard } from './OcirImagesCard.esm.js';
|
|
4
5
|
import { OcirImageSearchBar } from './OcirImageSearchBar.esm.js';
|
|
5
6
|
import { OcirImageSidebar } from './OcirImageSidebar.esm.js';
|
|
6
7
|
|
|
7
8
|
const OcirImagesCards = ({ imageStreams }) => {
|
|
8
|
-
const [isOpen, setIsOpen] =
|
|
9
|
-
const [activeImageStream, setActiveImageStream] =
|
|
10
|
-
const [filteredImageStreams, setFilteredImageStreams] =
|
|
9
|
+
const [isOpen, setIsOpen] = useState(false);
|
|
10
|
+
const [activeImageStream, setActiveImageStream] = useState();
|
|
11
|
+
const [filteredImageStreams, setFilteredImageStreams] = useState();
|
|
11
12
|
const imageStreamsList = filteredImageStreams ?? imageStreams;
|
|
12
|
-
const handleImageStreamSelected =
|
|
13
|
+
const handleImageStreamSelected = useCallback(
|
|
13
14
|
(imageStream) => {
|
|
14
15
|
setActiveImageStream(imageStream);
|
|
15
16
|
setIsOpen(true);
|
|
16
17
|
},
|
|
17
18
|
[]
|
|
18
19
|
);
|
|
19
|
-
const handleClose =
|
|
20
|
-
return /* @__PURE__ */
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
{
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
20
|
+
const handleClose = useCallback(() => setIsOpen(false), [setIsOpen]);
|
|
21
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
22
|
+
/* @__PURE__ */ jsx(
|
|
23
|
+
OcirImageSearchBar,
|
|
24
|
+
{
|
|
25
|
+
imageStreams,
|
|
26
|
+
setImageStreams: setFilteredImageStreams
|
|
27
|
+
}
|
|
28
|
+
),
|
|
29
|
+
imageStreamsList?.length ? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
30
|
+
/* @__PURE__ */ jsx(ItemCardGrid, { children: imageStreamsList.map((imageStream) => /* @__PURE__ */ jsx(
|
|
31
|
+
OcirImagesCard,
|
|
32
|
+
{
|
|
33
|
+
imageStream,
|
|
34
|
+
onImageStreamSelected: handleImageStreamSelected
|
|
35
|
+
},
|
|
36
|
+
imageStream.uid
|
|
37
|
+
)) }),
|
|
38
|
+
activeImageStream && /* @__PURE__ */ jsx(
|
|
39
|
+
OcirImageSidebar,
|
|
40
|
+
{
|
|
41
|
+
open: isOpen,
|
|
42
|
+
onClose: handleClose,
|
|
43
|
+
imageStream: activeImageStream
|
|
44
|
+
}
|
|
45
|
+
)
|
|
46
|
+
] }) : /* @__PURE__ */ jsx("div", { style: { width: "100%", height: "100vh" }, children: /* @__PURE__ */ jsx(EmptyState, { missing: "content", title: "No ImageStreams found" }) })
|
|
47
|
+
] });
|
|
41
48
|
};
|
|
42
49
|
|
|
43
50
|
export { OcirImagesCards };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OcirImagesCards.esm.js","sources":["../../../src/components/OcirImages/OcirImagesCards.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\
|
|
1
|
+
{"version":3,"file":"OcirImagesCards.esm.js","sources":["../../../src/components/OcirImages/OcirImagesCards.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport { useCallback, useState } from 'react';\n\nimport { EmptyState, ItemCardGrid } from '@backstage/core-components';\n\nimport { ImageStreamMetadata } from '../../types';\nimport { OcirImagesCard } from './OcirImagesCard';\nimport { OcirImageSearchBar } from './OcirImageSearchBar';\nimport { OcirImageSidebar } from './OcirImageSidebar';\n\ntype OcirImagesCardsProps = {\n imageStreams: ImageStreamMetadata[];\n};\n\nexport const OcirImagesCards = ({ imageStreams }: OcirImagesCardsProps) => {\n const [isOpen, setIsOpen] = useState<boolean>(false);\n const [activeImageStream, setActiveImageStream] =\n useState<ImageStreamMetadata>();\n const [filteredImageStreams, setFilteredImageStreams] = useState<\n ImageStreamMetadata[] | undefined\n >();\n\n const imageStreamsList = filteredImageStreams ?? imageStreams;\n\n const handleImageStreamSelected = useCallback(\n (imageStream: ImageStreamMetadata) => {\n setActiveImageStream(imageStream);\n setIsOpen(true);\n },\n [],\n );\n const handleClose = useCallback(() => setIsOpen(false), [setIsOpen]);\n\n return (\n <>\n <OcirImageSearchBar\n imageStreams={imageStreams}\n setImageStreams={setFilteredImageStreams}\n />\n {imageStreamsList?.length ? (\n <>\n <ItemCardGrid>\n {imageStreamsList.map((imageStream: ImageStreamMetadata) => (\n <OcirImagesCard\n key={imageStream.uid}\n imageStream={imageStream}\n onImageStreamSelected={handleImageStreamSelected}\n />\n ))}\n </ItemCardGrid>\n {activeImageStream && (\n <OcirImageSidebar\n open={isOpen}\n onClose={handleClose}\n imageStream={activeImageStream}\n />\n )}\n </>\n ) : (\n <div style={{ width: '100%', height: '100vh' }}>\n <EmptyState missing=\"content\" title=\"No ImageStreams found\" />\n </div>\n )}\n </>\n );\n};\n"],"names":[],"mappings":";;;;;;;AA4BO,MAAM,eAAkB,GAAA,CAAC,EAAE,YAAA,EAAyC,KAAA;AACzE,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAI,SAAkB,KAAK,CAAA;AACnD,EAAA,MAAM,CAAC,iBAAA,EAAmB,oBAAoB,CAAA,GAC5C,QAA8B,EAAA;AAChC,EAAA,MAAM,CAAC,oBAAA,EAAsB,uBAAuB,CAAA,GAAI,QAEtD,EAAA;AAEF,EAAA,MAAM,mBAAmB,oBAAwB,IAAA,YAAA;AAEjD,EAAA,MAAM,yBAA4B,GAAA,WAAA;AAAA,IAChC,CAAC,WAAqC,KAAA;AACpC,MAAA,oBAAA,CAAqB,WAAW,CAAA;AAChC,MAAA,SAAA,CAAU,IAAI,CAAA;AAAA,KAChB;AAAA,IACA;AAAC,GACH;AACA,EAAM,MAAA,WAAA,GAAc,YAAY,MAAM,SAAA,CAAU,KAAK,CAAG,EAAA,CAAC,SAAS,CAAC,CAAA;AAEnE,EAAA,uBAEI,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,kBAAA;AAAA,MAAA;AAAA,QACC,YAAA;AAAA,QACA,eAAiB,EAAA;AAAA;AAAA,KACnB;AAAA,IACC,gBAAA,EAAkB,yBAEf,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,YACE,EAAA,EAAA,QAAA,EAAA,gBAAA,CAAiB,GAAI,CAAA,CAAC,WACrB,qBAAA,GAAA;AAAA,QAAC,cAAA;AAAA,QAAA;AAAA,UAEC,WAAA;AAAA,UACA,qBAAuB,EAAA;AAAA,SAAA;AAAA,QAFlB,WAAY,CAAA;AAAA,OAIpB,CACH,EAAA,CAAA;AAAA,MACC,iBACC,oBAAA,GAAA;AAAA,QAAC,gBAAA;AAAA,QAAA;AAAA,UACC,IAAM,EAAA,MAAA;AAAA,UACN,OAAS,EAAA,WAAA;AAAA,UACT,WAAa,EAAA;AAAA;AAAA;AACf,KAAA,EAEJ,oBAEC,GAAA,CAAA,KAAA,EAAA,EAAI,KAAO,EAAA,EAAE,OAAO,MAAQ,EAAA,MAAA,EAAQ,OAAQ,EAAA,EAC3C,8BAAC,UAAW,EAAA,EAAA,OAAA,EAAQ,SAAU,EAAA,KAAA,EAAM,yBAAwB,CAC9D,EAAA;AAAA,GAEJ,EAAA,CAAA;AAEJ;;;;"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { jsx } from 'react/jsx-runtime';
|
|
2
2
|
import { Progress, EmptyState } from '@backstage/core-components';
|
|
3
3
|
import { useAllNsImageStreams } from '../../hooks/useAllNsImageStreams.esm.js';
|
|
4
4
|
import { useImageStreamsMetadataFromTag } from '../../hooks/useImageStreamsMetadataFromTag.esm.js';
|
|
@@ -8,9 +8,9 @@ const OcirImagesView = () => {
|
|
|
8
8
|
const { loading: imageStreamsLoading, imageStreams } = useAllNsImageStreams();
|
|
9
9
|
const { loading: metadataLoading, imageStreamsMetadata } = useImageStreamsMetadataFromTag(imageStreams);
|
|
10
10
|
if (imageStreamsLoading || metadataLoading) {
|
|
11
|
-
return /* @__PURE__ */
|
|
11
|
+
return /* @__PURE__ */ jsx(Progress, {});
|
|
12
12
|
}
|
|
13
|
-
return imageStreamsMetadata?.length ? /* @__PURE__ */
|
|
13
|
+
return imageStreamsMetadata?.length ? /* @__PURE__ */ jsx(OcirImagesCards, { imageStreams: imageStreamsMetadata }) : /* @__PURE__ */ jsx("div", { style: { width: "100%", height: "100vh" }, children: /* @__PURE__ */ jsx(EmptyState, { missing: "content", title: "No ImageStreams found" }) });
|
|
14
14
|
};
|
|
15
15
|
|
|
16
16
|
export { OcirImagesView };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OcirImagesView.esm.js","sources":["../../../src/components/OcirImages/OcirImagesView.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport
|
|
1
|
+
{"version":3,"file":"OcirImagesView.esm.js","sources":["../../../src/components/OcirImages/OcirImagesView.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { EmptyState, Progress } from '@backstage/core-components';\n\nimport { useAllNsImageStreams } from '../../hooks/useAllNsImageStreams';\nimport { useImageStreamsMetadataFromTag } from '../../hooks/useImageStreamsMetadataFromTag';\nimport { OcirImagesCards } from './OcirImagesCards';\n\nexport const OcirImagesView = () => {\n const { loading: imageStreamsLoading, imageStreams } = useAllNsImageStreams();\n\n const { loading: metadataLoading, imageStreamsMetadata } =\n useImageStreamsMetadataFromTag(imageStreams);\n\n if (imageStreamsLoading || metadataLoading) {\n return <Progress />;\n }\n\n return imageStreamsMetadata?.length ? (\n <OcirImagesCards imageStreams={imageStreamsMetadata} />\n ) : (\n <div style={{ width: '100%', height: '100vh' }}>\n <EmptyState missing=\"content\" title=\"No ImageStreams found\" />\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;;AAsBO,MAAM,iBAAiB,MAAM;AAClC,EAAA,MAAM,EAAE,OAAA,EAAS,mBAAqB,EAAA,YAAA,KAAiB,oBAAqB,EAAA;AAE5E,EAAA,MAAM,EAAE,OAAS,EAAA,eAAA,EAAiB,oBAAqB,EAAA,GACrD,+BAA+B,YAAY,CAAA;AAE7C,EAAA,IAAI,uBAAuB,eAAiB,EAAA;AAC1C,IAAA,2BAAQ,QAAS,EAAA,EAAA,CAAA;AAAA;AAGnB,EAAO,OAAA,oBAAA,EAAsB,yBAC1B,GAAA,CAAA,eAAA,EAAA,EAAgB,cAAc,oBAAsB,EAAA,CAAA,mBAEpD,GAAA,CAAA,KAAA,EAAA,EAAI,KAAO,EAAA,EAAE,OAAO,MAAQ,EAAA,MAAA,EAAQ,SACnC,EAAA,QAAA,kBAAA,GAAA,CAAC,cAAW,OAAQ,EAAA,SAAA,EAAU,KAAM,EAAA,uBAAA,EAAwB,CAC9D,EAAA,CAAA;AAEJ;;;;"}
|
|
@@ -1,8 +1,11 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
2
|
import { Page, Header, Content } from '@backstage/core-components';
|
|
3
3
|
import { OcirImagesView } from '../OcirImages/OcirImagesView.esm.js';
|
|
4
4
|
|
|
5
|
-
const OcirPage = () => /* @__PURE__ */
|
|
5
|
+
const OcirPage = () => /* @__PURE__ */ jsxs(Page, { themeId: "home", children: [
|
|
6
|
+
/* @__PURE__ */ jsx(Header, { title: "Image Registry" }),
|
|
7
|
+
/* @__PURE__ */ jsx(Content, { children: /* @__PURE__ */ jsx(OcirImagesView, {}) })
|
|
8
|
+
] });
|
|
6
9
|
|
|
7
10
|
export { OcirPage };
|
|
8
11
|
//# sourceMappingURL=OcirPage.esm.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OcirPage.esm.js","sources":["../../../src/components/OcirPage/OcirPage.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport
|
|
1
|
+
{"version":3,"file":"OcirPage.esm.js","sources":["../../../src/components/OcirPage/OcirPage.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { Content, Header, Page } from '@backstage/core-components';\n\nimport { OcirImagesView } from '../OcirImages/OcirImagesView';\n\nexport const OcirPage = () => (\n <Page themeId=\"home\">\n <Header title=\"Image Registry\" />\n <Content>\n <OcirImagesView />\n </Content>\n </Page>\n);\n"],"names":[],"mappings":";;;;AAoBO,MAAM,QAAW,GAAA,sBACrB,IAAA,CAAA,IAAA,EAAA,EAAK,SAAQ,MACZ,EAAA,QAAA,EAAA;AAAA,kBAAC,GAAA,CAAA,MAAA,EAAA,EAAO,OAAM,gBAAiB,EAAA,CAAA;AAAA,kBAC9B,GAAA,CAAA,OAAA,EAAA,EACC,QAAC,kBAAA,GAAA,CAAA,cAAA,EAAA,EAAe,CAClB,EAAA;AAAA,CACF,EAAA;;;;"}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
import * as react from 'react';
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
3
2
|
import * as _backstage_core_plugin_api from '@backstage/core-plugin-api';
|
|
4
3
|
|
|
5
4
|
/**
|
|
@@ -13,6 +12,6 @@ declare const openshiftImageRegistryPlugin: _backstage_core_plugin_api.Backstage
|
|
|
13
12
|
* @public
|
|
14
13
|
* Openshift Image Registry Page
|
|
15
14
|
*/
|
|
16
|
-
declare const OpenshiftImageRegistryPage: () =>
|
|
15
|
+
declare const OpenshiftImageRegistryPage: () => react_jsx_runtime.JSX.Element;
|
|
17
16
|
|
|
18
17
|
export { OpenshiftImageRegistryPage, openshiftImageRegistryPlugin };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@red-hat-developer-hub/backstage-plugin-openshift-image-registry",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.13.0",
|
|
4
4
|
"main": "dist/index.esm.js",
|
|
5
5
|
"types": "dist/index.d.ts",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -36,9 +36,9 @@
|
|
|
36
36
|
"prettier:fix": "prettier --ignore-unknown --write ."
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@backstage/core-components": "^0.
|
|
40
|
-
"@backstage/core-plugin-api": "^1.10.
|
|
41
|
-
"@backstage/theme": "^0.6.
|
|
39
|
+
"@backstage/core-components": "^0.17.2",
|
|
40
|
+
"@backstage/core-plugin-api": "^1.10.7",
|
|
41
|
+
"@backstage/theme": "^0.6.6",
|
|
42
42
|
"@emotion/styled": "^11.13.0",
|
|
43
43
|
"@ianvs/prettier-plugin-sort-imports": "^4.3.1",
|
|
44
44
|
"@janus-idp/shared-react": "2.18.0",
|
|
@@ -53,13 +53,13 @@
|
|
|
53
53
|
"react-router-dom": "^6.0.0"
|
|
54
54
|
},
|
|
55
55
|
"devDependencies": {
|
|
56
|
-
"@backstage/cli": "^0.
|
|
57
|
-
"@backstage/core-app-api": "^1.
|
|
58
|
-
"@backstage/dev-utils": "^1.1.
|
|
59
|
-
"@backstage/test-utils": "^1.7.
|
|
56
|
+
"@backstage/cli": "^0.32.1",
|
|
57
|
+
"@backstage/core-app-api": "^1.17.0",
|
|
58
|
+
"@backstage/dev-utils": "^1.1.10",
|
|
59
|
+
"@backstage/test-utils": "^1.7.8",
|
|
60
60
|
"@janus-idp/cli": "1.19.1",
|
|
61
61
|
"@mui/icons-material": "^6.1.6",
|
|
62
|
-
"@red-hat-developer-hub/backstage-plugin-theme": "^0.
|
|
62
|
+
"@red-hat-developer-hub/backstage-plugin-theme": "^0.8.0",
|
|
63
63
|
"@spotify/prettier-config": "^15.0.0",
|
|
64
64
|
"@testing-library/jest-dom": "6.6.3",
|
|
65
65
|
"@testing-library/react": "14.3.1",
|
|
@@ -92,8 +92,8 @@
|
|
|
92
92
|
],
|
|
93
93
|
"typesVersions": {
|
|
94
94
|
"*": {
|
|
95
|
-
"
|
|
96
|
-
"
|
|
95
|
+
"package.json": [
|
|
96
|
+
"package.json"
|
|
97
97
|
]
|
|
98
98
|
}
|
|
99
99
|
},
|