Skip to content

feat: Add helpful tooltips for the key features #2097

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

Merged
merged 7 commits into from
Jun 7, 2022
Merged

feat: Add helpful tooltips for the key features #2097

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
d453963
feat: Add page header and help tooltips
BrunoQuaresma Jun 6, 2022
c4e15cd
Add header in the logs page
BrunoQuaresma Jun 6, 2022
c725b33
Refactor page header title and subtitle
BrunoQuaresma Jun 6, 2022
9e2b90c
Update page header
BrunoQuaresma Jun 6, 2022
915c3c5
Add tooltip for agent and resource
BrunoQuaresma Jun 6, 2022
05af10a
Add help space from titles
BrunoQuaresma Jun 6, 2022
81f2e16
Move tooltip content to language object
BrunoQuaresma Jun 7, 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
Prev Previous commit
Next Next commit
Add header in the logs page
  • Loading branch information
@BrunoQuaresma
BrunoQuaresma committed Jun 6, 2022
commit c4e15cd04cee500ab3b65fcdcfa6c339404f849d
34 changes: 4 additions & 30 deletions site/src/pages/WorkspaceBuildPage/WorkspaceBuildPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,10 @@
import { makeStyles } from "@material-ui/core/styles"
import Typography from "@material-ui/core/Typography"
import { useMachine } from "@xstate/react"
import { FC } from "react"
import { Helmet } from "react-helmet"
import { useParams } from "react-router-dom"
import { ProvisionerJobLog } from "../../api/typesGenerated"
import { Loader } from "../../components/Loader/Loader"
import { Margins } from "../../components/Margins/Margins"
import { Stack } from "../../components/Stack/Stack"
import { WorkspaceBuildLogs } from "../../components/WorkspaceBuildLogs/WorkspaceBuildLogs"
import { WorkspaceBuildStats } from "../../components/WorkspaceBuildStats/WorkspaceBuildStats"
import { pageTitle } from "../../util/page"
import { workspaceBuildMachine } from "../../xServices/workspaceBuild/workspaceBuildXService"

const sortLogsByCreatedAt = (logs: ProvisionerJobLog[]) => {
return [...logs].sort((a, b) => new Date(a.created_at).getTime() - new Date(b.created_at).getTime())
}
import { WorkspaceBuildPageView } from "./WorkspaceBuildPageView"

const useBuildId = () => {
const { buildId } = useParams()
Expand All @@ -32,29 +21,14 @@ export const WorkspaceBuildPage: FC = () => {
const [buildState] = useMachine(workspaceBuildMachine, { context: { buildId } })
const { logs, build } = buildState.context
const isWaitingForLogs = !buildState.matches("logs.loaded")
const styles = useStyles()

return (
<Margins>
<>
<Helmet>
<title>{build ? pageTitle(`Build #${build.build_number} · ${build.workspace_name}`) : ""}</title>
</Helmet>
<Stack>
<Typography variant="h4" className={styles.title}>
Logs
</Typography>

{build && <WorkspaceBuildStats build={build} />}
{!logs && <Loader />}
{logs && <WorkspaceBuildLogs logs={sortLogsByCreatedAt(logs)} isWaitingForLogs={isWaitingForLogs} />}
</Stack>
</Margins>
<WorkspaceBuildPageView logs={logs} build={build} isWaitingForLogs={isWaitingForLogs} />
</>
)
}

const useStyles = makeStyles((theme) => ({
title: {
paddingTop: theme.spacing(5),
paddingBottom: theme.spacing(2),
},
}))
17 changes: 17 additions & 0 deletions site/src/pages/WorkspaceBuildPage/WorkspaceBuildPageView.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import { ComponentMeta, Story } from "@storybook/react"
import { MockWorkspaceBuild, MockWorkspaceBuildLogs } from "../../testHelpers/entities"
import { WorkspaceBuildPageView, WorkspaceBuildPageViewProps } from "./WorkspaceBuildPageView"

export default {
title: "pages/WorkspaceBuildPageView",
component: WorkspaceBuildPageView,
} as ComponentMeta<typeof WorkspaceBuildPageView>

const Template: Story<WorkspaceBuildPageViewProps> = (args) => <WorkspaceBuildPageView {...args} />

export const Example = Template.bind({})
Example.args = {
build: MockWorkspaceBuild,
logs: MockWorkspaceBuildLogs,
isWaitingForLogs: false,
}
34 changes: 34 additions & 0 deletions site/src/pages/WorkspaceBuildPage/WorkspaceBuildPageView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
import { FC } from "react"
import { ProvisionerJobLog, WorkspaceBuild } from "../../api/typesGenerated"
import { Loader } from "../../components/Loader/Loader"
import { Margins } from "../../components/Margins/Margins"
import { PageHeader, PageHeaderTitle } from "../../components/PageHeader/PageHeader"
import { Stack } from "../../components/Stack/Stack"
import { WorkspaceBuildLogs } from "../../components/WorkspaceBuildLogs/WorkspaceBuildLogs"
import { WorkspaceBuildStats } from "../../components/WorkspaceBuildStats/WorkspaceBuildStats"

const sortLogsByCreatedAt = (logs: ProvisionerJobLog[]) => {
return [...logs].sort((a, b) => new Date(a.created_at).getTime() - new Date(b.created_at).getTime())
}

export interface WorkspaceBuildPageViewProps {
logs: ProvisionerJobLog[] | undefined
build: WorkspaceBuild | undefined
isWaitingForLogs: boolean
}

export const WorkspaceBuildPageView: FC<WorkspaceBuildPageViewProps> = ({ logs, build, isWaitingForLogs }) => {
return (
<Margins>
<PageHeader>
<PageHeaderTitle>Logs</PageHeaderTitle>
</PageHeader>

<Stack>
{build && <WorkspaceBuildStats build={build} />}
{!logs && <Loader />}
{logs && <WorkspaceBuildLogs logs={sortLogsByCreatedAt(logs)} isWaitingForLogs={isWaitingForLogs} />}
</Stack>
</Margins>
)
}