Skip to content
This repository was archived by the owner on Oct 11, 2018. It is now read-only.

Streaming task ui #415

Open
wants to merge 7 commits into
base: master
Choose a base branch
from
Open

Streaming task ui #415

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
0afe717
ADDED: detail panel for task
mactanxin Jan 18, 2017
5386093
UPDATED: enable task ui
mactanxin Jan 18, 2017
5b3c751
UPDATED: new task ui with preset tabs and details
mactanxin Jan 18, 2017
6b72fbe
fixes scrolling on tasks section
joshuarule Jan 18, 2017
d0d074c
adds layout to tasks and adds title to details section
joshuarule Jan 18, 2017
2340869
DELETED: console.log
mactanxin Jan 19, 2017
81bedfd
UPDATED: tag name to queued
mactanxin Jan 20, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 3 additions & 4 deletions data/sections-descriptors.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,12 +46,11 @@
"index": 6,
"icon": "console"
},
"task": {
"tasks": {
"label": "Task",
"id": "task",
"id": "tasks",
"index": 7,
"icon": "container",
"isHidden": true
"icon": "container"
},
"calendar": {
"label": "Calendar",
Expand Down
5 changes: 5 additions & 0 deletions src/service/routing-service.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -170,6 +170,7 @@ export class RoutingService {
this.loadVmsRoutes();
this.loadContainersRoutes();
this.loadWizardRoutes();
this.loadTasksRoutes();
}

private loadCalendarRoutes() {
Expand Down Expand Up @@ -380,6 +381,10 @@ export class RoutingService {
(kerberosKeytabId) => this.accountsRoute.getKerberosKeytab(kerberosKeytabId, this.currentStacks.get('accounts')));
}

private loadTasksRoutes() {
crossroads.addRoute('/tasks', () => this.sectionRoute.getOld('tasks'));
}

private loadDashboardRoutes() {
crossroads.addRoute('/dashboard', () => this.sectionRoute.getOld('dashboard'));
}
Expand Down
6 changes: 3 additions & 3 deletions ui/main.reel/main.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,10 +45,10 @@
"element": {"#": "dashboard"}
}
},
"task": {
"tasks": {
"prototype": "ui/sections/task/inspectors/tasks.reel",
"properties": {
"element": {"#": "task"}
"element": {"#": "tasks"}
}
},
"console": {
Expand Down Expand Up @@ -142,7 +142,7 @@
<div data-arg="old" data-montage-id="substitution" class="Main-substitution">
<div data-arg="dashboard" data-montage-id="dashboard"></div>
<div data-arg="console" data-montage-id="console"></div>
<div data-arg="task" data-montage-id="task"></div>
<div data-arg="tasks" data-montage-id="tasks"></div>
<div data-arg="calendar" data-montage-id="calendar"></div>
<div data-arg="wizard" data-montage-id="wizard"></div>
</div>
Expand Down
4 changes: 4 additions & 0 deletions ui/sections/task/controls/table-task.reel/table-task.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,9 @@
"owner": {
"properties": {
"element": {"#": "owner"}
},
"bindings": {
"selectedRow": {"<-": "@table.selectedRow"}
}
},
"table": {
Expand All @@ -16,6 +19,7 @@
"element": {"#": "table"},
"delegate": {"@": "owner"},
"label": "Tasks",
"isSelectionEnabled": true,
"columns": [
{
"value": "ID",
Expand Down
34 changes: 34 additions & 0 deletions ui/sections/task/inspectors/tasks.reel/_tasks.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
.TasksInspector {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
}

.TasksInspector-table {
flex: 1;
display: flex;
flex-direction: column;
margin-bottom: 1rem;

& .TableReadOnly {
flex: 1;
display: flex;
flex-direction: column;
}

& .Table-content {
flex: 1;
display: flex;
flex-direction: column;
}

& .Table {
flex: 1;
display: flex;
flex-direction: column;
}

& .Table-caption { flex-shrink: 0; }
& .Table-header-group { flex-shrink: 0; }
}
86 changes: 86 additions & 0 deletions ui/sections/task/inspectors/tasks.reel/task-details.reel/task-details.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="task-details.css">
<script type="text/montage-serialization">
{
"owner": {
"properties": {
"element": {"#": "owner"}
}
},
"name": {
"prototype": "blue-shark/ui/field-text.reel",
"properties": {
"element": {"#": "name"},
"label": "Name"
},
"bindings": {
"value": {"<-": "@owner.object.name"}
}
},
"description": {
"prototype": "blue-shark/ui/field-text.reel",
"properties": {
"element": {"#": "description"},
"label": "Description"
},
"bindings": {
"value": {"<-": "@owner.object.description.message"}
}
},
"output": {
"prototype": "blue-shark/ui/field-text.reel",
"properties": {
"element": {"#": "output"},
"label": "Output"
},
"bindings": {
"value": {"<-": "@owner.object.output"}
}
},
"error": {
"prototype": "blue-shark/ui/field-text.reel",
"properties": {
"element": {"#": "error"},
"label": "Error"
},
"bindings": {
"value": {"<-": "@owner.object.error.message"}
}
},
"parent": {
"prototype": "blue-shark/ui/field-text.reel",
"properties": {
"element": {"#": "parent"},
"label": "Parent ID"
},
"bindings": {
"value": {"<-": "!!@owner.object.parent ? !!@owner.object.parent : 'none'"}
}
},
"title": {
"prototype": "ui/controls/inspector-section-title.reel",
"properties": {
"element": {"#": "title"},
"emptyTitle": "Task Details"
},
"bindings": {
"value": {"<-": "!!@owner.object.id ? 'Task #' + @owner.object.id : emptyTitle"}
}
}
}
</script>
</head>
<body>
<div data-montage-id="owner" class="TaskDetails">
<div data-montage-id="title"></div>
<div data-montage-id="name"></div>
<div data-montage-id="parent"></div>
<div data-montage-id="description"></div>
<div data-montage-id="error"></div>
<div data-montage-id="output"></div>
</div>
</body>
</html>
11 changes: 11 additions & 0 deletions ui/sections/task/inspectors/tasks.reel/task-details.reel/task-details.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
/**
* @module ui/sections/task/inspectors/tasks.reel/task-details.reel
*/
var Component = require("montage/ui/component").Component;

/**
* @class TaskDetails
* @extends Component
*/
exports.TaskDetails = Component.specialize(/** @lends TaskDetails# */ {
});
150 changes: 24 additions & 126 deletions ui/sections/task/inspectors/tasks.reel/tasks.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,111 +2,27 @@
<html>
<head>
<title></title>

<link rel="stylesheet" href="tasks.css">
<script type="text/montage-serialization">
{
"owner": {
"properties": {
"element": {"#": "owner"}
},
"listeners": [
{
"type": "action",
"listener": {"@": "owner"}
}
]
},
"inspector": {
"prototype": "ui/inspectors/inspector.reel",
"properties": {
"element": {"#": "inspector"},
"isFooterHidden": true
}
},
"taskIdValidator": {
"prototype": "core/converter/validator/integer-validator",
"properties": {
"floor": 1,
"errorMessage": "Port must be an integer"
}
},
"taskIdConverter": {
"prototype": "core/converter/string-to-integer-or-null-converter",
"properties": {
"validator": {"@": "taskIdValidator"}
}
},
"id": {
"prototype": "blue-shark/ui/field-text-input.reel",
"properties": {
"element": {"#": "id"},
"label": "id",
"converter" : {"@": "taskIdConverter"},
"placeholder": "e.g. 15"
},
"bindings": {
"value": {"<->": "@owner.filter.id"}
}
},
"name": {
"prototype": "blue-shark/ui/field-text-input.reel",
"properties": {
"element": {"#": "name"},
"label": "Type",
"placeholder": "e.g. volume.delete"
},
"bindings": {
"value": {"<->": "@owner.filter.name"}
}
},
"state": {
"prototype": "blue-shark/ui/field-select.reel",
"properties": {
"element": {"#": "state"},
"label": "Status"
},
"bindings": {
"options": {"<-": "[{label: '-', value: null}].concat(@owner.stateOptions)"},
"selectedValue": {"<->": "@owner.filter.state"}
}
},
"dateRagne": {
"prototype": "blue-shark/ui/field.reel",
"properties": {
"element": {"#": "dateRange"},
"label": "Date Range"
}
},
"started_after": {
"prototype": "blue-shark/ui/date.reel",
"properties": {
"element": {"#": "started_after"}
},
"bindings": {
"value": {"<->": "@owner.filter.started_after"}
"element": {"#": "owner"},
"views": [
{"label": "Queued", "value": "EXECUTING"},
{"label": "Failed", "value": "FAILED"},
{"label": "Finished", "value": "FINISHED"}
]
}
},
"finished_at": {
"prototype": "blue-shark/ui/date.reel",
"viewTabs": {
"prototype": "blue-shark/ui/tabs.reel",
"properties": {
"element": {"#": "finished_at"}
"element": {"#": "viewTabs"}
},
"bindings": {
"value": {"<->": "@owner.filter.finished_at"}
}
},
"apply": {
"prototype": "blue-shark/ui/button.reel",
"properties": {
"element": {"#": "apply"},
"value": "Apply Filters"
}
},
"clear": {
"prototype": "blue-shark/ui/button.reel",
"properties": {
"element": {"#": "clear"},
"value": "Clear Filters"
"options": {"<-": "@owner.views"},
"selection": {"<->": "@owner.currentView"}
}
},
"table": {
Expand All @@ -115,45 +31,27 @@
"element": {"#": "table"}
},
"bindings": {
"rows": {"<-": "@owner.tasks"}
"rows": {"<-": "@owner.entries.filter{state==@owner.currentView}"}
}
},
"filtersTitle": {
"prototype": "ui/controls/inspector-section-title.reel",
"details": {
"prototype": "./task-details.reel",
"properties": {
"element": {"#": "filtersTitle"},
"value": "Filter Tasks"
"element": {"#": "details"}
},
"bindings": {
"object": {"<-": "@table.selectedRow"}
}
}
}
</script>
</head>
<body>
<div data-montage-id="owner" class="TasksInspector">
<div data-montage-id="inspector">
<div>
<div data-montage-id="filtersTitle" class="flush-top"></div>
<div class="TasksInspector-filters g-margin-bottom--double col-1">
<div data-montage-id="id"></div>
<div data-montage-id="name"></div>
<div data-montage-id="state"></div>
<div data-montage-id="dateRange" class="TasksInspector-filters-dateRange">
<div class="flex-row flex-align--center g-margin-bottom--half">
<span class="TasksInspector-filters-dateRange-inputLabel">from:</span>
<div data-montage-id="started_after"></div>
</div>
<div class="flex-row flex-align--center">
<span class="TasksInspector-filters-dateRange-inputLabel">to:</span>
<div data-montage-id="finished_at"></div>
</div>
</div>
<div class="flex-row">
<button data-montage-id="apply"></button>
<button data-montage-id="clear" class="g-margin-left--half"></button>
</div>
</div>
<div data-montage-id="table"></div>
</div>
<div data-montage-id="owner" class="TasksInspector g-margin">
<div data-montage-id="viewTabs" class="Calendar-viewTabs g-margin-bottom"></div>
<div class="flex-column">
<div data-montage-id="table" class="TasksInspector-table"></div>
<div data-montage-id="details" class="TasksInspector-details"></div>
</div>
</div>
</body>
Expand Down
Loading