create: Add a "view more" option to list of operating systems

This will show all operating systems, regardless of EOL or release dates. Operating systems with an expired EOL date will be annotated accordingly in the list. Fixes cockpit-project#509
mvollmer · Oct 18, 2024 · 28fb8b3 · 28fb8b3
1 parent 958c8e5
commit 28fb8b3
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 5 deletions.
diff --git a/src/components/create-vm-dialog/createVmDialog.jsx b/src/components/create-vm-dialog/createVmDialog.jsx
@@ -76,6 +76,7 @@ import {
     correctSpecialCases,
     filterReleaseEolDates,
     getOSStringRepresentation,
+    getOSEOLDescription,
     needsRHToken,
     isDownloadableOs,
     loadOfflineToken,
@@ -405,10 +406,8 @@ const SourceRow = ({ connectionName, source, sourceType, networks, nodeDevices,
 class OSRow extends React.Component {
     constructor(props) {
         super(props);
-        const IGNORE_VENDORS = ['ALTLinux', 'Mandriva', 'GNOME Project'];
         const osInfoListExt = this.props.osInfoList
                 .map(os => correctSpecialCases(os))
-                .filter(os => filterReleaseEolDates(os) && !IGNORE_VENDORS.find(vendor => vendor == os.vendor))
                 .sort((a, b) => {
                     if (a.vendor == b.vendor) {
                         // Sort OS with numbered version by version
@@ -429,6 +428,7 @@ class OSRow extends React.Component {
         this.state = {
             typeAheadKey: Math.random(),
             osEntries: osInfoListExt,
+            showAll: false,
         };
         this.createValue = os => {
             return ({
@@ -448,6 +448,11 @@ class OSRow extends React.Component {
     render() {
         const { os, onValueChanged, isLoading, validationFailed } = this.props;
         const validationStateOS = validationFailed.os ? 'error' : 'default';
+        const IGNORE_VENDORS = ['ALTLinux', 'Mandriva', 'GNOME Project'];
+
+        const filter = os => (
+            this.state.showAll || (filterReleaseEolDates(os) && !IGNORE_VENDORS.find(vendor => vendor == os.vendor))
+        );
 
         return (
             <FormGroup fieldId='os-select'
@@ -474,9 +479,20 @@ class OSRow extends React.Component {
                     }}
                     onToggle={(_event, isOpen) => this.setState({ isOpen })}
                     isOpen={this.state.isOpen}
-                    menuAppendTo="parent">
-                    {this.state.osEntries.map(os => (<SelectOption key={os.id}
-                                                                  value={this.createValue(os)} />))}
+                    menuAppendTo="parent"
+                    {...(!this.state.showAll && {
+                        loadingVariant: {
+                            text: _("Show all operating systems"),
+                            onClick: () => this.setState({ showAll: true }),
+                        }
+                    })}
+                >
+                    {this.state.osEntries
+                     .filter(filter)
+                     .map(os => (<SelectOption key={os.id}
+                                               description={getOSEOLDescription(os)}
+                                               value={this.createValue(os)} />))
+                    }
                 </PFSelect>
                 <FormHelper helperTextInvalid={validationStateOS == "error" && validationFailed.os} />
             </FormGroup>

diff --git a/src/components/create-vm-dialog/createVmDialogUtils.js b/src/components/create-vm-dialog/createVmDialogUtils.js
@@ -17,13 +17,17 @@
  * along with Cockpit; If not, see <http://www.gnu.org/licenses/>.
  */
 
+import cockpit from 'cockpit';
+
 import {
     getTodayYearShifted,
 } from "../../helpers.js";
 
 import * as python from "python.js";
 import autoDetectOSScript from './autoDetectOS.py';
 
+const _ = cockpit.gettext;
+
 const ACCEPT_RELEASE_DATES_AFTER = getTodayYearShifted(-3);
 const ACCEPT_EOL_DATES_AFTER = getTodayYearShifted(-1);
 const RHSM_TOKEN = "rhsm-offline-token";
@@ -76,6 +80,12 @@ export function filterReleaseEolDates(os) {
     );
 }
 
+export function getOSEOLDescription(os) {
+    if (os.eolDate && compareDates(ACCEPT_EOL_DATES_AFTER, os.eolDate) < 0)
+        return cockpit.format(_("Vendor support ended $0"), os.eolDate);
+    return null;
+}
+
 export function compareDates(a, b, emptyFirst = false) {
     if (!a) {
         if (!b) {