Skip to content

Commit

Permalink
fix: update session badges in the project page of Renku 2.0 (#3175)
Browse files Browse the repository at this point in the history 
Fixes #3174.
  • Loading branch information
@leafty
leafty authored Jun 3, 2024
1 parent 5e4c290 commit a45edd5
Show file tree
Hide file tree
Showing 3 changed files with 62 additions and 67 deletions.
31 changes: 18 additions & 13 deletions client/src/features/sessionsV2/SessionList/SessionItemDisplay.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,22 +23,24 @@ import {
LayoutSidebarInsetReverse,
} from "react-bootstrap-icons";
import { Col, Row } from "reactstrap";
import { TimeCaption } from "../../../components/TimeCaption.tsx";
import { NotebookAnnotations } from "../../../notebooks/components/session.types.ts";
import { Project } from "../../projectsV2/api/projectV2.api.ts";
import sessionsApi from "../../session/sessions.api.ts";
import { filterSessionsWithCleanedAnnotations } from "../../session/sessions.utils.ts";
import { SessionView } from "../SessionView/SessionView.tsx";
import StartSessionButton from "../StartSessionButton.tsx";
import ActiveSessionButton from "../components/SessionButton/ActiveSessionButton.tsx";

import { TimeCaption } from "../../../components/TimeCaption";
import { NotebookAnnotations } from "../../../notebooks/components/session.types";
import { Project } from "../../projectsV2/api/projectV2.api";
import sessionsApi from "../../session/sessions.api";
import { filterSessionsWithCleanedAnnotations } from "../../session/sessions.utils";
import { SessionView } from "../SessionView/SessionView";
import { getShowSessionUrlByProject } from "../SessionsV2";
import StartSessionButton from "../StartSessionButton";
import ActiveSessionButton from "../components/SessionButton/ActiveSessionButton";
import {
SessionBadge,
SessionStatusV2Description,
SessionStatusV2Label,
} from "../components/SessionStatus/SessionStatus.tsx";
import { SessionLauncher } from "../sessionsV2.types.ts";
} from "../components/SessionStatus/SessionStatus";
import { SessionLauncher } from "../sessionsV2.types";

import sessionItemStyles from "./SessionItemDisplay.module.scss";
import { getShowSessionUrlByProject } from "../SessionsV2.tsx";

export function SessionNameBox({
children,
Expand Down Expand Up @@ -231,8 +233,11 @@ export function SessionItemDisplay({
<span className={cx("text-truncate")}>{name}</span>
</SessionNameBox>
<SessionStatusBadgeBox>
<SessionBadge className={"border border-dark-subtle bg-light"}>
<DashCircleFill className="text-light-emphasis" size={16} />
<SessionBadge className={cx("border-dark-subtle", "bg-light")}>
<DashCircleFill
className={cx("bi", "me-1", "text-light-emphasis")}
size={16}
/>
<span className="text-dark">Not Running</span>
</SessionBadge>
</SessionStatusBadgeBox>
Expand Down
46 changes: 24 additions & 22 deletions client/src/features/sessionsV2/SessionView/SessionView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,31 +37,30 @@ import {
OffcanvasBody,
Row,
} from "reactstrap";
import { TimeCaption } from "../../../components/TimeCaption.tsx";
import ButtonStyles from "../../../components/buttons/Buttons.module.scss";
import { CommandCopy } from "../../../components/commandCopy/CommandCopy.tsx";
import { toHumanDateTime } from "../../../utils/helpers/DateTimeUtils.ts";
import { Project } from "../../projectsV2/api/projectV2.api.ts";
import { SessionRowResourceRequests } from "../../session/components/SessionsList.tsx";
import { Session, Sessions } from "../../session/sessions.types.ts";
import {
getShowSessionUrlByProject,
SessionV2Actions,
} from "../SessionsV2.tsx";
import StartSessionButton from "../StartSessionButton.tsx";
import UpdateSessionLauncherModal from "../UpdateSessionLauncherModal.tsx";
import ActiveSessionButton from "../components/SessionButton/ActiveSessionButton.tsx";

import { TimeCaption } from "../../../components/TimeCaption";
import { CommandCopy } from "../../../components/commandCopy/CommandCopy";
import { toHumanDateTime } from "../../../utils/helpers/DateTimeUtils";
import { RepositoryItem } from "../../ProjectPageV2/ProjectPageContent/CodeRepositories/CodeRepositoryDisplay";
import { Project } from "../../projectsV2/api/projectV2.api";
import { useGetStoragesV2Query } from "../../projectsV2/api/storagesV2.api";
import { SessionRowResourceRequests } from "../../session/components/SessionsList";
import { Session, Sessions } from "../../session/sessions.types";
import { SessionV2Actions, getShowSessionUrlByProject } from "../SessionsV2";
import StartSessionButton from "../StartSessionButton";
import UpdateSessionLauncherModal from "../UpdateSessionLauncherModal";
import ActiveSessionButton from "../components/SessionButton/ActiveSessionButton";
import {
SessionBadge,
SessionStatusV2Description,
SessionStatusV2Label,
SessionStatusV2Title,
} from "../components/SessionStatus/SessionStatus.tsx";
import sessionsV2Api from "../sessionsV2.api.ts";
import { SessionEnvironment, SessionLauncher } from "../sessionsV2.types.ts";
} from "../components/SessionStatus/SessionStatus";
import sessionsV2Api from "../sessionsV2.api";
import { SessionEnvironment, SessionLauncher } from "../sessionsV2.types";

import buttonStyles from "../../../components/buttons/Buttons.module.scss";
import sessionViewStyles from "./SessionView.module.scss";
import { useGetStoragesV2Query } from "../../projectsV2/api/storagesV2.api.ts";
import { RepositoryItem } from "../../ProjectPageV2/ProjectPageContent/CodeRepositories/CodeRepositoryDisplay.tsx";

function SessionCard({
session,
Expand Down Expand Up @@ -142,8 +141,11 @@ function SessionCardNotRunning({
"py-2"
)}
>
<SessionBadge className={"border border-dark-subtle bg-light"}>
<DashCircleFill className="text-light-emphasis" size={16} />
<SessionBadge className={cx("border-dark-subtle", "bg-light")}>
<DashCircleFill
className={cx("bi", "me-1", "text-light-emphasis")}
size={16}
/>
<span className="text-dark">Not Running</span>
</SessionBadge>
</Col>
Expand Down Expand Up @@ -231,7 +233,7 @@ function EnvironmentCard({
"bg-transparent",
"shadow-none",
"border-0",
ButtonStyles.EditButton
buttonStyles.EditButton
)}
onClick={toggle}
>
Expand Down
52 changes: 20 additions & 32 deletions client/src/features/sessionsV2/components/SessionStatus/SessionStatus.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,18 +26,16 @@ import {
XCircleFill,
} from "react-bootstrap-icons";
import { Badge } from "reactstrap";
import { Loader } from "../../../../components/Loader.tsx";
import { TimeCaption } from "../../../../components/TimeCaption.tsx";

import { Loader } from "../../../../components/Loader";
import { TimeCaption } from "../../../../components/TimeCaption";
import { NotebooksHelper } from "../../../../notebooks";
import { SessionListRowStatusExtraDetails } from "../../../../notebooks/components/SessionListStatus.tsx";
import { NotebookAnnotations } from "../../../../notebooks/components/session.types.ts";
import { ensureDateTime } from "../../../../utils/helpers/DateTimeUtils.ts";
import { MissingHibernationInfo } from "../../../session/components/status/SessionStatusText.tsx";
import {
Session,
SessionStatusState,
} from "../../../session/sessions.types.ts";
import { SessionLauncher } from "../../sessionsV2.types.ts";
import { SessionListRowStatusExtraDetails } from "../../../../notebooks/components/SessionListStatus";
import { NotebookAnnotations } from "../../../../notebooks/components/session.types";
import { ensureDateTime } from "../../../../utils/helpers/DateTimeUtils";
import { MissingHibernationInfo } from "../../../session/components/status/SessionStatusText";
import { Session, SessionStatusState } from "../../../session/sessions.types";
import { SessionLauncher } from "../../sessionsV2.types";

export function SessionBadge({
children,
Expand All @@ -47,17 +45,7 @@ export function SessionBadge({
className: string;
}) {
return (
<Badge
className={cx(
"d-flex",
"align-items-center",
"gap-2",
"fs-small",
"fw-normal",
className
)}
pill={true}
>
<Badge className={cx("border", "fs-small", "fw-normal", className)} pill>
{children}
</Badge>
);
Expand All @@ -81,46 +69,46 @@ export function SessionStatusV2Label({ session }: ActiveSessionV2Props) {

const badge =
state === "running" && defaultImage ? (
<SessionBadge className="border border-warning bg-warning-subtle">
<SessionBadge className={cx("border-warning", "bg-warning-subtle")}>
<ExclamationCircleFill
className={cx("bi", "me-1", "text-warning")}
size={16}
/>
<span className="rk-bg-warning">Running Session</span>
<span className="text-warning">Running Session</span>
</SessionBadge>
) : state === "running" ? (
<SessionBadge className="border border-success bg-success-subtle">
<SessionBadge className={cx("border-success", "bg-success-subtle")}>
<CheckCircleFill
className={cx("bi", "me-1", "text-success")}
size={16}
/>
<span className="text-success-emphasis">Running Session</span>
</SessionBadge>
) : state === "starting" ? (
<SessionBadge className="border border-warning bg-warning-subtle">
<Loader size={16} className={cx("bi", "me-1", "text-warning")} inline />
<SessionBadge className={cx("border-warning", "bg-warning-subtle")}>
<Loader size={16} className={cx("me-1", "text-warning")} inline />
<span className="text-warning">Starting Session</span>
</SessionBadge>
) : state === "stopping" ? (
<SessionBadge className="border border-warning bg-warning-subtle">
<Loader size={16} className={cx("bi", "me-1", "text-warning")} inline />
<SessionBadge className={cx("border-warning", "bg-warning-subtle")}>
<Loader size={16} className={cx("me-1", "text-warning")} inline />
<span className="text-warning">Stopping Session</span>
</SessionBadge>
) : state === "hibernated" ? (
<SessionBadge className={"border border-dark-subtle bg-light"}>
<SessionBadge className={cx("border-dark-subtle", "bg-light")}>
<PauseCircleFill
className={cx("bi", "me-1", "text-light-emphasis")}
size={16}
/>
<span className="text-dark">Paused Session</span>
</SessionBadge>
) : state === "failed" ? (
<SessionBadge className={"border border-danger bg-danger-subtle"}>
<SessionBadge className={cx("border-danger", "bg-danger-subtle")}>
<XCircleFill className={cx("bi", "me-1", "text-danger")} size={16} />
<span className="text-danger">Error in Session</span>
</SessionBadge>
) : (
<SessionBadge className="border border-warning bg-warning-subtle">
<SessionBadge className={cx("border-warning", "bg-warning-subtle")}>
<ExclamationCircleFill
className={cx("bi", "me-1", "text-warning")}
size={16}
Expand Down

0 comments on commit a45edd5

Please sign in to comment.