feat(i18n): translate sidebar & dashboard

feat807-i18n
Anthony Lapenna 2017-08-18 16:30:57 +02:00
parent 1a2ed3a6a4
commit ed9df4f139
7 changed files with 251 additions and 51 deletions

View File

@ -1,31 +1,33 @@
<rd-header>
<rd-header-title title="Home">
<rd-header-title title="DASHBOARD.HEADER.TITLE">
<i id="loadingViewSpinner" class="fa fa-cog fa-spin"></i>
</rd-header-title>
<rd-header-content>Dashboard</rd-header-content>
<rd-header-content>
<por-translation key="DASHBOARD.HEADER.CONTENT"></por-translation>
</rd-header-content>
</rd-header>
<div class="row">
<div class="col-lg-12 col-md-12 col-xs-12" ng-if="applicationState.endpoint.mode.provider !== 'DOCKER_SWARM'">
<div class="col-md-12" ng-if="applicationState.endpoint.mode.provider !== 'DOCKER_SWARM'">
<rd-widget>
<rd-widget-header icon="fa-tachometer" title="DASHBOARD.WIDGET_NODE.TITLE"></rd-widget-header>
<rd-widget-body classes="no-padding">
<table class="table">
<tbody>
<tr>
<td translate>DASHBOARD.WIDGET_NODE.NODE_NAME</td>
<td><por-translation key="DASHBOARD.WIDGET_NODE.NODE_NAME"></por-translation></td>
<td>{{ infoData.Name }}</td>
</tr>
<tr>
<td translate>DASHBOARD.WIDGET_NODE.DOCKER_VERSION</td>
<td><por-translation key="DASHBOARD.WIDGET_NODE.DOCKER_VERSION"></por-translation></td>
<td>{{ infoData.ServerVersion }}</td>
</tr>
<tr>
<td translate>DASHBOARD.WIDGET_NODE.CPU</td>
<td><por-translation key="DASHBOARD.WIDGET_NODE.CPU"></por-translation></td>
<td>{{ infoData.NCPU }}</td>
</tr>
<tr>
<td translate>DASHBOARD.WIDGET_NODE.MEMORY</td>
<td><por-translation key="DASHBOARD.WIDGET_NODE.MEMORY"></por-translation></td>
<td>{{ infoData.MemTotal|humansize }}</td>
</tr>
</tbody>
@ -33,26 +35,26 @@
</rd-widget-body>
</rd-widget>
</div>
<div class="col-lg-12 col-md-12 col-xs-12" ng-if="applicationState.endpoint.mode.provider === 'DOCKER_SWARM'">
<div class="col-md-12" ng-if="applicationState.endpoint.mode.provider === 'DOCKER_SWARM'">
<rd-widget>
<rd-widget-header icon="fa-tachometer" title="Cluster info"></rd-widget-header>
<rd-widget-header icon="fa-tachometer" title="DASHBOARD.WIDGET_CLUSTER.TITLE"></rd-widget-header>
<rd-widget-body classes="no-padding">
<table class="table">
<tbody>
<tr>
<td>Nodes</td>
<td><por-translation key="DASHBOARD.WIDGET_CLUSTER.NODES"></por-translation></td>
<td>{{ infoData.SystemStatus[0][1] == 'primary' ? infoData.SystemStatus[3][1] : infoData.SystemStatus[4][1] }}</td>
</tr>
<tr>
<td>Swarm version</td>
<td><por-translation key="DASHBOARD.WIDGET_CLUSTER.SWARM_VERSION"></por-translation></td>
<td>{{ infoData.ServerVersion|swarmversion }}</td>
</tr>
<tr>
<td>Total CPU</td>
<td><por-translation key="DASHBOARD.WIDGET_CLUSTER.CPU"></por-translation></td>
<td>{{ infoData.NCPU }}</td>
</tr>
<tr>
<td>Total memory</td>
<td><por-translation key="DASHBOARD.WIDGET_CLUSTER.MEMORY"></por-translation></td>
<td>{{ infoData.MemTotal|humansize: 2 }}</td>
</tr>
</tbody>
@ -60,21 +62,23 @@
</rd-widget-body>
</rd-widget>
</div>
<div class="col-lg-12 col-md-12 col-xs-12" ng-if="applicationState.endpoint.mode.provider === 'DOCKER_SWARM_MODE'">
<div class="col-md-12" ng-if="applicationState.endpoint.mode.provider === 'DOCKER_SWARM_MODE'">
<rd-widget>
<rd-widget-header icon="fa-tachometer" title="Swarm info"></rd-widget-header>
<rd-widget-header icon="fa-tachometer" title="DASHBOARD.WIDGET_SWARM.TITLE"></rd-widget-header>
<rd-widget-body classes="no-padding">
<table class="table">
<tbody>
<tr>
<td colspan="2"><span class="small text-muted">This node is part of a Swarm cluster</span></td>
<td colspan="2">
<span class="small text-muted"><por-translation key="DASHBOARD.WIDGET_SWARM.COMMENT"></por-translation></span>
</td>
</tr>
<tr >
<td>Node role</td>
<td><por-translation key="DASHBOARD.WIDGET_SWARM.NODE_ROLE"></por-translation></td>
<td>{{ infoData.Swarm.ControlAvailable ? 'Manager' : 'Worker' }}</td>
</tr>
<tr ng-if="infoData.Swarm.ControlAvailable">
<td>Nodes in the cluster</td>
<td><por-translation key="DASHBOARD.WIDGET_SWARM.NODES_IN_CLUSTER"></por-translation></td>
<td>{{ infoData.Swarm.Nodes }}</td>
</tr>
</tbody>
@ -93,11 +97,11 @@
<i class="fa fa-server"></i>
</div>
<div class="pull-right">
<div><i class="fa fa-heartbeat space-right green-icon"></i>{{ containerData.running }} running</div>
<div><i class="fa fa-heartbeat space-right red-icon"></i>{{ containerData.stopped }} stopped</div>
<div><i class="fa fa-heartbeat space-right green-icon"></i>{{ containerData.running }} <por-translation key="DASHBOARD.WIDGET_CONTAINERS.RUNNING_CONTAINERS"></por-translation></div>
<div><i class="fa fa-heartbeat space-right red-icon"></i>{{ containerData.stopped }} <por-translation key="DASHBOARD.WIDGET_CONTAINERS.STOPPED_CONTAINERS"></por-translation></div>
</div>
<div class="title">{{ containerData.total }}</div>
<div class="comment">Containers</div>
<div class="comment"><por-translation key="DASHBOARD.WIDGET_CONTAINERS.COMMENT"></por-translation></div>
</rd-widget-body>
</rd-widget>
</a>
@ -113,7 +117,7 @@
<div><i class="fa fa-pie-chart space-right"></i>{{ imageData.size|humansize }}</div>
</div>
<div class="title">{{ imageData.total }}</div>
<div class="comment">Images</div>
<div class="comment"><por-translation key="DASHBOARD.WIDGET_IMAGES.COMMENT"></por-translation></div>
</rd-widget-body>
</rd-widget>
</a>
@ -126,10 +130,10 @@
<i class="fa fa-cubes"></i>
</div>
<div class="pull-right" ng-if="infoData.Driver">
<div><i class="fa fa-hdd-o space-right"></i>{{ infoData.Driver }} driver</div>
<div><i class="fa fa-hdd-o space-right"></i>{{ infoData.Driver }} <por-translation key="DASHBOARD.WIDGET_VOLUMES.DRIVER"></por-translation></div>
</div>
<div class="title">{{ volumeData.total }}</div>
<div class="comment">Volumes</div>
<div class="comment"><por-translation key="DASHBOARD.WIDGET_VOLUMES.COMMENT"></por-translation></div>
</rd-widget-body>
</rd-widget>
</a>
@ -142,12 +146,9 @@
<i class="fa fa-sitemap"></i>
</div>
<div class="title">{{ networkData.total }}</div>
<div class="comment">Networks</div>
<div class="comment"><por-translation key="DASHBOARD.WIDGET_NETWORKS.COMMENT"></por-translation></div>
</rd-widget-body>
</rd-widget>
</a>
</div>
</div>
<div class="row">
</div>

View File

@ -9,68 +9,121 @@
</a>
</li>
<li class="sidebar-title">
<span>Active endpoint</span>
<por-translation key="SIDEBAR.ACTIVE_ENDPOINT.TITLE"></por-translation>
</li>
<li class="sidebar-title">
<select class="select-endpoint form-control" ng-options="endpoint.Name for endpoint in endpoints" ng-model="activeEndpoint" ng-change="switchEndpoint(activeEndpoint)">
</select>
</li>
<li class="sidebar-title"><span>Endpoint actions</span></li>
<li class="sidebar-list">
<a ui-sref="dashboard" ui-sref-active="active">Dashboard <span class="menu-icon fa fa-tachometer"></span></a>
<li class="sidebar-title">
<!-- <span>Endpoint actions</span> -->
<por-translation key="SIDEBAR.ENDPOINT_ACTIONS.TITLE"></por-translation>
</li>
<li class="sidebar-list">
<a ui-sref="templates" ui-sref-active="active">App Templates <span class="menu-icon fa fa-rocket"></span></a>
<a ui-sref="dashboard" ui-sref-active="active">
<por-translation key="SIDEBAR.ENDPOINT_ACTIONS.DASHBOARD"></por-translation>
<span class="menu-icon fa fa-tachometer"></span>
</a>
</li>
<li class="sidebar-list">
<a ui-sref="templates" ui-sref-active="active">
<por-translation key="SIDEBAR.ENDPOINT_ACTIONS.APP_TEMPLATES"></por-translation>
<span class="menu-icon fa fa-rocket"></span>
</a>
<div class="sidebar-sublist" ng-if="toggle && displayExternalContributors && ($state.current.name === 'templates' || $state.current.name === 'templates_linuxserver')">
<a ui-sref="templates_linuxserver" ui-sref-active="active">LinuxServer.io</a>
</div>
</li>
<li class="sidebar-list" ng-if="applicationState.endpoint.mode.provider === 'DOCKER_SWARM_MODE' && applicationState.endpoint.mode.role === 'MANAGER'">
<a ui-sref="services" ui-sref-active="active">Services <span class="menu-icon fa fa-list-alt"></span></a>
<a ui-sref="services" ui-sref-active="active">
<por-translation key="SIDEBAR.ENDPOINT_ACTIONS.SERVICES"></por-translation>
<span class="menu-icon fa fa-list-alt"></span>
</a>
</li>
<li class="sidebar-list">
<a ui-sref="containers" ui-sref-active="active">Containers <span class="menu-icon fa fa-server"></span></a>
<a ui-sref="containers" ui-sref-active="active">
<por-translation key="SIDEBAR.ENDPOINT_ACTIONS.CONTAINERS"></por-translation>
<span class="menu-icon fa fa-server"></span>
</a>
</li>
<li class="sidebar-list">
<a ui-sref="images" ui-sref-active="active">Images <span class="menu-icon fa fa-clone"></span></a>
<a ui-sref="images" ui-sref-active="active">
<por-translation key="SIDEBAR.ENDPOINT_ACTIONS.IMAGES"></por-translation>
<span class="menu-icon fa fa-clone"></span>
</a>
</li>
<li class="sidebar-list">
<a ui-sref="networks" ui-sref-active="active">Networks <span class="menu-icon fa fa-sitemap"></span></a>
<a ui-sref="networks" ui-sref-active="active">
<por-translation key="SIDEBAR.ENDPOINT_ACTIONS.NETWORKS"></por-translation>
<span class="menu-icon fa fa-sitemap"></span>
</a>
</li>
<li class="sidebar-list">
<a ui-sref="volumes" ui-sref-active="active">Volumes <span class="menu-icon fa fa-cubes"></span></a>
<a ui-sref="volumes" ui-sref-active="active">
<por-translation key="SIDEBAR.ENDPOINT_ACTIONS.VOLUMES"></por-translation>
<span class="menu-icon fa fa-cubes"></span>
</a>
</li>
<li class="sidebar-list" ng-if="applicationState.endpoint.apiVersion >= 1.25 && applicationState.endpoint.mode.provider === 'DOCKER_SWARM_MODE' && applicationState.endpoint.mode.role === 'MANAGER'">
<a ui-sref="secrets" ui-sref-active="active">Secrets <span class="menu-icon fa fa-user-secret"></span></a>
<a ui-sref="secrets" ui-sref-active="active">
<por-translation key="SIDEBAR.ENDPOINT_ACTIONS.SECRETS"></por-translation>
<span class="menu-icon fa fa-user-secret"></span>
</a>
</li>
<li class="sidebar-list" ng-if="applicationState.endpoint.mode.provider === 'DOCKER_STANDALONE' || applicationState.endpoint.mode.provider === 'VMWARE_VIC'">
<a ui-sref="events" ui-sref-active="active">Events <span class="menu-icon fa fa-history"></span></a>
<a ui-sref="events" ui-sref-active="active">
<por-translation key="SIDEBAR.ENDPOINT_ACTIONS.EVENTS"></por-translation>
<span class="menu-icon fa fa-history"></span>
</a>
</li>
<li class="sidebar-list" ng-if="applicationState.endpoint.mode.provider === 'DOCKER_SWARM' || (applicationState.endpoint.mode.provider === 'DOCKER_SWARM_MODE' && applicationState.endpoint.mode.role === 'MANAGER')">
<a ui-sref="swarm" ui-sref-active="active">Swarm <span class="menu-icon fa fa-object-group"></span></a>
<a ui-sref="swarm" ui-sref-active="active">
<por-translation key="SIDEBAR.ENDPOINT_ACTIONS.SWARM"></por-translation>
<span class="menu-icon fa fa-object-group"></span>
</a>
</li>
<li class="sidebar-list" ng-if="applicationState.endpoint.mode.provider === 'DOCKER_STANDALONE' || applicationState.endpoint.mode.provider === 'VMWARE_VIC'">
<a ui-sref="docker" ui-sref-active="active">Docker <span class="menu-icon fa fa-th"></span></a>
<a ui-sref="docker" ui-sref-active="active">
<por-translation key="SIDEBAR.ENDPOINT_ACTIONS.DOCKER"></por-translation>
<span class="menu-icon fa fa-th"></span>
</a>
</li>
<li class="sidebar-title" ng-if="!applicationState.application.authentication || isAdmin || isTeamLeader">
<span>Portainer settings</span>
<por-translation key="SIDEBAR.PORTAINER_SETTINGS.TITLE"></por-translation>
<!-- <span>Portainer settings</span> -->
</li>
<li class="sidebar-list" ng-if="applicationState.application.authentication && (isAdmin || isTeamLeader)">
<a ui-sref="users" ui-sref-active="active">User management <span class="menu-icon fa fa-users"></span></a>
<a ui-sref="users" ui-sref-active="active">
<por-translation key="SIDEBAR.PORTAINER_SETTINGS.USER_MANAGEMENT.TITLE"></por-translation>
<span class="menu-icon fa fa-users"></span>
</a>
<div class="sidebar-sublist" ng-if="toggle && ($state.current.name === 'users' || $state.current.name === 'user' || $state.current.name === 'teams' || $state.current.name === 'team')">
<a ui-sref="teams" ui-sref-active="active">Teams</a>
<a ui-sref="teams" ui-sref-active="active">
<por-translation key="SIDEBAR.PORTAINER_SETTINGS.USER_MANAGEMENT.TEAMS"></por-translation>
</a>
</div>
</li>
<li class="sidebar-list" ng-if="!applicationState.application.authentication || isAdmin">
<a ui-sref="endpoints" ui-sref-active="active">Endpoints <span class="menu-icon fa fa-plug"></span></a>
<a ui-sref="endpoints" ui-sref-active="active">
<por-translation key="SIDEBAR.PORTAINER_SETTINGS.ENDPOINTS"></por-translation>
<span class="menu-icon fa fa-plug"></span>
</a>
</li>
<li class="sidebar-list" ng-if="!applicationState.application.authentication || isAdmin">
<a ui-sref="registries" ui-sref-active="active">Registries <span class="menu-icon fa fa-database"></span></a>
<a ui-sref="registries" ui-sref-active="active">
<por-translation key="SIDEBAR.PORTAINER_SETTINGS.REGISTRIES"></por-translation>
<span class="menu-icon fa fa-database"></span>
</a>
</li>
<li class="sidebar-list" ng-if="!applicationState.application.authentication || isAdmin">
<a ui-sref="settings" ui-sref-active="active">Settings <span class="menu-icon fa fa-cogs"></span></a>
<a ui-sref="settings" ui-sref-active="active">
<por-translation key="SIDEBAR.PORTAINER_SETTINGS.SETTINGS.TITLE"></por-translation>
<span class="menu-icon fa fa-cogs"></span>
</a>
<div class="sidebar-sublist" ng-if="toggle && ($state.current.name === 'settings' || $state.current.name === 'settings_authentication') && applicationState.application.authentication && isAdmin">
<a ui-sref="settings_authentication" ui-sref-active="active">Authentication</a>
<a ui-sref="settings_authentication" ui-sref-active="active">
<por-translation key="SIDEBAR.PORTAINER_SETTINGS.SETTINGS.AUTHENTICATION"></por-translation>
</a>
</div>
</li>
</ul>

View File

@ -7,7 +7,7 @@ angular
link: function (scope, iElement, iAttrs) {
scope.username = Authentication.getUserDetails().username;
},
template: '<div class="breadcrumb-links"><div class="pull-left" ng-transclude></div><div class="pull-right" ng-if="username"><a ui-sref="userSettings" style="margin-right: 5px;"><u><i class="fa fa-wrench" aria-hidden="true"></i> my account </u></a><a ui-sref="auth({logout: true})" class="text-danger" style="margin-right: 25px;"><u><i class="fa fa-sign-out" aria-hidden="true"></i> log out</u></a></div></div>',
template: '<div class="breadcrumb-links"><div class="pull-left" ng-transclude></div><div class="pull-right" ng-if="username"><a ui-sref="userSettings" style="margin-right: 5px;"><u><i class="fa fa-wrench" aria-hidden="true"></i> <por-translation key="WIDGETS.HEADER_CONTENT.USER_PREFERENCES"></por-translation></u></a><a ui-sref="auth({logout: true})" class="text-danger" style="margin-right: 25px;"><u><i class="fa fa-sign-out" aria-hidden="true"></i> <por-translation key="WIDGETS.HEADER_CONTENT.LOGOUT"></por-translation></u></a></div></div>',
restrict: 'E'
};
return directive;

View File

@ -10,7 +10,7 @@ angular
scope.username = Authentication.getUserDetails().username;
},
transclude: true,
template: '<div class="page white-space-normal">{{title}}<span class="header_title_content" ng-transclude></span><span class="pull-right user-box" ng-if="username"><i class="fa fa-user-circle-o" aria-hidden="true"></i> {{username}}</span></div>',
template: '<div class="page white-space-normal"><por-translation key="{{title}}"></por-translation><span class="header_title_content" ng-transclude></span><span class="pull-right user-box" ng-if="username"><i class="fa fa-user-circle-o" aria-hidden="true"></i> {{username}}</span></div>',
restrict: 'E'
};
return directive;

View File

@ -0,0 +1,6 @@
angular.module('portainer').component('porTranslation', {
bindings: {
'key': '@'
},
template: '<span translate>{{ $ctrl.key }}</span>'
});

View File

@ -1,11 +1,81 @@
{
"WIDGETS": {
"HEADER_CONTENT": {
"USER_PREFERENCES": "my account",
"LOGOUT": "log out"
}
},
"SIDEBAR": {
"ACTIVE_ENDPOINT": {
"TITLE": "Active endpoint"
},
"ENDPOINT_ACTIONS": {
"TITLE": "Endpoint actions",
"DASHBOARD": "Dashboard",
"APP_TEMPLATES": "App Templates",
"SERVICES": "Services",
"CONTAINERS": "Containers",
"IMAGES": "Images",
"NETWORKS": "Networks",
"VOLUMES": "Volumes",
"SECRETS": "Secrets",
"EVENTS": "Events",
"SWARM": "Swarm",
"DOCKER": "Docker"
},
"PORTAINER_SETTINGS": {
"TITLE": "Portainer settings",
"USER_MANAGEMENT": {
"TITLE": "User management",
"TEAMS": "Teams"
},
"ENDPOINTS": "Endpoints",
"REGISTRIES": "Registries",
"SETTINGS": {
"TITLE": "Settings",
"AUTHENTICATION": "Authentication"
}
}
},
"DASHBOARD": {
"HEADER": {
"TITLE": "Home",
"CONTENT": "Dashboard"
},
"WIDGET_CLUSTER": {
"TITLE": "Cluster info",
"NODES": "Nodes",
"SWARM_VERSION": "Swarm version",
"CPU": "Total CPU",
"MEMORY": "Total memory"
},
"WIDGET_SWARM": {
"TITLE": "Swarm info",
"COMMENT": "This node is part of a Swarm cluster",
"NODE_ROLE": "Node role",
"NODES_IN_CLUSTER": "Nodes in the cluster"
},
"WIDGET_NODE": {
"TITLE": "Node info",
"NODE_NAME": "Name",
"DOCKER_VERSION": "Docker version",
"CPU": "CPU",
"MEMORY": "Memory"
},
"WIDGET_CONTAINERS": {
"COMMENT": "Containers",
"RUNNING_CONTAINERS": "running",
"STOPPED_CONTAINERS": "stopped"
},
"WIDGET_IMAGES": {
"COMMENT": "Images"
},
"WIDGET_VOLUMES": {
"COMMENT": "Volumes",
"DRIVER": "driver"
},
"WIDGET_NETWORKS": {
"COMMENT": "Networks"
}
}
}

View File

@ -1,11 +1,81 @@
{
"WIDGETS": {
"HEADER_CONTENT": {
"USER_PREFERENCES": "mon compte",
"LOGOUT": "se déconnecter"
}
},
"SIDEBAR": {
"ACTIVE_ENDPOINT": {
"TITLE": "Environnement actif"
},
"ENDPOINT_ACTIONS": {
"TITLE": "Actions de l'environnement",
"DASHBOARD": "Tableau de bord",
"APP_TEMPLATES": "App Templates",
"SERVICES": "Services",
"CONTAINERS": "Conteneurs",
"IMAGES": "Images",
"NETWORKS": "Réseaux",
"VOLUMES": "Volumes",
"SECRETS": "Secrets",
"EVENTS": "Evénements",
"SWARM": "Swarm",
"DOCKER": "Docker"
},
"PORTAINER_SETTINGS": {
"TITLE": "Paramètres de Portainer",
"USER_MANAGEMENT": {
"TITLE": "Gestion utilisateurs",
"TEAMS": "Equipes"
},
"ENDPOINTS": "Environnements",
"REGISTRIES": "Registres",
"SETTINGS": {
"TITLE": "Paramètres",
"AUTHENTICATION": "Authentification"
}
}
},
"DASHBOARD": {
"HEADER": {
"TITLE": "Accueil",
"CONTENT": "Tableau de bord"
},
"WIDGET_CLUSTER": {
"TITLE": "Informations à propos du cluster",
"NODES": "Nombre de noeuds",
"SWARM_VERSION": "Version de Swarm",
"CPU": "Total des processeurs",
"MEMORY": "Mémoire totale"
},
"WIDGET_SWARM": {
"TITLE": "Informations à propos de Swarm",
"COMMENT": "Cet hôte fait partie d'un cluster Swarm",
"NODE_ROLE": "Rôle de l'hôte",
"NODES_IN_CLUSTER": "Nombre d'hôtes dans le cluster"
},
"WIDGET_NODE": {
"TITLE": "Informations à propos de l'hôte",
"NODE_NAME": "Nom",
"DOCKER_VERSION": "Version de Docker",
"CPU": "Processeurs",
"MEMORY": "Mémoire"
},
"WIDGET_CONTAINERS": {
"COMMENT": "Conteneurs",
"RUNNING_CONTAINERS": "en marche",
"STOPPED_CONTAINERS": "à l'arrêt"
},
"WIDGET_IMAGES": {
"COMMENT": "Images"
},
"WIDGET_VOLUMES": {
"COMMENT": "Volumes",
"DRIVER": "driver"
},
"WIDGET_NETWORKS": {
"COMMENT": "Réseaux"
}
}
}