Skip to content

Commit

Permalink
Merge pull request #1114 from TimothyAsirJeyasing/parser-for-applicat…
Browse files Browse the repository at this point in the history 
…ions

Add parser for subscription application
  • Loading branch information
@openshift-merge-bot
openshift-merge-bot[bot] authored Dec 18, 2023
2 parents ec0318d + a19e8df commit f7e9a93
Show file tree
Hide file tree
Showing 17 changed files with 761 additions and 288 deletions.
4 changes: 2 additions & 2 deletions locales/en/plugin__odf-console.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,8 +82,8 @@
"Peer connection": "Peer connection",
" {{ peerConnectedCount }} Connected": " {{ peerConnectedCount }} Connected",
"Total applications": "Total applications",
" {{ protectedAppSetsCount }} protected apps": " {{ protectedAppSetsCount }} protected apps",
" {{ appsWithIssues }} of {{ protectedAppSetsCount }} apps with issues": " {{ appsWithIssues }} of {{ protectedAppSetsCount }} apps with issues",
" {{ protectedAppCount }} protected apps": " {{ protectedAppCount }} protected apps",
" {{ appsWithIssues }} of {{ protectedAppCount }} apps with issues": " {{ appsWithIssues }} of {{ protectedAppCount }} apps with issues",
"Current value: ": "Current value: ",
"Max value: ": "Max value: ",
"Min value: ": "Min value: ",
Expand Down
16 changes: 10 additions & 6 deletions ...cluster-app-card/argo-application-set.tsx → ...a-policy/cluster-app-card/application.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

import * as React from 'react';
import { DRPC_STATUS } from '@odf/mco/constants';
import { PlacementInfo, ProtectedAppSetsMap } from '@odf/mco/types';
import { PlacementInfo, ProtectedAppsMap } from '@odf/mco/types';
import { getDRStatus } from '@odf/mco/utils';
import { utcDateTimeFormatter } from '@odf/shared/details-page/datetime';
import { fromNow } from '@odf/shared/details-page/datetime';
Expand Down Expand Up @@ -47,10 +47,12 @@ const getCurrentActivity = (
}
};

export const ActivitySection: React.FC<CommonProps> = ({ selectedAppSet }) => {
export const ActivitySection: React.FC<CommonProps> = ({
selectedApplication,
}) => {
const { t } = useCustomTranslation();

const placementInfo: PlacementInfo = selectedAppSet?.placementInfo?.[0];
const placementInfo: PlacementInfo = selectedApplication?.placementInfo?.[0];
const currentStatus = placementInfo?.status;
const failoverCluster = placementInfo?.failoverCluster;
const preferredCluster = placementInfo?.preferredCluster;
Expand All @@ -71,11 +73,13 @@ export const ActivitySection: React.FC<CommonProps> = ({ selectedAppSet }) => {
);
};

export const SnapshotSection: React.FC<CommonProps> = ({ selectedAppSet }) => {
export const SnapshotSection: React.FC<CommonProps> = ({
selectedApplication,
}) => {
const { t } = useCustomTranslation();
const [lastSyncTime, setLastSyncTime] = React.useState('N/A');
const lastGroupSyncTime =
selectedAppSet?.placementInfo?.[0]?.lastGroupSyncTime;
selectedApplication?.placementInfo?.[0]?.lastGroupSyncTime;
const clearSetIntervalId = React.useRef<NodeJS.Timeout>();
const updateSyncTime = React.useCallback(() => {
if (!!lastGroupSyncTime) {
Expand Down Expand Up @@ -108,6 +112,6 @@ export const SnapshotSection: React.FC<CommonProps> = ({ selectedAppSet }) => {
};

type CommonProps = {
selectedAppSet: ProtectedAppSetsMap;
selectedApplication: ProtectedAppsMap;
lastSyncTimeData?: PrometheusResponse;
};
75 changes: 36 additions & 39 deletions packages/mco/components/mco-dashboard/data-policy/cluster-app-card/cluster-app-card.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,9 @@ import {
applicationDetails,
} from '@odf/mco/constants';
import {
DrClusterAppsMap,
AppSetObj,
ProtectedAppSetsMap,
DRClusterAppsMap,
ApplicationObj,
ProtectedAppsMap,
ACMManagedClusterViewKind,
ProtectedPVCData,
MirrorPeerKind,
Expand Down Expand Up @@ -38,14 +38,14 @@ import {
} from '../../../../models';
import {
getProtectedPVCFromVRG,
filterPVCDataUsingAppsets,
filterPVCDataUsingApps,
} from '../../../../utils';
import { getLastSyncPerClusterQuery } from '../../queries';
import {
CSVStatusesContext,
DRResourcesContext,
} from '../dr-dashboard-context';
import { ActivitySection, SnapshotSection } from './argo-application-set';
import { ActivitySection, SnapshotSection } from './application';
import {
HealthSection,
PeerConnectionSection,
Expand Down Expand Up @@ -113,26 +113,26 @@ export const ClusterWiseCard: React.FC<ClusterWiseCardProps> = ({

export const AppWiseCard: React.FC<AppWiseCardProps> = ({
protectedPVCData,
selectedAppSet,
selectedApplication,
}) => {
return (
<Grid hasGutter>
<GridItem lg={12} rowSpan={8} sm={12}>
<ProtectedPVCsSection
protectedPVCData={protectedPVCData}
selectedAppSet={selectedAppSet}
selectedApplication={selectedApplication}
/>
</GridItem>
<GridItem lg={3} rowSpan={8} sm={12}>
<ActivitySection selectedAppSet={selectedAppSet} />
<ActivitySection selectedApplication={selectedApplication} />
</GridItem>
<GridItem lg={9} rowSpan={8} sm={12}>
<SnapshotSection selectedAppSet={selectedAppSet} />
<SnapshotSection selectedApplication={selectedApplication} />
</GridItem>
<GridItem lg={12} rowSpan={8} sm={12}>
<VolumeSummarySection
protectedPVCData={protectedPVCData}
selectedAppSet={selectedAppSet}
selectedApplication={selectedApplication}
/>
</GridItem>
</Grid>
Expand All @@ -141,7 +141,7 @@ export const AppWiseCard: React.FC<AppWiseCardProps> = ({

export const ClusterAppCard: React.FC = () => {
const [cluster, setCluster] = React.useState<string>();
const [appSet, setAppSet] = React.useState<AppSetObj>({
const [application, setApplication] = React.useState<ApplicationObj>({
namespace: undefined,
name: ALL_APPS,
});
Expand Down Expand Up @@ -170,39 +170,39 @@ export const ClusterAppCard: React.FC = () => {
const allLoaded = loaded && !csvLoading && !lastSyncTimeLoading && mcvsLoaded;
const anyError = lastSyncTimeError || csvError || loadError || mcvsLoadError;

const selectedAppSet: ProtectedAppSetsMap = React.useMemo(() => {
const { name, namespace } = appSet || {};
const selectedApplication: ProtectedAppsMap = React.useMemo(() => {
const { name, namespace } = application || {};
return !!namespace && name !== ALL_APPS
? drClusterAppsMap[cluster]?.protectedAppSets?.find(
(protectedAppSet) =>
protectedAppSet?.appName === name &&
protectedAppSet?.appNamespace === namespace
? drClusterAppsMap[cluster]?.protectedApps?.find(
(protectedApp) =>
protectedApp?.appName === name &&
protectedApp?.appNamespace === namespace
)
: undefined;
}, [appSet, drClusterAppsMap, cluster]);
}, [application, drClusterAppsMap, cluster]);

const protectedPVCData: ProtectedPVCData[] = React.useMemo(() => {
const pvcsData =
(mcvsLoaded && !mcvsLoadError && getProtectedPVCFromVRG(mcvs)) || [];
const protectedAppSets = !!selectedAppSet
? [selectedAppSet]
: drClusterAppsMap[cluster]?.protectedAppSets;
return filterPVCDataUsingAppsets(pvcsData, protectedAppSets);
const protectedApps = !!selectedApplication
? [selectedApplication]
: drClusterAppsMap[cluster]?.protectedApps;
return filterPVCDataUsingApps(pvcsData, protectedApps);
}, [
drClusterAppsMap,
selectedAppSet,
selectedApplication,
cluster,
mcvs,
mcvsLoaded,
mcvsLoadError,
]);
const apiVersion = `${selectedAppSet?.appKind?.toLowerCase()}.${
selectedAppSet?.appAPIVersion?.split('/')[0]
const apiVersion = `${selectedApplication?.appKind?.toLowerCase()}.${
selectedApplication?.appAPIVersion?.split('/')[0]
}`;
const applicationDetailsPath =
applicationDetails
.replace(':namespace', appSet.namespace)
.replace(':name', appSet.name) +
.replace(':namespace', application.namespace)
.replace(':name', application.name) +
'?apiVersion=' +
apiVersion;

Expand All @@ -215,17 +215,14 @@ export const ClusterAppCard: React.FC = () => {
<ClusterAppDropdown
clusterResources={drClusterAppsMap}
clusterName={cluster}
appSet={appSet}
application={application}
setCluster={setCluster}
setAppSet={setAppSet}
setApplication={setApplication}
/>
<CardTitle className="mco-cluster-app__text--margin-top mco-cluster-app__headerText--size">
{!!appSet.namespace ? (
<Link
id="app-search-argo-apps-link"
to={applicationDetailsPath}
>
{appSet.name}
{!!application.namespace ? (
<Link id="app-overview-link" to={applicationDetailsPath}>
{application.name}
</Link>
) : (
cluster
Expand All @@ -234,7 +231,7 @@ export const ClusterAppCard: React.FC = () => {
</div>
</CardHeader>
<CardBody>
{!appSet.namespace && appSet.name === ALL_APPS ? (
{!application.namespace && application.name === ALL_APPS ? (
<ClusterWiseCard
clusterName={cluster}
lastSyncTimeData={lastSyncTimeData}
Expand All @@ -245,7 +242,7 @@ export const ClusterAppCard: React.FC = () => {
) : (
<AppWiseCard
protectedPVCData={protectedPVCData}
selectedAppSet={selectedAppSet}
selectedApplication={selectedApplication}
/>
)}
</CardBody>
Expand All @@ -268,10 +265,10 @@ type ClusterWiseCardProps = {
lastSyncTimeData: PrometheusResponse;
protectedPVCData: ProtectedPVCData[];
csvData: PrometheusResponse;
clusterResources: DrClusterAppsMap;
clusterResources: DRClusterAppsMap;
};

type AppWiseCardProps = {
protectedPVCData: ProtectedPVCData[];
selectedAppSet: ProtectedAppSetsMap;
selectedApplication: ProtectedAppsMap;
};
27 changes: 14 additions & 13 deletions packages/mco/components/mco-dashboard/data-policy/cluster-app-card/cluster.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ import {
OBJECT_NAME,
MANAGED_CLUSTER_CONDITION_AVAILABLE,
} from '@odf/mco/constants';
import { DrClusterAppsMap, PlacementInfo } from '@odf/mco/types';
import { DRClusterAppsMap, PlacementInfo } from '@odf/mco/types';
import {
getVolumeReplicationHealth,
ValidateManagedClusterCondition,
Expand Down Expand Up @@ -178,10 +178,10 @@ export const ApplicationsSection: React.FC<ApplicationsSectionProps> = ({

const appsWithIssues = React.useMemo(
() =>
clusterResources[clusterName]?.protectedAppSets?.reduce(
(acc, protectedAppSetsMap) => {
clusterResources[clusterName]?.protectedApps?.reduce(
(acc, protectedAppsMap) => {
const placementInfo: PlacementInfo =
protectedAppSetsMap?.placementInfo?.[0];
protectedAppsMap?.placementInfo?.[0];
const hasIssue = !!lastSyncTimeData?.data?.result?.find(
(item: PrometheusResult) =>
item?.metric?.[OBJECT_NAMESPACE] ===
Expand All @@ -192,29 +192,30 @@ export const ApplicationsSection: React.FC<ApplicationsSectionProps> = ({
placementInfo?.syncInterval
)[0] !== VOLUME_REPLICATION_HEALTH.HEALTHY
);

return hasIssue ? acc + 1 : acc;
},
0
) || 0,
[clusterResources, clusterName, lastSyncTimeData]
);

const totalAppSetsCount = clusterResources[clusterName]?.totalAppSetsCount;
const protectedAppSetsCount =
clusterResources[clusterName]?.protectedAppSets?.length;
const totalAppSetsCount = clusterResources[clusterName]?.totalAppCount;
const protectedAppCount =
clusterResources[clusterName]?.protectedApps?.length;
return (
<div className="mco-dashboard__contentColumn">
<Text component={TextVariants.h1}>{totalAppSetsCount || 0}</Text>
<StatusText>{t('Total applications')}</StatusText>
<Text className="text-muted mco-dashboard__statusText--margin">
{t(' {{ protectedAppSetsCount }} protected apps', {
protectedAppSetsCount,
{t(' {{ protectedAppCount }} protected apps', {
protectedAppCount,
})}
</Text>
<Text className="text-muted">
{t(
' {{ appsWithIssues }} of {{ protectedAppSetsCount }} apps with issues',
{ appsWithIssues, protectedAppSetsCount }
' {{ appsWithIssues }} of {{ protectedAppCount }} apps with issues',
{ appsWithIssues, protectedAppCount }
)}
</Text>
</div>
Expand Down Expand Up @@ -354,7 +355,7 @@ type OperatorsHealthPopUpProps = {
};

type HealthSectionProps = {
clusterResources: DrClusterAppsMap;
clusterResources: DRClusterAppsMap;
csvData: PrometheusResponse;
clusterName: string;
};
Expand All @@ -364,7 +365,7 @@ type PeerConnectionSectionProps = {
};

type ApplicationsSectionProps = {
clusterResources: DrClusterAppsMap;
clusterResources: DRClusterAppsMap;
clusterName: string;
lastSyncTimeData: PrometheusResponse;
};
Expand Down
Loading

0 comments on commit f7e9a93

Please sign in to comment.