@openshift-assisted/ui-lib
Version:
React component library for the Assisted Installer UI
80 lines • 5.52 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importDefault(require("react"));
const react_router_dom_v5_compat_1 = require("react-router-dom-v5-compat");
const react_core_1 = require("@patternfly/react-core");
const add_circle_o_icon_1 = require("@patternfly/react-icons/dist/js/icons/add-circle-o-icon");
const common_1 = require("../../../common");
const ClustersTable_1 = tslib_1.__importDefault(require("./ClustersTable"));
const slice_1 = require("../../store/slices/clusters/slice");
const api_1 = require("../../../common/api");
const ClusterBreadcrumbs_1 = tslib_1.__importDefault(require("./ClusterBreadcrumbs"));
const services_1 = require("../../services");
const use_translation_wrapper_1 = require("../../../common/hooks/use-translation-wrapper");
const ClusterPollingErrorModal_1 = tslib_1.__importDefault(require("../clusterDetail/ClusterPollingErrorModal"));
const store_1 = require("../../store");
const selectors_1 = require("../../store/slices/clusters/selectors");
const Clusters = () => {
const navigate = (0, react_router_dom_v5_compat_1.useNavigate)();
const { LOADING, EMPTY, POLLING_ERROR, RELOADING } = common_1.ResourceUIState;
const { addAlert } = (0, common_1.useAlerts)();
const { t } = (0, use_translation_wrapper_1.useTranslation)();
const clusterRows = (0, store_1.useSelectorDay1)((0, selectors_1.selectClusterTableRows)(t));
const clustersUIState = (0, store_1.useSelectorDay1)(selectors_1.selectClustersUIState);
const uiState = react_1.default.useRef(clustersUIState);
if (clustersUIState !== RELOADING) {
uiState.current = clustersUIState;
}
const dispatch = (0, store_1.useDispatchDay1)();
const deleteClusterAsync = react_1.default.useCallback((clusterId) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
try {
yield services_1.ClustersService.remove(clusterId);
dispatch((0, slice_1.deleteCluster)(clusterId));
}
catch (e) {
(0, api_1.handleApiError)(e, () => addAlert({
title: 'Cluster could not be deleted',
message: (0, api_1.getApiErrorMessage)(e),
}));
}
}), [dispatch, addAlert]);
const fetchClusters = react_1.default.useCallback(() => void dispatch((0, slice_1.fetchClustersAsync)()), [dispatch]);
react_1.default.useEffect(() => {
// Fetch immediately on mount
fetchClusters();
// Set up polling for subsequent updates
const timer = setInterval(() => {
fetchClusters();
}, common_1.REDUCED_POLLING_INTERVAL);
return () => clearInterval(timer);
}, [fetchClusters]);
switch (uiState.current) {
case LOADING:
return (react_1.default.createElement(react_core_1.PageSection, { variant: react_core_1.PageSectionVariants.light, isFilled: true },
react_1.default.createElement(common_1.LoadingState, null)));
case EMPTY:
return (react_1.default.createElement(react_core_1.PageSection, { variant: react_core_1.PageSectionVariants.light, isFilled: true },
react_1.default.createElement(common_1.EmptyState, { icon: add_circle_o_icon_1.AddCircleOIcon, title: "Create new assisted cluster", content: "There are no clusters yet. This wizard is going to guide you through the OpenShift cluster deployment.", primaryAction: react_1.default.createElement(react_core_1.Button, { variant: react_core_1.ButtonVariant.primary, onClick: () => navigate(`~new`), id: "empty-state-new-cluster-button", "data-ouia-id": "button-create-new-cluster" }, "Create New Cluster") })));
default:
if (clusterRows.length === 0 && uiState.current === POLLING_ERROR) {
return (react_1.default.createElement(react_core_1.PageSection, { variant: react_core_1.PageSectionVariants.light, isFilled: true },
react_1.default.createElement(common_1.ErrorState, { title: "Failed to fetch clusters.", fetchData: fetchClusters })));
}
else {
return (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(ClusterBreadcrumbs_1.default, null),
react_1.default.createElement(react_core_1.PageSection, { variant: react_core_1.PageSectionVariants.light },
react_1.default.createElement(react_core_1.TextContent, null,
react_1.default.createElement(react_core_1.Text, { component: "h1" }, "Assisted Clusters"))),
react_1.default.createElement(react_core_1.PageSection, { variant: react_core_1.PageSectionVariants.light, isFilled: true },
react_1.default.createElement(common_1.Alerts, null),
react_1.default.createElement(ClustersTable_1.default, { rows: clusterRows, deleteCluster: deleteClusterAsync })),
uiState.current === POLLING_ERROR && (react_1.default.createElement(ClusterPollingErrorModal_1.default, { title: 'Failed to fetch clusters', content: 'There was an error retrieving data. Check your connection and try refreshing the page.' }))));
}
}
};
const ClustersPage = () => (react_1.default.createElement(common_1.AlertsContextProvider, null,
react_1.default.createElement(Clusters, null)));
exports.default = ClustersPage;
//# sourceMappingURL=Clusters.js.map