create new store for onPrem envirnonment

create a single reducer: useGetBlueprintsOnPremQuery to show empty table in onPrem
osbuild · Sep 17, 2024 · ce5cdaa · ce5cdaa
1 parent df91224
commit ce5cdaa
Show file tree

Hide file tree

Showing 5 changed files with 139 additions and 82 deletions.
diff --git a/package.json b/package.json
@@ -90,6 +90,7 @@
  "lint": "npm-run-all lint:*",
  "lint:js": "eslint src",
  "lint:js:fix": "eslint src --fix",
+ "start": "fec dev",
  "start:stage": "fec dev --clouddotEnv=stage",
  "start:prod": "fec dev --clouddotEnv=prod",
  "start:msw:stage": "NODE_ENV=development MSW=TRUE fec dev --clouddotEnv=stage",

diff --git a/src/Components/ImagesTable/ImagesTable.tsx b/src/Components/ImagesTable/ImagesTable.tsx
@@ -27,6 +27,7 @@ import { useDispatch } from 'react-redux';
 import { NavigateFunction, useNavigate } from 'react-router-dom';
 
 import './ImagesTable.scss';
+import { isOnPremise } from './../../Utilities/useGetEnvironment';
 import ImagesEmptyState from './EmptyState';
 import {
  AwsDetails,
@@ -55,6 +56,7 @@ import {
  selectSelectedBlueprintId,
  setBlueprintId,
 } from '../../store/BlueprintSlice';
+import { useGetBlueprintsOnPremQuery } from '../../store/cloudApi';
 import { useAppSelector } from '../../store/hooks';
 import {
  BlueprintItem,
@@ -80,19 +82,28 @@ const ImagesTable = () => {
  const blueprintVersionFilter = useAppSelector(selectBlueprintVersionFilter);
  const blueprintsOffset = useAppSelector(selectOffset);
  const blueprintsLimit = useAppSelector(selectLimit);
-
- const { selectedBlueprintVersion } = useGetBlueprintsQuery(
+ const { selectedBlueprintVersion } = (
+ isOnPremise === 'cockpit'
+ ? useGetBlueprintsOnPremQuery
+ : useGetBlueprintsQuery
+ )(
  {
  search: blueprintSearchInput,
  limit: blueprintsLimit,
  offset: blueprintsOffset,
  },
  {
- selectFromResult: ({ data }) => ({
- selectedBlueprintVersion: data?.data?.find(
- (blueprint: BlueprintItem) => blueprint.id === selectedBlueprintId
- )?.version,
- }),
+ selectFromResult: ({ data }) => {
+ if (!data || Array.isArray(data)) {
+ return { selectedBlueprintVersion: undefined };
+ }
+
+ return {
+ selectedBlueprintVersion: data?.data?.find(
+ (blueprint: BlueprintItem) => blueprint.id === selectedBlueprintId
+ )?.version,
+ };
+ },
  }
  );
  const onSetPage: OnSetPage = (_, page) => setPage(page);
@@ -145,6 +156,81 @@ const ImagesTable = () => {
  ? isLoadingBlueprintsCompose
  : isLoadingComposes;
 
+ let composes = data?.data;
+ if (selectedBlueprintId && blueprintVersionFilter === 'latest') {
+ composes = composes?.filter((compose) => {
+ return compose.blueprint_version === selectedBlueprintVersion;
+ });
+ }
+ const itemCount = data?.meta.count || 0;
+
+ if (isOnPremise === 'cockpit') {
+ return (
+ <>
+ <ImagesTableToolbar
+ itemCount={itemCount}
+ perPage={perPage}
+ page={page}
+ setPage={setPage}
+ onPerPageSelect={onPerPageSelect}
+ />
+ <Table variant="compact" data-testid="images-table">
+ <Thead>
+ <Tr>
+ <Th
+ style={{ minWidth: itemCount === 0 ? '30px' : 'auto' }}
+ aria-label="Details expandable"
+ />
+ <Th>Name</Th>
+ <Th>Updated</Th>
+ <Th>OS</Th>
+ <Th>Target</Th>
+ <Th>Version</Th>
+ <Th>Status</Th>
+ <Th>Instance</Th>
+ <Th aria-label="Actions menu" />
+ </Tr>
+ </Thead>
+ {itemCount === 0 && (
+ <Tbody>
+ <Tr>
+ <Td colSpan={12}>
+ <ImagesEmptyState selectedBlueprint={selectedBlueprintId} />
+ </Td>
+ </Tr>
+ </Tbody>
+ )}
+
+ {composes?.map((compose, rowIndex) => {
+ return (
+ <ImagesTableRow
+ compose={compose}
+ rowIndex={rowIndex}
+ key={compose.id}
+ />
+ );
+ })}
+ </Table>
+ <Toolbar className="pf-u-mb-xl">
+ <ToolbarContent>
+ <ToolbarItem variant="pagination" align={{ default: 'alignRight' }}>
+ <Pagination
+ variant={PaginationVariant.bottom}
+ itemCount={itemCount}
+ perPage={perPage}
+ page={page}
+ onSetPage={onSetPage}
+ onPerPageSelect={onPerPageSelect}
+ widgetId="compose-pagination-bottom"
+ data-testid="images-pagination-bottom"
+ isCompact
+ />
+ </ToolbarItem>
+ </ToolbarContent>
+ </Toolbar>
+ </>
+ );
+ }
  if (isLoading) {
  return (
  <Bullseye>
@@ -170,80 +256,6 @@ const ImagesTable = () => {
  </Bullseye>
  );
  }
-
- let composes = data?.data;
- if (selectedBlueprintId && blueprintVersionFilter === 'latest') {
- composes = composes?.filter((compose) => {
- return compose.blueprint_version === selectedBlueprintVersion;
- });
- }
- const itemCount = data?.meta.count || 0;
-
- return (
- <>
- <ImagesTableToolbar
- itemCount={itemCount}
- perPage={perPage}
- page={page}
- setPage={setPage}
- onPerPageSelect={onPerPageSelect}
- />
- <Table variant="compact" data-testid="images-table">
- <Thead>
- <Tr>
- <Th
- style={{ minWidth: itemCount === 0 ? '30px' : 'auto' }}
- aria-label="Details expandable"
- />
- <Th>Name</Th>
- <Th>Updated</Th>
- <Th>OS</Th>
- <Th>Target</Th>
- <Th>Version</Th>
- <Th>Status</Th>
- <Th>Instance</Th>
- <Th aria-label="Actions menu" />
- </Tr>
- </Thead>
- {itemCount === 0 && (
- <Tbody>
- <Tr>
- <Td colSpan={12}>
- <ImagesEmptyState selectedBlueprint={selectedBlueprintId} />
- </Td>
- </Tr>
- </Tbody>
- )}
-
- {composes?.map((compose, rowIndex) => {
- return (
- <ImagesTableRow
- compose={compose}
- rowIndex={rowIndex}
- key={compose.id}
- />
- );
- })}
- </Table>
- <Toolbar className="pf-u-mb-xl">
- <ToolbarContent>
- <ToolbarItem variant="pagination" align={{ default: 'alignRight' }}>
- <Pagination
- variant={PaginationVariant.bottom}
- itemCount={itemCount}
- perPage={perPage}
- page={page}
- onSetPage={onSetPage}
- onPerPageSelect={onPerPageSelect}
- widgetId="compose-pagination-bottom"
- data-testid="images-pagination-bottom"
- isCompact
- />
- </ToolbarItem>
- </ToolbarContent>
- </Toolbar>
- </>
- );
 };
 
 type ImagesTableRowPropTypes = {

diff --git a/src/store/cloudApi.ts b/src/store/cloudApi.ts
@@ -0,0 +1,33 @@
+import { emptyCloudApi as api } from './emptyCloadApi';
+
+const sampleBlueprints = {
+ data: [
+ {
+ id: '1',
+ name: 'Blueprint 1',
+ version: '1.0',
+ description: '70% Dark Chocolate Blueprint 1',
+ last_modified_at: '2021-09-09T14:38:00.000Z',
+ },
+ {
+ id: '2',
+ name: 'Blueprint 2',
+ version: '1.1',
+ description: '70% Dark Chocolate Blueprint 2',
+ last_modified_at: '2021-09-09T14:38:00.000Z',
+ },
+ ],
+};
+
+// initialize an empty api service that we'll inject endpoints into later as needed
+export const cloudApi = api.injectEndpoints({
+ endpoints: (build) => ({
+ getBlueprintsOnPrem: build.query({
+ query: () => '/blueprints',
+ transformResponse: () => sampleBlueprints,
+ }),
+ }),
+ overrideExisting: false,
+});
+
+export const { useGetBlueprintsOnPremQuery } = cloudApi;
diff --git a/src/store/emptyCloadApi.ts b/src/store/emptyCloadApi.ts
@@ -0,0 +1,8 @@
+import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
+
+// initialize an empty api service that we'll inject endpoints into later as needed
+export const emptyCloudApi = createApi({
+ reducerPath: 'cloudApi',
+ baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
+ endpoints: () => ({}),
+});
diff --git a/src/store/index.ts b/src/store/index.ts
@@ -3,6 +3,7 @@ import { combineReducers, configureStore } from '@reduxjs/toolkit';
 import promiseMiddleware from 'redux-promise-middleware';
 
 import { blueprintsSlice } from './BlueprintSlice';
+import { cloudApi } from './cloudApi';
 import { contentSourcesApi } from './contentSourcesApi';
 import { edgeApi } from './edgeApi';
 import { imageBuilderApi } from './enhancedImageBuilderApi';
@@ -24,6 +25,7 @@ export const reducer = combineReducers({
  [imageBuilderApi.reducerPath]: imageBuilderApi.reducer,
  [rhsmApi.reducerPath]: rhsmApi.reducer,
  [provisioningApi.reducerPath]: provisioningApi.reducer,
+ [cloudApi.reducerPath]: cloudApi.reducer,
  notifications: notificationsReducer,
  wizard: wizardSlice,
  blueprints: blueprintsSlice.reducer,
@@ -94,7 +96,8 @@ export const middleware = (getDefaultMiddleware: Function) =>
  contentSourcesApi.middleware,
  imageBuilderApi.middleware,
  rhsmApi.middleware,
- provisioningApi.middleware
+ provisioningApi.middleware,
+ cloudApi.middleware
  );
 
 export const store = configureStore({ reducer, middleware });