Skip to content

Commit 26b25f7

Browse files
Cyrille Bourgoisjleveugle
Cyrille Bourgois
authored and
jleveugle
committed
feat(instances): add instance dashboard
1 parent c44af52 commit 26b25f7

File tree

14 files changed

+433
-2
lines changed

14 files changed

+433
-2
lines changed

‎packages/manager/apps/layout-ovh/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
"@ovh-ux/manager-sms": "^6.1.0",
2222
"@ovh-ux/manager-telecom-styles": "^2.0.2",
2323
"@ovh-ux/manager-welcome": "^2.0.0",
24+
"@ovh-ux/ng-ovh-apiv7": "^2.0.0",
2425
"@ovh-ux/ng-at-internet": "^4.0.0",
2526
"@ovh-ux/ng-at-internet-ui-router-plugin": "^2.0.0",
2627
"@ovh-ux/ng-ovh-actions-menu": "^5.0.0-alpha.0",

‎packages/manager/apps/pci/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@
4343
"ovh-angular-pagination-front": "ovh-ux/ovh-angular-pagination-front#^5.1.0",
4444
"ovh-angular-q-allsettled": "ovh-ux/ovh-angular-q-allSettled#^0.3.1",
4545
"ovh-angular-responsive-page-switcher": "^1.1.0",
46+
"ovh-api-services": "^6.4.0",
4647
"ovh-common-style": "^5.0.0",
4748
"ovh-jquery-ui-draggable-ng": "ovh-ux/ovh-jquery-ui-draggable-ng#^0.0.5",
4849
"ovh-manager-webfont": "^1.2.0",

‎packages/manager/apps/pci/webpack.config.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,9 @@ const merge = require('webpack-merge');
22
const path = require('path');
33
const webpackConfig = require('@ovh-ux/manager-webpack-config');
44

5+
console.log(path.resolve(process.cwd(), './node_modules'));
6+
console.log(path.resolve(process.cwd(), '../../../../node_modules'));
7+
58
module.exports = (env = {}) => {
69
const { config } = webpackConfig({
710
template: './index.html',

‎packages/manager/modules/pci/src/projects/project/instances/index.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,16 @@ import '@ovh-ux/ng-translate-async-loader';
44
import 'angular-translate';
55
import 'ovh-api-services';
66

7+
import instance from './instance';
8+
79
import component from './instances.component';
810
import routing from './instances.routing';
911

1012
const moduleName = 'ovhManagerPciInstances';
1113

12-
console.log('instances');
1314
angular
1415
.module(moduleName, [
16+
instance,
1517
'ngTranslateAsyncLoader',
1618
'pascalprecht.translate',
1719
'ovh-api-services',

‎packages/manager/modules/pci/src/projects/project/instances/instance/dashboard/dashboard.component.js‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import controller from './dashboard.controller';
2+
import template from './dashboard.html';
3+
4+
export default {
5+
template,
6+
controller,
7+
bindings: {
8+
projectId: '<',
9+
instanceId: '<',
10+
onClickEdit: '&',
11+
onClickBackupCreate: '&',
12+
onClickRescue: '&',
13+
onClickSoftReboot: '&',
14+
onClickHardReboot: '&',
15+
onClickReinstall: '&',
16+
onClickDelete: '&',
17+
onClickManageVolumes: '&',
18+
onClickVolumeAttach: '&',
19+
onClickNetworkManage: '&',
20+
onClickNetworkAttach: '&',
21+
},
22+
};

‎packages/manager/modules/pci/src/projects/project/instances/instance/dashboard/dashboard.controller.js‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
import find from 'lodash/find';
2+
import filter from 'lodash/filter';
3+
import get from 'lodash/get';
4+
5+
export default /* @ngInject */ function CloudProjectInstanceDashboardCtrl(
6+
$translate,
7+
OvhApiCloudProjectInstance,
8+
OvhApiCloudProjectNetwork,
9+
OvhApiCloudProjectVolume,
10+
) {
11+
this.instance = null;
12+
this.volumes = [];
13+
this.loading = {
14+
instance: false,
15+
volumes: false,
16+
privateNetworks: false,
17+
};
18+
19+
this.$onInit = function $onInit() {
20+
$translate.refresh()
21+
.then(() => this.loadInstance())
22+
.then(() => this.loadAttachedVolumes())
23+
.then(() => this.loadPrivateNetworks());
24+
/*
25+
OvhApiCloud.v6().subsidiaryPrice({
26+
flavorId: 'ac74cb45-d895-47dd-b9cf-c17778033d83',
27+
ovhSubsidiary: 'FR',
28+
region: 'SBG1',
29+
}).$promise.then(console.log);
30+
*/
31+
};
32+
33+
this.loadInstance = function loadInstance() {
34+
this.loading.instance = true;
35+
return OvhApiCloudProjectInstance.v6().get({
36+
serviceName: this.projectId,
37+
instanceId: this.instanceId,
38+
}).$promise.then((instance) => {
39+
this.instance = instance;
40+
}).finally(() => {
41+
this.loading.instance = false;
42+
});
43+
};
44+
45+
this.loadAttachedVolumes = function loadAttachedVolumes() {
46+
this.loading.volumes = true;
47+
return OvhApiCloudProjectVolume.v6().query({
48+
serviceName: this.projectId,
49+
}).$promise.then((volumes) => {
50+
this.volumes = volumes.filter(volume => volume.attachedTo.indexOf(this.instanceId) >= 0);
51+
}).finally(() => {
52+
this.loading.volumes = false;
53+
});
54+
};
55+
56+
this.loadPrivateNetworks = function loadPrivateNetworks() {
57+
this.loading.privateNetworks = true;
58+
return OvhApiCloudProjectNetwork.Private().v6().query({
59+
serviceName: this.projectId,
60+
}).$promise.then((networks) => {
61+
this.networks = filter(networks, { type: 'private' });
62+
}).finally(() => {
63+
this.loading.privateNetworks = false;
64+
});
65+
};
66+
67+
this.getIp = function getIp(ipVersion = 4) {
68+
return get(find(get(this.instance, 'ipAddresses'), {
69+
type: 'public',
70+
version: ipVersion,
71+
}), 'ip');
72+
};
73+
74+
this.getConnectionInfos = function getConnectionInfos() {
75+
const user = get(this.instance, 'image.user') || 'user';
76+
const ip = this.getIp(4) || this.getIp(6) || 'X.X.X.X';
77+
return get(this.instance, 'image.type') === 'windows'
78+
? `rdekstop ${ip}` : `ssh ${user}@${ip}`;
79+
};
80+
}

‎packages/manager/modules/pci/src/projects/project/instances/instance/dashboard/dashboard.html‎

Lines changed: 186 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,186 @@
1+
<div>
2+
<h1 ng-bind="$ctrl.instance.name"></h1>
3+
<div class="row">
4+
<div class="col-md-4">
5+
<oui-tile heading="{{ 'cloud_project_instance_dashboard_manage' | translate }}">
6+
<oui-tile-button on-click="$ctrl.onClickEdit({ instance: $ctrl.instance })">
7+
<span translate="cloud_project_instance_dashboard_edit"></span>
8+
</oui-tile-button>
9+
<oui-tile-button on-click="$ctrl.onClickBackupCreate({ instance: $ctrl.instance })">
10+
<span translate="cloud_project_instance_dashboard_backup_create"></span>
11+
</oui-tile-button>
12+
<oui-tile-button on-click="$ctrl.onClickRescue({ instance: $ctrl.instance })">
13+
<span translate="cloud_project_instance_dashboard_rescue"></span>
14+
</oui-tile-button>
15+
<oui-tile-button on-click="$ctrl.onClickSoftReboot({ instance: $ctrl.instance })">
16+
<span translate="cloud_project_instance_dashboard_soft_reboot"></span>
17+
</oui-tile-button>
18+
<oui-tile-button on-click="$ctrl.onClickHardReboot({ instance: $ctrl.instance })">
19+
<span translate="cloud_project_instance_dashboard_hard_reboot"></span>
20+
</oui-tile-button>
21+
<oui-tile-button on-click="$ctrl.onClickReinstall({ instance: $ctrl.instance })">
22+
<span translate="cloud_project_instance_dashboard_reinstall"></span>
23+
</oui-tile-button>
24+
<oui-tile-button on-click="$ctrl.onClickDelete({ instance: $ctrl.instance })">
25+
<span translate="cloud_project_instance_dashboard_delete"></span>
26+
</oui-tile-button>
27+
</oui-tile>
28+
</div>
29+
<div class="col-md-4">
30+
<oui-tile heading="{{:: 'cloud_project_instance_dashboard_info' | translate }}"
31+
loading="$ctrl.loading.instance">
32+
<oui-tile-definition term="{{:: 'cloud_project_instance_dashboard_status' | translate }}">
33+
<oui-tile-description>
34+
<ovh-manager-pci-project-instance-dashboard-instance-status-component status="$ctrl.instance.status">
35+
</ovh-manager-pci-project-instance-dashboard-instance-status-component>
36+
</oui-tile-description>
37+
</oui-tile-definition>
38+
<oui-tile-definition term="{{:: 'cloud_project_instance_dashboard_localisation' | translate }}">
39+
<oui-tile-description>
40+
<span ng-bind="$ctrl.instance.region"></span>
41+
</oui-tile-description>
42+
</oui-tile-definition>
43+
<div class="oui-tile__item">
44+
<dl class="oui-tile__definition">
45+
<dt class="oui-tile__term"
46+
translate="cloud_project_instance_dashboard_type">
47+
</dt>
48+
<dd class="oui-tile__description">
49+
<span ng-bind="$ctrl.instance.flavor.name | uppercase"></span>
50+
</dd>
51+
<dt class="oui-tile__term"
52+
translate="cloud_project_instance_dashboard_ram">
53+
</dt>
54+
<dd class="oui-tile__description">
55+
<span ng-bind="$ctrl.instance.flavor.ram * 1000 * 1000 | cucBytes"></span>
56+
</dd>
57+
<dt class="oui-tile__term">
58+
<span translate="cloud_project_instance_dashboard_cpu"></span>
59+
</dt>
60+
<dd class="oui-tile__description">
61+
<span ng-bind="$ctrl.instance.flavor.vcpus"></span>
62+
<span translate="cloud_project_instance_dashboard_cores"></span>
63+
</dd>
64+
<dt class="oui-tile__term"
65+
translate="cloud_project_instance_dashboard_storage">
66+
</dt>
67+
<dd class="oui-tile__description">
68+
<span ng-bind="$ctrl.instance.flavor.disk * 1024 * 1024 * 1024 | cucBytes:2:'true'"></span>
69+
</dd>
70+
<dt class="oui-tile__term"
71+
translate="cloud_project_instance_dashboard_bandwidth">
72+
</dt>
73+
<dd class="oui-tile__description">
74+
<span ng-bind="$ctrl.instance.flavor.outboundBandwidth"></span>
75+
<span translate="cloud_project_instance_dashboard_bandwidth_unit"></span>
76+
</dd>
77+
</dl>
78+
</div>
79+
<div class="oui-tile__item" ng-if="$ctrl.loading.volumes">
80+
<dl class="oui-tile__definition">
81+
<dt class="oui-tile__term"
82+
translate="cloud_project_instance_dashboard_volumes">
83+
</dt>
84+
<dd class="oui-tile__description text-center">
85+
<oui-spinner size="m"></oui-spinner>
86+
</dd>
87+
</dl>
88+
</div>
89+
<oui-tile-definition term="{{:: 'cloud_project_instance_dashboard_volumes' | translate }}">
90+
<oui-tile-description
91+
ng-if="!$ctrl.loading.volumes"
92+
ng-repeat="volume in $ctrl.volumes track by volume.id">
93+
<span ng-bind="volume.name"></span>
94+
<span ng-bind="volume.size * 1024 * 1024 * 1024 | cucBytes:2:'true'"></span>
95+
</oui-tile-description>
96+
<oui-tile-description
97+
ng-if="!$ctrl.loading.volumes && $ctrl.volumes.length === 0">
98+
<span>-</span>
99+
</oui-tile-description>
100+
<oui-action-menu data-compact align="end">
101+
<oui-action-menu-item text="{{:: 'cloud_project_instance_dashboard_volumes_manage' | translate }}"
102+
on-click="$ctrl.onClickManageVolumes({ instance: $ctrl.instance })">
103+
</oui-action-menu-item>
104+
<oui-action-menu-item text="{{:: 'cloud_project_instance_dashboard_volume_attach' | translate }}"
105+
on-click="$ctrl.onClickVolumeAttach({ instance: $ctrl.instance })">
106+
</oui-action-menu-item>
107+
</oui-action-menu>
108+
</oui-tile-definition>
109+
<oui-tile-definition term="{{:: 'cloud_project_instance_dashboard_openstack_id' | translate }}">
110+
<oui-tile-description>
111+
<span ng-bind="$ctrl.instance.id"></span>
112+
</oui-tile-description>
113+
</oui-tile-definition>
114+
<oui-tile-definition term="{{:: 'cloud_project_instance_dashboard_image' | translate }}">
115+
<oui-tile-description>
116+
<span ng-bind="$ctrl.instance.image.name || '-'"></span>
117+
</oui-tile-description>
118+
</oui-tile-definition>
119+
</oui-tile>
120+
</div>
121+
<div class="col-md-4">
122+
<oui-tile heading="{{:: 'cloud_project_instance_dashboard_networks' | translate }}"
123+
loading="$ctrl.loading.instance">
124+
<oui-tile-definition term="{{:: 'cloud_project_instance_dashboard_ipv4' | translate }}">
125+
<oui-tile-description>
126+
<oui-clipboard
127+
ng-if="$ctrl.getIp(4)"
128+
model="$ctrl.getIp(4) || ''">
129+
</oui-clipboard>
130+
<span ng-if="!$ctrl.getIp(4)">-</span>
131+
</oui-tile-description>
132+
</oui-tile-definition>
133+
<oui-tile-definition term="{{:: 'cloud_project_instance_dashboard_ipv6' | translate }}">
134+
<oui-tile-description>
135+
<oui-clipboard
136+
ng-if="$ctrl.getIp(6)"
137+
model="$ctrl.getIp(6)">
138+
</oui-clipboard>
139+
<span ng-if="!$ctrl.getIp(6)">-</span>
140+
</oui-tile-description>
141+
</oui-tile-definition>
142+
<div class="oui-tile__item" ng-if="$ctrl.loading.privateNetworks">
143+
<dl class="oui-tile__definition">
144+
<dt class="oui-tile__term"
145+
translate="cloud_project_instance_dashboard_private_networks">
146+
</dt>
147+
<dd class="oui-tile__description text-center">
148+
<oui-spinner size="m"></oui-spinner>
149+
</dd>
150+
</dl>
151+
</div>
152+
<oui-tile-definition
153+
ng-if="!$ctrl.loading.privateNetworks"
154+
term="{{:: 'cloud_project_instance_dashboard_private_networks' | translate }}">
155+
<oui-tile-description
156+
ng-if="!$ctrl.loading.privateNetworks && $ctrl.privateNetworks.length === 0">
157+
<span>-</span>
158+
</oui-tile-description>
159+
<oui-tile-description
160+
ng-if="!$ctrl.loading.privateNetworks"
161+
ng-repeat="network in $ctrl.networks track by network.id">
162+
<span ng-bind="network.name"></span>
163+
</oui-tile-description>
164+
<oui-action-menu data-compact align="end">
165+
<oui-action-menu-item text="{{:: 'cloud_project_instance_dashboard_private_networks_manage' | translate }}"
166+
on-click="$ctrl.onClickNetworkManage({ instance: $ctrl.instance })">
167+
</oui-action-menu-item>
168+
<oui-action-menu-item text="{{:: 'cloud_project_instance_dashboard_private_networks_attach' | translate }}"
169+
on-click="$ctrl.onClickNetworkAttach({ instance: $ctrl.instance })">
170+
</oui-action-menu-item>
171+
</oui-action-menu>
172+
</oui-tile-definition>
173+
<oui-tile-definition term="{{:: 'cloud_project_instance_dashboard_connection_info' | translate }}">
174+
<oui-tile-description>
175+
<oui-clipboard model="$ctrl.getConnectionInfos()"></oui-clipboard>
176+
</oui-tile-description>
177+
</oui-tile-definition>
178+
<oui-tile-definition term="{{:: 'cloud_project_instance_dashboard_ssh_key' | translate }}">
179+
<oui-tile-description>
180+
<span ng-bind="$ctrl.instance.sshKey.name || '-'"></span>
181+
</oui-tile-description>
182+
</oui-tile-definition>
183+
</oui-tile>
184+
</div>
185+
</div>
186+
</div>

‎packages/manager/modules/pci/src/projects/project/instances/instance/dashboard/dashboard.routing.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
export default /* @ngInject */ ($stateProvider) => {
2+
$stateProvider.state('pci.projects.project.instances.instance.dashboard', {
3+
url: '/dashboard',
4+
component: 'ovhManagerPciProjectInstanceDashboardComponent',
5+
atInternet: { ignore: true },
6+
translations: ['.'],
7+
});
8+
};

‎packages/manager/modules/pci/src/projects/project/instances/instance/dashboard/index.js‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import angular from 'angular';
2+
import '@uirouter/angularjs';
3+
import '@ovh-ux/ng-translate-async-loader';
4+
5+
import component from './dashboard.component';
6+
import instanceStatusComponent from './instance-status.component';
7+
import routing from './dashboard.routing';
8+
9+
const moduleName = 'ovhManagerPciProjectInstanceDashboard';
10+
11+
angular
12+
.module(moduleName, [
13+
'ngOvhOtrs',
14+
'ui.router',
15+
])
16+
.component('ovhManagerPciProjectInstanceDashboardComponent', component)
17+
.component('ovhManagerPciProjectInstanceDashboardInstanceStatusComponent', instanceStatusComponent)
18+
.config(routing)
19+
.run(/* @ngTranslationsInject:json ./translations */);
20+
21+
export default moduleName;

0 commit comments

Comments
 (0)