Skip to content

GitLab

Unverified Commit 4244d85a authored by Lijiaoa's avatar Lijiaoa Committed by GitHub
Browse files

update overview layout (#3046)

parent 1f1a2c1e
Hide whitespace changes
Inline Side-by-side
Showing with 279 additions and 265 deletions
ts/webui/src/App.scss
View file @ 4244d85a
...@@ -29,6 +29,8 @@ ...@@ -29,6 +29,8 @@
width: 87%; width: 87%;
margin: 0 auto; margin: 0 auto;
min-width: 1200px; min-width: 1200px;
/* nav bar: 56 + marginTop: 18 */
margin-top: 74px; margin-top: 74px;
margin-bottom: 30px; margin-bottom: 30px;
} }
......
ts/webui/src/components/Overview.tsx
View file @ 4244d85a
...@@ -13,8 +13,9 @@ import { TrialCount } from './overview/count/TrialCount'; ...@@ -13,8 +13,9 @@ import { TrialCount } from './overview/count/TrialCount';
import { Command1 } from './overview/command/Command1'; import { Command1 } from './overview/command/Command1';
import { Command2 } from './overview/command/Command2'; import { Command2 } from './overview/command/Command2';
import { TitleContext } from './overview/TitleContext'; import { TitleContext } from './overview/TitleContext';
import { itemStyle1, itemStyleSucceed, itemStyle2, entriesOption } from './overview/overviewConst'; import { itemStyleSucceed, entriesOption } from './overview/overviewConst';
import '../static/style/overview/overview.scss'; import '../static/style/overview/overview.scss';
import '../static/style/overview/topTrial.scss';
import '../static/style/logPath.scss'; import '../static/style/logPath.scss';
interface OverviewState { interface OverviewState {
...@@ -89,42 +90,40 @@ class Overview extends React.Component<{}, OverviewState> { ...@@ -89,42 +90,40 @@ class Overview extends React.Component<{}, OverviewState> {
</BestMetricContext.Provider> </BestMetricContext.Provider>
</div> </div>
{/* duration & trial numbers */} {/* duration & trial numbers */}
<div className='overviewProgress'> <div className='duration'>
<div className='duration'> <TitleContext.Provider value={{ text: 'Duration', icon: 'Timer' }}>
<TitleContext.Provider value={{ text: 'Duration', icon: 'Timer' }}> <Title />
<Title /> </TitleContext.Provider>
</TitleContext.Provider> <ExpDurationContext.Provider
<ExpDurationContext.Provider value={{
value={{ maxExecDuration,
maxExecDuration, execDuration,
execDuration, updateOverviewPage,
updateOverviewPage, maxDurationUnit,
maxDurationUnit, changeMaxDurationUnit
changeMaxDurationUnit }}
}} >
> <ExpDuration />
<ExpDuration /> </ExpDurationContext.Provider>
</ExpDurationContext.Provider> </div>
</div> <div className='trialCount'>
<div className='trialCount'> <TitleContext.Provider value={{ text: 'Trial numbers', icon: 'NumberSymbol' }}>
<TitleContext.Provider value={{ text: 'Trial numbers', icon: 'NumberSymbol' }}> <Title />
<Title /> </TitleContext.Provider>
</TitleContext.Provider> <ExpDurationContext.Provider
<ExpDurationContext.Provider value={{
value={{ maxExecDuration,
maxExecDuration, execDuration,
execDuration, updateOverviewPage,
updateOverviewPage, maxDurationUnit,
maxDurationUnit, changeMaxDurationUnit
changeMaxDurationUnit }}
}} >
> <TrialCount />
<TrialCount /> </ExpDurationContext.Provider>
</ExpDurationContext.Provider>
</div>
</div> </div>
{/* table */} {/* table */}
<div className='overviewTable'> <div className='overviewBestMetric'>
<Stack horizontal> <Stack horizontal>
<div style={itemStyleSucceed}> <div style={itemStyleSucceed}>
<TitleContext.Provider value={{ text: 'Top trials', icon: 'BulletedList' }}> <TitleContext.Provider value={{ text: 'Top trials', icon: 'BulletedList' }}>
...@@ -167,6 +166,9 @@ class Overview extends React.Component<{}, OverviewState> { ...@@ -167,6 +166,9 @@ class Overview extends React.Component<{}, OverviewState> {
</Stack> </Stack>
</div> </div>
</Stack> </Stack>
<div className='overviewChart'>
<Accuracy accuracyData={accuracyGraphData} accNodata={noDataMessage} />
</div>
<SuccessTable trialIds={bestTrials.map(trial => trial.info.trialJobId)} /> <SuccessTable trialIds={bestTrials.map(trial => trial.info.trialJobId)} />
</div> </div>
<div className='overviewCommand1'> <div className='overviewCommand1'>
...@@ -175,24 +177,6 @@ class Overview extends React.Component<{}, OverviewState> { ...@@ -175,24 +177,6 @@ class Overview extends React.Component<{}, OverviewState> {
<div className='overviewCommand2'> <div className='overviewCommand2'>
<Command2 /> <Command2 />
</div> </div>
<div className='overviewChart'>
<Stack horizontal>
<div style={itemStyle1}>
<TitleContext.Provider
value={{ text: 'Trial metric chart', icon: 'HomeGroup' }}
>
<Title />
</TitleContext.Provider>
</div>
<div style={itemStyle2}>
<Stack className='maxmin' horizontal>
<div className='circle' />
<div>{`Top ${this.context.metricGraphMode}imal trials`}</div>
</Stack>
</div>
</Stack>
<Accuracy accuracyData={accuracyGraphData} accNodata={noDataMessage} height={380} />
</div>
</div> </div>
</div> </div>
); );
...@@ -219,8 +203,8 @@ class Overview extends React.Component<{}, OverviewState> { ...@@ -219,8 +203,8 @@ class Overview extends React.Component<{}, OverviewState> {
return { return {
// support max show 0.0000000 // support max show 0.0000000
grid: { grid: {
left: 67, x: 60,
right: 40 y: 40
}, },
tooltip: { tooltip: {
trigger: 'item' trigger: 'item'
......
ts/webui/src/components/overview/Accuracy.tsx
View file @ 4244d85a
...@@ -11,7 +11,6 @@ import 'echarts/lib/component/title'; ...@@ -11,7 +11,6 @@ import 'echarts/lib/component/title';
interface AccuracyProps { interface AccuracyProps {
accuracyData: object; accuracyData: object;
accNodata: string; accNodata: string;
height: number;
} }
class Accuracy extends React.Component<AccuracyProps, {}> { class Accuracy extends React.Component<AccuracyProps, {}> {
...@@ -20,17 +19,10 @@ class Accuracy extends React.Component<AccuracyProps, {}> { ...@@ -20,17 +19,10 @@ class Accuracy extends React.Component<AccuracyProps, {}> {
} }
render(): React.ReactNode { render(): React.ReactNode {
const { accNodata, accuracyData, height } = this.props; const { accNodata, accuracyData } = this.props;
return ( return (
<div style={{ position: 'relative' }}> <div className='defaultMetricContainer'>
<ReactEcharts <ReactEcharts option={accuracyData} theme='my_theme' />
option={accuracyData}
style={{
height: height,
margin: '0 auto'
}}
theme='my_theme'
/>
<div className='showMess'>{accNodata}</div> <div className='showMess'>{accNodata}</div>
</div> </div>
); );
......
ts/webui/src/components/overview/count/ExpDuration.tsx
View file @ 4244d85a
...@@ -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 { durationItem1, durationItem2 } from './commonStyle'; import { leftProgress, durationItem2, progressHeight } from './commonStyle';
import '../../../static/style/overview/count.scss'; import '../../../static/style/overview/count.scss';
export const ExpDuration = (): any => ( export const ExpDuration = (): any => (
...@@ -19,7 +19,7 @@ export const ExpDuration = (): any => ( ...@@ -19,7 +19,7 @@ export const ExpDuration = (): any => (
const maxExecDurationStr = convertTimeAsUnit(maxDurationUnit, maxExecDuration).toString(); const maxExecDurationStr = convertTimeAsUnit(maxDurationUnit, maxExecDuration).toString();
return ( return (
<Stack horizontal className='ExpDuration'> <Stack horizontal className='ExpDuration'>
<div style={durationItem1}> <div style={leftProgress}>
<TooltipHost <TooltipHost
content={`${convertDuration(tooltip)} remaining`} content={`${convertDuration(tooltip)} remaining`}
directionalHint={DirectionalHint.bottomCenter} directionalHint={DirectionalHint.bottomCenter}
...@@ -33,7 +33,11 @@ export const ExpDuration = (): any => ( ...@@ -33,7 +33,11 @@ export const ExpDuration = (): any => (
} }
}} }}
> >
<ProgressIndicator className={EXPERIMENT.status} percentComplete={percent} barHeight={15} /> <ProgressIndicator
className={EXPERIMENT.status}
percentComplete={percent}
barHeight={progressHeight}
/>
</TooltipHost> </TooltipHost>
{/* execDuration / maxDuration: 20min / 1h */} {/* execDuration / maxDuration: 20min / 1h */}
<div className='exp-progress'> <div className='exp-progress'>
......
ts/webui/src/components/overview/count/TrialCount.tsx
View file @ 4244d85a
...@@ -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 { trialCountItem1, trialCountItem2 } from './commonStyle'; import { leftProgress, trialCountItem2, progressHeight } from './commonStyle';
export const TrialCount = (): any => { export const TrialCount = (): any => {
const count = TRIALS.countStatus(); const count = TRIALS.countStatus();
...@@ -23,9 +23,9 @@ export const TrialCount = (): any => { ...@@ -23,9 +23,9 @@ export const TrialCount = (): any => {
return ( return (
<React.Fragment> <React.Fragment>
<Stack horizontal horizontalAlign='space-between' className='ExpDuration'> <Stack horizontal horizontalAlign='space-between' className='ExpDuration'>
<div style={trialCountItem1}> <div style={leftProgress}>
<TooltipHost <TooltipHost
content={bar2.toString()} content={`${bar2.toString()} trials`}
directionalHint={DirectionalHint.bottomCenter} directionalHint={DirectionalHint.bottomCenter}
tooltipProps={{ tooltipProps={{
calloutProps: { calloutProps: {
...@@ -40,7 +40,7 @@ export const TrialCount = (): any => { ...@@ -40,7 +40,7 @@ export const TrialCount = (): any => {
<ProgressIndicator <ProgressIndicator
className={EXPERIMENT.status} className={EXPERIMENT.status}
percentComplete={bar2Percent} percentComplete={bar2Percent}
barHeight={15} barHeight={progressHeight}
/> />
</TooltipHost> </TooltipHost>
<div className='exp-progress'> <div className='exp-progress'>
...@@ -81,7 +81,7 @@ export const TrialCount = (): any => { ...@@ -81,7 +81,7 @@ export const TrialCount = (): any => {
</EditExpeParamContext.Provider> </EditExpeParamContext.Provider>
</div> </div>
</Stack> </Stack>
<Stack horizontal horizontalAlign='space-between' className='mess'> <Stack horizontal horizontalAlign='space-between' className='trialStatus'>
<div className='basic'> <div className='basic'>
<p>Running</p> <p>Running</p>
<div>{count.get('RUNNING')}</div> <div>{count.get('RUNNING')}</div>
......
ts/webui/src/components/overview/count/commonStyle.ts
View file @ 4244d85a
const durationItem1: React.CSSProperties = { const leftProgress: React.CSSProperties = {
width: '33%' width: '33%',
position: 'relative',
top: 6
}; };
const durationItem2: React.CSSProperties = { const durationItem2: React.CSSProperties = {
width: '52%', width: '51.5%',
paddingLeft: '15%' paddingLeft: '15%'
}; };
const trialCountItem1: React.CSSProperties = {
width: '33%'
};
const trialCountItem2: React.CSSProperties = { const trialCountItem2: React.CSSProperties = {
width: '52%' width: '51.5%'
}; };
const progressHeight = 8;
export { durationItem1, durationItem2, trialCountItem1, trialCountItem2 }; export { leftProgress, durationItem2, trialCountItem2, progressHeight };
ts/webui/src/components/overview/experiment/BasicInfo.tsx
View file @ 4244d85a
...@@ -23,76 +23,74 @@ export const ReBasicInfo = (): any => { ...@@ -23,76 +23,74 @@ export const ReBasicInfo = (): any => {
return ( return (
<div> <div>
<div className='basic'> <Stack horizontal horizontalAlign='space-between' className='mess'>
<p> <div className='basic'>
ID: <span>{EXPERIMENT.profile.id}</span> <p>Name</p>
</p> <div className='nowrap'>{EXPERIMENT.profile.params.experimentName}</div>
<div>{EXPERIMENT.profile.params.experimentName}</div> <p className='margin'>ID</p>
</div> <div className='nowrap'>{EXPERIMENT.profile.id}</div>
<div className='basic'> </div>
<p>Status</p> <div className='basic'>
<Stack horizontal className='status'> <p>Status</p>
<span className={`${EXPERIMENT.status} status-text`}>{EXPERIMENT.status}</span> <Stack horizontal className='status'>
{EXPERIMENT.status === 'ERROR' ? ( <span className={`${EXPERIMENT.status} status-text`}>{EXPERIMENT.status}</span>
<div> {EXPERIMENT.status === 'ERROR' ? (
<div className={styles.buttonArea} ref={ref}> <div>
<IconButton <div className={styles.buttonArea} ref={ref}>
iconProps={{ iconName: 'info' }} <IconButton
onClick={isCalloutVisible ? onDismiss : showCallout} iconProps={{ iconName: 'info' }}
/> onClick={isCalloutVisible ? onDismiss : showCallout}
</div> />
{isCalloutVisible && ( </div>
<Callout {isCalloutVisible && (
className={styles.callout} <Callout
ariaLabelledBy={labelId} className={styles.callout}
ariaDescribedBy={descriptionId} ariaLabelledBy={labelId}
role='alertdialog' ariaDescribedBy={descriptionId}
gapSpace={0} role='alertdialog'
target={ref} gapSpace={0}
onDismiss={onDismiss} target={ref}
setInitialFocus={true} onDismiss={onDismiss}
> setInitialFocus={true}
<div className={styles.header}> >
<p className={styles.title} id={labelId} style={{ color: '#333' }}> <div className={styles.header}>
Error <p className={`${styles.title} color`} id={labelId}>
</p> Error
</div> </p>
<div className={styles.inner}> </div>
<p className={styles.subtext} id={descriptionId} style={{ color: '#333' }}> <div className={styles.inner}>
{EXPERIMENT.error} <p className={`${styles.subtext} color`} id={descriptionId}>
</p> {EXPERIMENT.error}
<div className={styles.actions}> </p>
<Link className={styles.link} onClick={ShowLogDrawer}> <div className={styles.actions}>
Learn about <Link className={styles.link} onClick={ShowLogDrawer}>
</Link> Learn about
</Link>
</div>
</div> </div>
</div> </Callout>
</Callout> )}
)}
</div>
) : null}
</Stack>
</div>
<div className='basic'>
<BestMetricContext.Consumer>
{(value): React.ReactNode => (
<Stack className='bestMetric'>
<p>Best metric</p>
<div className={EXPERIMENT.status}>
{isNaN(value.bestAccuracy) ? 'N/A' : value.bestAccuracy.toFixed(6)}
</div> </div>
</Stack> ) : null}
)} </Stack>
</BestMetricContext.Consumer> <BestMetricContext.Consumer>
</div> {(value): React.ReactNode => (
<div className='basic'> <Stack className='bestMetric'>
<p>Start time</p> <p className='margin'>Best metric</p>
<div className='nowrap'>{formatTimestamp(EXPERIMENT.profile.startTime)}</div> <div className={EXPERIMENT.status}>
</div> {isNaN(value.bestAccuracy) ? 'N/A' : value.bestAccuracy.toFixed(6)}
<div className='basic'> </div>
<p>End time</p> </Stack>
<div className='nowrap'>{formatTimestamp(EXPERIMENT.profile.endTime)}</div> )}
</div> </BestMetricContext.Consumer>
</div>
<div className='basic'>
<p>Start time</p>
<div className='nowrap'>{formatTimestamp(EXPERIMENT.profile.startTime)}</div>
<p className='margin'>End time</p>
<div className='nowrap'>{formatTimestamp(EXPERIMENT.profile.endTime)}</div>
</div>
</Stack>
{/* learn about click -> default active key is dispatcher. */} {/* learn about click -> default active key is dispatcher. */}
{isShowLogDrawer ? <LogDrawer closeDrawer={closeLogDrawer} activeTab='dispatcher' /> : null} {isShowLogDrawer ? <LogDrawer closeDrawer={closeLogDrawer} activeTab='dispatcher' /> : null}
</div> </div>
......
ts/webui/src/components/overview/table/SuccessTable.tsx
View file @ 4244d85a
import * as React from 'react'; import * as React from 'react';
import { DetailsList, IDetailsListProps, IColumn } from '@fluentui/react'; import {
DetailsList,
IDetailsListProps,
IColumn,
IRenderFunction,
IDetailsHeaderProps,
Sticky,
StickyPositionType,
ScrollablePane,
ScrollbarVisibility
} from '@fluentui/react';
import DefaultMetric from '../../public-child/DefaultMetric'; import DefaultMetric from '../../public-child/DefaultMetric';
import Details from './Details'; import Details from './Details';
import { convertDuration } from '../../../static/function'; import { convertDuration } from '../../../static/function';
...@@ -74,8 +84,8 @@ class SuccessTable extends React.Component<SuccessTableProps, SuccessTableState> ...@@ -74,8 +84,8 @@ class SuccessTable extends React.Component<SuccessTableProps, SuccessTableState>
name: 'Trial No.', name: 'Trial No.',
key: 'sequenceId', key: 'sequenceId',
fieldName: 'sequenceId', // required! fieldName: 'sequenceId', // required!
minWidth: 50, minWidth: 65,
maxWidth: 87, maxWidth: 119,
isResizable: true, isResizable: true,
data: 'number', data: 'number',
onColumnClick: this.onColumnClick, onColumnClick: this.onColumnClick,
...@@ -85,8 +95,8 @@ class SuccessTable extends React.Component<SuccessTableProps, SuccessTableState> ...@@ -85,8 +95,8 @@ class SuccessTable extends React.Component<SuccessTableProps, SuccessTableState>
name: 'ID', name: 'ID',
key: 'id', key: 'id',
fieldName: 'id', fieldName: 'id',
minWidth: 50, minWidth: 65,
maxWidth: 87, maxWidth: 119,
isResizable: true, isResizable: true,
className: 'tableHead leftTitle', className: 'tableHead leftTitle',
data: 'string', data: 'string',
...@@ -96,8 +106,8 @@ class SuccessTable extends React.Component<SuccessTableProps, SuccessTableState> ...@@ -96,8 +106,8 @@ class SuccessTable extends React.Component<SuccessTableProps, SuccessTableState>
{ {
name: 'Duration', name: 'Duration',
key: 'duration', key: 'duration',
minWidth: 65, minWidth: 90,
maxWidth: 150, maxWidth: 166,
isResizable: true, isResizable: true,
fieldName: 'duration', fieldName: 'duration',
data: 'number', data: 'number',
...@@ -111,8 +121,8 @@ class SuccessTable extends React.Component<SuccessTableProps, SuccessTableState> ...@@ -111,8 +121,8 @@ class SuccessTable extends React.Component<SuccessTableProps, SuccessTableState>
{ {
name: 'Status', name: 'Status',
key: 'status', key: 'status',
minWidth: 80, minWidth: 108,
maxWidth: 150, maxWidth: 160,
isResizable: true, isResizable: true,
fieldName: 'status', fieldName: 'status',
onRender: (item: any): React.ReactNode => ( onRender: (item: any): React.ReactNode => (
...@@ -123,8 +133,8 @@ class SuccessTable extends React.Component<SuccessTableProps, SuccessTableState> ...@@ -123,8 +133,8 @@ class SuccessTable extends React.Component<SuccessTableProps, SuccessTableState>
name: 'Default metric', name: 'Default metric',
key: 'accuracy', key: 'accuracy',
fieldName: 'accuracy', fieldName: 'accuracy',
minWidth: 100, minWidth: 108,
maxWidth: 160, maxWidth: 166,
isResizable: true, isResizable: true,
data: 'number', data: 'number',
onColumnClick: this.onColumnClick, onColumnClick: this.onColumnClick,
...@@ -132,6 +142,20 @@ class SuccessTable extends React.Component<SuccessTableProps, SuccessTableState> ...@@ -132,6 +142,20 @@ class SuccessTable extends React.Component<SuccessTableProps, SuccessTableState>
} }
]; ];
onRenderDetailsHeader: IRenderFunction<IDetailsHeaderProps> = (props, defaultRender) => {
if (!props) {
return null;
}
return (
<Sticky stickyPosition={StickyPositionType.Header} isScrollSynced>
{// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
defaultRender!({
...props
})}
</Sticky>
);
};
setInnerWidth = (): void => { setInnerWidth = (): void => {
this.setState(() => ({ innerWidth: window.innerWidth })); this.setState(() => ({ innerWidth: window.innerWidth }));
}; };
...@@ -156,15 +180,18 @@ class SuccessTable extends React.Component<SuccessTableProps, SuccessTableState> ...@@ -156,15 +180,18 @@ class SuccessTable extends React.Component<SuccessTableProps, SuccessTableState>
return ( return (
<div id='succTable'> <div id='succTable'>
<DetailsList <ScrollablePane className='scrollPanel' scrollbarVisibility={ScrollbarVisibility.auto}>
columns={columns} <DetailsList
items={source} columns={columns}
setKey='set' items={source}
compact={true} setKey='set'
onRenderRow={this.onRenderRow} compact={true}
selectionMode={0} // close selector function onRenderRow={this.onRenderRow}
className='succTable' onRenderDetailsHeader={this.onRenderDetailsHeader}
/> selectionMode={0} // close selector function
className='succTable'
/>
</ScrollablePane>
{isNoneData && <div className='succTable-tooltip'>{this.tooltipStr}</div>} {isNoneData && <div className='succTable-tooltip'>{this.tooltipStr}</div>}
</div> </div>
); );
......
ts/webui/src/static/style/overview/count.scss
View file @ 4244d85a
$seriesIconMargin: 8px; $seriesIconMargin: 10px;
.ExpDuration { .ExpDuration {
margin-top: 28px; margin-top: 20px;
span:hover { span:hover {
cursor: pointer; cursor: pointer;
...@@ -13,7 +13,7 @@ $seriesIconMargin: 8px; ...@@ -13,7 +13,7 @@ $seriesIconMargin: 8px;
} }
.exp-progress { .exp-progress {
margin-top: 10px; margin-top: 16px;
.bold { .bold {
font-weight: 500; font-weight: 500;
...@@ -57,17 +57,17 @@ $seriesIconMargin: 8px; ...@@ -57,17 +57,17 @@ $seriesIconMargin: 8px;
} }
&-dropdown { &-dropdown {
width: 48px; 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;
}
}
.ExpDuration .series .confirm { .ms-Dropdown-title {
margin: 0 6px; padding-right: 0;
}
}
} }
.series { .series {
...@@ -114,4 +114,12 @@ $seriesIconMargin: 8px; ...@@ -114,4 +114,12 @@ $seriesIconMargin: 8px;
.basic p { .basic p {
margin-top: 0; margin-top: 0;
} }
p.margin {
margin-top: 20px;
}
}
.trialStatus {
margin-top: 8px;
} }
ts/webui/src/static/style/overview/overview.scss
View file @ 4244d85a
...@@ -4,8 +4,8 @@ $boxGapPadding: 10px; ...@@ -4,8 +4,8 @@ $boxGapPadding: 10px;
.wrapper { .wrapper {
display: grid; display: grid;
grid-template-columns: repeat(9, 1fr); grid-template-columns: repeat(8, 1fr);
grid-auto-rows: 97px; grid-auto-rows: 93px;
> div { > div {
background: #fff; background: #fff;
...@@ -14,61 +14,63 @@ $boxGapPadding: 10px; ...@@ -14,61 +14,63 @@ $boxGapPadding: 10px;
box-sizing: border-box; box-sizing: border-box;
} }
.overviewProgress { .duration,
grid-column: 2 / 6; .trialCount {
grid-row: 1 / 5; grid-column: 1 / 5;
display: grid; background: #fff;
grid-auto-rows: 70px; padding: $boxPadding;
margin: 0 $boxGapPadding; border-radius: $boxBorderRadius;
padding: 0; box-sizing: border-box;
background: transparent; margin-top: $boxGapPadding;
.duration,
.trialCount {
background: #fff;
padding: $boxPadding;
border-radius: $boxBorderRadius;
box-sizing: border-box;
/* for alert message tooltip position */
position: relative;
}
.duration { /* for alert message tooltip position */
// grid-row: 1 / 3; position: relative;
height: 139px; }
}
.trialCount { .duration {
margin-top: 79px; grid-row: 3 / 5;
height: 239px; height: 138px;
} }
.trialCount {
grid-row: 4 / 6;
margin-top: 65px;
height: 239px;
} }
.overviewCommand1, .overviewCommand1,
.overviewCommand2 { .overviewCommand2 {
grid-row-start: 8;
margin-top: -59px;
margin-right: $boxGapPadding;
border-radius: 0; border-radius: 0;
} }
.overviewCommand1 { .overviewCommand1 {
grid-column-start: 1; grid-column: 1 / 5;
border-radius: $boxBorderRadius 0 0 $boxBorderRadius; border-radius: $boxBorderRadius 0 0 $boxBorderRadius;
} }
.overviewCommand2 { .overviewCommand2 {
grid-column: 2 / 6; grid-column: 2 / 5;
margin-right: 10px; margin-right: $boxGapPadding;
padding-left: 30px; padding-left: 30px;
border-radius: 0 $boxBorderRadius $boxBorderRadius 0; border-radius: 0 $boxBorderRadius $boxBorderRadius 0;
} }
} }
.overviewBasicInfo { .overviewBasicInfo {
grid-column-start: 1; grid-column: 1 / 5;
grid-row: 1 / 5; grid-row: 1 / 3;
z-index: 2; z-index: 2;
} }
.overviewBasicInfo,
.duration,
.trialCount {
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;
...@@ -96,9 +98,10 @@ $boxGapPadding: 10px; ...@@ -96,9 +98,10 @@ $boxGapPadding: 10px;
} }
} }
.overviewTable { .overviewBestMetric {
grid-column: 6 / 10; grid-column: 5 / 9;
grid-row: 1 / 11; grid-row: 1 / 9;
max-height: 736px;
overflow: hidden; overflow: hidden;
.topTrialTitle { .topTrialTitle {
...@@ -114,43 +117,33 @@ $boxGapPadding: 10px; ...@@ -114,43 +117,33 @@ $boxGapPadding: 10px;
} }
.mincenter { .mincenter {
margin: 0 13px 0 10px; margin: 0 13px 0 $boxGapPadding;
} }
.chooseEntry { .chooseEntry {
margin-right: 10px; margin-right: $boxGapPadding;
line-height: 30px; line-height: 30px;
} }
} }
.overviewCommand1, .overviewCommand1,
.overviewCommand2 { .overviewCommand2 {
grid-row: 7 / 9;
height: 144px; height: 144px;
overflow: hidden; overflow: hidden;
margin-top: 10px; margin-top: $boxGapPadding;
} }
$circle: 10px;
$bgblue: #0071bc;
.overviewChart { .overviewChart {
grid-column: 1 / 6; margin-top: 20px;
grid-row: 7 / 11;
margin-right: $boxGapPadding;
margin-top: -29px;
.circle {
width: $circle;
height: $circle;
border-radius: 50%;
background-color: $bgblue;
margin-top: 6px;
margin-right: 18px;
}
} }
.showMess { .defaultMetricContainer {
position: absolute; position: relative;
top: 42%;
left: 48%; .showMess {
position: absolute;
top: 42%;
left: 48%;
}
} }
ts/webui/src/static/style/overview/overviewTitle.scss
View file @ 4244d85a
$iconPaddingVal: 20px; $iconPaddingVal: 10px;
.panelTitle { .panelTitle {
span { span {
...@@ -9,7 +9,7 @@ $iconPaddingVal: 20px; ...@@ -9,7 +9,7 @@ $iconPaddingVal: 20px;
i { i {
font-size: 24px; font-size: 24px;
margin-right: 20px; margin-right: $iconPaddingVal;
color: #545454; color: #545454;
} }
} }
...@@ -18,22 +18,3 @@ $iconPaddingVal: 20px; ...@@ -18,22 +18,3 @@ $iconPaddingVal: 20px;
#tabsty .anticon { #tabsty .anticon {
margin-right: 0; margin-right: 0;
} }
.top10bg {
.top10Title {
width: 160px;
}
.title {
border-left: 2px solid #fff;
}
.minTitle {
// margin-right: $iconPaddingVal;
border-right: 2px solid #fff;
}
.title:hover {
cursor: pointer;
}
}
ts/webui/src/static/style/overview/topTrial.scss 0 → 100644
View file @ 4244d85a
$circle: 10px;
$bgblue: #0071bc;
.maxmin {
margin-top: 40px;
.circle {
width: $circle;
height: $circle;
border-radius: 50%;
background-color: $bgblue;
margin-top: 6px;
margin-right: 18px;
}
}
ts/webui/src/static/style/progress/progress.scss
View file @ 4244d85a
...@@ -6,7 +6,10 @@ ...@@ -6,7 +6,10 @@
.status-text { .status-text {
display: inline-block; display: inline-block;
line-height: 30px; }
.color {
color: #333;
} }
} }
...@@ -60,7 +63,6 @@ ...@@ -60,7 +63,6 @@
/* office-fabric-ui progressIndicator */ /* office-fabric-ui progressIndicator */
.ms-ProgressIndicator-itemProgress { .ms-ProgressIndicator-itemProgress {
padding: 0; padding: 0;
border: 2px solid #e6e6e6;
} }
.cursor, .cursor,
......
ts/webui/src/static/style/succTable.scss
View file @ 4244d85a
$tableHeight: 381px;
.scrollPanel {
height: $tableHeight;
}
#succTable { #succTable {
min-height: 400px; height: $tableHeight;
max-height: 1000px;
overflow-y: auto;
position: relative; position: relative;
top: -10px;
.ms-DetailsHeader {
padding-top: 0;
}
.succTable-tooltip { .succTable-tooltip {
width: 90%; width: 90%;
......
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