From 09596c3c5a6a2a44675f170106bb38746229e02a Mon Sep 17 00:00:00 2001 From: Georgios Andreadis Date: Sat, 23 Sep 2017 09:48:38 +0200 Subject: Remove old frontend --- src/scripts/controllers/simulation/chart.ts | 241 ----------------- src/scripts/controllers/simulation/statecache.ts | 321 ----------------------- src/scripts/controllers/simulation/taskview.ts | 64 ----- src/scripts/controllers/simulation/timeline.ts | 161 ------------ 4 files changed, 787 deletions(-) delete mode 100644 src/scripts/controllers/simulation/chart.ts delete mode 100644 src/scripts/controllers/simulation/statecache.ts delete mode 100644 src/scripts/controllers/simulation/taskview.ts delete mode 100644 src/scripts/controllers/simulation/timeline.ts (limited to 'src/scripts/controllers/simulation') diff --git a/src/scripts/controllers/simulation/chart.ts b/src/scripts/controllers/simulation/chart.ts deleted file mode 100644 index 1b67934b..00000000 --- a/src/scripts/controllers/simulation/chart.ts +++ /dev/null @@ -1,241 +0,0 @@ -import * as c3 from "c3"; -import {InteractionLevel, MapController} from "../mapcontroller"; -import {ColorRepresentation, SimulationController} from "../simulationcontroller"; -import {Util} from "../../util"; - - -export interface IStateColumn { - loadFractions: string[] | number[]; - inUseMemoryMb: string[] | number[]; - temperatureC: string[] | number[]; -} - - -export class ChartController { - public roomSeries: { [key: number]: IStateColumn }; - public rackSeries: { [key: number]: IStateColumn }; - public machineSeries: { [key: number]: IStateColumn }; - public chart: c3.ChartAPI; - public machineChart: c3.ChartAPI; - - private simulationController: SimulationController; - private mapController: MapController; - private chartData: (string | number)[][]; - private xSeries: (string | number)[]; - private names: { [key: string]: string }; - - - constructor(simulationController: SimulationController) { - this.simulationController = simulationController; - this.mapController = simulationController.mapController; - } - - public setup(): void { - this.names = {}; - - this.roomSeries = {}; - this.rackSeries = {}; - this.machineSeries = {}; - - this.simulationController.sections.forEach((simulationSection: ISection) => { - simulationSection.datacenter.rooms.forEach((room: IRoom) => { - if (room.roomType === "SERVER" && this.roomSeries[room.id] === undefined) { - this.names["ro" + room.id] = (room.name === "" || room.name === undefined) ? - "Unnamed room" : room.name; - - this.roomSeries[room.id] = { - loadFractions: ["ro" + room.id], - inUseMemoryMb: ["ro" + room.id], - temperatureC: ["ro" + room.id] - }; - } - - room.tiles.forEach((tile: ITile) => { - if (tile.object !== undefined && tile.objectType === "RACK" && this.rackSeries[tile.objectId] === undefined) { - const objectName = (tile.object).name; - this.names["ra" + tile.objectId] = objectName === "" || objectName === undefined ? - "Unnamed rack" : objectName; - - this.rackSeries[tile.objectId] = { - loadFractions: ["ra" + tile.objectId], - inUseMemoryMb: ["ra" + tile.objectId], - temperatureC: ["ra" + tile.objectId] - }; - - (tile.object).machines.forEach((machine: IMachine) => { - if (machine === null || this.machineSeries[machine.id] !== undefined) { - return; - } - - this.names["ma" + machine.id] = "Machine at position " + (machine.position + 1).toString(); - - this.machineSeries[machine.id] = { - loadFractions: ["ma" + machine.id], - inUseMemoryMb: ["ma" + machine.id], - temperatureC: ["ma" + machine.id] - }; - }); - } - }); - }); - }); - - - this.xSeries = ["time"]; - this.chartData = [this.xSeries]; - - this.chart = this.chartSetup("#statistics-chart"); - this.machineChart = this.chartSetup("#machine-statistics-chart"); - } - - public chartSetup(chartId: string): c3.ChartAPI { - return c3.generate({ - bindto: chartId, - data: { - // xFormat: '%S', - x: "time", - columns: this.chartData, - names: this.names - }, - axis: { - x: { - type: "timeseries", - tick: { - format: function (time: Date) { - let formattedTime = time.getSeconds() + "s"; - - if (time.getMinutes() > 0) { - formattedTime = time.getMinutes() + "m" + formattedTime; - } - if (time.getHours() > 0) { - formattedTime = time.getHours() + "h" + formattedTime; - } - - return formattedTime; - }, - culling: { - max: 5 - }, - count: 8 - }, - padding: { - left: 0, - right: 10 - } - }, - y: { - min: 0, - max: 1, - padding: { - top: 0, - bottom: 0 - }, - tick: { - format: function (d) { - return (Math.round(d * 100) / 100).toString(); - } - } - } - } - }); - } - - public update(): void { - this.xSeries = (<(number|string)[]>["time"]).concat( Util.timeRange(this.simulationController.currentTick)); - - this.chartData = [this.xSeries]; - - let prefix = ""; - let machineId = -1; - if (this.mapController.interactionLevel === InteractionLevel.BUILDING) { - for (let roomId in this.roomSeries) { - if (this.roomSeries.hasOwnProperty(roomId)) { - if (this.simulationController.colorRepresentation === ColorRepresentation.LOAD) { - this.chartData.push(this.roomSeries[roomId].loadFractions); - } - } - } - prefix = "ro"; - } else if (this.mapController.interactionLevel === InteractionLevel.ROOM) { - for (let rackId in this.rackSeries) { - if (this.rackSeries.hasOwnProperty(rackId) && - this.simulationController.rackToRoomMap[rackId] === - this.mapController.roomModeController.currentRoom.id) { - if (this.simulationController.colorRepresentation === ColorRepresentation.LOAD) { - this.chartData.push(this.rackSeries[rackId].loadFractions); - } - } - } - prefix = "ra"; - } else if (this.mapController.interactionLevel === InteractionLevel.NODE) { - if (this.simulationController.colorRepresentation === ColorRepresentation.LOAD) { - this.chartData.push( - this.machineSeries[this.mapController.nodeModeController.currentMachine.id].loadFractions - ); - } - prefix = "ma"; - machineId = this.mapController.nodeModeController.currentMachine.id; - } - - const unloads: string[] = []; - for (let id in this.names) { - if (this.names.hasOwnProperty(id)) { - if (machineId === -1) { - if (id.substr(0, 2) !== prefix || - (this.mapController.interactionLevel === InteractionLevel.ROOM && - this.simulationController.rackToRoomMap[parseInt(id.substr(2))] !== - this.mapController.roomModeController.currentRoom.id)) { - unloads.push(id); - } - } - else { - if (id !== prefix + machineId) { - unloads.push(id); - } - } - } - } - - let targetChart: c3.ChartAPI; - if (this.mapController.interactionLevel === InteractionLevel.NODE) { - targetChart = this.machineChart; - } else { - targetChart = this.chart; - } - - targetChart.load({ - columns: this.chartData, - unload: unloads - }); - - } - - public tickUpdated(tick: number): void { - const roomStates: IRoomState[] = this.simulationController.stateCache.stateList[tick].roomStates; - roomStates.forEach((roomState: IRoomState) => { - ChartController.insertAtIndex(this.roomSeries[roomState.roomId].loadFractions, tick + 1, roomState.loadFraction); - }); - - const rackStates: IRackState[] = this.simulationController.stateCache.stateList[tick].rackStates; - rackStates.forEach((rackState: IRackState) => { - ChartController.insertAtIndex(this.rackSeries[rackState.rackId].loadFractions, tick + 1, rackState.loadFraction); - }); - - const machineStates: IMachineState[] = this.simulationController.stateCache.stateList[tick].machineStates; - machineStates.forEach((machineState: IMachineState) => { - ChartController.insertAtIndex(this.machineSeries[machineState.machineId].loadFractions, tick + 1, machineState.loadFraction); - }); - } - - private static insertAtIndex(list: any[], index: number, data: any): void { - if (index > list.length) { - let i = list.length; - while (i < index) { - list[i] = null; - i++; - } - } - - list[index] = data; - } -} diff --git a/src/scripts/controllers/simulation/statecache.ts b/src/scripts/controllers/simulation/statecache.ts deleted file mode 100644 index 0a7767fa..00000000 --- a/src/scripts/controllers/simulation/statecache.ts +++ /dev/null @@ -1,321 +0,0 @@ -import {SimulationController} from "../simulationcontroller"; - - -export class StateCache { - public static CACHE_INTERVAL = 10000; - private static PREFERRED_CACHE_ADVANCE = 5; - - public stateList: {[key: number]: ITickState}; - public lastCachedTick: number; - public cacheBlock: boolean; - - private simulationController: SimulationController; - private intervalId: any; - private caching: boolean; - - // Item caches - private machineCache: {[keys: number]: IMachine}; - private rackCache: {[keys: number]: IRack}; - private roomCache: {[keys: number]: IRoom}; - private taskCache: {[keys: number]: ITask}; - - - constructor(simulationController: SimulationController) { - this.stateList = {}; - this.lastCachedTick = 0; - this.cacheBlock = true; - this.simulationController = simulationController; - this.caching = false; - } - - public startCaching(): void { - this.machineCache = {}; - this.rackCache = {}; - this.roomCache = {}; - this.taskCache = {}; - - this.simulationController.mapView.currentDatacenter.rooms.forEach((room: IRoom) => { - this.addRoomToCache(room); - }); - this.simulationController.currentExperiment.trace.tasks.forEach((task: ITask) => { - this.taskCache[task.id] = task; - }); - - this.caching = true; - - this.cache(); - this.intervalId = setInterval(() => { - this.cache(); - }, StateCache.CACHE_INTERVAL); - } - - private addRoomToCache(room: IRoom) { - this.roomCache[room.id] = room; - - room.tiles.forEach((tile: ITile) => { - if (tile.objectType === "RACK") { - this.rackCache[tile.objectId] = tile.object; - - ( tile.object).machines.forEach((machine: IMachine) => { - if (machine !== null) { - this.machineCache[machine.id] = machine; - } - }); - } - }); - } - - public stopCaching(): void { - if (this.caching) { - this.caching = false; - clearInterval(this.intervalId); - } - } - - private cache(): void { - const tick = this.lastCachedTick + 1; - - this.updateLastTick().then(() => { - // Check if end of simulated region has been reached - if (this.lastCachedTick > this.simulationController.lastSimulatedTick) { - return; - } - - this.fetchAllAvailableStates().then((data) => { - this.stateList = data; - - // Determine last cached tick - const ticks = Object.keys(this.stateList).sort((a, b) => { - return parseInt(a) - parseInt(b); - }); - if (ticks.length > 0) { - this.lastCachedTick = parseInt(ticks[ticks.length - 1]); - } - - for (let i = 1; i <= this.lastCachedTick; i++) { - this.updateTasksForNewTick(i); - - // Update chart cache - this.simulationController.chartController.tickUpdated(i); - } - - if (!this.cacheBlock && this.lastCachedTick - this.simulationController.currentTick <= 0) { - this.cacheBlock = true; - return; - } - - if (this.cacheBlock) { - if (this.lastCachedTick - this.simulationController.currentTick >= StateCache.PREFERRED_CACHE_ADVANCE) { - this.cacheBlock = false; - } - } - }); - }); - } - - private updateTasksForNewTick(tick: number): void { - const taskIDsInTick = []; - - this.stateList[tick].taskStates.forEach((taskState: ITaskState) => { - taskIDsInTick.push(taskState.taskId); - if (this.stateList[tick - 1] !== undefined) { - let previousFlops = 0; - const previousStates = this.stateList[tick - 1].taskStates; - - for (let i = 0; i < previousStates.length; i++) { - if (previousStates[i].taskId === taskState.taskId) { - previousFlops = previousStates[i].flopsLeft; - break; - } - } - - if (previousFlops > 0 && taskState.flopsLeft === 0) { - taskState.task.finishedTick = tick; - } - } - }); - - // Generate pseudo-task-states for tasks that haven't started yet or have already finished - const traceTasks = this.simulationController.currentExperiment.trace.tasks; - if (taskIDsInTick.length !== traceTasks.length) { - traceTasks - .filter((task: ITask) => { - return taskIDsInTick.indexOf(task.id) === -1; - }) - .forEach((task: ITask) => { - const flopStateCount = task.startTick >= tick ? task.totalFlopCount : 0; - - this.stateList[tick].taskStates.push({ - id: -1, - taskId: task.id, - task: task, - experimentId: this.simulationController.currentExperiment.id, - tick, - flopsLeft: flopStateCount - }); - }); - } - - this.stateList[tick].taskStates.sort((a: ITaskState, b: ITaskState) => { - return a.task.startTick - b.task.startTick; - }); - } - - private updateLastTick(): Promise { - return this.simulationController.mapController.api.getLastSimulatedTickByExperiment( - this.simulationController.simulation.id, this.simulationController.currentExperiment.id).then((data) => { - this.simulationController.lastSimulatedTick = data; - }); - } - - private fetchAllAvailableStates(): Promise<{[key: number]: ITickState}> { - let machineStates, rackStates, roomStates, taskStates; - const promises = []; - - promises.push( - this.simulationController.mapController.api.getMachineStates( - this.simulationController.mapView.simulation.id, this.simulationController.currentExperiment.id, - this.machineCache - ).then((states: IMachineState[]) => { - machineStates = states; - }) - ); - - promises.push( - this.simulationController.mapController.api.getRackStates( - this.simulationController.mapView.simulation.id, this.simulationController.currentExperiment.id, - this.rackCache - ).then((states: IRackState[]) => { - rackStates = states; - }) - ); - - promises.push( - this.simulationController.mapController.api.getRoomStates( - this.simulationController.mapView.simulation.id, this.simulationController.currentExperiment.id, - this.roomCache - ).then((states: IRoomState[]) => { - roomStates = states; - }) - ); - - promises.push( - this.simulationController.mapController.api.getTaskStates( - this.simulationController.mapView.simulation.id, this.simulationController.currentExperiment.id, - this.taskCache - ).then((states: ITaskState[]) => { - taskStates = states; - }) - ); - - return Promise.all(promises).then(() => { - const tickStates: {[key: number]: ITickState} = {}; - - machineStates.forEach((machineState: IMachineState) => { - if (tickStates[machineState.tick] === undefined) { - tickStates[machineState.tick] = { - tick: machineState.tick, - machineStates: [machineState], - rackStates: [], - roomStates: [], - taskStates: [] - }; - } else { - tickStates[machineState.tick].machineStates.push(machineState); - } - }); - rackStates.forEach((rackState: IRackState) => { - if (tickStates[rackState.tick] === undefined) { - tickStates[rackState.tick] = { - tick: rackState.tick, - machineStates: [], - rackStates: [rackState], - roomStates: [], - taskStates: [] - }; - } else { - tickStates[rackState.tick].rackStates.push(rackState); - } - }); - roomStates.forEach((roomState: IRoomState) => { - if (tickStates[roomState.tick] === undefined) { - tickStates[roomState.tick] = { - tick: roomState.tick, - machineStates: [], - rackStates: [], - roomStates: [roomState], - taskStates: [] - }; - } else { - tickStates[roomState.tick].roomStates.push(roomState); - } - }); - taskStates.forEach((taskState: ITaskState) => { - if (tickStates[taskState.tick] === undefined) { - tickStates[taskState.tick] = { - tick: taskState.tick, - machineStates: [], - rackStates: [], - roomStates: [], - taskStates: [taskState] - }; - } else { - tickStates[taskState.tick].taskStates.push(taskState); - } - }); - - return tickStates; - }); - } - - private fetchAllStatesOfTick(tick: number): Promise { - const tickState: ITickState = { - tick, - machineStates: [], - rackStates: [], - roomStates: [], - taskStates: [] - }; - const promises = []; - - promises.push( - this.simulationController.mapController.api.getMachineStates( - this.simulationController.mapView.simulation.id, this.simulationController.currentExperiment.id, - this.machineCache, tick - ).then((states: IMachineState[]) => { - tickState.machineStates = states; - }) - ); - - promises.push( - this.simulationController.mapController.api.getRackStates( - this.simulationController.mapView.simulation.id, this.simulationController.currentExperiment.id, - this.rackCache, tick - ).then((states: IRackState[]) => { - tickState.rackStates = states; - }) - ); - - promises.push( - this.simulationController.mapController.api.getRoomStates( - this.simulationController.mapView.simulation.id, this.simulationController.currentExperiment.id, - this.roomCache, tick - ).then((states: IRoomState[]) => { - tickState.roomStates = states; - }) - ); - - promises.push( - this.simulationController.mapController.api.getTaskStates( - this.simulationController.mapView.simulation.id, this.simulationController.currentExperiment.id, - this.taskCache, tick - ).then((states: ITaskState[]) => { - tickState.taskStates = states; - }) - ); - - return Promise.all(promises).then(() => { - return tickState; - }); - } -} diff --git a/src/scripts/controllers/simulation/taskview.ts b/src/scripts/controllers/simulation/taskview.ts deleted file mode 100644 index d989e103..00000000 --- a/src/scripts/controllers/simulation/taskview.ts +++ /dev/null @@ -1,64 +0,0 @@ -import * as $ from "jquery"; -import {SimulationController} from "../simulationcontroller"; -import {Util} from "../../util"; - - -export class TaskViewController { - private simulationController: SimulationController; - - - constructor(simulationController: SimulationController) { - this.simulationController = simulationController; - } - - /** - * Populates and displays the list of tasks with their current state. - */ - public update() { - const container = $(".task-list"); - container.children().remove(".task-element"); - - this.simulationController.stateCache.stateList[this.simulationController.currentTick].taskStates - .forEach((taskState: ITaskState) => { - const html = this.generateTaskElementHTML(taskState); - container.append(html); - }); - } - - private generateTaskElementHTML(taskState: ITaskState) { - let iconType, timeInfo; - - if (taskState.task.startTick > this.simulationController.currentTick) { - iconType = "glyphicon-time"; - timeInfo = "Not started yet"; - } else if (taskState.task.startTick <= this.simulationController.currentTick && taskState.flopsLeft > 0) { - iconType = "glyphicon-refresh"; - timeInfo = "Started at " + Util.convertSecondsToFormattedTime(taskState.task.startTick); - } else if (taskState.flopsLeft === 0) { - iconType = "glyphicon-ok"; - timeInfo = "Started at " + Util.convertSecondsToFormattedTime(taskState.task.startTick); - } - - // Calculate progression ratio - const progress = 1 - (taskState.flopsLeft / taskState.task.totalFlopCount); - - // Generate completion text - const flopsCompleted = taskState.task.totalFlopCount - taskState.flopsLeft; - const completionInfo = "Completed: " + flopsCompleted + " / " + taskState.task.totalFlopCount + " FLOPS"; - - return '
' + - '
' + - '
' + - '
' + timeInfo + - '
' + - '
' + - '
' + - '
' + - '
' + - '
' + completionInfo + '
' + - '
' + - '
'; - } -} diff --git a/src/scripts/controllers/simulation/timeline.ts b/src/scripts/controllers/simulation/timeline.ts deleted file mode 100644 index ec3d8cb4..00000000 --- a/src/scripts/controllers/simulation/timeline.ts +++ /dev/null @@ -1,161 +0,0 @@ -import {SimulationController} from "../simulationcontroller"; -import {Util} from "../../util"; -import * as $ from "jquery"; - - -export class TimelineController { - private simulationController: SimulationController; - private startLabel: JQuery; - private endLabel: JQuery; - private playButton: JQuery; - private loadingIcon: JQuery; - private cacheSection: JQuery; - private timeMarker: JQuery; - private timeline: JQuery; - private timeUnitFraction: number; - private timeMarkerWidth: number; - private timelineWidth: number; - - - constructor(simulationController: SimulationController) { - this.simulationController = simulationController; - this.startLabel = $(".timeline-container .labels .start-time-label"); - this.endLabel = $(".timeline-container .labels .end-time-label"); - this.playButton = $(".timeline-container .play-btn"); - this.loadingIcon = this.playButton.find("img"); - this.cacheSection = $(".timeline-container .timeline .cache-section"); - this.timeMarker = $(".timeline-container .timeline .time-marker"); - this.timeline = $(".timeline-container .timeline"); - this.timeMarkerWidth = this.timeMarker.width(); - this.timelineWidth = this.timeline.width(); - } - - public togglePlayback(): void { - if (this.simulationController.stateCache.cacheBlock) { - this.simulationController.playing = false; - return; - } - this.simulationController.playing = !this.simulationController.playing; - this.setButtonIcon(); - } - - public setupListeners(): void { - this.playButton.on("click", () => { - this.togglePlayback(); - }); - - $(".timeline-container .timeline").on("click", (event: JQueryEventObject) => { - const parentOffset = $(event.target).closest(".timeline").offset(); - const clickX = event.pageX - parentOffset.left; - - let newTick = Math.round(clickX / (this.timelineWidth * this.timeUnitFraction)); - - if (newTick > this.simulationController.stateCache.lastCachedTick) { - newTick = this.simulationController.stateCache.lastCachedTick; - } - this.simulationController.currentTick = newTick; - this.simulationController.checkCurrentSimulationSection(); - this.simulationController.update(); - }); - } - - public setButtonIcon(): void { - if (this.simulationController.playing && !this.playButton.hasClass("glyphicon-pause")) { - this.playButton.removeClass("glyphicon-play").addClass("glyphicon-pause"); - } else if (!this.simulationController.playing && !this.playButton.hasClass("glyphicon-play")) { - this.playButton.removeClass("glyphicon-pause").addClass("glyphicon-play"); - } - } - - public update(): void { - this.timeUnitFraction = 1 / (this.simulationController.lastSimulatedTick + 1); - this.timelineWidth = $(".timeline-container .timeline").width(); - - this.updateTimeLabels(); - - this.cacheSection.css("width", this.calculateTickPosition(this.simulationController.stateCache.lastCachedTick)); - this.timeMarker.css("left", this.calculateTickPosition(this.simulationController.currentTick)); - - this.updateTaskIndicators(); - this.updateSectionMarkers(); - - if (this.simulationController.stateCache.cacheBlock) { - this.playButton.removeClass("glyphicon-pause").removeClass("glyphicon-play"); - this.loadingIcon.show(); - } else { - this.loadingIcon.hide(); - this.setButtonIcon(); - } - } - - private updateTimeLabels(): void { - this.startLabel.text(Util.convertSecondsToFormattedTime(this.simulationController.currentTick)); - this.endLabel.text(Util.convertSecondsToFormattedTime(this.simulationController.lastSimulatedTick)); - } - - private updateSectionMarkers(): void { - $(".section-marker").remove(); - - this.simulationController.sections.forEach((simulationSection: ISection) => { - if (simulationSection.startTick === 0) { - return; - } - - this.timeline.append( - $('
') - .css("left", this.calculateTickPosition(simulationSection.startTick)) - ); - }); - } - - private updateTaskIndicators(): void { - $(".task-indicator").remove(); - - const tickStateTypes = { - "queueEntryTick": "task-queued", - "startTick": "task-started", - "finishedTick": "task-finished" - }; - - if (this.simulationController.stateCache.lastCachedTick === -1) { - return; - } - - const indicatorCountList = new Array(this.simulationController.stateCache.lastCachedTick); - let indicator; - this.simulationController.currentExperiment.trace.tasks.forEach((task: ITask) => { - for (let tickStateType in tickStateTypes) { - if (!tickStateTypes.hasOwnProperty(tickStateType)) { - continue; - } - - if (task[tickStateType] !== undefined && - task[tickStateType] <= this.simulationController.stateCache.lastCachedTick) { - - let bottomOffset; - if (indicatorCountList[task[tickStateType]] === undefined) { - indicatorCountList[task[tickStateType]] = 1; - bottomOffset = 0; - } else { - bottomOffset = indicatorCountList[task[tickStateType]] * 10; - indicatorCountList[task[tickStateType]]++; - } - indicator = $('
') - .css("left", this.calculateTickPosition(task[tickStateType])) - .css("bottom", bottomOffset); - this.timeline.append(indicator); - } - } - }); - } - - private calculateTickPosition(tick: number): string { - let correction = 0; - if (this.timeUnitFraction * this.timelineWidth > this.timeMarkerWidth) { - correction = (this.timeUnitFraction * this.timelineWidth - this.timeMarkerWidth) * - ((tick - 1) / this.simulationController.lastSimulatedTick); - } - - return (100 * (this.timeUnitFraction * (tick - 1) + correction / this.timelineWidth)) + "%"; - } -} -- cgit v1.2.3