Skip to content

GitLab

Unverified Commit 78e874f9 authored by Lijiaoa's avatar Lijiaoa Committed by GitHub
Browse files

[webui] update the layout of overview page (#3123) 


Co-authored-by: default avatarLijiao <Lijiaoa@outlook.com>
parent 580ce0a3
Hide whitespace changes
Inline Side-by-side
Showing with 375 additions and 327 deletions
ts/webui/package.json
View file @ 78e874f9
...@@ -47,6 +47,7 @@ ...@@ -47,6 +47,7 @@
"react-monaco-editor": "^0.32.1", "react-monaco-editor": "^0.32.1",
"react-paginate": "^6.3.2", "react-paginate": "^6.3.2",
"react-pagination": "^1.0.0", "react-pagination": "^1.0.0",
"react-responsive": "^8.1.1",
"react-router": "^5.2.0", "react-router": "^5.2.0",
"react-router-dom": "^5.2.0", "react-router-dom": "^5.2.0",
"react-table": "^7.0.0-rc.15", "react-table": "^7.0.0-rc.15",
......
ts/webui/src/App.scss
View file @ 78e874f9
...@@ -18,6 +18,7 @@ ...@@ -18,6 +18,7 @@
.headerCon { .headerCon {
width: 90%; width: 90%;
max-width: 1490px;
margin: 0 auto; margin: 0 auto;
} }
...@@ -29,9 +30,10 @@ ...@@ -29,9 +30,10 @@
width: 87%; width: 87%;
margin: 0 auto; margin: 0 auto;
min-width: 1200px; min-width: 1200px;
max-width: 1490px;
/* nav bar: 56 + marginTop: 18 */ /* nav bar: 56 + marginTop: 24 */
margin-top: 74px; margin-top: 80px;
margin-bottom: 30px; margin-bottom: 30px;
} }
......
ts/webui/src/components/NavCon.tsx
View file @ 78e874f9
...@@ -157,7 +157,7 @@ class NavCon extends React.Component<NavProps, NavState> { ...@@ -157,7 +157,7 @@ class NavCon extends React.Component<NavProps, NavState> {
</div> </div>
<CommandBarButton <CommandBarButton
iconProps={{ iconName: 'ShowResults' }} iconProps={{ iconName: 'ShowResults' }}
text='Experiment summary' text='Summary'
onClick={this.showExpcontent} onClick={this.showExpcontent}
/> />
<CommandBarButton iconProps={infoIconAbout} text='About' menuProps={aboutProps} /> <CommandBarButton iconProps={infoIconAbout} text='About' menuProps={aboutProps} />
......
ts/webui/src/components/Overview.tsx
View file @ 78e874f9
...@@ -174,12 +174,10 @@ class Overview extends React.Component<{}, OverviewState> { ...@@ -174,12 +174,10 @@ class Overview extends React.Component<{}, OverviewState> {
/> />
</div> </div>
</div> </div>
<div className='overviewCommand1'> <Stack className='overviewCommand' horizontal>
<Command1 />
</div>
<div className='overviewCommand2'>
<Command2 /> <Command2 />
</div> <Command1 />
</Stack>
</div> </div>
</div> </div>
); );
......
ts/webui/src/components/modals/ExperimentSummaryPanel.tsx
View file @ 78e874f9
...@@ -39,7 +39,7 @@ class ExperimentSummaryPanel extends React.Component<ExpDrawerProps, ExpDrawerSt ...@@ -39,7 +39,7 @@ class ExperimentSummaryPanel extends React.Component<ExpDrawerProps, ExpDrawerSt
const interResultList = TRIALS.getMetricsList(); const interResultList = TRIALS.getMetricsList();
Object.keys(trialMessagesArr).map(item => { Object.keys(trialMessagesArr).map(item => {
// not deal with trial's hyperParameters // not deal with trial's hyperParameters
const trialId = trialMessagesArr[item].jobId; const trialId = trialMessagesArr[item].trialJobId;
// add intermediate result message // add intermediate result message
trialMessagesArr[item].intermediate = []; trialMessagesArr[item].intermediate = [];
Object.keys(interResultList).map(key => { Object.keys(interResultList).map(key => {
...@@ -94,7 +94,7 @@ class ExperimentSummaryPanel extends React.Component<ExpDrawerProps, ExpDrawerSt ...@@ -94,7 +94,7 @@ class ExperimentSummaryPanel extends React.Component<ExpDrawerProps, ExpDrawerSt
return ( return (
<Panel isOpen={true} hasCloseButton={false} isLightDismiss={true} onLightDismissClick={closeExpDrawer}> <Panel isOpen={true} hasCloseButton={false} isLightDismiss={true} onLightDismissClick={closeExpDrawer}>
<div className='panel'> <div className='panel'>
<div className='panelName'>Experiment summary</div> <div className='panelName'>Summary</div>
<MonacoEditor <MonacoEditor
width='100%' width='100%'
height={monacoEditorHeight} height={monacoEditorHeight}
......
ts/webui/src/components/overview/command/Command1.tsx
View file @ 78e874f9
import React from 'react'; import React from 'react';
import { EXPERIMENT } from '../../../static/datamodel'; import { EXPERIMENT } from '../../../static/datamodel';
import { rightEidtParam } from '../count/commonStyle';
import '../../../static/style/overview/command.scss'; import '../../../static/style/overview/command.scss';
export const Command1 = (): any => { export const Command1 = (): any => {
...@@ -33,7 +34,7 @@ export const Command1 = (): any => { ...@@ -33,7 +34,7 @@ export const Command1 = (): any => {
} }
return ( return (
<div className='basic'> <div className='basic' style={rightEidtParam}>
<div> <div>
<p className='command'>Training platform</p> <p className='command'>Training platform</p>
<div className='nowrap'>{EXPERIMENT.profile.params.trainingServicePlatform}</div> <div className='nowrap'>{EXPERIMENT.profile.params.trainingServicePlatform}</div>
......
ts/webui/src/components/overview/command/Command2.tsx
View file @ 78e874f9
import React from 'react'; import React from 'react';
import { TooltipHost, DirectionalHint } from '@fluentui/react'; import { TooltipHost, DirectionalHint } from '@fluentui/react';
import { EXPERIMENT } from '../../../static/datamodel'; import { EXPERIMENT } from '../../../static/datamodel';
import { leftProgress } from '../count/commonStyle';
import { TOOLTIP_BACKGROUND_COLOR } from '../../../static/const'; import { TOOLTIP_BACKGROUND_COLOR } from '../../../static/const';
import '../../../static/style/overview/command.scss'; import '../../../static/style/overview/command.scss';
...@@ -21,7 +22,7 @@ export const Command2 = (): any => { ...@@ -21,7 +22,7 @@ export const Command2 = (): any => {
} }
} }
return ( return (
<div className='basic'> <div className='basic' style={leftProgress}>
<p className='command'>Log directory</p> <p className='command'>Log directory</p>
<div className='nowrap'> <div className='nowrap'>
<TooltipHost <TooltipHost
......
ts/webui/src/components/overview/count/EditExperimentParam.tsx
View file @ 78e874f9
...@@ -168,7 +168,7 @@ export const EditExperimentParam = (): any => { ...@@ -168,7 +168,7 @@ export const EditExperimentParam = (): any => {
return ( return (
<React.Fragment> <React.Fragment>
<div className={`${editClassName} editparam`}> <div className={`${editClassName} editparam`}>
<span>{value.title}</span> <div className='title'>{value.title}</div>
<input <input
className={`${value.field} editparam-Input`} className={`${value.field} editparam-Input`}
ref={DurationInputRef} ref={DurationInputRef}
......
ts/webui/src/components/overview/count/ExpDuration.tsx
View file @ 78e874f9
...@@ -6,7 +6,7 @@ import { convertDuration, convertTimeAsUnit } from '../../../static/function'; ...@@ -6,7 +6,7 @@ import { convertDuration, convertTimeAsUnit } from '../../../static/function';
import { EditExperimentParam } from './EditExperimentParam'; import { EditExperimentParam } from './EditExperimentParam';
import { ExpDurationContext } from './ExpDurationContext'; import { ExpDurationContext } from './ExpDurationContext';
import { EditExpeParamContext } from './context'; import { EditExpeParamContext } from './context';
import { leftProgress, durationItem2, progressHeight } from './commonStyle'; import { leftProgress, rightEidtParam, progressHeight } from './commonStyle';
import '../../../static/style/overview/count.scss'; import '../../../static/style/overview/count.scss';
export const ExpDuration = (): any => ( export const ExpDuration = (): any => (
...@@ -46,7 +46,7 @@ export const ExpDuration = (): any => ( ...@@ -46,7 +46,7 @@ export const ExpDuration = (): any => (
<span>{`${maxExecDurationStr} ${maxDurationUnit}`}</span> <span>{`${maxExecDurationStr} ${maxDurationUnit}`}</span>
</div> </div>
</div> </div>
<div style={durationItem2}> <div style={rightEidtParam}>
<EditExpeParamContext.Provider <EditExpeParamContext.Provider
value={{ value={{
editType: CONTROLTYPE[0], editType: CONTROLTYPE[0],
......
ts/webui/src/components/overview/count/TrialCount.tsx
View file @ 78e874f9
...@@ -5,7 +5,7 @@ import { CONTROLTYPE, TOOLTIP_BACKGROUND_COLOR, MAX_TRIAL_NUMBERS } from '../../ ...@@ -5,7 +5,7 @@ import { CONTROLTYPE, TOOLTIP_BACKGROUND_COLOR, MAX_TRIAL_NUMBERS } from '../../
import { EditExperimentParam } from './EditExperimentParam'; import { EditExperimentParam } from './EditExperimentParam';
import { EditExpeParamContext } from './context'; import { EditExpeParamContext } from './context';
import { ExpDurationContext } from './ExpDurationContext'; import { ExpDurationContext } from './ExpDurationContext';
import { leftProgress, trialCountItem2, progressHeight } from './commonStyle'; import { leftProgress, rightEidtParam, progressHeight } from './commonStyle';
export const TrialCount = (): any => { export const TrialCount = (): any => {
const count = TRIALS.countStatus(); const count = TRIALS.countStatus();
...@@ -22,7 +22,7 @@ export const TrialCount = (): any => { ...@@ -22,7 +22,7 @@ export const TrialCount = (): any => {
const { updateOverviewPage } = value; const { updateOverviewPage } = value;
return ( return (
<React.Fragment> <React.Fragment>
<Stack horizontal horizontalAlign='space-between' className='ExpDuration'> <Stack horizontal className='ExpDuration'>
<div style={leftProgress}> <div style={leftProgress}>
<TooltipHost <TooltipHost
content={`${bar2.toString()} trials`} content={`${bar2.toString()} trials`}
...@@ -49,7 +49,36 @@ export const TrialCount = (): any => { ...@@ -49,7 +49,36 @@ export const TrialCount = (): any => {
<span>{maxTrialNum}</span> <span>{maxTrialNum}</span>
</div> </div>
</div> </div>
<div style={trialCountItem2}> </Stack>
<Stack horizontal className='marginTop'>
<div style={leftProgress}>
<Stack horizontal className='status-count' gap={60}>
<div>
<span>Running</span>
<p>{count.get('RUNNING')}</p>
</div>
<div>
<span>Succeeded</span>
<p>{count.get('SUCCEEDED')}</p>
</div>
<div>
<span>Stopped</span>
<p>{stoppedCount}</p>
</div>
</Stack>
<Stack horizontal className='status-count marginTop' gap={80}>
<div>
<span>Failed</span>
<p>{count.get('FAILED')}</p>
</div>
<div>
<span>Waiting</span>
<p>{count.get('WAITING')}</p>
</div>
</Stack>
</div>
<div style={rightEidtParam}>
<EditExpeParamContext.Provider <EditExpeParamContext.Provider
value={{ value={{
title: MAX_TRIAL_NUMBERS, title: MAX_TRIAL_NUMBERS,
...@@ -65,42 +94,22 @@ export const TrialCount = (): any => { ...@@ -65,42 +94,22 @@ export const TrialCount = (): any => {
<EditExperimentParam /> <EditExperimentParam />
</div> </div>
</EditExpeParamContext.Provider> </EditExpeParamContext.Provider>
<EditExpeParamContext.Provider <div className='concurrency'>
value={{ <EditExpeParamContext.Provider
title: 'Concurrency', value={{
field: 'trialConcurrency', title: 'Concurrency',
editType: CONTROLTYPE[2], field: 'trialConcurrency',
// maxExecDuration: EXPERIMENT.profile.params.maxExecDuration, editType: CONTROLTYPE[2],
maxExecDuration: '', // maxExecDuration: EXPERIMENT.profile.params.maxExecDuration,
maxTrialNum: EXPERIMENT.profile.params.maxTrialNum, maxExecDuration: '',
trialConcurrency: EXPERIMENT.profile.params.trialConcurrency, maxTrialNum: EXPERIMENT.profile.params.maxTrialNum,
updateOverviewPage trialConcurrency: EXPERIMENT.profile.params.trialConcurrency,
}} updateOverviewPage
> }}
<EditExperimentParam /> >
</EditExpeParamContext.Provider> <EditExperimentParam />
</div> </EditExpeParamContext.Provider>
</Stack> </div>
<Stack horizontal horizontalAlign='space-between' className='trialStatus'>
<div className='basic'>
<p>Running</p>
<div>{count.get('RUNNING')}</div>
</div>
<div className='basic'>
<p>Succeeded</p>
<div>{count.get('SUCCEEDED')}</div>
</div>
<div className='basic'>
<p>Stopped</p>
<div>{stoppedCount}</div>
</div>
<div className='basic'>
<p>Failed</p>
<div>{count.get('FAILED')}</div>
</div>
<div className='basic'>
<p>Waiting</p>
<div>{count.get('WAITING')}</div>
</div> </div>
</Stack> </Stack>
</React.Fragment> </React.Fragment>
......
ts/webui/src/components/overview/count/commonStyle.ts
View file @ 78e874f9
const leftProgress: React.CSSProperties = { const leftProgress: React.CSSProperties = {
width: '33%', width: '60%',
position: 'relative', position: 'relative'
top: 6
}; };
const durationItem2: React.CSSProperties = { const rightEidtParam: React.CSSProperties = {
width: '51.5%', paddingLeft: '9%',
paddingLeft: '15%' boxSizing: 'border-box'
}; };
const trialCountItem2: React.CSSProperties = {
width: '51.5%'
};
const progressHeight = 8; const progressHeight = 8;
export { leftProgress, durationItem2, trialCountItem2, progressHeight };
export { leftProgress, rightEidtParam, progressHeight };
ts/webui/src/components/overview/experiment/BasicInfo.tsx
View file @ 78e874f9
...@@ -23,11 +23,11 @@ export const ReBasicInfo = (): any => { ...@@ -23,11 +23,11 @@ export const ReBasicInfo = (): any => {
return ( return (
<div> <div>
<Stack horizontal horizontalAlign='space-between' className='mess'> <Stack horizontal horizontalAlign='space-between' className='marginTop'>
<div className='basic'> <div className='basic'>
<p>Name</p> <p>Name</p>
<div className='nowrap'>{EXPERIMENT.profile.params.experimentName}</div> <div className='nowrap'>{EXPERIMENT.profile.params.experimentName}</div>
<p className='margin'>ID</p> <p className='marginTop'>ID</p>
<div className='nowrap'>{EXPERIMENT.profile.id}</div> <div className='nowrap'>{EXPERIMENT.profile.id}</div>
</div> </div>
<div className='basic'> <div className='basic'>
...@@ -76,7 +76,7 @@ export const ReBasicInfo = (): any => { ...@@ -76,7 +76,7 @@ export const ReBasicInfo = (): any => {
<BestMetricContext.Consumer> <BestMetricContext.Consumer>
{(value): React.ReactNode => ( {(value): React.ReactNode => (
<Stack className='bestMetric'> <Stack className='bestMetric'>
<p className='margin'>Best metric</p> <p className='marginTop'>Best metric</p>
<div className={EXPERIMENT.status}> <div className={EXPERIMENT.status}>
{isNaN(value.bestAccuracy) ? 'N/A' : value.bestAccuracy.toFixed(6)} {isNaN(value.bestAccuracy) ? 'N/A' : value.bestAccuracy.toFixed(6)}
</div> </div>
...@@ -87,7 +87,7 @@ export const ReBasicInfo = (): any => { ...@@ -87,7 +87,7 @@ export const ReBasicInfo = (): any => {
<div className='basic'> <div className='basic'>
<p>Start time</p> <p>Start time</p>
<div className='nowrap'>{formatTimestamp(EXPERIMENT.profile.startTime)}</div> <div className='nowrap'>{formatTimestamp(EXPERIMENT.profile.startTime)}</div>
<p className='margin'>End time</p> <p className='marginTop'>End time</p>
<div className='nowrap'>{formatTimestamp(EXPERIMENT.profile.endTime)}</div> <div className='nowrap'>{formatTimestamp(EXPERIMENT.profile.endTime)}</div>
</div> </div>
</Stack> </Stack>
......
ts/webui/src/components/overview/table/SuccessTable.tsx
View file @ 78e874f9
...@@ -145,7 +145,7 @@ class SuccessTable extends React.Component<SuccessTableProps, SuccessTableState> ...@@ -145,7 +145,7 @@ class SuccessTable extends React.Component<SuccessTableProps, SuccessTableState>
key: 'id', key: 'id',
fieldName: 'id', fieldName: 'id',
minWidth: 60, minWidth: 60,
maxWidth: 118, maxWidth: 90,
isResizable: true, isResizable: true,
className: 'tableHead leftTitle', className: 'tableHead leftTitle',
data: 'string', data: 'string',
...@@ -155,8 +155,8 @@ class SuccessTable extends React.Component<SuccessTableProps, SuccessTableState> ...@@ -155,8 +155,8 @@ class SuccessTable extends React.Component<SuccessTableProps, SuccessTableState>
{ {
name: 'Duration', name: 'Duration',
key: 'duration', key: 'duration',
minWidth: 85, minWidth: 80,
maxWidth: 166, maxWidth: 120,
isResizable: true, isResizable: true,
fieldName: 'duration', fieldName: 'duration',
data: 'number', data: 'number',
...@@ -170,8 +170,8 @@ class SuccessTable extends React.Component<SuccessTableProps, SuccessTableState> ...@@ -170,8 +170,8 @@ class SuccessTable extends React.Component<SuccessTableProps, SuccessTableState>
{ {
name: 'Status', name: 'Status',
key: 'status', key: 'status',
minWidth: 98, minWidth: 88,
maxWidth: 160, maxWidth: 120,
isResizable: true, isResizable: true,
fieldName: 'status', fieldName: 'status',
onRender: (item: any): React.ReactNode => ( onRender: (item: any): React.ReactNode => (
......
ts/webui/src/components/slideNav/SlideNavBtns.tsx
View file @ 78e874f9
import React, { useState, useCallback } from 'react'; import React, { useState, useCallback } from 'react';
import { Stack } from '@fluentui/react'; import { Stack, DefaultButton, Icon } from '@fluentui/react';
import MediaQuery from 'react-responsive';
import TrialConfigPanel from './TrialConfigPanel'; import TrialConfigPanel from './TrialConfigPanel';
import LogPanel from '../modals/LogPanel'; import LogPanel from '../modals/LogPanel';
import IconButtonTemplate from './IconButtonTemplet'; import IconButtonTemplate from './IconButtonTemplet';
...@@ -28,9 +29,31 @@ export const SlideNavBtns = (): any => { ...@@ -28,9 +29,31 @@ export const SlideNavBtns = (): any => {
// right side nav buttons // right side nav buttons
<React.Fragment> <React.Fragment>
<Stack className='config'> <Stack className='config'>
<IconButtonTemplate icon='DocumentSearch' btuName='Search space' event={showSearchSpacePanel} /> <MediaQuery maxWidth={1799}>
<IconButtonTemplate icon='Archive' btuName='Config' event={showTrialConfigpPanel} /> <IconButtonTemplate icon='DocumentSearch' btuName='Search space' event={showSearchSpacePanel} />
<IconButtonTemplate icon='FilePDB' btuName='Log files' event={showLogPanel} /> <IconButtonTemplate icon='Archive' btuName='Config' event={showTrialConfigpPanel} />
<IconButtonTemplate icon='FilePDB' btuName='Log files' event={showLogPanel} />
</MediaQuery>
<MediaQuery minWidth={1798}>
<div className='container'>
<DefaultButton onClick={showSearchSpacePanel} className='maxScrBtn'>
<Icon iconName='DocumentSearch' />
<span className='margin'>Search space</span>
</DefaultButton>
</div>
<div className='container'>
<DefaultButton onClick={showTrialConfigpPanel} className='maxScrBtn configBtn'>
<Icon iconName='Archive' />
<span className='margin'>Config</span>
</DefaultButton>
</div>
<div className='container'>
<DefaultButton onClick={showLogPanel} className='maxScrBtn logBtn'>
<Icon iconName='FilePDB' />
<span className='margin'>Log files</span>
</DefaultButton>
</div>
</MediaQuery>
</Stack> </Stack>
{isShowConfigPanel && <TrialConfigPanel panelName={panelName} hideConfigPanel={hideConfigPanel} />} {isShowConfigPanel && <TrialConfigPanel panelName={panelName} hideConfigPanel={hideConfigPanel} />}
{/* the panel for dispatcher & nnimanager log message */} {/* the panel for dispatcher & nnimanager log message */}
......
ts/webui/src/static/model/trialmanager.ts
View file @ 78e874f9
...@@ -171,6 +171,7 @@ class TrialManager { ...@@ -171,6 +171,7 @@ class TrialManager {
let updated = false; let updated = false;
requestAxios(`${MANAGER_IP}/trial-jobs`) requestAxios(`${MANAGER_IP}/trial-jobs`)
.then(data => { .then(data => {
this.trialJobList = data;
for (const trialInfo of data as TrialJobInfo[]) { for (const trialInfo of data as TrialJobInfo[]) {
if (this.trials.has(trialInfo.trialJobId)) { if (this.trials.has(trialInfo.trialJobId)) {
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
......
ts/webui/src/static/style/overview/command.scss
View file @ 78e874f9
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
.basic { .basic {
.lineMargin { .lineMargin {
margin-top: 20px; margin-top: 24px;
font-weight: normal; font-weight: normal;
} }
} }
ts/webui/src/static/style/overview/count.scss
View file @ 78e874f9
$seriesIconMargin: 10px; $seriesIconMargin: 10px;
$margin: 24px;
.marginTop {
margin-top: $margin;
}
.ExpDuration { .ExpDuration {
margin-top: 20px; margin-top: $margin;
.maxTrialNum { .maxTrialNum {
margin-bottom: 10px; margin-bottom: 10px;
} }
} }
.exp-progress { .exp-progress {
margin-top: 16px; margin-top: 9px;
.bold {
font-weight: 500;
}
.bold { .joiner {
font-weight: 500; padding: 0 3px;
} }
}
.joiner { .status-count {
padding: 0 3px; span {
} font-size: 14px;
color: #8f8f8f;
}
p {
font-size: 16px;
font-weight: 500;
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: -17px; top: -4px;
} }
.concurrency {
.editparam {
margin-top: 5px;
}
}
.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: 0; left: 0;
}
.mess {
margin-top: 20px;
.basic p {
margin-top: 0;
}
p.margin {
margin-top: 20px;
}
}
.trialStatus {
margin-top: 8px;
} }
ts/webui/src/static/style/overview/overview.scss
View file @ 78e874f9
$boxPadding: 20px; $boxPadding: 24px;
$boxBorderRadius: 5px; $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: 93px; 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: 138px; height: 158px;
} }
.trialCount { .trialCount {
grid-row: 4 / 6; grid-row: 5 / 8;
margin-top: 65px; margin-top: -26px;
height: 239px; height: 273px;
} }
.overviewCommand1, .overviewCommand {
.overviewCommand2 { grid-column: 1 / 5;
grid-row-start: 8; grid-row-start: 8;
margin-top: -59px; margin-top: -50px;
margin-right: $boxGapPadding; height: 158px;
border-radius: 0; margin-right: $boxGapPadding;
} border-radius: $boxBorderRadius;
}
.overviewCommand1 {
grid-column: 1 / 5;
border-radius: $boxBorderRadius 0 0 $boxBorderRadius;
}
.overviewCommand2 {
grid-column: 2 / 5;
margin-right: $boxGapPadding;
padding-left: 30px;
border-radius: 0 $boxBorderRadius $boxBorderRadius 0;
}
} }
.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 {
line-height: 21px; line-height: 21px;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
p { p {
font-size: 14px; color: #8f8f8f;
color: #8f8f8f; font-size: 14px;
margin-top: 20px; font-weight: normal;
span { span {
color: #484848; color: #484848;
} }
} }
div { div {
font-size: 16px; font-size: 16px;
font-weight: 500; font-weight: 500;
color: #484848; color: #484848;
} }
.nowrap { .nowrap {
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
} }
.overviewBestMetric { .overviewBestMetric {
grid-column: 5 / 9; grid-column: 5 / 9;
grid-row: 1 / 9; grid-row: 1 / 10;
max-height: 736px; 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;
} }
.defaultMetricContainer { .defaultMetricContainer {
position: relative; position: relative;
.showMess { .showMess {
position: absolute; position: absolute;
top: 42%; top: 42%;
left: 48%; left: 48%;
} }
} }
ts/webui/src/static/style/overview/panel.scss
View file @ 78e874f9
$buttonBorderRadius: 23px; $buttonBorderRadius: 23px;
.config { .config {
position: fixed; position: fixed;
right: 0; right: 0;
z-index: 1000; z-index: 1000;
.ms-Button--default {
padding: 0 8px;
margin-bottom: 12px;
border: none;
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.08);
border-radius: $buttonBorderRadius 0 0 $buttonBorderRadius;
font-size: 12px;
text-align: left;
.ms-Button-label {
font-weight: normal;
}
}
.integralBtn { .ms-Button--default {
display: none; padding: 0 8px;
} margin-bottom: 12px;
border: none;
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.08);
border-radius: $buttonBorderRadius 0 0 $buttonBorderRadius;
font-size: 12px;
text-align: left;
.ms-Button-label {
font-weight: normal;
}
}
.integralBtn {
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;
} }
} }
&:hover { .maxScrBtn {
.icon { width: 150px;
display: none;
} &:hover {
color: #fff;
.integralBtn { border: 1px solid blue;
display: block; background-color: #0071bc;
color: #fff; }
border: 1px solid blue; }
background-color: #0071bc;
.configBtn i{
i { margin-left: -40px;
font-size: 14px;
}
}
} }
.logBtn i {
margin-left: -25px;
}
&:hover {
.icon {
display: none;
}
.integralBtn {
display: block;
color: #fff;
border: 1px solid blue;
background-color: #0071bc;
i {
font-size: 14px;
}
}
}
} }
.ms-Fabric { .ms-Fabric {
.ms-Panel-commands { .ms-Panel-commands {
margin: 0; margin: 0;
} }
} }
ts/webui/src/static/style/succTable.scss
View file @ 78e874f9
$tableHeight: 381px; $tableHeight: 432px;
.scrollPanel { .scrollPanel {
height: $tableHeight; height: $tableHeight;
......
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