Skip to content

Add a Deleting Placeholder #4128

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Add a Deleting Placeholder #4128

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6db610b
Update view
sdess09 Jan 5, 2024
ba66ce6
Update view
sdess09 Jan 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 42 additions & 0 deletions dashboard/src/components/ClusterDeletingPlaceholder.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
import React, { useEffect, useState, useContext } from "react";
import styled from "styled-components";
import { RouteComponentProps, withRouter } from "react-router";
import { pushFiltered } from "shared/routing";

import loading from "assets/loading.gif";

import { Context } from "shared/Context";
import Heading from "components/form-components/Heading";
import Helper from "components/form-components/Helper";
import Text from "./porter/Text";
import Spacer from "./porter/Spacer";
import DashboardPlaceholder from "./porter/DashboardPlaceholder";
import PorterLink from "components/porter/Link";
import Button from "./porter/Button";

type Props = {};

const ClusterDeletingPlaceholder: React.FC<RouteComponentProps> = (props) => {
const { currentCluster } = useContext(Context);

return (
<DashboardPlaceholder>
<Text size={16}>
<Img src={loading} /> Your resources are being cleaned up
</Text>
<Spacer y={.5} />
<Text color="helper">
You can proceed as soon as your resources are deleted. It may take a few minutes.
</Text>
<Spacer y={1} />

</DashboardPlaceholder>
);
};

export default withRouter(ClusterDeletingPlaceholder);

const Img = styled.img`
height: 15px;
margin-right: 15px;
`;
237 changes: 123 additions & 114 deletions dashboard/src/main/home/add-on-dashboard/AddOnDashboard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ import { Link } from "react-router-dom";
import Fieldset from "components/porter/Fieldset";
import Select from "components/porter/Select";
import ClusterProvisioningPlaceholder from "components/ClusterProvisioningPlaceholder";
import ClusterDeletingPlaceholder from "components/ClusterDeletingPlaceholder";
import DashboardPlaceholder from "components/porter/DashboardPlaceholder";
import { useAuthState } from "main/auth/context";

Expand Down Expand Up @@ -155,124 +156,132 @@ const AddOnDashboard: React.FC<Props> = ({
description="Add-ons and supporting workloads for this project."
disableLineBreak
/>
{currentCluster?.status === "UPDATING_UNAVAILABLE" ? (
<ClusterProvisioningPlaceholder />
) : (

(addOns.length === 0 || (filteredAddOns.length === 0 && searchValue === "")) ? (

isLoading ?
(<Loading offset="-150px" />) : (
<DashboardPlaceholder>
<Text size={16}>
No add-ons have been deployed yet
</Text>
<Spacer y={0.5} />
<Text color={"helper"}>
Deploy from our suite of curated add-ons.
</Text>
<Spacer y={1} />
<Link to="/addons/new">
<Button alt onClick={() => { }} height="35px" >
Deploy add-ons <Spacer inline x={1} /> <i className="material-icons" style={{ fontSize: '18px' }}>east</i>
</Button>
</Link>
</DashboardPlaceholder>
)
) : (
<>
<Container row spaced>
<SearchBar
value={searchValue}
setValue={setSearchValue}
placeholder="Search add-ons . . ."
width="100%"
/>
<Spacer inline x={2} />
<Toggle
items={[
{ label: <ToggleIcon src={grid} />, value: "grid" },
{ label: <ToggleIcon src={list} />, value: "list" },
]}
active={view}
setActive={setView}
/>
<Spacer inline x={2} />
<Link to="/addons/new">
<Button onClick={() => { }} height="30px" width="130px">
<I className="material-icons">add</I> New add-on
</Button>
</Link>
</Container>
<Spacer y={1} />

{filteredAddOns.length === 0 ? (
<Fieldset>
<Container row>
<PlaceholderIcon src={notFound} />
<Text color="helper">{searchValue === "" ? "No add-ons have been deployed yet." : "No matching add-ons were found."}</Text>
</Container>
</Fieldset>
) : (isLoading ? <Loading offset="-150px" /> : view === "grid" ? (
<GridList>
{(filteredAddOns ?? []).map((app: any, i: number) => {
return (
<Block to={getExpandedChartLinkURL(app)} key={i}>
<Container row>
<Icon
src={
hardcodedIcons[app.chart.metadata.name] ||
app.chart.metadata.icon
}
/>
<Text size={14}>{app.name}</Text>
<Spacer inline x={2} />
</Container>
<StatusIcon src={healthy} />
<Container row>
<SmallIcon opacity="0.4" src={time} />
<Text size={13} color="#ffffff44">
{readableDate(app.info.last_deployed)}
</Text>
</Container>
</Block>
);
})}
</GridList>
{
currentCluster?.status === "DELETING" ?
<ClusterDeletingPlaceholder /> :

currentCluster?.status === "UPDATING_UNAVAILABLE" ? (
<ClusterProvisioningPlaceholder />
) : (

(addOns.length === 0 || (filteredAddOns.length === 0 && searchValue === "")) ? (

isLoading ?
(<Loading offset="-150px" />) : (
<DashboardPlaceholder>
<Text size={16}>
No add-ons have been deployed yet
</Text>
<Spacer y={0.5} />
<Text color={"helper"}>
Deploy from our suite of curated add-ons.
</Text>
<Spacer y={1} />
<Link to="/addons/new">
<Button alt onClick={() => { }} height="35px" >
Deploy add-ons <Spacer inline x={1} /> <i className="material-icons" style={{ fontSize: '18px' }}>east</i>
</Button>
</Link>
</DashboardPlaceholder>
)
) : (
<List>
{(filteredAddOns ?? []).map((app: any, i: number) => {
return (
<Row to={getExpandedChartLinkURL(app)} key={i}>
<Container row>
<MidIcon
src={
hardcodedIcons[app.chart.metadata.name] ||
app.chart.metadata.icon
}
/>
<Text size={14}>{app.name}</Text>
<Spacer inline x={1} />
<MidIcon src={healthy} height="16px" />
</Container>
<Spacer height="15px" />
<Container row>
<SmallIcon opacity="0.4" src={time} />
<Text size={13} color="#ffffff44">
{readableDate(app.info.last_deployed)}
</Text>
</Container>
</Row>
);
})}
</List>
)
)}
</>
))}
<>
<Container row spaced>
<SearchBar
value={searchValue}
setValue={setSearchValue}
placeholder="Search add-ons . . ."
width="100%"
/>
<Spacer inline x={2} />
<Toggle
items={[
{ label: <ToggleIcon src={grid} />, value: "grid" },
{ label: <ToggleIcon src={list} />, value: "list" },
]}
active={view}
setActive={setView}
/>
<Spacer inline x={2} />
<Link to="/addons/new">
<Button onClick={() => { }} height="30px" width="130px">
<I className="material-icons">add</I> New add-on
</Button>
</Link>
</Container>
<Spacer y={1} />

{filteredAddOns.length === 0 ? (
<Fieldset>
<Container row>
<PlaceholderIcon src={notFound} />
<Text color="helper">{searchValue === "" ? "No add-ons have been deployed yet." : "No matching add-ons were found."}</Text>
</Container>
</Fieldset>
) : (isLoading ? <Loading offset="-150px" /> : view === "grid" ? (
<GridList>
{(filteredAddOns ?? []).map((app: any, i: number) => {
return (
<Block to={getExpandedChartLinkURL(app)} key={i}>
<Container row>
<Icon
src={
hardcodedIcons[app.chart.metadata.name] ||
app.chart.metadata.icon
}
/>
<Text size={14}>{app.name}</Text>
<Spacer inline x={2} />
</Container>
<StatusIcon src={healthy} />
<Container row>
<SmallIcon opacity="0.4" src={time} />
<Text size={13} color="#ffffff44">
{readableDate(app.info.last_deployed)}
</Text>
</Container>
</Block>
);
})}
</GridList>
) : (
<List>
{(filteredAddOns ?? []).map((app: any, i: number) => {
return (
<Row to={getExpandedChartLinkURL(app)} key={i}>
<Container row>
<MidIcon
src={
hardcodedIcons[app.chart.metadata.name] ||
app.chart.metadata.icon
}
/>
<Text size={14}>{app.name}</Text>
<Spacer inline x={1} />
<MidIcon src={healthy} height="16px" />
</Container>
<Spacer height="15px" />
<Container row>
<SmallIcon opacity="0.4" src={time} />
<Text size={13} color="#ffffff44">
{readableDate(app.info.last_deployed)}
</Text>
</Container>
</Row>
);
})}
</List>
)
)}
</>
))
}


<Spacer y={5} />
</StyledAppDashboard >
);

};

export default AddOnDashboard;
Expand Down
7 changes: 7 additions & 0 deletions dashboard/src/main/home/app-dashboard/AppDashboard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ import Fieldset from "components/porter/Fieldset";
import ClusterProvisioningPlaceholder from "components/ClusterProvisioningPlaceholder";
import Icon from "components/porter/Icon";
import DashboardPlaceholder from "components/porter/DashboardPlaceholder";
import ClusterDeletingPlaceholder from "components/ClusterDeletingPlaceholder";

type Props = {};

Expand Down Expand Up @@ -213,6 +214,12 @@ const AppDashboard: React.FC<Props> = ({ }) => {
description="Web services, workers, and jobs for this project."
disableLineBreak
/>
{
currentCluster?.status === "DELETING"
&& (
<ClusterDeletingPlaceholder />
)
}
{currentCluster?.status === "UPDATING_UNAVAILABLE" ? (
<ClusterProvisioningPlaceholder />
) : (
Expand Down
6 changes: 5 additions & 1 deletion dashboard/src/main/home/app-dashboard/apps/Apps.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ import web from "assets/web.png";

import AppGrid from "./AppGrid";
import { appRevisionWithSourceValidator } from "./types";
import ClusterDeletingPlaceholder from "components/ClusterDeletingPlaceholder";

export type ClientAddonWithEnv = {
addon: ClientAddon;
Expand Down Expand Up @@ -78,7 +79,7 @@ const Apps: React.FC = () => {
{
deployment_target_id:
currentProject.managed_deployment_targets_enabled &&
!currentDeploymentTarget.is_preview
!currentDeploymentTarget.is_preview
? undefined
: currentDeploymentTarget.id,
ignore_preview_apps: !currentDeploymentTarget.is_preview,
Expand Down Expand Up @@ -193,6 +194,9 @@ const Apps: React.FC = () => {
if (currentCluster?.status === "UPDATING_UNAVAILABLE") {
return <ClusterProvisioningPlaceholder />;
}
if (currentCluster?.status === "DELETING") {
return <ClusterDeletingPlaceholder />;
}

if (
status === "loading" ||
Expand Down
7 changes: 7 additions & 0 deletions dashboard/src/main/home/cluster-dashboard/apps/AppDashboard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import ChartList from "../chart/ChartList";
import ClusterProvisioningPlaceholder from "components/ClusterProvisioningPlaceholder";
import SortSelector from "../SortSelector";
import Spacer from "components/porter/Spacer";
import ClusterDeletingPlaceholder from "components/ClusterDeletingPlaceholder";

type Props = RouteComponentProps & WithAuthProps & {
currentView: PorterUrl;
Expand Down Expand Up @@ -55,6 +56,12 @@ const AppDashboard: React.FC<Props> = ({
description="Continuously running web services, workers, and add-ons."
disableLineBreak
/>
{
currentCluster?.status === "DELETING"
&& (
<ClusterDeletingPlaceholder />
)
}
{currentCluster.status === "UPDATING_UNAVAILABLE" ? (
<ClusterProvisioningPlaceholder />
) : (
Expand Down
4 changes: 4 additions & 0 deletions dashboard/src/main/home/cluster-dashboard/env-groups/EnvGroupDashboard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import { getQueryParam, pushQueryParams, pushFiltered } from "shared/routing";
import { withAuth, WithAuthProps } from "shared/auth/AuthorizationHoc";
import ClusterProvisioningPlaceholder from "components/ClusterProvisioningPlaceholder";
import Spacer from "components/porter/Spacer";
import ClusterDeletingPlaceHolder from "components/ClusterDeletingPlaceholder";

type PropsType = RouteComponentProps &
WithAuthProps & {
Expand Down Expand Up @@ -79,6 +80,9 @@ const EnvGroupDashboard = (props: PropsType) => {
};

const renderBody = () => {
if (props.currentCluster.status === "DELETING") {
return <ClusterDeletingPlaceHolder />
}
if (props.currentCluster.status === "UPDATING_UNAVAILABLE") {
return <ClusterProvisioningPlaceholder />
}
Expand Down
Loading