mirror of
https://github.com/ClusterCockpit/cc-backend
synced 2024-12-26 05:19:05 +01:00
Merge pull request #204 from ClusterCockpit/137-improve-layout-for-smaller-screen-sizes
137 improve layout for smaller screen sizes
This commit is contained in:
Jan Eitzinger
GitHub
commit
68f5b0bba4
20
web/frontend/package-lock.json
generated
20
web/frontend/package-lock.json
generated
@ -14,7 +14,7 @@
|
|||||||
"chart.js": "^4.3.3",
|
"chart.js": "^4.3.3",
|
||||||
"graphql": "^16.6.0",
|
"graphql": "^16.6.0",
|
||||||
"svelte-chartjs": "^3.1.2",
|
"svelte-chartjs": "^3.1.2",
|
||||||
"sveltestrap": "^5.10.0",
|
"sveltestrap": "^5.11.1",
|
||||||
"uplot": "^1.6.24",
|
"uplot": "^1.6.24",
|
||||||
"wonka": "^6.3.2"
|
"wonka": "^6.3.2"
|
||||||
},
|
},
|
||||||
@ -138,9 +138,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@rollup/plugin-node-resolve": {
|
"node_modules/@rollup/plugin-node-resolve": {
|
||||||
"version": "15.2.0",
|
"version": "15.2.1",
|
||||||
"resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-15.2.0.tgz",
|
"resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-15.2.1.tgz",
|
||||||
"integrity": "sha512-mKur03xNGT8O9ODO6FtT43ITGqHWZbKPdVJHZb+iV9QYcdlhUUB0wgknvA4KCUmC5oHJF6O2W1EgmyOQyVUI4Q==",
|
"integrity": "sha512-nsbUg588+GDSu8/NS8T4UAshO6xeaOfINNuXeVHcKV02LJtoRaM1SiOacClw4kws1SFiNhdLGxlbMY9ga/zs/w==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@rollup/pluginutils": "^5.0.1",
|
"@rollup/pluginutils": "^5.0.1",
|
||||||
@ -346,9 +346,9 @@
|
|||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
"node_modules/fsevents": {
|
"node_modules/fsevents": {
|
||||||
"version": "2.3.2",
|
"version": "2.3.3",
|
||||||
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
|
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
|
||||||
"integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
|
"integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"hasInstallScript": true,
|
"hasInstallScript": true,
|
||||||
"optional": true,
|
"optional": true,
|
||||||
@ -547,9 +547,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/rollup": {
|
"node_modules/rollup": {
|
||||||
"version": "3.28.0",
|
"version": "3.28.1",
|
||||||
"resolved": "https://registry.npmjs.org/rollup/-/rollup-3.28.0.tgz",
|
"resolved": "https://registry.npmjs.org/rollup/-/rollup-3.28.1.tgz",
|
||||||
"integrity": "sha512-d7zhvo1OUY2SXSM6pfNjgD5+d0Nz87CUp4mt8l/GgVP3oBsPwzNvSzyu1me6BSG9JIgWNTVcafIXBIyM8yQ3yw==",
|
"integrity": "sha512-R9OMQmIHJm9znrU3m3cpE8uhN0fGdXiawME7aZIpQqvpS/85+Vt1Hq1/yVIcYfOmaQiHjvXkQAoJukvLpau6Yw==",
|
||||||
"devOptional": true,
|
"devOptional": true,
|
||||||
"bin": {
|
"bin": {
|
||||||
"rollup": "dist/bin/rollup"
|
"rollup": "dist/bin/rollup"
|
||||||
|
|||||||
@ -21,7 +21,7 @@
|
|||||||
"chart.js": "^4.3.3",
|
"chart.js": "^4.3.3",
|
||||||
"graphql": "^16.6.0",
|
"graphql": "^16.6.0",
|
||||||
"svelte-chartjs": "^3.1.2",
|
"svelte-chartjs": "^3.1.2",
|
||||||
"sveltestrap": "^5.10.0",
|
"sveltestrap": "^5.11.1",
|
||||||
"uplot": "^1.6.24",
|
"uplot": "^1.6.24",
|
||||||
"wonka": "^6.3.2"
|
"wonka": "^6.3.2"
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,110 +1,177 @@
|
|||||||
<script>
|
<script>
|
||||||
import { Icon, Button, InputGroup, Input, Collapse,
|
import {
|
||||||
Navbar, NavbarBrand, Nav, NavItem, NavLink, NavbarToggler,
|
Icon,
|
||||||
Dropdown, DropdownToggle, DropdownMenu, DropdownItem, InputGroupText } from 'sveltestrap'
|
Collapse,
|
||||||
|
Navbar,
|
||||||
|
NavbarBrand,
|
||||||
|
Nav,
|
||||||
|
NavbarToggler,
|
||||||
|
Dropdown,
|
||||||
|
DropdownToggle,
|
||||||
|
DropdownMenu
|
||||||
|
} from "sveltestrap";
|
||||||
|
import NavbarLinks from "./NavbarLinks.svelte";
|
||||||
|
import NavbarTools from "./NavbarTools.svelte";
|
||||||
|
|
||||||
export let username // empty string if auth. is disabled, otherwise the username as string
|
export let username; // empty string if auth. is disabled, otherwise the username as string
|
||||||
export let authlevel // Integer
|
export let authlevel; // Integer
|
||||||
export let clusters // array of names
|
export let clusters; // array of names
|
||||||
export let roles // Role Enum-Like
|
export let roles; // Role Enum-Like
|
||||||
|
|
||||||
let isOpen = false
|
let isOpen = false;
|
||||||
|
let screenSize;
|
||||||
|
|
||||||
const userviews = [
|
const jobsTitle = new Map();
|
||||||
{ title: 'My Jobs', href: `/monitoring/user/${username}`, icon: 'bar-chart-line-fill' },
|
jobsTitle.set(2, "Job Search");
|
||||||
{ title: `Job Search`, href: '/monitoring/jobs/', icon: 'card-list' },
|
jobsTitle.set(3, "Managed Jobs");
|
||||||
{ title: 'Tags', href: '/monitoring/tags/', icon: 'tags' }
|
jobsTitle.set(4, "Jobs");
|
||||||
]
|
jobsTitle.set(5, "Jobs");
|
||||||
|
const usersTitle = new Map();
|
||||||
|
usersTitle.set(3, "Managed Users");
|
||||||
|
usersTitle.set(4, "Users");
|
||||||
|
usersTitle.set(5, "Users");
|
||||||
|
|
||||||
const managerviews = [
|
const views = [
|
||||||
{ title: 'My Jobs', href: `/monitoring/user/${username}`, icon: 'bar-chart-line-fill' },
|
{
|
||||||
{ title: `Managed Jobs`, href: '/monitoring/jobs/', icon: 'card-list' },
|
title: "My Jobs",
|
||||||
{ title: `Managed Users`, href: '/monitoring/users/', icon: 'people-fill' },
|
requiredRole: roles.user,
|
||||||
{ title: 'Tags', href: '/monitoring/tags/', icon: 'tags' }
|
href: `/monitoring/user/${username}`,
|
||||||
]
|
icon: "bar-chart-line-fill",
|
||||||
|
perCluster: false,
|
||||||
const supportviews = [
|
menu: "none",
|
||||||
{ title: 'My Jobs', href: `/monitoring/user/${username}`, icon: 'bar-chart-line-fill' },
|
},
|
||||||
{ title: 'Jobs', href: '/monitoring/jobs/', icon: 'card-list' },
|
{
|
||||||
{ title: 'Users', href: '/monitoring/users/', icon: 'people-fill' },
|
title: jobsTitle.get(authlevel),
|
||||||
{ title: 'Projects', href: '/monitoring/projects/', icon: 'folder' },
|
requiredRole: roles.user,
|
||||||
{ title: 'Tags', href: '/monitoring/tags/', icon: 'tags' }
|
href: `/monitoring/jobs/`,
|
||||||
]
|
icon: "card-list",
|
||||||
|
perCluster: false,
|
||||||
const adminviews = [
|
menu: "none",
|
||||||
{ title: 'My Jobs', href: `/monitoring/user/${username}`, icon: 'bar-chart-line-fill' },
|
},
|
||||||
{ title: 'Jobs', href: '/monitoring/jobs/', icon: 'card-list' },
|
{
|
||||||
{ title: 'Users', href: '/monitoring/users/', icon: 'people-fill' },
|
title: usersTitle.get(authlevel),
|
||||||
{ title: 'Projects', href: '/monitoring/projects/', icon: 'folder' },
|
requiredRole: roles.manager,
|
||||||
{ title: 'Tags', href: '/monitoring/tags/', icon: 'tags' }
|
href: "/monitoring/users/",
|
||||||
]
|
icon: "people-fill",
|
||||||
|
perCluster: false,
|
||||||
const viewsPerCluster = [
|
menu: "Groups",
|
||||||
{ title: 'Analysis', requiredRole: roles.support, href: '/monitoring/analysis/', icon: 'graph-up' },
|
},
|
||||||
{ title: 'Systems', requiredRole: roles.admin, href: '/monitoring/systems/', icon: 'cpu' },
|
{
|
||||||
{ title: 'Status', requiredRole: roles.admin, href: '/monitoring/status/', icon: 'cpu' },
|
title: "Projects",
|
||||||
]
|
requiredRole: roles.support,
|
||||||
|
href: "/monitoring/projects/",
|
||||||
|
icon: "folder",
|
||||||
|
perCluster: false,
|
||||||
|
menu: "Groups",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Tags",
|
||||||
|
requiredRole: roles.user,
|
||||||
|
href: "/monitoring/tags/",
|
||||||
|
icon: "tags",
|
||||||
|
perCluster: false,
|
||||||
|
menu: "Groups",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Analysis",
|
||||||
|
requiredRole: roles.support,
|
||||||
|
href: "/monitoring/analysis/",
|
||||||
|
icon: "graph-up",
|
||||||
|
perCluster: true,
|
||||||
|
menu: "Stats",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Nodes",
|
||||||
|
requiredRole: roles.admin,
|
||||||
|
href: "/monitoring/systems/",
|
||||||
|
icon: "cpu",
|
||||||
|
perCluster: true,
|
||||||
|
menu: "Groups",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Status",
|
||||||
|
requiredRole: roles.admin,
|
||||||
|
href: "/monitoring/status/",
|
||||||
|
icon: "cpu",
|
||||||
|
perCluster: true,
|
||||||
|
menu: "Stats",
|
||||||
|
},
|
||||||
|
];
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Navbar color="light" light expand="lg" fixed="top">
|
<svelte:window bind:innerWidth={screenSize} />
|
||||||
|
<Navbar color="light" light expand="md" fixed="top">
|
||||||
<NavbarBrand href="/">
|
<NavbarBrand href="/">
|
||||||
<img alt="ClusterCockpit Logo" src="/img/logo.png" height="25rem">
|
<img alt="ClusterCockpit Logo" src="/img/logo.png" height="25rem" />
|
||||||
</NavbarBrand>
|
</NavbarBrand>
|
||||||
<NavbarToggler on:click={() => (isOpen = !isOpen)} />
|
<NavbarToggler on:click={() => (isOpen = !isOpen)} />
|
||||||
<Collapse {isOpen} navbar expand="lg" on:update={({ detail }) => (isOpen = detail.isOpen)}>
|
<Collapse
|
||||||
<Nav pills>
|
{isOpen}
|
||||||
{#if authlevel == roles.admin}
|
navbar
|
||||||
{#each adminviews as item}
|
expand="md"
|
||||||
<NavLink href={item.href} active={window.location.pathname == item.href}><Icon name={item.icon}/> {item.title}</NavLink>
|
on:update={({ detail }) => (isOpen = detail.isOpen)}
|
||||||
{/each}
|
>
|
||||||
{:else if authlevel == roles.support}
|
<Nav class="ms-auto" navbar>
|
||||||
{#each supportviews as item}
|
{#if screenSize > 1500 || screenSize < 768}
|
||||||
<NavLink href={item.href} active={window.location.pathname == item.href}><Icon name={item.icon}/> {item.title}</NavLink>
|
<NavbarLinks
|
||||||
{/each}
|
{clusters}
|
||||||
{:else if authlevel == roles.manager}
|
links={views.filter(
|
||||||
{#each managerviews as item}
|
(item) => item.requiredRole <= authlevel
|
||||||
<NavLink href={item.href} active={window.location.pathname == item.href}><Icon name={item.icon}/> {item.title}</NavLink>
|
)}
|
||||||
{/each}
|
/>
|
||||||
{:else} <!-- Compatibility: Handle "user role" or "no role" as identical-->
|
{:else if screenSize > 1300}
|
||||||
{#each userviews as item}
|
<NavbarLinks
|
||||||
<NavLink href={item.href} active={window.location.pathname == item.href}><Icon name={item.icon}/> {item.title}</NavLink>
|
{clusters}
|
||||||
{/each}
|
links={views.filter(
|
||||||
{/if}
|
(item) =>
|
||||||
{#each viewsPerCluster.filter(item => item.requiredRole <= authlevel) as item}
|
item.requiredRole <= authlevel &&
|
||||||
<NavItem>
|
item.menu != "Stats"
|
||||||
<Dropdown nav inNavbar>
|
)}
|
||||||
|
/>
|
||||||
|
<Dropdown nav>
|
||||||
|
<DropdownToggle nav caret>
|
||||||
|
<Icon name="graph-up" />
|
||||||
|
Stats
|
||||||
|
</DropdownToggle>
|
||||||
|
<DropdownMenu class="dropdown-menu-lg-end">
|
||||||
|
<NavbarLinks
|
||||||
|
{clusters}
|
||||||
|
links={views.filter(
|
||||||
|
(item) =>
|
||||||
|
item.requiredRole <= authlevel &&
|
||||||
|
item.menu == "Stats"
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</DropdownMenu>
|
||||||
|
</Dropdown>
|
||||||
|
{:else}
|
||||||
|
<NavbarLinks
|
||||||
|
{clusters}
|
||||||
|
links={views.filter(
|
||||||
|
(item) =>
|
||||||
|
item.requiredRole <= authlevel &&
|
||||||
|
item.menu == "none"
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
{#each Array("Groups", "Stats") as menu}
|
||||||
|
<Dropdown nav>
|
||||||
<DropdownToggle nav caret>
|
<DropdownToggle nav caret>
|
||||||
<Icon name={item.icon}/> {item.title}
|
{menu}
|
||||||
</DropdownToggle>
|
</DropdownToggle>
|
||||||
<DropdownMenu>
|
<DropdownMenu class="dropdown-menu-lg-end">
|
||||||
{#each clusters as cluster}
|
<NavbarLinks
|
||||||
<DropdownItem href={item.href + cluster.name} active={window.location.pathname == item.href + cluster.name}>
|
{clusters}
|
||||||
{cluster.name}
|
links={views.filter(
|
||||||
</DropdownItem>
|
(item) =>
|
||||||
{/each}
|
item.requiredRole <= authlevel &&
|
||||||
|
item.menu == menu
|
||||||
|
)}
|
||||||
|
/>
|
||||||
</DropdownMenu>
|
</DropdownMenu>
|
||||||
</Dropdown>
|
</Dropdown>
|
||||||
</NavItem>
|
{/each}
|
||||||
{/each}
|
{/if}
|
||||||
|
<NavbarTools username={username} authlevel={authlevel} roles={roles} screenSize={screenSize}/>
|
||||||
</Nav>
|
</Nav>
|
||||||
</Collapse>
|
</Collapse>
|
||||||
<div class="d-flex">
|
|
||||||
<form method="GET" action="/search">
|
|
||||||
<InputGroup>
|
|
||||||
<Input type="text" placeholder="Search 'type:<query>' ..." name="searchId"/>
|
|
||||||
<Button outline type="submit"><Icon name="search"/></Button>
|
|
||||||
<InputGroupText style="cursor:help;" title={(authlevel >= roles.support) ? "Example: 'projectId:a100cd', Types are: jobId | jobName | projectId | arrayJobId | username | name" : "Example: 'jobName:myjob', Types are jobId | jobName | projectId | arrayJobId "}><Icon name="info-circle"/></InputGroupText>
|
|
||||||
</InputGroup>
|
|
||||||
</form>
|
|
||||||
{#if username}
|
|
||||||
<form method="POST" action="/logout">
|
|
||||||
<Button outline color="success" type="submit" style="margin-left: 10px;">
|
|
||||||
<Icon name="box-arrow-right"/> Logout {username}
|
|
||||||
</Button>
|
|
||||||
</form>
|
|
||||||
{/if}
|
|
||||||
<Button outline on:click={() => window.location.href = '/config'} style="margin-left: 10px;">
|
|
||||||
<Icon name="gear"/>
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</Navbar>
|
</Navbar>
|
||||||
|
|||||||
39
web/frontend/src/NavbarLinks.svelte
Normal file
39
web/frontend/src/NavbarLinks.svelte
Normal file
@ -0,0 +1,39 @@
|
|||||||
|
<script>
|
||||||
|
import {
|
||||||
|
Icon,
|
||||||
|
NavLink,
|
||||||
|
Dropdown,
|
||||||
|
DropdownToggle,
|
||||||
|
DropdownMenu,
|
||||||
|
DropdownItem,
|
||||||
|
} from "sveltestrap";
|
||||||
|
|
||||||
|
export let clusters; // array of names
|
||||||
|
export let links; // array of nav links
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#each links as item}
|
||||||
|
{#if !item.perCluster}
|
||||||
|
<NavLink href={item.href} active={window.location.pathname == item.href}
|
||||||
|
><Icon name={item.icon} /> {item.title}</NavLink
|
||||||
|
>
|
||||||
|
{:else}
|
||||||
|
<Dropdown nav inNavbar>
|
||||||
|
<DropdownToggle nav caret>
|
||||||
|
<Icon name={item.icon} />
|
||||||
|
{item.title}
|
||||||
|
</DropdownToggle>
|
||||||
|
<DropdownMenu class="dropdown-menu-lg-end">
|
||||||
|
{#each clusters as cluster}
|
||||||
|
<DropdownItem
|
||||||
|
href={item.href + cluster.name}
|
||||||
|
active={window.location.pathname ==
|
||||||
|
item.href + cluster.name}
|
||||||
|
>
|
||||||
|
{cluster.name}
|
||||||
|
</DropdownItem>
|
||||||
|
{/each}
|
||||||
|
</DropdownMenu>
|
||||||
|
</Dropdown>
|
||||||
|
{/if}
|
||||||
|
{/each}
|
||||||
124
web/frontend/src/NavbarTools.svelte
Normal file
124
web/frontend/src/NavbarTools.svelte
Normal file
@ -0,0 +1,124 @@
|
|||||||
|
<script>
|
||||||
|
import {
|
||||||
|
Icon,
|
||||||
|
NavItem,
|
||||||
|
InputGroup,
|
||||||
|
Input,
|
||||||
|
Button,
|
||||||
|
InputGroupText,
|
||||||
|
Container,
|
||||||
|
Row,
|
||||||
|
Col
|
||||||
|
} from "sveltestrap";
|
||||||
|
|
||||||
|
export let username; // empty string if auth. is disabled, otherwise the username as string
|
||||||
|
export let authlevel; // Integer
|
||||||
|
export let roles; // Role Enum-Like
|
||||||
|
export let screenSize // screensize
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#if screenSize >= 768}
|
||||||
|
<NavItem>
|
||||||
|
<form method="GET" action="/search">
|
||||||
|
<InputGroup>
|
||||||
|
<Input
|
||||||
|
type="text"
|
||||||
|
placeholder="Search 'type:<query>' ..."
|
||||||
|
name="searchId"
|
||||||
|
style="margin-left: 10px;"
|
||||||
|
/> <!-- bootstrap classes w/o effect -->
|
||||||
|
<Button outline type="submit"><Icon name="search" /></Button
|
||||||
|
>
|
||||||
|
<InputGroupText
|
||||||
|
style="cursor:help;"
|
||||||
|
title={authlevel >= roles.support
|
||||||
|
? "Example: 'projectId:a100cd', Types are: jobId | jobName | projectId | arrayJobId | username | name"
|
||||||
|
: "Example: 'jobName:myjob', Types are jobId | jobName | projectId | arrayJobId "}
|
||||||
|
><Icon name="info-circle" /></InputGroupText
|
||||||
|
>
|
||||||
|
</InputGroup>
|
||||||
|
</form>
|
||||||
|
</NavItem>
|
||||||
|
{#if username}
|
||||||
|
<NavItem>
|
||||||
|
<form method="POST" action="/logout">
|
||||||
|
<Button
|
||||||
|
outline
|
||||||
|
color="success"
|
||||||
|
type="submit"
|
||||||
|
style="margin-left: 10px;"
|
||||||
|
>
|
||||||
|
{#if screenSize > 1630}
|
||||||
|
<Icon name="box-arrow-right" /> Logout {username}
|
||||||
|
{:else}
|
||||||
|
<Icon name="box-arrow-right" />
|
||||||
|
{/if}
|
||||||
|
</Button>
|
||||||
|
</form>
|
||||||
|
</NavItem>
|
||||||
|
{/if}
|
||||||
|
<NavItem>
|
||||||
|
<Button
|
||||||
|
outline
|
||||||
|
on:click={() => (window.location.href = "/config")}
|
||||||
|
style="margin-left: 10px;"
|
||||||
|
>
|
||||||
|
<Icon name="gear" />
|
||||||
|
</Button>
|
||||||
|
</NavItem>
|
||||||
|
{:else}
|
||||||
|
<NavItem>
|
||||||
|
<Container>
|
||||||
|
<Row cols={2}>
|
||||||
|
<Col xs="6">
|
||||||
|
<form method="POST" action="/logout">
|
||||||
|
<Button
|
||||||
|
outline
|
||||||
|
color="success"
|
||||||
|
type="submit"
|
||||||
|
size="sm"
|
||||||
|
class="my-2 w-100"
|
||||||
|
>
|
||||||
|
<Icon name="box-arrow-right" /> Logout {username}
|
||||||
|
</Button>
|
||||||
|
</form>
|
||||||
|
</Col>
|
||||||
|
<Col xs="6">
|
||||||
|
<Button
|
||||||
|
outline
|
||||||
|
on:click={() => (window.location.href = "/config")}
|
||||||
|
size="sm"
|
||||||
|
class="my-2 w-100"
|
||||||
|
>
|
||||||
|
{#if authlevel >= roles.admin}
|
||||||
|
<Icon name="gear" /> Admin Settings
|
||||||
|
{:else}
|
||||||
|
<Icon name="gear" /> Plotting Options
|
||||||
|
{/if}
|
||||||
|
</Button>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</Container>
|
||||||
|
</NavItem>
|
||||||
|
<NavItem style="margin-left: 10px; margin-right:10px;">
|
||||||
|
<form method="GET" action="/search">
|
||||||
|
<InputGroup>
|
||||||
|
<Input
|
||||||
|
type="text"
|
||||||
|
placeholder="Search 'type:<query>' ..."
|
||||||
|
name="searchId"
|
||||||
|
/>
|
||||||
|
<Button outline type="submit"><Icon name="search" /></Button
|
||||||
|
>
|
||||||
|
<InputGroupText
|
||||||
|
style="cursor:help;"
|
||||||
|
title={authlevel >= roles.support
|
||||||
|
? "Example: 'projectId:a100cd', Types are: jobId | jobName | projectId | arrayJobId | username | name"
|
||||||
|
: "Example: 'jobName:myjob', Types are jobId | jobName | projectId | arrayJobId "}
|
||||||
|
><Icon name="info-circle" /></InputGroupText
|
||||||
|
>
|
||||||
|
</InputGroup>
|
||||||
|
</form>
|
||||||
|
</NavItem>
|
||||||
|
{/if}
|
||||||
@ -1,70 +1,152 @@
|
|||||||
<script>
|
<script>
|
||||||
import { getContext } from 'svelte'
|
import { getContext } from "svelte";
|
||||||
import Refresher from './joblist/Refresher.svelte'
|
import Refresher from "./joblist/Refresher.svelte";
|
||||||
import Roofline, { transformPerNodeData } from './plots/Roofline.svelte'
|
import Roofline, { transformPerNodeData } from "./plots/Roofline.svelte";
|
||||||
import Pie, { colors } from './plots/Pie.svelte'
|
import Pie, { colors } from "./plots/Pie.svelte";
|
||||||
import Histogram from './plots/Histogram.svelte'
|
import Histogram from "./plots/Histogram.svelte";
|
||||||
import { Row, Col, Spinner, Card, CardHeader, CardTitle, CardBody, Table, Progress, Icon } from 'sveltestrap'
|
import {
|
||||||
import { init, convert2uplot } from './utils.js'
|
Row,
|
||||||
import { scaleNumbers } from './units.js'
|
Col,
|
||||||
import { queryStore, gql, getContextClient, mutationStore } from '@urql/svelte'
|
Spinner,
|
||||||
|
Card,
|
||||||
|
CardHeader,
|
||||||
|
CardTitle,
|
||||||
|
CardBody,
|
||||||
|
Table,
|
||||||
|
Progress,
|
||||||
|
Icon,
|
||||||
|
} from "sveltestrap";
|
||||||
|
import { init, convert2uplot } from "./utils.js";
|
||||||
|
import { scaleNumbers } from "./units.js";
|
||||||
|
import {
|
||||||
|
queryStore,
|
||||||
|
gql,
|
||||||
|
getContextClient,
|
||||||
|
mutationStore,
|
||||||
|
} from "@urql/svelte";
|
||||||
|
|
||||||
const { query: initq } = init()
|
const { query: initq } = init();
|
||||||
const ccconfig = getContext("cc-config")
|
const ccconfig = getContext("cc-config");
|
||||||
|
|
||||||
export let cluster
|
export let cluster;
|
||||||
|
|
||||||
let plotWidths = [], colWidth1 = 0, colWidth2
|
let plotWidths = [],
|
||||||
let from = new Date(Date.now() - 5 * 60 * 1000), to = new Date(Date.now())
|
colWidth1 = 0,
|
||||||
|
colWidth2;
|
||||||
|
let from = new Date(Date.now() - 5 * 60 * 1000),
|
||||||
|
to = new Date(Date.now());
|
||||||
const topOptions = [
|
const topOptions = [
|
||||||
{key: 'totalJobs', label: 'Jobs'},
|
{ key: "totalJobs", label: "Jobs" },
|
||||||
{key: 'totalNodes', label: 'Nodes'},
|
{ key: "totalNodes", label: "Nodes" },
|
||||||
{key: 'totalCores', label: 'Cores'},
|
{ key: "totalCores", label: "Cores" },
|
||||||
{key: 'totalAccs', label: 'Accelerators'},
|
{ key: "totalAccs", label: "Accelerators" },
|
||||||
]
|
];
|
||||||
|
|
||||||
let topProjectSelection = topOptions.find((option) => option.key == ccconfig[`status_view_selectedTopProjectCategory:${cluster}`]) || topOptions.find((option) => option.key == ccconfig.status_view_selectedTopProjectCategory)
|
let topProjectSelection =
|
||||||
let topUserSelection = topOptions.find((option) => option.key == ccconfig[`status_view_selectedTopUserCategory:${cluster}`]) || topOptions.find((option) => option.key == ccconfig.status_view_selectedTopUserCategory)
|
topOptions.find(
|
||||||
|
(option) =>
|
||||||
|
option.key ==
|
||||||
|
ccconfig[`status_view_selectedTopProjectCategory:${cluster}`]
|
||||||
|
) ||
|
||||||
|
topOptions.find(
|
||||||
|
(option) =>
|
||||||
|
option.key == ccconfig.status_view_selectedTopProjectCategory
|
||||||
|
);
|
||||||
|
let topUserSelection =
|
||||||
|
topOptions.find(
|
||||||
|
(option) =>
|
||||||
|
option.key ==
|
||||||
|
ccconfig[`status_view_selectedTopUserCategory:${cluster}`]
|
||||||
|
) ||
|
||||||
|
topOptions.find(
|
||||||
|
(option) =>
|
||||||
|
option.key == ccconfig.status_view_selectedTopUserCategory
|
||||||
|
);
|
||||||
|
|
||||||
const client = getContextClient();
|
const client = getContextClient();
|
||||||
$: mainQuery = queryStore({
|
$: mainQuery = queryStore({
|
||||||
client: client,
|
client: client,
|
||||||
query: gql`query($cluster: String!, $filter: [JobFilter!]!, $metrics: [String!], $from: Time!, $to: Time!) {
|
query: gql`
|
||||||
nodeMetrics(cluster: $cluster, metrics: $metrics, from: $from, to: $to) {
|
query (
|
||||||
host
|
$cluster: String!
|
||||||
subCluster
|
$filter: [JobFilter!]!
|
||||||
metrics {
|
$metrics: [String!]
|
||||||
name
|
$from: Time!
|
||||||
scope
|
$to: Time!
|
||||||
metric {
|
) {
|
||||||
timestep
|
nodeMetrics(
|
||||||
unit { base, prefix }
|
cluster: $cluster
|
||||||
series { data }
|
metrics: $metrics
|
||||||
|
from: $from
|
||||||
|
to: $to
|
||||||
|
) {
|
||||||
|
host
|
||||||
|
subCluster
|
||||||
|
metrics {
|
||||||
|
name
|
||||||
|
scope
|
||||||
|
metric {
|
||||||
|
timestep
|
||||||
|
unit {
|
||||||
|
base
|
||||||
|
prefix
|
||||||
|
}
|
||||||
|
series {
|
||||||
|
data
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
stats: jobsStatistics(filter: $filter) {
|
||||||
|
histDuration {
|
||||||
|
count
|
||||||
|
value
|
||||||
|
}
|
||||||
|
histNumNodes {
|
||||||
|
count
|
||||||
|
value
|
||||||
|
}
|
||||||
|
histNumCores {
|
||||||
|
count
|
||||||
|
value
|
||||||
|
}
|
||||||
|
histNumAccs {
|
||||||
|
count
|
||||||
|
value
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
allocatedNodes(cluster: $cluster) {
|
||||||
|
name
|
||||||
|
count
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
`,
|
||||||
|
variables: {
|
||||||
stats: jobsStatistics(filter: $filter) {
|
cluster: cluster,
|
||||||
histDuration { count, value }
|
metrics: ["flops_any", "mem_bw"],
|
||||||
histNumNodes { count, value }
|
from: from.toISOString(),
|
||||||
histNumCores { count, value }
|
to: to.toISOString(),
|
||||||
histNumAccs { count, value }
|
filter: [{ state: ["running"] }, { cluster: { eq: cluster } }],
|
||||||
}
|
},
|
||||||
|
});
|
||||||
allocatedNodes(cluster: $cluster) { name, count }
|
|
||||||
}`,
|
|
||||||
variables: {
|
|
||||||
cluster: cluster, metrics: ['flops_any', 'mem_bw'], from: from.toISOString(), to: to.toISOString(),
|
|
||||||
filter: [{ state: ['running'] }, { cluster: { eq: cluster } }]
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
const paging = { itemsPerPage: 10, page: 1 }; // Top 10
|
const paging = { itemsPerPage: 10, page: 1 }; // Top 10
|
||||||
$: topUserQuery = queryStore({
|
$: topUserQuery = queryStore({
|
||||||
client: client,
|
client: client,
|
||||||
query: gql`
|
query: gql`
|
||||||
query($filter: [JobFilter!]!, $paging: PageRequest!, $sortBy: SortByAggregate!) {
|
query (
|
||||||
topUser: jobsStatistics(filter: $filter, page: $paging, sortBy: $sortBy, groupBy: USER) {
|
$filter: [JobFilter!]!
|
||||||
|
$paging: PageRequest!
|
||||||
|
$sortBy: SortByAggregate!
|
||||||
|
) {
|
||||||
|
topUser: jobsStatistics(
|
||||||
|
filter: $filter
|
||||||
|
page: $paging
|
||||||
|
sortBy: $sortBy
|
||||||
|
groupBy: USER
|
||||||
|
) {
|
||||||
id
|
id
|
||||||
totalJobs
|
totalJobs
|
||||||
totalNodes
|
totalNodes
|
||||||
@ -72,15 +154,28 @@
|
|||||||
totalAccs
|
totalAccs
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
`,
|
`,
|
||||||
variables: { filter: [{ state: ['running'] }, { cluster: { eq: cluster } }], paging, sortBy: topUserSelection.key.toUpperCase() }
|
variables: {
|
||||||
})
|
filter: [{ state: ["running"] }, { cluster: { eq: cluster } }],
|
||||||
|
paging,
|
||||||
|
sortBy: topUserSelection.key.toUpperCase(),
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
$: topProjectQuery = queryStore({
|
$: topProjectQuery = queryStore({
|
||||||
client: client,
|
client: client,
|
||||||
query: gql`
|
query: gql`
|
||||||
query($filter: [JobFilter!]!, $paging: PageRequest!, $sortBy: SortByAggregate!) {
|
query (
|
||||||
topProjects: jobsStatistics(filter: $filter, page: $paging, sortBy: $sortBy, groupBy: PROJECT) {
|
$filter: [JobFilter!]!
|
||||||
|
$paging: PageRequest!
|
||||||
|
$sortBy: SortByAggregate!
|
||||||
|
) {
|
||||||
|
topProjects: jobsStatistics(
|
||||||
|
filter: $filter
|
||||||
|
page: $paging
|
||||||
|
sortBy: $sortBy
|
||||||
|
groupBy: PROJECT
|
||||||
|
) {
|
||||||
id
|
id
|
||||||
totalJobs
|
totalJobs
|
||||||
totalNodes
|
totalNodes
|
||||||
@ -88,25 +183,70 @@
|
|||||||
totalAccs
|
totalAccs
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
`,
|
`,
|
||||||
variables: { filter: [{ state: ['running'] }, { cluster: { eq: cluster } }], paging, sortBy: topProjectSelection.key.toUpperCase() }
|
variables: {
|
||||||
})
|
filter: [{ state: ["running"] }, { cluster: { eq: cluster } }],
|
||||||
|
paging,
|
||||||
|
sortBy: topProjectSelection.key.toUpperCase(),
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
const sumUp = (data, subcluster, metric) => data.reduce((sum, node) => node.subCluster == subcluster
|
const sumUp = (data, subcluster, metric) =>
|
||||||
? sum + (node.metrics.find(m => m.name == metric)?.metric.series.reduce((sum, series) => sum + series.data[series.data.length - 1], 0) || 0)
|
data.reduce(
|
||||||
: sum, 0)
|
(sum, node) =>
|
||||||
|
node.subCluster == subcluster
|
||||||
|
? sum +
|
||||||
|
(node.metrics
|
||||||
|
.find((m) => m.name == metric)
|
||||||
|
?.metric.series.reduce(
|
||||||
|
(sum, series) =>
|
||||||
|
sum + series.data[series.data.length - 1],
|
||||||
|
0
|
||||||
|
) || 0)
|
||||||
|
: sum,
|
||||||
|
0
|
||||||
|
);
|
||||||
|
|
||||||
let allocatedNodes = {}, flopRate = {}, flopRateUnitPrefix = {}, flopRateUnitBase = {}, memBwRate = {}, memBwRateUnitPrefix = {}, memBwRateUnitBase = {}
|
let allocatedNodes = {},
|
||||||
|
flopRate = {},
|
||||||
|
flopRateUnitPrefix = {},
|
||||||
|
flopRateUnitBase = {},
|
||||||
|
memBwRate = {},
|
||||||
|
memBwRateUnitPrefix = {},
|
||||||
|
memBwRateUnitBase = {};
|
||||||
$: if ($initq.data && $mainQuery.data) {
|
$: if ($initq.data && $mainQuery.data) {
|
||||||
let subClusters = $initq.data.clusters.find(c => c.name == cluster).subClusters
|
let subClusters = $initq.data.clusters.find(
|
||||||
|
(c) => c.name == cluster
|
||||||
|
).subClusters;
|
||||||
for (let subCluster of subClusters) {
|
for (let subCluster of subClusters) {
|
||||||
allocatedNodes[subCluster.name] = $mainQuery.data.allocatedNodes.find(({ name }) => name == subCluster.name)?.count || 0
|
allocatedNodes[subCluster.name] =
|
||||||
flopRate[subCluster.name] = Math.floor(sumUp($mainQuery.data.nodeMetrics, subCluster.name, 'flops_any') * 100) / 100
|
$mainQuery.data.allocatedNodes.find(
|
||||||
flopRateUnitPrefix[subCluster.name] = subCluster.flopRateSimd.unit.prefix
|
({ name }) => name == subCluster.name
|
||||||
flopRateUnitBase[subCluster.name] = subCluster.flopRateSimd.unit.base
|
)?.count || 0;
|
||||||
memBwRate[subCluster.name] = Math.floor(sumUp($mainQuery.data.nodeMetrics, subCluster.name, 'mem_bw') * 100) / 100
|
flopRate[subCluster.name] =
|
||||||
memBwRateUnitPrefix[subCluster.name] = subCluster.memoryBandwidth.unit.prefix
|
Math.floor(
|
||||||
memBwRateUnitBase[subCluster.name] = subCluster.memoryBandwidth.unit.base
|
sumUp(
|
||||||
|
$mainQuery.data.nodeMetrics,
|
||||||
|
subCluster.name,
|
||||||
|
"flops_any"
|
||||||
|
) * 100
|
||||||
|
) / 100;
|
||||||
|
flopRateUnitPrefix[subCluster.name] =
|
||||||
|
subCluster.flopRateSimd.unit.prefix;
|
||||||
|
flopRateUnitBase[subCluster.name] =
|
||||||
|
subCluster.flopRateSimd.unit.base;
|
||||||
|
memBwRate[subCluster.name] =
|
||||||
|
Math.floor(
|
||||||
|
sumUp(
|
||||||
|
$mainQuery.data.nodeMetrics,
|
||||||
|
subCluster.name,
|
||||||
|
"mem_bw"
|
||||||
|
) * 100
|
||||||
|
) / 100;
|
||||||
|
memBwRateUnitPrefix[subCluster.name] =
|
||||||
|
subCluster.memoryBandwidth.unit.prefix;
|
||||||
|
memBwRateUnitBase[subCluster.name] =
|
||||||
|
subCluster.memoryBandwidth.unit.base;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -118,54 +258,62 @@
|
|||||||
updateConfiguration(name: $name, value: $value)
|
updateConfiguration(name: $name, value: $value)
|
||||||
}
|
}
|
||||||
`,
|
`,
|
||||||
variables: { name, value }
|
variables: { name, value },
|
||||||
});
|
});
|
||||||
}
|
};
|
||||||
|
|
||||||
function updateTopUserConfiguration(select) {
|
function updateTopUserConfiguration(select) {
|
||||||
if (ccconfig[`status_view_selectedTopUserCategory:${cluster}`] != select) {
|
if (
|
||||||
updateConfigurationMutation({ name: `status_view_selectedTopUserCategory:${cluster}`, value: JSON.stringify(select) })
|
ccconfig[`status_view_selectedTopUserCategory:${cluster}`] != select
|
||||||
.subscribe(res => {
|
) {
|
||||||
|
updateConfigurationMutation({
|
||||||
|
name: `status_view_selectedTopUserCategory:${cluster}`,
|
||||||
|
value: JSON.stringify(select),
|
||||||
|
}).subscribe((res) => {
|
||||||
if (res.fetching === false && !res.error) {
|
if (res.fetching === false && !res.error) {
|
||||||
// console.log(`status_view_selectedTopUserCategory:${cluster}` + ' -> Updated!')
|
// console.log(`status_view_selectedTopUserCategory:${cluster}` + ' -> Updated!')
|
||||||
} else if (res.fetching === false && res.error) {
|
} else if (res.fetching === false && res.error) {
|
||||||
throw res.error
|
throw res.error;
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
} else {
|
} else {
|
||||||
// console.log('No Mutation Required: Top User')
|
// console.log('No Mutation Required: Top User')
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function updateTopProjectConfiguration(select) {
|
function updateTopProjectConfiguration(select) {
|
||||||
if (ccconfig[`status_view_selectedTopProjectCategory:${cluster}`] != select) {
|
if (
|
||||||
updateConfigurationMutation({ name: `status_view_selectedTopProjectCategory:${cluster}`, value: JSON.stringify(select) })
|
ccconfig[`status_view_selectedTopProjectCategory:${cluster}`] !=
|
||||||
.subscribe(res => {
|
select
|
||||||
|
) {
|
||||||
|
updateConfigurationMutation({
|
||||||
|
name: `status_view_selectedTopProjectCategory:${cluster}`,
|
||||||
|
value: JSON.stringify(select),
|
||||||
|
}).subscribe((res) => {
|
||||||
if (res.fetching === false && !res.error) {
|
if (res.fetching === false && !res.error) {
|
||||||
// console.log(`status_view_selectedTopProjectCategory:${cluster}` + ' -> Updated!')
|
// console.log(`status_view_selectedTopProjectCategory:${cluster}` + ' -> Updated!')
|
||||||
} else if (res.fetching === false && res.error) {
|
} else if (res.fetching === false && res.error) {
|
||||||
throw res.error
|
throw res.error;
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
} else {
|
} else {
|
||||||
// console.log('No Mutation Required: Top Project')
|
// console.log('No Mutation Required: Top Project')
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
|
||||||
$: updateTopUserConfiguration(topUserSelection.key)
|
|
||||||
$: updateTopProjectConfiguration(topProjectSelection.key)
|
|
||||||
|
|
||||||
|
$: updateTopUserConfiguration(topUserSelection.key);
|
||||||
|
$: updateTopProjectConfiguration(topProjectSelection.key);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<!-- Loading indicator & Refresh -->
|
<!-- Loading indicator & Refresh -->
|
||||||
|
|
||||||
<Row>
|
<Row>
|
||||||
<Col xs="auto" style="align-self: flex-end;">
|
<Col xs="auto" style="align-self: flex-end;">
|
||||||
<h4 class="mb-0" >Current utilization of cluster "{cluster}"</h4>
|
<h4 class="mb-0">Current utilization of cluster "{cluster}"</h4>
|
||||||
</Col>
|
</Col>
|
||||||
<Col xs="auto">
|
<Col xs="auto">
|
||||||
{#if $initq.fetching || $mainQuery.fetching}
|
{#if $initq.fetching || $mainQuery.fetching}
|
||||||
<Spinner/>
|
<Spinner />
|
||||||
{:else if $initq.error}
|
{:else if $initq.error}
|
||||||
<Card body color="danger">{$initq.error.message}</Card>
|
<Card body color="danger">{$initq.error.message}</Card>
|
||||||
{:else}
|
{:else}
|
||||||
@ -173,10 +321,13 @@
|
|||||||
{/if}
|
{/if}
|
||||||
</Col>
|
</Col>
|
||||||
<Col xs="auto" style="margin-left: auto;">
|
<Col xs="auto" style="margin-left: auto;">
|
||||||
<Refresher initially={120} on:reload={() => {
|
<Refresher
|
||||||
from = new Date(Date.now() - 5 * 60 * 1000)
|
initially={120}
|
||||||
to = new Date(Date.now())
|
on:reload={() => {
|
||||||
}} />
|
from = new Date(Date.now() - 5 * 60 * 1000);
|
||||||
|
to = new Date(Date.now());
|
||||||
|
}}
|
||||||
|
/>
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
{#if $mainQuery.error}
|
{#if $mainQuery.error}
|
||||||
@ -187,43 +338,85 @@
|
|||||||
</Row>
|
</Row>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<hr>
|
<hr />
|
||||||
|
|
||||||
<!-- Gauges & Roofline per Subcluster-->
|
<!-- Gauges & Roofline per Subcluster-->
|
||||||
|
|
||||||
{#if $initq.data && $mainQuery.data}
|
{#if $initq.data && $mainQuery.data}
|
||||||
{#each $initq.data.clusters.find(c => c.name == cluster).subClusters as subCluster, i}
|
{#each $initq.data.clusters.find((c) => c.name == cluster).subClusters as subCluster, i}
|
||||||
<Row cols={2} class="mb-3 justify-content-center">
|
<Row class="mb-3 justify-content-center">
|
||||||
<Col xs="4" class="px-3">
|
<Col md="4" class="px-3">
|
||||||
<Card class="h-auto mt-1">
|
<Card class="h-auto mt-1">
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
<CardTitle class="mb-0">SubCluster "{subCluster.name}"</CardTitle>
|
<CardTitle class="mb-0"
|
||||||
|
>SubCluster "{subCluster.name}"</CardTitle
|
||||||
|
>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBody>
|
<CardBody>
|
||||||
<Table borderless>
|
<Table borderless>
|
||||||
<tr class="py-2">
|
<tr class="py-2">
|
||||||
<th scope="col">Allocated Nodes</th>
|
<th scope="col">Allocated Nodes</th>
|
||||||
<td style="min-width: 100px;"><div class="col"><Progress value={allocatedNodes[subCluster.name]} max={subCluster.numberOfNodes}/></div></td>
|
<td style="min-width: 100px;"
|
||||||
<td>{allocatedNodes[subCluster.name]} / {subCluster.numberOfNodes} Nodes</td>
|
><div class="col">
|
||||||
|
<Progress
|
||||||
|
value={allocatedNodes[
|
||||||
|
subCluster.name
|
||||||
|
]}
|
||||||
|
max={subCluster.numberOfNodes}
|
||||||
|
/>
|
||||||
|
</div></td
|
||||||
|
>
|
||||||
|
<td
|
||||||
|
>{allocatedNodes[subCluster.name]} / {subCluster.numberOfNodes}
|
||||||
|
Nodes</td
|
||||||
|
>
|
||||||
</tr>
|
</tr>
|
||||||
<tr class="py-2">
|
<tr class="py-2">
|
||||||
<th scope="col">Flop Rate (Any) <Icon name="info-circle" class="p-1" style="cursor: help;" title="Flops[Any] = (Flops[Double] x 2) + Flops[Single]"/></th>
|
<th scope="col"
|
||||||
<td style="min-width: 100px;"><div class="col"><Progress value={flopRate[subCluster.name]} max={subCluster.flopRateSimd.value * subCluster.numberOfNodes}/></div></td>
|
>Flop Rate (Any) <Icon
|
||||||
|
name="info-circle"
|
||||||
|
class="p-1"
|
||||||
|
style="cursor: help;"
|
||||||
|
title="Flops[Any] = (Flops[Double] x 2) + Flops[Single]"
|
||||||
|
/></th
|
||||||
|
>
|
||||||
|
<td style="min-width: 100px;"
|
||||||
|
><div class="col">
|
||||||
|
<Progress
|
||||||
|
value={flopRate[subCluster.name]}
|
||||||
|
max={subCluster.flopRateSimd.value *
|
||||||
|
subCluster.numberOfNodes}
|
||||||
|
/>
|
||||||
|
</div></td
|
||||||
|
>
|
||||||
<td>
|
<td>
|
||||||
{scaleNumbers(flopRate[subCluster.name],
|
{scaleNumbers(
|
||||||
(subCluster.flopRateSimd.value * subCluster.numberOfNodes),
|
flopRate[subCluster.name],
|
||||||
flopRateUnitPrefix[subCluster.name])
|
subCluster.flopRateSimd.value *
|
||||||
}{flopRateUnitBase[subCluster.name]} [Max]
|
subCluster.numberOfNodes,
|
||||||
|
flopRateUnitPrefix[subCluster.name]
|
||||||
|
)}{flopRateUnitBase[subCluster.name]} [Max]
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr class="py-2">
|
<tr class="py-2">
|
||||||
<th scope="col">MemBw Rate</th>
|
<th scope="col">MemBw Rate</th>
|
||||||
<td style="min-width: 100px;"><div class="col"><Progress value={memBwRate[subCluster.name]} max={subCluster.memoryBandwidth.value * subCluster.numberOfNodes}/></div></td>
|
<td style="min-width: 100px;"
|
||||||
|
><div class="col">
|
||||||
|
<Progress
|
||||||
|
value={memBwRate[subCluster.name]}
|
||||||
|
max={subCluster.memoryBandwidth
|
||||||
|
.value *
|
||||||
|
subCluster.numberOfNodes}
|
||||||
|
/>
|
||||||
|
</div></td
|
||||||
|
>
|
||||||
<td>
|
<td>
|
||||||
{scaleNumbers(memBwRate[subCluster.name],
|
{scaleNumbers(
|
||||||
(subCluster.memoryBandwidth.value * subCluster.numberOfNodes),
|
memBwRate[subCluster.name],
|
||||||
memBwRateUnitPrefix[subCluster.name])
|
subCluster.memoryBandwidth.value *
|
||||||
}{memBwRateUnitBase[subCluster.name]} [Max]
|
subCluster.numberOfNodes,
|
||||||
|
memBwRateUnitPrefix[subCluster.name]
|
||||||
|
)}{memBwRateUnitBase[subCluster.name]} [Max]
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
</Table>
|
</Table>
|
||||||
@ -234,33 +427,51 @@
|
|||||||
<div bind:clientWidth={plotWidths[i]}>
|
<div bind:clientWidth={plotWidths[i]}>
|
||||||
{#key $mainQuery.data.nodeMetrics}
|
{#key $mainQuery.data.nodeMetrics}
|
||||||
<Roofline
|
<Roofline
|
||||||
width={plotWidths[i] - 10} height={300} colorDots={true} showTime={false} cluster={subCluster}
|
width={plotWidths[i] - 10}
|
||||||
data={transformPerNodeData($mainQuery.data.nodeMetrics.filter(data => data.subCluster == subCluster.name))} />
|
height={300}
|
||||||
|
colorDots={true}
|
||||||
|
showTime={false}
|
||||||
|
cluster={subCluster}
|
||||||
|
data={transformPerNodeData(
|
||||||
|
$mainQuery.data.nodeMetrics.filter(
|
||||||
|
(data) => data.subCluster == subCluster.name
|
||||||
|
)
|
||||||
|
)}
|
||||||
|
/>
|
||||||
{/key}
|
{/key}
|
||||||
</div>
|
</div>
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
{/each}
|
{/each}
|
||||||
|
|
||||||
<hr style="margin-top: -1em;">
|
<hr style="margin-top: -1em;" />
|
||||||
|
|
||||||
<!-- Usage Stats as Histograms -->
|
<!-- Usage Stats as Histograms -->
|
||||||
|
|
||||||
<Row cols={4}>
|
<Row>
|
||||||
<Col class="p-2">
|
<Col class="p-2">
|
||||||
<div bind:clientWidth={colWidth1}>
|
<div bind:clientWidth={colWidth1}>
|
||||||
<h4 class="text-center">Top Users on {cluster.charAt(0).toUpperCase() + cluster.slice(1)}</h4>
|
<h4 class="text-center">
|
||||||
|
Top Users on {cluster.charAt(0).toUpperCase() +
|
||||||
|
cluster.slice(1)}
|
||||||
|
</h4>
|
||||||
{#key $topUserQuery.data}
|
{#key $topUserQuery.data}
|
||||||
{#if $topUserQuery.fetching}
|
{#if $topUserQuery.fetching}
|
||||||
<Spinner/>
|
<Spinner />
|
||||||
{:else if $topUserQuery.error}
|
{:else if $topUserQuery.error}
|
||||||
<Card body color="danger">{$topUserQuery.error.message}</Card>
|
<Card body color="danger"
|
||||||
{:else}
|
>{$topUserQuery.error.message}</Card
|
||||||
|
>
|
||||||
|
{:else}
|
||||||
<Pie
|
<Pie
|
||||||
size={colWidth1}
|
size={colWidth1}
|
||||||
sliceLabel={topUserSelection.label}
|
sliceLabel={topUserSelection.label}
|
||||||
quantities={$topUserQuery.data.topUser.map((tu) => tu[topUserSelection.key])}
|
quantities={$topUserQuery.data.topUser.map(
|
||||||
entities={$topUserQuery.data.topUser.map((tu) => tu.id)}
|
(tu) => tu[topUserSelection.key]
|
||||||
|
)}
|
||||||
|
entities={$topUserQuery.data.topUser.map(
|
||||||
|
(tu) => tu.id
|
||||||
|
)}
|
||||||
/>
|
/>
|
||||||
{/if}
|
{/if}
|
||||||
{/key}
|
{/key}
|
||||||
@ -269,16 +480,22 @@
|
|||||||
<Col class="px-4 py-2">
|
<Col class="px-4 py-2">
|
||||||
{#key $topUserQuery.data}
|
{#key $topUserQuery.data}
|
||||||
{#if $topUserQuery.fetching}
|
{#if $topUserQuery.fetching}
|
||||||
<Spinner/>
|
<Spinner />
|
||||||
{:else if $topUserQuery.error}
|
{:else if $topUserQuery.error}
|
||||||
<Card body color="danger">{$topUserQuery.error.message}</Card>
|
<Card body color="danger"
|
||||||
{:else}
|
>{$topUserQuery.error.message}</Card
|
||||||
|
>
|
||||||
|
{:else}
|
||||||
<Table>
|
<Table>
|
||||||
<tr class="mb-2">
|
<tr class="mb-2">
|
||||||
<th>Legend</th>
|
<th>Legend</th>
|
||||||
<th>User Name</th>
|
<th>User Name</th>
|
||||||
<th>Number of
|
<th
|
||||||
<select class="p-0" bind:value={topUserSelection}>
|
>Number of
|
||||||
|
<select
|
||||||
|
class="p-0"
|
||||||
|
bind:value={topUserSelection}
|
||||||
|
>
|
||||||
{#each topOptions as option}
|
{#each topOptions as option}
|
||||||
<option value={option}>
|
<option value={option}>
|
||||||
{option.label}
|
{option.label}
|
||||||
@ -289,8 +506,18 @@
|
|||||||
</tr>
|
</tr>
|
||||||
{#each $topUserQuery.data.topUser as tu, i}
|
{#each $topUserQuery.data.topUser as tu, i}
|
||||||
<tr>
|
<tr>
|
||||||
<td><Icon name="circle-fill" style="color: {colors[i]};"/></td>
|
<td
|
||||||
<th scope="col"><a href="/monitoring/user/{tu.id}?cluster={cluster}&state=running">{tu.id}</a></th>
|
><Icon
|
||||||
|
name="circle-fill"
|
||||||
|
style="color: {colors[i]};"
|
||||||
|
/></td
|
||||||
|
>
|
||||||
|
<th scope="col"
|
||||||
|
><a
|
||||||
|
href="/monitoring/user/{tu.id}?cluster={cluster}&state=running"
|
||||||
|
>{tu.id}</a
|
||||||
|
></th
|
||||||
|
>
|
||||||
<td>{tu[topUserSelection.key]}</td>
|
<td>{tu[topUserSelection.key]}</td>
|
||||||
</tr>
|
</tr>
|
||||||
{/each}
|
{/each}
|
||||||
@ -299,18 +526,27 @@
|
|||||||
{/key}
|
{/key}
|
||||||
</Col>
|
</Col>
|
||||||
<Col class="p-2">
|
<Col class="p-2">
|
||||||
<h4 class="text-center">Top Projects on {cluster.charAt(0).toUpperCase() + cluster.slice(1)}</h4>
|
<h4 class="text-center">
|
||||||
|
Top Projects on {cluster.charAt(0).toUpperCase() +
|
||||||
|
cluster.slice(1)}
|
||||||
|
</h4>
|
||||||
{#key $topProjectQuery.data}
|
{#key $topProjectQuery.data}
|
||||||
{#if $topProjectQuery.fetching}
|
{#if $topProjectQuery.fetching}
|
||||||
<Spinner/>
|
<Spinner />
|
||||||
{:else if $topProjectQuery.error}
|
{:else if $topProjectQuery.error}
|
||||||
<Card body color="danger">{$topProjectQuery.error.message}</Card>
|
<Card body color="danger"
|
||||||
|
>{$topProjectQuery.error.message}</Card
|
||||||
|
>
|
||||||
{:else}
|
{:else}
|
||||||
<Pie
|
<Pie
|
||||||
size={colWidth1}
|
size={colWidth1}
|
||||||
sliceLabel={topProjectSelection.label}
|
sliceLabel={topProjectSelection.label}
|
||||||
quantities={$topProjectQuery.data.topProjects.map((tp) => tp[topProjectSelection.key])}
|
quantities={$topProjectQuery.data.topProjects.map(
|
||||||
entities={$topProjectQuery.data.topProjects.map((tp) => tp.id)}
|
(tp) => tp[topProjectSelection.key]
|
||||||
|
)}
|
||||||
|
entities={$topProjectQuery.data.topProjects.map(
|
||||||
|
(tp) => tp.id
|
||||||
|
)}
|
||||||
/>
|
/>
|
||||||
{/if}
|
{/if}
|
||||||
{/key}
|
{/key}
|
||||||
@ -318,16 +554,22 @@
|
|||||||
<Col class="px-4 py-2">
|
<Col class="px-4 py-2">
|
||||||
{#key $topProjectQuery.data}
|
{#key $topProjectQuery.data}
|
||||||
{#if $topProjectQuery.fetching}
|
{#if $topProjectQuery.fetching}
|
||||||
<Spinner/>
|
<Spinner />
|
||||||
{:else if $topProjectQuery.error}
|
{:else if $topProjectQuery.error}
|
||||||
<Card body color="danger">{$topProjectQuery.error.message}</Card>
|
<Card body color="danger"
|
||||||
{:else}
|
>{$topProjectQuery.error.message}</Card
|
||||||
|
>
|
||||||
|
{:else}
|
||||||
<Table>
|
<Table>
|
||||||
<tr class="mb-2">
|
<tr class="mb-2">
|
||||||
<th>Legend</th>
|
<th>Legend</th>
|
||||||
<th>Project Code</th>
|
<th>Project Code</th>
|
||||||
<th>Number of
|
<th
|
||||||
<select class="p-0" bind:value={topProjectSelection}>
|
>Number of
|
||||||
|
<select
|
||||||
|
class="p-0"
|
||||||
|
bind:value={topProjectSelection}
|
||||||
|
>
|
||||||
{#each topOptions as option}
|
{#each topOptions as option}
|
||||||
<option value={option}>
|
<option value={option}>
|
||||||
{option.label}
|
{option.label}
|
||||||
@ -338,8 +580,18 @@
|
|||||||
</tr>
|
</tr>
|
||||||
{#each $topProjectQuery.data.topProjects as tp, i}
|
{#each $topProjectQuery.data.topProjects as tp, i}
|
||||||
<tr>
|
<tr>
|
||||||
<td><Icon name="circle-fill" style="color: {colors[i]};"/></td>
|
<td
|
||||||
<th scope="col"><a href="/monitoring/jobs/?cluster={cluster}&state=running&project={tp.id}&projectMatch=eq">{tp.id}</a></th>
|
><Icon
|
||||||
|
name="circle-fill"
|
||||||
|
style="color: {colors[i]};"
|
||||||
|
/></td
|
||||||
|
>
|
||||||
|
<th scope="col"
|
||||||
|
><a
|
||||||
|
href="/monitoring/jobs/?cluster={cluster}&state=running&project={tp.id}&projectMatch=eq"
|
||||||
|
>{tp.id}</a
|
||||||
|
></th
|
||||||
|
>
|
||||||
<td>{tp[topProjectSelection.key]}</td>
|
<td>{tp[topProjectSelection.key]}</td>
|
||||||
</tr>
|
</tr>
|
||||||
{/each}
|
{/each}
|
||||||
@ -348,19 +600,22 @@
|
|||||||
{/key}
|
{/key}
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
<hr class="my-2"/>
|
<hr class="my-2" />
|
||||||
<Row cols={2}>
|
<Row>
|
||||||
<Col class="p-2">
|
<Col class="p-2">
|
||||||
<div bind:clientWidth={colWidth2}>
|
<div bind:clientWidth={colWidth2}>
|
||||||
{#key $mainQuery.data.stats}
|
{#key $mainQuery.data.stats}
|
||||||
<Histogram
|
<Histogram
|
||||||
data={convert2uplot($mainQuery.data.stats[0].histDuration)}
|
data={convert2uplot(
|
||||||
|
$mainQuery.data.stats[0].histDuration
|
||||||
|
)}
|
||||||
width={colWidth2 - 25}
|
width={colWidth2 - 25}
|
||||||
title="Duration Distribution"
|
title="Duration Distribution"
|
||||||
xlabel="Current Runtimes"
|
xlabel="Current Runtimes"
|
||||||
xunit="Hours"
|
xunit="Hours"
|
||||||
ylabel="Number of Jobs"
|
ylabel="Number of Jobs"
|
||||||
yunit="Jobs"/>
|
yunit="Jobs"
|
||||||
|
/>
|
||||||
{/key}
|
{/key}
|
||||||
</div>
|
</div>
|
||||||
</Col>
|
</Col>
|
||||||
@ -371,9 +626,10 @@
|
|||||||
width={colWidth2 - 25}
|
width={colWidth2 - 25}
|
||||||
title="Number of Nodes Distribution"
|
title="Number of Nodes Distribution"
|
||||||
xlabel="Allocated Nodes"
|
xlabel="Allocated Nodes"
|
||||||
xunit="Nodes"
|
xunit="Nodes"
|
||||||
ylabel="Number of Jobs"
|
ylabel="Number of Jobs"
|
||||||
yunit="Jobs"/>
|
yunit="Jobs"
|
||||||
|
/>
|
||||||
{/key}
|
{/key}
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
@ -382,13 +638,16 @@
|
|||||||
<div bind:clientWidth={colWidth2}>
|
<div bind:clientWidth={colWidth2}>
|
||||||
{#key $mainQuery.data.stats}
|
{#key $mainQuery.data.stats}
|
||||||
<Histogram
|
<Histogram
|
||||||
data={convert2uplot($mainQuery.data.stats[0].histNumCores)}
|
data={convert2uplot(
|
||||||
|
$mainQuery.data.stats[0].histNumCores
|
||||||
|
)}
|
||||||
width={colWidth2 - 25}
|
width={colWidth2 - 25}
|
||||||
title="Number of Cores Distribution"
|
title="Number of Cores Distribution"
|
||||||
xlabel="Allocated Cores"
|
xlabel="Allocated Cores"
|
||||||
xunit="Cores"
|
xunit="Cores"
|
||||||
ylabel="Number of Jobs"
|
ylabel="Number of Jobs"
|
||||||
yunit="Jobs"/>
|
yunit="Jobs"
|
||||||
|
/>
|
||||||
{/key}
|
{/key}
|
||||||
</div>
|
</div>
|
||||||
</Col>
|
</Col>
|
||||||
@ -399,10 +658,11 @@
|
|||||||
width={colWidth2 - 25}
|
width={colWidth2 - 25}
|
||||||
title="Number of Accelerators Distribution"
|
title="Number of Accelerators Distribution"
|
||||||
xlabel="Allocated Accs"
|
xlabel="Allocated Accs"
|
||||||
xunit="Accs"
|
xunit="Accs"
|
||||||
ylabel="Number of Jobs"
|
ylabel="Number of Jobs"
|
||||||
yunit="Jobs"/>
|
yunit="Jobs"
|
||||||
|
/>
|
||||||
{/key}
|
{/key}
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
{/if}
|
{/if}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user