diff options
Diffstat (limited to 'opendc-web/opendc-web-ui/src/util')
| -rw-r--r-- | opendc-web/opendc-web-ui/src/util/authorizations.js | 11 | ||||
| -rw-r--r-- | opendc-web/opendc-web-ui/src/util/available-metrics.js | 67 | ||||
| -rw-r--r-- | opendc-web/opendc-web-ui/src/util/colors.js | 29 | ||||
| -rw-r--r-- | opendc-web/opendc-web-ui/src/util/date-time.js | 93 | ||||
| -rw-r--r-- | opendc-web/opendc-web-ui/src/util/date-time.test.js | 35 | ||||
| -rw-r--r-- | opendc-web/opendc-web-ui/src/util/sidebar-space.js | 2 | ||||
| -rw-r--r-- | opendc-web/opendc-web-ui/src/util/state-utils.js | 6 | ||||
| -rw-r--r-- | opendc-web/opendc-web-ui/src/util/tile-calculations.js | 255 | ||||
| -rw-r--r-- | opendc-web/opendc-web-ui/src/util/timeline.js | 9 | ||||
| -rw-r--r-- | opendc-web/opendc-web-ui/src/util/unit-specifications.js | 102 |
10 files changed, 609 insertions, 0 deletions
diff --git a/opendc-web/opendc-web-ui/src/util/authorizations.js b/opendc-web/opendc-web-ui/src/util/authorizations.js new file mode 100644 index 00000000..4086b35d --- /dev/null +++ b/opendc-web/opendc-web-ui/src/util/authorizations.js @@ -0,0 +1,11 @@ +export const AUTH_ICON_MAP = { + OWN: 'home', + EDIT: 'pencil', + VIEW: 'eye', +} + +export const AUTH_DESCRIPTION_MAP = { + OWN: 'Own', + EDIT: 'Can Edit', + VIEW: 'Can View', +} diff --git a/opendc-web/opendc-web-ui/src/util/available-metrics.js b/opendc-web/opendc-web-ui/src/util/available-metrics.js new file mode 100644 index 00000000..807bc0c1 --- /dev/null +++ b/opendc-web/opendc-web-ui/src/util/available-metrics.js @@ -0,0 +1,67 @@ +export const AVAILABLE_METRICS = [ + 'total_overcommitted_burst', + 'total_power_draw', + 'total_failure_vm_slices', + 'total_granted_burst', + 'total_interfered_burst', + 'total_requested_burst', + 'mean_cpu_usage', + 'mean_cpu_demand', + 'mean_num_deployed_images', + 'max_num_deployed_images', + 'total_vms_submitted', + 'total_vms_queued', + 'total_vms_finished', + 'total_vms_failed', +] + +export const METRIC_NAMES_SHORT = { + total_overcommitted_burst: 'Overcomm. CPU Cycles', + total_granted_burst: 'Granted CPU Cycles', + total_requested_burst: 'Requested CPU Cycles', + total_interfered_burst: 'Interfered CPU Cycles', + total_power_draw: 'Total Power Consumption', + mean_cpu_usage: 'Mean Host CPU Usage', + mean_cpu_demand: 'Mean Host CPU Demand', + mean_num_deployed_images: 'Mean Num. Deployed Images Per Host', + max_num_deployed_images: 'Max. Num. Deployed Images Per Host', + total_failure_vm_slices: 'Total Num. Failed VM Slices', + total_vms_submitted: 'Total Num. VMs Submitted', + total_vms_queued: 'Max. Num. VMs Queued', + total_vms_finished: 'Max. Num. VMs Finished', + total_vms_failed: 'Max. Num. VMs Failed', +} + +export const METRIC_NAMES = { + total_overcommitted_burst: 'Overcommitted CPU Cycles', + total_granted_burst: 'Granted CPU Cycles', + total_requested_burst: 'Requested CPU Cycles', + total_interfered_burst: 'Interfered CPU Cycles', + total_power_draw: 'Total Power Consumption', + mean_cpu_usage: 'Mean Host CPU Usage', + mean_cpu_demand: 'Mean Host CPU Demand', + mean_num_deployed_images: 'Mean Number of Deployed Images Per Host', + max_num_deployed_images: 'Maximum Number Deployed Images Per Host', + total_failure_vm_slices: 'Total Number Failed VM Slices', + total_vms_submitted: 'Total Number VMs Submitted', + total_vms_queued: 'Maximum Number VMs Queued', + total_vms_finished: 'Maximum Number VMs Finished', + total_vms_failed: 'Maximum Number VMs Failed', +} + +export const METRIC_UNITS = { + total_overcommitted_burst: 'MFLOP', + total_granted_burst: 'MFLOP', + total_requested_burst: 'MFLOP', + total_interfered_burst: 'MFLOP', + total_power_draw: 'Wh', + mean_cpu_usage: 'MHz', + mean_cpu_demand: 'MHz', + mean_num_deployed_images: 'VMs', + max_num_deployed_images: 'VMs', + total_failure_vm_slices: 'VM Slices', + total_vms_submitted: 'VMs', + total_vms_queued: 'VMs', + total_vms_finished: 'VMs', + total_vms_failed: 'VMs', +} diff --git a/opendc-web/opendc-web-ui/src/util/colors.js b/opendc-web/opendc-web-ui/src/util/colors.js new file mode 100644 index 00000000..34468503 --- /dev/null +++ b/opendc-web/opendc-web-ui/src/util/colors.js @@ -0,0 +1,29 @@ +export const GRID_COLOR = 'rgba(0, 0, 0, 0.5)' +export const BACKDROP_COLOR = 'rgba(255, 255, 255, 1)' +export const WALL_COLOR = 'rgba(0, 0, 0, 1)' + +export const ROOM_DEFAULT_COLOR = 'rgba(150, 150, 150, 1)' +export const ROOM_IN_CONSTRUCTION_COLOR = 'rgba(51, 153, 255, 1)' +export const ROOM_HOVER_VALID_COLOR = 'rgba(51, 153, 255, 1)' +export const ROOM_HOVER_INVALID_COLOR = 'rgba(255, 102, 0, 1)' +export const ROOM_NAME_COLOR = 'rgba(245, 245, 245, 1)' +export const ROOM_TYPE_COLOR = 'rgba(245, 245, 245, 1)' + +export const TILE_PLUS_COLOR = 'rgba(0, 0, 0, 1)' + +export const OBJECT_BORDER_COLOR = 'rgba(0, 0, 0, 1)' + +export const RACK_BACKGROUND_COLOR = 'rgba(170, 170, 170, 1)' +export const RACK_SPACE_BAR_BACKGROUND_COLOR = 'rgba(222, 235, 247, 0.6)' +export const RACK_SPACE_BAR_FILL_COLOR = 'rgba(91, 155, 213, 0.7)' +export const RACK_ENERGY_BAR_BACKGROUND_COLOR = 'rgba(255, 242, 204, 0.6)' +export const RACK_ENERGY_BAR_FILL_COLOR = 'rgba(244, 215, 0, 0.7)' +export const COOLING_ITEM_BACKGROUND_COLOR = 'rgba(40, 50, 230, 1)' +export const PSU_BACKGROUND_COLOR = 'rgba(230, 50, 60, 1)' + +export const GRAYED_OUT_AREA_COLOR = 'rgba(0, 0, 0, 0.6)' + +export const SIM_LOW_COLOR = 'rgba(197, 224, 180, 1)' +export const SIM_MID_LOW_COLOR = 'rgba(255, 230, 153, 1)' +export const SIM_MID_HIGH_COLOR = 'rgba(248, 203, 173, 1)' +export const SIM_HIGH_COLOR = 'rgba(249, 165, 165, 1)' diff --git a/opendc-web/opendc-web-ui/src/util/date-time.js b/opendc-web/opendc-web-ui/src/util/date-time.js new file mode 100644 index 00000000..66efdf5b --- /dev/null +++ b/opendc-web/opendc-web-ui/src/util/date-time.js @@ -0,0 +1,93 @@ +/** + * Parses and formats the given date-time string representation. + * + * The format assumed is "YYYY-MM-DDTHH:MM:SS". + * + * @param dateTimeString A string expressing a date and a time, in the above mentioned format. + * @returns {string} A human-friendly string version of that date and time. + */ +export function parseAndFormatDateTime(dateTimeString) { + return formatDateTime(parseDateTime(dateTimeString)) +} + +/** + * Parses date-time string representations and returns a parsed object. + * + * The format assumed is "YYYY-MM-DDTHH:MM:SS". + * + * @param dateTimeString A string expressing a date and a time, in the above mentioned format. + * @returns {object} A Date object with the parsed date and time information as content. + */ +export function parseDateTime(dateTimeString) { + return new Date(dateTimeString + '.000Z') +} + +/** + * Serializes the given date and time value to a human-friendly string. + * + * @param dateTime An object representation of a date and time. + * @returns {string} A human-friendly string version of that date and time. + */ +export function formatDateTime(dateTime) { + let date + const currentDate = new Date() + + date = + addPaddingToTwo(dateTime.getDay()) + + '/' + + addPaddingToTwo(dateTime.getMonth()) + + '/' + + addPaddingToTwo(dateTime.getFullYear()) + + if (dateTime.getFullYear() === currentDate.getFullYear() && dateTime.getMonth() === currentDate.getMonth()) { + if (dateTime.getDate() === currentDate.getDate()) { + date = 'Today' + } else if (dateTime.getDate() === currentDate.getDate() - 1) { + date = 'Yesterday' + } + } + + return date + ', ' + addPaddingToTwo(dateTime.getHours()) + ':' + addPaddingToTwo(dateTime.getMinutes()) +} + +/** + * Formats the given number of seconds/ticks to a formatted time representation. + * + * @param seconds The number of seconds. + * @returns {string} A string representation of that amount of second, in the from of HH:MM:SS. + */ +export function convertSecondsToFormattedTime(seconds) { + if (seconds <= 0) { + return '0s' + } + + let hour = Math.floor(seconds / 3600) + let minute = Math.floor(seconds / 60) % 60 + let second = seconds % 60 + + hour = isNaN(hour) ? 0 : hour + minute = isNaN(minute) ? 0 : minute + second = isNaN(second) ? 0 : second + + if (hour === 0 && minute === 0) { + return second + 's' + } else if (hour === 0) { + return minute + 'm' + addPaddingToTwo(second) + 's' + } else { + return hour + 'h' + addPaddingToTwo(minute) + 'm' + addPaddingToTwo(second) + 's' + } +} + +/** + * Pads the given integer to have at least two digits. + * + * @param integer An integer to be padded. + * @returns {string} A string containing the padded integer. + */ +function addPaddingToTwo(integer) { + if (integer < 10) { + return '0' + integer.toString() + } else { + return integer.toString() + } +} diff --git a/opendc-web/opendc-web-ui/src/util/date-time.test.js b/opendc-web/opendc-web-ui/src/util/date-time.test.js new file mode 100644 index 00000000..3d95eba6 --- /dev/null +++ b/opendc-web/opendc-web-ui/src/util/date-time.test.js @@ -0,0 +1,35 @@ +import { convertSecondsToFormattedTime, parseDateTime } from './date-time' + +describe('date-time parsing', () => { + it('reads components properly', () => { + const dateString = '2017-09-27T20:55:01' + const parsedDate = parseDateTime(dateString) + + expect(parsedDate.getUTCFullYear()).toEqual(2017) + expect(parsedDate.getUTCMonth()).toEqual(8) + expect(parsedDate.getUTCDate()).toEqual(27) + expect(parsedDate.getUTCHours()).toEqual(20) + expect(parsedDate.getUTCMinutes()).toEqual(55) + expect(parsedDate.getUTCSeconds()).toEqual(1) + }) +}) + +describe('tick formatting', () => { + it("returns '0s' for numbers <= 0", () => { + expect(convertSecondsToFormattedTime(-1)).toEqual('0s') + expect(convertSecondsToFormattedTime(0)).toEqual('0s') + }) + it('returns only seconds for values under a minute', () => { + expect(convertSecondsToFormattedTime(1)).toEqual('1s') + expect(convertSecondsToFormattedTime(59)).toEqual('59s') + }) + it('returns seconds and minutes for values under an hour', () => { + expect(convertSecondsToFormattedTime(60)).toEqual('1m00s') + expect(convertSecondsToFormattedTime(61)).toEqual('1m01s') + expect(convertSecondsToFormattedTime(3599)).toEqual('59m59s') + }) + it('returns full time for values over an hour', () => { + expect(convertSecondsToFormattedTime(3600)).toEqual('1h00m00s') + expect(convertSecondsToFormattedTime(3601)).toEqual('1h00m01s') + }) +}) diff --git a/opendc-web/opendc-web-ui/src/util/sidebar-space.js b/opendc-web/opendc-web-ui/src/util/sidebar-space.js new file mode 100644 index 00000000..ef09d40a --- /dev/null +++ b/opendc-web/opendc-web-ui/src/util/sidebar-space.js @@ -0,0 +1,2 @@ +export const isCollapsible = (location) => + location.pathname.indexOf('portfolios') === -1 && location.pathname.indexOf('scenarios') === -1 diff --git a/opendc-web/opendc-web-ui/src/util/state-utils.js b/opendc-web/opendc-web-ui/src/util/state-utils.js new file mode 100644 index 00000000..e5b695c3 --- /dev/null +++ b/opendc-web/opendc-web-ui/src/util/state-utils.js @@ -0,0 +1,6 @@ +export const getState = (dispatch) => + new Promise((resolve) => { + dispatch((dispatch, getState) => { + resolve(getState()) + }) + }) diff --git a/opendc-web/opendc-web-ui/src/util/tile-calculations.js b/opendc-web/opendc-web-ui/src/util/tile-calculations.js new file mode 100644 index 00000000..764ae6ac --- /dev/null +++ b/opendc-web/opendc-web-ui/src/util/tile-calculations.js @@ -0,0 +1,255 @@ +export function deriveWallLocations(tiles) { + const { verticalWalls, horizontalWalls } = getWallSegments(tiles) + return mergeWallSegments(verticalWalls, horizontalWalls) +} + +function getWallSegments(tiles) { + const verticalWalls = {} + const horizontalWalls = {} + + tiles.forEach((tile) => { + const x = tile.positionX, + y = tile.positionY + + for (let dX = -1; dX <= 1; dX++) { + for (let dY = -1; dY <= 1; dY++) { + if (Math.abs(dX) === Math.abs(dY)) { + continue + } + + let doInsert = true + for (let tileIndex in tiles) { + if (tiles[tileIndex].positionX === x + dX && tiles[tileIndex].positionY === y + dY) { + doInsert = false + break + } + } + if (!doInsert) { + continue + } + + if (dX === -1) { + if (verticalWalls[x] === undefined) { + verticalWalls[x] = [] + } + if (verticalWalls[x].indexOf(y) === -1) { + verticalWalls[x].push(y) + } + } else if (dX === 1) { + if (verticalWalls[x + 1] === undefined) { + verticalWalls[x + 1] = [] + } + if (verticalWalls[x + 1].indexOf(y) === -1) { + verticalWalls[x + 1].push(y) + } + } else if (dY === -1) { + if (horizontalWalls[y] === undefined) { + horizontalWalls[y] = [] + } + if (horizontalWalls[y].indexOf(x) === -1) { + horizontalWalls[y].push(x) + } + } else if (dY === 1) { + if (horizontalWalls[y + 1] === undefined) { + horizontalWalls[y + 1] = [] + } + if (horizontalWalls[y + 1].indexOf(x) === -1) { + horizontalWalls[y + 1].push(x) + } + } + } + } + }) + + return { verticalWalls, horizontalWalls } +} + +function mergeWallSegments(vertical, horizontal) { + const result = [] + const walls = [vertical, horizontal] + + for (let i = 0; i < 2; i++) { + const wallList = walls[i] + for (let a in wallList) { + a = parseInt(a, 10) + + wallList[a].sort((a, b) => { + return a - b + }) + + let startPos = wallList[a][0] + const isHorizontal = i === 1 + + if (wallList[a].length === 1) { + const startPosX = isHorizontal ? startPos : a + const startPosY = isHorizontal ? a : startPos + result.push({ + startPosX, + startPosY, + isHorizontal, + length: 1, + }) + } else { + let consecutiveCount = 1 + for (let b = 0; b < wallList[a].length - 1; b++) { + if (b + 1 === wallList[a].length - 1) { + if (wallList[a][b + 1] - wallList[a][b] > 1) { + const startPosX = isHorizontal ? startPos : a + const startPosY = isHorizontal ? a : startPos + result.push({ + startPosX, + startPosY, + isHorizontal, + length: consecutiveCount, + }) + consecutiveCount = 0 + startPos = wallList[a][b + 1] + } + const startPosX = isHorizontal ? startPos : a + const startPosY = isHorizontal ? a : startPos + result.push({ + startPosX, + startPosY, + isHorizontal, + length: consecutiveCount + 1, + }) + break + } else if (wallList[a][b + 1] - wallList[a][b] > 1) { + const startPosX = isHorizontal ? startPos : a + const startPosY = isHorizontal ? a : startPos + result.push({ + startPosX, + startPosY, + isHorizontal, + length: consecutiveCount, + }) + startPos = wallList[a][b + 1] + consecutiveCount = 0 + } + consecutiveCount++ + } + } + } + } + + return result +} + +export function deriveValidNextTilePositions(rooms, selectedTiles) { + const result = [], + newPosition = { x: 0, y: 0 } + let isSurroundingTile + + selectedTiles.forEach((tile) => { + const x = tile.positionX + const y = tile.positionY + result.push({ x, y }) + + for (let dX = -1; dX <= 1; dX++) { + for (let dY = -1; dY <= 1; dY++) { + if (Math.abs(dX) === Math.abs(dY)) { + continue + } + + newPosition.x = x + dX + newPosition.y = y + dY + + isSurroundingTile = true + for (let index in selectedTiles) { + if ( + selectedTiles[index].positionX === newPosition.x && + selectedTiles[index].positionY === newPosition.y + ) { + isSurroundingTile = false + break + } + } + + if (isSurroundingTile && findPositionInRooms(rooms, newPosition.x, newPosition.y) === -1) { + result.push({ x: newPosition.x, y: newPosition.y }) + } + } + } + }) + + return result +} + +export function findPositionInPositions(positions, positionX, positionY) { + for (let i = 0; i < positions.length; i++) { + const position = positions[i] + if (positionX === position.x && positionY === position.y) { + return i + } + } + + return -1 +} + +export function findPositionInRooms(rooms, positionX, positionY) { + for (let i = 0; i < rooms.length; i++) { + const room = rooms[i] + if (findPositionInTiles(room.tiles, positionX, positionY) !== -1) { + return i + } + } + + return -1 +} + +function findPositionInTiles(tiles, positionX, positionY) { + let index = -1 + + for (let i = 0; i < tiles.length; i++) { + const tile = tiles[i] + if (positionX === tile.positionX && positionY === tile.positionY) { + index = i + break + } + } + + return index +} + +export function findTileWithPosition(tiles, positionX, positionY) { + for (let i = 0; i < tiles.length; i++) { + if (tiles[i].positionX === positionX && tiles[i].positionY === positionY) { + return tiles[i] + } + } + + return null +} + +export function calculateRoomListBounds(rooms) { + const min = { x: Number.MAX_VALUE, y: Number.MAX_VALUE } + const max = { x: -1, y: -1 } + + rooms.forEach((room) => { + room.tiles.forEach((tile) => { + if (tile.positionX < min.x) { + min.x = tile.positionX + } + if (tile.positionY < min.y) { + min.y = tile.positionY + } + + if (tile.positionX > max.x) { + max.x = tile.positionX + } + if (tile.positionY > max.y) { + max.y = tile.positionY + } + }) + }) + + max.x++ + max.y++ + + const center = { + x: min.x + (max.x - min.x) / 2.0, + y: min.y + (max.y - min.y) / 2.0, + } + + return { min, center, max } +} diff --git a/opendc-web/opendc-web-ui/src/util/timeline.js b/opendc-web/opendc-web-ui/src/util/timeline.js new file mode 100644 index 00000000..7c8a3ef0 --- /dev/null +++ b/opendc-web/opendc-web-ui/src/util/timeline.js @@ -0,0 +1,9 @@ +export function convertTickToPercentage(tick, maxTick) { + if (maxTick === 0) { + return '0%' + } else if (tick > maxTick) { + return (maxTick / (maxTick + 1)) * 100 + '%' + } + + return (tick / (maxTick + 1)) * 100 + '%' +} diff --git a/opendc-web/opendc-web-ui/src/util/unit-specifications.js b/opendc-web/opendc-web-ui/src/util/unit-specifications.js new file mode 100644 index 00000000..28479edd --- /dev/null +++ b/opendc-web/opendc-web-ui/src/util/unit-specifications.js @@ -0,0 +1,102 @@ +export const CPU_UNITS = { + 'cpu-1': { + _id: 'cpu-1', + name: 'Intel i7 v6 6700k', + clockRateMhz: 4100, + numberOfCores: 4, + energyConsumptionW: 70, + }, + 'cpu-2': { + _id: 'cpu-2', + name: 'Intel i5 v6 6700k', + clockRateMhz: 3500, + numberOfCores: 2, + energyConsumptionW: 50, + }, + 'cpu-3': { + _id: 'cpu-3', + name: 'Intel® Xeon® E-2224G', + clockRateMhz: 3500, + numberOfCores: 4, + energyConsumptionW: 71, + }, + 'cpu-4': { + _id: 'cpu-4', + name: 'Intel® Xeon® E-2244G', + clockRateMhz: 3800, + numberOfCores: 8, + energyConsumptionW: 71, + }, + 'cpu-5': { + _id: 'cpu-5', + name: 'Intel® Xeon® E-2246G', + clockRateMhz: 3600, + numberOfCores: 12, + energyConsumptionW: 80, + }, +} + +export const GPU_UNITS = { + 'gpu-1': { + _id: 'gpu-1', + name: 'NVIDIA GTX 4 1080', + clockRateMhz: 1200, + numberOfCores: 200, + energyConsumptionW: 250, + }, + 'gpu-2': { + _id: 'gpu-2', + name: 'NVIDIA Tesla V100', + clockRateMhz: 1200, + numberOfCores: 5120, + energyConsumptionW: 250, + }, +} + +export const MEMORY_UNITS = { + 'memory-1': { + _id: 'memory-1', + name: 'Samsung PC DRAM K4A4G045WD', + speedMbPerS: 16000, + sizeMb: 4000, + energyConsumptionW: 10, + }, + 'memory-2': { + _id: 'memory-2', + name: 'Samsung PC DRAM M393A2K43BB1-CRC', + speedMbPerS: 2400, + sizeMb: 16000, + energyConsumptionW: 10, + }, + 'memory-3': { + _id: 'memory-3', + name: 'Crucial MTA18ASF4G72PDZ-3G2E1', + speedMbPerS: 3200, + sizeMb: 32000, + energyConsumptionW: 10, + }, + 'memory-4': { + _id: 'memory-4', + name: 'Crucial MTA9ASF2G72PZ-3G2E1', + speedMbPerS: 3200, + sizeMb: 16000, + energyConsumptionW: 10, + }, +} + +export const STORAGE_UNITS = { + 'storage-1': { + _id: 'storage-1', + name: 'Samsung EVO 2016 SATA III', + speedMbPerS: 6000, + sizeMb: 250000, + energyConsumptionW: 10, + }, + 'storage-2': { + _id: 'storage-2', + name: 'Western Digital MTA9ASF2G72PZ-3G2E1', + speedMbPerS: 6000, + sizeMb: 4000000, + energyConsumptionW: 10, + }, +} |
