Skip to content
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

[dashboard] introduce folded inactive ws section #10676

Merged
merged 4 commits into from
Jun 15, 2022
Merged

[dashboard] introduce folded inactive ws section #10676

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
5d372ea
[dashboard] introduce folded inactive ws section
svenefftinge Jun 15, 2022
fd2a535
[dashboard] Treat today's workspaces as active
svenefftinge Jun 15, 2022
2ab49f3
[dashboard] non visible dialogs ignore keyevents
svenefftinge Jun 15, 2022
0476c1e
[dashboard] sort workspaces by activity
svenefftinge Jun 15, 2022
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
2 changes: 1 addition & 1 deletion components/dashboard/src/components/Arrow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ function Arrow(props: { up: boolean; customBorderClasses?: string }) {
className={
"mx-2 " +
(props.customBorderClasses ||
"border-gray-400 dark:border-gray-600 group-hover:border-gray-600 dark:group-hover:border-gray-400")
"border-gray-400 dark:border-gray-500 group-hover:border-gray-600 dark:group-hover:border-gray-400")
}
style={{
marginTop: 2,
Expand Down
3 changes: 3 additions & 0 deletions components/dashboard/src/components/Modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,9 @@ export default function Modal(props: {
.catch(console.error);
};
const handler = (evt: KeyboardEvent) => {
if (!props.visible) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍🏻

return;
}
if (evt.defaultPrevented) {
return;
}
Expand Down
92 changes: 74 additions & 18 deletions components/dashboard/src/workspaces/Workspaces.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,13 +18,17 @@ import { User } from "@gitpod/gitpod-protocol";
import { useLocation } from "react-router";
import { StartWorkspaceModalContext, StartWorkspaceModalKeyBinding } from "./start-workspace-modal-context";
import SelectIDEModal from "../settings/SelectIDEModal";
import Arrow from "../components/Arrow";
import ConfirmationModal from "../components/ConfirmationModal";

export interface WorkspacesProps {}

export interface WorkspacesState {
workspaces: WorkspaceInfo[];
isTemplateModelOpen: boolean;
repos: WhitelistedRepository[];
showInactive: boolean;
deleteModalVisible: boolean;
}

export default function () {
Expand All @@ -35,6 +39,8 @@ export default function () {
const [activeWorkspaces, setActiveWorkspaces] = useState<WorkspaceInfo[]>([]);
const [inactiveWorkspaces, setInactiveWorkspaces] = useState<WorkspaceInfo[]>([]);
const [workspaceModel, setWorkspaceModel] = useState<WorkspaceModel>();
const [showInactive, setShowInactive] = useState<boolean>();
const [deleteModalVisible, setDeleteModalVisible] = useState<boolean>();
const { setIsStartWorkspaceModalVisible } = useContext(StartWorkspaceModalContext);

useEffect(() => {
Expand All @@ -50,6 +56,18 @@ export default function () {
<>
<Header title="Workspaces" subtitle="Manage recent and stopped workspaces." />

<ConfirmationModal
title="Delete Inactive Workspaces"
areYouSureText="Are you sure you want to delete all inactive workspaces?"
buttonText="Delete Inactive Workspaces"
visible={!!deleteModalVisible}
onClose={() => setDeleteModalVisible(false)}
onConfirm={() => {
inactiveWorkspaces.forEach((ws) => workspaceModel?.deleteWorkspace(ws.workspace.id));
setDeleteModalVisible(false);
}}
></ConfirmationModal>

{isOnboardingUser && <SelectIDEModal location={"workspace_list"} />}

{workspaceModel?.initialized &&
Expand Down Expand Up @@ -128,27 +146,65 @@ export default function () {
})}
{activeWorkspaces.length > 0 && <div className="py-6"></div>}
{inactiveWorkspaces.length > 0 && (
<div className="p-3 text-gray-400 bg-gray-50 dark:bg-gray-800 rounded-xl text-sm text-center">
Unpinned workspaces that have been inactive for more than 14 days will be
automatically deleted.{" "}
<a
className="gp-link"
href="https://www.gitpod.io/docs/life-of-workspace/#garbage-collection"
<div>
<div
onClick={() => setShowInactive(!showInactive)}
className="flex cursor-pointer py-6 px-6 flex-row text-gray-400 bg-gray-50 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 rounded-xl mb-2"
>
Learn more
</a>
<div className="pr-2">
<Arrow up={!!showInactive} />
</div>
<div className="flex flex-grow flex-col ">
<div className="font-medium text-gray-500 dark:text-gray-200 truncate">
<span>Inactive Workspaces&nbsp;</span>
<span className="text-gray-400 dark:text-gray-400 bg-gray-200 dark:bg-gray-600 rounded-xl px-2 py-0.5 text-xs">
{inactiveWorkspaces.length}
</span>
</div>
<div className="text-sm flex-auto">
Unpinned workspaces that have been inactive for more than 14 days will
be automatically deleted.{" "}
<a
className="gp-link"
href="https://www.gitpod.io/docs/life-of-workspace/#garbage-collection"
onClick={(evt) => evt.stopPropagation()}
>
Learn more
</a>
</div>
</div>
<div className="self-center">
{showInactive ? (
<button
onClick={(evt) => {
setDeleteModalVisible(true);
evt.stopPropagation();
}}
className="secondary danger"
>
Delete Inactive Workspaces
</button>
) : null}
</div>
</div>
{showInactive ? (
<>
{inactiveWorkspaces.map((e) => {
return (
<WorkspaceEntry
key={e.workspace.id}
desc={e}
model={workspaceModel}
stopWorkspace={(wsId) =>
getGitpodService().server.stopWorkspace(wsId)
}
/>
);
})}
</>
) : null}
</div>
)}
{inactiveWorkspaces.map((e) => {
return (
<WorkspaceEntry
key={e.workspace.id}
desc={e}
model={workspaceModel}
stopWorkspace={(wsId) => getGitpodService().server.stopWorkspace(wsId)}
/>
);
})}
</ItemsList>
</>
) : (
Expand Down
24 changes: 22 additions & 2 deletions components/dashboard/src/workspaces/workspace-model.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import {
WorkspaceInfo,
WorkspaceInstance,
} from "@gitpod/gitpod-protocol";
import { hoursBefore, isDateSmallerOrEqual } from "@gitpod/gitpod-protocol/lib/util/timeutil";
import { getGitpodService } from "../service/service";

export class WorkspaceModel implements Disposable, Partial<GitpodClient> {
Expand Down Expand Up @@ -135,8 +136,23 @@ export class WorkspaceModel implements Disposable, Partial<GitpodClient> {
.indexOf(this.searchTerm!.toLowerCase()) !== -1,
);
}
const now = new Date().toISOString();
function activeDate(info: WorkspaceInfo): string {
if (!info.latestInstance) {
return info.workspace.creationTime;
}
if (info.latestInstance.status.phase === "stopped" || info.latestInstance.status.phase === "unknown") {
return WorkspaceInfo.lastActiveISODate(info);
}
return info.latestInstance.stoppedTime || info.latestInstance.stoppingTime || now;
}
infos = infos.sort((a, b) => {
return WorkspaceInfo.lastActiveISODate(b).localeCompare(WorkspaceInfo.lastActiveISODate(a));
const result = activeDate(b).localeCompare(activeDate(a));
if (result === 0) {
// both active now? order by creationtime
return WorkspaceInfo.lastActiveISODate(b).localeCompare(WorkspaceInfo.lastActiveISODate(a));
}
return result;
});
const activeInfo = infos.filter((ws) => this.isActive(ws));
const inActiveInfo = infos.filter((ws) => !this.isActive(ws));
Expand All @@ -145,8 +161,12 @@ export class WorkspaceModel implements Disposable, Partial<GitpodClient> {
}

protected isActive(info: WorkspaceInfo): boolean {
const lastSessionStart = WorkspaceInfo.lastActiveISODate(info);
const twentyfourHoursAgo = hoursBefore(new Date().toISOString(), 24);
return (
(info.workspace.pinned || (!!info.latestInstance && info.latestInstance.status?.phase !== "stopped")) &&
(info.workspace.pinned ||
(!!info.latestInstance && info.latestInstance.status?.phase !== "stopped") ||
isDateSmallerOrEqual(twentyfourHoursAgo, lastSessionStart)) &&
!info.workspace.softDeleted
);
}
Expand Down
6 changes: 6 additions & 0 deletions components/gitpod-protocol/src/util/timeutil.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,12 @@ export const orderAsc = (d1: string, d2: string): number => liftDate(d1, d2, (d1
export const liftDate1 = <T>(d1: string, f: (d1: Date) => T): T => f(new Date(d1));
export const liftDate = <T>(d1: string, d2: string, f: (d1: Date, d2: Date) => T): T => f(new Date(d1), new Date(d2));

export function hoursBefore(date: string, hours: number): string {
const result = new Date(date);
result.setHours(result.getHours() - hours);
return result.toISOString();
}

export function hoursLater(date: string, hours: number): string {
const result = new Date(date);
result.setHours(result.getHours() + hours);
Expand Down