Skip to content

GitLab

Unverified Commit 9caf5215 authored by Lijiaoa's avatar Lijiaoa Committed by GitHub
Browse files

Hybrid show trial platforms in webui (#3391)

parent 28c486c4
Hide whitespace changes
Inline Side-by-side
Showing with 432 additions and 413 deletions
ts/webui/src/App.scss
View file @ 9caf5215
...@@ -29,7 +29,7 @@ ...@@ -29,7 +29,7 @@
.content { .content {
width: 87%; width: 87%;
min-height: calc(100vh - 56); min-height: calc(100vh - 56px);
margin: 0 auto; margin: 0 auto;
min-width: 1200px; min-width: 1200px;
max-width: 1490px; max-width: 1490px;
......
ts/webui/src/components/trial-detail/TableList.tsx
View file @ 9caf5215
...@@ -56,6 +56,8 @@ function _inferColumnTitle(columnKey: string): string { ...@@ -56,6 +56,8 @@ function _inferColumnTitle(columnKey: string): string {
return 'ID'; return 'ID';
} else if (columnKey === 'intermediateCount') { } else if (columnKey === 'intermediateCount') {
return 'Intermediate results (#)'; return 'Intermediate results (#)';
} else if (columnKey === 'message') {
return 'Message';
} else if (columnKey.startsWith('space/')) { } else if (columnKey.startsWith('space/')) {
return columnKey.split('/', 2)[1] + ' (space)'; return columnKey.split('/', 2)[1] + ' (space)';
} else if (columnKey === 'latestAccuracy') { } else if (columnKey === 'latestAccuracy') {
...@@ -185,6 +187,7 @@ class TableList extends React.Component<TableListProps, TableListState> { ...@@ -185,6 +187,7 @@ class TableList extends React.Component<TableListProps, TableListState> {
endTime: (trial as Trial).info.endTime, endTime: (trial as Trial).info.endTime,
duration: trial.duration, duration: trial.duration,
status: trial.status, status: trial.status,
message: (trial as Trial).info.message || '--',
intermediateCount: trial.intermediates.length, intermediateCount: trial.intermediates.length,
_expandDetails: this._expandedTrialIds.has(trial.id) // hidden field names should start with `_` _expandDetails: this._expandedTrialIds.has(trial.id) // hidden field names should start with `_`
}; };
...@@ -280,6 +283,28 @@ class TableList extends React.Component<TableListProps, TableListState> { ...@@ -280,6 +283,28 @@ class TableList extends React.Component<TableListProps, TableListState> {
<span className={`${record.status} commonStyle`}>{record.status}</span> <span className={`${record.status} commonStyle`}>{record.status}</span>
) )
}), }),
...(k === 'message' && {
onRender: (record): React.ReactNode =>
record.message.length > 15 ? (
<TooltipHost
content={record.message}
directionalHint={DirectionalHint.bottomCenter}
tooltipProps={{
calloutProps: {
styles: {
beak: { background: TOOLTIP_BACKGROUND_COLOR },
beakCurtain: { background: TOOLTIP_BACKGROUND_COLOR },
calloutMain: { background: TOOLTIP_BACKGROUND_COLOR }
}
}
}}
>
<div>{record.message}</div>
</TooltipHost>
) : (
<div>{record.message}</div>
)
}),
...((k.startsWith('metric/') || k.startsWith('space/')) && { ...((k.startsWith('metric/') || k.startsWith('space/')) && {
// show tooltip // show tooltip
onRender: (record): React.ReactNode => ( onRender: (record): React.ReactNode => (
......
ts/webui/src/static/const.ts
View file @ 9caf5215
...@@ -39,18 +39,6 @@ const DRAWEROPTION = { ...@@ -39,18 +39,6 @@ const DRAWEROPTION = {
const OPERATION = 'Operation'; const OPERATION = 'Operation';
// defatult selected column // defatult selected column
const COLUMN = ['Trial No.', 'ID', 'Duration', 'Status', 'Default', OPERATION]; const COLUMN = ['Trial No.', 'ID', 'Duration', 'Status', 'Default', OPERATION];
// all choice column !dictory final
const COLUMNPro = [
'Trial No.',
'ID',
'Start time',
'End time',
'Duration',
'Status',
'Intermediate result',
'Default',
OPERATION
];
const CONCURRENCYTOOLTIP = 'Trial concurrency is the number of trials running concurrently.'; const CONCURRENCYTOOLTIP = 'Trial concurrency is the number of trials running concurrently.';
const SUPPORTED_SEARCH_SPACE_TYPE = [ const SUPPORTED_SEARCH_SPACE_TYPE = [
'choice', 'choice',
...@@ -75,7 +63,6 @@ export { ...@@ -75,7 +63,6 @@ export {
DOWNLOAD_IP, DOWNLOAD_IP,
trialJobStatus, trialJobStatus,
EXPERIMENTSTATUS, EXPERIMENTSTATUS,
COLUMNPro,
WEBUIDOC, WEBUIDOC,
CONTROLTYPE, CONTROLTYPE,
MONACO, MONACO,
......
ts/webui/src/static/interface.ts
View file @ 9caf5215
...@@ -46,6 +46,7 @@ interface TableRecord { ...@@ -46,6 +46,7 @@ interface TableRecord {
id: string; id: string;
duration: number; duration: number;
status: string; status: string;
message: string;
intermediateCount: number; intermediateCount: number;
accuracy?: number | any; accuracy?: number | any;
latestAccuracy: number | undefined; latestAccuracy: number | undefined;
...@@ -135,6 +136,7 @@ interface TrialJobInfo { ...@@ -135,6 +136,7 @@ interface TrialJobInfo {
trialJobId: string; trialJobId: string;
sequenceId: number; sequenceId: number;
status: string; status: string;
message: string;
startTime?: number; startTime?: number;
endTime?: number; endTime?: number;
hyperParameters?: string[]; hyperParameters?: string[];
......
ts/webui/src/static/model/trial.ts
View file @ 9caf5215
...@@ -152,6 +152,7 @@ class Trial implements TableObj { ...@@ -152,6 +152,7 @@ class Trial implements TableObj {
endTime: this.info.endTime, endTime: this.info.endTime,
duration, duration,
status: this.info.status, status: this.info.status,
message: this.info.message || '--',
intermediateCount: this.intermediates.length, intermediateCount: this.intermediates.length,
accuracy: accuracy, accuracy: accuracy,
latestAccuracy: this.latestAccuracy, latestAccuracy: this.latestAccuracy,
......
ts/webui/src/static/style/common.scss
View file @ 9caf5215
.ellipsis { .ellipsis {
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.link { .link {
outline: none; outline: none;
color: #333 !important; color: #333 !important;
text-decoration: none; text-decoration: none;
&:hover { &:hover {
color: #0071bc !important; color: #0071bc !important;
text-decoration: underline; text-decoration: underline;
} }
&:active,
&:visited { &:active,
color: #0071bc; &:visited {
} color: #0071bc;
}
} }
.cursor { .cursor {
&:hover, &:hover,
& i:hover { & i:hover {
cursor: pointer; cursor: pointer;
} }
} }
.idCopy { .idCopy {
......
ts/webui/src/static/style/experiment/experiment.scss
View file @ 9caf5215
$pageMargin: 24px; $pageMargin: 24px;
.expBackground { .expBackground {
background: #f2f2f2; background: #f2f2f2;
height: 100%; height: 100%;
.content { .content {
/* TODO: here is 32 rather than $pageMargin is because experiment page `content` position */ /* TODO: here is 32 rather than $pageMargin is because experiment page `content` position */
margin-top: 32px; margin-top: 32px;
margin-bottom: $pageMargin; margin-bottom: $pageMargin;
background: #fff; background: #fff;
} }
} }
.experimentList { .experimentList {
padding: $pageMargin 42px; padding: $pageMargin 42px;
.ms-DetailsRow { .ms-DetailsRow {
&:hover, &:focus { &:hover,
background: #F3F2F1 !important; &:focus {
} background: #f3f2f1 !important;
} }
}
.box {
margin-top: 20px; .box {
margin-top: 20px;
.search {
width: 90%; .search {
width: 90%;
&-input {
width: 330px; &-input {
} width: 330px;
} }
}
.filter {
width: 10%; .filter {
text-align: right; width: 10%;
text-align: right;
&-button-open {
background: #f3f2f1; &-button-open {
} background: #f3f2f1;
} }
} }
}
.filter-condition {
margin-top: 26px; .filter-condition {
.reset { margin-top: 26px;
width: 80px;
position: relative; .reset {
top: 29px; width: 80px;
} position: relative;
top: 29px;
&-status { }
width: 194px;
} &-status {
&-platform { width: 194px;
width: 150px; }
}
} &-platform {
width: 150px;
.hidden { }
display: none; }
}
.hidden {
.margin { display: none;
margin-left: 10px; }
}
.margin {
.idColor { margin-left: 10px;
color: #615f5d !important; }
}
.idColor {
.toAnotherExp { color: #615f5d !important;
color: #0071bc !important; }
}
.toAnotherExp {
.ms-DetailsRow:focus { color: #0071bc !important;
background: #e1dfdd; }
}
.ms-DetailsRow:focus {
background: #e1dfdd;
}
} }
.gray-port { .gray-port {
color: #bebebe; color: #bebebe;
} }
ts/webui/src/static/style/nav/nav.scss
View file @ 9caf5215
$barHeight: 56px; $barHeight: 56px;
.navOptions { .navOptions {
.ms-Button-icon { .ms-Button-icon {
color: #fff; color: #fff;
&:hover { &:hover {
color: #fff; color: #fff;
} }
} }
.ms-Button--commandBar { .ms-Button--commandBar {
background-color: #0071bc; background-color: #0071bc;
user-select: none; user-select: none;
&:hover, &:hover,
&:active { &:active {
color: #fff; color: #fff;
.ms-Button-icon { .ms-Button-icon {
color: #fff; color: #fff;
} }
} }
.ms-Button-textContainer { .ms-Button-textContainer {
color: #fff; color: #fff;
} }
.ms-Button-menuIcon { .ms-Button-menuIcon {
color: #fff; color: #fff;
background-color: transparent; background-color: transparent;
} }
} }
.experiment { .experiment {
position: relative; position: relative;
top: 3px; top: 3px;
text-decoration: none; text-decoration: none;
} }
} }
.nav { .nav {
width: 100%; width: 100%;
min-width: 1200px; min-width: 1200px;
height: $barHeight; height: $barHeight;
line-height: $barHeight; line-height: $barHeight;
/* desktop mode useful */ /* desktop mode useful */
.desktop-logo { .desktop-logo {
position: relative; position: relative;
top: 6px; top: 6px;
} }
.logoTitle { .logoTitle {
font-size: 18px; font-size: 18px;
color: #fff; color: #fff;
} }
&-refresh { &-refresh {
position: relative; position: relative;
display: flex; display: flex;
} }
&-refresh-num { &-refresh-num {
position: absolute; position: absolute;
top: -13px; top: -13px;
left: 17px; left: 17px;
color: #fff; color: #fff;
font-size: 12px; font-size: 12px;
} }
} }
/* overview and detail tabs common style */ /* overview and detail tabs common style */
a.common-tabs { a.common-tabs {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 16px; font-size: 16px;
color: #b8c7ce; color: #b8c7ce;
text-decoration: none; text-decoration: none;
} }
.common-tabs:visited, .common-tabs:visited,
.selected:hover { .selected:hover {
color: #fff; color: #fff;
text-decoration: none; text-decoration: none;
} }
.common-tabs:hover, .common-tabs:hover,
.selected { .selected {
color: #fff; color: #fff;
border-bottom: 1px solid #fff; border-bottom: 1px solid #fff;
} }
.left-right-margin { .left-right-margin {
margin-left: 20px; margin-left: 20px;
margin-right: 20px; margin-right: 20px;
} }
.expNavTitle { .expNavTitle {
span { span {
color: #fff; color: #fff;
text-decoration: none; text-decoration: none;
position: relative; position: relative;
top: -4px; top: -4px;
} }
i {
color: #fff; i {
font-size: 12px; color: #fff;
position: relative; font-size: 12px;
top: -3px; position: relative;
padding-left: 4px; top: -3px;
} padding-left: 4px;
}
} }
ts/webui/src/static/style/overview/count.scss
View file @ 9caf5215
...@@ -2,129 +2,130 @@ $seriesIconMargin: 10px; ...@@ -2,129 +2,130 @@ $seriesIconMargin: 10px;
$margin: 24px; $margin: 24px;
.marginTop { .marginTop {
margin-top: $margin; margin-top: $margin;
} }
.ExpDuration { .ExpDuration {
margin-top: $margin; margin-top: $margin;
.maxTrialNum { .maxTrialNum {
margin-bottom: 10px; margin-bottom: 10px;
} }
} }
.exp-progress { .exp-progress {
margin-top: 9px; margin-top: 9px;
.bold { .bold {
font-weight: 500; font-weight: 500;
} }
.joiner { .joiner {
padding: 0 3px; padding: 0 3px;
} }
} }
.status-count { .status-count {
span { span {
font-size: 14px; font-size: 14px;
color: #8f8f8f; color: #8f8f8f;
} }
p { p {
font-size: 16px; font-size: 16px;
font-weight: 500; font-weight: 500;
color: #484848; color: #484848;
} }
} }
.maxTrialNum { .maxTrialNum {
.editparam { .editparam {
position: relative; position: relative;
top: -7px; top: -7px;
} }
} }
.noEditDuration { .noEditDuration {
position: relative; position: relative;
top: -7px; top: -7px;
} }
.editDuration { .editDuration {
position: relative; position: relative;
top: -4px; top: -4px;
} }
.concurrency { .concurrency {
.editparam { .editparam {
margin-top: 5px; margin-top: 5px;
position: relative; position: relative;
} }
} }
.editparam { .editparam {
&-Input { &-Input {
width: 42px; width: 42px;
height: 32px; height: 32px;
padding-right: 5px; padding-right: 5px;
text-align: right; text-align: right;
outline: none; outline: none;
border: none; border: none;
border-bottom: 1px solid #ccc; border-bottom: 1px solid #ccc;
} }
.maxExecDuration { .maxExecDuration {
width: 36px; width: 36px;
} }
&-dropdown { &-dropdown {
width: 65px; width: 65px;
display: inline-block; display: inline-block;
position: relative; position: relative;
top: 13px; top: 13px;
left: 4px; left: 4px;
margin-right: 3px; margin-right: 3px;
.ms-Dropdown-title { .ms-Dropdown-title {
padding-right: 0; padding-right: 0;
} }
} }
} }
.series { .series {
position: relative; position: relative;
top: 5px; top: 5px;
i { i {
font-size: 20px; font-size: 20px;
font-weight: 700; font-weight: 700;
} }
.confirm { .confirm {
margin: 0 $seriesIconMargin; margin: 0 $seriesIconMargin;
i { i {
color: green; color: green;
} }
} }
} }
.cancel i { .cancel i {
color: red; color: red;
font-size: 16px; font-size: 16px;
} }
.edit i { .edit i {
margin-left: 4px; margin-left: 4px;
} }
.overview input:disabled { .overview input:disabled {
background: transparent; background: transparent;
border: none; border: none;
} }
.info { .info {
position: absolute; position: absolute;
z-index: 999; z-index: 999;
left: -50%; left: -50%;
width: 270%; width: 270%;
} }
ts/webui/src/static/style/overview/overview.scss
View file @ 9caf5215
...@@ -3,61 +3,61 @@ $boxBorderRadius: 5px; ...@@ -3,61 +3,61 @@ $boxBorderRadius: 5px;
$boxGapPadding: 10px; $boxGapPadding: 10px;
.wrapper { .wrapper {
display: grid; display: grid;
grid-template-columns: repeat(8, 1fr); grid-template-columns: repeat(8, 1fr);
grid-auto-rows: 102px; grid-auto-rows: 102px;
> div { > div {
background: #fff; background: #fff;
padding: $boxPadding; padding: $boxPadding;
border-radius: $boxBorderRadius; border-radius: $boxBorderRadius;
box-sizing: border-box; box-sizing: border-box;
} }
.duration, .duration,
.trialCount { .trialCount {
grid-column: 1 / 5; grid-column: 1 / 5;
background: #fff; background: #fff;
padding: $boxPadding; padding: $boxPadding;
border-radius: $boxBorderRadius; border-radius: $boxBorderRadius;
box-sizing: border-box; box-sizing: border-box;
margin-top: $boxGapPadding; margin-top: $boxGapPadding;
/* for alert message tooltip position */ /* for alert message tooltip position */
position: relative; position: relative;
} }
.duration { .duration {
grid-row: 3 / 5; grid-row: 3 / 5;
height: 158px; height: 158px;
} }
.trialCount { .trialCount {
grid-row: 5 / 8; grid-row: 5 / 8;
margin-top: -26px; margin-top: -26px;
height: 273px; height: 273px;
} }
.overviewCommand { .overviewCommand {
grid-column: 1 / 5; grid-column: 1 / 5;
grid-row-start: 8; grid-row-start: 8;
margin-top: -50px; margin-top: -50px;
height: 158px; height: 158px;
margin-right: $boxGapPadding; margin-right: $boxGapPadding;
border-radius: $boxBorderRadius; border-radius: $boxBorderRadius;
} }
} }
.overviewBasicInfo { .overviewBasicInfo {
grid-column: 1 / 5; grid-column: 1 / 5;
grid-row: 1 / 3; grid-row: 1 / 3;
z-index: 2; z-index: 2;
} }
.overviewBasicInfo, .overviewBasicInfo,
.duration, .duration,
.trialCount { .trialCount {
margin-right: $boxGapPadding; margin-right: $boxGapPadding;
} }
.basic { .basic {
...@@ -65,8 +65,8 @@ $boxGapPadding: 10px; ...@@ -65,8 +65,8 @@ $boxGapPadding: 10px;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
p { p {
font-size: 14px; font-size: 14px;
font-weight: normal; font-weight: normal;
color: #8f8f8f; color: #8f8f8f;
span { span {
...@@ -79,45 +79,44 @@ $boxGapPadding: 10px; ...@@ -79,45 +79,44 @@ $boxGapPadding: 10px;
font-weight: 500; font-weight: 500;
color: #484848; color: #484848;
} }
} }
.overviewBestMetric { .overviewBestMetric {
grid-column: 5 / 9; grid-column: 5 / 9;
grid-row: 1 / 10; grid-row: 1 / 10;
max-height: 822px; max-height: 822px;
overflow: hidden; overflow: hidden;
.topTrialTitle { .topTrialTitle {
width: 72%; width: 72%;
} }
.active { .active {
background: #d2d0ce; background: #d2d0ce;
} }
.max { .max {
margin-left: 7px; margin-left: 7px;
} }
.mincenter { .mincenter {
margin: 0 13px 0 $boxGapPadding; margin: 0 13px 0 $boxGapPadding;
} }
.chooseEntry { .chooseEntry {
margin-right: $boxGapPadding; margin-right: $boxGapPadding;
line-height: 30px; line-height: 30px;
} }
} }
.overviewCommand1, .overviewCommand1,
.overviewCommand2 { .overviewCommand2 {
grid-row: 7 / 9; grid-row: 7 / 9;
height: 144px; height: 144px;
overflow: hidden; overflow: hidden;
margin-top: $boxGapPadding; margin-top: $boxGapPadding;
} }
.overviewChart { .overviewChart {
margin-top: 20px; margin-top: 20px;
} }
ts/webui/src/static/style/overview/panel.scss
View file @ 9caf5215
$buttonBorderRadius: 23px; $buttonBorderRadius: 23px;
.config { .config {
position: fixed; position: fixed;
right: 0; right: 0;
z-index: 1000; z-index: 1000;
.ms-Button--default { .ms-Button--default {
padding: 0 8px; padding: 0 8px;
margin-bottom: 12px; margin-bottom: 12px;
border: none; border: none;
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.08); box-shadow: 0 3px 3px rgba(0, 0, 0, 0.08);
border-radius: $buttonBorderRadius 0 0 $buttonBorderRadius; border-radius: $buttonBorderRadius 0 0 $buttonBorderRadius;
font-size: 12px; font-size: 12px;
text-align: left; text-align: left;
.ms-Button-label { .ms-Button-label {
font-weight: normal; font-weight: normal;
} }
} }
.integralBtn { .integralBtn {
display: none; display: none;
} }
.margin {
margin-left: 10px;
}
.margin {
margin-left: 10px;
}
} }
.container { .container {
text-align: right; text-align: right;
.icon { .icon {
min-width: 50px; min-width: 50px;
i { i {
font-size: 16px; font-size: 16px;
} }
} }
.maxScrBtn { .maxScrBtn {
width: 150px; width: 150px;
&:hover { &:hover {
color: #fff; color: #fff;
border: 1px solid blue; border: 1px solid blue;
background-color: #0071bc; background-color: #0071bc;
} }
} }
.configBtn i{ .configBtn i {
margin-left: -40px; margin-left: -40px;
} }
.logBtn i { .logBtn i {
margin-left: -25px; margin-left: -25px;
} }
&:hover { &:hover {
.icon { .icon {
display: none; display: none;
} }
.integralBtn { .integralBtn {
display: block; display: block;
color: #fff; color: #fff;
border: 1px solid blue; border: 1px solid blue;
background-color: #0071bc; background-color: #0071bc;
i { i {
font-size: 14px; font-size: 14px;
} }
} }
} }
} }
.ms-Fabric { .ms-Fabric {
.ms-Panel-commands { .ms-Panel-commands {
margin: 0; margin: 0;
} }
} }
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment