@flightctl/ui-components 0.4.0 → 0.5.0-rc2

package/dist/src/utils/status/common.js

@@ -1,17 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getDefaultStatusColor = exports.getDefaultStatusIcon = void 0;
+const tslib_1 = require("tslib");
 const in_progress_icon_1 = require("@patternfly/react-icons/dist/js/icons/in-progress-icon");
 const exclamation_circle_icon_1 = require("@patternfly/react-icons/dist/js/icons/exclamation-circle-icon");
 const exclamation_triangle_icon_1 = require("@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon");
 const check_circle_icon_1 = require("@patternfly/react-icons/dist/js/icons/check-circle-icon");
 const outlined_question_circle_icon_1 = require("@patternfly/react-icons/dist/js/icons/outlined-question-circle-icon");
-const global_warning_color_100_1 = require("@patternfly/react-tokens/dist/js/global_warning_color_100");
-const global_danger_color_100_1 = require("@patternfly/react-tokens/dist/js/global_danger_color_100");
-const global_success_color_100_1 = require("@patternfly/react-tokens/dist/js/global_success_color_100");
-const global_disabled_color_100_1 = require("@patternfly/react-tokens/dist/js/global_disabled_color_100");
-const global_active_color_100_1 = require("@patternfly/react-tokens/dist/js/global_active_color_100");
-const global_palette_black_1000_1 = require("@patternfly/react-tokens/dist/js/global_palette_black_1000");
+const global_warning_color_100_1 = tslib_1.__importDefault(require("@patternfly/react-tokens/dist/js/global_warning_color_100"));
+const global_danger_color_100_1 = tslib_1.__importDefault(require("@patternfly/react-tokens/dist/js/global_danger_color_100"));
+const global_success_color_100_1 = tslib_1.__importDefault(require("@patternfly/react-tokens/dist/js/global_success_color_100"));
+const global_disabled_color_100_1 = tslib_1.__importDefault(require("@patternfly/react-tokens/dist/js/global_disabled_color_100"));
+const global_active_color_100_1 = tslib_1.__importDefault(require("@patternfly/react-tokens/dist/js/global_active_color_100"));
+const global_palette_black_1000_1 = tslib_1.__importDefault(require("@patternfly/react-tokens/dist/js/global_palette_black_1000"));
 const getDefaultStatusIcon = (level) => {
     let iconClass;
     switch (level) {
@@ -39,22 +40,22 @@ const getDefaultStatusColor = (level) => {
     let color;
     switch (level) {
         case 'info':
-            color = global_active_color_100_1.global_active_color_100.value;
+            color = global_active_color_100_1.default.value;
             break;
         case 'danger':
-            color = global_danger_color_100_1.global_danger_color_100.value;
+            color = global_danger_color_100_1.default.value;
             break;
         case 'warning':
-            color = global_warning_color_100_1.global_warning_color_100.value;
+            color = global_warning_color_100_1.default.value;
             break;
         case 'success':
-            color = global_success_color_100_1.global_success_color_100.value;
+            color = global_success_color_100_1.default.value;
             break;
         case 'custom':
-            color = global_palette_black_1000_1.global_palette_black_1000.value;
+            color = global_palette_black_1000_1.default.value;
             break;
         default:
-            color = global_disabled_color_100_1.global_disabled_color_100.value;
+            color = global_disabled_color_100_1.default.value;
             break;
     }
     return color;

package/dist/src/utils/status/common.js.map

@@ -1 +1 @@
-{"version":3,"file":"common.js","sourceRoot":"","sources":["../../../../src/utils/status/common.ts"],"names":[],"mappings":";;;AAEA,6FAAwF;AACxF,2GAAsG;AACtG,+GAA0G;AAC1G,+FAA0F;AAC1F,uHAAiH;AAEjH,wGAAqH;AACrH,sGAAkH;AAClH,wGAAqH;AACrH,0GAAuH;AACvH,sGAAkH;AAClH,0GAAqH;AAW9G,MAAM,oBAAoB,GAAG,CAAC,KAAkB,EAAE,EAAE;IACzD,IAAI,SAA6C,CAAC;IAClD,QAAQ,KAAK,EAAE,CAAC;QACd,KAAK,MAAM;YACT,SAAS,GAAG,iCAAc,CAAC;YAC3B,MAAM;QACR,KAAK,QAAQ;YACX,SAAS,GAAG,+CAAqB,CAAC;YAClC,MAAM;QACR,KAAK,SAAS,CAAC;QACf,KAAK,SAAS;YACZ,SAAS,GAAG,mDAAuB,CAAC;YACpC,MAAM;QACR,KAAK,SAAS;YACZ,SAAS,GAAG,mCAAe,CAAC;YAC5B,MAAM;QACR;YACE,SAAS,GAAG,0DAA0B,CAAC;YACvC,MAAM;IACV,CAAC;IACD,OAAO,SAAS,CAAC;AACnB,CAAC,CAAC;AArBW,QAAA,oBAAoB,wBAqB/B;AAEK,MAAM,qBAAqB,GAAG,CAAC,KAAkB,EAAE,EAAE;IAC1D,IAAI,KAAa,CAAC;IAClB,QAAQ,KAAK,EAAE,CAAC;QACd,KAAK,MAAM;YACT,KAAK,GAAG,iDAAW,CAAC,KAAK,CAAC;YAC1B,MAAM;QACR,KAAK,QAAQ;YACX,KAAK,GAAG,iDAAW,CAAC,KAAK,CAAC;YAC1B,MAAM;QACR,KAAK,SAAS;YACZ,KAAK,GAAG,mDAAY,CAAC,KAAK,CAAC;YAC3B,MAAM;QACR,KAAK,SAAS;YACZ,KAAK,GAAG,mDAAY,CAAC,KAAK,CAAC;YAC3B,MAAM;QACR,KAAK,QAAQ;YACX,KAAK,GAAG,qDAAU,CAAC,KAAK,CAAC;YACzB,MAAM;QACR;YACE,KAAK,GAAG,qDAAY,CAAC,KAAK,CAAC;YAC3B,MAAM;IACV,CAAC;IACD,OAAO,KAAK,CAAC;AACf,CAAC,CAAC;AAvBW,QAAA,qBAAqB,yBAuBhC"}
+{"version":3,"file":"common.js","sourceRoot":"","sources":["../../../../src/utils/status/common.ts"],"names":[],"mappings":";;;;AAEA,6FAAwF;AACxF,2GAAsG;AACtG,+GAA0G;AAC1G,+FAA0F;AAC1F,uHAAiH;AAEjH,iIAAqF;AACrF,+HAAmF;AACnF,iIAAqF;AACrF,mIAAuF;AACvF,+HAAmF;AACnF,mIAAsF;AAW/E,MAAM,oBAAoB,GAAG,CAAC,KAAkB,EAAE,EAAE;IACzD,IAAI,SAA6C,CAAC;IAClD,QAAQ,KAAK,EAAE,CAAC;QACd,KAAK,MAAM;YACT,SAAS,GAAG,iCAAc,CAAC;YAC3B,MAAM;QACR,KAAK,QAAQ;YACX,SAAS,GAAG,+CAAqB,CAAC;YAClC,MAAM;QACR,KAAK,SAAS,CAAC;QACf,KAAK,SAAS;YACZ,SAAS,GAAG,mDAAuB,CAAC;YACpC,MAAM;QACR,KAAK,SAAS;YACZ,SAAS,GAAG,mCAAe,CAAC;YAC5B,MAAM;QACR;YACE,SAAS,GAAG,0DAA0B,CAAC;YACvC,MAAM;IACV,CAAC;IACD,OAAO,SAAS,CAAC;AACnB,CAAC,CAAC;AArBW,QAAA,oBAAoB,wBAqB/B;AAEK,MAAM,qBAAqB,GAAG,CAAC,KAAkB,EAAE,EAAE;IAC1D,IAAI,KAAa,CAAC;IAClB,QAAQ,KAAK,EAAE,CAAC;QACd,KAAK,MAAM;YACT,KAAK,GAAG,iCAAW,CAAC,KAAK,CAAC;YAC1B,MAAM;QACR,KAAK,QAAQ;YACX,KAAK,GAAG,iCAAW,CAAC,KAAK,CAAC;YAC1B,MAAM;QACR,KAAK,SAAS;YACZ,KAAK,GAAG,kCAAY,CAAC,KAAK,CAAC;YAC3B,MAAM;QACR,KAAK,SAAS;YACZ,KAAK,GAAG,kCAAY,CAAC,KAAK,CAAC;YAC3B,MAAM;QACR,KAAK,QAAQ;YACX,KAAK,GAAG,mCAAY,CAAC,KAAK,CAAC;YAC3B,MAAM;QACR;YACE,KAAK,GAAG,mCAAa,CAAC,KAAK,CAAC;YAC5B,MAAM;IACV,CAAC;IACD,OAAO,KAAK,CAAC;AACf,CAAC,CAAC;AAvBW,QAAA,qBAAqB,yBAuBhC"}

package/dist/src/utils/status/devices.d.ts

@@ -1,5 +1,5 @@
 import { TFunction } from 'react-i18next';
-import { ApplicationsSummaryStatusType, DeviceSummaryStatus as BEDeviceSummaryStatus, DeviceApplicationsSummaryStatus, DeviceIntegrityStatusSummaryType, DeviceSummaryStatusType, DeviceUpdatedStatus, DeviceUpdatedStatusType } from '@flightctl/types';
+import { ApplicationsSummaryStatusType, DeviceSummaryStatus as BEDeviceSummaryStatus, Device, DeviceIntegrityStatusSummaryType, DeviceLifecycleStatusType, DeviceSummaryStatusType, DeviceUpdatedStatusType } from '@flightctl/types';
 import { StatusItem } from './common';
 export declare enum FilterSearchParams {
     Fleet = "fleetId",
@@ -11,8 +11,8 @@ export declare enum FilterSearchParams {
 }
 export type DeviceSummaryStatus = ApplicationsSummaryStatusType | DeviceUpdatedStatusType | DeviceSummaryStatusType | DeviceIntegrityStatusSummaryType;
 export declare const getDeviceSummaryStatus: (deviceStatus?: BEDeviceSummaryStatus) => DeviceSummaryStatusType;
-export declare const getApplicationSummaryStatus: (appSummaryStatus?: DeviceApplicationsSummaryStatus) => ApplicationsSummaryStatusType;
-export declare const getSystemUpdateStatus: (updatedStatus?: DeviceUpdatedStatus) => DeviceUpdatedStatusType;
+export declare const getDeviceLifecycleStatus: (device: Device) => DeviceLifecycleStatusType;
 export declare const getDeviceStatusItems: (t: TFunction) => StatusItem<DeviceSummaryStatusType>[];
+export declare const getDeviceLifecycleStatusItems: (t: TFunction) => StatusItem<DeviceLifecycleStatusType>[];
 export declare const deviceStatusOrder: DeviceSummaryStatusType[];
 //# sourceMappingURL=devices.d.ts.map

package/dist/src/utils/status/devices.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"devices.d.ts","sourceRoot":"","sources":["../../../../src/utils/status/devices.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAG1C,OAAO,EACL,6BAA6B,EAC7B,mBAAmB,IAAI,qBAAqB,EAC5C,+BAA+B,EAC/B,gCAAgC,EAChC,uBAAuB,EACvB,mBAAmB,EACnB,uBAAuB,EACxB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAEtC,oBAAY,kBAAkB;IAC5B,KAAK,YAAY;IACjB,YAAY,UAAU;IACtB,SAAS,UAAU;IACnB,aAAa,UAAU;IACvB,KAAK,UAAU;IACf,WAAW,gBAAgB;CAC5B;AAED,MAAM,MAAM,mBAAmB,GAC3B,6BAA6B,GAC7B,uBAAuB,GACvB,uBAAuB,GACvB,gCAAgC,CAAC;AAErC,eAAO,MAAM,sBAAsB,kBAAmB,qBAAqB,KAAG,uBACF,CAAC;AAE7E,eAAO,MAAM,2BAA2B,sBACnB,+BAA+B,KACjD,6BACyF,CAAC;AAE7F,eAAO,MAAM,qBAAqB,mBAAoB,mBAAmB,KAAG,uBACC,CAAC;AAE9E,eAAO,MAAM,oBAAoB,MAAO,SAAS,KAAG,WAAW,uBAAuB,CAAC,EAgCtF,CAAC;AAEF,eAAO,MAAM,iBAAiB,2BAAgE,CAAC"}
+{"version":3,"file":"devices.d.ts","sourceRoot":"","sources":["../../../../src/utils/status/devices.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAI1C,OAAO,EACL,6BAA6B,EAC7B,mBAAmB,IAAI,qBAAqB,EAC5C,MAAM,EACN,gCAAgC,EAChC,yBAAyB,EACzB,uBAAuB,EACvB,uBAAuB,EACxB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAEtC,oBAAY,kBAAkB;IAC5B,KAAK,YAAY;IACjB,YAAY,UAAU;IACtB,SAAS,UAAU;IACnB,aAAa,UAAU;IACvB,KAAK,UAAU;IACf,WAAW,gBAAgB;CAC5B;AAED,MAAM,MAAM,mBAAmB,GAC3B,6BAA6B,GAC7B,uBAAuB,GACvB,uBAAuB,GACvB,gCAAgC,CAAC;AAErC,eAAO,MAAM,sBAAsB,kBAAmB,qBAAqB,KAAG,uBACF,CAAC;AAE7E,eAAO,MAAM,wBAAwB,WAAY,MAAM,KAAG,yBAYzD,CAAC;AAEF,eAAO,MAAM,oBAAoB,MAAO,SAAS,KAAG,WAAW,uBAAuB,CAAC,EAgCtF,CAAC;AAEF,eAAO,MAAM,6BAA6B,MAAO,SAAS,KAAG,WAAW,yBAAyB,CAAC,EAsBjG,CAAC;AAEF,eAAO,MAAM,iBAAiB,2BAAgE,CAAC"}

package/dist/src/utils/status/devices.js

@@ -1,7 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.deviceStatusOrder = exports.getDeviceStatusItems = exports.getSystemUpdateStatus = exports.getApplicationSummaryStatus = exports.getDeviceSummaryStatus = exports.FilterSearchParams = void 0;
+exports.deviceStatusOrder = exports.getDeviceLifecycleStatusItems = exports.getDeviceStatusItems = exports.getDeviceLifecycleStatus = exports.getDeviceSummaryStatus = exports.FilterSearchParams = void 0;
+const tslib_1 = require("tslib");
 const icons_1 = require("@patternfly/react-icons/dist/js/icons");
+const ban_icon_1 = tslib_1.__importDefault(require("@patternfly/react-icons/dist/js/icons/ban-icon"));
 const types_1 = require("@flightctl/types");
 var FilterSearchParams;
 (function (FilterSearchParams) {
@@ -14,10 +16,19 @@ var FilterSearchParams;
 })(FilterSearchParams || (exports.FilterSearchParams = FilterSearchParams = {}));
 const getDeviceSummaryStatus = (deviceStatus) => (deviceStatus === null || deviceStatus === void 0 ? void 0 : deviceStatus.status) || types_1.DeviceSummaryStatusType.DeviceSummaryStatusUnknown;
 exports.getDeviceSummaryStatus = getDeviceSummaryStatus;
-const getApplicationSummaryStatus = (appSummaryStatus) => (appSummaryStatus === null || appSummaryStatus === void 0 ? void 0 : appSummaryStatus.status) || types_1.ApplicationsSummaryStatusType.ApplicationsSummaryStatusUnknown;
-exports.getApplicationSummaryStatus = getApplicationSummaryStatus;
-const getSystemUpdateStatus = (updatedStatus) => (updatedStatus === null || updatedStatus === void 0 ? void 0 : updatedStatus.status) || types_1.DeviceUpdatedStatusType.DeviceUpdatedStatusUnknown;
-exports.getSystemUpdateStatus = getSystemUpdateStatus;
+const getDeviceLifecycleStatus = (device) => {
+    var _a, _b, _c, _d;
+    const lifecycleStatus = ((_b = (_a = device.status) === null || _a === void 0 ? void 0 : _a.lifecycle) === null || _b === void 0 ? void 0 : _b.status) || types_1.DeviceLifecycleStatusType.DeviceLifecycleStatusEnrolled;
+    const isDecomStatus = [
+        types_1.DeviceLifecycleStatusType.DeviceLifecycleStatusDecommissioning,
+        types_1.DeviceLifecycleStatusType.DeviceLifecycleStatusDecommissioned,
+    ].includes(lifecycleStatus);
+    if (!isDecomStatus && ((_d = (_c = device.spec) === null || _c === void 0 ? void 0 : _c.decommissioning) === null || _d === void 0 ? void 0 : _d.target)) {
+        return types_1.DeviceLifecycleStatusType.DeviceLifecycleStatusDecommissioning;
+    }
+    return lifecycleStatus;
+};
+exports.getDeviceLifecycleStatus = getDeviceLifecycleStatus;
 const getDeviceStatusItems = (t) => [
     {
         id: types_1.DeviceSummaryStatusType.DeviceSummaryStatusError,
@@ -52,5 +63,29 @@ const getDeviceStatusItems = (t) => [
     },
 ];
 exports.getDeviceStatusItems = getDeviceStatusItems;
+const getDeviceLifecycleStatusItems = (t) => [
+    {
+        id: types_1.DeviceLifecycleStatusType.DeviceLifecycleStatusDecommissioned,
+        label: t('Decommissioned'),
+        level: 'unknown',
+        customIcon: ban_icon_1.default,
+    },
+    {
+        id: types_1.DeviceLifecycleStatusType.DeviceLifecycleStatusDecommissioning,
+        label: t('Decommissioning'),
+        level: 'warning',
+    },
+    {
+        id: types_1.DeviceLifecycleStatusType.DeviceLifecycleStatusUnknown,
+        label: t('Unknown'),
+        level: 'unknown',
+    },
+    {
+        id: types_1.DeviceLifecycleStatusType.DeviceLifecycleStatusEnrolled,
+        label: t('Enrolled'),
+        level: 'success',
+    },
+];
+exports.getDeviceLifecycleStatusItems = getDeviceLifecycleStatusItems;
 exports.deviceStatusOrder = (0, exports.getDeviceStatusItems)((s) => s).map((item) => item.id);
 //# sourceMappingURL=devices.js.map

package/dist/src/utils/status/devices.js.map

@@ -1 +1 @@
-{"version":3,"file":"devices.js","sourceRoot":"","sources":["../../../../src/utils/status/devices.ts"],"names":[],"mappings":";;;AACA,iEAAqE;AAErE,4CAQ0B;AAG1B,IAAY,kBAOX;AAPD,WAAY,kBAAkB;IAC5B,uCAAiB,CAAA;IACjB,4CAAsB,CAAA;IACtB,yCAAmB,CAAA;IACnB,6CAAuB,CAAA;IACvB,qCAAe,CAAA;IACf,iDAA2B,CAAA;AAC7B,CAAC,EAPW,kBAAkB,kCAAlB,kBAAkB,QAO7B;AAQM,MAAM,sBAAsB,GAAG,CAAC,YAAoC,EAA2B,EAAE,CACtG,CAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,MAAM,KAAI,+BAAuB,CAAC,0BAA0B,CAAC;AADhE,QAAA,sBAAsB,0BAC0C;AAEtE,MAAM,2BAA2B,GAAG,CACzC,gBAAkD,EACnB,EAAE,CACjC,CAAA,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,MAAM,KAAI,qCAA6B,CAAC,gCAAgC,CAAC;AAHhF,QAAA,2BAA2B,+BAGqD;AAEtF,MAAM,qBAAqB,GAAG,CAAC,aAAmC,EAA2B,EAAE,CACpG,CAAA,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,MAAM,KAAI,+BAAuB,CAAC,0BAA0B,CAAC;AADjE,QAAA,qBAAqB,yBAC4C;AAEvE,MAAM,oBAAoB,GAAG,CAAC,CAAY,EAAyC,EAAE,CAAC;IAC3F;QACE,EAAE,EAAE,+BAAuB,CAAC,wBAAwB;QACpD,KAAK,EAAE,CAAC,CAAC,OAAO,CAAC;QACjB,KAAK,EAAE,QAAQ;KAChB;IACD;QACE,EAAE,EAAE,+BAAuB,CAAC,2BAA2B;QACvD,KAAK,EAAE,CAAC,CAAC,UAAU,CAAC;QACpB,KAAK,EAAE,SAAS;KACjB;IACD;QACE,EAAE,EAAE,+BAAuB,CAAC,0BAA0B;QACtD,KAAK,EAAE,CAAC,CAAC,SAAS,CAAC;QACnB,KAAK,EAAE,SAAS;KACjB;IACD;QACE,EAAE,EAAE,+BAAuB,CAAC,4BAA4B;QACxD,KAAK,EAAE,CAAC,CAAC,WAAW,CAAC;QACrB,KAAK,EAAE,MAAM;KACd;IACD;QACE,EAAE,EAAE,+BAAuB,CAAC,6BAA6B;QACzD,KAAK,EAAE,CAAC,CAAC,aAAa,CAAC;QACvB,KAAK,EAAE,QAAQ;QACf,UAAU,EAAE,oBAAY;KACzB;IACD;QACE,EAAE,EAAE,+BAAuB,CAAC,yBAAyB;QACrD,KAAK,EAAE,CAAC,CAAC,QAAQ,CAAC;QAClB,KAAK,EAAE,SAAS;KACjB;CACF,CAAC;AAhCW,QAAA,oBAAoB,wBAgC/B;AAEW,QAAA,iBAAiB,GAAG,IAAA,4BAAoB,EAAC,CAAC,CAAS,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC"}
+{"version":3,"file":"devices.js","sourceRoot":"","sources":["../../../../src/utils/status/devices.ts"],"names":[],"mappings":"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"}

package/dist/src/utils/status/fleet.d.ts

@@ -1,15 +1,15 @@
+import { TFunction } from 'i18next';
 import { Fleet } from '@flightctl/types';
 import { FleetConditionType } from '../../types/extraTypes';
-import { TFunction } from 'i18next';
-declare const fleetStatusLabels: (t: TFunction) => {
+export declare const fleetStatusLabels: (t: TFunction) => {
     OverlappingSelectors: string;
     Valid: string;
     Invalid: string;
     SyncPending: string;
 };
-declare const getFleetSyncStatus: (fleet: Fleet, t?: TFunction) => {
+export declare const getFleetSyncStatus: (fleet: Fleet, t: TFunction) => {
     status: FleetConditionType;
     message: string | undefined;
 };
-export { getFleetSyncStatus, fleetStatusLabels };
+export declare const getFleetRolloutStatusWarning: (fleet: Fleet, t: TFunction) => string | undefined;
 //# sourceMappingURL=fleet.d.ts.map

package/dist/src/utils/status/fleet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"fleet.d.ts","sourceRoot":"","sources":["../../../../src/utils/status/fleet.ts"],"names":[],"mappings":"AAAA,OAAO,EAAkC,KAAK,EAAE,MAAM,kBAAkB,CAAC;AACzE,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAGpC,QAAA,MAAM,iBAAiB,MAAO,SAAS;;;;;CAKrC,CAAC;AAEH,QAAA,MAAM,kBAAkB,UACf,KAAK,MACT,SAAS,KACX;IACD,QAAQ,kBAAkB,CAAC;IAC3B,OAAO,EAAE,MAAM,GAAG,SAAS,CAAC;CA2B7B,CAAC;AAEF,OAAO,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,CAAC"}
+{"version":3,"file":"fleet.d.ts","sourceRoot":"","sources":["../../../../src/utils/status/fleet.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEpC,OAAO,EAA6C,KAAK,EAAE,MAAM,kBAAkB,CAAC;AACpF,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAK5D,eAAO,MAAM,iBAAiB,MAAO,SAAS;;;;;CAK5C,CAAC;AAEH,eAAO,MAAM,kBAAkB,UACtB,KAAK,KACT,SAAS,KACX;IACD,QAAQ,kBAAkB,CAAC;IAC3B,OAAO,EAAE,MAAM,GAAG,SAAS,CAAC;CA2B7B,CAAC;AAOF,eAAO,MAAM,4BAA4B,UAAW,KAAK,KAAK,SAAS,uBAOtE,CAAC"}

package/dist/src/utils/status/fleet.js

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.fleetStatusLabels = exports.getFleetSyncStatus = void 0;
+exports.getFleetRolloutStatusWarning = exports.getFleetSyncStatus = exports.fleetStatusLabels = void 0;
 const types_1 = require("@flightctl/types");
 const error_1 = require("../error");
+const FLEET_ROLLOUT_FAILED_REASON = 'Suspended';
 const fleetStatusLabels = (t) => ({
     [types_1.ConditionType.FleetOverlappingSelectors]: t('Selectors overlap'),
     [types_1.ConditionType.FleetValid]: t('Valid'),
@@ -10,7 +11,7 @@ const fleetStatusLabels = (t) => ({
     SyncPending: t('Sync pending'),
 });
 exports.fleetStatusLabels = fleetStatusLabels;
-const getFleetSyncStatus = (fleet, t = (s) => s) => {
+const getFleetSyncStatus = (fleet, t) => {
     var _a, _b, _c;
     const selectorOverlap = (_b = (_a = fleet.status) === null || _a === void 0 ? void 0 : _a.conditions) === null || _b === void 0 ? void 0 : _b.find((c) => c.type === types_1.ConditionType.FleetOverlappingSelectors && c.status === types_1.ConditionStatus.ConditionStatusTrue);
     if (selectorOverlap) {
@@ -35,4 +36,16 @@ const getFleetSyncStatus = (fleet, t = (s) => s) => {
     };
 };
 exports.getFleetSyncStatus = getFleetSyncStatus;
+const isFleetRolloutFailedCondition = (condition) => condition.type === types_1.ConditionType.FleetRolloutInProgress &&
+    condition.status === types_1.ConditionStatus.ConditionStatusFalse &&
+    condition.reason === FLEET_ROLLOUT_FAILED_REASON;
+const getFleetRolloutStatusWarning = (fleet, t) => {
+    var _a, _b;
+    const failedRolloutCondition = (_b = (_a = fleet.status) === null || _a === void 0 ? void 0 : _a.conditions) === null || _b === void 0 ? void 0 : _b.find(isFleetRolloutFailedCondition);
+    if (failedRolloutCondition) {
+        return (0, error_1.getConditionMessage)(failedRolloutCondition) || t('Last rollout did not complete successfully');
+    }
+    return undefined;
+};
+exports.getFleetRolloutStatusWarning = getFleetRolloutStatusWarning;
 //# sourceMappingURL=fleet.js.map

package/dist/src/utils/status/fleet.js.map

@@ -1 +1 @@
-{"version":3,"file":"fleet.js","sourceRoot":"","sources":["../../../../src/utils/status/fleet.ts"],"names":[],"mappings":";;;AAAA,4CAAyE;AAGzE,oCAA+C;AAE/C,MAAM,iBAAiB,GAAG,CAAC,CAAY,EAAE,EAAE,CAAC,CAAC;IAC3C,CAAC,qBAAa,CAAC,yBAAyB,CAAC,EAAE,CAAC,CAAC,mBAAmB,CAAC;IACjE,CAAC,qBAAa,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC;IACtC,OAAO,EAAE,CAAC,CAAC,SAAS,CAAC;IACrB,WAAW,EAAE,CAAC,CAAC,cAAc,CAAC;CAC/B,CAAC,CAAC;AAoC0B,8CAAiB;AAlC9C,MAAM,kBAAkB,GAAG,CACzB,KAAY,EACZ,IAAe,CAAC,CAAS,EAAE,EAAE,CAAC,CAAC,EAI/B,EAAE;;IACF,MAAM,eAAe,GAAG,MAAA,MAAA,KAAK,CAAC,MAAM,0CAAE,UAAU,0CAAE,IAAI,CACpD,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,qBAAa,CAAC,yBAAyB,IAAI,CAAC,CAAC,MAAM,KAAK,uBAAe,CAAC,mBAAmB,CAC9G,CAAC;IACF,IAAI,eAAe,EAAE,CAAC;QACpB,OAAO;YACL,OAAO,EACL,eAAe,CAAC,OAAO;gBACvB,CAAC,CAAC,8FAA8F,CAAC;YACnG,MAAM,EAAE,qBAAa,CAAC,yBAAyB;SAChD,CAAC;IACJ,CAAC;IAED,MAAM,cAAc,GAAG,CAAC,CAAA,MAAA,KAAK,CAAC,MAAM,0CAAE,UAAU,KAAI,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,qBAAa,CAAC,UAAU,CAAC,CAAC;IACzG,IAAI,cAAc,EAAE,CAAC;QACnB,MAAM,IAAI,GAAG,cAAc,CAAC,MAAM,KAAK,uBAAe,CAAC,mBAAmB,CAAC;QAC3E,MAAM,OAAO,GAAG,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAA,2BAAmB,EAAC,cAAc,CAAC,CAAC;QAChE,OAAO;YACL,OAAO;YACP,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC,qBAAa,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS;SACpD,CAAC;IACJ,CAAC;IACD,OAAO;QACL,MAAM,EAAE,aAAa;QACrB,OAAO,EAAE,CAAC,CAAC,wBAAwB,CAAC;KACrC,CAAC;AACJ,CAAC,CAAC;AAEO,gDAAkB"}
+{"version":3,"file":"fleet.js","sourceRoot":"","sources":["../../../../src/utils/status/fleet.ts"],"names":[],"mappings":";;;AAEA,4CAAoF;AAEpF,oCAA+C;AAE/C,MAAM,2BAA2B,GAAG,WAAW,CAAC;AAEzC,MAAM,iBAAiB,GAAG,CAAC,CAAY,EAAE,EAAE,CAAC,CAAC;IAClD,CAAC,qBAAa,CAAC,yBAAyB,CAAC,EAAE,CAAC,CAAC,mBAAmB,CAAC;IACjE,CAAC,qBAAa,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC;IACtC,OAAO,EAAE,CAAC,CAAC,SAAS,CAAC;IACrB,WAAW,EAAE,CAAC,CAAC,cAAc,CAAC;CAC/B,CAAC,CAAC;AALU,QAAA,iBAAiB,qBAK3B;AAEI,MAAM,kBAAkB,GAAG,CAChC,KAAY,EACZ,CAAY,EAIZ,EAAE;;IACF,MAAM,eAAe,GAAG,MAAA,MAAA,KAAK,CAAC,MAAM,0CAAE,UAAU,0CAAE,IAAI,CACpD,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,qBAAa,CAAC,yBAAyB,IAAI,CAAC,CAAC,MAAM,KAAK,uBAAe,CAAC,mBAAmB,CAC9G,CAAC;IACF,IAAI,eAAe,EAAE,CAAC;QACpB,OAAO;YACL,OAAO,EACL,eAAe,CAAC,OAAO;gBACvB,CAAC,CAAC,8FAA8F,CAAC;YACnG,MAAM,EAAE,qBAAa,CAAC,yBAAyB;SAChD,CAAC;IACJ,CAAC;IAED,MAAM,cAAc,GAAG,CAAC,CAAA,MAAA,KAAK,CAAC,MAAM,0CAAE,UAAU,KAAI,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,qBAAa,CAAC,UAAU,CAAC,CAAC;IACzG,IAAI,cAAc,EAAE,CAAC;QACnB,MAAM,IAAI,GAAG,cAAc,CAAC,MAAM,KAAK,uBAAe,CAAC,mBAAmB,CAAC;QAC3E,MAAM,OAAO,GAAG,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAA,2BAAmB,EAAC,cAAc,CAAC,CAAC;QAChE,OAAO;YACL,OAAO;YACP,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC,qBAAa,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS;SACpD,CAAC;IACJ,CAAC;IACD,OAAO;QACL,MAAM,EAAE,aAAa;QACrB,OAAO,EAAE,CAAC,CAAC,wBAAwB,CAAC;KACrC,CAAC;AACJ,CAAC,CAAC;AAhCW,QAAA,kBAAkB,sBAgC7B;AAEF,MAAM,6BAA6B,GAAG,CAAC,SAAoB,EAAE,EAAE,CAC7D,SAAS,CAAC,IAAI,KAAK,qBAAa,CAAC,sBAAsB;IACvD,SAAS,CAAC,MAAM,KAAK,uBAAe,CAAC,oBAAoB;IACzD,SAAS,CAAC,MAAM,KAAK,2BAA2B,CAAC;AAE5C,MAAM,4BAA4B,GAAG,CAAC,KAAY,EAAE,CAAY,EAAE,EAAE;;IACzE,MAAM,sBAAsB,GAAG,MAAA,MAAA,KAAK,CAAC,MAAM,0CAAE,UAAU,0CAAE,IAAI,CAAC,6BAA6B,CAAC,CAAC;IAE7F,IAAI,sBAAsB,EAAE,CAAC;QAC3B,OAAO,IAAA,2BAAmB,EAAC,sBAAsB,CAAC,IAAI,CAAC,CAAC,4CAA4C,CAAC,CAAC;IACxG,CAAC;IACD,OAAO,SAAS,CAAC;AACnB,CAAC,CAAC;AAPW,QAAA,4BAA4B,gCAOvC"}

package/dist/src/utils/tooltip.d.ts

@@ -0,0 +1,7 @@
+export declare const getDisabledTooltipProps: (disabledReason: string | undefined) => {
+    isAriaDisabled: boolean;
+    tooltipProps: {
+        content: string;
+    };
+} | undefined;
+//# sourceMappingURL=tooltip.d.ts.map

package/dist/src/utils/tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../src/utils/tooltip.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,uBAAuB,mBAAoB,MAAM,GAAG,SAAS;;;;;aACwB,CAAC"}

package/dist/src/utils/tooltip.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getDisabledTooltipProps = void 0;
+const getDisabledTooltipProps = (disabledReason) => disabledReason ? { isAriaDisabled: true, tooltipProps: { content: disabledReason } } : undefined;
+exports.getDisabledTooltipProps = getDisabledTooltipProps;
+//# sourceMappingURL=tooltip.js.map

package/dist/src/utils/tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../src/utils/tooltip.ts"],"names":[],"mappings":";;;AAAO,MAAM,uBAAuB,GAAG,CAAC,cAAkC,EAAE,EAAE,CAC5E,cAAc,CAAC,CAAC,CAAC,EAAE,cAAc,EAAE,IAAI,EAAE,YAAY,EAAE,EAAE,OAAO,EAAE,cAAc,EAAE,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC;AADtF,QAAA,uBAAuB,2BAC+D"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flightctl/ui-components",
-  "version": "0.4.0",
+  "version": "0.5.0-rc2",
   "description": "Components for Flightctl UI",
   "repository": "https://github.com/flightctl/flightctl-ui.git",
   "homepage": "https://github.com/flightctl/flightctl-ui.git",

package/src/components/DetailsPage/DetailsPageActions.tsx

@@ -1,17 +1,33 @@
 import * as React from 'react';
 import { Dropdown, DropdownItem, MenuToggle } from '@patternfly/react-core';
 
-import DeleteModal from '../modals/DeleteModal/DeleteModal';
+import { DeviceDecommissionTargetType } from '@flightctl/types';
+
 import { useTranslation } from '../../hooks/useTranslation';
+import { getDisabledTooltipProps } from '../../utils/tooltip';
+import DeleteModal from '../modals/DeleteModal/DeleteModal';
+import DecommissionModal from '../modals/DecommissionModal/DecommissionModal';
 
 type DeleteActionProps = {
   onDelete: () => Promise<unknown>;
   resourceType: string;
   resourceName: string;
+  buttonLabel?: string;
   disabledReason?: string | boolean;
 };
 
-export const useDeleteAction = ({ resourceType, resourceName, onDelete, disabledReason }: DeleteActionProps) => {
+type DecommissionActionProps = {
+  onDecommission: (target: DeviceDecommissionTargetType) => Promise<unknown>;
+  disabledReason?: string;
+};
+
+export const useDeleteAction = ({
+  resourceType,
+  resourceName,
+  buttonLabel,
+  onDelete,
+  disabledReason,
+}: DeleteActionProps) => {
   const { t } = useTranslation();
   const [isDeleteModalOpen, setIsDeleteModalOpen] = React.useState(false);
   const deleteAction = (
@@ -26,7 +42,7 @@ export const useDeleteAction = ({ resourceType, resourceName, onDelete, disabled
           }
         : undefined)}
     >
-      {t('Delete {{ resourceType }}', { resourceType })}
+      {buttonLabel || t('Delete {{ resourceType }}', { resourceType })}
     </DropdownItem>
   );
   const deleteModal = isDeleteModalOpen && (
@@ -41,11 +57,23 @@ export const useDeleteAction = ({ resourceType, resourceName, onDelete, disabled
   return { deleteAction, deleteModal };
 };
 
-type DetailsPageActionsProps = {
-  children: React.ReactNode;
+export const useDecommissionAction = ({ onDecommission, disabledReason }: DecommissionActionProps) => {
+  const { t } = useTranslation();
+  const [isDecommissionModalOpen, setIsDecommissionModalOpen] = React.useState(false);
+  const decommissionProps = getDisabledTooltipProps(disabledReason);
+  const decommissionAction = (
+    <DropdownItem onClick={() => setIsDecommissionModalOpen(true)} {...decommissionProps}>
+      {t('Decommission device')}
+    </DropdownItem>
+  );
+  const decommissionModal = isDecommissionModalOpen && (
+    <DecommissionModal onClose={() => setIsDecommissionModalOpen(false)} onDecommission={onDecommission} />
+  );
+
+  return { decommissionAction, decommissionModal };
 };
 
-const DetailsPageActions: React.FC<DetailsPageActionsProps> = ({ children }) => {
+const DetailsPageActions = ({ children }: React.PropsWithChildren<unknown>) => {
   const { t } = useTranslation();
   const [actionsOpen, setActionsOpen] = React.useState(false);
   return (

package/src/components/DetailsPage/Tables/ApplicationsTable.tsx

@@ -90,7 +90,7 @@ const ApplicationsTable = ({
 
           const deleteSystemdUnit = canEdit && !isDeletedSystemdUnit && onSystemdDelete && (
             <Button
-              aria-label={t('Delete')}
+              aria-label={t('Delete system service')}
               isDisabled={isUpdating}
               variant="plain"
               icon={<MinusCircleIcon />}

package/src/components/Device/DeviceDetails/DeviceApplications.tsx

@@ -12,8 +12,8 @@ import DetailsPageCard, { DetailsPageCardBody } from '../../DetailsPage/DetailsP
 
 type DeviceDetailsTabProps = {
   device: Required<Device>;
-  refetch: VoidFunction;
   canEdit: boolean;
+  refetch?: VoidFunction;
 };
 
 const DeviceApplications = ({ device, refetch, canEdit }: React.PropsWithChildren<DeviceDetailsTabProps>) => {
@@ -25,7 +25,7 @@ const DeviceApplications = ({ device, refetch, canEdit }: React.PropsWithChildre
 
   const onClose = (hasChanges?: boolean, addedUnits?: string[]) => {
     if (hasChanges) {
-      refetch();
+      refetch?.();
     }
     if (addedUnits?.length) {
       const allAddedUnitDates = { ...addedSystemdDates };
@@ -56,7 +56,7 @@ const DeviceApplications = ({ device, refetch, canEdit }: React.PropsWithChildre
           if (patches.length > 0) {
             setIsUpdating(true);
             await patch(`devices/${device.metadata.name}`, patches);
-            refetch();
+            refetch?.();
             setIsUpdating(false);
           }
         };

package/src/components/Device/DeviceDetails/DeviceDetailsPage.tsx

@@ -1,11 +1,12 @@
 import * as React from 'react';
-import { DropdownItem, DropdownList, Nav, NavList } from '@patternfly/react-core';
+import { Button, DropdownItem, DropdownList, Nav, NavList } from '@patternfly/react-core';
 
-import { Device } from '@flightctl/types';
+import { Device, DeviceDecommission, DeviceDecommissionTargetType } from '@flightctl/types';
 import { useFetchPeriodically } from '../../../hooks/useFetchPeriodically';
 import { useFetch } from '../../../hooks/useFetch';
+import { getDisabledTooltipProps } from '../../../utils/tooltip';
 import DetailsPage from '../../DetailsPage/DetailsPage';
-import DetailsPageActions, { useDeleteAction } from '../../DetailsPage/DetailsPageActions';
+import DetailsPageActions, { useDecommissionAction, useDeleteAction } from '../../DetailsPage/DetailsPageActions';
 import { useTranslation } from '../../../hooks/useTranslation';
 import { ROUTE, useNavigate } from '../../../hooks/useNavigate';
 import { useAppContext } from '../../../hooks/useAppContext';
@@ -13,7 +14,7 @@ import DeviceDetailsTab from './DeviceDetailsTab';
 import TerminalTab from './TerminalTab';
 import NavItem from '../../NavItem/NavItem';
 import DeviceStatusDebugModal from './DeviceStatusDebugModal';
-import { getDeviceFleet } from '../../../utils/devices';
+import { getEditDisabledReason, isDeviceEnrolled } from '../../../utils/devices';
 import { RESOURCE, VERB } from '../../../types/rbac';
 import { useAccessReview } from '../../../hooks/useAccessReview';
 import PageWithPermissions from '../../common/PageWithPermissions';
@@ -26,17 +27,21 @@ const DeviceDetailsPage = ({ children, hideTerminal }: DeviceDetailsPageProps) =
     router: { useParams, Routes, Route, Navigate },
   } = useAppContext();
   const { deviceId } = useParams() as { deviceId: string };
+  const navigate = useNavigate();
+  const { put, remove } = useFetch();
   const [device, loading, error, refetch] = useFetchPeriodically<Required<Device>>({ endpoint: `devices/${deviceId}` });
-  const [showDebugInfo, setShowDebugInfo] = React.useState<boolean>(false);
 
-  const navigate = useNavigate();
-  const { remove } = useFetch();
+  const [showDebugInfo, setShowDebugInfo] = React.useState<boolean>(false);
 
   const deviceAlias = device?.metadata.labels?.alias || deviceId;
+  const isEnrolled = device && isDeviceEnrolled(device);
 
+  const [hasTerminalAccess] = useAccessReview(RESOURCE.DEVICE_CONSOLE, VERB.GET);
   const [canDelete] = useAccessReview(RESOURCE.DEVICE, VERB.DELETE);
   const [canEdit] = useAccessReview(RESOURCE.DEVICE, VERB.PATCH);
-  const [canOpenTerminal] = useAccessReview(RESOURCE.DEVICE_CONSOLE, VERB.GET);
+  const [canDecommission] = useAccessReview(RESOURCE.DEVICE_DECOMMISSION, VERB.UPDATE);
+
+  const canOpenTerminal = hasTerminalAccess && isEnrolled;
 
   const { deleteAction, deleteModal } = useDeleteAction({
     onDelete: async () => {
@@ -45,15 +50,20 @@ const DeviceDetailsPage = ({ children, hideTerminal }: DeviceDetailsPageProps) =
     },
     resourceName: deviceAlias,
     resourceType: 'device',
+    buttonLabel: isEnrolled ? undefined : t('Delete forever'),
   });
-  const editActionProps = getDeviceFleet(device?.metadata || {})
-    ? {
-        isAriaDisabled: true,
-        tooltipProps: {
-          content: t('Device is bound to a fleet. Its configurations cannot be edited'),
-        },
-      }
-    : undefined;
+
+  const { decommissionAction, decommissionModal } = useDecommissionAction({
+    onDecommission: async (target: DeviceDecommissionTargetType) => {
+      await put<DeviceDecommission>(`devices/${deviceId}/decommission`, {
+        target,
+      });
+      refetch();
+      navigate(ROUTE.DEVICES);
+    },
+  });
+
+  const editActionProps = device ? getDisabledTooltipProps(getEditDisabledReason(device, t)) : undefined;
 
   return (
     <DetailsPage
@@ -73,26 +83,34 @@ const DeviceDetailsPage = ({ children, hideTerminal }: DeviceDetailsPageProps) =
         </Nav>
       }
       actions={
-        <DetailsPageActions>
-          <DropdownList>
-            {canEdit && (
+        isEnrolled ? (
+          <DetailsPageActions>
+            <DropdownList>
+              {canEdit && (
+                <DropdownItem
+                  onClick={() => navigate({ route: ROUTE.DEVICE_EDIT, postfix: deviceId })}
+                  {...editActionProps}
+                >
+                  {t('Edit device configurations')}
+                </DropdownItem>
+              )}
               <DropdownItem
-                onClick={() => navigate({ route: ROUTE.DEVICE_EDIT, postfix: deviceId })}
-                {...editActionProps}
+                onClick={() => {
+                  setShowDebugInfo(!showDebugInfo);
+                }}
               >
-                {t('Edit device configurations')}
+                {t('View status debug information')}
               </DropdownItem>
-            )}
-            {canDelete && deleteAction}
-            <DropdownItem
-              onClick={() => {
-                setShowDebugInfo(!showDebugInfo);
-              }}
-            >
-              {t('View status debug information')}
-            </DropdownItem>
-          </DropdownList>
-        </DetailsPageActions>
+              {canDecommission && decommissionAction}
+            </DropdownList>
+          </DetailsPageActions>
+        ) : (
+          canDelete && (
+            <Button aria-label={t('Delete device forever')} variant="danger">
+              {deleteAction}
+            </Button>
+          )
+        )
       }
     >
       {device && (
@@ -109,7 +127,8 @@ const DeviceDetailsPage = ({ children, hideTerminal }: DeviceDetailsPageProps) =
           {!hideTerminal && canOpenTerminal && <Route path="terminal" element={<TerminalTab device={device} />} />}
         </Routes>
       )}
-      {deleteModal}
+
+      {deleteModal || decommissionModal}
       {device && showDebugInfo && (
         <DeviceStatusDebugModal
           status={device.status}