Skip to content

Commit

Permalink
wip
Browse files Browse the repository at this point in the history
  • Loading branch information
@miaawong
miaawong committed Aug 20, 2024
1 parent 4c92ed8 commit ae01388
Show file tree
Hide file tree
Showing 3 changed files with 194 additions and 85 deletions.
81 changes: 22 additions & 59 deletions web/src/components/apps/AvailableUpdatesComponent.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import ReactTooltip from "react-tooltip";

import Icon from "@components/Icon";
import MountAware from "@components/shared/MountAware";
import { AirgapUploader } from "@src/utilities/airgapUploader";
import { Utilities } from "@src/utilities/utilities";
import { AvailableUpdate } from "@types";
import { useNavigate } from "react-router-dom";
import ReactTooltip from "react-tooltip";

const AvailableUpdatesComponent = ({
updates,
Expand All @@ -14,8 +14,6 @@ const AvailableUpdatesComponent = ({
airgapUploader,
isAirgap,
fetchAvailableUpdates,
dashboardView = false,
appSlug,
}: {
updates: AvailableUpdate[];
showReleaseNotes: (releaseNotes: string) => void;
Expand All @@ -24,22 +22,13 @@ const AvailableUpdatesComponent = ({
isLoading?: boolean;
error?: string;
} | null;
startUpgradeService?: (version: AvailableUpdate) => void;
airgapUploader?: AirgapUploader | null;
isAirgap?: boolean;
startUpgradeService: (version: AvailableUpdate) => void;
airgapUploader: AirgapUploader | null;
isAirgap: boolean;
fetchAvailableUpdates: () => void;
dashboardView?: boolean;
appSlug?: string;
}) => {
const navigate = useNavigate();
return (
<div
className={`${
!dashboardView
? "TableDiff--Wrapper card-bg u-marginBottom--30"
: "tw-mt-4"
}`}
>
<div className="TableDiff--Wrapper card-bg u-marginBottom--30">
<div className="flex justifyContent--spaceBetween alignItems--center u-marginBottom--15">
<p className="u-fontSize--normal u-fontWeight--medium card-title">
Available Updates
Expand All @@ -58,11 +47,7 @@ const AvailableUpdatesComponent = ({
</MountAware>
</div>
)}
<div
className={`flex alignItems--center ${
!dashboardView && "u-marginRight--20"
}`}
>
<div className="flex alignItems--center u-marginRight--20">
<span
className="flex-auto flex alignItems--center link u-fontSize--small"
onClick={fetchAvailableUpdates}
Expand Down Expand Up @@ -130,48 +115,26 @@ const AvailableUpdatesComponent = ({
/>
</>
)}
{!dashboardView && (
<button
className={"btn tw-ml-2 primary blue"}
onClick={() => startUpgradeService(update)}
disabled={
!update.isDeployable || isCurrentVersionLoading
}

<button
className={"btn tw-ml-2 primary blue"}
onClick={() => startUpgradeService(update)}
disabled={!update.isDeployable || isCurrentVersionLoading}
>
<span
key={update.nonDeployableCause}
data-tip-disable={update.isDeployable}
data-tip={update.nonDeployableCause}
data-for="disable-deployment-tooltip"
>
<span
key={update.nonDeployableCause}
data-tip-disable={update.isDeployable}
data-tip={update.nonDeployableCause}
data-for="disable-deployment-tooltip"
>
{isCurrentVersionLoading ? "Preparing..." : "Deploy"}
</span>
</button>
)}
{isCurrentVersionLoading ? "Preparing..." : "Deploy"}
</span>
</button>

<ReactTooltip
effect="solid"
id="disable-deployment-tooltip"
/>
{dashboardView && (
<button
className={"btn tw-ml-2 primary blue"}
onClick={() =>
navigate(`/app/${appSlug}/version-history`)
}
disabled={
!update.isDeployable || isCurrentVersionLoading
}
>
<span
key={update.nonDeployableCause}
data-tip-disable={update.isDeployable}
data-tip={update.nonDeployableCause}
data-for="disable-deployment-tooltip"
>
Go to Version history
</span>
</button>
)}
</div>
</div>
{upgradeService?.error &&
Expand Down
121 changes: 121 additions & 0 deletions web/src/features/Dashboard/components/AvailableUpdateCard.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,121 @@
import { useNavigate } from "react-router-dom";
import ReactTooltip from "react-tooltip";

import Icon from "@components/Icon";
import { Utilities } from "@src/utilities/utilities";
import { AvailableUpdate } from "@types";

const AvailableUpdateCard = ({
updates,
showReleaseNotes,
upgradeService,
appSlug,
}: {
updates: AvailableUpdate[];
showReleaseNotes: (releaseNotes: string) => void;
upgradeService: {
versionLabel?: string;
isLoading?: boolean;
error?: string;
} | null;
appSlug: string;
}) => {
const navigate = useNavigate();
const update = updates[0];
const isCurrentVersionLoading =
upgradeService?.versionLabel === update.versionLabel &&
upgradeService.isLoading;
return (
<div className="tw-mt-4">
<div className="flex justifyContent--spaceBetween alignItems--center u-marginBottom--15">
<p className="u-fontSize--normal u-fontWeight--medium card-title">
Latest Available Update
</p>
<p className="u-fontSize--normal">
{updates && updates.length > 0 && (
<span className="u-fontSize--small u-fontWeight--medium u-textColor--bodyCopy">
{updates.length} available
</span>
)}
</p>
</div>
{updates && updates.length > 0 && (
<div className="tw-flex tw-flex-col tw-gap-2 tw-max-h-[275px] tw-overflow-auto">
<div className="available-update-row">
<div className="tw-h-10 tw-bg-white tw-p-4 tw-flex tw-justify-between tw-items-center tw-rounded">
<div className="flex-column">
<div className="flex alignItems--center">
<p className="u-fontSize--header2 u-fontWeight--bold u-lineHeight--medium card-item-title ">
{update.versionLabel}
</p>
{update.isRequired && (
<span className="status-tag required u-marginLeft--10">
{" "}
Required{" "}
</span>
)}
</div>
{update.upstreamReleasedAt && (
<p className="u-fontSize--small u-fontWeight--medium u-textColor--bodyCopy u-marginTop--5">
{" "}
Released{" "}
<span className="u-fontWeight--bold">
{Utilities.dateFormat(
update.upstreamReleasedAt,
"MM/DD/YY @ hh:mm a z"
)}
</span>
</p>
)}
</div>
<div className="flex alignItems--center">
{update?.releaseNotes && (
<>
<Icon
icon="release-notes"
size={24}
onClick={() => showReleaseNotes(update?.releaseNotes)}
data-tip="View release notes"
className="u-marginRight--5 clickable"
/>
<ReactTooltip
effect="solid"
className="replicated-tooltip"
/>
</>
)}

<ReactTooltip effect="solid" id="disable-deployment-tooltip" />

<button
className={"btn tw-ml-2 primary blue"}
onClick={() => navigate(`/app/${appSlug}/version-history`)}
disabled={!update.isDeployable || isCurrentVersionLoading}
>
<span
key={update.nonDeployableCause}
data-tip-disable={update.isDeployable}
data-tip={update.nonDeployableCause}
data-for="disable-deployment-tooltip"
>
Go to Version history
</span>
</button>
</div>
</div>
{upgradeService?.error &&
upgradeService?.versionLabel === update.versionLabel && (
<div className="tw-my-4">
<span className="u-fontSize--small u-textColor--error u-fontWeight--bold">
{upgradeService.error}
</span>
</div>
)}
</div>
</div>
)}
</div>
);
};

export default AvailableUpdateCard;
77 changes: 51 additions & 26 deletions web/src/features/Dashboard/components/DashboardVersionCard.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,31 +1,29 @@
import classNames from "classnames";
import { useEffect, useReducer } from "react";
import Modal from "react-modal";
import { Link, useNavigate, useParams } from "react-router-dom";
import ReactTooltip from "react-tooltip";
import DashboardGitOpsCard from "./DashboardGitOpsCard";
import MarkdownRenderer from "@src/components/shared/MarkdownRenderer";

import EditConfigIcon from "@components/shared/EditConfigIcon";
import { useSelectedApp } from "@features/App";
import VersionDiff from "@features/VersionDiff/VersionDiff";
import Modal from "react-modal";
import AirgapUploadProgress from "@src/components/AirgapUploadProgress";
import Loader from "@src/components/shared/Loader";
import MountAware from "@src/components/shared/MountAware";
import Icon from "@src/components/Icon";
import ShowDetailsModal from "@src/components/modals/ShowDetailsModal";
import ShowLogsModal from "@src/components/modals/ShowLogsModal";
import Loader from "@src/components/shared/Loader";
import MarkdownRenderer from "@src/components/shared/MarkdownRenderer";
import DeployWarningModal from "@src/components/shared/modals/DeployWarningModal";
import SkipPreflightsModal from "@src/components/shared/modals/SkipPreflightsModal";
import classNames from "classnames";
import MountAware from "@src/components/shared/MountAware";
import { AirgapUploader } from "@src/utilities/airgapUploader";
import { Repeater } from "@src/utilities/repeater";
import {
getPreflightResultState,
getReadableGitOpsProviderName,
secondsAgo,
Utilities,
} from "@src/utilities/utilities";
import { useNextAppVersionWithIntercept } from "../api/useNextAppVersion";
import { useSelectedApp } from "@features/App";
import { Repeater } from "@src/utilities/repeater";

import "@src/scss/components/watches/DashboardCard.scss";
import Icon from "@src/components/Icon";

import {
AvailableUpdate,
Downstream,
Expand All @@ -35,9 +33,11 @@ import {
VersionDownloadStatus,
VersionStatus,
} from "@types";
import { AirgapUploader } from "@src/utilities/airgapUploader";
import EditConfigIcon from "@components/shared/EditConfigIcon";
import AvailableUpdatesComponent from "@components/apps/AvailableUpdatesComponent";
import { useNextAppVersionWithIntercept } from "../api/useNextAppVersion";
import AvailableUpdateCard from "./AvailableUpdateCard";
import DashboardGitOpsCard from "./DashboardGitOpsCard";

import "@src/scss/components/watches/DashboardCard.scss";

type Props = {
adminConsoleMetadata: Metadata | null;
Expand Down Expand Up @@ -1413,9 +1413,9 @@ const DashboardVersionCard = (props: Props) => {
);
};

const fetchAvailableUpdates = async (showSpinner = true) => {
const fetchAvailableUpdates = async () => {
const appSlug = params.slug;
setState({ isFetchingAvailableUpdates: showSpinner });
setState({ isFetchingAvailableUpdates: true });
const res = await fetch(
`${process.env.API_ENDPOINT}/app/${appSlug}/updates`,
{
Expand All @@ -1435,7 +1435,7 @@ const DashboardVersionCard = (props: Props) => {
setState({
isFetchingAvailableUpdates: false,
// only show the most recent available update
availableUpdates: response.updates && [response.updates[0]],
availableUpdates: response.updates,
});
return response;
};
Expand Down Expand Up @@ -1550,6 +1550,35 @@ const DashboardVersionCard = (props: Props) => {
)}
</div>
)}
{props.adminConsoleMetadata?.isEmbeddedCluster && (
<div className="flex alignItems--center">
{!state.isFetchingAvailableUpdates && (
<span
className="flex-auto flex alignItems--center link u-fontSize--small"
onClick={() => fetchAvailableUpdates()}
>
<Icon
icon="check-update"
size={16}
className="clickable u-marginRight--5"
color={""}
style={{}}
disableFill={false}
removeInlineStyle={false}
/>
Check for update
</span>
)}
{state.isFetchingAvailableUpdates && (
<div className="flex alignItems--center">
<Loader className="u-marginRight--5" size="15" />
<span className="u-textColor--bodyCopy u-fontWeight--medium u-fontSize--small u-lineHeight--default">
Checking for updates
</span>
</div>
)}
</div>
)}
</div>
{currentVersion?.deployedAt ? (
<div className="VersionCard-content--wrapper card-item">
Expand All @@ -1567,18 +1596,14 @@ const DashboardVersionCard = (props: Props) => {
state.availableUpdates?.length > 0 && (
<>
{state.isFetchingAvailableUpdates ? (
<div className="TableDiff--Wrapper card-bg u-marginBottom--30">
<div className="flex-column flex1 alignItems--center justifyContent--center">
<Loader size="30" />
</div>
<div className="flex-column flex1 alignItems--center justifyContent--center">
<Loader size="30" />
</div>
) : (
<AvailableUpdatesComponent
<AvailableUpdateCard
updates={state.availableUpdates}
showReleaseNotes={showReleaseNotes}
upgradeService={state.upgradeService}
fetchAvailableUpdates={fetchAvailableUpdates}
dashboardView={true}
appSlug={params.slug}
/>
)}
Expand Down

0 comments on commit ae01388

Please sign in to comment.